Merge pull request #30031 from mrginglymus/r19-type-compat

Core: Improve type compatibility with React 19

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/interactions/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,9 +1,9 @@
 import { styled } from 'storybook/internal/theming';
 
-export const ListWrapper = styled.ul(() => ({
+export const ListWrapper = styled.ul({
   display: 'flex',
   flexDirection: 'column',
   rowGap: 16,
   padding: 0,
   margin: 0,
-}));
+});

code/addons/test/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/test/src/components/TestProviderRender.tsx

@@ -379,7 +379,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />
-              ) : // @ts-expect-error: TODO: Fix types
+              ) : // @ts-expect-error @ghengeveld should check whether this is a bug or not
               status === 'unknown' ? (
                 <TestStatusIcon status="unknown" aria-label="status: unknown" />
               ) : (

code/addons/viewport/src/legacy/ToolLegacy.tsx

@@ -74,10 +74,10 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({
   width: height,
 });
 
-const ActiveViewportSize = styled.div(() => ({
+const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/addons/viewport/src/utils.tsx

@@ -7,10 +7,10 @@ import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons';
 
 import type { Viewport, ViewportMap } from './types';
 
-export const ActiveViewportSize = styled.div(() => ({
+export const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 export const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/core/package.json

@@ -296,16 +296,16 @@
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
     "@discoveryjs/json-ext": "^0.5.3",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/is-prop-valid": "^1.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@ndelangen/get-tarball": "^3.0.7",
     "@polka/compression": "^1.0.0-next.28",
     "@popperjs/core": "^2.6.0",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/docs-mdx": "4.0.0-next.1",
@@ -369,7 +369,7 @@
     "js-yaml": "^4.1.0",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
-    "markdown-to-jsx": "^7.4.5",
+    "markdown-to-jsx": "^7.7.2",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
     "nanoid": "^4.0.2",

code/core/src/components/components/bar/button.tsx

@@ -140,11 +140,11 @@ const IconPlaceholder = styled.div(({ theme }) => ({
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
 }));
 
-const IconButtonSkeletonWrapper = styled.div(() => ({
+const IconButtonSkeletonWrapper = styled.div({
   marginTop: 6,
   padding: 7,
   height: 28,
-}));
+});
 
 /** @deprecated This component will be removed in Storybook 9.0 */
 export const IconButtonSkeleton = () => (

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -93,7 +93,7 @@ const NotificationWithInteractiveStates = styled(Notification)({
 const NotificationButton = NotificationWithInteractiveStates.withComponent('div');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 
-const NotificationIconWrapper = styled.div(() => ({
+const NotificationIconWrapper = styled.div({
   display: 'flex',
   marginRight: 10,
   alignItems: 'center',
@@ -102,7 +102,7 @@ const NotificationIconWrapper = styled.div(() => ({
     width: 16,
     height: 16,
   },
-}));
+});
 
 const NotificationTextWrapper = styled.div(({ theme }) => ({
   width: '100%',

code/lib/blocks/package.json

@@ -54,7 +54,7 @@
     "@types/color-convert": "^2.0.0",
     "color-convert": "^2.0.1",
     "es-toolkit": "^1.22.0",
-    "markdown-to-jsx": "^7.4.5",
+    "markdown-to-jsx": "^7.7.2",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-colorful": "^5.1.2",

code/lib/blocks/src/blocks/mdx.tsx

@@ -156,14 +156,17 @@ const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   {}
 );
 
-const OcticonAnchor = styled.a(() => ({
-  float: 'left',
-  lineHeight: 'inherit',
-  paddingRight: '10px',
-  marginLeft: '-24px',
-  // Allow the theme's text color to override the default link color.
-  color: 'inherit',
-}));
+const OcticonAnchor = styled.a(
+  () =>
+    ({
+      float: 'left',
+      lineHeight: 'inherit',
+      paddingRight: '10px',
+      marginLeft: '-24px',
+      // Allow the theme's text color to override the default link color.
+      color: 'inherit',
+    }) as const
+);
 
 interface HeaderWithOcticonAnchorProps {
   as: string;

code/lib/blocks/src/components/ArgsTable/SectionRow.tsx

@@ -74,9 +74,9 @@ const Subsection = styled.td(({ theme }) => ({
   background: theme.background.app,
 }));
 
-const StyledTd = styled.td(() => ({
+const StyledTd = styled.td({
   position: 'relative',
-}));
+});
 
 const StyledTr = styled.tr(({ theme }) => ({
   '&:hover > td': {
@@ -86,7 +86,7 @@ const StyledTr = styled.tr(({ theme }) => ({
   },
 }));
 
-const ClickIntercept = styled.button(() => ({
+const ClickIntercept = styled.button({
   // reset button style
   background: 'none',
   border: 'none',
@@ -103,7 +103,7 @@ const ClickIntercept = styled.button(() => ({
   width: '100%',
   color: 'transparent',
   cursor: 'row-resize !important',
-}));
+});
 
 export const SectionRow: FC<SectionRowProps> = ({
   level = 'section',

code/renderers/react/src/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, JSX } from 'react';
 
 import type { Canvas, WebRenderer } from 'storybook/internal/types';
 

code/vitest-setup.ts

@@ -18,6 +18,7 @@ const ignoreList = [
       /React will try to recreate this component tree from scratch using the error boundary you provided/
     ),
   (error: any) => error.message.includes('Lit is in dev mode. Not recommended for production!'),
+  (error: any) => error.message.includes('error: `DialogContent` requires a `DialogTitle`'),
 ];
 
 const throwMessage = (type: any, message: any) => {