@elastic/eui 89.1.0 → 90.0.0

package/optimize/es/components/form/range/range_track.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
+var _excluded = ["children", "trackWidth", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,7 +9,7 @@ var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tic
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import range from 'lodash/range';
 import { useEuiTheme, isEvenlyDivisibleBy } from '../../../services';
@@ -20,6 +19,7 @@ import { euiRangeTrackStyles } from './range_track.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   var children = _ref.children,
+    trackWidth = _ref.trackWidth,
     disabled = _ref.disabled,
     max = _ref.max,
     min = _ref.min,
@@ -41,10 +41,6 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var tickSequence = useMemo(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -91,12 +87,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles
-  }, rest, {
-    ref: function ref(node) {
-      var _node$clientWidth;
-      setTrackWidth((_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0);
-    }
-  }), levels && !!levels.length && ___EmotionJSX(EuiRangeLevels, {
+  }, rest), levels && !!levels.length && ___EmotionJSX(EuiRangeLevels, {
     levels: levels,
     max: max,
     min: min,
@@ -114,7 +105,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
     min: min,
     max: max,
     trackWidth: trackWidth
-  }), typeof children === 'function' ? children(trackWidth) : children);
+  }), children);
 };
 var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {
   var min = _ref2.min,

package/optimize/es/components/form/range/utils.js

@@ -7,14 +7,13 @@
  */
 
 export var EUI_THUMB_SIZE = 16;
-export var calculateThumbPosition = function calculateThumbPosition(value, min, max, width) {
+export var calculateThumbPosition = function calculateThumbPosition(value, min, max, trackWidth) {
   var thumbSize = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : EUI_THUMB_SIZE;
   // Calculate the left position based on value
   var decimal = (value - min) / (max - min);
   // Must be between 0-100%
   var valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
-  var trackWidth = width !== null && width !== void 0 ? width : 0;
   var thumbToTrackRatio = thumbSize / trackWidth;
   var trackPositionScale = (1 - thumbToTrackRatio) * 100;
   return valuePosition * trackPositionScale;

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/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/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
         };

package/optimize/lib/components/button/button.js

@@ -7,14 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.SIZES = exports.EuiButton = exports.COLORS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("./button_display/_button_display");
-var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "buttonRef", "color", "fill"];
+var _excluded = ["className", "buttonRef", "size", "color", "fill"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,7 +20,7 @@ var _excluded = ["className", "buttonRef", "color", "fill"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var COLORS = [].concat((0, _toConsumableArray2.default)(_button.BUTTON_COLORS), ['ghost']);
+var COLORS = _button.BUTTON_COLORS;
 exports.COLORS = COLORS;
 var SIZES = ['s', 'm'];
 exports.SIZES = SIZES;
@@ -30,47 +28,31 @@ exports.SIZES = SIZES;
  * EuiButton is largely responsible for providing relevant props
  * and the logic for element-specific attributes
  */
-var EuiButton = function EuiButton(props) {
-  var className = props.className,
-    buttonRef = props.buttonRef,
-    _props$color = props.color,
-    _color = _props$color === void 0 ? 'primary' : _props$color,
-    fill = props.fill,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var buttonIsDisabled = (0, _button_display.isButtonDisabled)({
+var EuiButton = function EuiButton(_ref) {
+  var className = _ref.className,
+    buttonRef = _ref.buttonRef,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    fill = _ref.fill,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var isDisabled = (0, _button_display.isButtonDisabled)({
     href: rest.href,
     isDisabled: rest.isDisabled || rest.disabled,
     isLoading: rest.isLoading
   });
-  var color = buttonIsDisabled ? 'disabled' : _color;
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: fill ? 'fill' : 'base'
-  })[color === 'ghost' ? 'text' : color];
+  })[isDisabled ? 'disabled' : color];
   var buttonFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var classes = (0, _classnames.default)('euiButton', className);
   var cssStyles = [buttonColorStyles, buttonFocusStyle];
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (0, _react2.jsx)(_services.EuiThemeProvider, {
-      colorMode: "dark",
-      wrapperProps: {
-        cloneElement: true
-      }
-    }, (0, _react2.jsx)(EuiButton, (0, _extends2.default)({}, props, {
-      color: "text"
-    })));
-  }
   return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
-    ref: buttonRef
+    ref: buttonRef,
+    size: size
   }, rest));
 };
-exports.EuiButton = EuiButton;
-EuiButton.displayName = 'EuiButton';
-
-// Use defaultProps for simple pass-through props
-EuiButton.defaultProps = {
-  size: 'm',
-  color: 'primary'
-};
+exports.EuiButton = EuiButton;

package/optimize/lib/components/button/button_empty/button_empty.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIZES = exports.FLUSH_TYPES = exports.EuiButtonEmpty = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -35,55 +35,43 @@ var FLUSH_TYPES = ['left', 'right', 'both'];
  * `iconType`, `iconSide`, and `textProps`
  */
 exports.FLUSH_TYPES = FLUSH_TYPES;
-var EuiButtonEmpty = function EuiButtonEmpty(props) {
-  var children = props.children,
-    className = props.className,
-    iconType = props.iconType,
-    _props$iconSide = props.iconSide,
-    iconSide = _props$iconSide === void 0 ? 'left' : _props$iconSide,
-    _props$iconSize = props.iconSize,
-    iconSize = _props$iconSize === void 0 ? 'm' : _props$iconSize,
-    _props$color = props.color,
-    _color = _props$color === void 0 ? 'primary' : _props$color,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'm' : _props$size,
-    flush = props.flush,
-    _isDisabled = props.isDisabled,
-    disabled = props.disabled,
-    isLoading = props.isLoading,
-    href = props.href,
-    target = props.target,
-    rel = props.rel,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'button' : _props$type,
-    buttonRef = props.buttonRef,
-    contentProps = props.contentProps,
-    textProps = props.textProps,
-    isSelected = props.isSelected,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    iconType = _ref.iconType,
+    _ref$iconSide = _ref.iconSide,
+    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
+    _ref$iconSize = _ref.iconSize,
+    iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    flush = _ref.flush,
+    _isDisabled = _ref.isDisabled,
+    disabled = _ref.disabled,
+    isLoading = _ref.isLoading,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    buttonRef = _ref.buttonRef,
+    contentProps = _ref.contentProps,
+    textProps = _ref.textProps,
+    isSelected = _ref.isSelected,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isDisabled = (0, _button_display.isButtonDisabled)({
     isDisabled: _isDisabled || disabled,
     href: href,
     isLoading: isLoading
   });
-  var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: 'empty'
   });
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _button_empty.euiButtonEmptyStyles)(euiTheme);
-  var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
-  if (_color === 'ghost') {
-    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
-    return (0, _react2.jsx)(_services.EuiThemeProvider, {
-      colorMode: "dark",
-      wrapperProps: {
-        cloneElement: true
-      }
-    }, (0, _react2.jsx)(EuiButtonEmpty, (0, _extends2.default)({}, props, {
-      color: "text"
-    })));
-  }
+  var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonEmpty', className);
   var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);
   var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps === null || textProps === void 0 ? void 0 : textProps.className);