@elastic/eui 123.1.0 → 123.2.0

package/optimize/es/components/flyout/use_flyout_resizable.js

@@ -8,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { keys } from '../../services';
+import { keys, useLatest } from '../../services';
 import { getPosition } from '../resizable_container/helpers';
 /**
  * @internal
@@ -23,11 +23,38 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     onResize = _ref.onResize,
     side = _ref.side,
     _size = _ref.size;
+  // Without a `referenceWidth` (standalone flyouts), nothing else re-renders
+  // the flyout on window resize, so track the viewport width here
+  var _useState = useState(function () {
+      return typeof window !== 'undefined' ? window.innerWidth : Infinity;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowWidth = _useState2[0],
+    setWindowWidth = _useState2[1];
+  var tracksWindow = enabled && referenceWidth === undefined;
+  useEffect(function () {
+    if (!tracksWindow) return;
+    var rafId = 0;
+    var onWindowResize = function onWindowResize() {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(function () {
+        return setWindowWidth(window.innerWidth);
+      });
+    };
+    // Catch up on resizes that happened while the window was not tracked
+    setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, [tracksWindow]);
+
   // Use container width when provided. When referenceWidth is 0 (e.g. container
   // not yet measured by ResizeObserver), do not fall back to viewport — that
   // would allow resizing beyond the container (e.g. over a sidebar). Use 0 so
   // the clamp keeps the flyout at minWidth until the real width is available.
-  var _referenceWidth = referenceWidth !== undefined ? referenceWidth : typeof window !== 'undefined' ? window.innerWidth : Infinity;
+  var _referenceWidth = referenceWidth !== undefined ? referenceWidth : windowWidth;
   var getFlyoutMinMaxWidth = useCallback(function (width) {
     var maxResizeWidth = siblingFlyoutWidth ? _referenceWidth * 0.9 - siblingFlyoutWidth : _referenceWidth * 0.9;
 
@@ -38,14 +65,19 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     var upperBound = Math.min(maxWidth || Infinity, maxResizeWidth);
     return Math.max(minWidth, Math.min(width, upperBound));
   }, [minWidth, maxWidth, siblingFlyoutWidth, _referenceWidth]);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    callOnResize = _useState4[0],
-    setCallOnResize = _useState4[1];
+    flyoutWidth = _useState4[0],
+    _setFlyoutWidth = _useState4[1];
+
+  // The last width set, even before it renders. Handlers read it instead of
+  // `flyoutWidth`, which is stale until then (e.g. a key press right after
+  // mount, before the width from `size` has rendered).
+  var flyoutWidthRef = useRef(0);
+  var setFlyoutWidth = useCallback(function (width) {
+    flyoutWidthRef.current = width;
+    _setFlyoutWidth(width);
+  }, []);
 
   // Must use state for the flyout ref in order for the useEffect to be correctly called after render
   var _useState5 = useState(null),
@@ -55,10 +87,9 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
   useEffect(function () {
     if (!enabled) return; // Don't measure when resizing is disabled
     if (!flyoutWidth && flyoutRef) {
-      setCallOnResize(false); // Don't call `onResize` for non-user width changes
       setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
     }
-  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled, setFlyoutWidth]);
 
   // Track the previous `_size` prop to distinguish between a consumer size
   // change (which should reset the width) and a reference-width / constraint
@@ -70,9 +101,13 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
   // the container / viewport resizes (both shrink AND grow).
   var prevReferenceWidthRef = useRef(_referenceWidth);
 
-  // Update flyout width when consumers pass in a new `size`, or scale
-  // proportionally and re-clamp when constraints change (e.g. container
-  // resize, sibling width change).
+  // The width last set by a numeric `size` or by the user, before clamping.
+  // Clamping always starts from it, so a flyout squeezed by a narrow container
+  // returns to this width once there is room again.
+  var requestedWidthRef = useRef(null);
+
+  // Update flyout width when consumers pass in a new `size`, or re-clamp
+  // when constraints change (e.g. container resize, sibling width change).
   useEffect(function () {
     if (!enabled) return; // Don't update width when resizing is disabled
 
@@ -80,34 +115,49 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
       // The consumer's `size` prop actually changed — reset so the new size takes effect
       prevSizeRef.current = _size;
       prevReferenceWidthRef.current = _referenceWidth;
-      setCallOnResize(false);
+      requestedWidthRef.current = typeof _size === 'number' ? _size : null;
       setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+    } else if (typeof _size === 'number') {
+      // A numeric `size` is a pixel width, so it is only re-clamped, not scaled
+      if (_referenceWidth > 0) {
+        var _requestedWidthRef$cu;
+        setFlyoutWidth(getFlyoutMinMaxWidth((_requestedWidthRef$cu = requestedWidthRef.current) !== null && _requestedWidthRef$cu !== void 0 ? _requestedWidthRef$cu : _size));
+      }
     } else {
       var _prevReferenceWidthRe;
-      // Only constraints changed (referenceWidth, sibling width, etc.) —
-      // scale the pixel width proportionally to the reference width change
-      // and then clamp. This preserves the flyout's percentage position in
-      // both directions (viewport shrink AND grow).
+      // Named sizes are percentages — scale the pixel width proportionally to
+      // the reference width change and then clamp. This preserves the flyout's
+      // percentage position in both directions (viewport shrink AND grow).
       var prevRefWidth = (_prevReferenceWidthRe = prevReferenceWidthRef.current) !== null && _prevReferenceWidthRe !== void 0 ? _prevReferenceWidthRe : _referenceWidth;
       prevReferenceWidthRef.current = _referenceWidth;
-      setFlyoutWidth(function (currentWidth) {
-        if (currentWidth && prevRefWidth > 0 && _referenceWidth > 0) {
-          var scaleFactor = _referenceWidth / prevRefWidth;
-          return getFlyoutMinMaxWidth(currentWidth * scaleFactor);
-        }
+      var currentWidth = flyoutWidthRef.current;
+      if (currentWidth && prevRefWidth > 0 && _referenceWidth > 0) {
+        var scaleFactor = _referenceWidth / prevRefWidth;
+        setFlyoutWidth(getFlyoutMinMaxWidth(currentWidth * scaleFactor));
+      } else if (_referenceWidth > 0) {
         // When reference width was 0 (e.g. container not yet measured), now
         // that we have a real width, reset from the size prop instead of scaling.
-        if (_referenceWidth > 0) {
-          return typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0;
-        }
-        return currentWidth;
-      });
+        setFlyoutWidth(0);
+      }
     }
-  }, [_size, getFlyoutMinMaxWidth, enabled, _referenceWidth]);
+  }, [_size, getFlyoutMinMaxWidth, enabled, _referenceWidth, setFlyoutWidth]);
+
+  // `onResize` is only called from user interactions, never for width changes
+  // caused by the consumer or by layout constraints
+  var onResizeRef = useLatest(onResize);
+  var onUserResize = useCallback(function (width) {
+    var _onResizeRef$current;
+    requestedWidthRef.current = width;
+    (_onResizeRef$current = onResizeRef.current) === null || _onResizeRef$current === void 0 || _onResizeRef$current.call(onResizeRef, width);
+  }, [onResizeRef]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = useRef(0);
   var initialMouseX = useRef(0);
+  var drag = useRef({
+    startWidth: 0,
+    width: 0
+  });
 
   // Account for flyout side and logical property direction
   var direction = useMemo(function () {
@@ -124,27 +174,37 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     }
     var mouseOffset = getPosition(e, true) - initialMouseX.current;
     var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
-    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
-  }, [getFlyoutMinMaxWidth, direction, enabled]);
+    drag.current.width = getFlyoutMinMaxWidth(changedFlyoutWidth);
+    setFlyoutWidth(drag.current.width);
+  }, [getFlyoutMinMaxWidth, direction, enabled, setFlyoutWidth]);
   var onMouseUp = useCallback(function () {
-    setCallOnResize(true);
     if (!enabled) {
       return;
     }
     initialMouseX.current = 0;
+
+    // Clicking the handle, or dragging against the clamp, changes nothing
+    var _drag$current = drag.current,
+      startWidth = _drag$current.startWidth,
+      width = _drag$current.width;
+    if (width !== startWidth) onUserResize(width);
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
     window.removeEventListener('touchmove', onMouseMove);
     window.removeEventListener('touchend', onMouseUp);
-  }, [onMouseMove, enabled]);
+  }, [onMouseMove, onUserResize, enabled]);
   var onMouseDown = useCallback(function (e) {
     var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
     if (!enabled) {
       return;
     }
     initialMouseX.current = getPosition(e, true);
     initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+    var startWidth = flyoutWidthRef.current;
+    drag.current = {
+      startWidth: startWidth,
+      width: startWidth
+    };
 
     // Window event listeners instead of React events are used
     // in case the user's mouse leaves the component
@@ -154,34 +214,29 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     window.addEventListener('touchend', onMouseUp);
   }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
   var onKeyDown = useCallback(function (e) {
-    setCallOnResize(true);
     if (!enabled) {
       return;
     }
     var KEYBOARD_OFFSET = 10;
+    var offset;
     switch (e.key) {
       case keys.ARROW_RIGHT:
-        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
-        setFlyoutWidth(function (flyoutWidth) {
-          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
-        });
+        offset = KEYBOARD_OFFSET * direction;
         break;
       case keys.ARROW_LEFT:
-        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
-        setFlyoutWidth(function (flyoutWidth) {
-          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
-        });
+        offset = -KEYBOARD_OFFSET * direction;
+        break;
+      default:
+        return;
     }
-  }, [getFlyoutMinMaxWidth, direction, enabled]);
+    e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
 
-  // To reduce unnecessary calls, only fire onResize callback:
-  // 1. After initial mount / on user width change events only
-  // 2. If not currently mouse dragging
-  useEffect(function () {
-    if (callOnResize && enabled) {
-      onResize === null || onResize === void 0 || onResize(flyoutWidth);
-    }
-  }, [onResize, callOnResize, flyoutWidth, enabled]);
+    var currentWidth = flyoutWidthRef.current;
+    var newWidth = getFlyoutMinMaxWidth(currentWidth + offset);
+    if (newWidth === currentWidth) return; // Already at the clamp
+    setFlyoutWidth(newWidth);
+    onUserResize(newWidth);
+  }, [getFlyoutMinMaxWidth, direction, enabled, onUserResize, setFlyoutWidth]);
   var size = useMemo(function () {
     if (enabled && flyoutWidth && _referenceWidth > 0) {
       var pctValue = flyoutWidth / _referenceWidth * 100;

package/optimize/es/components/form/form_control_layout/form_control_layout_icons.js

@@ -11,7 +11,7 @@ var _excluded = ["ref", "side"];
  */
 
 import React from 'react';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
@@ -34,8 +34,7 @@ export var EuiFormControlLayoutIcons = function EuiFormControlLayoutIcons(_ref)
     isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     isDropdown = _ref.isDropdown;
-  var euiThemeContext = useEuiTheme();
-  var styles = euiFormControlLayoutIconsStyles(euiThemeContext);
+  var styles = useEuiMemoizedStyles(euiFormControlLayoutIconsStyles);
   var cssStyles = [styles.euiFormControlLayoutIcons, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(iconsPosition === 'absolute' ? [styles.position.absolute.absolute, compressed ? styles.position.absolute.compressed[side] : styles.position.absolute.uncompressed[side]] : [styles.position.static.static, compressed ? styles.position.static.compressed : styles.position.static.uncompressed]), [isDisabled && styles.disabled]);
   return ___EmotionJSX("div", {
     css: cssStyles,

package/optimize/es/components/icon/assets/product_agent.js

@@ -26,15 +26,11 @@ var EuiIconProductAgent = function EuiIconProductAgent(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    d: "M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"
-  }), ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
+    d: "M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v3h-1v2a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM4 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm2-2v1h4V2z",
     clipRule: "evenodd"
   }), ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v3a1 1 0 0 1-1 1h-1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM5 5a2 2 0 0 0-2 2v7h10V7a2 2 0 0 0-2-2H5Zm-4 6h1V8H1v3Zm13 0h1V8h-1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z",
-    clipRule: "evenodd"
+    d: "M5 10h1V7H5zm5 0h1V7h-1z"
   }));
 };
 export var icon = EuiIconProductAgent;

package/optimize/es/components/icon/assets/ruler.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconRuler = function EuiIconRuler(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M1.293 11.707a1 1 0 0 1 0-1.414l9-9a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-1.414 0ZM2 11l3 3 1.146-1.146-1.5-1.5.708-.708 1.5 1.5 1.292-1.292-1-1 .708-.708 1 1 1.292-1.292-1.5-1.5.708-.708 1.5 1.5 1.292-1.292-1-1 .708-.708 1 1L14 5l-3-3Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconRuler;

package/optimize/es/components/icon/icon_map.js

@@ -2037,6 +2037,11 @@ export var typeToPathMap = {
   }, {
     synonyms: ['tree', 'parent']
   }),
+  ruler: withMetadata(function () {
+    return import('./assets/ruler');
+  }, {
+    synonyms: ['ruler', 'measure', 'measurement', 'length', 'scale', 'size']
+  }),
   save: withMetadata(function () {
     return import('./assets/save');
   }, {

package/optimize/es/components/icon/svgs/product_agent.svg

@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M10.447 11.523C9.826 12.767 8.59 13 8 13c-.59 0-1.826-.233-2.447-1.477l.894-.447C6.826 11.833 7.59 12 8 12c.41 0 1.174-.167 1.553-.924l.894.447Z"/>
-  <path fill-rule="evenodd" d="M5.5 7a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Zm5-1a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-  <path fill-rule="evenodd" d="M8 0a1.5 1.5 0 0 1 .5 2.912V4H11a3 3 0 0 1 3 3h1l.102.005A1 1 0 0 1 16 8v3a1 1 0 0 1-1 1h-1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1a3 3 0 0 1 3-3h2.5V2.912A1.498 1.498 0 0 1 8 0ZM5 5a2 2 0 0 0-2 2v7h10V7a2 2 0 0 0-2-2H5Zm-4 6h1V8H1v3Zm13 0h1V8h-1v3ZM8 1a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1Z" clip-rule="evenodd"/>
-</svg>
+  <path fill-rule="evenodd" d="M9.389 1c.4 0 .783.116 1.078.328.294.212.533.55.533.972V3h1a3 3 0 0 1 3 3v1h1v3h-1v2a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3v-2H0V7h1V6a3 3 0 0 1 3-3h1v-.7c0-.423.239-.76.533-.972A1.85 1.85 0 0 1 6.611 1zM4 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm2-2v1h4V2z" clip-rule="evenodd"/>
+  <path d="M5 10h1V7H5zm5 0h1V7h-1z"/>
+</svg>

package/optimize/es/components/icon/svgs/ruler.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.293 11.707a1 1 0 0 1 0-1.414l9-9a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-1.414 0ZM2 11l3 3 1.146-1.146-1.5-1.5.708-.708 1.5 1.5 1.292-1.292-1-1 .708-.708 1 1 1.292-1.292-1.5-1.5.708-.708 1.5 1.5 1.292-1.292-1-1 .708-.708 1 1L14 5l-3-3Z" clip-rule="evenodd"/>
+</svg>

package/optimize/es/components/key_pad_menu/key_pad_menu_item.js

@@ -58,11 +58,11 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
       className: 'euiKeyPadMenuItem__checkableInput',
       css: cssStyles,
       checked: isSelected,
-      disabled: isDisabled,
-      name: name
+      disabled: isDisabled
     };
     if (checkable === 'single') {
       return ___EmotionJSX(EuiRadio, _extends({}, sharedProps, {
+        name: name,
         value: value,
         onChange: function onChange() {
           return _onChange(itemId, value);
@@ -70,6 +70,7 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
       }));
     } else {
       return ___EmotionJSX(EuiCheckbox, _extends({}, sharedProps, {
+        name: name,
         onChange: function onChange() {
           return _onChange(itemId);
         }

package/optimize/es/components/progress/progress.js

@@ -14,9 +14,9 @@ import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
 import { isNil } from '../../services/predicate';
-import { useEuiTheme, makeHighContrastColor } from '../../services';
+import { useEuiTheme, useEuiMemoizedStyles, makeHighContrastColor } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { euiProgressStyles, euiProgressDataStyles, euiProgressLabelStyles, euiProgressValueTextStyles } from './progress.styles';
+import { euiProgressNativeStyles, euiProgressIndeterminateStyles, euiProgressDataStyles, euiProgressLabelStyles, euiProgressValueTextStyles } from './progress.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm', 'l'];
 export var COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'accentSecondary', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
@@ -58,12 +58,12 @@ export var EuiProgress = function EuiProgress(_ref) {
   var customTextColorStyles = !isNamedColor ? {
     color: makeHighContrastColor(color)(euiTheme.euiTheme)
   } : {};
-  var styles = euiProgressStyles(euiTheme, determinate);
+  var styles = useEuiMemoizedStyles(determinate ? euiProgressNativeStyles : euiProgressIndeterminateStyles);
   var cssStyles = [styles.euiProgress, determinate && styles.native, !determinate && styles.indeterminate, styles[size], styles[position], isNamedColor ? styles[color] : styles.customColor];
-  var dataStyles = euiProgressDataStyles(euiTheme);
+  var dataStyles = useEuiMemoizedStyles(euiProgressDataStyles);
   var dataCssStyles = [dataStyles.euiProgress__data, size === 'l' && dataStyles[size]];
   var labelCssStyles = [euiProgressLabelStyles.euiProgress__label, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
-  var valueTextStyles = euiProgressValueTextStyles(euiTheme);
+  var valueTextStyles = useEuiMemoizedStyles(euiProgressValueTextStyles);
   var valueTextCssStyles = [valueTextStyles.euiProgress__valueText, isNamedColor ? valueTextStyles[color] : styles.customColor];
   var classes = classNames('euiProgress', className);
   var labelClasses = classNames('euiProgress__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);

package/optimize/es/components/progress/progress.styles.js

@@ -136,6 +136,13 @@ export var euiProgressStyles = function euiProgressStyles(euiThemeContext, isNat
 /**
  * Data styles
  */
+// Static per-variant generators so `useEuiMemoizedStyles` can share them across instances
+export var euiProgressNativeStyles = function euiProgressNativeStyles(euiThemeContext) {
+  return euiProgressStyles(euiThemeContext, true);
+};
+export var euiProgressIndeterminateStyles = function euiProgressIndeterminateStyles(euiThemeContext) {
+  return euiProgressStyles(euiThemeContext, false);
+};
 export var euiProgressDataStyles = function euiProgressDataStyles(euiThemeContext) {
   return {
     euiProgress__data: /*#__PURE__*/css("display:flex;justify-content:space-between;gap:", euiThemeContext.euiTheme.size.xs, ";", euiText(euiThemeContext.euiTheme), " ", euiFontSize(euiThemeContext, 'xs'), ";;label:euiProgress__data;"),

package/optimize/es/components/toast/toast.styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,10 +17,7 @@ import { euiPanelBorderStyles } from '../panel/panel.styles';
 var TEXT_MAX_WIDTH = 1200;
 var CONTAINER_NAME = 'euiToast';
 var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
-var decorClipSize = '9px'; // the height of the decor clip that includes the border rounding
-var decorClipPath = "polygon(0 0, 100% 0, 100% ".concat(decorClipSize, ", 0 ").concat(decorClipSize, ")");
-var euiToastAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(0 0, 0% 0, 0% ", ", 0 ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
-var euiToastAnimationRTL = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(100% 0, 100% 0, 100% ", ", 100% ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
+var euiToastAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
@@ -30,26 +27,23 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
     return highContrastMode ? x * 2 + y : x + y;
   });
   var highlightOffset = euiTheme.border.width.thin;
-  var highlightSizeOffset = mathWithUnits([highlightOffset], function (x) {
-    return x * 2;
-  });
   var paddingTop = mathWithUnits([euiTheme.size.base, highlightSize], function (x, y) {
     return x + y;
   });
   var offsetTop = mathWithUnits([euiTheme.size.s, highlightSize], function (x, y) {
     return x + y;
   });
-  var decorCommonStyles = "\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: ".concat(euiTheme.border.radius.panel, ";\n    border-end-start-radius: 0;\n    border-block-start: ").concat(highlightSize, " solid;\n    clip-path: ").concat(decorClipPath, ";\n    pointer-events: none;\n\n    ").concat(highContrastModeStyles(euiThemeContext, {
-    preferred: "\n        inset-block-start: -".concat(highlightOffset, ";\n      inset-inline-start: -").concat(highlightOffset, ";\n      inline-size: calc(100% + ").concat(highlightSizeOffset, ");\n      ")
-  }), "\n  ");
+
+  // Straight bar that doesn't follow the border radius of the toast.
+  var decorCommonStyles = "\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    inline-size: 100%;\n    block-size: ".concat(highlightSize, ";\n    pointer-events: none;\n  ");
   return {
     // Base
     euiToast: /*#__PURE__*/css("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;border-radius:", borderRadius, ";", euiShadowLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), " ", logicalCSS('padding-top', paddingTop), " ", logicalCSS('padding-bottom', euiTheme.size.base), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), ";;label:euiToast;"),
-    decor: /*#__PURE__*/css("position:absolute;inset:0;pointer-events:none;", preventForcedColors(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
-      preferred: "\n          --euiToastTypeBackgroundColor: ".concat(euiTheme.colors.borderBasePlain, ";\n        ")
-    }), " &::before{", decorCommonStyles, " z-index:", decorLevel, ";border-block-start-color:var(--euiToastTypeBackgroundColor);}&::after{", decorCommonStyles, "z-index:", decorLevel + 1, ";border-block-start-color:var(--euiToastTypeColor);};label:decor;"),
+    decor: /*#__PURE__*/css("position:absolute;inset:0;border-radius:", borderRadius, ";overflow:hidden;pointer-events:none;", preventForcedColors(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+      preferred: "\n          --euiToastTypeBackgroundColor: ".concat(euiTheme.colors.borderBasePlain, ";\n          /* Cover the high contrast border so the clip matches its outer radius */\n          inset-block-start: -").concat(highlightOffset, ";\n          inset-inline-start: -").concat(highlightOffset, ";\n          inset-inline-end: -").concat(highlightOffset, ";\n        ")
+    }), " &::before{", decorCommonStyles, " z-index:", decorLevel, ";background-color:var(--euiToastTypeBackgroundColor);}&::after{", decorCommonStyles, "z-index:", decorLevel + 1, ";background-color:var(--euiToastTypeColor);transform-origin:left center;[dir='rtl'] &{transform-origin:right center;}};label:decor;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
     // handles icon + text layout
@@ -60,7 +54,7 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
     icon: /*#__PURE__*/css("grid-area:icon;position:relative;", logicalCSS('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
     actions: /*#__PURE__*/css("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", logicalCSS('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
     dismissButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', offsetTop), ";", logicalCSS('right', euiTheme.size.s), ";;label:dismissButton;"),
-    hasAnimation: /*#__PURE__*/css("&::after{", euiCanAnimate, "{will-change:clip-path;animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;[dir='rtl'] &{animation:", euiToastAnimationRTL, " var(--euiToastAnimationMs) linear forwards;}}};label:hasAnimation;")
+    hasAnimation: /*#__PURE__*/css("&::after{", euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {

package/optimize/es/components/token/token.js

@@ -13,13 +13,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
+import { useEuiMemoizedStyles, isColorDark, hexToRgb } from '../../services';
 import { EuiIcon } from '../icon';
 import { TOKEN_MAP } from './token_map';
 import { COLORS } from './token_types';
-import { euiTokenStyles } from './token.styles';
+import { euiTokenFillStyles } from './token.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var isTokenColor = function isTokenColor(color) {
   return COLORS.includes(color);
@@ -48,7 +48,6 @@ export var EuiToken = function EuiToken(_ref) {
   if (typeof iconType === 'string' && iconType.indexOf('token') === 0 && size === 's') {
     finalSize = 'm';
   }
-  var euiTheme = useEuiTheme();
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties
@@ -56,11 +55,7 @@ export var EuiToken = function EuiToken(_ref) {
   var finalColor = color || tokenDefaults.color || 'gray';
   var finalShape = shape || tokenDefaults.shape || 'circle';
   var finalFill = fill || 'light';
-
-  // memoize styles to reduce executing contained color calculations
-  var styles = useMemo(function () {
-    return euiTokenStyles(euiTheme, finalFill);
-  }, [euiTheme, finalFill]);
+  var styles = useEuiMemoizedStyles(euiTokenFillStyles[finalFill]);
   var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
   var finalStyle = style;
   if (isTokenColor(finalColor)) {

package/optimize/es/components/token/token.styles.js

@@ -89,4 +89,17 @@ export var euiTokenStyles = function euiTokenStyles(euiThemeContext, fill) {
     dark: /*#__PURE__*/css(";label:dark;"),
     none: /*#__PURE__*/css(";label:none;")
   };
+};
+
+// Static per-fill generators so `useEuiMemoizedStyles` can share them across instances
+export var euiTokenFillStyles = {
+  light: function light(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'light');
+  },
+  dark: function dark(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'dark');
+  },
+  none: function none(euiThemeContext) {
+    return euiTokenStyles(euiThemeContext, 'none');
+  }
 };

package/optimize/es/components/tree_view/tree_view.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "theme"];
+var _excluded = ["children", "className", "items", "display", "expandByDefault", "showExpansionArrows", "stylesMemoizer"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component, createContext } from 'react';
 import classNames from 'classnames';
-import { withEuiTheme, keys, htmlIdGenerator } from '../../services';
+import { withEuiStylesMemoizer, keys, htmlIdGenerator } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiTreeViewItem } from './tree_view_item';
@@ -182,9 +182,9 @@ export var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
         display = _this$props$display === void 0 ? 'default' : _this$props$display,
         expandByDefault = _this$props.expandByDefault,
         showExpansionArrows = _this$props.showExpansionArrows,
-        theme = _this$props.theme,
+        stylesMemoizer = _this$props.stylesMemoizer,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      var styles = euiTreeViewStyles(theme);
+      var styles = stylesMemoizer(euiTreeViewStyles);
       var cssStyles = [styles.euiTreeView, styles[display]];
 
       // Computed classNames
@@ -258,6 +258,6 @@ export var EuiTreeViewClass = /*#__PURE__*/function (_Component) {
  * @see {@link https://eui.elastic.co/docs/components/navigation/tree-view/|EuiTreeView documentation}
  */
 _defineProperty(EuiTreeViewClass, "contextType", EuiTreeViewContext);
-export var EuiTreeView = Object.assign(withEuiTheme(EuiTreeViewClass), {
+export var EuiTreeView = Object.assign(withEuiStylesMemoizer(EuiTreeViewClass), {
   Item: EuiTreeViewItem
 });

package/optimize/lib/components/accordion/accordion_children/accordion_children.js

@@ -41,8 +41,7 @@ var EuiAccordionChildren = exports.EuiAccordionChildren = function EuiAccordionC
   var classes = (0, _classnames.default)('euiAccordion__children', {
     'euiAccordion__children-isLoading': isLoading
   });
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _accordion_children.euiAccordionChildrenStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_accordion_children.euiAccordionChildrenStyles);
   var cssStyles = [styles.euiAccordion__children, isLoading && styles.isLoading, paddingSize && paddingSize !== 'none' && styles[paddingSize]];
 
   /**
@@ -52,7 +51,7 @@ var EuiAccordionChildren = exports.EuiAccordionChildren = function EuiAccordionC
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasTransition = _useState2[0],
     setHasTransition = _useState2[1];
-  var wrapperStyles = (0, _accordion_children.euiAccordionChildWrapperStyles)(euiTheme);
+  var wrapperStyles = (0, _services.useEuiMemoizedStyles)(_accordion_children.euiAccordionChildWrapperStyles);
   var wrapperCssStyles = [wrapperStyles.euiAccordion__childWrapper, isOpen ? wrapperStyles.isOpen : wrapperStyles.isClosed, initialIsOpen && !hasTransition && isOpen && wrapperStyles.noTransition];
 
   /* Controls enabling opening/closing transitions on first interaction

package/optimize/lib/components/accordion/accordion_trigger/accordion_arrow.js

@@ -27,9 +27,8 @@ var EuiAccordionArrow = exports.EuiAccordionArrow = function EuiAccordionArrow(_
     arrowProps = _ref.arrowProps,
     isOpen = _ref.isOpen,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _services.useEuiMemoizedStyles)(_accordion_arrow.euiAccordionArrowStyles);
   if (arrowDisplay === 'none') return null;
-  var styles = (0, _accordion_arrow.euiAccordionArrowStyles)(euiTheme);
   var cssStyles = [styles.euiAccordion__arrow, styles[arrowDisplay], isOpen ? styles.isOpen : styles.isClosed, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
   var classes = (0, _classnames.default)('euiAccordion__arrow', arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.className);
   return (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({