deps(ui): Upgrade emotion

package.json

@@ -17,10 +17,10 @@
     "@babel/runtime": "~7.25.9",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/babel-plugin": "^11.13.5",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@popperjs/core": "^2.11.5",
     "@react-aria/button": "^3.9.8",
     "@react-aria/combobox": "^3.10.3",

static/app/components/events/interfaces/spans/scrollbarManager.tsx

@@ -560,7 +560,8 @@ export const withScrollbarManager = <P extends ScrollbarManagerChildrenProps>(
               ...context,
             } as P;
 
-            return <WrappedComponent {...props} />;
+            // TODO(any): HoC types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+            return <WrappedComponent {...(props as any)} />;
           }}
         </ScrollbarManagerContext.Consumer>
       );

static/app/utils/discover/genericDiscoverQuery.tsx

@@ -320,7 +320,8 @@ export function GenericDiscoverQuery<T, P>(props: OuterProps<T, P>) {
     orgSlug,
     eventView,
   };
-  return <_GenericDiscoverQuery<T, P> {..._props} />;
+  // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+  return <_GenericDiscoverQuery<T, P> {...(_props as any)} />;
 }
 
 export type DiscoverQueryRequestParams = Partial<

static/app/utils/errorHandler.tsx

@@ -37,7 +37,8 @@ export default function errorHandler<P>(WrappedComponent: React.ComponentType<P>
         return <RouteError error={this.state.error} />;
       }
 
-      return <WrappedComponent {...this.props} />;
+      // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+      return <WrappedComponent {...(this.props as any)} />;
     }
   }
 

static/app/utils/routeAnalytics/withRouteAnalytics.tsx

@@ -13,7 +13,8 @@ const withRouteAnalytics = <P extends WithRouteAnalyticsProps>(
 ) => {
   function ComponentWithRouteAnalytics(props: WrappedProps<P>) {
     const routeAnalyticsContext = useContext(RouteAnalyticsContext);
-    return <WrappedComponent {...(props as P)} {...routeAnalyticsContext} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...(props as P as any)} {...routeAnalyticsContext} />;
   }
   ComponentWithRouteAnalytics.displayName = `withRouteAnalytics(${getDisplayName(
     WrappedComponent

static/app/utils/withApi.tsx

@@ -24,7 +24,8 @@ const withApi = <P extends InjectedApiProps>(
   function WithApi({api: propsApi, ...props}: WrappedProps<P>) {
     const api = useApi({api: propsApi, ...options});
 
-    return <WrappedComponent {...(props as P)} api={api} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...(props as P as any)} api={api} />;
   }
 
   WithApi.displayName = `withApi(${getDisplayName(WrappedComponent)})`;

static/app/utils/withConfig.tsx

@@ -20,7 +20,8 @@ function withConfig<P extends InjectedConfigProps>(
     const config = useLegacyStore(ConfigStore);
     const allProps = {config, ...props} as P;
 
-    return <WrappedComponent {...allProps} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...(allProps as any)} />;
   }
 
   Wrapper.displayName = `withConfig(${getDisplayName(WrappedComponent)})`;

static/app/utils/withLatestContext.tsx

@@ -70,7 +70,8 @@ function withLatestContext<P extends InjectedLatestContextProps>(
       return (
         <WrappedComponent
           project={project as Project}
-          {...(this.props as P)}
+          // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+          {...(this.props as P as any)}
           organization={(this.props.organization || latestOrganization) as Organization}
         />
       );

static/app/utils/withOrganization.tsx

@@ -19,7 +19,8 @@ function withOrganization<P extends InjectedOrganizationProps>(
 
     const allProps = {organization, ...props} as P;
 
-    return <WrappedComponent {...allProps} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...(allProps as P as any)} />;
   }
 
   Wrapper.displayName = `withOrganization(${getDisplayName(WrappedComponent)})`;

static/app/utils/withOrganizations.tsx

@@ -37,12 +37,12 @@ function withOrganizations<P extends InjectedOrganizationsProps>(
       const {organizationsLoading, organizations, ...props} = this.props as P;
       return (
         <WrappedComponent
-          {...({
-            organizationsLoading:
-              organizationsLoading ?? !OrganizationsStore.getState().loaded,
-            organizations: organizations ?? this.state.organizations,
-            ...props,
-          } as P)}
+          organizationsLoading={
+            organizationsLoading ?? !OrganizationsStore.getState().loaded
+          }
+          organizations={organizations ?? this.state.organizations}
+          // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+          {...(props as Omit<P, 'organizationsLoading' | 'organizations'> as any)}
         />
       );
     }

static/app/utils/withPageFilters.tsx

@@ -25,7 +25,8 @@ function withPageFilters<P extends InjectedPageFiltersProps>(
       isGlobalSelectionReady,
     };
 
-    return <WrappedComponent {...selectionProps} {...(props as P)} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...selectionProps} {...(props as P as any)} />;
   }
 
   const displayName = getDisplayName(WrappedComponent);

static/app/utils/withPlugins.tsx

@@ -85,7 +85,11 @@ function withPlugins<P extends WithPluginProps>(
 
     render() {
       return (
-        <WrappedComponent {...(this.props as P & WithPluginProps)} plugins={this.state} />
+        <WrappedComponent
+          // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+          {...(this.props as P & WithPluginProps as any)}
+          plugins={this.state}
+        />
       );
     }
   }

static/app/utils/withProject.tsx

@@ -16,7 +16,8 @@ function withProject<P extends InjectedProjectProps>(
   function Wrapper(props: Props) {
     const project = useContext(ProjectContext);
 
-    return <WrappedComponent project={project} {...(props as P)} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent project={project} {...(props as P as any)} />;
   }
 
   Wrapper.displayName = `withProject(${getDisplayName(WrappedComponent)})`;

static/app/utils/withProjects.tsx

@@ -19,7 +19,8 @@ function withProjects<P extends InjectedProjectsProps>(
     const {projects, initiallyLoaded} = useProjects();
     const loadingProjects = !initiallyLoaded;
 
-    return <WrappedComponent {...(props as P)} {...{projects, loadingProjects}} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...(props as P as any)} {...{projects, loadingProjects}} />;
   }
 
   Wrapper.displayName = `withProjects(${getDisplayName(WrappedComponent)})`;

static/app/utils/withSentryAppComponents.tsx

@@ -46,7 +46,8 @@ function withSentryAppComponents<P extends InjectedAppComponentsProps>(
 
       const components = propComponents ?? storeComponents;
 
-      return <WrappedComponent {...({components, ...props} as P)} />;
+      // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+      return <WrappedComponent {...({components, ...props} as P as any)} />;
     }
   }
   return WithSentryAppComponents;

static/app/utils/withSentryRouter.tsx

@@ -26,10 +26,14 @@ function withSentryRouter<P extends Partial<WithRouterProps>>(
 
     if (USING_CUSTOMER_DOMAIN) {
       const newParams = {...params, orgId: CUSTOMER_DOMAIN};
-      return <WrappedComponent {...routerParam} {...(props as P)} params={newParams} />;
+      // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+      return (
+        <WrappedComponent {...routerParam} {...(props as P as any)} params={newParams} />
+      );
     }
 
-    return <WrappedComponent {...routerParam} {...(props as P)} />;
+    // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+    return <WrappedComponent {...routerParam} {...(props as P as any)} />;
   }
   return WithSentryRouterWrapper;
 }

static/app/utils/withTags.tsx

@@ -36,7 +36,13 @@ function withTags<P extends InjectedTagsProps>(
 
     render() {
       const {tags, ...props} = this.props as P;
-      return <WrappedComponent {...({tags: tags ?? this.state.tags, ...props} as P)} />;
+      return (
+        <WrappedComponent
+          tags={tags ?? this.state.tags}
+          // TODO(any): HoC prop types not working w/ emotion https://github.com/emotion-js/emotion/issues/3261
+          {...(props as P as any)}
+        />
+      );
     }
   }