@elastic/eui 90.0.0 → 91.1.0

package/lib/components/text_truncate/text_truncate.js

@@ -14,7 +14,7 @@ var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["width", "onResize"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
+  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -108,7 +108,13 @@ EuiTextTruncate.propTypes = {
        * allows for more flexible text rendering, e.g. adding custom markup
        * or highlighting
        */
-  children: _propTypes.default.func
+  children: _propTypes.default.func,
+  /**
+       * For some edge case scenarios, EuiTextTruncate's calculations may be off until
+       * fonts are done loading or layout is done shifting or settling. Adding a delay
+       * may help resolve any rendering issues.
+       */
+  calculationDelayMs: _propTypes.default.number
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,
@@ -121,6 +127,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationPosition = _ref2.truncationPosition,
     _ref2$ellipsis = _ref2.ellipsis,
     ellipsis = _ref2$ellipsis === void 0 ? '…' : _ref2$ellipsis,
+    calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
     rest = _objectWithoutProperties(_ref2, _excluded2);
@@ -131,6 +138,19 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     setContainerEl = _useState2[1];
   var refs = (0, _services.useCombinedRefs)([setContainerEl, containerRef]);
 
+  // If necessary, wait a tick on mount before truncating
+  var _useState3 = (0, _react.useState)(!calculationDelayMs),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ready = _useState4[0],
+    setReady = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (calculationDelayMs) {
+      setTimeout(function () {
+        return setReady(true);
+      }, calculationDelayMs);
+    }
+  }, [calculationDelayMs]);
+
   // Handle exceptions where we need to override the passed props
   var _useMemo = (0, _react.useMemo)(function () {
       var truncation = _truncation;
@@ -155,7 +175,8 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationOffset = _useMemo.truncationOffset;
   var truncatedText = (0, _react.useMemo)(function () {
     var truncatedText = '';
-    if (!containerEl || !width) return truncatedText;
+    if (!ready || !containerEl) return text;
+    if (!width) return truncatedText;
     var utils = new _utils.TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
@@ -187,7 +208,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
       }
     }
     return truncatedText;
-  }, [width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
+  }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
   return (0, _react2.jsx)("div", _extends({
     className: (0, _classnames.default)('euiTextTruncate', className),
@@ -215,10 +236,10 @@ EuiTextTruncateWithWidth.propTypes = {
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var onResize = (0, _react.useCallback)(function (_ref4) {
     var width = _ref4.width;
     setWidth(width);
@@ -230,6 +251,8 @@ var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserv
     return (0, _react2.jsx)(EuiTextTruncateWithWidth, _extends({
       width: width,
       containerRef: ref
-    }, props));
+    }, props, {
+      "data-resize-observer": "true"
+    }));
   });
 };

package/lib/components/toast/global_toast_list.js

@@ -284,7 +284,7 @@ var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = (0, _classnames.default)('euiGlobalToastList', className);
   return (0, _react2.jsx)("div", _extends({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes
@@ -322,6 +322,16 @@ EuiGlobalToastList.propTypes = {
      * Optional callback that fires when a user clicks the "Clear all" button.
      */
   onClearAllToasts: _propTypes.default.func,
+  /**
+     * Defaults to the [log role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/log_role).
+     *
+     * The [alert role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)
+     * can be considered only if *all* toasts in this list will require immediate user attention.
+     * Several alerts at once, and unnecessary alerts, will a create bad screen reader user experience.
+     *
+     * @default log
+     */
+  role: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/lib/global_styling/mixins/_states.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiFocusRing = exports.euiOutline = exports.euiFocusRing = void 0;
 var _services = require("../../services");
+var _functions = require("../functions");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,7 +36,9 @@ var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = (0, _functions.mathWithUnits)(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components

package/lib/services/color/eui_palettes.js

@@ -3,7 +3,7 @@
 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 _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -164,14 +164,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/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/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/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/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/lib/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 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;
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
 var _custom_render = require("./custom_render");
@@ -122,7 +122,7 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
 exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
 var showEuiComboBoxOptions = /*#__PURE__*/function () {
@@ -148,4 +148,42 @@ var showEuiComboBoxOptions = /*#__PURE__*/function () {
     return _ref5.apply(this, arguments);
   };
 }();
-exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+
+/**
+ * EuiContextMenu
+ */
+exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
+var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+    var getPanels;
+    return _regeneratorRuntime().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/optimize/es/components/accordion/accordion.a11y.js

@@ -29,9 +29,7 @@ describe('EuiAccordion', function () {
     it('has zero violations when expanded', function () {
       cy.mount(___EmotionJSX(EuiAccordion, noArrowProps, ___EmotionJSX(EuiPanel, {
         color: "subdued"
-      }, "Any content inside of ", ___EmotionJSX("strong", null, "EuiAccordion"), " will appear here. We will include ", ___EmotionJSX("a", {
-        href: "#"
-      }, "a link"), " to confirm focus.")));
+      }, "Any content inside of ", ___EmotionJSX("strong", null, "EuiAccordion"), " will appear here.")));
       cy.get('button.euiAccordion__button').click();
       cy.checkAxe();
     });

package/optimize/es/components/accordion/accordion.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "className", "id", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
+var _excluded = ["children", "className", "id", "role", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -96,6 +96,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         className = _this$props3.className,
         id = _this$props3.id,
+        role = _this$props3.role,
         _this$props3$element = _this$props3.element,
         Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
         buttonElement = _this$props3.buttonElement,
@@ -141,6 +142,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? ___EmotionJSX(EuiLoadingSpinner, null) : extraAction
       }), ___EmotionJSX(EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -162,6 +164,7 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 export var EuiAccordion = withEuiTheme(EuiAccordionClass);

package/optimize/es/components/accordion/accordion_children/accordion_children.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +18,8 @@ import { EuiAccordionChildrenLoading } from './accordion_children_loading';
 import { euiAccordionChildrenStyles, euiAccordionChildWrapperStyles } from './accordion_children.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
-  var children = _ref.children,
+  var role = _ref.role,
+    children = _ref.children,
     accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
@@ -63,7 +64,7 @@ export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     css: wrapperCssStyles,
     style: heightInlineStyle,
     ref: accordionChildrenRef,
-    role: "region",
+    role: role,
     tabIndex: -1
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,

package/optimize/es/components/basic_table/action_types.js

@@ -8,4 +8,9 @@
 
 export var isCustomItemAction = function isCustomItemAction(action) {
   return action.hasOwnProperty('render');
+};
+export var callWithItemIfFunction = function callWithItemIfFunction(item) {
+  return function (prop) {
+    return typeof prop === 'function' ? prop(item) : prop;
+  };
 };

package/optimize/es/components/basic_table/basic_table.a11y.js

@@ -183,8 +183,7 @@ describe('EuiTable', function () {
     });
     describe('Keyboard accessibility', function () {
       it('has zero violations after expanding a row', function () {
-        cy.repeatRealPress('Tab');
-        cy.get('button#1').should('have.focus');
+        cy.get('button#1').focus();
         cy.realPress('Enter');
         cy.get('tr.euiTableRow-isExpandedRow div.euiTableCellContent').should('exist');
         cy.checkAxe();