@elastic/eui 89.1.0 → 90.0.1

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"
@@ -853,12 +889,12 @@
       "start": {
         "line": 767,
         "column": 8,
-        "index": 22243
+        "index": 22236
       },
       "end": {
         "line": 770,
         "column": 9,
-        "index": 22362
+        "index": 22355
       }
     },
     "filepath": "src/components/combo_box/combo_box.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"
@@ -6071,14 +6107,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 179,
+        "line": 184,
         "column": 10,
-        "index": 5596
+        "index": 5641
       },
       "end": {
-        "line": 182,
+        "line": 187,
         "column": 12,
-        "index": 5711
+        "index": 5756
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6089,14 +6125,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 185,
+        "line": 190,
         "column": 10,
-        "index": 5757
+        "index": 5802
       },
       "end": {
-        "line": 188,
+        "line": 193,
         "column": 12,
-        "index": 5901
+        "index": 5946
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6107,14 +6143,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 193,
+        "line": 198,
         "column": 10,
-        "index": 5975
+        "index": 6020
       },
       "end": {
-        "line": 196,
+        "line": 201,
         "column": 12,
-        "index": 6123
+        "index": 6168
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6125,14 +6161,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 201,
+        "line": 206,
         "column": 10,
-        "index": 6189
+        "index": 6234
       },
       "end": {
-        "line": 204,
+        "line": 209,
         "column": 12,
-        "index": 6306
+        "index": 6351
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6143,14 +6179,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 207,
+        "line": 212,
         "column": 10,
-        "index": 6352
+        "index": 6397
       },
       "end": {
-        "line": 210,
+        "line": 215,
         "column": 12,
-        "index": 6500
+        "index": 6545
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6161,14 +6197,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 215,
+        "line": 220,
         "column": 10,
-        "index": 6563
+        "index": 6608
       },
       "end": {
-        "line": 218,
+        "line": 223,
         "column": 12,
-        "index": 6690
+        "index": 6735
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6179,14 +6215,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 221,
+        "line": 226,
         "column": 10,
-        "index": 6736
+        "index": 6781
       },
       "end": {
-        "line": 224,
+        "line": 229,
         "column": 12,
-        "index": 6893
+        "index": 6938
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6197,14 +6233,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 227,
+        "line": 232,
         "column": 10,
-        "index": 6946
+        "index": 6991
       },
       "end": {
-        "line": 230,
+        "line": 235,
         "column": 12,
-        "index": 7113
+        "index": 7158
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.tsx"
@@ -6215,14 +6251,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 233,
+        "line": 238,
         "column": 10,
-        "index": 7166
+        "index": 7211
       },
       "end": {
-        "line": 236,
+        "line": 241,
         "column": 12,
-        "index": 7333
+        "index": 7378
       }
     },
     "filepath": "src/components/selectable/selectable_list/selectable_list_item.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
 };