[Emotion] Add HOC util for memoized styles + memoize EuiIcon styles

src/components/icon/icon.styles.ts

@@ -7,16 +7,9 @@
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, euiCanAnimate } from '../../global_styling';
+import { logicalSizeCSS, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
-const iconSize = (size: string) => {
-  return `
-    ${logicalCSS('width', size)};
-    ${logicalCSS('height', size)};
-  `;
-};
-
 export const iconLoadingOpacity = 0.05;
 
 const iconLoading = keyframes`
@@ -100,11 +93,11 @@ export const euiIconStyles = ({ euiTheme }: UseEuiTheme) => ({
   `,
   // Sizes
   original: css``,
-  s: css(iconSize(euiTheme.size.m)),
-  m: css(iconSize(euiTheme.size.base)),
-  l: css(iconSize(euiTheme.size.l)),
-  xl: css(iconSize(euiTheme.size.xl)),
-  xxl: css(iconSize(euiTheme.size.xxl)),
+  s: css(logicalSizeCSS(euiTheme.size.m)),
+  m: css(logicalSizeCSS(euiTheme.size.base)),
+  l: css(logicalSizeCSS(euiTheme.size.l)),
+  xl: css(logicalSizeCSS(euiTheme.size.xl)),
+  xxl: css(logicalSizeCSS(euiTheme.size.xxl)),
   // Variants
   // App icons are two-toned. This provides the base color.
   app: css`

src/components/icon/icon.tsx

@@ -23,8 +23,8 @@ import { enqueueStateChange } from '../../services/react';
 
 import {
   htmlIdGenerator,
-  withEuiTheme,
-  WithEuiThemeProps,
+  withEuiStylesMemoizer,
+  WithEuiStylesMemoizerProps,
 } from '../../services';
 export { COLORS } from './named_colors';
 import { isNamedColor, NamedColor } from './named_colors';
@@ -130,11 +130,11 @@ export const appendIconComponentCache = (iconTypeToIconComponentMap: {
 };
 
 export class EuiIconClass extends PureComponent<
-  EuiIconProps & WithEuiThemeProps,
+  EuiIconProps & WithEuiStylesMemoizerProps,
   State
 > {
   isMounted = false;
-  constructor(props: EuiIconProps & WithEuiThemeProps) {
+  constructor(props: EuiIconProps & WithEuiStylesMemoizerProps) {
     super(props);
 
     const { type } = props;
@@ -238,8 +238,8 @@ export class EuiIconClass extends PureComponent<
       tabIndex,
       title,
       onIconLoad,
-      theme,
       style,
+      stylesMemoizer,
       ...rest
     } = this.props;
 
@@ -267,7 +267,7 @@ export class EuiIconClass extends PureComponent<
     const classes = classNames('euiIcon', className);
 
     // Emotion styles
-    const styles = euiIconStyles(theme);
+    const styles = stylesMemoizer(euiIconStyles);
     const cssStyles = [
       styles.euiIcon,
       styles[size],
@@ -304,20 +304,14 @@ export class EuiIconClass extends PureComponent<
           this.props['aria-labelledby'] ||
           this.props.title
         );
-      const hideIconEmpty = isAriaHidden && { 'aria-hidden': true };
-
-      let titleId: any;
 
       // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
       //  The svg aria-labelledby attribute gets this titleId
       //  The svg title element gets this titleId as an id
-      if (
-        !this.props['aria-label'] &&
-        !this.props['aria-labelledby'] &&
-        title
-      ) {
-        titleId = { titleId: generateId() };
-      }
+      const titleId =
+        !this.props['aria-label'] && !this.props['aria-labelledby'] && title
+          ? { titleId: generateId() }
+          : undefined;
 
       return (
         <Svg
@@ -327,16 +321,16 @@ export class EuiIconClass extends PureComponent<
           tabIndex={tabIndex}
           role="img"
           title={title}
+          {...titleId}
           data-icon-type={iconTitle}
           data-is-loaded={isLoaded || undefined}
           data-is-loading={isLoading || undefined}
-          {...titleId}
           {...rest}
-          {...hideIconEmpty}
+          aria-hidden={isAriaHidden || undefined}
         />
       );
     }
   }
 }
 
-export const EuiIcon = withEuiTheme<EuiIconProps>(EuiIconClass);
+export const EuiIcon = withEuiStylesMemoizer<EuiIconProps>(EuiIconClass);

src/services/theme/index.ts

@@ -22,7 +22,11 @@ export {
 } from './hooks';
 export type { EuiThemeProviderProps } from './provider';
 export { EuiThemeProvider } from './provider';
-export { useEuiMemoizedStyles } from './style_memoization';
+export {
+  useEuiMemoizedStyles,
+  withEuiStylesMemoizer,
+  type WithEuiStylesMemoizerProps,
+} from './style_memoization';
 export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';
 export {
   buildTheme,

src/services/theme/style_memoization.test.tsx

@@ -15,7 +15,11 @@ import { testOnReactVersion } from '../../test/internal';
 import type { UseEuiTheme } from './hooks';
 import { EuiThemeProvider } from './provider';
 
-import { useEuiMemoizedStyles } from './style_memoization';
+import {
+  useEuiMemoizedStyles,
+  withEuiStylesMemoizer,
+  WithEuiStylesMemoizerProps,
+} from './style_memoization';
 
 describe('useEuiMemoizedStyles', () => {
   beforeEach(jest.clearAllMocks);
@@ -83,3 +87,65 @@ describe('useEuiMemoizedStyles', () => {
     }
   );
 });
+
+describe('withEuiStylesMemoizer', () => {
+  beforeEach(jest.clearAllMocks);
+
+  const componentStyles = jest.fn(({ euiTheme }: UseEuiTheme) => ({
+    someComponent: css`
+      color: ${euiTheme.colors.dangerText};
+    `,
+  }));
+
+  class ComponentClass extends React.Component<WithEuiStylesMemoizerProps> {
+    state = {
+      rerender: false,
+    };
+
+    rerender = () => {
+      this.setState({ rerender: !this.state.rerender });
+    };
+
+    render() {
+      const styles = this.props.stylesMemoizer(componentStyles);
+      return <button css={styles.someComponent} onClick={this.rerender} />;
+    }
+  }
+  const Component = withEuiStylesMemoizer(ComponentClass);
+
+  it('memoizes the passed fn, only computing the styles once regardless of other rerenders', () => {
+    const { getByRole } = render(<Component />);
+
+    expect(componentStyles).toHaveBeenCalledTimes(1);
+    expect(getByRole('button')).toHaveStyleRule('color', '#bd271e');
+
+    fireEvent.click(getByRole('button'));
+    expect(componentStyles).toHaveBeenCalledTimes(1);
+  });
+
+  it('recomputes styles if the upstream theme changes', () => {
+    const { rerender, getByRole } = render(
+      <EuiThemeProvider colorMode="light">
+        <Component />
+      </EuiThemeProvider>
+    );
+    expect(componentStyles).toHaveBeenCalledTimes(1);
+    expect(getByRole('button')).toHaveStyleRule('color', '#bd271e');
+
+    rerender(
+      <EuiThemeProvider colorMode="dark">
+        <Component />
+      </EuiThemeProvider>
+    );
+    expect(componentStyles).toHaveBeenCalledTimes(2);
+    expect(getByRole('button')).toHaveStyleRule('color', '#f86b63');
+
+    // Should not recompute styles if no theme changes
+    rerender(
+      <EuiThemeProvider colorMode="dark">
+        <Component />
+      </EuiThemeProvider>
+    );
+    expect(componentStyles).toHaveBeenCalledTimes(2);
+  });
+});

src/services/theme/style_memoization.tsx

@@ -13,6 +13,8 @@ import React, {
   useContext,
   useState,
   useMemo,
+  useCallback,
+  forwardRef,
 } from 'react';
 import type { SerializedStyles, CSSObject } from '@emotion/react';
 
@@ -52,34 +54,84 @@ export const EuiThemeMemoizedStylesProvider: FunctionComponent<
   );
 };
 
+/**
+ * Internal util primarily responsible for getting the memoized styles (if they exist)
+ * and if not, generating and setting the styles. DRYed out to facilitate usage
+ * between both hook/function components and HOC/class components
+ */
+const getMemoizedStyles = (
+  stylesGenerator: Function,
+  stylesMap: MemoizedStylesMap,
+  euiThemeContext: UseEuiTheme
+) => {
+  if (!stylesGenerator.name) {
+    throw new Error(
+      'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.'
+    );
+  }
+  const existingStyles = stylesMap.get(stylesGenerator);
+  if (existingStyles) {
+    return existingStyles;
+  } else {
+    const generatedStyles = stylesGenerator(euiThemeContext);
+    stylesMap.set(stylesGenerator, generatedStyles);
+
+    return generatedStyles;
+  }
+};
+
 /**
  * Hook that memoizes the returned values of components style fns/generators
  * per-theme
  */
 export const useEuiMemoizedStyles = <
   T extends (theme: UseEuiTheme) => StylesMaps
 >(
-  styleGenerator: T
+  stylesGenerator: T
 ): ReturnType<T> => {
   const memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
   const euiThemeContext = useEuiTheme();
 
-  const memoizedComponentStyles = useMemo(() => {
-    if (!styleGenerator.name) {
-      throw new Error(
-        'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.'
-      );
-    }
-    const existingStyles = memoizedStyles.get(styleGenerator);
-    if (existingStyles) {
-      return existingStyles;
-    } else {
-      const generatedStyles = styleGenerator(euiThemeContext);
-      memoizedStyles.set(styleGenerator, generatedStyles);
-
-      return generatedStyles;
-    }
-  }, [styleGenerator, memoizedStyles, euiThemeContext]);
+  const memoizedComponentStyles = useMemo(
+    () => getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext),
+    [stylesGenerator, memoizedStyles, euiThemeContext]
+  );
 
   return memoizedComponentStyles as ReturnType<T>;
 };
+
+/**
+ * HOC for class components
+ * Syntax is mostly copied from withEuiTheme HOC
+ */
+export interface WithEuiStylesMemoizerProps {
+  stylesMemoizer: typeof useEuiMemoizedStyles; // Type shortcut, we don't actually pass down the hook itself
+}
+export const withEuiStylesMemoizer = <T extends {} = {}>(
+  Component: React.ComponentType<T & WithEuiStylesMemoizerProps>
+) => {
+  const componentName =
+    Component.displayName || Component.name || 'ComponentWithStylesMemoizer';
+
+  const Render = (
+    props: Omit<T, keyof WithEuiStylesMemoizerProps>,
+    ref: React.Ref<Omit<T, keyof WithEuiStylesMemoizerProps>>
+  ) => {
+    const memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
+    const euiThemeContext = useEuiTheme();
+    const stylesMemoizer = useCallback(
+      (stylesGenerator: Function) =>
+        getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext),
+      [memoizedStyles, euiThemeContext]
+    );
+    return (
+      <Component stylesMemoizer={stylesMemoizer} ref={ref} {...(props as T)} />
+    );
+  };
+
+  const WithEuiStylesMemoizer = forwardRef(Render);
+
+  WithEuiStylesMemoizer.displayName = componentName;
+
+  return WithEuiStylesMemoizer;
+};