@elastic/eui 114.3.0 → 116.0.0

package/optimize/lib/components/flyout/flyout_menu.js

@@ -75,14 +75,11 @@ var HistoryPopover = function HistoryPopover(_ref) {
     },
     panelPaddingSize: "xs",
     anchorPosition: "downLeft"
-  }, (0, _react2.jsx)(_list_group.EuiListGroup, {
-    gutterSize: "none"
-  }, items.map(function (item, index) {
+  }, (0, _react2.jsx)(_list_group.EuiListGroup, null, items.map(function (item, index) {
     return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
       key: "history-item-".concat(index),
       label: item.title,
       iconType: item.iconType,
-      size: "s",
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);

package/optimize/lib/components/form/checkbox/checkbox.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _icon = require("../../icon");
+var _checkbox_control = require("./checkbox_control");
 var _checkbox = require("./checkbox.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
@@ -43,10 +43,9 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiCheckbox', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_checkbox.euiCheckboxStyles);
-  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, readOnly && styles.input.readOnly];
   var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
   var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
-  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = (0, _react.useCallback)(function (input) {
@@ -59,9 +58,10 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   }, (0, _react2.jsx)("div", {
     css: inputStyles,
     className: "euiCheckbox__square"
-  }, (0, _react2.jsx)(_icon.EuiIcon, {
-    css: iconStyles,
-    type: indeterminate ? 'stopFill' : checked ? 'check' : 'empty'
+  }, (0, _react2.jsx)(_checkbox_control.EuiCheckboxControl, {
+    checked: checked,
+    indeterminate: indeterminate,
+    disabled: disabled
   }), (0, _react2.jsx)("input", (0, _extends2.default)({
     css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",

package/optimize/lib/components/form/checkbox/checkbox.styles.js

@@ -21,14 +21,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:default;label:readOnly;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;"
-} : {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
@@ -37,25 +29,12 @@ var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(e
   return {
     euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
     input: {
-      euiCheckbox__square: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)("position:relative;", controlStyles.input.focusVisible, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
-      enabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;")
-      },
-      disabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
-      },
       // Readonly checkboxes are used by EuiMarkdownEditor
       // Maintain the initial color to enforce that clicks are not doing anything
       readOnly: /*#__PURE__*/(0, _react.css)("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
-      icon: {
-        euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
-        check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
-        indeterminate: _ref2
-      },
       euiCheckbox__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
     },
     label: {

package/optimize/lib/components/form/checkbox/checkbox_control.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCheckboxControl = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _icon = require("../../icon");
+var _checkbox_control = require("./checkbox_control.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "checked", "indeterminate", "excluded", "disabled"];
+/*
+ * 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.
+ */
+/**
+ * Presentation-only checkbox control element. Renders a checkbox square and state icon only without functionality.
+ */
+var EuiCheckboxControl = exports.EuiCheckboxControl = function EuiCheckboxControl(_ref) {
+  var className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+    _ref$excluded = _ref.excluded,
+    excluded = _ref$excluded === void 0 ? false : _ref$excluded,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var isSelected = checked || indeterminate || excluded;
+  var isExcluded = excluded && !indeterminate;
+  var classes = (0, _classnames.default)('euiCheckboxControl', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_checkbox_control.euiCheckboxControlStyles);
+  var cssStyles = [styles.euiCheckboxControl, disabled ? isSelected ? styles.disabled.selected : styles.disabled.unselected : isExcluded ? styles.enabled.excluded : isSelected ? styles.enabled.selected : styles.enabled.unselected];
+  var iconStyles = [styles.icon.euiCheckbox__icon, indeterminate ? styles.icon.indeterminate : styles.icon.check];
+  var iconType = indeterminate ? 'stopFill' : excluded ? 'cross' : checked ? 'check' : 'empty';
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
+    css: cssStyles,
+    className: classes
+  }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
+    role: "presentation",
+    css: iconStyles,
+    type: iconType,
+    size: "m"
+  }));
+};

package/optimize/lib/components/form/checkbox/checkbox_control.styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCheckboxControlStyles = void 0;
+var _react = require("@emotion/react");
+var _form = require("../form.styles");
+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.
+ */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;"
+} : {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiCheckboxControlStyles = exports.euiCheckboxControlStyles = function euiCheckboxControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
+  return {
+    euiCheckboxControl: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckboxControl;"),
+    enabled: {
+      selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
+      unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;"),
+      excluded: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, " background-color:", euiTheme.colors.backgroundFilledDanger, ";border-color:", euiTheme.colors.backgroundFilledDanger, ";;label:excluded;")
+    },
+    disabled: {
+      selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
+      unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
+    },
+    icon: {
+      euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
+      check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
+      indeterminate: _ref
+    }
+  };
+};

package/optimize/lib/components/form/checkbox/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "EuiCheckbox", {
     return _checkbox.EuiCheckbox;
   }
 });
+Object.defineProperty(exports, "EuiCheckboxControl", {
+  enumerable: true,
+  get: function get() {
+    return _checkbox_control.EuiCheckboxControl;
+  }
+});
 Object.defineProperty(exports, "EuiCheckboxGroup", {
   enumerable: true,
   get: function get() {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "EuiCheckboxGroup", {
   }
 });
 var _checkbox = require("./checkbox");
+var _checkbox_control = require("./checkbox_control");
 var _checkbox_group = require("./checkbox_group");

package/optimize/lib/components/form/form.styles.js

@@ -280,7 +280,8 @@ var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function e
   return {
     wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
     input: {
-      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        /* For Windows high contrast themes, a border must always be rendered, not just a background */\n        border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        /* For Windows high contrast themes, a border must always be rendered, not just a background */\n        border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      focusVisible: "\n        &:has(input:focus-visible) {\n          outline: ".concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n      "),
       // TODO: Revert https://github.com/elastic/eui/pull/7981
       // once https://github.com/dperini/nwsapi/issues/123
       // has been fixed, and restore `&:has(+ label)` selector

package/optimize/lib/components/form/radio/radio.styles.js

@@ -19,7 +19,7 @@ var euiRadioStyles = exports.euiRadioStyles = function euiRadioStyles(euiThemeCo
   return {
     euiRadio: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiRadio;"),
     input: {
-      euiRadio__circle: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:50%;;label:euiRadio__circle;"),
+      euiRadio__circle: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " ", controlStyles.input.focusVisible, " border-radius:50%;;label:euiRadio__circle;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
       enabled: {

package/optimize/lib/components/form/super_select/super_select.js

@@ -24,8 +24,8 @@ var _super_select_control = require("./super_select_control");
 var _super_select_item = require("./super_select_item");
 var _super_select = require("./super_select.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
-  _excluded2 = ["value", "dropdownDisplay", "inputDisplay"];
+var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "itemClassName", "fullWidth", "popoverProps", "compressed"],
+  _excluded2 = ["value", "dropdownDisplay", "inputDisplay", "disabled"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -54,40 +54,50 @@ var EuiSuperSelect = exports.EuiSuperSelect = /*#__PURE__*/function (_Component)
     (0, _defineProperty2.default)(_this, "controlButtonRef", /*#__PURE__*/(0, _react.createRef)());
     (0, _defineProperty2.default)(_this, "describedById", (0, _services.htmlIdGenerator)('euiSuperSelect_')('_screenreaderDescribeId'));
     (0, _defineProperty2.default)(_this, "state", {
-      isPopoverOpen: _this.props.isOpen || false
+      isPopoverOpen: _this.props.isOpen || false,
+      currentIndex: 0
     });
     (0, _defineProperty2.default)(_this, "setItemNode", function (node, index) {
       _this.itemNodes[index] = node;
     });
     (0, _defineProperty2.default)(_this, "openPopover", function () {
+      var _this$props = _this.props,
+        options = _this$props.options,
+        valueOfSelected = _this$props.valueOfSelected;
+      var indexOfSelected = options.findIndex(function (option) {
+        return (option === null || option === void 0 ? void 0 : option.value) === valueOfSelected;
+      });
+      var candidateIndex = valueOfSelected != null && indexOfSelected >= 0 ? indexOfSelected : 0;
+      var initialIndex = candidateIndex;
+
+      // If the item is disabled, find the first focusable item going forward
+      while (initialIndex < options.length && (_options$initialIndex = options[initialIndex]) !== null && _options$initialIndex !== void 0 && _options$initialIndex.disabled) {
+        var _options$initialIndex;
+        initialIndex++;
+      }
+      if (initialIndex >= options.length) {
+        initialIndex = candidateIndex;
+      }
       _this.setState({
-        isPopoverOpen: true
+        isPopoverOpen: options.length > 0,
+        currentIndex: initialIndex
       });
-      var focusSelected = function focusSelected() {
-        var indexOfSelected = _this.props.options.reduce(function (indexOfSelected, option, index) {
-          if (indexOfSelected != null) return indexOfSelected;
-          if (option == null) return null;
-          return option.value === _this.props.valueOfSelected ? index : null;
-        }, null);
+      requestAnimationFrame(function () {
         requestAnimationFrame(function () {
           if (!_this._isMounted) {
             return;
           }
-          if (_this.props.valueOfSelected != null && indexOfSelected != null) {
-            _this.focusItemAt(indexOfSelected);
-          } else {
-            _this.focusItemAt(0);
-          }
+          _this.focusItemAt(initialIndex);
           if (_this.props.onFocus) {
             _this.props.onFocus();
           }
         });
-      };
-      requestAnimationFrame(focusSelected);
+      });
     });
     (0, _defineProperty2.default)(_this, "closePopover", function () {
       _this.setState({
-        isPopoverOpen: false
+        isPopoverOpen: false,
+        currentIndex: -1
       });
 
       // Refocus back to the toggling control button on popover close
@@ -157,54 +167,58 @@ var EuiSuperSelect = exports.EuiSuperSelect = /*#__PURE__*/function (_Component)
     }
   }, {
     key: "focusItemAt",
-    value: function focusItemAt(index, direction) {
-      var _targetElement;
-      var targetElement = this.itemNodes[index];
-      // If the current index is disabled, find the next non-disabled element
-      while (targetElement && targetElement.disabled) {
-        direction === ShiftDirection.BACK ? index-- : index++;
-        targetElement = this.itemNodes[index];
-      }
-      (_targetElement = targetElement) === null || _targetElement === void 0 || _targetElement.focus();
+    value: function focusItemAt(index) {
+      var _this$itemNodes$index;
+      (_this$itemNodes$index = this.itemNodes[index]) === null || _this$itemNodes$index === void 0 || _this$itemNodes$index.focus();
     }
   }, {
     key: "shiftFocus",
     value: function shiftFocus(direction) {
-      var currentIndex = this.itemNodes.indexOf(document.activeElement);
-      var targetElementIndex;
+      var options = this.props.options;
+      var currentIndex = this.state.currentIndex;
       if (currentIndex === -1) {
         // somehow the select options has lost focus
-        targetElementIndex = 0;
-      } else {
-        // Note: this component purposely does not cycle arrow key navigation
-        // to match native <select> elements
-        if (direction === ShiftDirection.BACK) {
-          targetElementIndex = currentIndex - 1;
-        } else {
-          targetElementIndex = currentIndex + 1;
+        this.focusItemAt(0);
+        this.setState({
+          currentIndex: 0
+        });
+        return;
+      }
+
+      // Note: this component purposely does not cycle arrow key navigation
+      // to match native <select> elements
+      var step = direction === ShiftDirection.BACK ? -1 : 1;
+      var nextIndex = currentIndex + step;
+      while (nextIndex >= 0 && nextIndex < options.length) {
+        var _options$nextIndex;
+        if (!((_options$nextIndex = options[nextIndex]) !== null && _options$nextIndex !== void 0 && _options$nextIndex.disabled)) {
+          this.focusItemAt(nextIndex);
+          this.setState({
+            currentIndex: nextIndex
+          });
+          return;
         }
+        nextIndex += step;
       }
-      this.focusItemAt(targetElementIndex, direction);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        className = _this$props.className,
-        options = _this$props.options,
-        valueOfSelected = _this$props.valueOfSelected,
-        placeholder = _this$props.placeholder,
-        onChange = _this$props.onChange,
-        isOpen = _this$props.isOpen,
-        isInvalid = _this$props.isInvalid,
-        hasDividers = _this$props.hasDividers,
-        itemClassName = _this$props.itemClassName,
-        itemLayoutAlign = _this$props.itemLayoutAlign,
-        fullWidth = _this$props.fullWidth,
-        popoverProps = _this$props.popoverProps,
-        compressed = _this$props.compressed,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var _this2 = this,
+        _options$this$state$c;
+      var _this$props2 = this.props,
+        className = _this$props2.className,
+        options = _this$props2.options,
+        valueOfSelected = _this$props2.valueOfSelected,
+        placeholder = _this$props2.placeholder,
+        onChange = _this$props2.onChange,
+        isOpen = _this$props2.isOpen,
+        isInvalid = _this$props2.isInvalid,
+        itemClassName = _this$props2.itemClassName,
+        fullWidth = _this$props2.fullWidth,
+        popoverProps = _this$props2.popoverProps,
+        compressed = _this$props2.compressed,
+        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var popoverClasses = (0, _classnames.default)('euiSuperSelect', popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className);
       var button = (0, _react2.jsx)(_super_select_control.EuiSuperSelectControl, (0, _extends2.default)({
         options: options,
@@ -224,58 +238,72 @@ var EuiSuperSelect = exports.EuiSuperSelect = /*#__PURE__*/function (_Component)
         var value = option.value,
           dropdownDisplay = option.dropdownDisplay,
           inputDisplay = option.inputDisplay,
+          disabled = option.disabled,
           optionRest = (0, _objectWithoutProperties2.default)(option, _excluded2);
         if (value == null) return;
         return (0, _react2.jsx)(_super_select_item.EuiSuperSelectItem, (0, _extends2.default)({
-          key: index,
+          key: index
+          /* NOTE: This should rather use "li" to align select-like behavior. But the current
+          implementation relies on the interactive and focusable item for the navigation.
+          This will require additional refactoring to adjust but we might want to decide first
+          if the effort is worth it, considering the unification plans for selection components
+          as part of OneSelect (https://github.com/elastic/eui/issues/8808).
+          */,
+          element: "button",
           id: String(value),
           className: itemClassName,
-          hasDividers: hasDividers,
-          layoutAlign: itemLayoutAlign,
-          icon: valueOfSelected === value ? 'check' : 'empty',
+          checked: valueOfSelected === value ? 'on' : undefined,
+          isSelected: valueOfSelected === value,
+          isFocused: _this2.state.currentIndex === index,
+          isSingleSelection: true,
+          isDisabled: disabled,
+          textWrap: "wrap",
           onClick: function onClick() {
             return _this2.itemClicked(value);
           },
           onKeyDown: _this2.onItemKeyDown,
-          buttonRef: function buttonRef(node) {
+          ref: function ref(node) {
             return _this2.setItemNode(node, index);
           },
           "aria-selected": valueOfSelected === value
         }, optionRest), dropdownDisplay || inputDisplay);
       });
-      return (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
-        closePopover: this.closePopover,
-        panelPaddingSize: "none"
-      }, popoverProps, {
-        className: popoverClasses,
-        isOpen: isOpen || this.state.isPopoverOpen,
-        input: button,
-        fullWidth: fullWidth,
-        disableFocusTrap: true // This component handles its own focus manually
-      }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-        id: this.describedById
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiSuperSelect.screenReaderAnnouncement",
-        default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
-      }))), (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiSuperSelect.ariaLabel",
-        default: "Select listbox"
-      }, function (ariaLabel) {
-        return (0, _react2.jsx)("div", {
-          "aria-label": ariaLabel,
-          "aria-describedby": _this2.describedById,
-          css: _super_select.euiSuperSelectStyles.euiSuperSelect__listbox,
-          className: "euiSuperSelect__listbox eui-scrollBar",
-          role: "listbox",
-          "aria-activedescendant": valueOfSelected != null ? String(valueOfSelected) : undefined,
-          tabIndex: 0
-        }, items);
-      }));
+      var ariaActiveDescendant = ((_options$this$state$c = options[this.state.currentIndex]) === null || _options$this$state$c === void 0 ? void 0 : _options$this$state$c.value) != null ? String(options[this.state.currentIndex].value) : undefined;
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_super_select.euiSuperSelectStyles);
+        return (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
+          closePopover: _this2.closePopover,
+          panelPaddingSize: "none"
+        }, popoverProps, {
+          className: popoverClasses,
+          isOpen: isOpen || _this2.state.isPopoverOpen,
+          input: button,
+          fullWidth: fullWidth,
+          disableFocusTrap: true // This component handles its own focus manually
+        }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+          id: _this2.describedById
+        }, (0, _react2.jsx)(_i18n.EuiI18n, {
+          token: "euiSuperSelect.screenReaderAnnouncement",
+          default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
+        }))), (0, _react2.jsx)(_i18n.EuiI18n, {
+          token: "euiSuperSelect.ariaLabel",
+          default: "Select listbox"
+        }, function (ariaLabel) {
+          return (0, _react2.jsx)("div", {
+            "aria-label": ariaLabel,
+            "aria-describedby": _this2.describedById,
+            css: styles.euiSuperSelect__listbox,
+            className: "euiSuperSelect__listbox eui-scrollBar",
+            role: "listbox",
+            "aria-activedescendant": ariaActiveDescendant,
+            tabIndex: 0
+          }, items);
+        }));
+      });
     }
   }]);
 }(_react.Component);
 (0, _defineProperty2.default)(EuiSuperSelect, "defaultProps", {
-  hasDividers: false,
   fullWidth: false,
   compressed: false,
   isInvalid: false,

package/optimize/lib/components/form/super_select/super_select.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiSuperSelectStyles = exports.euiSuperSelectItemStyles = exports.euiSuperSelectControlStyles = void 0;
+exports.euiSuperSelectStyles = exports.euiSuperSelectControlStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _form = require("../form.styles");
@@ -15,14 +15,10 @@ var _form = require("../form.styles");
  * Side Public License, v 1.
  */
 
-var euiSuperSelectStyles = exports.euiSuperSelectStyles = {
-  euiSuperSelect__listbox: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '300px'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), ";;label:euiSuperSelect__listbox;")
-};
-var euiSuperSelectItemStyles = exports.euiSuperSelectItemStyles = function euiSuperSelectItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+var euiSuperSelectStyles = exports.euiSuperSelectStyles = function euiSuperSelectStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
-    euiSuperSelect__item: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:euiSuperSelect__item;"),
-    hasDividers: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";};label:hasDividers;")
+    euiSuperSelect__listbox: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '300px'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), " padding:", euiTheme.size.s, ";.euiSuperSelect__item:focus{outline:none;};label:euiSuperSelect__listbox;")
   };
 };
 var euiSuperSelectControlStyles = exports.euiSuperSelectControlStyles = function euiSuperSelectControlStyles(euiThemeContext) {

package/optimize/lib/components/form/super_select/super_select_item.js

@@ -1,19 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiSuperSelectItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _services = require("../../../services");
-var _context_menu = require("../../context_menu");
-var _super_select = require("./super_select.styles");
+var _list_item_layout = require("../../list_item_layout");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasDividers"];
+var _excluded = ["children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,18 +23,18 @@ var _excluded = ["children", "className", "hasDividers"];
 // Type exposed to consumers via API
 // Actual props used by below component, transmogged by parent EuiSuperSelect
 // from consumer props to internal EUI props
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Internal subcomponent util, primarily for easier usage of hooks
-var EuiSuperSelectItem = exports.EuiSuperSelectItem = function EuiSuperSelectItem(_ref) {
+var EuiSuperSelectItem = exports.EuiSuperSelectItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    hasDividers = _ref.hasDividers,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSuperSelect__item', className);
-  var styles = (0, _services.useEuiMemoizedStyles)(_super_select.euiSuperSelectItemStyles);
-  var cssStyles = [styles.euiSuperSelect__item, hasDividers && styles.hasDividers];
-  return (0, _react2.jsx)(_context_menu.EuiContextMenuItem, (0, _extends2.default)({
-    css: cssStyles,
-    className: classes,
-    role: "option"
+  return (0, _react2.jsx)(_list_item_layout.EuiListItemLayout, (0, _extends2.default)({
+    ref: ref,
+    role: "option",
+    className: classes
   }, rest), children);
-};
+});
+EuiSuperSelectItem.displayName = 'EuiSuperSelectItem';

package/optimize/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -135,7 +135,6 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
   }, label)));
   return betaBadgeLabel ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({}, betaBadgeTooltipProps, {
     title: betaBadgeLabel,
-    content: betaBadgeTooltipContent,
-    delay: "long"
+    content: betaBadgeTooltipContent
   }), button) : button;
 };