@elastic/eui 123.1.0 → 123.2.0

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

@@ -36,8 +36,7 @@ var EuiAccordionButton = exports.EuiAccordionButton = function EuiAccordionButto
     buttonProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var classes = (0, _classnames.default)('euiAccordion__button', buttonClassName, buttonProps.className);
   var buttonContentClasses = (0, _classnames.default)('euiAccordion__buttonContent', buttonContentClassName);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _accordion_button.euiAccordionButtonStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_accordion_button.euiAccordionButtonStyles);
   var cssStyles = [styles.euiAccordion__button, isDisabled && styles.disabled].concat((0, _toConsumableArray2.default)(paddingSize ? [styles[paddingSize], arrowDisplay === 'left' && styles.arrowLeft, arrowDisplay === 'right' && styles.arrowRight] : []), [buttonProps.css]);
   var elementIsButton = ButtonElement === 'button';
   return (0, _react2.jsx)(ButtonElement, (0, _extends2.default)({}, buttonProps, rest, {

package/optimize/lib/components/badge/badge.js

@@ -94,7 +94,6 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var clickableCssStyles = styles.clickable[isNamedColor ? color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill' : 'custom'];
   var iconOnClickCssStyles = isNamedColor ? styles.iconClickable[color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill'] : styles.iconClickable.custom;
   var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat((0, _toConsumableArray2.default)(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && clickableCssStyles, iconOnClick && !(onClick || href) && iconOnClickCssStyles]));
-  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
   var classes = (0, _classnames.default)('euiBadge', className);
@@ -153,7 +152,7 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
     css: styles.euiBadge__content
   }, iconSide === 'left' && optionalIcon, children && (0, _react2.jsx)("span", {
     className: "euiBadge__text",
-    css: textCssStyles
+    css: styles.text.euiBadge__text
   }, children), iconSide === 'right' && optionalIcon);
   if (iconOnClick) {
     return onClick || href ? (0, _react2.jsx)("span", {

package/optimize/lib/components/badge/badge.styles.js

@@ -22,14 +22,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "font-size:0;&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1hw5vc4-clickable",
-  styles: "cursor:pointer;label:clickable;"
-} : {
-  name: "1hw5vc4-clickable",
-  styles: "cursor:pointer;label:clickable;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
@@ -56,7 +48,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
   });
   var focusStyles = "\n    &:focus {\n      ".concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      /* uses custom offset as the default \"outset\" is not enough */\n      outline-offset: ").concat(focusOutlineOffset, ";\n    }\n  ");
   var getClickableStyles = function getClickableStyles(interactionStyles) {
-    return "\n    &:not(:disabled) {\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  ");
+    return "\n    &:not(:disabled) {\n      cursor: pointer;\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n  ");
   };
   var customInteractiveStyles = "\n    &:hover {\n      background-color: var(--euiBadgeBackgroundHoverColor);\n    }\n\n    &:active {\n      background-color: var(--euiBadgeBackgroundActiveColor);\n    }\n\n    ".concat(focusStyles, "\n  ");
   var inlinePadding = (0, _global_styling.mathWithUnits)(
@@ -88,7 +80,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
         }), ";;label:base;"),
         // hollow has a visible border that must not be overwritten on hover
         hollow: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " &:hover,&:focus{", highContrastStyles, ";};label:hollow;"),
-        custom: /*#__PURE__*/(0, _react.css)("&:not(:disabled){", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
+        custom: /*#__PURE__*/(0, _react.css)("&:not(:disabled){cursor:pointer;", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
       };
     },
     // on icon button hover, we apply hover styles on the entire badge
@@ -132,7 +124,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
         danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
       }
     },
-    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
+    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";&:disabled{cursor:not-allowed;}*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
     // Ensure proper height in case of just displaying an icon
@@ -141,8 +133,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
     // Text
     text: {
-      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;"),
-      clickable: _ref2
+      euiBadge__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " padding-inline:", euiTheme.size.xxs, ";cursor:inherit;;label:euiBadge__text;")
     },
     // Icon
     icon: {

package/optimize/lib/components/card/card.js

@@ -75,13 +75,13 @@ var EuiCard = exports.EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _card.euiCardStyles)(euiThemeContext, paddingSize);
+  var styles = (0, _services.useEuiMemoizedStyles)(_card.euiCardStylesByPadding[paddingSize]);
   var cardStyles = [styles.card.euiCard,
   // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
   var mainStyles = [styles.main.euiCard__main, styles.main.layout[layout]];
-  var textStyles = (0, _card.euiCardTextStyles)(euiThemeContext);
+  var textStyles = (0, _services.useEuiMemoizedStyles)(_card.euiCardTextStyles);
   var textCSS = [textStyles.euiCard__text,
   // Text alignment should always be left when horizontal
   textStyles.aligned[layout === 'horizontal' ? 'left' : textAlign], isClickable && textStyles.interactive, isDisabled && textStyles.disabled];

package/optimize/lib/components/card/card.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCardTextStyles = exports.euiCardStyles = exports.euiCardBetaBadgeStyles = void 0;
+exports.euiCardTextStyles = exports.euiCardStylesByPadding = exports.euiCardStyles = exports.euiCardBetaBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../global_styling/mixins");
@@ -116,6 +116,28 @@ var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeConte
     }
   };
 };
+
+// Static per-size generators so `useEuiMemoizedStyles` can share them across instances
+var euiCardStylesByPadding = exports.euiCardStylesByPadding = {
+  none: function none(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'none');
+  },
+  xs: function xs(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'xs');
+  },
+  s: function s(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 's');
+  },
+  m: function m(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'm');
+  },
+  l: function l(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'l');
+  },
+  xl: function xl(euiThemeContext) {
+    return euiCardStyles(euiThemeContext, 'xl');
+  }
+};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "r8agzg-euiCard__text",
   styles: "font:inherit;color:inherit;cursor:inherit;label:euiCard__text;"

package/optimize/lib/components/card/checkable_card/checkable_card.js

@@ -17,7 +17,7 @@ var _panel = require("../../panel");
 var _services = require("../../../services");
 var _checkable_card = require("./checkable_card.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "css", "checkableType", "label", "labelProps", "checked", "disabled", "hasShadow", "hasBorder"];
+var _excluded = ["children", "className", "css", "checkableType", "label", "labelProps", "name", "checked", "disabled", "hasShadow", "hasBorder"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,6 +37,7 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
     checkableType = _ref$checkableType === void 0 ? 'radio' : _ref$checkableType,
     label = _ref.label,
     labelProps = _ref.labelProps,
+    name = _ref.name,
     checked = _ref.checked,
     disabled = _ref.disabled,
     hasShadow = _ref.hasShadow,
@@ -64,12 +65,14 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
   var checkableElement;
   if (checkableType === 'radio') {
     checkableElement = (0, _react2.jsx)(_form.EuiRadio, (0, _extends2.default)({
+      name: name,
       checked: checked,
       disabled: disabled
     }, rest));
   } else {
     checkableElement = (0, _react2.jsx)(_form.EuiCheckbox, (0, _extends2.default)({
       inputRef: inputEl,
+      name: name,
       checked: checked,
       disabled: disabled
     }, rest));

package/optimize/lib/components/code/utils.js

@@ -167,9 +167,9 @@ function wrapLines(nodes, options, euiTheme) {
     }
   });
   var wrapped = [];
+  var styles = (0, _code_block_line.euiCodeBlockLineStyles)(euiTheme);
   grouped.forEach(function (node, i) {
     var children = node;
-    var styles = (0, _code_block_line.euiCodeBlockLineStyles)(euiTheme);
     var lineStyles = (0, _css.cx)([styles.euiCodeBlock__line, options.showLineNumbers && styles.hasLineNumbers]);
     if (options.showLineNumbers) {
       var _options$annotations;

package/optimize/lib/components/flyout/flyout_menu/flyout_menu.styles.js

@@ -32,14 +32,11 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var topOffset = (0, _global_styling.mathWithUnits)([euiTheme.size.m, euiTheme.border.width.thin], function (x, y) {
-    return x + y;
-  });
   var containerHeight = (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.border.width.thin], function (x, y) {
-    return x * 3 + y * 2;
+    return x * 3 + y;
   });
   return {
-    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:", containerHeight, ";flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiFlyout__closeButton{", (0, _global_styling.logicalCSS)('top', topOffset), ";}.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:", containerHeight, ";flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";.euiFlyout__closeButton{", (0, _global_styling.logicalCSS)('top', euiTheme.size.m), ";}.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
     // Full height in high contrast mode so dividers can bleed to the container edges.
     euiFlyoutMenu__controls: _ref2,
     euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),

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

@@ -30,11 +30,38 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     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 = (0, _react.useState)(function () {
+      return typeof window !== 'undefined' ? window.innerWidth : Infinity;
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowWidth = _useState2[0],
+    setWindowWidth = _useState2[1];
+  var tracksWindow = enabled && referenceWidth === undefined;
+  (0, _react.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 = (0, _react.useCallback)(function (width) {
     var maxResizeWidth = siblingFlyoutWidth ? _referenceWidth * 0.9 - siblingFlyoutWidth : _referenceWidth * 0.9;
 
@@ -45,14 +72,19 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     var upperBound = Math.min(maxWidth || Infinity, maxResizeWidth);
     return Math.max(minWidth, Math.min(width, upperBound));
   }, [minWidth, maxWidth, siblingFlyoutWidth, _referenceWidth]);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(0),
     _useState4 = (0, _slicedToArray2.default)(_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 = (0, _react.useRef)(0);
+  var setFlyoutWidth = (0, _react.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 = (0, _react.useState)(null),
@@ -62,10 +94,9 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
   (0, _react.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
@@ -77,9 +108,13 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
   // the container / viewport resizes (both shrink AND grow).
   var prevReferenceWidthRef = (0, _react.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 = (0, _react.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).
   (0, _react.useEffect)(function () {
     if (!enabled) return; // Don't update width when resizing is disabled
 
@@ -87,34 +122,49 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
       // 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 = (0, _services.useLatest)(onResize);
+  var onUserResize = (0, _react.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 = (0, _react.useRef)(0);
   var initialMouseX = (0, _react.useRef)(0);
+  var drag = (0, _react.useRef)({
+    startWidth: 0,
+    width: 0
+  });
 
   // Account for flyout side and logical property direction
   var direction = (0, _react.useMemo)(function () {
@@ -131,27 +181,37 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     }
     var mouseOffset = (0, _helpers.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 = (0, _react.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 = (0, _react.useCallback)(function (e) {
     var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
     if (!enabled) {
       return;
     }
     initialMouseX.current = (0, _helpers.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
@@ -161,34 +221,29 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     window.addEventListener('touchend', onMouseUp);
   }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
   var onKeyDown = (0, _react.useCallback)(function (e) {
-    setCallOnResize(true);
     if (!enabled) {
       return;
     }
     var KEYBOARD_OFFSET = 10;
+    var offset;
     switch (e.key) {
       case _services.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 _services.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
-  (0, _react.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 = (0, _react.useMemo)(function () {
     if (enabled && flyoutWidth && _referenceWidth > 0) {
       var pctValue = flyoutWidth / _referenceWidth * 100;

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

@@ -40,8 +40,7 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = function Eui
     isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     isDropdown = _ref.isDropdown;
-  var euiThemeContext = (0, _services.useEuiTheme)();
-  var styles = (0, _form_control_layout_icons.euiFormControlLayoutIconsStyles)(euiThemeContext);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout_icons.euiFormControlLayoutIconsStyles);
   var cssStyles = [styles.euiFormControlLayoutIcons, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(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 (0, _react2.jsx)("div", {
     css: cssStyles,

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

@@ -34,15 +34,11 @@ var EuiIconProductAgent = function EuiIconProductAgent(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("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"
-  }), (0, _react2.jsx)("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"
   }), (0, _react2.jsx)("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"
   }));
 };
 var icon = exports.icon = EuiIconProductAgent;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiIconRuler = function EuiIconRuler(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }));
+};
+var icon = exports.icon = EuiIconRuler;

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

@@ -2879,6 +2879,13 @@ var typeToPathMap = exports.typeToPathMap = {
   }, {
     synonyms: ['tree', 'parent']
   }),
+  ruler: withMetadata(function () {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./assets/ruler'));
+    });
+  }, {
+    synonyms: ['ruler', 'measure', 'measurement', 'length', 'scale', 'size']
+  }),
   save: withMetadata(function () {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require('./assets/save'));

package/optimize/lib/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/lib/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/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -67,11 +67,11 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
       className: 'euiKeyPadMenuItem__checkableInput',
       css: cssStyles,
       checked: isSelected,
-      disabled: isDisabled,
-      name: name
+      disabled: isDisabled
     };
     if (checkable === 'single') {
       return (0, _react2.jsx)(_form.EuiRadio, (0, _extends2.default)({}, sharedProps, {
+        name: name,
         value: value,
         onChange: function onChange() {
           return _onChange(itemId, value);
@@ -79,6 +79,7 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
       }));
     } else {
       return (0, _react2.jsx)(_form.EuiCheckbox, (0, _extends2.default)({}, sharedProps, {
+        name: name,
         onChange: function onChange() {
           return _onChange(itemId);
         }

package/optimize/lib/components/progress/progress.js

@@ -67,12 +67,12 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
   var customTextColorStyles = !isNamedColor ? {
     color: (0, _services.makeHighContrastColor)(color)(euiTheme.euiTheme)
   } : {};
-  var styles = (0, _progress.euiProgressStyles)(euiTheme, determinate);
+  var styles = (0, _services.useEuiMemoizedStyles)(determinate ? _progress.euiProgressNativeStyles : _progress.euiProgressIndeterminateStyles);
   var cssStyles = [styles.euiProgress, determinate && styles.native, !determinate && styles.indeterminate, styles[size], styles[position], isNamedColor ? styles[color] : styles.customColor];
-  var dataStyles = (0, _progress.euiProgressDataStyles)(euiTheme);
+  var dataStyles = (0, _services.useEuiMemoizedStyles)(_progress.euiProgressDataStyles);
   var dataCssStyles = [dataStyles.euiProgress__data, size === 'l' && dataStyles[size]];
   var labelCssStyles = [_progress.euiProgressLabelStyles.euiProgress__label, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
-  var valueTextStyles = (0, _progress.euiProgressValueTextStyles)(euiTheme);
+  var valueTextStyles = (0, _services.useEuiMemoizedStyles)(_progress.euiProgressValueTextStyles);
   var valueTextCssStyles = [valueTextStyles.euiProgress__valueText, isNamedColor ? valueTextStyles[color] : styles.customColor];
   var classes = (0, _classnames.default)('euiProgress', className);
   var labelClasses = (0, _classnames.default)('euiProgress__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiProgressValueTextStyles = exports.euiProgressStyles = exports.euiProgressLabelStyles = exports.euiProgressDataStyles = void 0;
+exports.euiProgressValueTextStyles = exports.euiProgressStyles = exports.euiProgressNativeStyles = exports.euiProgressLabelStyles = exports.euiProgressIndeterminateStyles = exports.euiProgressDataStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
@@ -140,6 +140,13 @@ var euiProgressStyles = exports.euiProgressStyles = function euiProgressStyles(e
 /**
  * Data styles
  */
+// Static per-variant generators so `useEuiMemoizedStyles` can share them across instances
+var euiProgressNativeStyles = exports.euiProgressNativeStyles = function euiProgressNativeStyles(euiThemeContext) {
+  return euiProgressStyles(euiThemeContext, true);
+};
+var euiProgressIndeterminateStyles = exports.euiProgressIndeterminateStyles = function euiProgressIndeterminateStyles(euiThemeContext) {
+  return euiProgressStyles(euiThemeContext, false);
+};
 var euiProgressDataStyles = exports.euiProgressDataStyles = function euiProgressDataStyles(euiThemeContext) {
   return {
     euiProgress__data: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;gap:", euiThemeContext.euiTheme.size.xs, ";", (0, _text.euiText)(euiThemeContext.euiTheme), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:euiProgress__data;"),