[Emotion] Memoize batch of basic/simple components (#8171)

packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx

@@ -15,14 +15,16 @@ import type { DragDropContextProps } from '@hello-pangea/dnd';
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import { within } from '../../../.storybook/test';
 import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { sleep } from '../../test';
+
 import { EuiPanel } from '../panel';
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '../flyout';
+import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
+import { EuiTitle } from '../title';
 
 import { EuiDroppable } from './droppable';
 import { EuiDraggable } from './draggable';
 import { EuiDragDropContext } from './drag_drop_context';
-import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader } from '../flyout';
-import { EuiModal, EuiModalBody, EuiModalHeader } from '../modal';
-import { EuiTitle } from '../title';
 
 const meta: Meta<DragDropContextProps> = {
   title: 'Display/EuiDragDropContext',
@@ -120,21 +122,21 @@ export const WithinFlyouts: Story = {
       expect(canvas.getByRole('dialog')).toBeVisible();
     });
 
-    await setTimeout(async () => {
-      await waitFor(async () => {
-        await fireEvent.mouseDown(canvas.getByTestSubject('draggable-item-1'));
-        await fireEvent.mouseMove(canvas.getByTestSubject('draggable-item-1'), {
-          clientX: 0,
-          clientY: 5,
-        });
-
-        expect(
-          [...canvas.getByTestSubject('draggable-item-1').classList]
-            .join('')
-            .includes('isDragging')
-        ).toBe(true);
+    await waitFor(async () => {
+      await fireEvent.mouseDown(canvas.getByTestSubject('draggable-item-1'));
+      await fireEvent.mouseMove(canvas.getByTestSubject('draggable-item-1'), {
+        clientX: 0,
+        clientY: 5,
       });
-    }, 150); // add a timeout to prevent differences due to animation
+
+      expect(
+        [...canvas.getByTestSubject('draggable-item-1').classList]
+          .join('')
+          .includes('isDragging')
+      ).toBe(true);
+    });
+
+    await sleep(150); // add a timeout to prevent differences due to animation
   },
 };
 

packages/eui/src/components/drag_and_drop/draggable.tsx

@@ -15,7 +15,7 @@ import React, {
 import { Draggable, DraggableProps } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { CommonProps } from '../common';
 
 import { EuiDroppableContext, SPACINGS } from './droppable';
@@ -79,8 +79,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
 }) => {
   const { cloneItems } = useContext(EuiDroppableContext);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiDraggableStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiDraggableStyles);
 
   const hasCustomDragHandle = customDragHandle !== false;
 

packages/eui/src/components/drag_and_drop/droppable.tsx

@@ -15,7 +15,7 @@ import React, {
 import { Droppable, DroppableProps } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 import { EuiPanel } from '../panel';
 
@@ -73,8 +73,7 @@ export const EuiDroppable: FunctionComponent<EuiDroppableProps> = ({
   const { isDraggingType } = useContext(EuiDragDropContextContext);
   const dropIsDisabled: boolean = cloneDraggables ? true : isDropDisabled;
 
-  const euiTheme = useEuiTheme();
-  const styles = euiDroppableStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiDroppableStyles);
 
   return (
     <Droppable

packages/eui/src/components/error_boundary/error_boundary.tsx

@@ -15,10 +15,10 @@ import React, {
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiTitle } from '../title';
 import { EuiCodeBlock } from '../code';
 import { EuiI18n } from '../i18n';
-import { useEuiTheme } from '../../services';
 
 import { euiErrorBoundaryStyles } from './error_boundary.styles';
 
@@ -94,8 +94,7 @@ ${stackStr}`;
 export const EuiErrorMessage: FunctionComponent<
   CommonProps & { errorMessage?: string }
 > = ({ errorMessage, className, 'data-test-subj': dataTestSubj, ...rest }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiErrorBoundaryStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiErrorBoundaryStyles);
 
   return (
     <div

packages/eui/src/components/form/range/range_draggable.tsx

@@ -14,7 +14,11 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useMouseMove, useEuiTheme } from '../../../services';
+import {
+  useMouseMove,
+  useEuiTheme,
+  useEuiMemoizedStyles,
+} from '../../../services';
 import { logicalStyles } from '../../../global_styling';
 
 import type { EuiDualRangeProps } from './types';
@@ -48,7 +52,6 @@ export const EuiRangeDraggable: FunctionComponent<EuiRangeDraggableProps> = ({
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
-
   const outerStyle: React.CSSProperties = useMemo(() => {
     return logicalStyles({
       left: lowerPosition,
@@ -67,13 +70,13 @@ export const EuiRangeDraggable: FunctionComponent<EuiRangeDraggableProps> = ({
 
   const classes = classNames('euiRangeDraggable', className);
 
-  const styles = euiRangeDraggableStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiRangeDraggableStyles);
   const cssStyles = [
     styles.euiRangeDraggable,
     showTicks && styles.hasTicks,
     disabled && styles.disabled,
   ];
-  const innerStyles = euiRangeDraggableInnerStyles(euiTheme);
+  const innerStyles = useEuiMemoizedStyles(euiRangeDraggableInnerStyles);
   const cssInnerStyles = [
     innerStyles.euiRangeDraggable__inner,
     disabled ? styles.disabled : innerStyles.enabled,

packages/eui/src/components/health/health.tsx

@@ -8,13 +8,14 @@
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { euiHealthStyles } from './health.styles';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 import { EuiIcon, IconColor } from '../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
+import { euiHealthStyles } from './health.styles';
+
 export const TEXT_SIZES = ['xs', 's', 'm', 'inherit'] as const;
 
 export type EuiHealthProps = CommonProps &
@@ -39,8 +40,7 @@ export const EuiHealth: FunctionComponent<EuiHealthProps> = ({
   textSize = 's',
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiHealthStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiHealthStyles);
   const cssStyles = [styles.euiHealth, styles[textSize]];
   const classes = classNames('euiHealth', className);
 

packages/eui/src/components/inline_edit/inline_edit_form.tsx

@@ -32,7 +32,7 @@ import { EuiButtonIconPropsForButton } from '../button/button_icon';
 import { EuiButtonEmptyPropsForButton } from '../button/button_empty/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSkeletonLoading, EuiSkeletonRectangle } from '../skeleton';
-import { useEuiTheme, useCombinedRefs, keys } from '../../services';
+import { useEuiMemoizedStyles, useCombinedRefs, keys } from '../../services';
 import { EuiI18n, useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { euiInlineEditReadModeStyles } from './inline_edit_form.styles';
@@ -162,9 +162,8 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
 }) => {
   const classes = classNames('euiInlineEdit', className);
 
-  const euiTheme = useEuiTheme();
-
-  const { controlHeight, controlCompressedHeight } = euiFormVariables(euiTheme);
+  const { controlHeight, controlCompressedHeight } =
+    useEuiMemoizedStyles(euiFormVariables);
   const loadingSkeletonSize = sizes.compressed
     ? controlCompressedHeight
     : controlHeight;
@@ -208,7 +207,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     }
   }, [controlledValue, editModeValue, readModeValue, isEditing, placeholder]);
 
-  const readModeStyles = euiInlineEditReadModeStyles(euiTheme);
+  const readModeStyles = useEuiMemoizedStyles(euiInlineEditReadModeStyles);
   const readModeCssStyles = [
     readModeStyles.euiInlineEditReadMode,
     isReadOnly && readModeStyles.isReadOnly,

packages/eui/src/components/inline_edit/inline_edit_text.tsx

@@ -8,14 +8,16 @@
 
 import React, { useMemo, FunctionComponent } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiText, EuiTextProps } from '../text';
+
 import {
   EuiInlineEditCommonProps,
   EuiInlineEditForm,
   SMALL_SIZE_FORM,
   MEDIUM_SIZE_FORM,
 } from './inline_edit_form';
-import { useEuiTheme } from '../../services';
 import { euiInlineEditTextStyles } from './inline_edit_text.styles';
 
 export type EuiInlineEditTextSizes = Exclude<EuiTextProps['size'], 'relative'>;
@@ -35,9 +37,7 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiInlineEditText', className);
-
-  const theme = useEuiTheme();
-  const styles = euiInlineEditTextStyles(theme);
+  const styles = useEuiMemoizedStyles(euiInlineEditTextStyles);
   const cssStyles = [styles.euiInlineEditText, styles.fontSize[size]];
 
   const isSmallSize = ['xs', 's'].includes(size);

packages/eui/src/components/inline_edit/inline_edit_title.tsx

@@ -8,14 +8,16 @@
 
 import React, { useMemo, FunctionComponent } from 'react';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiTitle, EuiTitleSize } from '../title';
+
 import {
   EuiInlineEditCommonProps,
   EuiInlineEditForm,
   SMALL_SIZE_FORM,
   MEDIUM_SIZE_FORM,
 } from './inline_edit_form';
-import { useEuiTheme } from '../../services';
 import { euiInlineEditTitleStyles } from './inline_edit_title.styles';
 
 export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'] as const;
@@ -42,9 +44,7 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiInlineEditTitle', className);
-
-  const theme = useEuiTheme();
-  const styles = euiInlineEditTitleStyles(theme);
+  const styles = useEuiMemoizedStyles(euiInlineEditTitleStyles);
   const cssStyles = [styles.euiInlineEditTitle, styles.fontSize[size]];
 
   const H: Heading = heading;

packages/eui/src/components/key_pad_menu/key_pad_menu.tsx

@@ -9,12 +9,13 @@
 import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps, ExclusiveUnion } from '../common';
 import {
   EuiFormLabel,
   _EuiFormLegendProps,
 } from '../form/form_label/form_label';
-import { useEuiTheme } from '../../services';
+
 import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 
 export type _EuiKeyPadMenuCheckableProps = ExclusiveUnion<
@@ -57,8 +58,7 @@ export const EuiKeyPadMenu: FunctionComponent<EuiKeyPadMenuProps> = ({
 
   const classes = classNames('euiKeyPadMenu', className);
 
-  const theme = useEuiTheme();
-  const styles = euiKeyPadMenuStyles(theme);
+  const styles = useEuiMemoizedStyles(euiKeyPadMenuStyles);
   const cssStyles = [styles.euiKeyPadMenu];
   const legendCssStyles = [
     styles.euiKeyPadMenu__legend,

packages/eui/src/components/key_pad_menu/key_pad_menu_item.tsx

@@ -17,11 +17,10 @@ import React, {
 import classNames from 'classnames';
 
 import {
-  useEuiTheme,
+  useEuiMemoizedStyles,
   getSecureRelForTarget,
   useGeneratedHtmlId,
 } from '../../services';
-
 import {
   CommonProps,
   ExclusiveUnion,
@@ -185,8 +184,7 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   const isHrefValid = !href || validateHref(href);
   const isDisabled = disabled || _isDisabled || !isHrefValid;
 
-  const euiTheme = useEuiTheme();
-  const styles = euiKeyPadMenuItemStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiKeyPadMenuItemStyles);
   const cssStyles = [
     styles.euiKeyPadMenuItem,
     !isDisabled ? styles.enabled : styles.disabled.disabled,
@@ -201,10 +199,7 @@ export const EuiKeyPadMenuItem: FunctionComponent<EuiKeyPadMenuItemProps> = ({
   type ElementType = ReactElementType<typeof Element>;
 
   const itemId = useGeneratedHtmlId({ conditionalId: id });
-  const childStyles = useMemo(
-    () => euiKeyPadMenuItemChildStyles(euiTheme),
-    [euiTheme]
-  );
+  const childStyles = useEuiMemoizedStyles(euiKeyPadMenuItemChildStyles);
 
   const checkableElement = useMemo(() => {
     if (!checkable) return;

packages/eui/src/components/mark/mark.tsx

@@ -14,9 +14,9 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
 import { euiMarkStyles, euiMarkScreenReaderStyles } from './mark.styles';
 
 export type EuiMarkProps = HTMLAttributes<HTMLElement> &
@@ -39,8 +39,7 @@ export const EuiMark: FunctionComponent<EuiMarkProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiMark', className);
-  const euiTheme = useEuiTheme();
-  const styles = euiMarkStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiMarkStyles);
 
   const highlightStart = useEuiI18n(
     'euiMark.highlightStart',

packages/eui/src/components/overlay_mask/overlay_mask.tsx

@@ -18,7 +18,7 @@ import React, {
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { CommonProps, keysOf } from '../common';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiPortal } from '../portal';
 import { euiOverlayMaskStyles } from './overlay_mask.styles';
 import { euiOverlayMaskBodyStyles } from './overlay_mask_body.styles';
@@ -59,8 +59,7 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
     setOverlayMaskNode,
     maskRef,
   ]);
-  const euiTheme = useEuiTheme();
-  const styles = euiOverlayMaskStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
   const cssStyles = cx([
     styles.euiOverlayMask,
     styles[`${headerZindexLocation}Header`],