@elastic/eui 115.0.0 → 116.0.0

package/test-env/components/selectable/selectable_list/selectable_list_item.js

@@ -5,22 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PADDING_SIZES = exports.EuiSelectableListItem = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.EuiSelectableListItem = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _services = require("../../../services");
 var _i18n = require("../../i18n");
-var _icon = require("../../icon");
 var _accessibility = require("../../accessibility");
 var _badge = require("../../badge");
-var _tool_tip = require("../../tool_tip");
-var _selectable_list_item = require("./selectable_list_item.styles");
+var _list_item_layout = require("../../list_item_layout/_list_item_layout");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap", "toolTipContent", "toolTipProps", "aria-describedby"],
+var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "singleSelection", "onFocusBadge", "role", "searchable", "toolTipContent", "toolTipProps"],
   _excluded2 = ["children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -31,31 +28,8 @@ var _excluded = ["children", "className", "disabled", "checked", "isFocused", "s
  */
 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 resolveIconAndColor(checked) {
-  switch (checked) {
-    case 'on':
-      return {
-        icon: 'check',
-        color: 'text'
-      };
-    case 'off':
-      return {
-        icon: 'cross',
-        color: 'text'
-      };
-    case 'mixed':
-      return {
-        icon: 'minus',
-        color: 'text'
-      };
-    case undefined:
-    default:
-      return {
-        icon: 'empty'
-      };
-  }
-}
-var PADDING_SIZES = exports.PADDING_SIZES = ['none', 's'];
+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) { (0, _defineProperty2.default)(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; }
 var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectableListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -67,46 +41,19 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
     prepend = _ref.prepend,
     append = _ref.append,
     allowExclusions = _ref.allowExclusions,
+    _ref$singleSelection = _ref.singleSelection,
+    singleSelection = _ref$singleSelection === void 0 ? true : _ref$singleSelection,
     _ref$onFocusBadge = _ref.onFocusBadge,
-    onFocusBadge = _ref$onFocusBadge === void 0 ? true : _ref$onFocusBadge,
-    _ref$paddingSize = _ref.paddingSize,
-    paddingSize = _ref$paddingSize === void 0 ? 's' : _ref$paddingSize,
+    onFocusBadge = _ref$onFocusBadge === void 0 ? false : _ref$onFocusBadge,
     _ref$role = _ref.role,
     role = _ref$role === void 0 ? 'option' : _ref$role,
     searchable = _ref.searchable,
-    _ref$textWrap = _ref.textWrap,
-    textWrap = _ref$textWrap === void 0 ? 'truncate' : _ref$textWrap,
     toolTipContent = _ref.toolTipContent,
     toolTipProps = _ref.toolTipProps,
-    _ariaDescribedBy = _ref['aria-describedby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSelectableListItem', {
     'euiSelectableListItem-isFocused': isFocused
   }, className);
-  var styles = (0, _services.useEuiMemoizedStyles)(_selectable_list_item.euiSelectableListItemStyles);
-  var cssStyles = [styles.euiSelectableListItem, styles.padding[paddingSize]];
-  var textStyles = [styles.euiSelectableListItem__text, styles.textWrap[textWrap]];
-  var optionIcon = (0, _react.useMemo)(function () {
-    if (showIcons) {
-      var _resolveIconAndColor = resolveIconAndColor(checked),
-        icon = _resolveIconAndColor.icon,
-        color = _resolveIconAndColor.color;
-      return (0, _react2.jsx)(_icon.EuiIcon, {
-        css: styles.euiSelectableListItem__icon,
-        className: "euiSelectableListItem__icon",
-        color: color,
-        type: icon
-      });
-    }
-  }, [showIcons, checked, styles]);
-  var prependNode = (0, _react.useMemo)(function () {
-    if (prepend) {
-      return (0, _react2.jsx)("span", {
-        css: styles.euiSelectableListItem__prepend,
-        className: "euiSelectableListItem__prepend"
-      }, prepend);
-    }
-  }, [prepend, styles]);
   var onFocusBadgeNode = (0, _react.useMemo)(function () {
     var defaultOnFocusBadgeProps = {
       'aria-hidden': true,
@@ -127,15 +74,6 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
       }, defaultOnFocusBadgeProps, restBadgeProps), _children);
     }
   }, [onFocusBadge]);
-  var showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
-  var appendNode = (0, _react.useMemo)(function () {
-    if (append || showOnFocusBadge) {
-      return (0, _react2.jsx)("span", {
-        css: styles.euiSelectableListItem__append,
-        className: "euiSelectableListItem__append"
-      }, append, " ", showOnFocusBadge ? onFocusBadgeNode : null);
-    }
-  }, [append, showOnFocusBadge, onFocusBadgeNode, styles]);
   var screenReaderText = (0, _react.useMemo)(function () {
     var state;
     var instructions;
@@ -205,80 +143,40 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
     }
     return state || instructions ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions)) : null;
   }, [checked, searchable, allowExclusions]);
-
-  // 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 = (0, _react.useMemo)(function () {
-    var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
-    var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
-    if (!rolesThatCanBeChecked.includes(role)) return undefined;
-    switch (checked) {
-      case 'on':
-      case 'off':
-        return true;
-      case 'mixed':
-        if (rolesThatCanBeMixed.includes(role)) {
-          return 'mixed';
-        } else {
-          return false;
-        }
-      default:
-        return false;
-    }
-  }, [role, checked]);
   var hasToolTip = !!toolTipContent && !disabled;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    tooltipRef = _useState2[0],
-    setTooltipRef = _useState2[1]; // Needs to be state and not a ref to trigger useEffect
-  var _useState3 = (0, _react.useState)(_ariaDescribedBy),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    ariaDescribedBy = _useState4[0],
-    setAriaDescribedBy = _useState4[1];
-
-  // Manually trigger the tooltip on keyboard focus
-  (0, _react.useEffect)(function () {
-    if (!tooltipRef) return;
-    if (isFocused) {
-      tooltipRef.showToolTip();
-    } else {
-      tooltipRef.hideToolTip();
-    }
-  }, [isFocused, tooltipRef]);
-
-  // Manually set the `aria-describedby` id on the <li> wrapper
-  (0, _react.useEffect)(function () {
-    if (tooltipRef) {
-      var tooltipId = tooltipRef.id;
-      setAriaDescribedBy((0, _classnames.default)(tooltipId, _ariaDescribedBy));
-    }
-  }, [tooltipRef, _ariaDescribedBy]);
-  var content = (0, _react2.jsx)("span", {
-    css: styles.euiSelectableListItem__content,
-    className: "euiSelectableListItem__content"
-  }, optionIcon, prependNode, (0, _react2.jsx)("span", {
-    css: textStyles,
-    className: "euiSelectableListItem__text"
-  }, children, screenReaderText), appendNode);
-  return (0, _react2.jsx)("li", (0, _extends2.default)({
+  var showOnFocusBadge = isFocused && !disabled && !!onFocusBadgeNode;
+  var listItemLayoutProps = _objectSpread({
+    element: 'li',
     role: role,
-    "aria-disabled": disabled,
-    "aria-checked": ariaChecked // Whether the item is "checked"
-    ,
-    "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
-    ,
-    css: cssStyles,
-    className: classes
-  }, rest, {
-    "aria-describedby": ariaDescribedBy
-  }), hasToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
-    ref: setTooltipRef,
-    content: toolTipContent,
-    anchorClassName: "eui-fullWidth",
-    position: "left"
-  }, toolTipProps), content) : content);
+    className: classes,
+    checked: checked,
+    isDisabled: disabled,
+    isFocused: !disabled && isFocused,
+    isSelected: checked !== undefined,
+    isSingleSelection: singleSelection,
+    selectionMode: allowExclusions || checked === 'mixed' ? 'checked' : undefined,
+    showIndicator: showIcons,
+    prepend: prepend,
+    prependProps: {
+      className: 'euiSelectableListItem__prepend'
+    },
+    append: (append || showOnFocusBadge) && (0, _react2.jsx)(_react.default.Fragment, null, append, showOnFocusBadge ? onFocusBadgeNode : null),
+    appendProps: {
+      className: 'euiSelectableListItem__append'
+    },
+    contentProps: {
+      className: 'euiSelectableListItem__content'
+    },
+    textProps: {
+      className: 'euiSelectableListItem__text'
+    },
+    tooltipProps: hasToolTip ? _objectSpread({
+      content: toolTipContent,
+      anchorClassName: 'eui-fullWidth',
+      position: 'left'
+    }, toolTipProps) : undefined
+  }, rest);
+  return (0, _react2.jsx)(_list_item_layout.EuiListItemLayout, listItemLayoutProps, children, screenReaderText);
 };
 EuiSelectableListItem.propTypes = {
   className: _propTypes.default.string,
@@ -302,6 +200,7 @@ EuiSelectableListItem.propTypes = {
   prepend: _propTypes.default.node,
   append: _propTypes.default.node,
   allowExclusions: _propTypes.default.bool,
+  singleSelection: _propTypes.default.bool,
   /**
        * When enabled by setting to either `true` or passing custom a custom badge,
        * shows a hollow badge as an append (far right) when the item is focused.
@@ -358,10 +257,6 @@ EuiSelectableListItem.propTypes = {
     target: _propTypes.default.string,
     rel: _propTypes.default.string
   }).isRequired]),
-  /**
-       * Padding for the list items.
-       */
-  paddingSize: _propTypes.default.any,
   /**
        * Whether the `EuiSelectable` instance is searchable.
        * When true, the Space key will not toggle selection, as it will type into the search box instead. Screen reader instructions will be added instructing users to use the Enter key to select items.

package/test-env/components/selectable/selectable_list/utils/get_list_item_size.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getListItemSize = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * Util to calculate (virtualized) selection list item size
+ */
+var getListItemSize = exports.getListItemSize = function getListItemSize(index, rowHeight, isGroupLabel) {
+  if (isGroupLabel && index > 0) {
+    return rowHeight + 16; // 16px = the additional 2 * 8px padding of the divider line
+  }
+  return rowHeight;
+};

package/test-env/components/selectable/selectable_search/selectable_search.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _form = require("../../form");
 var _matching_options = require("../matching_options");
 var _react2 = require("@emotion/react");
-var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className", "optionMatcher"];
+var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className", "optionMatcher", "compressed"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,6 +32,8 @@ var EuiSelectableSearch = exports.EuiSelectableSearch = function EuiSelectableSe
     listId = _ref.listId,
     className = _ref.className,
     optionMatcher = _ref.optionMatcher,
+    _ref$compressed = _ref.compressed,
+    compressed = _ref$compressed === void 0 ? true : _ref$compressed,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onChange = (0, _react.useCallback)(function (e) {
     var searchValue = e.target.value;
@@ -59,6 +61,7 @@ var EuiSelectableSearch = exports.EuiSelectableSearch = function EuiSelectableSe
     incremental: true,
     fullWidth: true,
     autoComplete: "off",
+    compressed: compressed,
     "aria-haspopup": "listbox"
   }, ariaPropsIfListIsPresent, rest));
 };

package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -207,7 +207,7 @@ var EuiSelectableTemplateSitewide = exports.EuiSelectableTemplateSitewide = func
       className: searchClasses
     }),
     listProps: _objectSpread(_objectSpread({
-      rowHeight: 68,
+      rowHeight: 52,
       showIcons: false,
       onFocusBadge: {
         iconSide: 'right',

package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.styles.js

@@ -15,14 +15,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "q12130-euiSelectableTemplateSitewide__listItem",
-  styles: "&:hover,&.euiSelectableListItem-isFocused{&:not([aria-disabled='true']){.euiSelectableListItem__text{text-decoration:none;}.euiSelectableTemplateSitewide__listItemTitle{text-decoration:underline;}}};label:euiSelectableTemplateSitewide__listItem;"
-} : {
-  name: "q12130-euiSelectableTemplateSitewide__listItem",
-  styles: "&:hover,&.euiSelectableListItem-isFocused{&:not([aria-disabled='true']){.euiSelectableListItem__text{text-decoration:none;}.euiSelectableTemplateSitewide__listItemTitle{text-decoration:underline;}}};label:euiSelectableTemplateSitewide__listItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "rsb9r7-euiSelectableTemplateSitewide",
   styles: "display:block;label:euiSelectableTemplateSitewide;"
 } : {
@@ -34,10 +26,8 @@ var euiSelectableTemplateSitewideStyles = exports.euiSelectableTemplateSitewideS
   var euiTheme = euiThemeContext.euiTheme;
   var visColors = (0, _services.euiPaletteColorBlind)();
   return {
-    euiSelectableTemplateSitewide: _ref2,
-    // Override EuiSelectable's default item underline
-    euiSelectableTemplateSitewide__listItem: _ref,
-    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
+    euiSelectableTemplateSitewide: _ref,
+    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
     euiSelectableTemplateSitewide__optionMeta: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type)::after{content:'\u2022';", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), " color:", euiTheme.colors.textSubdued, ";};label:euiSelectableTemplateSitewide__optionMeta;"),
     metaTypes: {
       fontWeight: "\n        font-weight: ".concat(euiTheme.font.weight.medium, ";\n      "),

package/test-env/components/selectable/selectable_templates/selectable_template_sitewide_option.js

@@ -43,7 +43,7 @@ var euiSelectableTemplateSitewideFormatOptions = exports.euiSelectableTemplateSi
       key: item.label,
       title: title
     }, item), {}, {
-      css: [styles.euiSelectableTemplateSitewide__listItem, item.css],
+      css: item.css,
       className: (0, _classnames.default)('euiSelectableTemplateSitewide__listItem', item.className),
       prepend: item.icon ? (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
         color: "subdued",

package/test-env/components/selectable/selectable_templates/selectable_template_sitewide_popover.js

@@ -35,7 +35,7 @@ var EuiSelectableTemplateSitewidePopover = exports.EuiSelectableTemplateSitewide
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_selectable_template_sitewide.euiSelectableTemplateSitewidePopoverStyles);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
-    panelPaddingSize: "none",
+    panelPaddingSize: "s",
     anchorPosition: "downCenter",
     isOpen: isOpen,
     ownFocus: !!trigger,

package/test-env/global_styling/mixins/_helpers.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowShadowStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _theme = require("../../services/theme");
 var _color = require("../../services/color");
 var _functions = require("../functions");
@@ -52,11 +53,15 @@ var useEuiScrollBar = exports.useEuiScrollBar = function useEuiScrollBar(options
  * Overflow shadow masks for use in YScroll and XScroll helpers
  */
 
-var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
-  var size = _ref3.euiTheme.size;
+var euiOverflowShadowStyles = exports.euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
+  var _ref3$euiTheme = _ref3.euiTheme,
+    size = _ref3$euiTheme.size,
+    colors = _ref3$euiTheme.colors;
   var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _direction = _ref4.direction,
-    _side = _ref4.side;
+    _side = _ref4.side,
+    _ref4$hasAnimatedOver = _ref4.hasAnimatedOverflowShadow,
+    hasAnimatedOverflowShadow = _ref4$hasAnimatedOver === void 0 ? false : _ref4$hasAnimatedOver;
   var direction = _direction || 'y';
   var side = _side || 'both';
   var hideHeight = size.s;
@@ -80,11 +85,20 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
   // - https://github.com/elastic/kibana/issues/180828
   // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
   var chromiumMaskWorkaround = 'transform: translateZ(0);';
-  if (direction === 'y') {
-    return "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
-  } else {
-    return "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
+  var overflowShadowStatic = direction === 'y' ? "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround) : "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
+
+  // If supported, use the scroll timeline API to animate the gradient to show/hide it on the scroll edges.
+  // We only support vertical scrolling as horizontal scrolling has increased complexity on element dimensions.
+  if (hasAnimatedOverflowShadow && direction === 'y') {
+    var featureFlag = 'animation-timeline: scroll()';
+    var gradientStartColor = "var(--euiOverflowShadowColor, ".concat(colors.backgroundBasePlain, ")");
+    var gradientEndColor = 'transparent';
+    var gradientSize = size.base;
+    var gradientScrollRange = size.m;
+    var commonPseudoElementStyles = "\n      content: '';\n      display: block;\n      position: sticky;\n      z-index: 1;\n      block-size: ".concat(gradientSize, ";\n      pointer-events: none;\n    ");
+    return "\n      @supports not (".concat(featureFlag, ") {\n        ").concat(overflowShadowStatic, "\n      }\n\n      ").concat(_euiThemeCommon.euiCantAnimate, " {\n        ").concat(overflowShadowStatic, "\n      }\n\n      ").concat(_euiThemeCommon.euiCanAnimate, " {\n        @supports (").concat(featureFlag, ") {\n          @keyframes show { \n            from { opacity: 0 } \n            to { opacity: 1 }\n          }\n          @keyframes hide { \n            from { opacity: 1 }\n            to { opacity: 0 }\n          }\n\n          position: relative;\n\n          /* Gradient on start edge */\n          &::before {\n            ").concat(commonPseudoElementStyles, "\n            inset-block-start: 0;\n            /* prevent pushing down the content */\n            ").concat((0, _functions.logicalCSS)('margin-bottom', "-".concat(gradientSize)), " \n            /* uses CSS custom property to support customization depending on layout wrapper background color */\n            background: linear-gradient(to bottom, ").concat(gradientStartColor, ", ").concat(gradientEndColor, ");\n            \n            opacity: 0;\n            animation: show linear both;\n            animation-timeline: scroll(y);\n            animation-range: 0px ").concat(gradientScrollRange, ";\n          }\n\n          /* Gradient on end edge */\n          &::after {\n            ").concat(commonPseudoElementStyles, "\n            inset-block-end: 0;\n            /* prevent adding extra space */\n            ").concat((0, _functions.logicalCSS)('margin-top', "-".concat(gradientSize)), " \n            background: linear-gradient(to top, ").concat(gradientStartColor, ", ").concat(gradientEndColor, ");\n\n            \n            /* NOTE: To ensure the bottom gradient is not visible when the container has no overflow,\n            we need to use opacity: 0 as default. Using two animations with 'animation-fill-mode: forwards'\n            ensures the show/hide animation works both with and without overflow. */\n            /* scroll animation */\n            opacity: 0;\n            animation-name: show, hide;\n            animation-timing-function: step-start, linear;\n            animation-fill-mode: forwards;\n            animation-timeline: scroll(y);\n            animation-range: 0% 100%, calc(100% - ").concat(gradientScrollRange, ") 100%;\n          }\n        }\n      }\n    ");
   }
+  return overflowShadowStatic;
 };
 
 /**
@@ -110,20 +124,27 @@ var euiYScrollWithShadows = exports.euiYScrollWithShadows = function euiYScrollW
   var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     height = _ref7.height,
     _ref7$side = _ref7.side,
-    side = _ref7$side === void 0 ? 'both' : _ref7$side;
+    side = _ref7$side === void 0 ? 'both' : _ref7$side,
+    _ref7$hasAnimatedOver = _ref7.hasAnimatedOverflowShadow,
+    hasAnimatedOverflowShadow = _ref7$hasAnimatedOver === void 0 ? false : _ref7$hasAnimatedOver;
   return "\n  ".concat(euiYScroll(euiTheme, {
     height: height
   }), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
     direction: 'y',
-    side: side
+    side: side,
+    hasAnimatedOverflowShadow: hasAnimatedOverflowShadow
   }), "\n");
 };
 var useEuiYScrollWithShadows = exports.useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
   var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    height = _ref8.height;
+    height = _ref8.height,
+    side = _ref8.side,
+    hasAnimatedOverflowShadow = _ref8.hasAnimatedOverflowShadow;
   var euiTheme = (0, _theme.useEuiTheme)();
   return euiYScrollWithShadows(euiTheme, {
-    height: height
+    height: height,
+    side: side,
+    hasAnimatedOverflowShadow: hasAnimatedOverflowShadow
   });
 };
 var euiXScroll = exports.euiXScroll = function euiXScroll(euiTheme) {

package/es/components/selectable/selectable_list/selectable_list_item.styles.js

@@ -1,55 +0,0 @@
-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 { euiFontSize, euiTextTruncate, logicalCSS } from '../../../global_styling';
-export var euiSelectableListItemVariables = function euiSelectableListItemVariables(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  var lighterBorder = euiTheme.components.selectableListItemBorderColor;
-  return {
-    border: "".concat(euiTheme.border.width.thin, " solid ").concat(lighterBorder),
-    paddingHorizontal: euiTheme.size.m,
-    paddingVertical: euiTheme.size.xs
-  };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;"
-} : {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiSelectableListItemStyles = function euiSelectableListItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var _euiSelectableListIte = euiSelectableListItemVariables(euiThemeContext),
-    border = _euiSelectableListIte.border,
-    paddingHorizontal = _euiSelectableListIte.paddingHorizontal,
-    paddingVertical = _euiSelectableListIte.paddingVertical;
-  return {
-    euiSelectableListItem: /*#__PURE__*/css("display:inline-flex;", logicalCSS('width', '100%'), " line-height:", euiFontSize(euiThemeContext, 'm').lineHeight, ";font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";text-align:start;cursor:pointer;overflow:hidden;&:not(:last-of-type){", logicalCSS('border-bottom', border), ";}&[aria-disabled='true']{color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;}&:hover,&.euiSelectableListItem-isFocused{&:not([aria-disabled='true']){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.focus.backgroundColor, ";.euiSelectableListItem__text{text-decoration:underline;}}};label:euiSelectableListItem;"),
-    padding: {
-      none: /*#__PURE__*/css(";label:none;"),
-      s: /*#__PURE__*/css(logicalCSS('padding-vertical', paddingVertical), " ", logicalCSS('padding-horizontal', paddingHorizontal), ";;label:s;")
-    },
-    // Child elements
-
-    euiSelectableListItem__content: /*#__PURE__*/css(logicalCSS('width', '100%'), " display:flex;align-items:center;;label:euiSelectableListItem__content;"),
-    euiSelectableListItem__text: _ref,
-    textWrap: {
-      truncate: /*#__PURE__*/css(euiTextTruncate(), ";label:truncate;"),
-      wrap: /*#__PURE__*/css(";label:wrap;")
-    },
-    euiSelectableListItem__prepend: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', paddingHorizontal), ";;label:euiSelectableListItem__prepend;"),
-    euiSelectableListItem__append: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-left', paddingHorizontal), ";;label:euiSelectableListItem__append;"),
-    get euiSelectableListItem__icon() {
-      return this.euiSelectableListItem__prepend;
-    }
-  };
-};

package/lib/components/selectable/selectable_list/selectable_list_item.styles.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.euiSelectableListItemVariables = exports.euiSelectableListItemStyles = void 0;
-var _react = require("@emotion/react");
-var _global_styling = require("../../../global_styling");
-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 euiSelectableListItemVariables = exports.euiSelectableListItemVariables = function euiSelectableListItemVariables(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  var lighterBorder = euiTheme.components.selectableListItemBorderColor;
-  return {
-    border: "".concat(euiTheme.border.width.thin, " solid ").concat(lighterBorder),
-    paddingHorizontal: euiTheme.size.m,
-    paddingVertical: euiTheme.size.xs
-  };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;"
-} : {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiSelectableListItemStyles = exports.euiSelectableListItemStyles = function euiSelectableListItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var _euiSelectableListIte = euiSelectableListItemVariables(euiThemeContext),
-    border = _euiSelectableListIte.border,
-    paddingHorizontal = _euiSelectableListIte.paddingHorizontal,
-    paddingVertical = _euiSelectableListIte.paddingVertical;
-  return {
-    euiSelectableListItem: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('width', '100%'), " line-height:", (0, _global_styling.euiFontSize)(euiThemeContext, 'm').lineHeight, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";text-align:start;cursor:pointer;overflow:hidden;&:not(:last-of-type){", (0, _global_styling.logicalCSS)('border-bottom', border), ";}&[aria-disabled='true']{color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;}&:hover,&.euiSelectableListItem-isFocused{&:not([aria-disabled='true']){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.focus.backgroundColor, ";.euiSelectableListItem__text{text-decoration:underline;}}};label:euiSelectableListItem;"),
-    padding: {
-      none: /*#__PURE__*/(0, _react.css)(";label:none;"),
-      s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-vertical', paddingVertical), " ", (0, _global_styling.logicalCSS)('padding-horizontal', paddingHorizontal), ";;label:s;")
-    },
-    // Child elements
-
-    euiSelectableListItem__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " display:flex;align-items:center;;label:euiSelectableListItem__content;"),
-    euiSelectableListItem__text: _ref,
-    textWrap: {
-      truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), ";label:truncate;"),
-      wrap: /*#__PURE__*/(0, _react.css)(";label:wrap;")
-    },
-    euiSelectableListItem__prepend: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-right', paddingHorizontal), ";;label:euiSelectableListItem__prepend;"),
-    euiSelectableListItem__append: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-left', paddingHorizontal), ";;label:euiSelectableListItem__append;"),
-    get euiSelectableListItem__icon() {
-      return this.euiSelectableListItem__prepend;
-    }
-  };
-};

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

@@ -1,55 +0,0 @@
-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 { euiFontSize, euiTextTruncate, logicalCSS } from '../../../global_styling';
-export var euiSelectableListItemVariables = function euiSelectableListItemVariables(_ref2) {
-  var euiTheme = _ref2.euiTheme;
-  var lighterBorder = euiTheme.components.selectableListItemBorderColor;
-  return {
-    border: "".concat(euiTheme.border.width.thin, " solid ").concat(lighterBorder),
-    paddingHorizontal: euiTheme.size.m,
-    paddingVertical: euiTheme.size.xs
-  };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;"
-} : {
-  name: "1rnenrt-euiSelectableListItem__text",
-  styles: "flex-grow:1;label:euiSelectableListItem__text;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiSelectableListItemStyles = function euiSelectableListItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var _euiSelectableListIte = euiSelectableListItemVariables(euiThemeContext),
-    border = _euiSelectableListIte.border,
-    paddingHorizontal = _euiSelectableListIte.paddingHorizontal,
-    paddingVertical = _euiSelectableListIte.paddingVertical;
-  return {
-    euiSelectableListItem: /*#__PURE__*/css("display:inline-flex;", logicalCSS('width', '100%'), " line-height:", euiFontSize(euiThemeContext, 'm').lineHeight, ";font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";text-align:start;cursor:pointer;overflow:hidden;&:not(:last-of-type){", logicalCSS('border-bottom', border), ";}&[aria-disabled='true']{color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;}&:hover,&.euiSelectableListItem-isFocused{&:not([aria-disabled='true']){color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.focus.backgroundColor, ";.euiSelectableListItem__text{text-decoration:underline;}}};label:euiSelectableListItem;"),
-    padding: {
-      none: /*#__PURE__*/css(";label:none;"),
-      s: /*#__PURE__*/css(logicalCSS('padding-vertical', paddingVertical), " ", logicalCSS('padding-horizontal', paddingHorizontal), ";;label:s;")
-    },
-    // Child elements
-
-    euiSelectableListItem__content: /*#__PURE__*/css(logicalCSS('width', '100%'), " display:flex;align-items:center;;label:euiSelectableListItem__content;"),
-    euiSelectableListItem__text: _ref,
-    textWrap: {
-      truncate: /*#__PURE__*/css(euiTextTruncate(), ";label:truncate;"),
-      wrap: /*#__PURE__*/css(";label:wrap;")
-    },
-    euiSelectableListItem__prepend: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-right', paddingHorizontal), ";;label:euiSelectableListItem__prepend;"),
-    euiSelectableListItem__append: /*#__PURE__*/css("flex-shrink:0;", logicalCSS('margin-left', paddingHorizontal), ";;label:euiSelectableListItem__append;"),
-    get euiSelectableListItem__icon() {
-      return this.euiSelectableListItem__prepend;
-    }
-  };
-};