@elastic/eui 90.0.0 → 91.1.0

package/es/components/text_truncate/text_truncate.js

@@ -1,5 +1,5 @@
 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"];
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useCombinedRefs } from '../../services';
@@ -98,7 +98,13 @@ EuiTextTruncate.propTypes = {
        * allows for more flexible text rendering, e.g. adding custom markup
        * or highlighting
        */
-  children: PropTypes.func
+  children: PropTypes.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.number
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,
@@ -111,6 +117,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);
@@ -121,6 +128,19 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     setContainerEl = _useState2[1];
   var refs = useCombinedRefs([setContainerEl, containerRef]);
 
+  // If necessary, wait a tick on mount before truncating
+  var _useState3 = useState(!calculationDelayMs),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ready = _useState4[0],
+    setReady = _useState4[1];
+  useEffect(function () {
+    if (calculationDelayMs) {
+      setTimeout(function () {
+        return setReady(true);
+      }, calculationDelayMs);
+    }
+  }, [calculationDelayMs]);
+
   // Handle exceptions where we need to override the passed props
   var _useMemo = useMemo(function () {
       var truncation = _truncation;
@@ -145,7 +165,8 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationOffset = _useMemo.truncationOffset;
   var truncatedText = useMemo(function () {
     var truncatedText = '';
-    if (!containerEl || !width) return truncatedText;
+    if (!ready || !containerEl) return text;
+    if (!width) return truncatedText;
     var utils = new TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
@@ -177,7 +198,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 ___EmotionJSX("div", _extends({
     className: classNames('euiTextTruncate', className),
@@ -205,10 +226,10 @@ EuiTextTruncateWithWidth.propTypes = {
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var onResize = useCallback(function (_ref4) {
     var width = _ref4.width;
     setWidth(width);
@@ -220,6 +241,8 @@ var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserv
     return ___EmotionJSX(EuiTextTruncateWithWidth, _extends({
       width: width,
       containerRef: ref
-    }, props));
+    }, props, {
+      "data-resize-observer": "true"
+    }));
   });
 };

package/es/components/toast/global_toast_list.js

@@ -273,7 +273,7 @@ export var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = classNames('euiGlobalToastList', className);
   return ___EmotionJSX("div", _extends({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes
@@ -310,6 +310,16 @@ EuiGlobalToastList.propTypes = {
      * Optional callback that fires when a user clicks the "Clear all" button.
      */
   onClearAllToasts: PropTypes.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.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/tour/tour_step.js

@@ -222,6 +222,8 @@ EuiTourStep.propTypes = {
   css: PropTypes.any,
   /**
      * Class name passed to the direct parent of the button
+     *
+     * @deprecated Use `className` instead
      */
   anchorClassName: PropTypes.string,
   /**
@@ -233,6 +235,9 @@ EuiTourStep.propTypes = {
      * Intended for use with inputs as anchors, e.g. EuiInputPopover
      */
   attachToAnchor: PropTypes.bool,
+  /**
+     * @deprecated Use `popoverRef` instead
+     */
   buttonRef: PropTypes.any,
   /**
      * Restrict the popover's position within this element
@@ -301,11 +306,6 @@ EuiTourStep.propTypes = {
        */
     grow: PropTypes.bool,
     panelRef: PropTypes.any,
-    /**
-       * Background color of the panel;
-       * Usually a lightened form of the brand colors
-       */
-    color: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

package/es/global_styling/mixins/_states.js

@@ -7,6 +7,7 @@
  */
 
 import { useEuiTheme } from '../../services';
+import { mathWithUnits } from '../functions';
 /**
  * It is best practice to utilize the browser's default `outline` property for handling focus rings.
  * However, some components need to be forced to have the same behavior, or adjust the display.
@@ -29,7 +30,9 @@ export var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = mathWithUnits(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components

package/es/services/color/eui_palettes.js

@@ -153,12 +153,6 @@ export 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
- */
-export var euiPaletteComplimentary = euiPaletteComplementary;
 export var euiPaletteNegative = function euiPaletteNegative(steps) {
   if (steps === 1) {
     return [lightNegativeColor];

package/es/services/color/index.js

@@ -17,7 +17,7 @@ export { rgbToHsv } from './rgb_to_hsv';
 export { calculateContrast, calculateLuminance } from './luminance_and_contrast';
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
 export { colorPalette } from './color_palette';
-export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
+export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';
 export * from './contrast';

package/es/services/hooks/useCombinedRefs.js

@@ -7,7 +7,6 @@
  */
 
 import { useCallback } from 'react';
-
 /*
  * For use when a component needs to set `ref` objects from multiple sources.
  * For instance, if a component accepts a `ref` prop but also needs its own
@@ -17,13 +16,21 @@ import { useCallback } from 'react';
  */
 export var useCombinedRefs = function useCombinedRefs(refs) {
   return 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]);
+};
+
+/**
+ * Non-hook util for setting multiple refs/ref types.
+ * Useful for non-functional components
+ */
+export var setMultipleRefs = function setMultipleRefs(refs, node) {
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else {
+      ref.current = node;
+    }
+  });
 };

package/es/services/index.js

@@ -12,7 +12,7 @@ export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
 export { CanvasTextUtils } from './canvas';
-export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';
@@ -23,7 +23,6 @@ export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
 export { Pager } from './paging';
 export { calculatePopoverPosition, findPopoverPosition } from './popover';
-export { Random } from './random';
 export { getSecureRelForTarget } from './security';
 export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType } from './sort';
 export { slugify, toInitials, toSentenceCase } from './string';

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

@@ -116,8 +116,9 @@ export var waitForEuiToolTipHidden = /*#__PURE__*/function () {
 }();
 
 /**
- * Doot doo
+ * EuiComboBox
  */
+
 export var showEuiComboBoxOptions = /*#__PURE__*/function () {
   var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
     return _regeneratorRuntime().wrap(function _callee5$(_context5) {
@@ -140,4 +141,42 @@ export var showEuiComboBoxOptions = /*#__PURE__*/function () {
   return function showEuiComboBoxOptions() {
     return _ref5.apply(this, arguments);
   };
+}();
+
+/**
+ * EuiContextMenu
+ */
+
+export 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 waitFor(function () {
+            expect(getPanels().length).toEqual(2);
+          });
+        case 3:
+          // Outgoing panel will be removed on animation end
+          fireEvent.animationEnd(getPanels()[0]);
+          if (getPanels().length > 1) {
+            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);
+  };
 }();