Skip to content

Commit 93d0dbc

Browse files
scttcperscttcper
authored
deps(ui): Upgrade framer-motion v12 (getsentry#89641)
Fixes an issue we had with react 19 where prop types were not correctly inferred when doing `styled(motion.div)`. https://github.com/motiondivision/motion/blob/main/CHANGELOG.md
1 parent 4d8a135 commit 93d0dbc

File tree

20 files changed

+48
-55
lines changed

20 files changed

+48
-55
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
"esbuild": "^0.25.0",
116116
"focus-trap": "^7.3.1",
117117
"fork-ts-checker-webpack-plugin": "^9.0.2",
118-
"framer-motion": "^11.3.21",
118+
"framer-motion": "12.7.3",
119119
"fuse.js": "^6.6.2",
120120
"gettext-parser": "1.3.1",
121121
"gl-matrix": "^3.4.3",

‎static/app/components/alerts/toastIndicator.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function ToastIndicator({indicator, onDismiss, className, ...props}: Props) {
6868
);
6969
}
7070

71-
const Toast = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
71+
const Toast = styled(motion.div)`
7272
display: flex;
7373
align-items: center;
7474
height: 40px;

‎static/app/components/checkInTimeline/timelineCursor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ function useTimelineCursor<E extends HTMLElement>({
137137
return {cursorContainerRef: containerRef, timelineCursor};
138138
}
139139

140-
const Cursor = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
140+
const Cursor = styled(motion.div)`
141141
pointer-events: none;
142142
background: ${p => p.theme.translucentBorder};
143143
width: 2px;

‎static/app/components/checkInTimeline/timelineZoom.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
167167
return {selectionContainerRef: containerRef, isActive, timelineSelector};
168168
}
169169

170-
const Selection = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
170+
const Selection = styled(motion.div)`
171171
pointer-events: none;
172172
background: ${p => p.theme.translucentBorder};
173173
border-left: 1px solid ${p => p.theme.purple200};

‎static/app/components/core/menuListItem/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -242,11 +242,9 @@ const StyledPositionWrapper = styled(PositionWrapper)`
242242
}
243243
`;
244244

245-
const StyledOverlay = styled(Overlay)<
246-
{
247-
size: Props['size'];
248-
} & React.HTMLAttributes<HTMLDivElement>
249-
>`
245+
const StyledOverlay = styled(Overlay)<{
246+
size: Props['size'];
247+
}>`
250248
padding: 4px;
251249
font-size: ${p => p.theme.form[p.size ?? 'md'].fontSize};
252250
cursor: auto;

‎static/app/components/deprecatedSmartSearchBar/searchBarDatePicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ function TimeInput({time, setTime}: TimeInputProps) {
172172
);
173173
}
174174

175-
const SearchBarDatePickerOverlay = styled(Overlay)<React.HTMLAttributes<HTMLDivElement>>`
175+
const SearchBarDatePickerOverlay = styled(Overlay)`
176176
position: absolute;
177177
top: 100%;
178178
left: -1px;

‎static/app/components/deprecatedSmartSearchBar/searchDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,7 @@ function QueryItem({item, additionalSearchConfig}: QueryItemProps) {
484484
);
485485
}
486486

487-
const SearchDropdownOverlay = styled(Overlay)<React.HTMLAttributes<HTMLDivElement>>`
487+
const SearchDropdownOverlay = styled(Overlay)`
488488
position: absolute;
489489
top: 100%;
490490
left: -1px;

‎static/app/components/events/autofix/autofixHighlightPopup.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -474,9 +474,7 @@ function AutofixHighlightPopup(props: Props) {
474474
);
475475
}
476476

477-
const Wrapper = styled(motion.div)<
478-
{isFocused?: boolean} & React.HTMLAttributes<HTMLDivElement>
479-
>`
477+
const Wrapper = styled(motion.div)<{isFocused?: boolean}>`
480478
z-index: ${p => (p.isFocused ? p.theme.zIndex.tooltip + 1 : p.theme.zIndex.tooltip)};
481479
display: flex;
482480
flex-direction: column;
@@ -500,9 +498,7 @@ const ScaleContainer = styled(motion.div)<{isFocused?: boolean}>`
500498
transition: transform 200ms ease;
501499
`;
502500

503-
const Container = styled(motion.div)<
504-
React.HTMLAttributes<HTMLDivElement> & {isFocused?: boolean}
505-
>`
501+
const Container = styled(motion.div)<{isFocused?: boolean}>`
506502
position: relative;
507503
width: 100%;
508504
border-radius: ${p => p.theme.borderRadius};

‎static/app/components/globalModal/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ const Container = styled('div')`
284284
overflow-y: auto;
285285
`;
286286

287-
const Modal = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
287+
const Modal = styled(motion.div)`
288288
max-width: 100%;
289289
width: 640px;
290290
pointer-events: auto;

‎static/app/components/group/groupSummaryWithAutofix.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ const Content = styled('div')`
283283
position: relative;
284284
`;
285285

286-
const InsightCardButton = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
286+
const InsightCardButton = styled(motion.div)`
287287
border-radius: ${p => p.theme.borderRadius};
288288
border: 1px solid ${p => p.theme.border};
289289
width: 100%;

‎static/app/components/hovercard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ function Hovercard({
153153
);
154154
}
155155

156-
const StyledHovercard = styled(Overlay)<React.HTMLAttributes<HTMLDivElement>>`
156+
const StyledHovercard = styled(Overlay)`
157157
width: 295px;
158158
line-height: 1.2;
159159
h6 {

‎static/app/components/pageOverlay.tsx

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,18 @@ const subItemAnimation = {
3131
},
3232
};
3333

34-
const Header = styled(
35-
(
36-
props: React.ComponentProps<typeof motion.h2> &
37-
React.HTMLAttributes<HTMLHeadingElement>
38-
) => (
39-
<motion.h2 variants={subItemAnimation} transition={testableTransition()} {...props} />
40-
)
41-
)`
34+
const Header = styled((props: React.ComponentProps<typeof motion.h2>) => (
35+
<motion.h2 variants={subItemAnimation} transition={testableTransition()} {...props} />
36+
))`
4237
display: flex;
4338
align-items: center;
4439
font-weight: ${p => p.theme.fontWeightNormal};
4540
margin-bottom: ${space(1)};
4641
`;
4742

48-
const Body = styled(
49-
(
50-
props: React.ComponentProps<typeof motion.div> & React.HTMLAttributes<HTMLDivElement>
51-
) => (
52-
<motion.div
53-
variants={subItemAnimation}
54-
transition={testableTransition()}
55-
{...props}
56-
/>
57-
)
58-
)`
43+
const Body = styled((props: React.ComponentProps<typeof motion.div>) => (
44+
<motion.div variants={subItemAnimation} transition={testableTransition()} {...props} />
45+
))`
5946
margin-bottom: ${space(2)};
6047
`;
6148

‎static/app/components/searchQueryBuilder/tokens/filter/specificDatePicker.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ const StyledPositionWrapper = styled('div')<{visible?: boolean}>`
266266
z-index: ${p => p.theme.zIndex.tooltip};
267267
`;
268268

269-
const SearchBarDatePickerOverlay = styled(Overlay)<React.HTMLAttributes<HTMLDivElement>>`
269+
const SearchBarDatePickerOverlay = styled(Overlay)`
270270
min-width: 332px;
271271
min-height: 380px;
272272
cursor: default;

‎static/app/components/slideOverPanel.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,10 @@ const _SlideOverPanel = styled(motion.div, {
9090
shouldForwardProp: prop =>
9191
['initial', 'animate', 'exit', 'transition'].includes(prop) ||
9292
(prop !== 'collapsed' && isPropValid(prop)),
93-
})<
94-
{
95-
panelWidth?: string;
96-
slidePosition?: 'right' | 'bottom' | 'left';
97-
} & React.HTMLAttributes<HTMLDivElement>
98-
>`
93+
})<{
94+
panelWidth?: string;
95+
slidePosition?: 'right' | 'bottom' | 'left';
96+
}>`
9997
position: fixed;
10098
10199
top: ${p => (p.slidePosition === 'left' ? '54px' : space(2))};

‎static/app/views/nav/secondary/sections/issues/issueViews/issueViewNavItemContent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@ const LeadingItemsWrapper = styled('div')`
341341
margin-right: ${space(0.75)};
342342
`;
343343

344-
const GrabHandleWrapper = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
344+
const GrabHandleWrapper = styled(motion.div)`
345345
display: flex;
346346
align-items: center;
347347
justify-content: center;

‎static/app/views/onboarding/onboarding.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ const StyledStepper = styled(Stepper)`
387387
}
388388
`;
389389

390-
const BackMotionDiv = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
390+
const BackMotionDiv = styled(motion.div)`
391391
position: absolute;
392392
top: 40px;
393393
left: 20px;

‎static/app/views/relocation/relocation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ const StyledStepper = styled(Stepper)`
431431
}
432432
`;
433433

434-
const BackMotionDiv = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
434+
const BackMotionDiv = styled(motion.div)`
435435
position: absolute;
436436
top: 40px;
437437
left: 20px;

‎static/gsApp/components/trialStartedSidebarItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ const startedStyle = (theme: Theme) => css`
208208
}
209209
`;
210210

211-
const Wrapper = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
211+
const Wrapper = styled(motion.div)`
212212
margin: 0 -20px 0 -5px;
213213
padding: 0 20px 0 5px;
214214
border-radius: 4px 0 0 4px;

‎static/gsApp/components/upsellModal/featureList.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const Heading = styled('div')`
116116
gap: ${space(0.5)};
117117
`;
118118

119-
const FeatureLink = styled(motion.div)<React.HTMLAttributes<HTMLDivElement>>`
119+
const FeatureLink = styled(motion.div)`
120120
cursor: pointer;
121121
transition: color 300ms;
122122
color: ${p => p.theme.subText};

‎yarn.lock

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7210,11 +7210,13 @@ [email protected]:
72107210
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
72117211
integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
72127212

7213-
framer-motion@^11.3.21:
7214-
version "11.3.21"
7215-
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.3.21.tgz#bdf06cf3ced9f14ddf055e098c1566795f353466"
7216-
integrity sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==
7213+
framer-motion@12.7.3:
7214+
version "12.7.3"
7215+
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-12.7.3.tgz#06e58221b526ccc49292ced5a439342eb5e58e28"
7216+
integrity sha512-dNT4l5gEnUo2ytXLUBUf6AI21dZ77TMclDKE3ElaIHZ8m90nJ/NCcExW51zdSIaS0RhAS5iXcF7bEIxZe8XG2g==
72177217
dependencies:
7218+
motion-dom "^12.7.3"
7219+
motion-utils "^12.7.2"
72187220
tslib "^2.4.0"
72197221

72207222
[email protected]:
@@ -9371,6 +9373,18 @@ moo-color@^1.0.2:
93719373
dependencies:
93729374
color-name "^1.1.4"
93739375

9376+
motion-dom@^12.7.3:
9377+
version "12.7.3"
9378+
resolved "https://registry.yarnpkg.com/motion-dom/-/motion-dom-12.7.3.tgz#17885ec7f838e45be12791237f97715008258b64"
9379+
integrity sha512-IjMt1YJHrvyvruFvmpmd6bGXXGCvmygrnvSb3aZ8KhOzF4H3PulU+cMBzH+U8TBJHjC/mnmJFRIA1Cu4vBfcBA==
9380+
dependencies:
9381+
motion-utils "^12.7.2"
9382+
9383+
motion-utils@^12.7.2:
9384+
version "12.7.2"
9385+
resolved "https://registry.yarnpkg.com/motion-utils/-/motion-utils-12.7.2.tgz#99b673d8851583b325bd0c8b0f04c5bf42b9b818"
9386+
integrity sha512-XhZwqctxyJs89oX00zn3OGCuIIpVevbTa+u82usWBC6pSHUd2AoNWiYa7Du8tJxJy9TFbZ82pcn5t7NOm1PHAw==
9387+
93749388
mrmime@^2.0.0:
93759389
version "2.0.1"
93769390
resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"

0 commit comments

Comments
 (0)