@elastic/eui 95.1.0 → 95.3.0

package/es/components/steps/step_number.js

@@ -15,9 +15,9 @@ import PropTypes from "prop-types";
 import React from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
-import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { EuiLoadingSpinner } from '../loading';
 import { useEuiTheme } from '../../services';
+import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
 import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
@@ -64,37 +64,59 @@ export var EuiStepNumber = function EuiStepNumber(_ref) {
   switch (status) {
     // Loading spinner
     case 'loading':
-      screenReaderText = ariaLabelsMap.loading;
-      content = ___EmotionJSX(EuiLoadingSpinner, {
-        className: "euiStepNumber__loader",
-        size: titleSize === 'xs' ? 'l' : 'xl'
-      });
-      break;
+      {
+        var iconSizeMap = {
+          none: 'm',
+          xs: 'l',
+          s: 'xl',
+          m: 'xl'
+        };
+        screenReaderText = ariaLabelsMap.loading;
+        content = ___EmotionJSX(EuiLoadingSpinner, {
+          className: "euiStepNumber__loader",
+          size: iconSizeMap[titleSize]
+        });
+        break;
+      }
     // Statuses with icons
     case 'danger':
     case 'warning':
     case 'complete':
-      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
-      var iconTypeMap = {
-        danger: 'cross',
-        warning: 'warning',
-        complete: 'check'
-      };
-      content = ___EmotionJSX(EuiIcon, {
-        type: iconTypeMap[status],
-        "aria-label": ariaLabelsMap[status],
-        size: titleSize === 'xs' ? 's' : 'm',
-        className: "euiStepNumber__icon",
-        css: cssIconStyles
-      });
-      break;
+      {
+        var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
+        // EuiIcon does not support a xxs size so far,
+        // we use custom sizing here instead
+        titleSize === 'none' && contentStyles[titleSize]];
+        var iconTypeMap = {
+          danger: 'cross',
+          warning: 'warning',
+          complete: 'check'
+        };
+        var _iconSizeMap = {
+          xxs: 's',
+          xs: 's',
+          s: 'm',
+          m: 'm'
+        };
+        content = ___EmotionJSX(EuiIcon, {
+          type: iconTypeMap[status],
+          "aria-label": ariaLabelsMap[status],
+          size: _iconSizeMap[titleSize],
+          className: "euiStepNumber__icon",
+          css: cssIconStyles
+        });
+        break;
+      }
     // Statuses with numbers
     case 'incomplete':
     case 'current':
     case 'disabled':
     default:
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       screenReaderText = ariaLabelsMap[status || 'step'];
+      if (titleSize === 'none') {
+        break;
+      }
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = ___EmotionJSX("span", {
         "aria-hidden": "true",
         className: "euiStepNumber__number",
@@ -114,9 +136,11 @@ EuiStepNumber.propTypes = {
   status: PropTypes.any,
   number: PropTypes.number,
   /**
-     * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+     * Title sizing equivalent to EuiTitle, but only `m`, `s`, `xs`.
+     * `none` indicates no step number should be rendered.
+     * @default s
      */
-  titleSize: PropTypes.any,
+  titleSize: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["none"])]),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/steps/step_number.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
+import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale, logicalSizeCSS } from '../../global_styling';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,6 +39,7 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
+    none: /*#__PURE__*/css(createStepsNumber(euiStep.numberXXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:none;"),
     // status
     incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
     disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), ";;label:disabled;"),
@@ -66,6 +67,7 @@ export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref
     incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/css(";label:loading;"),
     disabled: /*#__PURE__*/css(";label:disabled;"),
-    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
+    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    none: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), ";label:none;")
   };
 };

package/es/components/steps/steps.js

@@ -62,7 +62,9 @@ EuiSteps.propTypes = {
      */
   headingElement: PropTypes.string,
   /**
-     * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+     * Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
+     * The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
+     * @default s
      */
   titleSize: PropTypes.any,
   className: PropTypes.string,

package/es/components/steps/steps_horizontal.js

@@ -16,7 +16,7 @@ import React from 'react';
 import { EuiStepHorizontal } from './step_horizontal';
 import { euiStepsHorizontalStyles } from './steps_horizontal.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var SIZES = ['s', 'm'];
+export var SIZES = ['xs', 's', 'm'];
 export var EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
     steps = _ref.steps,

package/es/global_styling/mixins/_helpers.js

@@ -67,10 +67,18 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
       gradient = "".concat(gradientEnd);
     }
   }
+
+  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+  // This workaround forces a stacking context on the scrolling container, which
+  // hopefully addresses the bug. @see:
+  // - https://issues.chromium.org/issues/40778541
+  // - https://github.com/elastic/kibana/issues/180828
+  // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
+  var chromiumMaskWorkaround = 'transform: translateZ(0);';
   if (direction === 'y') {
-    return "mask-image: linear-gradient(to bottom, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to bottom, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   } else {
-    return "mask-image: linear-gradient(to right, ".concat(gradient, ");");
+    return "mask-image: linear-gradient(to right, ".concat(gradient, "); ").concat(chromiumMaskWorkaround);
   }
 };
 

package/es/services/breakpoint/current_breakpoint.js

@@ -14,15 +14,17 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { keysOf } from '../../components/common';
-import { useEuiTheme } from '../theme';
+import { useEuiTheme } from '../theme/hooks';
 import { throttle } from '../throttle';
 import { sortMapByLargeToSmallValues } from './_sorting';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 
 /**
- * Top level provider (nested within EuiProvider) which provides a single
- * resize listener that returns the current breakpoint based on window width
+ * Returns the current breakpoint based on window width.
+ * Typically only called by the top-level `EuiProvider` (to reduce the number
+ * of window resize listeners on the page). Also conditionally called if a
+ * nested `EuiThemeProvider` defines a `modify.breakpoint` override
  */
 export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;

package/es/services/theme/provider.js

@@ -25,11 +25,12 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState, useCallback, Fragment } from 'react';
 import { Global } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
+import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
 import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
@@ -55,6 +56,13 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     system = _useState2[0],
     setSystem = _useState2[1];
   var prevSystemKey = useRef(system.key);
+
+  // To reduce the number of window resize listeners, only render a
+  // CurrentEuiBreakpointProvider for the top level parent theme, or for
+  // nested themes only if modified breakpoint overrides are passed
+  var EuiConditionalBreakpointProvider = useMemo(function () {
+    return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? CurrentEuiBreakpointProvider : Fragment;
+  }, [isGlobalTheme, _modifications]);
   var _useState3 = useState(mergeDeep(parentModifications, _modifications)),
     _useState4 = _slicedToArray(_useState3, 2),
     modifications = _useState4[0],
@@ -164,5 +172,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, renderedChildren))))))));
+  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
 };

package/es/services/theme/warning.js

@@ -7,8 +7,8 @@
  */
 
 var providerWarning = undefined;
-export var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
+export var setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
+  return providerWarning = warningType;
 };
 export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
   return providerWarning;
@@ -16,6 +16,11 @@ export var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
 
 // Not a public top-level EUI export, currently for internal use
 export var emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
+  // Handle callback types
+  if (typeof providerWarning === 'function') {
+    return providerWarning(providerMessage);
+  }
+  // Handle level types
   switch (providerWarning) {
     case 'log':
       console.log(providerMessage);