@elastic/eui 90.0.0 → 91.0.0

package/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -23,7 +23,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
@@ -77,9 +77,11 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     setPopoverIsOpen(false);
     _closePopover && _closePopover();
   };
-  var togglePopover = function togglePopover() {
-    setPopoverIsOpen(!popoverIsOpen);
-  };
+  var togglePopover = useCallback(function () {
+    setPopoverIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
 
   // Width applied to the internal div
   var popoverWidth = width || 600;
@@ -154,16 +156,16 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     if (!currentBreakpoint) return false;
     return popoverButtonBreakpoints.includes(currentBreakpoint);
   }, [currentBreakpoint, popoverButtonBreakpoints]);
-  var popoverTrigger;
-  if (popoverButton && canShowPopoverButton) {
-    popoverTrigger = /*#__PURE__*/React.cloneElement(popoverButton, _objectSpread(_objectSpread({}, popoverButton.props), {}, {
+  var popoverTrigger = useMemo(function () {
+    if (!popoverButton || !canShowPopoverButton) return;
+    return ___EmotionJSX("span", {
+      className: "euiSelectableTemplateSitewide__popoverTrigger",
       onClick: togglePopover,
       onKeyDown: function onKeyDown(e) {
-        // Selectable preventsDefault on Enter which kills browser controls for pressing the button
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }));
-  }
+    }, popoverButton);
+  }, [popoverButton, canShowPopoverButton, togglePopover]);
   return ___EmotionJSX(EuiSelectable, _extends({
     isLoading: isLoading,
     options: formattedOptions,

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);
+  };
 }();