@elastic/eui 89.1.0 → 91.0.0

package/optimize/lib/components/tabs/tab.js

@@ -87,7 +87,7 @@ var EuiTab = function EuiTab(_ref) {
     css: cssTabStyles,
     disabled: disabled
   }, rest), prependNode, (0, _react2.jsx)("span", {
-    className: "euiTab__content",
+    className: "euiTab__content eui-textTruncate",
     css: cssTabContentStyles
   }, children), appendNode);
 };

package/optimize/lib/components/toast/global_toast_list.js

@@ -275,7 +275,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = (0, _classnames.default)('euiGlobalToastList', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes

package/optimize/lib/global_styling/mixins/_states.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiFocusRing = exports.euiOutline = exports.euiFocusRing = void 0;
 var _services = require("../../services");
+var _functions = require("../functions");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,7 +36,9 @@ var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = (0, _functions.mathWithUnits)(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components

package/optimize/lib/services/color/eui_palettes.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplimentary = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
+exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
@@ -161,14 +161,7 @@ var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   }
   return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
-
-/**
- * The old typo'd name for this palette remains exported until the end of its deprecation period
- * @deprecated Use euiPaletteComplementary instead
- */
 exports.euiPaletteComplementary = euiPaletteComplementary;
-var euiPaletteComplimentary = euiPaletteComplementary;
-exports.euiPaletteComplimentary = euiPaletteComplimentary;
 var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

package/optimize/lib/services/color/index.js

@@ -23,7 +23,6 @@ var _exportNames = {
   euiPaletteColorBlindBehindText: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
@@ -80,12 +79,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _eui_palettes.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _eui_palettes.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {

package/optimize/lib/services/hooks/useCombinedRefs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCombinedRefs = void 0;
+exports.useCombinedRefs = exports.setMultipleRefs = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -22,14 +22,23 @@ var _react = require("react");
  */
 var useCombinedRefs = function useCombinedRefs(refs) {
   return (0, _react.useCallback)(function (node) {
-    return refs.forEach(function (ref) {
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    });
+    return setMultipleRefs(refs, node);
   }, [refs]);
 };
-exports.useCombinedRefs = useCombinedRefs;
+
+/**
+ * Non-hook util for setting multiple refs/ref types.
+ * Useful for non-functional components
+ */
+exports.useCombinedRefs = useCombinedRefs;
+var setMultipleRefs = function setMultipleRefs(refs, node) {
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
+      ref.current = node;
+    }
+  });
+};
+exports.setMultipleRefs = setMultipleRefs;

package/optimize/lib/services/index.js

@@ -27,7 +27,6 @@ var _exportNames = {
   desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteCool: true,
   euiPaletteForDarkBackground: true,
@@ -72,7 +71,6 @@ var _exportNames = {
   Pager: true,
   calculatePopoverPosition: true,
   findPopoverPosition: true,
-  Random: true,
   getSecureRelForTarget: true,
   Comparators: true,
   PropertySortType: true,
@@ -155,12 +153,6 @@ Object.defineProperty(exports, "RIGHT_ALIGNMENT", {
     return _alignment.RIGHT_ALIGNMENT;
   }
 });
-Object.defineProperty(exports, "Random", {
-  enumerable: true,
-  get: function get() {
-    return _random.Random;
-  }
-});
 Object.defineProperty(exports, "SortDirection", {
   enumerable: true,
   get: function get() {
@@ -257,12 +249,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _color.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _color.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {
@@ -643,7 +629,6 @@ Object.keys(_hooks).forEach(function (key) {
 var _number = require("./number");
 var _paging = require("./paging");
 var _popover = require("./popover");
-var _random = require("./random");
 var _security = require("./security");
 var _sort = require("./sort");
 var _string = require("./string");

package/optimize/lib/test/rtl/component_helpers.d.ts

@@ -10,3 +10,5 @@ export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
 
 export declare const showEuiComboBoxOptions: () => Promise<void>;
+
+export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;

package/optimize/lib/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.showEuiComboBoxOptions = void 0;
+exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.showEuiComboBoxOptions = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 require("@testing-library/jest-dom");
@@ -123,7 +123,7 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
 exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
 var showEuiComboBoxOptions = /*#__PURE__*/function () {
@@ -149,4 +149,42 @@ var showEuiComboBoxOptions = /*#__PURE__*/function () {
     return _ref5.apply(this, arguments);
   };
 }();
-exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+
+/**
+ * EuiContextMenu
+ */
+exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var getPanels;
+    return _regenerator.default.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          // Used document instead of container or screen due to context menus living in portals
+          getPanels = function getPanels() {
+            return document.querySelectorAll('.euiContextMenuPanel');
+          }; // 2 panels will appear for the transition animation
+          _context6.next = 3;
+          return (0, _react.waitFor)(function () {
+            expect(getPanels().length).toEqual(2);
+          });
+        case 3:
+          // Outgoing panel will be removed on animation end
+          _react.fireEvent.animationEnd(getPanels()[0]);
+          if (getPanels().length > 1) {
+            _react.fireEvent.animationEnd(getPanels()[1]);
+          }
+
+          // Transition/animation is done once we're back to 1 panel
+          expect(getPanels().length).toEqual(1);
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return function waitForEuiContextMenuPanelTransition() {
+    return _ref6.apply(this, arguments);
+  };
+}();
+exports.waitForEuiContextMenuPanelTransition = waitForEuiContextMenuPanelTransition;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "89.1.0",
+  "version": "91.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.18.1",
+  "docker_image": "18.18.2",
   "engines": {
     "node": "16.x || 18.x || >=20.0"
   },
@@ -79,8 +79,8 @@
     "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "refractor": "^3.5.0",
-    "rehype-raw": "^5.0.0",
+    "refractor": "^3.6.0",
+    "rehype-raw": "^5.1.0",
     "rehype-react": "^6.2.1",
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
@@ -93,7 +93,7 @@
     "unist-util-visit": "^2.0.3",
     "url-parse": "^1.5.10",
     "uuid": "^8.3.0",
-    "vfile": "^4.2.0"
+    "vfile": "^4.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.5",
@@ -121,13 +121,13 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/blocks": "^7.3.1",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-webpack5": "^7.3.1",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -192,7 +192,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -238,7 +238,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.3.1",
+    "storybook": "^7.5.2",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/components/combo_box/_combo_box.scss

@@ -45,9 +45,32 @@
       height: auto;  /* 3 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;
+      cursor: text;
+    }
+
+    &.euiComboBox__inputWrap--noWrap {
+      align-items: center;
+    }
+
+    // Match placeholder and plain text position to EuiFieldText
+    &.euiComboBox__inputWrap--plainText {
+      padding-inline-start: $euiSizeS;
+    }
+
+    .euiComboBoxPlainTextSelection {
+      &__prepend,
+      &__append {
+        flex-shrink: 0;
+        margin-inline: $euiSizeXS / 2;
+        display: flex; /* Vertically centers any icons */
+      }
+
+      &__prepend {
+        margin-inline-start: $euiSizeXS;
+      }
 
-      &:hover {
-        cursor: text;
+      &__append {
+        margin-inline-end: $euiSizeXS;
       }
     }
   }
@@ -56,6 +79,7 @@
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
   .euiComboBox__input {
     block-size: $euiSizeL; /* 2 */
@@ -64,11 +88,20 @@
     margin: $euiSizeXS;
 
     /* 3 */
-    appearance: none;
-    outline: none;
-    border: none;
     background: transparent;
-    color: $euiTextColor;
+    @include euiFormControlText;
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    /* 4 */
+    // stylelint-disable declaration-no-important
+    appearance: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    // stylelint-enable declaration-no-important
   }
 
   &.euiComboBox-isOpen {
@@ -94,13 +127,9 @@
       -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
-    .euiComboBoxPlaceholder,
-    .euiComboBoxPill--plainText {
-      @include euiFormControlDisabledTextStyle;
-    }
-
     // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
-    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+    .euiComboBox__inputWrap,
+    .euiComboBoxPill {
       cursor: not-allowed;
     }
   }
@@ -108,8 +137,11 @@
   &.euiComboBox--compressed {
     .euiComboBox__inputWrap {
       line-height: $euiFormControlCompressedHeight; /* 2 */
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-block: 0;
+
+      &--plainText {
+        padding-inline-start: $euiSizeXS;
+      }
     }
   }
 }

package/src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -18,22 +18,6 @@
     margin: ($euiSizeXS + 1px) $euiSizeXS 0 0;
   }
 
-  .euiComboBox--compressed &--plainText {
-    margin-top: $euiSizeXS;
-  }
-
-  &--plainText {
-    @include euiFont;
-
-    line-height: $euiSizeL;
-    font-size: $euiFontSizeS;
-    padding: 0;
-    color: $euiTextColor;
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-  }
-
   &__prepend {
     margin-right: $euiSizeXS;
   }
@@ -43,7 +27,6 @@
   }
 
   /* Fix append/prepend vertical alignment */
-  &--plainText,
   .euiBadge__text {
     display: flex;
     align-items: center;

package/src/components/combo_box/combo_box_input/_index.scss

@@ -1,3 +1 @@
-@import 'combo_box_input';
 @import 'combo_box_pill';
-@import 'combo_box_placeholder';

package/src/components/datagrid/_data_grid_data_row.scss

@@ -100,7 +100,6 @@
 .euiDataGridRowCell__contentWrapper {
   position: relative; // Needed for .euiDataGridRowCell__actions--overlay
   height: 100%;
-  overflow: hidden;
 }
 
 .euiDataGridRowCell__defaultHeight {
@@ -125,8 +124,7 @@
 .euiDataGridRowCell__numericalHeight {
   // Without this rule, popover anchors content that overflows off the page
   [data-euiportal],
-  .euiPopover,
-  .euiPopover__anchor {
+  .euiPopover {
     height: 100%;
   }
 }

package/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss

@@ -1,3 +1,24 @@
 .euiSuperDatePicker__absoluteDateFormRow {
   padding: 0 $euiSizeS $euiSizeS;
+
+  /* A bit of a visual trickery to make the format "hint" become an "error" text.
+     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
+     but as the help text is already read out via `aria-describedby`, and the error text
+     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
+  .euiFormRow__fieldWrapper {
+    display: flex;
+    flex-direction: column;
+  };
+
+  .euiFormControlLayout {
+    order: 0;
+  }
+
+  .euiFormHelpText {
+    order: 1;
+  }
+
+  .euiFormErrorText {
+    order: 2;
+  }
 }

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -1,4 +1,5 @@
-.euiDatePopoverContent {
+.euiDatePopoverContent,
+.euiDatePopoverContent .react-datepicker {
   width: $euiFormMaxWidth;
   max-width: 100%;
 }

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -29,10 +29,6 @@
   gap: $euiSizeXS;
 }
 
-.euiQuickSelectPopover__anchor {
-  height: 100%;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -49,7 +49,6 @@
 
   // Force the stretch of any children so they expand the full height of the control
   > *,
-  .euiPopover__anchor,
   .euiButtonEmpty,
   .euiText,
   .euiFormLabel,

package/src/components/index.scss

@@ -2,7 +2,6 @@
 
 @import 'color_picker/index';
 @import 'combo_box/index';
-@import 'context_menu/index';
 @import 'control_bar/index';
 @import 'date_picker/index';
 @import 'datagrid/index';
@@ -10,7 +9,6 @@
 @import 'form/index';
 @import 'markdown_editor/index';
 @import 'notification/index';
-@import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';
 @import 'side_nav/index';
 @import 'search_bar/index';

package/src/global_styling/variables/_typography.scss

@@ -1,6 +1,6 @@
 // Families
-$euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
+$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
+$euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -141,9 +141,8 @@ EuiSkipLink.propTypes = {
   fill: _propTypes.default.bool,
   /**
      * Any of the named color palette options.
-     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
+  color: _propTypes.default.any,
   /**
      * Use size `s` in confined spaces
      */

package/test-env/components/accordion/accordion.js

@@ -24,7 +24,7 @@ var _accordion_trigger = require("./accordion_trigger");
 var _accordion_children = require("./accordion_children");
 var _accordion = require("./accordion.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "id", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
+var _excluded = ["children", "className", "id", "role", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -54,7 +54,19 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var forceState = _this.props.forceState;
       if (forceState) {
         var _this$props$onToggle, _this$props;
-        (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, forceState === 'open' ? false : true);
+        var nextState = !_this.isOpen;
+        (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, nextState);
+
+        // If the accordion should theoretically be opened, wait a tick (allows
+        // consumer state to update) and attempt to focus the child content.
+        // NOTE: Even if the accordion does not actually open, this is fine -
+        // the `inert` property on the hidden children will prevent focus
+        if (nextState === true) {
+          requestAnimationFrame(function () {
+            var _this$accordionChildr;
+            (_this$accordionChildr = _this.accordionChildrenEl) === null || _this$accordionChildr === void 0 ? void 0 : _this$accordionChildr.focus();
+          });
+        }
       } else {
         _this.setState(function (prevState) {
           return {
@@ -63,9 +75,21 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         }, function () {
           var _this$props$onToggle2, _this$props2;
           (_this$props$onToggle2 = (_this$props2 = _this.props).onToggle) === null || _this$props$onToggle2 === void 0 ? void 0 : _this$props$onToggle2.call(_this$props2, _this.state.isOpen);
+
+          // If the accordion is open, programmatically move focus
+          // from the accordion trigger to the child content
+          if (_this.state.isOpen) {
+            var _this$accordionChildr2;
+            (_this$accordionChildr2 = _this.accordionChildrenEl) === null || _this$accordionChildr2 === void 0 ? void 0 : _this$accordionChildr2.focus();
+          }
         });
       }
     });
+    // Used to focus the accordion children on user trigger click only (vs controlled/programmatic open)
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "accordionChildrenEl", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "accordionChildrenRef", function (node) {
+      _this.accordionChildrenEl = node;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generatedId", (0, _services.htmlIdGenerator)()());
     return _this;
   }
@@ -82,6 +106,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         className = _this$props3.className,
         id = _this$props3.id,
+        role = _this$props3.role,
         _this$props3$element = _this$props3.element,
         Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
         buttonElement = _this$props3.buttonElement,
@@ -127,12 +152,14 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? (0, _react2.jsx)(_loading.EuiLoadingSpinner, null) : extraAction
       }), (0, _react2.jsx)(_accordion_children.EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
         isLoading: isLoading,
         isLoadingMessage: isLoadingMessage,
-        isOpen: this.isOpen
+        isOpen: this.isOpen,
+        accordionChildrenRef: this.accordionChildrenRef
       }, children));
     }
   }]);
@@ -148,7 +175,8 @@ exports.EuiAccordionClass = EuiAccordionClass;
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
@@ -161,6 +189,14 @@ EuiAccordionClass.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: _propTypes.default.oneOf(["div", "fieldset"]),
+  /**
+       * Defaults to the [group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role).
+       *
+       * If your accordion contains significant enough content to be a document
+       * [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role#accessibility_concerns), consider using the `region` role instead.
+       * @default group
+       */
+  role: _propTypes.default.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */