@elastic/eui 91.3.0 → 92.0.0

package/optimize/lib/components/basic_table/collapsed_item_actions.js

@@ -30,16 +30,12 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
   var actions = _ref.actions,
     itemId = _ref.itemId,
     item = _ref.item,
-    actionEnabled = _ref.actionEnabled,
+    actionsDisabled = _ref.actionsDisabled,
     className = _ref.className;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popoverOpen = _useState2[0],
     setPopoverOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    allDisabled = _useState4[0],
-    setAllDisabled = _useState4[1];
   var onClickItem = (0, _react.useCallback)(function (onClickAction) {
     setPopoverOpen(false);
     onClickAction === null || onClickAction === void 0 ? void 0 : onClickAction();
@@ -49,8 +45,7 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
       var _action$available, _action$available2;
       var available = (_action$available = (_action$available2 = action.available) === null || _action$available2 === void 0 ? void 0 : _action$available2.call(action, item)) !== null && _action$available !== void 0 ? _action$available : true;
       if (!available) return controls;
-      var enabled = actionEnabled(action);
-      if (enabled) setAllDisabled(false);
+      var enabled = action.enabled == null || action.enabled(item);
       if ((0, _action_types.isCustomItemAction)(action)) {
         var customAction = action;
         var actionControl = customAction.render(item, enabled);
@@ -81,7 +76,7 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
         controls.push((0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
           key: index,
           className: "euiBasicTable__collapsedAction",
-          disabled: !enabled,
+          disabled: !enabled && !actionsDisabled,
           href: href,
           target: target,
           icon: icon,
@@ -99,17 +94,21 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
       }
       return controls;
     }, []);
-  }, [actions, actionEnabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, onClickItem]);
   var popoverButton = (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiCollapsedItemActions.allActions",
-    default: "All actions"
-  }, function (allActions) {
+    tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
+    defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
+  }, function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      allActions = _ref3[0],
+      allActionsDisabled = _ref3[1];
     return (0, _react2.jsx)(_button.EuiButtonIcon, {
       className: className,
-      "aria-label": allActions,
+      "aria-label": actionsDisabled ? allActionsDisabled : allActions,
+      title: actionsDisabled ? allActionsDisabled : undefined,
       iconType: "boxesHorizontal",
       color: "text",
-      isDisabled: allDisabled,
+      isDisabled: actionsDisabled,
       onClick: function onClick() {
         return setPopoverOpen(function (isOpen) {
           return !isOpen;
@@ -118,7 +117,7 @@ var CollapsedItemActions = function CollapsedItemActions(_ref) {
       "data-test-subj": "euiCollapsedItemActionsButton"
     });
   });
-  var withTooltip = !allDisabled && (0, _react2.jsx)(_i18n.EuiI18n, {
+  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiCollapsedItemActions.allActions",
     default: "All actions"
   }, function (allActions) {

package/optimize/lib/components/basic_table/expanded_item_actions.js

@@ -23,7 +23,7 @@ var ExpandedItemActions = function ExpandedItemActions(_ref) {
   var actions = _ref.actions,
     itemId = _ref.itemId,
     item = _ref.item,
-    actionEnabled = _ref.actionEnabled,
+    actionsDisabled = _ref.actionsDisabled,
     className = _ref.className;
   var moreThanThree = actions.length > 2;
   return (0, _react2.jsx)(_react.default.Fragment, null, actions.reduce(function (tools, action, index) {
@@ -31,7 +31,7 @@ var ExpandedItemActions = function ExpandedItemActions(_ref) {
     if (!available) {
       return tools;
     }
-    var enabled = actionEnabled(action);
+    var enabled = action.enabled == null || action.enabled(item);
     var key = "item_action_".concat(itemId, "_").concat(index);
     var classes = (0, _classnames.default)(className, {
       expandedItemActions__completelyHide: moreThanThree && index < 2
@@ -43,7 +43,7 @@ var ExpandedItemActions = function ExpandedItemActions(_ref) {
         className: classes,
         index: index,
         action: action,
-        enabled: enabled,
+        enabled: enabled && !actionsDisabled,
         item: item
       }));
     } else {
@@ -51,7 +51,7 @@ var ExpandedItemActions = function ExpandedItemActions(_ref) {
         key: key,
         className: classes,
         action: action,
-        enabled: enabled,
+        enabled: enabled && !actionsDisabled,
         item: item
       }));
     }

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -125,7 +125,8 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       });
     },
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
-    ref: actionsButtonRef
+    ref: actionsButtonRef,
+    "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
   }, cellContent, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     display: "block",
     panelPaddingSize: "none",
@@ -147,8 +148,7 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     }, (0, _react2.jsx)(_icon.EuiIcon, {
       type: "boxesVertical",
       size: "s",
-      color: "text",
-      "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
+      color: "text"
     })),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {

package/optimize/lib/components/drag_and_drop/drag_and_drop.a11y.js

@@ -77,7 +77,7 @@ var DragAndDrop = function DragAndDrop() {
 beforeEach(function () {
   cy.realMount((0, _react2.jsx)(DragAndDrop, null));
 });
-describe('EuiControlBar', function () {
+describe('EuiDragDrop', function () {
   describe('Automated accessibility check', function () {
     it('has zero violations on render', function () {
       cy.checkAxe();

package/optimize/lib/components/filter_group/filter_button.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFilterButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -65,6 +65,10 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
     'euiFilterButton-hasNotification': numFiltersDefined
   }, className);
+
+  /**
+   * Badge
+   */
   var showBadge = numFiltersDefined || numActiveFiltersDefined;
   var badgeCount = numActiveFilters || numFilters;
   var activeBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeActiveAriaLabel', '{count} active filters', {
@@ -73,9 +77,6 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
-  var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
-    'euiFilterButton__text-hasNotification': showBadge
-  }, textProps && textProps.className);
   var badgeContent = showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
     className: "euiFilterButton__notification",
     css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
@@ -83,18 +84,27 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
     role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
   }, badgeCount);
+
+  /**
+   * Text
+   */
+  var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
+    'euiFilterButton__text-hasNotification': showBadge
+  }, textProps && textProps.className);
+  var textCssStyles = [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css];
   var _useInnerText = (0, _inner_text.useInnerText)(),
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  var buttonContents = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+  var textContent = (0, _react2.jsx)("span", (0, _extends2.default)({
     ref: ref,
-    className: "euiFilterButton__textShift",
-    css: textStyles.euiFilterButton__textShift,
     "data-text": dataText,
     title: dataText
-  }, children), badgeContent);
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
   return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
@@ -103,13 +113,10 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     iconSide: iconSide,
     iconType: iconType,
     type: type,
-    textProps: _objectSpread(_objectSpread({}, textProps), {}, {
-      className: buttonTextClassNames,
-      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css]
-    }),
+    textProps: false,
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), buttonContents);
+  }, rest), textContent, badgeContent);
 };
 exports.EuiFilterButton = EuiFilterButton;

package/optimize/lib/components/filter_group/filter_button.styles.js

@@ -14,8 +14,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
@@ -24,7 +24,7 @@ var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
   };
 };
 exports.euiFilterButtonDisplay = euiFilterButtonDisplay;
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "jkp921-noGrow",
   styles: "flex-grow:0;label:noGrow;"
 } : {
@@ -43,9 +43,9 @@ var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__textShift{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
     withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
-    noGrow: _ref4,
+    noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
@@ -69,27 +69,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:inherit;label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "f0jxzj-hasIcon",
-  styles: "justify-content:space-between;label:hasIcon;"
-} : {
-  name: "f0jxzj-hasIcon",
-  styles: "justify-content:space-between;label:hasIcon;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     content: {
       euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
-      hasIcon: _ref3
+      hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
-      euiFilterButton__text: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__text;"),
-      hasNotification: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;gap:", euiTheme.size.s, ";;label:hasNotification;"),
-      euiFilterButton__textShift: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " ", (0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
+      hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
         return x * 3;
-      })), ";;label:euiFilterButton__textShift;")
+      })), ";;label:hasNotification;")
     },
     notification: {
       euiFilterButton__notification: _ref2,

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

@@ -111,18 +111,18 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
      */
     if (isPushed) {
       if (side === 'right') {
-        document.body.style.paddingRight = "".concat(dimensions.width, "px");
+        document.body.style.paddingInlineEnd = "".concat(dimensions.width, "px");
       } else if (side === 'left') {
-        document.body.style.paddingLeft = "".concat(dimensions.width, "px");
+        document.body.style.paddingInlineStart = "".concat(dimensions.width, "px");
       }
     }
     return function () {
       document.body.classList.remove('euiBody--hasFlyout');
       if (isPushed) {
         if (side === 'right') {
-          document.body.style.paddingRight = '';
+          document.body.style.paddingInlineEnd = '';
         } else if (side === 'left') {
-          document.body.style.paddingLeft = '';
+          document.body.style.paddingInlineStart = '';
         }
       }
     };

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutResizable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
+var _resizable_container = require("../resizable_container");
+var _flyout = require("./flyout");
+var _flyout_resizable = require("./flyout_resizable.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["size", "maxWidth", "minWidth", "side", "children"];
+/*
+ * 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.
+ */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var size = _ref.size,
+    maxWidth = _ref.maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'right' : _ref$side,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _flyout_resizable.euiFlyoutResizableButtonStyles)(euiTheme);
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+  var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    flyoutRef = _useState4[0],
+    setFlyoutRef = _useState4[1];
+  var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
+  (0, _react.useEffect)(function () {
+    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
+  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = (0, _react.useRef)(0);
+  var initialMouseX = (0, _react.useRef)(0);
+
+  // Account for flyout side and logical property direction
+  var direction = (0, _react.useMemo)(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    var mouseOffset = getMouseOrTouchX(e) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction]);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    var _flyoutRef$offsetWidt;
+    initialMouseX.current = getMouseOrTouchX(e);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var KEYBOARD_OFFSET = 10;
+    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);
+        });
+        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);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction]);
+  return (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({}, rest, {
+    size: flyoutWidth || size,
+    maxWidth: maxWidth,
+    side: side,
+    ref: setRefs
+  }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
+    isHorizontal: true,
+    css: cssStyles,
+    onMouseDown: onMouseDown,
+    onTouchStart: onMouseDown,
+    onKeyDown: onKeyDown
+  }), children);
+});
+exports.EuiFlyoutResizable = EuiFlyoutResizable;
+EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';
+var getMouseOrTouchX = function getMouseOrTouchX(e) {
+  // Some Typescript fooling is needed here
+  var x = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
+  return x;
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutResizableButtonStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * 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.
+                                                                                                                                                                                                                                                                                           */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6syi0e-euiFlyoutResizableButton",
+  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;"
+} : {
+  name: "6syi0e-euiFlyoutResizableButton",
+  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiFlyoutResizableButton: _ref,
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+  };
+};
+exports.euiFlyoutResizableButtonStyles = euiFlyoutResizableButtonStyles;

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

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "EuiFlyoutHeader", {
     return _flyout_header.EuiFlyoutHeader;
   }
 });
+Object.defineProperty(exports, "EuiFlyoutResizable", {
+  enumerable: true,
+  get: function get() {
+    return _flyout_resizable.EuiFlyoutResizable;
+  }
+});
 Object.defineProperty(exports, "euiFlyoutSlideInLeft", {
   enumerable: true,
   get: function get() {
@@ -43,4 +49,5 @@ var _flyout = require("./flyout");
 var _flyout_body = require("./flyout_body");
 var _flyout_footer = require("./flyout_footer");
 var _flyout_header = require("./flyout_header");
-var _flyout2 = require("./flyout.styles");
+var _flyout2 = require("./flyout.styles");
+var _flyout_resizable = require("./flyout_resizable");

package/optimize/lib/components/form/range/dual_range.js

@@ -62,38 +62,10 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       id: _this.props.id || (0, _services.htmlIdGenerator)()(),
-      rangeSliderRefAvailable: false,
       isPopoverOpen: false,
-      rangeWidth: 0,
-      isVisible: true // used to trigger a rerender if initial element width is 0
+      rangeWidth: 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventPopoverClose", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rangeSliderRef", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRangeSliderRefUpdate", function (ref) {
-      _this.rangeSliderRef = ref;
-      if (ref) {
-        if (_this.isInPopover) {
-          // Wait a tick for popover rendering to settle
-          requestAnimationFrame(function () {
-            _this.setState({
-              rangeSliderRefAvailable: true,
-              rangeWidth: ref.clientWidth
-            });
-          });
-        } else {
-          // If not in a popover, no need to wait
-          _this.setState({
-            rangeSliderRefAvailable: true,
-            rangeWidth: ref.clientWidth
-          });
-        }
-      } else {
-        _this.setState({
-          rangeSliderRefAvailable: false,
-          rangeWidth: 0
-        });
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "leftPosition", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dragAcc", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_determineInvalidThumbMovement", function (newVal, lower, upper, e) {
@@ -284,14 +256,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isPopoverOpen: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
-      var _this$props$inputPopo, _this$props$inputPopo2;
-      if (_this.rangeSliderRef) {
-        _this.setState({
-          rangeWidth: _this.rangeSliderRef.clientWidth
-        });
-      }
-      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setRangeWidth", function (_ref) {
+      var width = _ref.width;
+      _this.setState({
+        rangeWidth: width
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -314,7 +283,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var delta = _this.leftPosition - x;
       _this.leftPosition = x;
       _this.dragAcc = _this.dragAcc + delta;
-      var percentageOfArea = _this.dragAcc / _this.rangeSliderRef.clientWidth;
+      var percentageOfArea = _this.dragAcc / _this.state.rangeWidth;
       var percentageOfRange = percentageOfArea * (max - min);
       var newLower = _this.getNearestStep(lowerValue - percentageOfRange);
       var newUpper = _this.getNearestStep(upperValue - percentageOfRange);
@@ -358,32 +327,12 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     get: function get() {
       return this.lowerValueIsValid && this.upperValueIsValid;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$rangeSliderRef;
-      if (((_this$rangeSliderRef = this.rangeSliderRef) === null || _this$rangeSliderRef === void 0 ? void 0 : _this$rangeSliderRef.clientWidth) === 0) {
-        this.setState({
-          isVisible: false
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$rangeSliderRef2;
-      if ((_this$rangeSliderRef2 = this.rangeSliderRef) !== null && _this$rangeSliderRef2 !== void 0 && _this$rangeSliderRef2.clientWidth && !this.state.isVisible) {
-        this.setState({
-          isVisible: true
-        });
-      }
-    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
+      var _ref2 = this.context,
+        defaultFullWidth = _ref2.defaultFullWidth;
       var _this$props = this.props,
         className = _this$props.className,
         customCss = _this$props.css,
@@ -539,10 +488,10 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var classes = (0, _classnames.default)('euiDualRange', className);
       var dualRangeStyles = (0, _dual_range.euiDualRangeStyles)();
       var cssStyles = [dualRangeStyles.euiDualRange, customCss];
-      var leftThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
+      var leftThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
         left: '0'
       };
-      var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
+      var rightThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
       var leftThumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(this.lowerValue));
@@ -586,7 +535,6 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
         className: "euiDualRange__slider",
         css: dualRangeStyles.euiDualRange__slider,
-        ref: this.handleRangeSliderRefUpdate,
         id: id,
         name: name,
         min: min,
@@ -600,7 +548,9 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         showRange: showRange,
         onFocus: _onFocus,
         onBlur: _onBlur
-      }, rest)), this.state.rangeSliderRefAvailable && (0, _react2.jsx)(_react.default.Fragment, null, isDraggable && this.isValid && (0, _react2.jsx)(_range_draggable.EuiRangeDraggable, {
+      }, rest, {
+        onResize: this.setRangeWidth
+      })), isDraggable && this.isValid && (0, _react2.jsx)(_range_draggable.EuiRangeDraggable, {
         min: min,
         max: max,
         value: [this.lowerValue, this.upperValue],
@@ -640,7 +590,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         style: (0, _global_styling.logicalStyles)(rightThumbStyles),
         "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
         "aria-label": showInputOnly ? undefined : this.props['aria-label']
-      })), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+      }), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
         showTicks: showTicks,
         min: Number(min),
         max: Number(max),
@@ -672,7 +622,6 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
         disableFocusTrap: true,
-        onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
       }), theRange) : undefined;
       return thePopover || theRange;