@elastic/eui 87.0.0 → 87.2.0

package/optimize/es/components/resizable_container/resizable_button.styles.js

@@ -0,0 +1,66 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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 { css } from '@emotion/react';
+import { transparentize } from '../../services';
+import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1fvu7sv-end",
+  styles: "align-items:flex-end;label:end;"
+} : {
+  name: "1fvu7sv-end",
+  styles: "align-items:flex-end;label:end;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "h0ntv8-start",
+  styles: "align-items:flex-start;label:start;"
+} : {
+  name: "h0ntv8-start",
+  styles: "align-items:flex-start;label:start;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "8391db-center",
+  styles: "align-items:center;label:center;"
+} : {
+  name: "8391db-center",
+  styles: "align-items:center;label:center;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiResizableButtonStyles = function euiResizableButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSize = euiTheme.size.base;
+  var grabHandleWidth = euiTheme.size.m;
+  var grabHandleHeight = euiTheme.border.width.thin;
+  var transitionSpeed = euiTheme.animation.fast;
+  var transition = "".concat(transitionSpeed, " ease");
+  return {
+    // Mimics the "grab" icon with CSS psuedo-elements.
+    // 1. The "grab" icon transforms into a thicker straight line on :hover and :focus
+    // 2. Start/end aligned handles should have a slight margin offset that disappears on hover/focus
+    // 3. CSS hack to smooth out/anti-alias the 1px wide handles at various zoom levels
+    euiResizableButton: /*#__PURE__*/css("z-index:1;flex-shrink:0;display:flex;justify-content:center;gap:", mathWithUnits(grabHandleHeight, function (x) {
+      return x * 2;
+    }), ";&:disabled{display:none;}&:hover,&:focus{gap:0;justify-content:center;}", euiCanAnimate, "{transition:gap ", transition, ",justify-content ", transition, ";}&::before,&::after{content:'';display:block;background-color:", euiTheme.colors.darkestShade, ";transform:translateZ(0);", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";", euiCanAnimate, "{transition-delay:", transitionSpeed, ";}}}&:focus,&:active{background-color:", transparentize(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", mathWithUnits(transitionSpeed, function (x) {
+      return x / 2;
+    }), ";}}};label:euiResizableButton;"),
+    horizontal: /*#__PURE__*/css("cursor:col-resize;", logicalCSS('height', '100%'), " ", logicalCSS('width', buttonSize), " margin-inline:", mathWithUnits(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", logicalCSS('width', grabHandleHeight), " ", logicalCSS('height', grabHandleWidth), " margin-block:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('height', '100%'), " margin-block:0;transform:none;}};label:horizontal;"),
+    vertical: /*#__PURE__*/css("flex-direction:column;cursor:row-resize;", logicalCSS('width', '100%'), " ", logicalCSS('height', buttonSize), " margin-block:", mathWithUnits(buttonSize, function (x) {
+      return x / -2;
+    }), ";&::before,&::after{", logicalCSS('height', grabHandleHeight), " ", logicalCSS('width', grabHandleWidth), " margin-inline:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('width', '100%'), " margin-inline:0;transform:none;}};label:vertical;"),
+    alignIndicator: {
+      center: _ref3,
+      start: _ref2,
+      end: _ref
+    }
+  };
+};

package/optimize/es/components/resizable_container/resizable_collapse_button.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "externalPosition", "internalPosition", "direction", "isVisible", "isCollapsed"];
 /*
@@ -11,11 +12,15 @@ var _excluded = ["className", "externalPosition", "internalPosition", "direction
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
 import { EuiButtonIcon } from '../button';
+import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
+import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref) {
   var className = _ref.className,
-    externalPosition = _ref.externalPosition,
+    _ref$externalPosition = _ref.externalPosition,
+    externalPosition = _ref$externalPosition === void 0 ? 'before' : _ref$externalPosition,
     _ref$internalPosition = _ref.internalPosition,
     internalPosition = _ref$internalPosition === void 0 ? 'middle' : _ref$internalPosition,
     _ref$direction = _ref.direction,
@@ -24,14 +29,15 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
     isCollapsed = _ref.isCollapsed,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
-  var classes = classNames('euiResizableToggleButton', "euiResizableToggleButton--".concat(direction), "euiResizableToggleButton--".concat(externalPosition), "euiResizableToggleButton--".concat(internalPosition), {
-    'euiResizableToggleButton-isVisible': isVisible,
-    'euiResizableToggleButton-isCollapsed': isCollapsed
-  }, className);
-
-  // Default to simiple grab icon in case there is no externalPosition specified
-  var COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
-  var NOT_COLLAPSED_ICON = isHorizontal ? 'grab' : 'grabHorizontal';
+  var showOnFocus = !isCollapsed && !isVisible;
+  var screenReaderOnlyStyles = euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
+  var euiTheme = useEuiTheme();
+  var styles = euiResizableCollapseButtonStyles(euiTheme);
+  var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
+  var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
+  var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && screenReaderOnlyStyles].concat(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));
+  var COLLAPSED_ICON = '';
+  var NOT_COLLAPSED_ICON = '';
   switch (externalPosition) {
     case 'before':
       COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
@@ -42,11 +48,13 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
       NOT_COLLAPSED_ICON = isHorizontal ? 'menuLeft' : 'menuUp';
       break;
   }
+  var classes = classNames('euiResizableCollapseButton', className);
   return ___EmotionJSX(EuiButtonIcon, _extends({
     display: isCollapsed ? 'empty' : 'base',
-    color: "text"
-  }, rest, {
+    color: "text",
     className: classes,
+    css: cssStyles
+  }, rest, {
     iconType: isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON
   }));
 };

package/optimize/es/components/resizable_container/resizable_collapse_button.styles.js

@@ -0,0 +1,85 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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 { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiShadowXSmall, euiSlightShadowHover } from '../../themes/amsterdam';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;"
+} : {
+  name: "fuwsll-euiResizableCollapseButton",
+  styles: "z-index:2;position:absolute;&:focus{animation:none;};label:euiResizableCollapseButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiResizableCollapseButtonStyles = function euiResizableCollapseButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSize = euiTheme.size.l;
+  var centeringOffset = mathWithUnits(buttonSize, function (x) {
+    return x / -2;
+  }); // Use negative margins instead of transforms to avoid having to override EuiButtonIcon's CSS
+  var buttonOffset = euiTheme.size.base;
+  return {
+    euiResizableCollapseButton: _ref,
+    collapsible: {
+      collapsible: /*#__PURE__*/css("background:", euiTheme.colors.emptyShade, ";", euiShadowXSmall(euiThemeContext), " &:focus{", euiSlightShadowHover(euiThemeContext), ";};label:collapsible;"),
+      horizontal: {
+        after: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('margin-right', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/css(logicalCSS('left', 0), " ", logicalCSS('margin-left', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/css(logicalCSS('top', '50%'), " ", logicalCSS('margin-top', centeringOffset), ";;label:middle;"),
+        top: /*#__PURE__*/css(logicalCSS('top', 0), " ", logicalCSS('margin-top', buttonOffset), ";;label:top;"),
+        bottom: /*#__PURE__*/css(logicalCSS('bottom', 0), " ", logicalCSS('margin-bottom', buttonOffset), ";;label:bottom;"),
+        // `left/right` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get left() {
+          return this.middle;
+        },
+        get right() {
+          return this.middle;
+        }
+      },
+      vertical: {
+        after: /*#__PURE__*/css(logicalCSS('top', '100%'), " ", logicalCSS('margin-top', centeringOffset), ";;label:after;"),
+        before: /*#__PURE__*/css(logicalCSS('bottom', '100%'), " ", logicalCSS('margin-bottom', centeringOffset), ";;label:before;"),
+        middle: /*#__PURE__*/css(logicalCSS('left', '50%'), " ", logicalCSS('margin-left', centeringOffset), ";;label:middle;"),
+        left: /*#__PURE__*/css(logicalCSS('left', 0), " ", logicalCSS('margin-left', buttonOffset), ";;label:left;"),
+        right: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('margin-right', buttonOffset), ";;label:right;"),
+        // `top/bottom` aren't valid positions for the horizontal direction,
+        // so we're using getters to fall back to the `middle` CSS
+        get top() {
+          return this.middle;
+        },
+        get bottom() {
+          return this.middle;
+        }
+      }
+    },
+    collapsed: {
+      // When collapsed, the button itself is the full collapsed area
+      // and we use flex to align the icon within
+      collapsed: /*#__PURE__*/css("border-radius:0;", logicalCSS('top', 0), ";;label:collapsed;"),
+      horizontal: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:horizontal;"),
+      vertical: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:vertical;"),
+      horizontalPositions: {
+        top: /*#__PURE__*/css(logicalCSS('padding-top', buttonOffset), " align-items:flex-start;;label:top;"),
+        bottom: /*#__PURE__*/css(logicalCSS('padding-bottom', buttonOffset), " align-items:flex-end;;label:bottom;"),
+        middle: /*#__PURE__*/css(";label:middle;"),
+        left: /*#__PURE__*/css(";label:left;"),
+        right: /*#__PURE__*/css(";label:right;")
+      },
+      verticalPositions: {
+        left: /*#__PURE__*/css(logicalCSS('padding-left', buttonOffset), " justify-content:flex-start;;label:left;"),
+        right: /*#__PURE__*/css(logicalCSS('padding-right', buttonOffset), " justify-content:flex-end;;label:right;"),
+        middle: /*#__PURE__*/css(";label:middle;"),
+        top: /*#__PURE__*/css(";label:top;"),
+        bottom: /*#__PURE__*/css(";label:bottom;")
+      }
+    }
+  };
+};

package/optimize/es/components/selectable/selectable_list/selectable_list.js

@@ -164,17 +164,67 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         search: searchValue
       }, label));
     }, areEqual));
+    _defineProperty(_assertThisInitialized(_this), "renderVirtualizedList", function (heightIsFull, optionArray) {
+      if (!_this.props.isVirtualized) return null;
+      var _this$props3 = _this.props,
+        windowProps = _this$props3.windowProps,
+        forcedHeight = _this$props3.height,
+        rowHeight = _this$props3.rowHeight;
+      var virtualizationProps = _objectSpread({
+        className: 'euiSelectableList__list',
+        ref: _this.setListRef,
+        outerRef: _this.removeScrollableTabStop,
+        innerRef: _this.setListBoxRef,
+        innerElementType: 'ul',
+        itemCount: optionArray.length,
+        itemData: optionArray,
+        itemSize: rowHeight,
+        'data-skip-axe': 'scrollable-region-focusable'
+      }, windowProps);
+
+      // Calculated height is only used if height is not full
+      var calculatedHeight = !heightIsFull ? forcedHeight || 0 : 0;
+
+      // If calculatedHeight is still falsy, then calculate it
+      if (!heightIsFull && !calculatedHeight) {
+        var maxVisibleOptions = 7;
+        var numVisibleOptions = optionArray.length;
+        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
+        if (numVisibleMoreThanMax) {
+          // Show only half of the last one to indicate there's more to scroll to
+          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
+        } else {
+          calculatedHeight = numVisibleOptions * rowHeight;
+        }
+      }
+      return heightIsFull ? ___EmotionJSX(EuiAutoSizer, null, function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
+        return ___EmotionJSX(FixedSizeList, _extends({
+          width: width,
+          height: height
+        }, virtualizationProps), _this.ListRow);
+      }) : ___EmotionJSX(EuiAutoSizer, {
+        disableHeight: true
+      }, function (_ref3) {
+        var width = _ref3.width;
+        return ___EmotionJSX(FixedSizeList, _extends({
+          width: width,
+          height: calculatedHeight
+        }, virtualizationProps), _this.ListRow);
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "onAddOrRemoveOption", function (option, event) {
       if (option.disabled) {
         return;
       }
-      var _this$props3 = _this.props,
-        allowExclusions = _this$props3.allowExclusions,
-        options = _this$props3.options,
-        _this$props3$visibleO = _this$props3.visibleOptions,
-        visibleOptions = _this$props3$visibleO === void 0 ? options : _this$props3$visibleO;
-      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref2) {
-        var label = _ref2.label;
+      var _this$props4 = _this.props,
+        allowExclusions = _this$props4.allowExclusions,
+        options = _this$props4.options,
+        _this$props4$visibleO = _this$props4.visibleOptions,
+        visibleOptions = _this$props4$visibleO === void 0 ? options : _this$props4$visibleO;
+      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref4) {
+        var label = _ref4.label;
         return label === option.label;
       }), function () {
         if (option.checked === 'on' && allowExclusions) {
@@ -187,10 +237,10 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onAddOption", function (addedOption, event) {
-      var _this$props4 = _this.props,
-        onOptionClick = _this$props4.onOptionClick,
-        options = _this$props4.options,
-        singleSelection = _this$props4.singleSelection;
+      var _this$props5 = _this.props,
+        onOptionClick = _this$props5.onOptionClick,
+        options = _this$props5.options,
+        singleSelection = _this$props5.singleSelection;
       var changedOption = _objectSpread({}, addedOption);
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
@@ -209,10 +259,10 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption, event) {
-      var _this$props5 = _this.props,
-        onOptionClick = _this$props5.onOptionClick,
-        singleSelection = _this$props5.singleSelection,
-        options = _this$props5.options;
+      var _this$props6 = _this.props,
+        onOptionClick = _this$props6.onOptionClick,
+        singleSelection = _this$props6.singleSelection,
+        options = _this$props6.options;
       var changedOption = _objectSpread({}, removedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -225,9 +275,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     _defineProperty(_assertThisInitialized(_this), "onExcludeOption", function (excludedOption, event) {
-      var _this$props6 = _this.props,
-        onOptionClick = _this$props6.onOptionClick,
-        options = _this$props6.options;
+      var _this$props7 = _this.props,
+        onOptionClick = _this$props7.onOptionClick,
+        options = _this$props7.options;
       var changedOption = _objectSpread({}, excludedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -256,76 +306,44 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props7 = this.props,
-        className = _this$props7.className,
-        options = _this$props7.options,
-        searchValue = _this$props7.searchValue,
-        onOptionClick = _this$props7.onOptionClick,
-        renderOption = _this$props7.renderOption,
-        forcedHeight = _this$props7.height,
-        windowProps = _this$props7.windowProps,
-        rowHeight = _this$props7.rowHeight,
-        activeOptionIndex = _this$props7.activeOptionIndex,
-        makeOptionId = _this$props7.makeOptionId,
-        showIcons = _this$props7.showIcons,
-        singleSelection = _this$props7.singleSelection,
-        visibleOptions = _this$props7.visibleOptions,
-        allowExclusions = _this$props7.allowExclusions,
-        bordered = _this$props7.bordered,
-        paddingSize = _this$props7.paddingSize,
-        searchable = _this$props7.searchable,
-        onFocusBadge = _this$props7.onFocusBadge,
-        listId = _this$props7.listId,
-        setActiveOptionIndex = _this$props7.setActiveOptionIndex,
-        ariaLabel = _this$props7['aria-label'],
-        ariaLabelledby = _this$props7['aria-labelledby'],
-        ariaDescribedby = _this$props7['aria-describedby'],
-        role = _this$props7.role,
-        isVirtualized = _this$props7.isVirtualized,
-        textWrap = _this$props7.textWrap,
-        rest = _objectWithoutProperties(_this$props7, _excluded3);
+      var _this$props8 = this.props,
+        className = _this$props8.className,
+        options = _this$props8.options,
+        searchValue = _this$props8.searchValue,
+        onOptionClick = _this$props8.onOptionClick,
+        renderOption = _this$props8.renderOption,
+        forcedHeight = _this$props8.height,
+        windowProps = _this$props8.windowProps,
+        rowHeight = _this$props8.rowHeight,
+        activeOptionIndex = _this$props8.activeOptionIndex,
+        makeOptionId = _this$props8.makeOptionId,
+        showIcons = _this$props8.showIcons,
+        singleSelection = _this$props8.singleSelection,
+        visibleOptions = _this$props8.visibleOptions,
+        allowExclusions = _this$props8.allowExclusions,
+        bordered = _this$props8.bordered,
+        paddingSize = _this$props8.paddingSize,
+        searchable = _this$props8.searchable,
+        onFocusBadge = _this$props8.onFocusBadge,
+        listId = _this$props8.listId,
+        setActiveOptionIndex = _this$props8.setActiveOptionIndex,
+        ariaLabel = _this$props8['aria-label'],
+        ariaLabelledby = _this$props8['aria-labelledby'],
+        ariaDescribedby = _this$props8['aria-describedby'],
+        role = _this$props8.role,
+        isVirtualized = _this$props8.isVirtualized,
+        textWrap = _this$props8.textWrap,
+        rest = _objectWithoutProperties(_this$props8, _excluded3);
       var optionArray = visibleOptions || options;
       this.calculateAriaSetAttrs(optionArray);
       var heightIsFull = forcedHeight === 'full';
-      var calculatedHeight = heightIsFull ? false : forcedHeight;
-
-      // If calculatedHeight is still undefined, then calculate it
-      if (calculatedHeight === undefined) {
-        var maxVisibleOptions = 7;
-        var numVisibleOptions = optionArray.length;
-        var numVisibleMoreThanMax = optionArray.length > maxVisibleOptions;
-        if (numVisibleMoreThanMax) {
-          // Show only half of the last one to indicate there's more to scroll to
-          calculatedHeight = (maxVisibleOptions - 0.5) * rowHeight;
-        } else {
-          calculatedHeight = numVisibleOptions * rowHeight;
-        }
-      }
       var classes = classNames('euiSelectableList', {
         'euiSelectableList-fullHeight': heightIsFull,
         'euiSelectableList-bordered': bordered
       }, className);
       return ___EmotionJSX("div", _extends({
         className: classes
-      }, rest), isVirtualized ? ___EmotionJSX(EuiAutoSizer, {
-        disableHeight: !heightIsFull
-      }, function (_ref3) {
-        var width = _ref3.width,
-          height = _ref3.height;
-        return ___EmotionJSX(FixedSizeList, _extends({
-          ref: _this2.setListRef,
-          outerRef: _this2.removeScrollableTabStop,
-          className: "euiSelectableList__list",
-          "data-skip-axe": "scrollable-region-focusable",
-          width: width,
-          height: calculatedHeight || height,
-          itemCount: optionArray.length,
-          itemData: optionArray,
-          itemSize: rowHeight,
-          innerElementType: "ul",
-          innerRef: _this2.setListBoxRef
-        }, windowProps), _this2.ListRow);
-      }) : ___EmotionJSX("div", {
+      }, rest), isVirtualized ? this.renderVirtualizedList(heightIsFull, optionArray) : ___EmotionJSX("div", {
         className: "euiSelectableList__list",
         ref: this.removeScrollableTabStop
       }, ___EmotionJSX("ul", {

package/optimize/es/components/steps/step.styles.js

@@ -40,7 +40,7 @@ export var euiStepStyles = function euiStepStyles(euiThemeContext) {
 export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiStep = euiStepVariables(euiTheme);
-  var styles = {
+  return {
     euiStep__content: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.s), " ", logicalCSS('padding-top', euiTheme.size.base), " ", logicalCSS('padding-bottom', mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
     })), " ", logicalCSS('padding-right', euiTheme.size.base), ";;label:euiStep__content;"),
@@ -50,16 +50,16 @@ export var euiStepContentStyles = function euiStepContentStyles(euiThemeContext)
     })), logicalCSS('margin-left', mathWithUnits(euiStep.numberSize, function (x) {
       return x / 2;
     })), ";;label:m;"),
-    s: /*#__PURE__*/css(";label:s;"),
-    // s is the same as m, so we'll programmatically duplicate it below
+    // `s` is the same as `m` - use a getter to duplicate its content
+    get s() {
+      return this.m;
+    },
     xs: /*#__PURE__*/css(logicalCSS('padding-left', mathWithUnits([euiStep.numberXSSize, euiStep.numberMargin], function (x, y) {
       return x / 2 + y;
     })), logicalCSS('margin-left', mathWithUnits(euiStep.numberXSSize, function (x) {
       return x / 2;
     })), ";;label:xs;")
   };
-  styles.s = styles.m;
-  return styles;
 };
 export var euiStepTitleStyles = function euiStepTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/optimize/es/components/tool_tip/tool_tip.js

@@ -20,7 +20,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../common';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
@@ -30,21 +29,12 @@ import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
 import { toolTipManager } from './tool_tip_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var positionsToClassNameMap = {
-  top: 'euiToolTip--top',
-  right: 'euiToolTip--right',
-  bottom: 'euiToolTip--bottom',
-  left: 'euiToolTip--left'
-};
-export var POSITIONS = keysOf(positionsToClassNameMap);
+export var POSITIONS = ['top', 'right', 'bottom', 'left'];
+var DISPLAYS = ['inlineBlock', 'block'];
 var delayToMsMap = {
   regular: 250,
   long: 250 * 5
 };
-var displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock'
-};
 var DEFAULT_TOOLTIP_STYLES = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -255,7 +245,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
-        id: this.state.id,
+        id: id,
         className: anchorClasses,
         display: display,
         isVisible: visible

package/optimize/es/components/tool_tip/tool_tip_anchor.js

@@ -1,9 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onBlur", "onFocus", "onMouseOver", "onMouseOut", "id", "className", "children", "display", "isVisible"];
-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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,7 +36,7 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: classes,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut
-    }), /*#__PURE__*/cloneElement(children, _objectSpread({
+    }), /*#__PURE__*/cloneElement(children, {
       onFocus: function onFocus(e) {
         _onFocus();
         children.props.onFocus && children.props.onFocus(e);
@@ -47,10 +44,9 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onBlur: function onBlur(e) {
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
-      }
-    }, isVisible && {
-      'aria-describedby': id
-    })))
+      },
+      'aria-describedby': isVisible ? classNames(id, children.props['aria-describedby']) : children.props['aria-describedby']
+    }))
   );
 });
 EuiToolTipAnchor.displayName = 'EuiToolTipAnchor';

package/optimize/es/services/accessibility/html_id_generator.js

@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import React, { useMemo } from 'react';
 import { v1 as uuidv1 } from 'uuid';
-import { useMemo } from 'react';
 
 /**
  * This function returns a function to generate ids.
@@ -32,7 +32,8 @@ export function htmlIdGenerator() {
  * This prevents IDs from being re-randomized on every component update.
  */
 
-export var useGeneratedHtmlId = function useGeneratedHtmlId() {
+// We can remove this deprecated hook once EUI no longer needs to support React 16-17
+var useDeprecatedGeneratedHtmlId = function useDeprecatedGeneratedHtmlId() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     prefix = _ref.prefix,
     suffix = _ref.suffix,
@@ -40,4 +41,19 @@ export var useGeneratedHtmlId = function useGeneratedHtmlId() {
   return useMemo(function () {
     return conditionalId || htmlIdGenerator(prefix)(suffix);
   }, [conditionalId, prefix, suffix]);
-};
+};
+var useNewGeneratedHtmlId = function useNewGeneratedHtmlId() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$prefix = _ref2.prefix,
+    prefix = _ref2$prefix === void 0 ? '' : _ref2$prefix,
+    _ref2$suffix = _ref2.suffix,
+    suffix = _ref2$suffix === void 0 ? '' : _ref2$suffix,
+    conditionalId = _ref2.conditionalId;
+  // Using the default export and dot notation here is intentional
+  // to prevent React <18 import errors.
+  var id = React.useId();
+  return useMemo(function () {
+    return conditionalId || "".concat(prefix).concat(id).concat(suffix);
+  }, [id, conditionalId, prefix, suffix]);
+};
+export var useGeneratedHtmlId = 'useId' in React ? useNewGeneratedHtmlId : useDeprecatedGeneratedHtmlId;

package/optimize/es/themes/amsterdam/global_styling/mixins/shadow.js

@@ -78,7 +78,6 @@ export var euiShadowXLarge = function euiShadowXLarge(_ref9) {
 
 /**
  * slightShadowHover
- * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
  */
 export var euiSlightShadowHover = function euiSlightShadowHover(_ref11) {
   var euiTheme = _ref11.euiTheme,