@elastic/eui 89.0.0 → 90.0.0

package/optimize/es/components/list_group/list_group_item.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -37,6 +37,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     rel = _ref.rel,
     className = _ref.className,
     customCss = _ref.css,
+    style = _ref.style,
     iconType = _ref.iconType,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
@@ -162,7 +163,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     });
     itemContent = ___EmotionJSX("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, ___EmotionJSX(EuiToolTip, _extends({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
@@ -174,7 +176,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
   } else {
     itemContent = ___EmotionJSX("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, itemContent, extraActionNode);
   }
   return ___EmotionJSX(Fragment, null, itemContent);

package/optimize/es/components/list_group/list_group_item_extra_action.styles.js

@@ -28,7 +28,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 export var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/css("flex-shrink:0;opacity:0;", logicalCSS('margin-right', euiTheme.size.s), ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/css("flex-shrink:0;opacity:0;", logicalCSS('margin-right', euiTheme.size.s), ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };

package/optimize/es/components/page/index.js

@@ -8,9 +8,6 @@
 
 export { EuiPage } from './page';
 export { EuiPageBody } from './page_body';
-export { EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated } from './page_content';
 export { EuiPageHeader, EuiPageHeaderContent, EuiPageHeaderSection } from './page_header';
 export { EuiPageSection } from './page_section';
-export { EuiPageSideBar_Deprecated } from './page_side_bar';
-export { EuiPageSidebar } from './page_sidebar';
-export { EuiPageTemplate_Deprecated } from './page_template';
+export { EuiPageSidebar } from './page_sidebar';

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -31,8 +31,20 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$anchorPosition = _ref.anchorPosition,
+    anchorPosition = _ref$anchorPosition === void 0 ? 'downLeft' : _ref$anchorPosition,
+    _ref$attachToAnchor = _ref.attachToAnchor,
+    attachToAnchor = _ref$attachToAnchor === void 0 ? true : _ref$attachToAnchor,
+    _ref$repositionToCros = _ref.repositionToCrossAxis,
+    repositionToCrossAxis = _ref$repositionToCros === void 0 ? false : _ref$repositionToCros,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$panelPaddingSize = _ref.panelPaddingSize,
+    panelPaddingSize = _ref$panelPaddingSize === void 0 ? 's' : _ref$panelPaddingSize,
     _ref$closeOnScroll = _ref.closeOnScroll,
     closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? false : _ref$ownFocus,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -75,6 +87,11 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   var panelWidth = useMemo(function () {
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
+
+  // Resize callback
+  useEffect(function () {
+    onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(panelWidth);
+  }, [panelWidth, onPanelResize]);
   useEffect(function () {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
@@ -148,15 +165,19 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return ___EmotionJSX(EuiPopover, _extends({
+    className: classes,
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
-    repositionToCrossAxis: false,
-    ownFocus: false,
+    display: display,
     button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes,
     ref: popoverClassRef,
-    closePopover: closePopover
+    closePopover: closePopover,
+    anchorPosition: anchorPosition,
+    attachToAnchor: attachToAnchor,
+    repositionToCrossAxis: repositionToCrossAxis,
+    panelPaddingSize: panelPaddingSize,
+    ownFocus: ownFocus
   }, props, {
     panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
       onKeyDown: onKeyDown
@@ -167,10 +188,4 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   }, focusTrapProps), ___EmotionJSX(EuiInputPopoverWidthContext.Provider, {
     value: panelWidth
   }, children)));
-};
-EuiInputPopover.defaultProps = {
-  anchorPosition: 'downLeft',
-  attachToAnchor: true,
-  display: 'block',
-  panelPaddingSize: 's'
 };

package/optimize/es/components/provider/provider.js

@@ -7,11 +7,11 @@
  */
 
 import React from 'react';
-import { cache as fallbackCache } from '@emotion/css';
-import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
-import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeProvider, CurrentEuiBreakpointProvider } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
+import { cache as fallbackCache } from '../../services/emotion/css';
+import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
+import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';

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/token/token_map.js

@@ -49,10 +49,6 @@ export var TOKEN_MAP = {
     shape: 'square',
     color: 'euiColorVis6'
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3'
@@ -224,5 +220,17 @@ export var TOKEN_MAP = {
   tokenVariable: {
     shape: 'circle',
     color: 'euiColorVis7'
+  },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1'
   }
 };

package/optimize/es/services/emotion/css.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import createEmotion from '@emotion/css/create-instance';
+import { euiStylisPrefixer } from './prefixer';
+
+/**
+ * This custom instance is needed for internal EUI components to call
+ * `@emotion/css` with EUI's custom prefixer plugin
+ * @see https://emotion.sh/docs/@emotion/css#custom-instances
+ *
+ * NOTE: Usage is currently being beta tested internally,
+ * and is not yet intended to be a public export
+ */
+var _createEmotion = createEmotion({
+    key: 'css',
+    stylisPlugins: [euiStylisPrefixer],
+    speedy: false
+  }),
+  css = _createEmotion.css,
+  cx = _createEmotion.cx,
+  cache = _createEmotion.cache;
+export { css, cx, cache };

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

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export * from './clone_element';
+export * from './clone_element';
+export * from './prefixer';

package/optimize/es/services/emotion/prefixer.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { charat, DECLARATION, hash, indexof, MOZ, replace, strlen, WEBKIT } from 'stylis';
+
+// This is a heavily modified version of Emotion's default `prefixer` plugin
+// (mostly removing unnecessary prefixes), which is in turn a modified version
+// of stylis's default prefixer.
+// @see https://github.com/emotion-js/emotion/blob/main/packages/cache/src/prefixer.js
+/* eslint-disable prefer-template */
+
+/**
+ * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
+ *
+ * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
+ * @see https://www.elastic.co/support/matrix#matrix_browsers
+ */
+export var euiStylisPrefixer = function euiStylisPrefixer(element) {
+  if (element.length > -1) if (!element.return) switch (element.type) {
+    case DECLARATION:
+      element.return = prefix(element.value, element.length);
+      break;
+  }
+};
+var prefix = function prefix(value, length) {
+  switch (hash(value, length)) {
+    /**
+     * `-webkit` prefixes
+     */
+    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
+    case 4246:
+    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+    case 5572:
+    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+    case 2756:
+    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+    case 2282:
+      return WEBKIT + value + value;
+
+    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    case 4215:
+      if (~indexof(value, 'text')) {
+        return WEBKIT + value + value;
+      }
+
+    /**
+     * Intrinsic/extrinsic sizing value prefixes
+     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     */
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (f)ill-available
+        case 102:
+          if (~indexof(value, 'fill-available')) {
+            return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) === 108 ? '$3' : '$2-$3'));
+          }
+        // (s)tretch
+        case 115:
+          if (~indexof(value, 'stretch')) {
+            return prefix(replace(value, 'stretch', 'fill-available'), length) + value;
+          }
+      }
+      break;
+  }
+  return value;
+};

package/optimize/es/services/theme/provider.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { css as _css } from "@emotion/react";
 var _excluded = ["cloneElement", "className"];
+var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -15,11 +17,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
-import classNames from 'classnames';
-import { css } from '@emotion/css';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
+import { css, cx } from '../emotion/css';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
@@ -104,13 +105,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       // The theme that determines the global body styles
       bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
       hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
-      colorClassName: /*#__PURE__*/css("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;"),
+      colorClassName: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        label: euiColorMode-", ";\n        color: ", ";\n      "])), _colorMode || colorMode, theme.colors.text),
       setGlobalCSSVariables: isGlobalTheme ? setThemeCSSVariables : setGlobalCSSVariables,
       globalCSSVariables: isGlobalTheme ? themeCSSVariables : globalCSSVariables,
       setNearestThemeCSSVariables: setThemeCSSVariables,
       themeCSSVariables: themeCSSVariables
     };
-  }, [theme, isGlobalTheme, bodyColor, _colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
+  }, [theme, isGlobalTheme, bodyColor, _colorMode, colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
   var renderedChildren = useMemo(function () {
     if (isGlobalTheme) {
       return children; // No wrapper
@@ -121,7 +122,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       className = _ref2.className,
       rest = _objectWithoutProperties(_ref2, _excluded);
     var props = _objectSpread(_objectSpread({}, rest), {}, {
-      className: classNames(className, nestedThemeContext.colorClassName)
+      className: cx(className, nestedThemeContext.colorClassName)
     });
     // Condition avoids rendering an empty Emotion selector if no
     // theme-specific CSS variables have been set by child components
@@ -132,11 +133,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }
     if (cloneElement) {
       return cloneElementWithCss(children, _objectSpread(_objectSpread({}, props), {}, {
-        className: classNames(children.props.className, props.className)
+        className: cx(children.props.className, props.className)
       }));
     } else {
       return ___EmotionJSX("span", _extends({}, props, {
-        className: classNames('euiThemeProvider', props.className)
+        className: cx('euiThemeProvider', props.className)
       }), children);
     }
   }, [isGlobalTheme, themeCSSVariables, nestedThemeContext, wrapperProps, children]);

package/optimize/es/services/theme/utils.js

@@ -35,7 +35,7 @@ export var isInverseColorMode = function isInverseColorMode(colorMode) {
 /**
  * Returns the color mode configured in the current EuiThemeProvider.
  * Returns the parent color mode if none is explicity set.
- * @param {string} coloMode - `light`, `dark`, or `inverse`
+ * @param {string} colorMode - `light`, `dark`, or `inverse`
  * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
  */
 export var getColorMode = function getColorMode(colorMode, parentColorMode) {

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

@@ -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;
   }
@@ -131,7 +155,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         paddingSize: paddingSize,
         isLoading: isLoading,
         isLoadingMessage: isLoadingMessage,
-        isOpen: this.isOpen
+        isOpen: this.isOpen,
+        accordionChildrenRef: this.accordionChildrenRef
       }, children));
     }
   }]);

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 = ["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
@@ -28,6 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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,
+    accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
     isLoadingMessage = _ref.isLoadingMessage,
@@ -48,7 +49,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,20 +67,11 @@ 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,
+    ref: accordionChildrenRef,
     role: "region",
     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
         };