@elastic/eui 104.1.0 → 105.0.0

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

@@ -14,8 +14,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { EuiComboBox } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ComboBox = function ComboBox() {
-  var _useState = useState([{
+var ComboBox = function ComboBox(_ref) {
+  var initialOptions = _ref.initialOptions;
+  var _useState = useState(initialOptions !== null && initialOptions !== void 0 ? initialOptions : [{
       label: 'Titan',
       'data-test-subj': 'titanOption'
     }, {
@@ -98,4 +99,54 @@ describe('EuiComboBox', function () {
       cy.checkAxe();
     });
   });
+  describe('Manual Accessibility check', function () {
+    it('sets the correct aria-activedescendant id', function () {
+      cy.realPress('Tab');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
+      cy.get('button[data-test-subj="titanOption"]').should('exist');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').invoke('attr', 'aria-activedescendant').should('include', 'option-2');
+      cy.realPress('Enter');
+      cy.realPress('ArrowDown');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').invoke('attr', 'aria-activedescendant').should('include', 'option-3');
+    });
+    it('sets the correct aria-activedescendant id with custom option ids', function () {
+      cy.realMount(___EmotionJSX(ComboBox, {
+        initialOptions: [{
+          id: 'titan',
+          label: 'Titan',
+          'data-test-subj': 'titanOption'
+        }, {
+          id: 'enceladus',
+          label: 'Enceladus',
+          'data-test-subj': 'enceladusOption'
+        }, {
+          id: 'mimas',
+          label: 'Mimas',
+          'data-test-subj': 'mimasOption'
+        }, {
+          id: 'dione',
+          label: 'Dione',
+          'data-test-subj': 'dioneOption'
+        }, {
+          id: 'iapetus',
+          label: 'Iapetus',
+          'data-test-subj': 'iapetusOption'
+        }]
+      }));
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('exist');
+      cy.realPress('Tab');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
+      cy.get('button[data-test-subj="titanOption"]').should('exist');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowDown');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.attr', 'aria-activedescendant', 'mimas');
+      cy.realPress('Enter');
+      cy.realPress('ArrowDown');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.attr', 'aria-activedescendant', 'iapetus');
+    });
+  });
 });

package/optimize/es/components/combo_box/combo_box.js

@@ -68,6 +68,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         showPrevSelected: Boolean(_this.props.singleSelection),
         sortMatchesBy: _this.props.sortMatchesBy
       }),
+      listOptionRefs: [],
       searchValue: initialSearchValue
     });
     _defineProperty(_this, "rootId", htmlIdGenerator());
@@ -86,6 +87,16 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "listRefCallback", function (ref) {
       _this.listRefInstance = ref;
     });
+    _defineProperty(_this, "setListOptionRefs", function (node, index) {
+      _this.setState(function (_ref) {
+        var listOptionRefs = _ref.listOptionRefs;
+        var _listOptionRefs = listOptionRefs;
+        _listOptionRefs[index] = node;
+        return {
+          listOptionRefs: _listOptionRefs
+        };
+      });
+    });
     _defineProperty(_this, "openList", function () {
       _this.setState({
         isListOpen: true
@@ -102,9 +113,9 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       if (!_this.state.matchingOptions.length) {
         return;
       }
-      _this.setState(function (_ref) {
-        var activeOptionIndex = _ref.activeOptionIndex,
-          matchingOptions = _ref.matchingOptions;
+      _this.setState(function (_ref2) {
+        var activeOptionIndex = _ref2.activeOptionIndex,
+          matchingOptions = _ref2.matchingOptions;
         var nextActiveOptionIndex;
         if (activeOptionIndex < 0) {
           // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
@@ -220,8 +231,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
         });
       });
       var numberOfSelectedOptions = 0;
-      selectedOptions.forEach(function (_ref2) {
-        var label = _ref2.label;
+      selectedOptions.forEach(function (_ref3) {
+        var label = _ref3.label;
         var trimmedLabel = transformForCaseSensitivity(label.trim(), isCaseSensitive);
         if (flattenOptions.findIndex(function (option) {
           return option.label === trimmedLabel;
@@ -363,8 +374,13 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           return _this.closeList();
         });
       } else {
-        _this.setState({
-          activeOptionIndex: _this.state.matchingOptions.indexOf(addedOption)
+        _this.setState(function (_ref4) {
+          var listOptionRefs = _ref4.listOptionRefs,
+            matchingOptions = _ref4.matchingOptions;
+          return {
+            listOptionRefs: listOptionRefs.slice(0, matchingOptions.length - 1),
+            activeOptionIndex: matchingOptions.indexOf(addedOption)
+          };
         });
       }
     });
@@ -517,6 +533,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             isCaseSensitive: isCaseSensitive,
             isLoading: isLoading,
             listRef: _this2.listRefCallback,
+            setListOptionRefs: _this2.setListOptionRefs,
             matchingOptions: matchingOptions,
             onCloseList: _this2.closeList,
             onCreateOption: onCreateOption,
@@ -547,6 +564,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
          * https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html
          */
         ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
+          var _this2$state$listOpti, _this2$state$listOpti2;
           var cssStyles = [styles.euiComboBox, fullWidth ? styles.fullWidth : logicalStyle('max-width', euiFormMaxWidth(euiTheme))];
           return ___EmotionJSX("div", _extends({
             css: cssStyles
@@ -570,7 +588,7 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             "aria-live": "off",
             input: ___EmotionJSX(EuiComboBoxInput, {
               compressed: compressed,
-              focusedOptionId: _this2.hasActiveOption() ? _this2.rootId("_option-".concat(_this2.state.activeOptionIndex)) : undefined,
+              focusedOptionId: _this2.hasActiveOption() ? (_this2$state$listOpti = (_this2$state$listOpti2 = _this2.state.listOptionRefs[_this2.state.activeOptionIndex]) === null || _this2$state$listOpti2 === void 0 ? void 0 : _this2$state$listOpti2.id) !== null && _this2$state$listOpti !== void 0 ? _this2$state$listOpti : _this2.rootId("_option-".concat(_this2.state.activeOptionIndex)) : undefined,
               fullWidth: fullWidth,
               hasSelectedOptions: selectedOptions.length > 0,
               id: inputId,

package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -8,7 +8,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children"],
   _excluded2 = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
-  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "truncationProps", "listboxAriaLabel"];
+  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "truncationProps", "listboxAriaLabel", "setListOptionRefs"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -89,7 +89,8 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         renderOption = _this$props.renderOption,
         searchValue = _this$props.searchValue,
         rootId = _this$props.rootId,
-        matchingOptions = _this$props.matchingOptions;
+        matchingOptions = _this$props.matchingOptions,
+        setListOptionRefs = _this$props.setListOptionRefs;
       var optionIndex = matchingOptions.indexOf(option);
       var hasTruncationProps = _this.props.truncationProps || _truncationProps;
       var truncationProps = hasTruncationProps ? // Individual truncation settings should override component prop
@@ -120,7 +121,10 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         id: rootId("_option-".concat(index)),
         title: label,
         "aria-setsize": matchingOptions.length,
-        "aria-posinset": optionIndex + 1
+        "aria-posinset": optionIndex + 1,
+        forwardRef: function forwardRef(ref) {
+          return setListOptionRefs(ref, index);
+        }
       }, rest), ___EmotionJSX("span", {
         className: "euiComboBoxOption__contentWrapper"
       }, ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
@@ -212,6 +216,7 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         delimiter = _this$props2.delimiter,
         truncationProps = _this$props2.truncationProps,
         listboxAriaLabel = _this$props2.listboxAriaLabel,
+        setListOptionRefs = _this$props2.setListOptionRefs,
         rest = _objectWithoutProperties(_this$props2, _excluded3);
       var emptyStateContent;
       if (isLoading) {

package/optimize/es/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -11,8 +11,9 @@ import { css } from '@emotion/react';
 import { logicalCSS, logicalTextAlignCSS, mathWithUnits } from '../../../../global_styling';
 export var euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
-  var focusColor = euiTheme.colors.borderStrongPrimary;
-  var hoverColor = euiTheme.colors.borderStrongText;
+  var focusColor = euiTheme.components.dataGridRowBorderActive;
+  var hoverColor = euiTheme.components.dataGridRowBorderHover;
+  var markedColor = euiTheme.components.dataGridRowBorderMarked;
   var outlineWidth = euiTheme.border.width.thick;
   var borderRadius = mathWithUnits(euiTheme.border.radius.medium, function (x) {
     return x / 2;
@@ -26,7 +27,10 @@ export var euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(
     focusColor: focusColor,
     focusStyles: "\n      /* Remove outline as we're handling it manually. Needed to override global styles */\n      &:focus-visible {\n        outline: none;\n      }\n\n      &::after {\n        content: '';\n        /* We want this to be visually on top of cell content but not interactive */\n        z-index: 2;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        border: ".concat(outlineWidth, " solid ").concat(focusColor, ";\n        border-radius: ").concat(borderRadius, ";\n      }\n    "),
     hoverColor: hoverColor,
-    hoverStyles: "\n      &::after {\n        border-color: ".concat(hoverColor, ";\n      }\n    ")
+    hoverStyles: "\n      &::after {\n        border-color: ".concat(hoverColor, ";\n      }\n    "),
+    markedColor: markedColor,
+    // marked styles are used in `data_grid.styles.ts`
+    markedStyles: "\n      &::after {\n        border-color: ".concat(markedColor, ";\n      }\n\n      .euiDataGridRowCell__actions {\n        background-color: ").concat(markedColor, ";\n        border-color: ").concat(markedColor, ";\n      }\n    ")
   };
 };
 export var euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSelectors() {
@@ -68,7 +72,8 @@ export var euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSele
     outline: {
       show: is(selectors(hover, focus, isOpen, isEntered)),
       hover: hoverNot(selectors(focus, focusWithin, isOpen)),
-      focusTrapped: _(isEntered)
+      focusTrapped: _(isEntered),
+      marked: is(selectors(focus, isOpen))
     },
     actions: {
       hoverZone: hoverNot(selectors(focus, isOpen)),

package/optimize/es/components/datagrid/data_grid.styles.js

@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
+import { euiDataGridCellOutlineSelectors, euiDataGridCellOutlineStyles } from './body/cell/data_grid_cell.styles';
 export var euiDataGridVariables = function euiDataGridVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -43,13 +44,15 @@ export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
     _cellPadding = _euiDataGridVariables.cellPadding,
     lineHeight = _euiDataGridVariables.lineHeight,
     _fontSize = _euiDataGridVariables.fontSize;
+  var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
+    outlineSelectors = _euiDataGridCellOutli.outline;
   var borderColors = {
     default: highContrastMode ? euiTheme.border.color : euiTheme.components.dataGridBorderColor,
     vertical: highContrastMode ? euiTheme.border.color : euiTheme.components.dataGridVerticalLineBorderColor
   };
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColors.default);
   return {
-    euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", logicalCSS('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.components.dataGridRowBackground, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";}*:where(& .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowBackgroundSelect, ";}*:where(\n          &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowBackgroundSelectHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow){background-color:", euiTheme.components.dataGridRowStripesBackground, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowStripesBackgroundStriped, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundHover, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--striped:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundStripedHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelect, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelectHover, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background-color:", euiTheme.components.dataGridRowBackground, ";};label:euiDataGrid;"),
+    euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", logicalCSS('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.components.dataGridRowBackground, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";}*:where(& .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowBackgroundSelect, ";}*:where(& .euiDataGridRow--marked){background-color:", euiTheme.components.dataGridRowBackgroundMarked, ";&:hover{background-color:", euiTheme.components.dataGridRowBackgroundMarkedHover, ";}.euiDataGridRowCell.euiDataGridRowCell{", outlineSelectors.marked, "{", euiDataGridCellOutlineStyles(euiThemeContext).markedStyles, ";}}}*:where(\n          &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowBackgroundSelectHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow){background-color:", euiTheme.components.dataGridRowStripesBackground, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowStripesBackgroundStriped, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundHover, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--striped:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundStripedHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelect, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelectHover, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background-color:", euiTheme.components.dataGridRowBackground, ";};label:euiDataGrid;"),
     cellPadding: {
       cellPadding: function cellPadding(size) {
         return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", highContrastModeStyles(euiThemeContext, {

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

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons", "toolTipContent", "toolTipProps", "style"];
+var _excluded = ["theme", "children", "className", "disabled", "checked", "isFocused", "showIcons", "toolTipContent", "toolTipProps", "style", "forwardRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -61,6 +61,11 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "state", {
       hasFocus: false
     });
+    _defineProperty(_this, "setButtonRef", function (node) {
+      var _this$props$forwardRe, _this$props;
+      _this.buttonRef = node;
+      (_this$props$forwardRe = (_this$props = _this.props).forwardRef) === null || _this$props$forwardRe === void 0 || _this$props$forwardRe.call(_this$props, node);
+    });
     _defineProperty(_this, "focus", function () {
       if (_this.buttonRef) {
         _this.buttonRef.focus();
@@ -84,19 +89,19 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
   return _createClass(EuiFilterSelectItemClass, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        theme = _this$props.theme,
-        children = _this$props.children,
-        className = _this$props.className,
-        disabled = _this$props.disabled,
-        checked = _this$props.checked,
-        isFocused = _this$props.isFocused,
-        showIcons = _this$props.showIcons,
-        toolTipContent = _this$props.toolTipContent,
-        toolTipProps = _this$props.toolTipProps,
-        style = _this$props.style,
-        rest = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props2 = this.props,
+        theme = _this$props2.theme,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        disabled = _this$props2.disabled,
+        checked = _this$props2.checked,
+        isFocused = _this$props2.isFocused,
+        showIcons = _this$props2.showIcons,
+        toolTipContent = _this$props2.toolTipContent,
+        toolTipProps = _this$props2.toolTipProps,
+        style = _this$props2.style,
+        forwardRef = _this$props2.forwardRef,
+        rest = _objectWithoutProperties(_this$props2, _excluded);
       var styles = euiFilterSelectItemStyles(theme);
       var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
       var classes = classNames('euiFilterSelectItem', className);
@@ -128,9 +133,7 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
         }));
       }
       var optionItem = ___EmotionJSX("button", _extends({
-        ref: function ref(_ref) {
-          return _this2.buttonRef = _ref;
-        },
+        ref: this.setButtonRef,
         role: "option",
         type: "button",
         "aria-selected": checked === 'on',

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

@@ -26,6 +26,8 @@ import { EuiPortal } from '../portal';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutStyles } from './flyout.styles';
+import { EuiFlyoutChild } from './flyout_child';
+import { EuiFlyoutChildProvider } from './flyout_child_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TYPES = ['push', 'overlay'];
 export var SIDES = ['left', 'right'];
@@ -47,7 +49,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
     closeButtonProps = _ref.closeButtonProps,
     _ref$closeButtonPosit = _ref.closeButtonPosition,
-    closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
+    _closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'inside' : _ref$closeButtonPosit,
     onClose = _ref.onClose,
     _ref$ownFocus = _ref.ownFocus,
     ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
@@ -75,6 +77,42 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = useRef(null);
+
+  // Ref for the main flyout element to pass to context
+  var internalParentFlyoutRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isChildFlyoutOpen = _useState2[0],
+    setIsChildFlyoutOpen = _useState2[1];
+  var _useState3 = useState('side-by-side'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    childLayoutMode = _useState4[0],
+    setChildLayoutMode = _useState4[1];
+
+  // Check for child flyout
+  var childFlyoutElement = React.Children.toArray(children).find(function (child) {
+    return /*#__PURE__*/React.isValidElement(child) && (child.type === EuiFlyoutChild || child.type.displayName === 'EuiFlyoutChild');
+  });
+  var hasChildFlyout = !!childFlyoutElement;
+
+  // Validate props, determine close button position and set child flyout classes
+  var closeButtonPosition;
+  var childFlyoutClasses = [];
+  if (hasChildFlyout) {
+    if (side !== 'right') {
+      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `side` prop of EuiFlyout must be "right".');
+    }
+    if (!isEuiFlyoutSizeNamed(size) || !['s', 'm'].includes(size)) {
+      throw new Error("EuiFlyout: When an EuiFlyoutChild is present, the `size` prop of EuiFlyout must be \"s\" or \"m\". Received \"".concat(size, "\"."));
+    }
+    if (_closeButtonPosition !== 'inside') {
+      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `closeButtonPosition` prop of EuiFlyout must be "inside".');
+    }
+    closeButtonPosition = 'inside';
+    childFlyoutClasses = ['euiFlyout--hasChild', "euiFlyout--hasChild--".concat(childLayoutMode), "euiFlyout--hasChild--".concat(childFlyoutElement.props.size || 's')];
+  } else {
+    closeButtonPosition = _closeButtonPosition;
+  }
   var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
   var isPushed = type === 'push' && windowIsLargeEnoughToPush;
 
@@ -82,11 +120,11 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * Setting up the refs on the actual flyout element in order to
    * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
    */
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    resizeRef = _useState2[0],
-    setResizeRef = _useState2[1];
-  var setRef = useCombinedRefs([setResizeRef, ref]);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    resizeRef = _useState6[0],
+    setResizeRef = _useState6[1];
+  var setRef = useCombinedRefs([setResizeRef, ref, internalParentFlyoutRef]);
   var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
     width = _useResizeObserver.width;
   useEffect(function () {
@@ -133,17 +171,25 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [style, maxWidth, size]);
   var styles = useEuiMemoizedStyles(euiFlyoutStyles);
   var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
-  var classes = classnames('euiFlyout', className);
+  var classes = classnames.apply(void 0, ['euiFlyout'].concat(_toConsumableArray(childFlyoutClasses), [className]));
 
   /*
-   * If not disabled, automatically add fixed EuiHeaders as shards
-   * to EuiFlyout focus traps, to prevent focus fighting
+   * Trap focus even when `ownFocus={false}`, otherwise closing
+   * the flyout won't return focus to the originating button.
+   *
+   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
+   * to allow non-keyboard users the ability to interact with
+   * elements outside the flyout.
+   *
+   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
+   * or if `outsideClickCloses={true}` to close on clicks that target
+   * (both mousedown and mouseup) the overlay mask.
    */
   var flyoutToggle = useRef(document.activeElement);
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    fixedHeaders = _useState4[0],
-    setFixedHeaders = _useState4[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fixedHeaders = _useState8[0],
+    setFixedHeaders = _useState8[1];
   useEffect(function () {
     if (includeFixedHeadersInFocusTrap) {
       var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
@@ -167,7 +213,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
       shards: [].concat(_toConsumableArray(fixedHeaders), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
     });
-  }, [fixedHeaders, _focusTrapProps]);
+  }, [_focusTrapProps, fixedHeaders]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -215,6 +261,24 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
   }, [onClose, hasOverlayMask, outsideClickCloses]);
+  var closeButton = !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
+    onClose: onClose,
+    closeButtonPosition: closeButtonPosition,
+    side: side
+  }));
+
+  // render content within EuiFlyoutChildProvider if childFlyoutElement is present
+  var contentToRender = children;
+  if (hasChildFlyout && childFlyoutElement) {
+    contentToRender = ___EmotionJSX(EuiFlyoutChildProvider, {
+      parentSize: size,
+      parentFlyoutRef: internalParentFlyoutRef,
+      childElement: childFlyoutElement,
+      childrenToRender: children,
+      reportIsChildOpen: setIsChildFlyoutOpen,
+      reportChildLayoutMode: setChildLayoutMode
+    });
+  }
   return ___EmotionJSX(EuiFlyoutWrapper, {
     hasOverlayMask: hasOverlayMask,
     maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
@@ -225,10 +289,17 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     event: "keydown",
     handler: onKeyDown
   }), ___EmotionJSX(EuiFocusTrap, _extends({
-    disabled: isPushed,
+    disabled: isPushed || ownFocus && isChildFlyoutOpen,
     scrollLock: hasOverlayMask,
     clickOutsideDisables: !ownFocus,
-    onClickOutside: onClickOutside
+    onClickOutside: onClickOutside,
+    returnFocus: function returnFocus() {
+      if (!isChildFlyoutOpen && flyoutToggle.current) {
+        flyoutToggle.current.focus();
+        return false; // We've handled focus
+      }
+      return true;
+    }
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
     className: classes,
     css: cssStyles,
@@ -240,11 +311,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tabIndex: !isPushed ? 0 : rest.tabIndex,
     "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
     "data-autofocus": !isPushed || undefined
-  }), !isPushed && screenReaderDescription, !hideCloseButton && onClose && ___EmotionJSX(EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
-    onClose: onClose,
-    closeButtonPosition: closeButtonPosition,
-    side: side
-  })), children)));
+  }), !isPushed && screenReaderDescription, closeButton, contentToRender)));
 }
 // React.forwardRef interferes with the inferred element type
 // Casting to ensure correct element prop type checking for `as`

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

@@ -28,14 +28,15 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   return {
-    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", logicalCSS('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", logicalCSS('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
     // Flyout sizes
-    s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
-    m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
+    // When a child flyout is stacked on top of the parent, the parent flyout size will match the child flyout size
+    s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", composeFlyoutSizing(euiThemeContext, 'm'), ";};label:s;"),
+    m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", composeFlyoutSizing(euiThemeContext, 's'), ";};label:m;"),
     l: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
     noMaxWidth: /*#__PURE__*/css(logicalCSS('max-width', 'none'), ";;label:noMaxWidth;"),
     // Side
-    right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
+    right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
     // Left-side flyouts should only be used for navigation
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
@@ -61,7 +62,10 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     }
   };
 };
-var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
+export var maxedFlyoutWidth = function maxedFlyoutWidth(euiThemeContext) {
+  return "\n  ".concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat(logicalCSS('max-width', '90vw !important'), "\n  }\n");
+};
+export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
   var euiTheme = euiThemeContext.euiTheme;
   var formMaxWidth = euiFormMaxWidth(euiThemeContext);