@elastic/eui 89.1.0 → 91.0.0

package/optimize/es/components/popover/popover.js

@@ -1,4 +1,3 @@
-import { css as _css } from "@emotion/react";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -28,6 +27,7 @@ import classNames from 'classnames';
 import { focusable } from 'tabbable';
 import { EuiFocusTrap } from '../focus_trap';
 import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
+import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../observer/mutation_observer';
@@ -257,9 +257,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         window.addEventListener('resize', _this.positionPopoverFluid);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "buttonRef", function (node) {
+    _defineProperty(_assertThisInitialized(_this), "popoverRef", function (node) {
       _this.button = node;
-      _this.props.buttonRef && _this.props.buttonRef(node);
+      setMultipleRefs([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -378,12 +378,12 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var tabIndexProp = (_panelProps$tabIndex = panelProps === null || panelProps === void 0 ? void 0 : panelProps.tabIndex) !== null && _panelProps$tabIndex !== void 0 ? _panelProps$tabIndex : _tabIndexProp;
       var styles = euiPopoverStyles();
       var popoverStyles = [styles.euiPopover, {
-        display: display
+        display: display,
+        label: display
       }];
       var classes = classNames('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className);
-      var anchorClasses = classNames('euiPopover__anchor', anchorClassName);
+      }, className, anchorClassName);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -473,29 +473,17 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_css({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel);
+          ref: this.popoverRef
+        }, rest), button instanceof HTMLElement ? null : button, panel);
       } else {
         return ___EmotionJSX(EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
         }, ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef,
+          ref: this.popoverRef,
           onKeyDown: this.onKeyDown
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_css({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel));
+        }, rest), button instanceof HTMLElement ? null : button, panel));
       }
     }
   }], [{

package/optimize/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -7,13 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBackgroundColor, logicals, logicalSizeCSS } from '../../../global_styling';
+import { logicals, logicalSizeCSS } from '../../../global_styling';
 export var popoverArrowSize = 'm';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-
-  // Match the background color of panels
-  var borderColor = euiBackgroundColor(euiThemeContext, 'plain');
+  var borderColor = 'var(--euiPopoverBackgroundColor)';
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base

package/optimize/es/components/popover/popover_panel/_popover_panel.js

@@ -35,7 +35,8 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
   var euiThemeContext = useEuiTheme();
   var cssStyles = useMemo(function () {
     var styles = euiPopoverPanelStyles(euiThemeContext);
-    var sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    var colorMode = euiThemeContext.colorMode.toLowerCase();
+    var sharedStyles = [styles.euiPopover__panel, styles[colorMode], isOpen && styles.isOpen];
     if (hasDragDrop) {
       return [].concat(sharedStyles, [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
     }

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
+import { tint } from '../../../services';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
 
@@ -17,6 +18,7 @@ export var openAnimationTiming = 'slow';
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
+ * 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
  */
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "j5y6yx-isOpen",
@@ -37,8 +39,11 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
+    /* 4 */
+    light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/css("--euiPopoverBackgroundColor:", tint(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
 import { EuiSelectable } from '../selectable';
@@ -67,9 +67,11 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     setPopoverIsOpen(false);
     _closePopover && _closePopover();
   };
-  var togglePopover = function togglePopover() {
-    setPopoverIsOpen(!popoverIsOpen);
-  };
+  var togglePopover = useCallback(function () {
+    setPopoverIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
 
   // Width applied to the internal div
   var popoverWidth = width || 600;
@@ -144,16 +146,16 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     if (!currentBreakpoint) return false;
     return popoverButtonBreakpoints.includes(currentBreakpoint);
   }, [currentBreakpoint, popoverButtonBreakpoints]);
-  var popoverTrigger;
-  if (popoverButton && canShowPopoverButton) {
-    popoverTrigger = /*#__PURE__*/React.cloneElement(popoverButton, _objectSpread(_objectSpread({}, popoverButton.props), {}, {
+  var popoverTrigger = useMemo(function () {
+    if (!popoverButton || !canShowPopoverButton) return;
+    return ___EmotionJSX("span", {
+      className: "euiSelectableTemplateSitewide__popoverTrigger",
       onClick: togglePopover,
       onKeyDown: function onKeyDown(e) {
-        // Selectable preventsDefault on Enter which kills browser controls for pressing the button
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }));
-  }
+    }, popoverButton);
+  }, [popoverButton, canShowPopoverButton, togglePopover]);
   return ___EmotionJSX(EuiSelectable, _extends({
     isLoading: isLoading,
     options: formattedOptions,

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

@@ -78,7 +78,7 @@ export var EuiTab = function EuiTab(_ref) {
     css: cssTabStyles,
     disabled: disabled
   }, rest), prependNode, ___EmotionJSX("span", {
-    className: "euiTab__content",
+    className: "euiTab__content eui-textTruncate",
     css: cssTabContentStyles
   }, children), appendNode);
 };

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

@@ -263,7 +263,7 @@ export var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = classNames('euiGlobalToastList', className);
   return ___EmotionJSX("div", _extends({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes

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

@@ -7,6 +7,7 @@
  */
 
 import { useEuiTheme } from '../../services';
+import { mathWithUnits } from '../functions';
 /**
  * It is best practice to utilize the browser's default `outline` property for handling focus rings.
  * However, some components need to be forced to have the same behavior, or adjust the display.
@@ -29,7 +30,9 @@ export var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = mathWithUnits(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components

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

@@ -148,12 +148,6 @@ export 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
- */
-export var euiPaletteComplimentary = euiPaletteComplementary;
 export var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

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

@@ -17,7 +17,7 @@ export { rgbToHsv } from './rgb_to_hsv';
 export { calculateContrast, calculateLuminance } from './luminance_and_contrast';
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
 export { colorPalette } from './color_palette';
-export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
+export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';
 export * from './contrast';

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

@@ -7,7 +7,6 @@
  */
 
 import { useCallback } from 'react';
-
 /*
  * For use when a component needs to set `ref` objects from multiple sources.
  * For instance, if a component accepts a `ref` prop but also needs its own
@@ -17,13 +16,21 @@ import { useCallback } from 'react';
  */
 export var useCombinedRefs = function useCombinedRefs(refs) {
   return 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]);
+};
+
+/**
+ * Non-hook util for setting multiple refs/ref types.
+ * Useful for non-functional components
+ */
+export var setMultipleRefs = function setMultipleRefs(refs, node) {
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
+      ref.current = node;
+    }
+  });
 };

package/optimize/es/services/index.js

@@ -12,7 +12,7 @@ export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
 export { CanvasTextUtils } from './canvas';
-export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
@@ -23,7 +23,6 @@ export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
 export { calculatePopoverPosition, findPopoverPosition } from './popover';
-export { Random } from './random';
 export { getSecureRelForTarget } from './security';
 export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType } from './sort';
 export { slugify, toInitials, toSentenceCase } from './string';

package/optimize/es/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/es/test/rtl/component_helpers.js

@@ -114,8 +114,9 @@ export var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
+
 export var showEuiComboBoxOptions = /*#__PURE__*/function () {
   var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
@@ -138,4 +139,42 @@ export var showEuiComboBoxOptions = /*#__PURE__*/function () {
   return function showEuiComboBoxOptions() {
     return _ref5.apply(this, arguments);
   };
+}();
+
+/**
+ * EuiContextMenu
+ */
+
+export var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var getPanels;
+    return _regeneratorRuntime.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 waitFor(function () {
+            expect(getPanels().length).toEqual(2);
+          });
+        case 3:
+          // Outgoing panel will be removed on animation end
+          fireEvent.animationEnd(getPanels()[0]);
+          if (getPanels().length > 1) {
+            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);
+  };
 }();

package/optimize/lib/components/accordion/accordion.js

@@ -23,7 +23,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); }; }
@@ -53,7 +53,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 {
@@ -62,9 +74,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;
   }
@@ -81,6 +105,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,
@@ -126,12 +151,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));
     }
   }]);
@@ -147,7 +174,8 @@ exports.EuiAccordionClass = EuiAccordionClass;
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 var EuiAccordion = (0, _services.withEuiTheme)(EuiAccordionClass);
 exports.EuiAccordion = EuiAccordion;

package/optimize/lib/components/accordion/accordion_children/accordion_children.js

@@ -16,7 +16,7 @@ var _resize_observer = require("../../observer/resize_observer");
 var _accordion_children_loading = require("./accordion_children_loading");
 var _accordion_children = require("./accordion_children.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,7 +27,9 @@ var _excluded = ["children", "paddingSize", "isLoading", "isLoadingMessage", "is
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
-  var children = _ref.children,
+  var role = _ref.role,
+    children = _ref.children,
+    accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
     isLoadingMessage = _ref.isLoadingMessage,
@@ -48,7 +50,6 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
    */
   var wrapperStyles = (0, _accordion_children.euiAccordionChildWrapperStyles)(euiTheme);
   var wrapperCssStyles = [wrapperStyles.euiAccordion__childWrapper, isOpen ? wrapperStyles.isOpen : wrapperStyles.isClosed];
-  var wrapperRef = (0, _react.useRef)(null);
 
   /**
    * Update the accordion wrapper height whenever the accordion opens, and also
@@ -67,21 +68,12 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
       blockSize: isOpen ? contentHeight : 0
     };
   }, [isOpen, contentHeight]);
-
-  /**
-   * Focus the children wrapper when the accordion is opened,
-   * but not if the accordion is initially open on mount
-   */
-  (0, _services.useUpdateEffect)(function () {
-    var _wrapperRef$current;
-    if (isOpen) (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.focus();
-  }, [isOpen]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
     className: "euiAccordion__childWrapper",
     css: wrapperCssStyles,
     style: heightInlineStyle,
-    ref: wrapperRef,
-    role: "region",
+    ref: accordionChildrenRef,
+    role: role,
     tabIndex: -1
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,

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

@@ -227,18 +227,27 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       var _ref5, _this$props$paginatio, _this$props$paginatio2, _this$context$EuiTabl;
       return (_ref5 = (_this$props$paginatio = (_this$props$paginatio2 = this.props.pagination) === null || _this$props$paginatio2 === void 0 ? void 0 : _this$props$paginatio2.pageSize) !== null && _this$props$paginatio !== void 0 ? _this$props$paginatio : (_this$context$EuiTabl = this.context.EuiTablePagination) === null || _this$context$EuiTabl === void 0 ? void 0 : _this$context$EuiTabl.itemsPerPage) !== null && _ref5 !== void 0 ? _ref5 : _table_pagination.euiTablePaginationDefaults.itemsPerPage;
     }
+  }, {
+    key: "isSelectionControlled",
+    get: function get() {
+      var _this$props$selection;
+      return !!((_this$props$selection = this.props.selection) !== null && _this$props$selection !== void 0 && _this$props$selection.selected);
+    }
   }, {
     key: "getInitialSelection",
     value: function getInitialSelection() {
+      if (this.isSelectionControlled) return;
       if (this.props.selection && this.props.selection.initialSelected && !this.state.initialSelectionRendered && this.props.items.length > 0) {
         this.setState({
-          selection: this.props.selection.initialSelected
-        });
-        this.setState({
+          selection: this.props.selection.initialSelected,
           initialSelectionRendered: true
         });
       }
     }
+
+    /**
+     * @deprecated Use `selection.selected` instead to declaratively control table selection
+     */
   }, {
     key: "setSelection",
     value: function setSelection(newSelection) {
@@ -261,15 +270,15 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "changeSelection",
-    value: function changeSelection(selection) {
-      if (!this.props.selection) {
-        return;
-      }
-      this.setState({
-        selection: selection
-      });
-      if (this.props.selection.onSelectionChange) {
-        this.props.selection.onSelectionChange(selection);
+    value: function changeSelection(changedSelection) {
+      var _selection$onSelectio;
+      var selection = this.props.selection;
+      if (!selection) return;
+      (_selection$onSelectio = selection.onSelectionChange) === null || _selection$onSelectio === void 0 ? void 0 : _selection$onSelectio.call(selection, changedSelection);
+      if (!this.isSelectionControlled) {
+        this.setState({
+          selection: changedSelection
+        });
       }
     }
   }, {
@@ -957,16 +966,30 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
           selection: []
         };
       }
-      var itemId = nextProps.itemId;
-      var selection = prevState.selection.filter(function (selectedItem) {
-        return nextProps.items.findIndex(function (item) {
+      var controlledSelection = nextProps.selection.selected;
+      var unfilteredSelection = controlledSelection !== null && controlledSelection !== void 0 ? controlledSelection : prevState.selection;
+
+      // Ensure we're not including selections that aren't in the
+      // current `items` array (affected by pagination)
+      var itemId = nextProps.itemId,
+        items = nextProps.items;
+      var selection = unfilteredSelection.filter(function (selectedItem) {
+        return items.findIndex(function (item) {
           return getItemId(item, itemId) === getItemId(selectedItem, itemId);
         }) !== -1;
       });
-      if (selection.length !== prevState.selection.length) {
-        if (nextProps.selection.onSelectionChange) {
-          nextProps.selection.onSelectionChange(selection);
-        }
+
+      // If some selected items were filtered out, update state and callback
+      if (selection.length !== unfilteredSelection.length) {
+        var _nextProps$selection$, _nextProps$selection;
+        (_nextProps$selection$ = (_nextProps$selection = nextProps.selection).onSelectionChange) === null || _nextProps$selection$ === void 0 ? void 0 : _nextProps$selection$.call(_nextProps$selection, selection);
+        return {
+          selection: selection
+        };
+      }
+
+      // Always update selection state from props if controlled
+      if (controlledSelection) {
         return {
           selection: selection
         };