@elastic/eui 90.0.0 → 91.1.0

package/optimize/lib/services/color/eui_palettes.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplimentary = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
+exports.euiPaletteWarm = exports.euiPalettePositive = exports.euiPaletteNegative = exports.euiPaletteGray = exports.euiPaletteForTemperature = exports.euiPaletteForStatus = exports.euiPaletteForLightBackground = exports.euiPaletteForDarkBackground = exports.euiPaletteCool = exports.euiPaletteComplementary = exports.euiPaletteColorBlindBehindText = exports.euiPaletteColorBlind = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
@@ -161,14 +161,7 @@ var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   }
   return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
-
-/**
- * The old typo'd name for this palette remains exported until the end of its deprecation period
- * @deprecated Use euiPaletteComplementary instead
- */
 exports.euiPaletteComplementary = euiPaletteComplementary;
-var euiPaletteComplimentary = euiPaletteComplementary;
-exports.euiPaletteComplimentary = euiPaletteComplimentary;
 var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

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

@@ -23,7 +23,6 @@ var _exportNames = {
   euiPaletteColorBlindBehindText: true,
   euiPaletteForStatus: true,
   euiPaletteForTemperature: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteNegative: true,
   euiPalettePositive: true,
@@ -80,12 +79,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _eui_palettes.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _eui_palettes.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {

package/optimize/lib/services/hooks/useCombinedRefs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCombinedRefs = void 0;
+exports.useCombinedRefs = exports.setMultipleRefs = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -22,14 +22,23 @@ var _react = require("react");
  */
 var useCombinedRefs = function useCombinedRefs(refs) {
   return (0, _react.useCallback)(function (node) {
-    return refs.forEach(function (ref) {
-      if (!ref) return;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    });
+    return setMultipleRefs(refs, node);
   }, [refs]);
 };
-exports.useCombinedRefs = useCombinedRefs;
+
+/**
+ * Non-hook util for setting multiple refs/ref types.
+ * Useful for non-functional components
+ */
+exports.useCombinedRefs = useCombinedRefs;
+var setMultipleRefs = function setMultipleRefs(refs, node) {
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
+      ref.current = node;
+    }
+  });
+};
+exports.setMultipleRefs = setMultipleRefs;

package/optimize/lib/services/index.js

@@ -27,7 +27,6 @@ var _exportNames = {
   desaturate: true,
   euiPaletteColorBlind: true,
   euiPaletteColorBlindBehindText: true,
-  euiPaletteComplimentary: true,
   euiPaletteComplementary: true,
   euiPaletteCool: true,
   euiPaletteForDarkBackground: true,
@@ -72,7 +71,6 @@ var _exportNames = {
   Pager: true,
   calculatePopoverPosition: true,
   findPopoverPosition: true,
-  Random: true,
   getSecureRelForTarget: true,
   Comparators: true,
   PropertySortType: true,
@@ -155,12 +153,6 @@ Object.defineProperty(exports, "RIGHT_ALIGNMENT", {
     return _alignment.RIGHT_ALIGNMENT;
   }
 });
-Object.defineProperty(exports, "Random", {
-  enumerable: true,
-  get: function get() {
-    return _random.Random;
-  }
-});
 Object.defineProperty(exports, "SortDirection", {
   enumerable: true,
   get: function get() {
@@ -257,12 +249,6 @@ Object.defineProperty(exports, "euiPaletteComplementary", {
     return _color.euiPaletteComplementary;
   }
 });
-Object.defineProperty(exports, "euiPaletteComplimentary", {
-  enumerable: true,
-  get: function get() {
-    return _color.euiPaletteComplimentary;
-  }
-});
 Object.defineProperty(exports, "euiPaletteCool", {
   enumerable: true,
   get: function get() {
@@ -643,7 +629,6 @@ Object.keys(_hooks).forEach(function (key) {
 var _number = require("./number");
 var _paging = require("./paging");
 var _popover = require("./popover");
-var _random = require("./random");
 var _security = require("./security");
 var _sort = require("./sort");
 var _string = require("./string");

package/optimize/lib/test/rtl/component_helpers.d.ts

@@ -10,3 +10,5 @@ export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
 
 export declare const showEuiComboBoxOptions: () => Promise<void>;
+
+export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;

package/optimize/lib/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.showEuiComboBoxOptions = void 0;
+exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.showEuiComboBoxOptions = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 require("@testing-library/jest-dom");
@@ -123,7 +123,7 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
 exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
 var showEuiComboBoxOptions = /*#__PURE__*/function () {
@@ -149,4 +149,42 @@ var showEuiComboBoxOptions = /*#__PURE__*/function () {
     return _ref5.apply(this, arguments);
   };
 }();
-exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+
+/**
+ * EuiContextMenu
+ */
+exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var getPanels;
+    return _regenerator.default.wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.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;
+          return (0, _react.waitFor)(function () {
+            expect(getPanels().length).toEqual(2);
+          });
+        case 3:
+          // Outgoing panel will be removed on animation end
+          _react.fireEvent.animationEnd(getPanels()[0]);
+          if (getPanels().length > 1) {
+            _react.fireEvent.animationEnd(getPanels()[1]);
+          }
+
+          // Transition/animation is done once we're back to 1 panel
+          expect(getPanels().length).toEqual(1);
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  }));
+  return function waitForEuiContextMenuPanelTransition() {
+    return _ref6.apply(this, arguments);
+  };
+}();
+exports.waitForEuiContextMenuPanelTransition = waitForEuiContextMenuPanelTransition;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "90.0.0",
+  "version": "91.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.18.2",
+  "docker_image": "20.9.0",
   "engines": {
-    "node": "16.x || 18.x || >=20.0"
+    "node": "16.x || 18.x || >=20.x"
   },
   "sideEffects": [
     "*.css",
@@ -121,13 +121,13 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.3.1",
-    "@storybook/addon-interactions": "^7.3.1",
-    "@storybook/addon-links": "^7.3.1",
-    "@storybook/blocks": "^7.3.1",
-    "@storybook/react": "^7.3.1",
-    "@storybook/react-webpack5": "^7.3.1",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -155,7 +155,7 @@
     "argparse": "^2.0.1",
     "assert": "^2.0.0",
     "autoprefixer": "^9.8.6",
-    "axe-core": "^4.4.1",
+    "axe-core": "^4.8.2",
     "babel-jest": "^24.1.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -192,7 +192,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -238,7 +238,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.3.1",
+    "storybook": "^7.5.2",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/components/combo_box/_combo_box.scss

@@ -45,9 +45,32 @@
       height: auto;  /* 3 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;
+      cursor: text;
+    }
+
+    &.euiComboBox__inputWrap--noWrap {
+      align-items: center;
+    }
+
+    // Match placeholder and plain text position to EuiFieldText
+    &.euiComboBox__inputWrap--plainText {
+      padding-inline-start: $euiSizeS;
+    }
+
+    .euiComboBoxPlainTextSelection {
+      &__prepend,
+      &__append {
+        flex-shrink: 0;
+        margin-inline: $euiSizeXS / 2;
+        display: flex; /* Vertically centers any icons */
+      }
+
+      &__prepend {
+        margin-inline-start: $euiSizeXS;
+      }
 
-      &:hover {
-        cursor: text;
+      &__append {
+        margin-inline-end: $euiSizeXS;
       }
     }
   }
@@ -56,6 +79,7 @@
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
   .euiComboBox__input {
     block-size: $euiSizeL; /* 2 */
@@ -64,11 +88,20 @@
     margin: $euiSizeXS;
 
     /* 3 */
-    appearance: none;
-    outline: none;
-    border: none;
     background: transparent;
-    color: $euiTextColor;
+    @include euiFormControlText;
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    /* 4 */
+    // stylelint-disable declaration-no-important
+    appearance: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    // stylelint-enable declaration-no-important
   }
 
   &.euiComboBox-isOpen {
@@ -94,13 +127,9 @@
       -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
-    .euiComboBoxPlaceholder,
-    .euiComboBoxPill--plainText {
-      @include euiFormControlDisabledTextStyle;
-    }
-
     // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
-    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+    .euiComboBox__inputWrap,
+    .euiComboBoxPill {
       cursor: not-allowed;
     }
   }
@@ -108,8 +137,11 @@
   &.euiComboBox--compressed {
     .euiComboBox__inputWrap {
       line-height: $euiFormControlCompressedHeight; /* 2 */
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-block: 0;
+
+      &--plainText {
+        padding-inline-start: $euiSizeXS;
+      }
     }
   }
 }

package/src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -18,22 +18,6 @@
     margin: ($euiSizeXS + 1px) $euiSizeXS 0 0;
   }
 
-  .euiComboBox--compressed &--plainText {
-    margin-top: $euiSizeXS;
-  }
-
-  &--plainText {
-    @include euiFont;
-
-    line-height: $euiSizeL;
-    font-size: $euiFontSizeS;
-    padding: 0;
-    color: $euiTextColor;
-    vertical-align: middle;
-    display: inline-flex;
-    align-items: center;
-  }
-
   &__prepend {
     margin-right: $euiSizeXS;
   }
@@ -43,7 +27,6 @@
   }
 
   /* Fix append/prepend vertical alignment */
-  &--plainText,
   .euiBadge__text {
     display: flex;
     align-items: center;

package/src/components/combo_box/combo_box_input/_index.scss

@@ -1,3 +1 @@
-@import 'combo_box_input';
 @import 'combo_box_pill';
-@import 'combo_box_placeholder';