@elastic/eui 114.3.0 → 116.0.0

package/test-env/components/tool_tip/tool_tip_popover.js

@@ -32,23 +32,23 @@ var EuiToolTipPopover = exports.EuiToolTipPopover = function EuiToolTipPopover(_
     popoverRef = _ref.popoverRef,
     calculatedPosition = _ref.calculatedPosition,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var popover = (0, _react.useRef)();
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _tool_tip.euiToolTipStyles)(euiTheme);
+  var popover = (0, _react.useRef)(null);
+  var styles = (0, _services.useEuiMemoizedStyles)(_tool_tip.euiToolTipStyles);
   var cssStyles = [styles.euiToolTip, calculatedPosition && styles[calculatedPosition]];
   var updateDimensions = (0, _react.useCallback)(function () {
     requestAnimationFrame(function () {
-      // Because of this delay, sometimes `positionToolTip` becomes unavailable.
+      // Because of this delay, the popover may have unmounted by the time the RAF fires.
       if (popover.current) {
         positionToolTip();
       }
     });
   }, [positionToolTip]);
-  var setPopoverRef = function setPopoverRef(ref) {
+  var setPopoverRef = (0, _react.useCallback)(function (ref) {
+    popover.current = ref;
     if (popoverRef) {
       popoverRef(ref);
     }
-  };
+  }, [popoverRef]);
   (0, _react.useEffect)(function () {
     document.body.classList.add('euiBody-hasPortalContent');
     window.addEventListener('resize', updateDimensions);

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/test-env/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.showEuiComboBoxOptions = void 0;
+exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.simulateFocusVisible = exports.showEuiComboBoxOptions = exports.focusEuiToolTipTrigger = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 require("@testing-library/jest-dom");
@@ -69,81 +69,59 @@ var waitForEuiPopoverClose = exports.waitForEuiPopoverClose = /*#__PURE__*/funct
 }();
 
 /**
- * Ensure the EuiToolTip being tested is open and visible before continuing
+ * jsdom does not track keyboard vs. mouse input modality, so `:focus-visible`
+ * always returns false. Call this before `fireEvent.focus()` on an element that
+ * should be treated as keyboard-focused.
+ *
+ * Returns a cleanup function, call it after test assertions to restore the spy.
  */
-var waitForEuiToolTipVisible = exports.waitForEuiToolTipVisible = /*#__PURE__*/function () {
-  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _context3.next = 2;
-          return (0, _react.waitFor)(function () {
-            var tooltip = document.querySelector('.euiToolTipPopover');
-            expect(tooltip).toBeVisible();
-          }, {
-            timeout: 3000
-          } // Account for long delay on tooltips
-          );
-        case 2:
-          return _context3.abrupt("return", _context3.sent);
-        case 3:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  }));
-  return function waitForEuiToolTipVisible() {
-    return _ref3.apply(this, arguments);
+var simulateFocusVisible = exports.simulateFocusVisible = function simulateFocusVisible(element) {
+  var originalMatches = Element.prototype.matches.bind(element);
+  var spy = jest.spyOn(element, 'matches').mockImplementation(function (selector) {
+    return selector === ':focus-visible' ? true : originalMatches(selector);
+  });
+  return function () {
+    return spy.mockRestore();
   };
-}();
-var waitForEuiToolTipHidden = exports.waitForEuiToolTipHidden = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-    return _regenerator.default.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _context4.next = 2;
-          return (0, _react.waitFor)(function () {
-            var tooltip = document.querySelector('.euiToolTipPopover');
-            expect(tooltip).toBeNull();
-          });
-        case 2:
-          return _context4.abrupt("return", _context4.sent);
-        case 3:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return function waitForEuiToolTipHidden() {
-    return _ref4.apply(this, arguments);
-  };
-}();
+};
+
+/**
+ * Prefer this over `fireEvent.focus()` in tooltip tests. Plain `fireEvent.focus`
+ * does not set `:focus-visible` in jsdom and will not trigger the tooltip.
+ *
+ * Returns a cleanup function to restore the mock after assertions.
+ */
+var focusEuiToolTipTrigger = exports.focusEuiToolTipTrigger = function focusEuiToolTipTrigger(element) {
+  var cleanup = simulateFocusVisible(element);
+  _react.fireEvent.focus(element);
+  return cleanup;
+};
 
 /**
  * EuiComboBox
  */
 
 var showEuiComboBoxOptions = exports.showEuiComboBoxOptions = /*#__PURE__*/function () {
-  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-    return _regenerator.default.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _react.fireEvent.click(_custom_render.screen.getByTestSubject('comboBoxToggleListButton'));
-          _context5.next = 3;
+          _context3.next = 3;
           return waitForEuiPopoverOpen();
         case 3:
-          _context5.next = 5;
+          _context3.next = 5;
           return (0, _react.waitFor)(function () {
             expect(_custom_render.screen.getByRole('listbox')).toBeInTheDocument();
           });
         case 5:
         case "end":
-          return _context5.stop();
+          return _context3.stop();
       }
-    }, _callee5);
+    }, _callee3);
   }));
   return function showEuiComboBoxOptions() {
-    return _ref5.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 
@@ -152,16 +130,16 @@ var showEuiComboBoxOptions = exports.showEuiComboBoxOptions = /*#__PURE__*/funct
  */
 
 var waitForEuiContextMenuPanelTransition = exports.waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
-  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
     var getPanels;
-    return _regenerator.default.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
           // Used document instead of container or screen due to context menus living in portals
           getPanels = function getPanels() {
             return document.querySelectorAll('.euiContextMenuPanel');
           }; // 2 panels will appear for the transition animation
-          _context6.next = 3;
+          _context4.next = 3;
           return (0, _react.waitFor)(function () {
             expect(getPanels().length).toEqual(2);
           });
@@ -176,11 +154,11 @@ var waitForEuiContextMenuPanelTransition = exports.waitForEuiContextMenuPanelTra
           expect(getPanels().length).toEqual(1);
         case 6:
         case "end":
-          return _context6.stop();
+          return _context4.stop();
       }
-    }, _callee6);
+    }, _callee4);
   }));
   return function waitForEuiContextMenuPanelTransition() {
-    return _ref6.apply(this, arguments);
+    return _ref4.apply(this, arguments);
   };
 }();

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;
-    }
-  };
-};

package/optimize/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/test-env/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;
-    }
-  };
-};