@elastic/eui 104.1.0 → 105.0.0

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

@@ -20,8 +20,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /// <reference types="cypress-real-events" />
 /// <reference types="../../../cypress/support" />
 
-var ComboBox = function ComboBox() {
-  var _useState = (0, _react.useState)([{
+var ComboBox = function ComboBox(_ref) {
+  var initialOptions = _ref.initialOptions;
+  var _useState = (0, _react.useState)(initialOptions !== null && initialOptions !== void 0 ? initialOptions : [{
       label: 'Titan',
       'data-test-subj': 'titanOption'
     }, {
@@ -104,4 +105,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((0, _react2.jsx)(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/lib/components/combo_box/combo_box.js

@@ -73,6 +73,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         showPrevSelected: Boolean(_this.props.singleSelection),
         sortMatchesBy: _this.props.sortMatchesBy
       }),
+      listOptionRefs: [],
       searchValue: initialSearchValue
     });
     (0, _defineProperty2.default)(_this, "rootId", (0, _services.htmlIdGenerator)());
@@ -91,6 +92,16 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "listRefCallback", function (ref) {
       _this.listRefInstance = ref;
     });
+    (0, _defineProperty2.default)(_this, "setListOptionRefs", function (node, index) {
+      _this.setState(function (_ref) {
+        var listOptionRefs = _ref.listOptionRefs;
+        var _listOptionRefs = listOptionRefs;
+        _listOptionRefs[index] = node;
+        return {
+          listOptionRefs: _listOptionRefs
+        };
+      });
+    });
     (0, _defineProperty2.default)(_this, "openList", function () {
       _this.setState({
         isListOpen: true
@@ -107,9 +118,9 @@ var EuiComboBox = exports.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
@@ -225,8 +236,8 @@ var EuiComboBox = exports.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 = (0, _matching_options.transformForCaseSensitivity)(label.trim(), isCaseSensitive);
         if (flattenOptions.findIndex(function (option) {
           return option.label === trimmedLabel;
@@ -368,8 +379,13 @@ var EuiComboBox = exports.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)
+          };
         });
       }
     });
@@ -522,6 +538,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
             isCaseSensitive: isCaseSensitive,
             isLoading: isLoading,
             listRef: _this2.listRefCallback,
+            setListOptionRefs: _this2.setListOptionRefs,
             matchingOptions: matchingOptions,
             onCloseList: _this2.closeList,
             onCreateOption: onCreateOption,
@@ -552,6 +569,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
          * https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html
          */
         (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiTheme) {
+          var _this2$state$listOpti, _this2$state$listOpti2;
           var cssStyles = [_combo_box.euiComboBoxStyles.euiComboBox, fullWidth ? _combo_box.euiComboBoxStyles.fullWidth : (0, _global_styling.logicalStyle)('max-width', (0, _form.euiFormMaxWidth)(euiTheme))];
           return (0, _react2.jsx)("div", (0, _extends2.default)({
             css: cssStyles
@@ -575,7 +593,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
             "aria-live": "off",
             input: (0, _react2.jsx)(_combo_box_input.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/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -34,7 +34,7 @@ var _combo_box_options_list = require("./combo_box_options_list.styles");
 var _react2 = require("@emotion/react");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -97,7 +97,8 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         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
@@ -128,7 +129,10 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         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), (0, _react2.jsx)("span", {
         className: "euiComboBoxOption__contentWrapper"
       }, (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
@@ -220,6 +224,7 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         delimiter = _this$props2.delimiter,
         truncationProps = _this$props2.truncationProps,
         listboxAriaLabel = _this$props2.listboxAriaLabel,
+        setListOptionRefs = _this$props2.setListOptionRefs,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
       var emptyStateContent;
       if (isLoading) {

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

@@ -15,8 +15,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var euiDataGridCellOutlineStyles = exports.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 = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
     return x / 2;
@@ -30,7 +31,10 @@ var euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineStyles = functi
     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    ")
   };
 };
 var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSelectors() {
@@ -72,7 +76,8 @@ var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors =
     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/lib/components/datagrid/data_grid.styles.js

@@ -7,6 +7,7 @@ exports.euiDataGridVariables = exports.euiDataGridStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
+var _data_grid_cell = require("./body/cell/data_grid_cell.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -49,13 +50,15 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
     _cellPadding = _euiDataGridVariables.cellPadding,
     lineHeight = _euiDataGridVariables.lineHeight,
     _fontSize = _euiDataGridVariables.fontSize;
+  var _euiDataGridCellOutli = (0, _data_grid_cell.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__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.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__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.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, "{", (0, _data_grid_cell.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__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {

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

@@ -22,7 +22,7 @@ var _tool_tip = require("../tool_tip");
 var _icon = require("../icon");
 var _filter_select_item = require("./filter_select_item.styles");
 var _react2 = require("@emotion/react");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -69,6 +69,11 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
     (0, _defineProperty2.default)(_this, "state", {
       hasFocus: false
     });
+    (0, _defineProperty2.default)(_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);
+    });
     (0, _defineProperty2.default)(_this, "focus", function () {
       if (_this.buttonRef) {
         _this.buttonRef.focus();
@@ -92,19 +97,19 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
   return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var styles = (0, _filter_select_item.euiFilterSelectItemStyles)(theme);
       var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
       var classes = (0, _classnames.default)('euiFilterSelectItem', className);
@@ -136,9 +141,7 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
         }));
       }
       var optionItem = (0, _react2.jsx)("button", (0, _extends2.default)({
-        ref: function ref(_ref) {
-          return _this2.buttonRef = _ref;
-        },
+        ref: this.setButtonRef,
         role: "option",
         type: "button",
         "aria-selected": checked === 'on',

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

@@ -23,6 +23,8 @@ var _portal = require("../portal");
 var _accessibility = require("../accessibility");
 var _flyout_close_button = require("./_flyout_close_button");
 var _flyout = require("./flyout.styles");
+var _flyout_child = require("./flyout_child");
+var _flyout_child_manager = require("./flyout_child_manager");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "aria-describedby"];
 /*
@@ -56,7 +58,7 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     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,
@@ -84,6 +86,42 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
+
+  // Ref for the main flyout element to pass to context
+  var internalParentFlyoutRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isChildFlyoutOpen = _useState2[0],
+    setIsChildFlyoutOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)('side-by-side'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    childLayoutMode = _useState4[0],
+    setChildLayoutMode = _useState4[1];
+
+  // Check for child flyout
+  var childFlyoutElement = _react.default.Children.toArray(children).find(function (child) {
+    return /*#__PURE__*/_react.default.isValidElement(child) && (child.type === _flyout_child.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 = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
   var isPushed = type === 'push' && windowIsLargeEnoughToPush;
 
@@ -91,11 +129,11 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
    * 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 = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    resizeRef = _useState2[0],
-    setResizeRef = _useState2[1];
-  var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref]);
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    resizeRef = _useState6[0],
+    setResizeRef = _useState6[1];
+  var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref, internalParentFlyoutRef]);
   var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
     width = _useResizeObserver.width;
   (0, _react.useEffect)(function () {
@@ -142,17 +180,25 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
   }, [style, maxWidth, size]);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout.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 = (0, _classnames.default)('euiFlyout', className);
+  var classes = _classnames.default.apply(void 0, ['euiFlyout'].concat((0, _toConsumableArray2.default)(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 = (0, _react.useRef)(document.activeElement);
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    fixedHeaders = _useState4[0],
-    setFixedHeaders = _useState4[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    fixedHeaders = _useState8[0],
+    setFixedHeaders = _useState8[1];
   (0, _react.useEffect)(function () {
     if (includeFixedHeadersInFocusTrap) {
       var fixedHeaderEls = document.querySelectorAll('.euiHeader[data-fixed-header]');
@@ -176,7 +222,7 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
       shards: [].concat((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
     });
-  }, [fixedHeaders, _focusTrapProps]);
+  }, [_focusTrapProps, fixedHeaders]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -224,6 +270,24 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
   }, [onClose, hasOverlayMask, outsideClickCloses]);
+  var closeButton = !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, (0, _extends2.default)({}, closeButtonProps, {
+    onClose: onClose,
+    closeButtonPosition: closeButtonPosition,
+    side: side
+  }));
+
+  // render content within EuiFlyoutChildProvider if childFlyoutElement is present
+  var contentToRender = children;
+  if (hasChildFlyout && childFlyoutElement) {
+    contentToRender = (0, _react2.jsx)(_flyout_child_manager.EuiFlyoutChildProvider, {
+      parentSize: size,
+      parentFlyoutRef: internalParentFlyoutRef,
+      childElement: childFlyoutElement,
+      childrenToRender: children,
+      reportIsChildOpen: setIsChildFlyoutOpen,
+      reportChildLayoutMode: setChildLayoutMode
+    });
+  }
   return (0, _react2.jsx)(EuiFlyoutWrapper, {
     hasOverlayMask: hasOverlayMask,
     maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
@@ -234,10 +298,17 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     event: "keydown",
     handler: onKeyDown
   }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
-    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), (0, _react2.jsx)(Element, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
@@ -249,11 +320,7 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
     tabIndex: !isPushed ? 0 : rest.tabIndex,
     "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
     "data-autofocus": !isPushed || undefined
-  }), !isPushed && screenReaderDescription, !hideCloseButton && onClose && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, (0, _extends2.default)({}, 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/lib/components/flyout/flyout.styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFlyoutStyles = exports.euiFlyoutSlideInRight = exports.euiFlyoutSlideInLeft = exports.FLYOUT_BREAKPOINT = void 0;
+exports.maxedFlyoutWidth = exports.euiFlyoutStyles = exports.euiFlyoutSlideInRight = exports.euiFlyoutSlideInLeft = exports.composeFlyoutSizing = exports.FLYOUT_BREAKPOINT = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
@@ -33,14 +33,15 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   return {
-    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.logicalCSS)('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), "{", (0, _global_styling.logicalCSS)('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.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__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.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__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", composeFlyoutSizing(euiThemeContext, 'm'), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'm'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", composeFlyoutSizing(euiThemeContext, 's'), ";};label:m;"),
     l: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
     noMaxWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', 'none'), ";;label:noMaxWidth;"),
     // Side
-    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
+    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
@@ -66,7 +67,10 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
     }
   };
 };
-var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
+var maxedFlyoutWidth = exports.maxedFlyoutWidth = function maxedFlyoutWidth(euiThemeContext) {
+  return "\n  ".concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat((0, _global_styling.logicalCSS)('max-width', '90vw !important'), "\n  }\n");
+};
+var composeFlyoutSizing = exports.composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
   var euiTheme = euiThemeContext.euiTheme;
   var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);