@elastic/eui 90.0.0 → 91.0.0

package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -19,52 +20,99 @@ import React, { Component } from 'react';
 import moment from 'moment'; // eslint-disable-line import/named
 
 import dateMath from '@elastic/datemath';
-import { EuiDatePicker } from '../../date_picker';
+import { keys } from '../../../../services';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { EuiCode } from '../../../code';
 import { EuiI18n } from '../../../i18n';
+import { EuiDatePicker } from '../../date_picker';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// Allow users to paste in and have the datepicker parse multiple common date formats,
+// in addition to the configured displayed `dateFormat` prop
+var ALLOWED_USER_DATE_FORMATS = [moment.ISO_8601, moment.RFC_2822, 'X' // Unix timestamp in seconds
+];
+
 export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
   _inherits(EuiAbsoluteTab, _Component);
   var _super = _createSuper(EuiAbsoluteTab);
+  // Store outside of state as a ref for faster/unbatched updates
+
   function EuiAbsoluteTab(props) {
     var _this;
     _classCallCheck(this, EuiAbsoluteTab);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "state", void 0);
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date, event) {
+    _defineProperty(_assertThisInitialized(_this), "isParsing", false);
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
       var onChange = _this.props.onChange;
       if (date === null) {
         return;
       }
-      onChange(date.toISOString(), event);
+      onChange(date.toISOString());
       var valueAsMoment = moment(date);
       _this.setState({
         valueAsMoment: valueAsMoment,
         textInputValue: valueAsMoment.format(_this.props.dateFormat),
+        hasUnparsedText: false,
         isTextInvalid: false
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (event) {
-      var onChange = _this.props.onChange;
-      var valueAsMoment = moment(event.target.value, _this.props.dateFormat, true);
-      var dateIsValid = valueAsMoment.isValid();
-      if (dateIsValid) {
-        onChange(valueAsMoment.toISOString(), event);
-      }
+      if (_this.isParsing) return;
       _this.setState({
         textInputValue: event.target.value,
-        isTextInvalid: !dateIsValid,
-        valueAsMoment: dateIsValid ? valueAsMoment : null
+        hasUnparsedText: true,
+        isTextInvalid: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "parseUserDateInput", function (textInputValue) {
+      _this.isParsing = true;
+      // Wait a tick for state to finish updating (whatever gets returned),
+      // and then allow `onChange` user input to continue setting state
+      requestAnimationFrame(function () {
+        _this.isParsing = false;
+      });
+      var invalidDateState = {
+        textInputValue: textInputValue,
+        isTextInvalid: true,
+        valueAsMoment: null
+      };
+      if (!textInputValue) {
+        return _this.setState(invalidDateState);
+      }
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        dateFormat = _this$props.dateFormat;
+
+      // Attempt to parse with passed `dateFormat`
+      var valueAsMoment = moment(textInputValue, dateFormat, true);
+      var dateIsValid = valueAsMoment.isValid();
+
+      // If not valid, try a few other other standardized formats
+      if (!dateIsValid) {
+        valueAsMoment = moment(textInputValue, ALLOWED_USER_DATE_FORMATS, true);
+        dateIsValid = valueAsMoment.isValid();
+      }
+      if (dateIsValid) {
+        onChange(valueAsMoment.toISOString());
+        _this.setState({
+          textInputValue: valueAsMoment.format(_this.props.dateFormat),
+          valueAsMoment: valueAsMoment,
+          hasUnparsedText: false,
+          isTextInvalid: false
+        });
+      } else {
+        _this.setState(invalidDateState);
+      }
+    });
     var parsedValue = dateMath.parse(props.value, {
       roundUp: props.roundUp
     });
     var _valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
-    var textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
+    var _textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
     _this.state = {
+      hasUnparsedText: false,
       isTextInvalid: false,
-      textInputValue: textInputValue,
+      textInputValue: _textInputValue,
       valueAsMoment: _valueAsMoment
     };
     return _this;
@@ -73,17 +121,18 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        dateFormat = _this$props.dateFormat,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        utcOffset = _this$props.utcOffset,
-        labelPrefix = _this$props.labelPrefix;
+      var _this$props2 = this.props,
+        dateFormat = _this$props2.dateFormat,
+        timeFormat = _this$props2.timeFormat,
+        locale = _this$props2.locale,
+        utcOffset = _this$props2.utcOffset,
+        labelPrefix = _this$props2.labelPrefix;
       var _this$state = this.state,
         valueAsMoment = _this$state.valueAsMoment,
         isTextInvalid = _this$state.isTextInvalid,
+        hasUnparsedText = _this$state.hasUnparsedText,
         textInputValue = _this$state.textInputValue;
-      return ___EmotionJSX("div", null, ___EmotionJSX(EuiDatePicker, {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDatePicker, {
         inline: true,
         showTimeSelect: true,
         shadow: false,
@@ -94,22 +143,34 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), ___EmotionJSX(EuiI18n, {
-        token: "euiAbsoluteTab.dateFormatError",
-        default: "Expected format: {dateFormat}",
+        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
-          dateFormat: dateFormat
+          dateFormat: ___EmotionJSX(EuiCode, null, dateFormat)
         }
-      }, function (dateFormatError) {
+      }, function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          dateFormatHint = _ref2[0],
+          dateFormatError = _ref2[1];
         return ___EmotionJSX(EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
-          error: isTextInvalid ? dateFormatError : undefined
+          error: isTextInvalid ? dateFormatError : undefined,
+          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
         }, ___EmotionJSX(EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
           value: textInputValue,
           onChange: _this2.handleTextChange,
-          "data-test-subj": 'superDatePickerAbsoluteDateInput',
+          onPaste: function onPaste(event) {
+            _this2.parseUserDateInput(event.clipboardData.getData('text'));
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === keys.ENTER) {
+              _this2.parseUserDateInput(textInputValue);
+            }
+          },
+          "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: ___EmotionJSX(EuiFormLabel, null, labelPrefix)
         }));
       }));

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -79,8 +79,7 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     button: quickSelectButton,
     isOpen: isOpen,
     closePopover: closePopover,
-    anchorPosition: "downLeft",
-    anchorClassName: "euiQuickSelectPopover__anchor"
+    anchorPosition: "downLeft"
   }, ___EmotionJSX(EuiQuickSelectPanels, _extends({}, props, {
     applyTime: applyTime,
     prevQuickSelect: prevQuickSelect

package/optimize/es/components/filter_group/filter_group.styles.js

@@ -28,7 +28,7 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),

package/optimize/es/components/i18n/i18n.js

@@ -70,6 +70,7 @@ var EuiI18n = function EuiI18n(props) {
           i18nMapping: mapping,
           i18nMappingFunc: mappingFunc,
           valueDefault: props.defaults[idx],
+          values: props.values,
           render: render
         });
       }));

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

@@ -169,7 +169,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
     display: display,
     button: input,
-    buttonRef: inputRef,
+    popoverRef: inputRef,
     panelRef: panelRef,
     ref: popoverClassRef,
     closePopover: closePopover,

package/optimize/es/components/popover/popover.js

@@ -1,4 +1,3 @@
-import { css as _css } from "@emotion/react";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
@@ -28,6 +27,7 @@ import classNames from 'classnames';
 import { focusable } from 'tabbable';
 import { EuiFocusTrap } from '../focus_trap';
 import { keys, getTransitionTimings, getWaitDuration, performOnFrame, htmlIdGenerator } from '../../services';
+import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiPortal } from '../portal';
 import { EuiMutationObserver } from '../observer/mutation_observer';
@@ -257,9 +257,9 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         window.addEventListener('resize', _this.positionPopoverFluid);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "buttonRef", function (node) {
+    _defineProperty(_assertThisInitialized(_this), "popoverRef", function (node) {
       _this.button = node;
-      _this.props.buttonRef && _this.props.buttonRef(node);
+      setMultipleRefs([_this.props.popoverRef, _this.props.buttonRef], node);
     });
     _this.state = {
       prevProps: {
@@ -378,12 +378,12 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var tabIndexProp = (_panelProps$tabIndex = panelProps === null || panelProps === void 0 ? void 0 : panelProps.tabIndex) !== null && _panelProps$tabIndex !== void 0 ? _panelProps$tabIndex : _tabIndexProp;
       var styles = euiPopoverStyles();
       var popoverStyles = [styles.euiPopover, {
-        display: display
+        display: display,
+        label: display
       }];
       var classes = classNames('euiPopover', {
         'euiPopover-isOpen': this.state.isOpening
-      }, className);
-      var anchorClasses = classNames('euiPopover__anchor', anchorClassName);
+      }, className, anchorClassName);
       var showArrow = hasArrow && !attachToAnchor;
       var panel;
       if (!this.state.suppressingPopover && (isOpen || this.state.isClosing)) {
@@ -473,29 +473,17 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_css({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel);
+          ref: this.popoverRef
+        }, rest), button instanceof HTMLElement ? null : button, panel);
       } else {
         return ___EmotionJSX(EuiOutsideClickDetector, {
           onOutsideClick: this.closePopover
         }, ___EmotionJSX("div", _extends({
           css: popoverStyles,
           className: classes,
-          ref: popoverRef,
+          ref: this.popoverRef,
           onKeyDown: this.onKeyDown
-        }, rest), ___EmotionJSX("div", {
-          css: /*#__PURE__*/_css({
-            display: display
-          }, ";label:render;"),
-          className: anchorClasses,
-          ref: this.buttonRef
-        }, button instanceof HTMLElement ? null : button), panel));
+        }, rest), button instanceof HTMLElement ? null : button, panel));
       }
     }
   }], [{

package/optimize/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -7,13 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { euiBackgroundColor, logicals, logicalSizeCSS } from '../../../global_styling';
+import { logicals, logicalSizeCSS } from '../../../global_styling';
 export var popoverArrowSize = 'm';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-
-  // Match the background color of panels
-  var borderColor = euiBackgroundColor(euiThemeContext, 'plain');
+  var borderColor = 'var(--euiPopoverBackgroundColor)';
   var arrowSize = euiTheme.size[popoverArrowSize];
   return {
     // Base

package/optimize/es/components/popover/popover_panel/_popover_panel.js

@@ -35,7 +35,8 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
   var euiThemeContext = useEuiTheme();
   var cssStyles = useMemo(function () {
     var styles = euiPopoverPanelStyles(euiThemeContext);
-    var sharedStyles = [styles.euiPopover__panel, isOpen && styles.isOpen];
+    var colorMode = euiThemeContext.colorMode.toLowerCase();
+    var sharedStyles = [styles.euiPopover__panel, styles[colorMode], isOpen && styles.isOpen];
     if (hasDragDrop) {
       return [].concat(sharedStyles, [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
     }

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
+import { tint } from '../../../services';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
 
@@ -17,6 +18,7 @@ export var openAnimationTiming = 'slow';
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel. But don't animate position when using the attached mode like for inputs
  * 3. Make sure the panel stays within the window.
+ * 4. Make the popover lighter on dark mode (too hard to distinguish from plain bgs otherwise), and set a CSS var for the arrow to use
  */
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "j5y6yx-isOpen",
@@ -37,8 +39,11 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
+    /* 4 */
+    light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/css("--euiPopoverBackgroundColor:", tint(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

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

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
 import { EuiSelectable } from '../selectable';
@@ -67,9 +67,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;
@@ -144,16 +146,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/optimize/es/components/toast/global_toast_list.js

@@ -263,7 +263,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

package/optimize/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/optimize/es/services/color/eui_palettes.js

@@ -148,12 +148,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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/es/test/rtl/component_helpers.js

@@ -114,8 +114,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) {
@@ -138,4 +139,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);
+  };
 }();

package/optimize/lib/components/accordion/accordion.js

@@ -23,7 +23,7 @@ var _accordion_trigger = require("./accordion_trigger");
 var _accordion_children = require("./accordion_children");
 var _accordion = require("./accordion.styles");
 var _react2 = require("@emotion/react");
-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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -105,6 +105,7 @@ 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,
@@ -150,6 +151,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? (0, _react2.jsx)(_loading.EuiLoadingSpinner, null) : extraAction
       }), (0, _react2.jsx)(_accordion_children.EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -172,7 +174,8 @@ exports.EuiAccordionClass = EuiAccordionClass;
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 var EuiAccordion = (0, _services.withEuiTheme)(EuiAccordionClass);
 exports.EuiAccordion = EuiAccordion;