@elastic/eui 91.3.0 → 92.0.0

package/lib/components/tree_view/tree_view.js

@@ -61,34 +61,12 @@ var displayToClassNameMap = {
 var EuiTreeView = /*#__PURE__*/function (_Component) {
   _inherits(EuiTreeView, _Component);
   var _super = _createSuper(EuiTreeView);
-  function EuiTreeView() {
+  function EuiTreeView(props, context) {
     var _this;
     _classCallCheck(this, EuiTreeView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props, context);
     _defineProperty(_assertThisInitialized(_this), "treeIdGenerator", (0, _services.htmlIdGenerator)('euiTreeView'));
-    _defineProperty(_assertThisInitialized(_this), "isNested", !!_this.context);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
-        var id = _ref.id,
-          children = _ref.children;
-        return children ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }) : _this.props.items.map(function (_ref2) {
-        var id = _ref2.id,
-          children = _ref2.children,
-          isExpanded = _ref2.isExpanded;
-        return children && isExpanded ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }),
-      activeItem: '',
-      treeID: getTreeId(_this.props.id, _this.context, _this.treeIdGenerator),
-      expandChildNodes: _this.props.expandByDefault || false
-    });
+    _defineProperty(_assertThisInitialized(_this), "isNested", void 0);
     _defineProperty(_assertThisInitialized(_this), "buttonRef", []);
     _defineProperty(_assertThisInitialized(_this), "setButtonRef", function (ref, index) {
       _this.buttonRef[index] = ref;
@@ -183,6 +161,26 @@ var EuiTreeView = /*#__PURE__*/function (_Component) {
         _this.buttonRef[index].focus();
       }
     });
+    _this.isNested = !!_this.context;
+    _this.state = {
+      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
+        var id = _ref.id,
+          children = _ref.children;
+        return children ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }) : _this.props.items.map(function (_ref2) {
+        var id = _ref2.id,
+          children = _ref2.children,
+          isExpanded = _ref2.isExpanded;
+        return children && isExpanded ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }),
+      activeItem: '',
+      treeID: getTreeId(_this.props.id, context, _this.treeIdGenerator),
+      expandChildNodes: _this.props.expandByDefault || false
+    };
     return _this;
   }
   _createClass(EuiTreeView, [{

package/lib/utils/prop_types/is.js

@@ -18,7 +18,7 @@ var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if (value !== expectedValue) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is expected to equal [").concat(expectedValue, "] but\n         [").concat(value, "] was provided instead."));
     }
     return null;
   };
@@ -26,7 +26,7 @@ var is = function is(expectedValue) {
     var compName = componentName || 'ANONYMOUS';
     var value = props[propName];
     if ((0, _predicate.isNil)(value)) {
-      return new Error("[".concat(propName, "] property in [").concat(compName, "] component is required but seems to be missing"));
+      return new Error("[".concat(propName.toString(), "] property in [").concat(compName, "] component is required but seems to be missing"));
     }
     return validator(props, propName, componentName);
   };

package/optimize/es/components/basic_table/basic_table.js

@@ -421,7 +421,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         var sortDirection = _this2.resolveColumnSortDirection(column);
         items.push({
           name: column.name,
-          key: "_data_s_".concat(column.field, "_").concat(index),
+          key: "_data_s_".concat(String(column.field), "_").concat(index),
           onSort: _this2.resolveColumnOnSort(column),
           isSorted: !!sortDirection,
           isSortAscending: sortDirection ? SortDirection.isAsc(sortDirection) : undefined
@@ -574,11 +574,11 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           }
         }
         headers.push(___EmotionJSX(EuiTableHeaderCell, _extends({
-          key: "_data_h_".concat(field, "_").concat(index),
+          key: "_data_h_".concat(String(field), "_").concat(index),
           align: columnAlign,
           width: width,
           mobileOptions: mobileOptions,
-          "data-test-subj": "tableHeaderCell_".concat(field, "_").concat(index),
+          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index),
           description: description
         }, sorting), name));
       });
@@ -615,7 +615,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
 
         if (footer) {
           footers.push(___EmotionJSX(EuiTableFooterCell, {
-            key: "footer_".concat(field, "_").concat(footers.length - 1),
+            key: "footer_".concat(String(field), "_").concat(footers.length - 1),
             align: align
           }, footer));
           hasDefinedFooter = true;
@@ -798,19 +798,22 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItemActionsCell",
     value: function renderItemActionsCell(itemId, item, column, columnIndex) {
-      var _this7 = this;
-      var actionEnabled = function actionEnabled(action) {
-        return _this7.state.selection.length === 0 && (!action.enabled || action.enabled(item));
-      };
+      // Disable all actions if any row(s) are selected
+      var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
         return !action.available || action.available(item);
       });
       if (actualActions.length > 2) {
-        // if any of the actions `isPrimary`, add them inline as well, but only the first 2
-        var primaryActions = actualActions.filter(function (o) {
-          return o.isPrimary;
-        });
-        actualActions = primaryActions.slice(0, 2);
+        if (allDisabled) {
+          // If all actions are disabled, do not show any actions but the popover toggle
+          actualActions = [];
+        } else {
+          // if any of the actions `isPrimary`, add them inline as well, but only the first 2
+          var primaryActions = actualActions.filter(function (o) {
+            return o.isPrimary;
+          });
+          actualActions = primaryActions.slice(0, 2);
+        }
 
         // if we have more than 1 action, we don't show them all in the cell, instead we
         // put them all in a popover tool. This effectively means we can only have a maximum
@@ -823,18 +826,18 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
           render: function render(item) {
             return ___EmotionJSX(CollapsedItemActions, {
               actions: column.actions,
+              actionsDisabled: allDisabled,
               itemId: itemId,
-              item: item,
-              actionEnabled: actionEnabled
+              item: item
             });
           }
         });
       }
       var tools = ___EmotionJSX(ExpandedItemActions, {
         actions: actualActions,
+        actionsDisabled: allDisabled,
         itemId: itemId,
-        item: item,
-        actionEnabled: actionEnabled
+        item: item
       });
       var key = "record_actions_".concat(itemId, "_").concat(columnIndex);
       return ___EmotionJSX(EuiTableRowCell, {
@@ -852,7 +855,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var field = column.field,
         render = column.render,
         dataType = column.dataType;
-      var key = "_data_column_".concat(field, "_").concat(itemId, "_").concat(columnIndex);
+      var key = "_data_column_".concat(String(field), "_").concat(itemId, "_").concat(columnIndex);
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = get(item, field);
       var content = contentRenderer(value, item);
@@ -921,7 +924,7 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderPaginationBar",
     value: function renderPaginationBar() {
-      var _this8 = this;
+      var _this7 = this;
       var _this$props11 = this.props,
         error = _this$props11.error,
         pagination = _this$props11.pagination,
@@ -940,9 +943,9 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         }, function (tablePagination) {
           return ___EmotionJSX(PaginationBar, {
             pagination: pagination,
-            onPageSizeChange: _this8.onPageSizeChange.bind(_this8),
-            onPageChange: _this8.onPageChange.bind(_this8),
-            "aria-controls": _this8.tableId,
+            onPageSizeChange: _this7.onPageSizeChange.bind(_this7),
+            onPageChange: _this7.onPageChange.bind(_this7),
+            "aria-controls": _this7.tableId,
             "aria-label": tablePagination
           });
         });

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

@@ -20,16 +20,12 @@ export 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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     popoverOpen = _useState2[0],
     setPopoverOpen = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    allDisabled = _useState4[0],
-    setAllDisabled = _useState4[1];
   var onClickItem = useCallback(function (onClickAction) {
     setPopoverOpen(false);
     onClickAction === null || onClickAction === void 0 ? void 0 : onClickAction();
@@ -39,8 +35,7 @@ export 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 (isCustomItemAction(action)) {
         var customAction = action;
         var actionControl = customAction.render(item, enabled);
@@ -71,7 +66,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
         controls.push(___EmotionJSX(EuiContextMenuItem, {
           key: index,
           className: "euiBasicTable__collapsedAction",
-          disabled: !enabled,
+          disabled: !enabled && !actionsDisabled,
           href: href,
           target: target,
           icon: icon,
@@ -89,17 +84,21 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
       }
       return controls;
     }, []);
-  }, [actions, actionEnabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, onClickItem]);
   var popoverButton = ___EmotionJSX(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 = _slicedToArray(_ref2, 2),
+      allActions = _ref3[0],
+      allActionsDisabled = _ref3[1];
     return ___EmotionJSX(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;
@@ -108,7 +107,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
       "data-test-subj": "euiCollapsedItemActionsButton"
     });
   });
-  var withTooltip = !allDisabled && ___EmotionJSX(EuiI18n, {
+  var withTooltip = !actionsDisabled && ___EmotionJSX(EuiI18n, {
     token: "euiCollapsedItemActions.allActions",
     default: "All actions"
   }, function (allActions) {

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

@@ -16,7 +16,7 @@ export 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 ___EmotionJSX(React.Fragment, null, actions.reduce(function (tools, action, index) {
@@ -24,7 +24,7 @@ export 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 = classNames(className, {
       expandedItemActions__completelyHide: moreThanThree && index < 2
@@ -36,7 +36,7 @@ export var ExpandedItemActions = function ExpandedItemActions(_ref) {
         className: classes,
         index: index,
         action: action,
-        enabled: enabled,
+        enabled: enabled && !actionsDisabled,
         item: item
       }));
     } else {
@@ -44,7 +44,7 @@ export var ExpandedItemActions = function ExpandedItemActions(_ref) {
         key: key,
         className: classes,
         action: action,
-        enabled: enabled,
+        enabled: enabled && !actionsDisabled,
         item: item
       }));
     }

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

@@ -117,7 +117,8 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       });
     },
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
-    ref: actionsButtonRef
+    ref: actionsButtonRef,
+    "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
   }, cellContent, ___EmotionJSX(EuiPopover, _extends({
     display: "block",
     panelPaddingSize: "none",
@@ -139,8 +140,7 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     }, ___EmotionJSX(EuiIcon, {
       type: "boxesVertical",
       size: "s",
-      color: "text",
-      "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
+      color: "text"
     })),
     isOpen: isPopoverOpen,
     closePopover: function closePopover() {

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

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

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

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
@@ -59,6 +59,10 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
     'euiFilterButton-hasNotification': numFiltersDefined
   }, className);
+
+  /**
+   * Badge
+   */
   var showBadge = numFiltersDefined || numActiveFiltersDefined;
   var badgeCount = numActiveFilters || numFilters;
   var activeBadgeLabel = useEuiI18n('euiFilterButton.filterBadgeActiveAriaLabel', '{count} active filters', {
@@ -67,9 +71,6 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = useEuiI18n('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
-  var buttonTextClassNames = classNames('euiFilterButton__text', {
-    'euiFilterButton__text-hasNotification': showBadge
-  }, textProps && textProps.className);
   var badgeContent = showBadge && ___EmotionJSX(EuiNotificationBadge, {
     className: "euiFilterButton__notification",
     css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
@@ -77,18 +78,27 @@ export 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 = classNames('euiFilterButton__text', {
+    'euiFilterButton__text-hasNotification': showBadge
+  }, textProps && textProps.className);
+  var textCssStyles = [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps && textProps.css];
   var _useInnerText = useInnerText(),
     _useInnerText2 = _slicedToArray(_useInnerText, 2),
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  var buttonContents = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
+  var textContent = ___EmotionJSX("span", _extends({
     ref: ref,
-    className: "euiFilterButton__textShift",
-    css: textStyles.euiFilterButton__textShift,
     "data-text": dataText,
     title: dataText
-  }, children), badgeContent);
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
     css: cssStyles,
@@ -97,12 +107,9 @@ export 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);
 };

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

@@ -10,8 +10,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate } from '../../global_styling';
 import { euiFormVariables } from '../form/form.styles';
-export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return {
     flex: '1 1 auto',
     minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
@@ -19,7 +19,7 @@ export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
     })
   };
 };
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "jkp921-noGrow",
   styles: "flex-grow:0;label:noGrow;"
 } : {
@@ -38,9 +38,9 @@ export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContex
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
   return {
-    euiFilterButton: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " ", 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__*/css(euiFilterButtonDisplay(euiThemeContext), " ", 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__*/css("&+.euiFilterButton{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
-    noGrow: _ref4,
+    noGrow: _ref3,
     hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
@@ -63,27 +63,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__
-};
-export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     content: {
       euiFilterButton__content: /*#__PURE__*/css(";label:euiFilterButton__content;"),
-      hasIcon: _ref3
+      hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
-      euiFilterButton__text: /*#__PURE__*/css(";label:euiFilterButton__text;"),
-      hasNotification: /*#__PURE__*/css("display:flex;align-items:center;gap:", euiTheme.size.s, ";;label:hasNotification;"),
-      euiFilterButton__textShift: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), " ", logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
+      euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
+      hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
         return x * 3;
-      })), ";;label:euiFilterButton__textShift;")
+      })), ";;label:hasNotification;")
     },
     notification: {
       euiFilterButton__notification: _ref2,

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

@@ -98,18 +98,18 @@ export var EuiFlyout = /*#__PURE__*/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/es/components/flyout/flyout_resizable.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { keys, useCombinedRefs, useEuiTheme } from '../../services';
+import { EuiResizableButton } from '../resizable_container';
+import { EuiFlyout } from './flyout';
+import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFlyoutResizable = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutResizableButtonStyles(euiTheme);
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+  var getFlyoutMinMaxWidth = useCallback(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_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 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flyoutRef = _useState4[0],
+    setFlyoutRef = _useState4[1];
+  var setRefs = useCombinedRefs([setFlyoutRef, ref]);
+  useEffect(function () {
+    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
+  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = useRef(0);
+  var initialMouseX = useRef(0);
+
+  // Account for flyout side and logical property direction
+  var direction = 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 = useCallback(function (e) {
+    var mouseOffset = getMouseOrTouchX(e) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction]);
+  var onMouseUp = useCallback(function () {
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove]);
+  var onMouseDown = 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 = useCallback(function (e) {
+    var KEYBOARD_OFFSET = 10;
+    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);
+        });
+        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);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction]);
+  return ___EmotionJSX(EuiFlyout, _extends({}, rest, {
+    size: flyoutWidth || size,
+    maxWidth: maxWidth,
+    side: side,
+    ref: setRefs
+  }), ___EmotionJSX(EuiResizableButton, {
+    isHorizontal: true,
+    css: cssStyles,
+    onMouseDown: onMouseDown,
+    onTouchStart: onMouseDown,
+    onKeyDown: onKeyDown
+  }), children);
+});
+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/es/components/flyout/flyout_resizable.styles.js

@@ -0,0 +1,27 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+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__
+};
+export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiFlyoutResizableButton: _ref,
+    left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+  };
+};