@elastic/eui 89.0.0 → 90.0.0

package/optimize/lib/components/icon/icon_map.js

@@ -452,7 +452,6 @@ var typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
-  tokenDenseVector: 'tokenDenseVector',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',
@@ -495,6 +494,10 @@ var typeToPathMap = {
   tokenTag: 'tokenTag',
   tokenText: 'tokenText',
   tokenTokenCount: 'tokenTokenCount',
-  tokenVariable: 'tokenVariable'
+  tokenVariable: 'tokenVariable',
+  tokenVectorDense: 'tokenVectorDense',
+  tokenDenseVector: 'tokenVectorDense',
+  // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  tokenVectorSparse: 'tokenVectorSparse'
 };
 exports.typeToPathMap = typeToPathMap;

package/optimize/lib/components/icon/svgs/tokens/tokenVectorDense.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"/>
+  <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>

package/optimize/lib/components/icon/svgs/tokens/tokenVectorSparse.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>

package/optimize/lib/components/list_group/list_group_item.js

@@ -20,7 +20,7 @@ var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -48,6 +48,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     rel = _ref.rel,
     className = _ref.className,
     customCss = _ref.css,
+    style = _ref.style,
     iconType = _ref.iconType,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
@@ -173,7 +174,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     });
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
@@ -185,7 +187,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
   } else {
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, itemContent, extraActionNode);
   }
   return (0, _react2.jsx)(_react.Fragment, null, itemContent);

package/optimize/lib/components/list_group/list_group_item_extra_action.styles.js

@@ -32,7 +32,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };

package/optimize/lib/components/page/index.js

@@ -15,30 +15,6 @@ Object.defineProperty(exports, "EuiPageBody", {
     return _page_body.EuiPageBody;
   }
 });
-Object.defineProperty(exports, "EuiPageContentBody_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentBody_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeaderSection_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeaderSection_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeader_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeader_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContent_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContent_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageHeader", {
   enumerable: true,
   get: function get() {
@@ -63,29 +39,14 @@ Object.defineProperty(exports, "EuiPageSection", {
     return _page_section.EuiPageSection;
   }
 });
-Object.defineProperty(exports, "EuiPageSideBar_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_side_bar.EuiPageSideBar_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageSidebar", {
   enumerable: true,
   get: function get() {
     return _page_sidebar.EuiPageSidebar;
   }
 });
-Object.defineProperty(exports, "EuiPageTemplate_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_template.EuiPageTemplate_Deprecated;
-  }
-});
 var _page = require("./page");
 var _page_body = require("./page_body");
-var _page_content = require("./page_content");
 var _page_header = require("./page_header");
 var _page_section = require("./page_section");
-var _page_side_bar = require("./page_side_bar");
-var _page_sidebar = require("./page_sidebar");
-var _page_template = require("./page_template");
+var _page_sidebar = require("./page_sidebar");

package/optimize/lib/components/popover/input_popover.js

@@ -20,7 +20,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
 var _popover = require("./popover");
-var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -40,8 +40,20 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$anchorPosition = _ref.anchorPosition,
+    anchorPosition = _ref$anchorPosition === void 0 ? 'downLeft' : _ref$anchorPosition,
+    _ref$attachToAnchor = _ref.attachToAnchor,
+    attachToAnchor = _ref$attachToAnchor === void 0 ? true : _ref$attachToAnchor,
+    _ref$repositionToCros = _ref.repositionToCrossAxis,
+    repositionToCrossAxis = _ref$repositionToCros === void 0 ? false : _ref$repositionToCros,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$panelPaddingSize = _ref.panelPaddingSize,
+    panelPaddingSize = _ref$panelPaddingSize === void 0 ? 's' : _ref$panelPaddingSize,
     _ref$closeOnScroll = _ref.closeOnScroll,
     closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? false : _ref$ownFocus,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -84,6 +96,11 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var panelWidth = (0, _react.useMemo)(function () {
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
+
+  // Resize callback
+  (0, _react.useEffect)(function () {
+    onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(panelWidth);
+  }, [panelWidth, onPanelResize]);
   (0, _react.useEffect)(function () {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
@@ -157,15 +174,19 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    className: classes,
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
-    repositionToCrossAxis: false,
-    ownFocus: false,
+    display: display,
     button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes,
     ref: popoverClassRef,
-    closePopover: closePopover
+    closePopover: closePopover,
+    anchorPosition: anchorPosition,
+    attachToAnchor: attachToAnchor,
+    repositionToCrossAxis: repositionToCrossAxis,
+    panelPaddingSize: panelPaddingSize,
+    ownFocus: ownFocus
   }, props, {
     panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
       onKeyDown: onKeyDown
@@ -177,10 +198,4 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     value: panelWidth
   }, children)));
 };
-exports.EuiInputPopover = EuiInputPopover;
-EuiInputPopover.defaultProps = {
-  anchorPosition: 'downLeft',
-  attachToAnchor: true,
-  display: 'block',
-  panelPaddingSize: 's'
-};
+exports.EuiInputPopover = EuiInputPopover;

package/optimize/lib/components/provider/provider.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _css = require("@emotion/css");
-var _global_styles = require("../../global_styling/reset/global_styles");
-var _utility = require("../../global_styling/utility/utility");
 var _services = require("../../services");
 var _warning = require("../../services/theme/warning");
+var _css = require("../../services/emotion/css");
+var _global_styles = require("../../global_styling/reset/global_styles");
+var _utility = require("../../global_styling/utility/utility");
 var _themes = require("../../themes");
 var _cache = require("./cache");
 var _nested = require("./nested");

package/optimize/lib/components/tabs/tab.js

@@ -87,7 +87,7 @@ var EuiTab = function EuiTab(_ref) {
     css: cssTabStyles,
     disabled: disabled
   }, rest), prependNode, (0, _react2.jsx)("span", {
-    className: "euiTab__content",
+    className: "euiTab__content eui-textTruncate",
     css: cssTabContentStyles
   }, children), appendNode);
 };

package/optimize/lib/components/token/token_map.js

@@ -55,10 +55,6 @@ var TOKEN_MAP = {
     shape: 'square',
     color: 'euiColorVis6'
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3'
@@ -230,6 +226,18 @@ var TOKEN_MAP = {
   tokenVariable: {
     shape: 'circle',
     color: 'euiColorVis7'
+  },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1'
   }
 };
 exports.TOKEN_MAP = TOKEN_MAP;

package/optimize/lib/services/emotion/css.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cx = exports.css = exports.cache = void 0;
+var _createInstance = _interopRequireDefault(require("@emotion/css/create-instance"));
+var _prefixer = require("./prefixer");
+/*
+ * 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.
+ */
+
+/**
+ * This custom instance is needed for internal EUI components to call
+ * `@emotion/css` with EUI's custom prefixer plugin
+ * @see https://emotion.sh/docs/@emotion/css#custom-instances
+ *
+ * NOTE: Usage is currently being beta tested internally,
+ * and is not yet intended to be a public export
+ */
+var _createEmotion = (0, _createInstance.default)({
+    key: 'css',
+    stylisPlugins: [_prefixer.euiStylisPrefixer],
+    speedy: false
+  }),
+  css = _createEmotion.css,
+  cx = _createEmotion.cx,
+  cache = _createEmotion.cache;
+exports.cache = cache;
+exports.cx = cx;
+exports.css = css;

package/optimize/lib/services/emotion/index.js

@@ -13,4 +13,15 @@ Object.keys(_clone_element).forEach(function (key) {
       return _clone_element[key];
     }
   });
+});
+var _prefixer = require("./prefixer");
+Object.keys(_prefixer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _prefixer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _prefixer[key];
+    }
+  });
 });

package/optimize/lib/services/emotion/prefixer.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStylisPrefixer = void 0;
+var _stylis = require("stylis");
+/*
+ * 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.
+ */
+
+// This is a heavily modified version of Emotion's default `prefixer` plugin
+// (mostly removing unnecessary prefixes), which is in turn a modified version
+// of stylis's default prefixer.
+// @see https://github.com/emotion-js/emotion/blob/main/packages/cache/src/prefixer.js
+/* eslint-disable prefer-template */
+
+/**
+ * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
+ *
+ * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
+ * @see https://www.elastic.co/support/matrix#matrix_browsers
+ */
+var euiStylisPrefixer = function euiStylisPrefixer(element) {
+  if (element.length > -1) if (!element.return) switch (element.type) {
+    case _stylis.DECLARATION:
+      element.return = prefix(element.value, element.length);
+      break;
+  }
+};
+exports.euiStylisPrefixer = euiStylisPrefixer;
+var prefix = function prefix(value, length) {
+  switch ((0, _stylis.hash)(value, length)) {
+    /**
+     * `-webkit` prefixes
+     */
+    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
+    case 4246:
+    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+    case 5572:
+    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+    case 2756:
+    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+    case 2282:
+      return _stylis.WEBKIT + value + value;
+
+    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    case 4215:
+      if (~(0, _stylis.indexof)(value, 'text')) {
+        return _stylis.WEBKIT + value + value;
+      }
+
+    /**
+     * Intrinsic/extrinsic sizing value prefixes
+     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     */
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if ((0, _stylis.strlen)(value) - 1 - length > 6) switch ((0, _stylis.charat)(value, length + 1)) {
+        // (f)ill-available
+        case 102:
+          if (~(0, _stylis.indexof)(value, 'fill-available')) {
+            return (0, _stylis.replace)(value, /(.+:)(.+)-([^]+)/, '$1' + _stylis.WEBKIT + '$2-$3' + '$1' + _stylis.MOZ + ((0, _stylis.charat)(value, length + 3) === 108 ? '$3' : '$2-$3'));
+          }
+        // (s)tretch
+        case 115:
+          if (~(0, _stylis.indexof)(value, 'stretch')) {
+            return prefix((0, _stylis.replace)(value, 'stretch', 'fill-available'), length) + value;
+          }
+      }
+      break;
+  }
+  return value;
+};

package/optimize/lib/services/theme/provider.js

@@ -8,18 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiThemeProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _css2 = require("@emotion/css");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _emotion = require("../emotion");
+var _css2 = require("../emotion/css");
 var _context = require("./context");
 var _emotion2 = require("./emotion");
 var _utils = require("./utils");
 var _excluded = ["cloneElement", "className"];
+var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -110,13 +111,13 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       // The theme that determines the global body styles
       bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
       hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
-      colorClassName: /*#__PURE__*/(0, _css2.css)("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;"),
+      colorClassName: (0, _css2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        label: euiColorMode-", ";\n        color: ", ";\n      "])), _colorMode || colorMode, theme.colors.text),
       setGlobalCSSVariables: isGlobalTheme ? setThemeCSSVariables : setGlobalCSSVariables,
       globalCSSVariables: isGlobalTheme ? themeCSSVariables : globalCSSVariables,
       setNearestThemeCSSVariables: setThemeCSSVariables,
       themeCSSVariables: themeCSSVariables
     };
-  }, [theme, isGlobalTheme, bodyColor, _colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
+  }, [theme, isGlobalTheme, bodyColor, _colorMode, colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
   var renderedChildren = (0, _react2.useMemo)(function () {
     if (isGlobalTheme) {
       return children; // No wrapper
@@ -127,7 +128,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       className = _ref2.className,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     var props = _objectSpread(_objectSpread({}, rest), {}, {
-      className: (0, _classnames.default)(className, nestedThemeContext.colorClassName)
+      className: (0, _css2.cx)(className, nestedThemeContext.colorClassName)
     });
     // Condition avoids rendering an empty Emotion selector if no
     // theme-specific CSS variables have been set by child components
@@ -138,11 +139,11 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }
     if (cloneElement) {
       return (0, _emotion.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
-        className: (0, _classnames.default)(children.props.className, props.className)
+        className: (0, _css2.cx)(children.props.className, props.className)
       }));
     } else {
       return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
-        className: (0, _classnames.default)('euiThemeProvider', props.className)
+        className: (0, _css2.cx)('euiThemeProvider', props.className)
       }), children);
     }
   }, [isGlobalTheme, themeCSSVariables, nestedThemeContext, wrapperProps, children]);

package/optimize/lib/services/theme/utils.js

@@ -43,7 +43,7 @@ var isInverseColorMode = function isInverseColorMode(colorMode) {
 /**
  * Returns the color mode configured in the current EuiThemeProvider.
  * Returns the parent color mode if none is explicity set.
- * @param {string} coloMode - `light`, `dark`, or `inverse`
+ * @param {string} colorMode - `light`, `dark`, or `inverse`
  * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
  */
 exports.isInverseColorMode = isInverseColorMode;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "89.0.0",
+  "version": "90.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.17.1",
+  "docker_image": "18.18.2",
   "engines": {
     "node": "16.x || 18.x || >=20.0"
   },
@@ -32,17 +32,14 @@
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "node ./scripts/test-unit",
-    "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
     "test-cypress": "node ./scripts/test-cypress",
     "test-cypress-dev": "yarn test-cypress --dev",
     "test-cypress-a11y": "yarn test-cypress --a11y",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
-    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-eui/app/component.js",
     "update-token-changelog": "node ./scripts/update-token-changelog.js",
     "update-changelog-manual": "node -e \"require('./scripts/update-changelog').manualChangelog('${npm_config_release}')\"",
-    "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "yo-changelog": "yo ./generator-eui/changelog/index.js",
     "release": "node ./scripts/release.js",
@@ -82,8 +79,8 @@
     "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "refractor": "^3.5.0",
-    "rehype-raw": "^5.0.0",
+    "refractor": "^3.6.0",
+    "rehype-raw": "^5.1.0",
     "rehype-react": "^6.2.1",
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
@@ -96,10 +93,9 @@
     "unist-util-visit": "^2.0.3",
     "url-parse": "^1.5.10",
     "uuid": "^8.3.0",
-    "vfile": "^4.2.0"
+    "vfile": "^4.2.1"
   },
   "devDependencies": {
-    "@axe-core/puppeteer": "^4.4.2",
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -145,11 +141,11 @@
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",
-    "@types/node": "^10.17.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.3",
+    "@types/stylis": "^4.2.1",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^8.3.0",
@@ -176,7 +172,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^6.7.1",
     "cssnano": "^4.1.10",
-    "cypress": "^12.17.2",
+    "cypress": "^13.3.1",
     "cypress-axe": "^1.0.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
@@ -221,7 +217,6 @@
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "prop-types": "^15.6.0",
-    "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
     "react": "^18.2.0",
     "react-16": "npm:react@^16.14.0",