@elastic/eui 89.1.0 → 90.0.0

package/i18ntokens.json

@@ -41,14 +41,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 640,
+        "line": 660,
         "column": 10,
-        "index": 16330
+        "index": 16982
       },
       "end": {
-        "line": 644,
+        "line": 664,
         "column": 12,
-        "index": 16533
+        "index": 17185
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -59,14 +59,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 653,
+        "line": 673,
         "column": 12,
-        "index": 16730
+        "index": 17382
       },
       "end": {
-        "line": 657,
+        "line": 677,
         "column": 14,
-        "index": 17009
+        "index": 17661
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -77,14 +77,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 661,
+        "line": 681,
         "column": 12,
-        "index": 17081
+        "index": 17733
       },
       "end": {
-        "line": 665,
+        "line": 685,
         "column": 14,
-        "index": 17321
+        "index": 17973
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -95,14 +95,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 670,
+        "line": 690,
         "column": 10,
-        "index": 17397
+        "index": 18049
       },
       "end": {
-        "line": 674,
+        "line": 694,
         "column": 12,
-        "index": 17581
+        "index": 18233
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -113,14 +113,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 716,
+        "line": 736,
         "column": 6,
-        "index": 18579
+        "index": 19231
       },
       "end": {
-        "line": 716,
+        "line": 736,
         "column": 77,
-        "index": 18650
+        "index": 19302
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -131,14 +131,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1112,
+        "line": 1132,
         "column": 8,
-        "index": 30437
+        "index": 31089
       },
       "end": {
-        "line": 1112,
+        "line": 1132,
         "column": 79,
-        "index": 30508
+        "index": 31160
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1333,
+        "line": 1353,
         "column": 8,
-        "index": 36936
+        "index": 37588
       },
       "end": {
-        "line": 1337,
+        "line": 1357,
         "column": 9,
-        "index": 37095
+        "index": 37747
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -455,50 +455,86 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 165,
+        "line": 163,
         "column": 27,
-        "index": 5469
+        "index": 5426
       },
       "end": {
-        "line": 168,
+        "line": 166,
         "column": 3,
-        "index": 5539
+        "index": 5496
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"
   },
+  {
+    "token": "euiCollapsibleNavButton.ariaLabelExpand",
+    "defString": "Expand navigation",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 38,
+        "column": 28,
+        "index": 1478
+      },
+      "end": {
+        "line": 41,
+        "column": 3,
+        "index": 1564
+      }
+    },
+    "filepath": "src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx"
+  },
+  {
+    "token": "euiCollapsibleNavButton.ariaLabelCollapse",
+    "defString": "Collapse navigation",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 42,
+        "column": 30,
+        "index": 1596
+      },
+      "end": {
+        "line": 45,
+        "column": 3,
+        "index": 1686
+      }
+    },
+    "filepath": "src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx"
+  },
   {
     "token": "euiCollapsibleNavButton.ariaLabelOpen",
-    "defString": "Toggle navigation open",
+    "defString": "Open navigation",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 47,
+        "line": 46,
         "column": 26,
-        "index": 1716
+        "index": 1714
       },
       "end": {
-        "line": 50,
+        "line": 49,
         "column": 3,
-        "index": 1805
+        "index": 1796
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx"
   },
   {
     "token": "euiCollapsibleNavButton.ariaLabelClose",
-    "defString": "Toggle navigation closed",
+    "defString": "Close navigation",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 51,
-        "column": 28,
-        "index": 1835
+        "line": 50,
+        "column": 27,
+        "index": 1825
       },
       "end": {
-        "line": 54,
+        "line": 53,
         "column": 3,
-        "index": 1927
+        "index": 1909
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx"
@@ -869,14 +905,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 430,
+        "line": 425,
         "column": 6,
-        "index": 10795
+        "index": 10754
       },
       "end": {
-        "line": 433,
+        "line": 428,
         "column": 7,
-        "index": 10899
+        "index": 10858
       }
     },
     "filepath": "src/components/control_bar/control_bar.tsx"
@@ -887,14 +923,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 468,
+        "line": 473,
         "column": 14,
-        "index": 12132
+        "index": 12376
       },
       "end": {
-        "line": 472,
+        "line": 477,
         "column": 16,
-        "index": 12406
+        "index": 12650
       }
     },
     "filepath": "src/components/control_bar/control_bar.tsx"
@@ -905,14 +941,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 474,
+        "line": 479,
         "column": 14,
-        "index": 12439
+        "index": 12683
       },
       "end": {
-        "line": 477,
+        "line": 482,
         "column": 16,
-        "index": 12637
+        "index": 12881
       }
     },
     "filepath": "src/components/control_bar/control_bar.tsx"
@@ -4651,12 +4687,12 @@
       "start": {
         "line": 101,
         "column": 49,
-        "index": 2904
+        "index": 2920
       },
       "end": {
         "line": 107,
         "column": 3,
-        "index": 3125
+        "index": 3141
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
@@ -4669,12 +4705,12 @@
       "start": {
         "line": 101,
         "column": 49,
-        "index": 2904
+        "index": 2920
       },
       "end": {
         "line": 107,
         "column": 3,
-        "index": 3125
+        "index": 3141
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
@@ -4811,14 +4847,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 616,
+        "line": 638,
         "column": 6,
-        "index": 18346
+        "index": 18888
       },
       "end": {
-        "line": 619,
+        "line": 641,
         "column": 8,
-        "index": 18581
+        "index": 19123
       }
     },
     "filepath": "src/components/form/range/dual_range.tsx"
@@ -4829,14 +4865,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 183,
+        "line": 188,
         "column": 6,
-        "index": 4858
+        "index": 4996
       },
       "end": {
-        "line": 186,
+        "line": 191,
         "column": 8,
-        "index": 5035
+        "index": 5173
       }
     },
     "filepath": "src/components/form/range/range.tsx"

package/lib/components/accessibility/skip_link/skip_link.js

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

package/lib/components/accordion/accordion.js

@@ -59,7 +59,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 {
@@ -68,9 +80,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)
+    _defineProperty(_assertThisInitialized(_this), "accordionChildrenEl", null);
+    _defineProperty(_assertThisInitialized(_this), "accordionChildrenRef", function (node) {
+      _this.accordionChildrenEl = node;
+    });
     _defineProperty(_assertThisInitialized(_this), "generatedId", (0, _services.htmlIdGenerator)()());
     return _this;
   }
@@ -137,7 +161,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         paddingSize: paddingSize,
         isLoading: isLoading,
         isLoadingMessage: isLoadingMessage,
-        isOpen: this.isOpen
+        isOpen: this.isOpen,
+        accordionChildrenRef: this.accordionChildrenRef
       }, children));
     }
   }]);

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

@@ -13,7 +13,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
@@ -35,6 +35,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
   var children = _ref.children,
+    accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
     isLoadingMessage = _ref.isLoadingMessage,
@@ -55,7 +56,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
@@ -74,20 +74,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", _extends({}, 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
@@ -107,5 +98,6 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
 };
 exports.EuiAccordionChildren = EuiAccordionChildren;
 EuiAccordionChildren.propTypes = {
-  isOpen: _propTypes.default.bool.isRequired
+  isOpen: _propTypes.default.bool.isRequired,
+  accordionChildrenRef: _propTypes.default.any.isRequired
 };

package/lib/components/basic_table/basic_table.js

@@ -238,18 +238,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) {
@@ -272,15 +281,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
+        });
       }
     }
   }, {
@@ -968,16 +977,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
         };
@@ -1149,7 +1172,7 @@ EuiBasicTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
+      color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.func.isRequired]),
       /**
          * The display name of the action (will be the button caption)
          */
@@ -1318,7 +1341,9 @@ EuiBasicTable.propTypes = {
      */
   selection: _propTypes.default.shape({
     /**
-       * A callback that will be called whenever the item selection changes
+       * A callback that will be called whenever the item selection changes.
+       *
+       * Required if `selected` is passed.
        */
     onSelectionChange: _propTypes.default.func,
     /**
@@ -1326,10 +1351,22 @@ EuiBasicTable.propTypes = {
        */
     selectable: _propTypes.default.func,
     /**
-       * A callback that is called per item to retrieve a message for its selectable state.We display these messages as a tooltip on an unselectable checkbox
+       * A callback that is called per item to retrieve a message for its selectable state.
+       * We display these messages as a tooltip on an unselectable checkbox
        */
     selectableMessage: _propTypes.default.func,
-    initialSelected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired)
+    /**
+       * Sets initially selected items. Use for uncontrolled selection behavior (checkbox
+       * will only change from user input, and not from developer control).
+       *
+       * This prop will be ignored if `selected` is passed.
+       */
+    initialSelected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
+    /**
+       * Used for controlled selection behavior, e.g. when you want to programmatically
+       * control which selection checkboxes are checked, and which are not.
+       */
+    selected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired)
   }),
   /**
      * Configures #EuiTableSortingType

package/lib/components/basic_table/collapsed_item_actions.js

@@ -208,7 +208,7 @@ CollapsedItemActions.propTypes = {
     /**
        * Defines the color of the button
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.func.isRequired]),
     /**
        * The display name of the action (will be the button caption)
        */

package/lib/components/basic_table/in_memory_table.js

@@ -690,7 +690,7 @@ EuiInMemoryTable.propTypes = {
       /**
          * Defines the color of the button
          */
-      color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]).isRequired, _propTypes.default.func.isRequired]),
+      color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.func.isRequired]),
       /**
          * The display name of the action (will be the button caption)
          */
@@ -815,7 +815,9 @@ EuiInMemoryTable.propTypes = {
      */
   selection: _propTypes.default.shape({
     /**
-       * A callback that will be called whenever the item selection changes
+       * A callback that will be called whenever the item selection changes.
+       *
+       * Required if `selected` is passed.
        */
     onSelectionChange: _propTypes.default.func,
     /**
@@ -823,10 +825,22 @@ EuiInMemoryTable.propTypes = {
        */
     selectable: _propTypes.default.func,
     /**
-       * A callback that is called per item to retrieve a message for its selectable state.We display these messages as a tooltip on an unselectable checkbox
+       * A callback that is called per item to retrieve a message for its selectable state.
+       * We display these messages as a tooltip on an unselectable checkbox
        */
     selectableMessage: _propTypes.default.func,
-    initialSelected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired)
+    /**
+       * Sets initially selected items. Use for uncontrolled selection behavior (checkbox
+       * will only change from user input, and not from developer control).
+       *
+       * This prop will be ignored if `selected` is passed.
+       */
+    initialSelected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
+    /**
+       * Used for controlled selection behavior, e.g. when you want to programmatically
+       * control which selection checkboxes are checked, and which are not.
+       */
+    selected: _propTypes.default.arrayOf(_propTypes.default.any.isRequired)
   }),
   /**
      * Sets the table-layout CSS property. Note that auto tableLayout prevents truncateText from working properly.