@elastic/eui 115.0.0 → 116.0.0

package/optimize/es/components/list_item_layout/_list_item_layout.js

@@ -0,0 +1,353 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "element", "wrapperElement", "className", "css", "role", "prepend", "append", "extraAction", "wrapperProps", "contentProps", "prependProps", "appendProps", "textProps", "tooltipProps", "checked", "isDisabled", "hasAriaDisabled", "isFocused", "isSelected", "isSingleSelection", "selectionMode", "showIndicator", "textWrap", "external", "aria-describedby", "aria-selected", "aria-checked", "data-test-subj", "onClick"],
+  _excluded2 = ["href", "target", "rel"],
+  _excluded3 = ["ref"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/*
+ * 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 React, { forwardRef, useEffect, useMemo, useState } from 'react';
+// @ts-ignore module doesn't export `createElement`
+import { createElement } from '@emotion/react';
+import classNames from 'classnames';
+import { useCombinedRefs, useEuiDisabledElement, useEuiMemoizedStyles } from '../../services';
+import { euiListItemLayoutStyles, euiListItemLayoutWrapperStyles } from './_list_item_layout.styles';
+import { EuiToolTip } from '../tool_tip';
+import { EuiCheckboxControl } from '../form';
+import { EuiIcon } from '../icon';
+import { isButtonDisabled } from '../button/button_display/_button_display';
+import { EuiExternalLinkIcon } from '../link/external_link_icon';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined];
+var NATIVELY_CHECKABLE_ROLES = ['checkbox', 'menuitemcheckbox', 'radio', 'menuitemradio', 'switch'];
+var ROLES_THAT_CAN_BE_MIXED = ['option', 'checkbox', 'menuitemcheckbox'];
+var ROLES_THAT_CAN_USE_ARIA_CHECKED = ['option'].concat(NATIVELY_CHECKABLE_ROLES);
+var ROLES_THAT_CAN_USE_ARIA_SELECTED = ['tab', 'gridcell', 'option', 'row', 'treeitem'];
+
+// Ensure an exclusive union of either li, div, button, or anchor
+
+/**
+ * This is an EUI internal-only layout component that is used to share layout and
+ * styles between selection and navigational list components.
+ */
+export var EuiListItemLayout = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _tooltipProps$anchorP;
+  var _children = _ref.children,
+    _ref$element = _ref.element,
+    _element = _ref$element === void 0 ? 'li' : _ref$element,
+    wrapperElement = _ref.wrapperElement,
+    className = _ref.className,
+    css = _ref.css,
+    role = _ref.role,
+    _prepend = _ref.prepend,
+    _append = _ref.append,
+    extraAction = _ref.extraAction,
+    _wrapperProps = _ref.wrapperProps,
+    _contentProps = _ref.contentProps,
+    _prependProps = _ref.prependProps,
+    _appendProps = _ref.appendProps,
+    _textProps = _ref.textProps,
+    _tooltipProps = _ref.tooltipProps,
+    checked = _ref.checked,
+    isDisabled = _ref.isDisabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
+    isFocused = _ref.isFocused,
+    isSelected = _ref.isSelected,
+    _ref$isSingleSelectio = _ref.isSingleSelection,
+    isSingleSelection = _ref$isSingleSelectio === void 0 ? true : _ref$isSingleSelectio,
+    _selectionMode = _ref.selectionMode,
+    _ref$showIndicator = _ref.showIndicator,
+    showIndicator = _ref$showIndicator === void 0 ? true : _ref$showIndicator,
+    _ref$textWrap = _ref.textWrap,
+    textWrap = _ref$textWrap === void 0 ? 'truncate' : _ref$textWrap,
+    external = _ref.external,
+    _ariaDescribedBy = _ref['aria-describedby'],
+    _ariaSelected = _ref['aria-selected'],
+    _ariaChecked = _ref['aria-checked'],
+    _ref$dataTestSubj = _ref['data-test-subj'],
+    dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiListItemLayout' : _ref$dataTestSubj,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipRef = _useState2[0],
+    setTooltipRef = _useState2[1]; // Needs to be state and not a ref to trigger useEffect
+  var _useState3 = useState(_ariaDescribedBy),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ariaDescribedBy = _useState4[0],
+    setAriaDescribedBy = _useState4[1];
+  var _ref2 = props,
+    href = _ref2.href,
+    target = _ref2.target,
+    rel = _ref2.rel,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var component = _element === 'a' && isDisabled ? 'button' : _element;
+  var isLink = component === 'a' && !isDisabled;
+  var buttonIsDisabled = isButtonDisabled({
+    href: href,
+    isDisabled: component === 'button' && isDisabled
+  });
+  var _useEuiDisabledElemen = useEuiDisabledElement({
+      isDisabled: buttonIsDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = _objectWithoutProperties(_useEuiDisabledElemen, _excluded3);
+  var setCombinedRef = useCombinedRefs(useMemo(function () {
+    return [disabledRef, ref];
+  }, [disabledRef, ref]));
+  var hasToolTip = !!_tooltipProps;
+  var isNonInteractiveComponent = ['li', 'div'].includes(component);
+  var isInteractiveComponent = ['button', 'a'].includes(component) || ['button', 'link'].includes(role !== null && role !== void 0 ? role : '');
+  var isInteractive = isInteractiveComponent || !!onClick;
+  /* Multi-action: component is interactive (button/a) and has an additional action passed via `extraAction`,
+  which requires to not nest interactive elements. The wrapper is the outermost styled container and owns
+  hover/focus/selected styles.
+  Single-action: component (li/div) is the outermost element and owns all styles. */
+  var isMultiAction = extraAction != null && isInteractiveComponent;
+  var WrapperElement = isMultiAction ? wrapperElement !== null && wrapperElement !== void 0 ? wrapperElement : 'li' : isInteractiveComponent ? wrapperElement : undefined;
+  var hasWrapper = WrapperElement != null;
+
+  // aria-checked is intended to be used with role="checkbox" but
+  // the MDN documentation lists it as a possibility for role="option".
+  // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+  // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+  var ariaChecked = useMemo(function () {
+    if (!role) return undefined;
+    if (!ROLES_THAT_CAN_USE_ARIA_CHECKED.includes(role)) return undefined;
+    switch (checked) {
+      case 'on':
+      case 'off':
+        return true;
+      case 'mixed':
+        if (ROLES_THAT_CAN_BE_MIXED.includes(role)) {
+          return 'mixed';
+        } else {
+          return false;
+        }
+      default:
+        return _ariaChecked !== null && _ariaChecked !== void 0 ? _ariaChecked : false;
+    }
+  }, [role, checked, _ariaChecked]);
+  var defaultSelectionMode = useMemo(function () {
+    if (!isSingleSelection) {
+      return 'checked';
+    }
+    if (role && NATIVELY_CHECKABLE_ROLES.includes(role)) {
+      return 'checked';
+    }
+    return 'selected';
+  }, [isSingleSelection, role]);
+  var selectionMode = _selectionMode !== null && _selectionMode !== void 0 ? _selectionMode : defaultSelectionMode;
+  var hasAriaChecked = (selectionMode === 'checked' ? ariaChecked : undefined) !== undefined;
+  var hasAriaSelected = ROLES_THAT_CAN_USE_ARIA_SELECTED.includes(role !== null && role !== void 0 ? role : '');
+  var hasCustomAriaSelected = _ariaSelected != null;
+
+  /* Styles */
+
+  var wrapperClasses = classNames('euiListItemLayout__wrapper', _wrapperProps === null || _wrapperProps === void 0 ? void 0 : _wrapperProps.className);
+  var classes = classNames('euiListItemLayout', className);
+  var wrapperStyles = useEuiMemoizedStyles(euiListItemLayoutWrapperStyles);
+  var styles = useEuiMemoizedStyles(euiListItemLayoutStyles);
+  var interactiveStyles = [isInteractive && styles.isInteractive, isFocused && styles.isFocused, (isSingleSelection || !showIndicator) && isSelected && styles.isSelected, (isSingleSelection || !showIndicator) && isSelected && isFocused && styles.isSelectedFocused];
+  var wrapperCssStyles = [wrapperStyles.euiListItemLayout__wrapper, extraAction && wrapperStyles.hasExtraAction, !isDisabled && hasWrapper && interactiveStyles, hasWrapper && css, isDisabled && hasWrapper && styles.isDisabled];
+  var cssStyles = [styles.euiListItemLayout, hasWrapper && styles.euiListItemLayout__action, !isDisabled && !hasWrapper && interactiveStyles, !hasWrapper && css, isDisabled && styles.isDisabled, hasAriaDisabled && buttonIsDisabled && hasToolTip && styles.buttonIsDisabled];
+
+  // Manually trigger the tooltip on keyboard focus
+  useEffect(function () {
+    if (!tooltipRef || isFocused == null || !hasAriaDisabled && isDisabled) {
+      return;
+    }
+    if (isFocused) {
+      tooltipRef.showToolTip();
+    } else {
+      tooltipRef.hideToolTip();
+    }
+  }, [isFocused, isDisabled, hasAriaDisabled, tooltipRef]);
+
+  /* Props */
+
+  // Manually set the `aria-describedby` id on the wrapper
+  useEffect(function () {
+    if (tooltipRef) {
+      var tooltipId = tooltipRef.id;
+      setAriaDescribedBy(classNames(tooltipId, _ariaDescribedBy));
+    }
+  }, [tooltipRef, _ariaDescribedBy]);
+  var contentProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _contentProps), {}, {
+      css: [styles.euiListItemLayout__content, _contentProps === null || _contentProps === void 0 ? void 0 : _contentProps.css],
+      className: classNames('euiListItemLayout__content', _contentProps === null || _contentProps === void 0 ? void 0 : _contentProps.className)
+    });
+  }, [_contentProps, styles]);
+  var textProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _textProps), {}, {
+      css: [styles.euiListItemLayout__text, styles.textWrap[textWrap], _textProps === null || _textProps === void 0 ? void 0 : _textProps.css],
+      className: classNames('euiListItemLayout__text', _textProps === null || _textProps === void 0 ? void 0 : _textProps.className)
+    });
+  }, [_textProps, textWrap, styles]);
+
+  /**
+   * ARIA selection attribute appliance:
+   * - multi-selection + checkable role -> `aria-checked`
+   * - multi-selection + non-checkable, selectable role -> `aria-selected`
+   * - multi-selection + non-checkable, non-selectable role -> `aria-current`
+   * - single-selection + checkable role -> `aria-checked`
+   * - single-selection + non-checkable, selectable role -> `aria-selected`
+   * - single-selection + non-checkable, non-selectable role -> `aria-current`
+   */
+
+  // added to selection list items only (`component=li/div`)
+  var selectionProps = isNonInteractiveComponent && !isInteractiveComponent ? {
+    role: role,
+    'aria-checked': hasAriaChecked ? ariaChecked : undefined,
+    'aria-selected': !hasAriaChecked && hasAriaSelected ? isSelected : undefined,
+    'aria-current': !hasAriaChecked && !hasAriaSelected && isSelected ? 'true' : undefined
+  } : {};
+
+  // added to navigational list items only (`component=button/a`)
+  var navigationalProps = isInteractiveComponent ? {
+    /* supports aria-checked as custom `role` can enable checked states */
+    'aria-checked': hasAriaChecked ? ariaChecked : undefined,
+    'aria-current': !hasAriaChecked && !hasCustomAriaSelected && isSelected ? 'true' : undefined,
+    // indicates currently active navigation item
+    /* allow manual `aria-selected` overrides; By default a list of navigational elements likely uses `aria-current` but using
+    a button with appropriate `role` within a selection list could still be valid, though weird (e.g. custom EuiSuperSelect) */
+    'aria-selected': !hasAriaChecked && hasCustomAriaSelected ? isSelected : undefined // indicates current selected item
+  } : {};
+  var linkProps = ['a'].includes(component) && !isDisabled ? {
+    href: href,
+    target: target,
+    rel: rel
+  } : {};
+  var disabledProps = isDisabled ? buttonIsDisabled ? disabledButtonProps : {
+    disabled: component === 'button' ? isDisabled : undefined,
+    'aria-disabled': component !== 'button' ? isDisabled : undefined
+  } : {};
+  var wrapperProps = _objectSpread(_objectSpread({
+    'data-test-subj': "".concat(dataTestSubj, "-wrapper")
+  }, _wrapperProps), {}, {
+    className: wrapperClasses,
+    css: [wrapperCssStyles, _wrapperProps === null || _wrapperProps === void 0 ? void 0 : _wrapperProps.css]
+  });
+  var tooltipProps = _objectSpread(_objectSpread({}, _tooltipProps), {}, {
+    anchorProps: _objectSpread(_objectSpread({}, _tooltipProps === null || _tooltipProps === void 0 ? void 0 : _tooltipProps.anchorProps), {}, {
+      css: [isDisabled && styles.tooltip.isDisabled, _tooltipProps === null || _tooltipProps === void 0 || (_tooltipProps$anchorP = _tooltipProps.anchorProps) === null || _tooltipProps$anchorP === void 0 ? void 0 : _tooltipProps$anchorP.css]
+    })
+  });
+  var hasInternalTooltip = isNonInteractiveComponent && hasToolTip;
+  var elementProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: setCombinedRef,
+    role: role,
+    className: classes,
+    css: cssStyles
+  }, selectionProps), navigationalProps), linkProps), disabledProps), {}, _defineProperty(_defineProperty(_defineProperty({}, 'aria-describedby', hasInternalTooltip ? ariaDescribedBy : _ariaDescribedBy), 'data-test-subj', dataTestSubj), "onClick", onClick), rest);
+
+  /* Render nodes */
+
+  var indicator = useMemo(function () {
+    if (showIndicator) {
+      if (!isSingleSelection) {
+        return ___EmotionJSX(EuiCheckboxControl, {
+          className: "euiListItemLayout__checkbox",
+          checked: checked === 'on',
+          disabled: isDisabled,
+          indeterminate: checked === 'mixed',
+          excluded: checked === 'off'
+        });
+      }
+      var _resolveIconAndColor = resolveIconAndColor(checked, isSelected, isDisabled),
+        icon = _resolveIconAndColor.icon,
+        color = _resolveIconAndColor.color;
+      return ___EmotionJSX(EuiIcon, {
+        css: styles.euiListItemLayout__icon,
+        className: "euiListItemLayout__icon",
+        color: color,
+        type: icon
+      });
+    }
+  }, [checked, isSingleSelection, showIndicator, isSelected, isDisabled, styles]);
+  var prepend = useMemo(function () {
+    if (_prepend) {
+      var prependProps = _objectSpread(_objectSpread({}, _prependProps), {}, {
+        css: [styles.euiListItemLayout__prepend, _prependProps === null || _prependProps === void 0 ? void 0 : _prependProps.css],
+        className: classNames('euiListItemLayout__prepend', _prependProps === null || _prependProps === void 0 ? void 0 : _prependProps.className)
+      });
+      return ___EmotionJSX("span", prependProps, _prepend);
+    }
+  }, [_prepend, _prependProps, styles]);
+  var append = useMemo(function () {
+    if (_append) {
+      var appendProps = _objectSpread(_objectSpread({}, _appendProps), {}, {
+        css: [styles.euiListItemLayout__append, _appendProps === null || _appendProps === void 0 ? void 0 : _appendProps.css],
+        className: classNames('euiListItemLayout__append', _appendProps === null || _appendProps === void 0 ? void 0 : _appendProps.className)
+      });
+      return ___EmotionJSX("span", appendProps, _append);
+    }
+  }, [_append, _appendProps, styles]);
+  var innerContent = ___EmotionJSX("span", contentProps, indicator, prepend, ___EmotionJSX("span", textProps, _children, isLink && ___EmotionJSX(EuiExternalLinkIcon, {
+    css: styles.externalIcon,
+    external: external,
+    target: target,
+    size: "m"
+  })), append, !isMultiAction && extraAction);
+  /* for non interactive elements, specifically semantic li we need to
+  ensure that the li is the outer element to be a valid child of a wrapping ul */
+  var content = hasInternalTooltip ? ___EmotionJSX(EuiToolTip, _extends({
+    ref: setTooltipRef,
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content,
+    anchorClassName: "eui-fullWidth"
+  }, tooltipProps), innerContent) : innerContent;
+
+  /* Uses `createElement` to side step having to specify element types. Since this is an
+  internal-only component and we're specifying separate types for each element, we can safely
+  assume the right props are passed at this point.
+  It uses the import from @emotion/react to ensure the `css` props works as in JSX. */
+  var innerElement = createElement(component, elementProps, content);
+  var element = !isNonInteractiveComponent && hasToolTip ? ___EmotionJSX(EuiToolTip, _extends({
+    ref: setTooltipRef,
+    content: tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content,
+    anchorClassName: "eui-fullWidth"
+  }, tooltipProps), innerElement) : innerElement;
+  return WrapperElement ? ___EmotionJSX(WrapperElement, wrapperProps, element, isMultiAction && extraAction) : element;
+});
+EuiListItemLayout.displayName = 'EuiListItemLayout';
+
+/* Internal helpers */
+
+function resolveIconAndColor(checked, isSelected, isDisabled) {
+  switch (checked) {
+    case 'on':
+      return {
+        icon: 'check',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text'
+      };
+    case 'off':
+      return {
+        icon: 'cross',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text'
+      };
+    case 'mixed':
+      return {
+        icon: 'minus',
+        color: isDisabled ? 'subdued' : isSelected ? 'primary' : 'text'
+      };
+    case undefined:
+    default:
+      return {
+        icon: 'empty',
+        color: isDisabled ? 'subdued' : 'text'
+      };
+  }
+}

package/optimize/es/components/list_item_layout/_list_item_layout.styles.js

@@ -0,0 +1,93 @@
+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 { mathWithUnits } from '@elastic/eui-theme-common';
+import { euiFontSize, euiTextTruncate, highContrastModeStyles, logicalCSS } from '../../global_styling';
+export var euiListItemVariables = function euiListItemVariables(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  var spacing = {
+    horizontal: euiTheme.size.s,
+    vertical: euiTheme.size.xs
+  };
+  var textPadding = {
+    horizontal: euiTheme.size.xs,
+    vertical: mathWithUnits([spacing.vertical, euiTheme.size.xxs], function (x, y) {
+      return x + y;
+    })
+  };
+  return {
+    spacing: spacing,
+    textPadding: textPadding
+  };
+};
+var listItemCommonStyles = function listItemCommonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */\n    align-items: center;\n    ".concat(logicalCSS('width', '100%'), "\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n    line-height: ").concat(euiFontSize(euiThemeContext, 's').lineHeight, ";\n    font-size: ").concat(euiFontSize(euiThemeContext, 's').fontSize, ";\n    color: ").concat(euiTheme.colors.textParagraph, ";\n    overflow: hidden;\n  ");
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;"
+} : {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "2nxums-buttonIsDisabled",
+  styles: "&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:buttonIsDisabled;"
+} : {
+  name: "2nxums-buttonIsDisabled",
+  styles: "&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:buttonIsDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiListItemLayoutStyles = function euiListItemLayoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiListItemVariables = euiListItemVariables(euiThemeContext),
+    spacing = _euiListItemVariables.spacing,
+    textPadding = _euiListItemVariables.textPadding;
+
+  // uses `aria-disabled` only as not all variants can have a native `:disabled` state
+  var notDisabledSelector = "&:not([aria-disabled=\"true\"])";
+  var sharedFlexStyles = "\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  ";
+  var highlightedStyles = "\n    ".concat(notDisabledSelector, " {\n      background-color: ").concat(euiTheme.colors.backgroundBaseInteractiveHover, ";\n\n      ").concat(highContrastModeStyles(euiThemeContext, {
+    preferred: "\n          text-decoration: underline;\n        "
+  }), "\n    }\n  ");
+  return {
+    euiListItemLayout: /*#__PURE__*/css(listItemCommonStyles(euiThemeContext), " ", logicalCSS('padding-horizontal', spacing.horizontal), ";;label:euiListItemLayout;"),
+    euiListItemLayout__action: /*#__PURE__*/css("display:flex;flex-grow:1;", logicalCSS('width', '100%'), " color:inherit;overflow:hidden;;label:euiListItemLayout__action;"),
+    euiListItemLayout__content: /*#__PURE__*/css(logicalCSS('width', '100%'), " display:flex;align-items:center;gap:", spacing.horizontal, ";;label:euiListItemLayout__content;"),
+    euiListItemLayout__text: /*#__PURE__*/css("flex-grow:1;", logicalCSS('padding-vertical', textPadding.vertical), " ", euiFontSize(euiThemeContext, 's'), " text-align:start;>*:only-child,>*:first-child{vertical-align:middle;}>*+*{", logicalCSS('margin-top', euiTheme.size.xxs), ";};label:euiListItemLayout__text;"),
+    textWrap: {
+      truncate: /*#__PURE__*/css(euiTextTruncate(), ";label:truncate;"),
+      wrap: /*#__PURE__*/css(";label:wrap;")
+    },
+    euiListItemLayout__prepend: /*#__PURE__*/css(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__prepend;"),
+    euiListItemLayout__append: /*#__PURE__*/css(sharedFlexStyles, " gap:", spacing.horizontal, ";;label:euiListItemLayout__append;"),
+    euiListItemLayout__icon: /*#__PURE__*/css(sharedFlexStyles, ";;label:euiListItemLayout__icon;"),
+    isInteractive: /*#__PURE__*/css("cursor:pointer;&:hover{", highlightedStyles, ";};label:isInteractive;"),
+    isDisabled: /*#__PURE__*/css("color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;background-color:transparent;;label:isDisabled;"),
+    buttonIsDisabled: _ref2,
+    isFocused: /*#__PURE__*/css(highlightedStyles, ";;label:isFocused;"),
+    isSelected: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", notDisabledSelector, "{&:hover{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";}}.euiIcon,.euiButtonIcon{color:inherit;}.euiListItemLayout__prepend,.euiListItemLayout__append{.euiIcon{color:", euiTheme.colors.textPrimary, ";}};label:isSelected;"),
+    isSelectedFocused: /*#__PURE__*/css(notDisabledSelector, "{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";};label:isSelectedFocused;"),
+    tooltip: {
+      isDisabled: _ref
+    },
+    externalIcon: /*#__PURE__*/css("color:", euiTheme.colors.textDisabled, ";;label:externalIcon;")
+  };
+};
+export var euiListItemLayoutWrapperStyles = function euiListItemLayoutWrapperStyles(euiThemeContext) {
+  var _euiListItemVariables2 = euiListItemVariables(euiThemeContext),
+    spacing = _euiListItemVariables2.spacing;
+  return {
+    euiListItemLayout__wrapper: /*#__PURE__*/css(listItemCommonStyles(euiThemeContext), "flex-shrink:0;list-style:none;;label:euiListItemLayout__wrapper;"),
+    hasExtraAction: /*#__PURE__*/css(logicalCSS('padding-right', spacing.horizontal), ";;label:hasExtraAction;")
+  };
+};

package/optimize/es/components/list_item_layout/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiListItemLayout } from './_list_item_layout';

package/optimize/es/components/search_bar/filters/field_value_selection_filter.js

@@ -350,7 +350,8 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
           noMatchesMessage: config.noOptionsMessage,
           listProps: {
             isVirtualized: isOverSearchThreshold || false,
-            autoFocus: true
+            autoFocus: true,
+            paddingSize: 's'
           },
           onChange: function onChange(options, event, changedOption) {
             if (changedOption.data) {