@elastic/eui 95.1.0 → 95.3.0

package/test-env/components/steps/step_number.js

@@ -12,9 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _accessibility = require("../accessibility");
 var _icon = require("../icon");
-var _step_strings = require("./step_strings");
 var _loading = require("../loading");
 var _services = require("../../services");
+var _step_strings = require("./step_strings");
 var _step_number = require("./step_number.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "status", "number", "titleSize"];
@@ -69,37 +69,59 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
   switch (status) {
     // Loading spinner
     case 'loading':
-      screenReaderText = ariaLabelsMap.loading;
-      content = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-        className: "euiStepNumber__loader",
-        size: titleSize === 'xs' ? 'l' : 'xl'
-      });
-      break;
+      {
+        var iconSizeMap = {
+          none: 'm',
+          xs: 'l',
+          s: 'xl',
+          m: 'xl'
+        };
+        screenReaderText = ariaLabelsMap.loading;
+        content = (0, _react2.jsx)(_loading.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 = (0, _react2.jsx)(_icon.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 = (0, _react2.jsx)(_icon.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 = (0, _react2.jsx)("span", {
         "aria-hidden": "true",
         className: "euiStepNumber__number",
@@ -119,9 +141,11 @@ EuiStepNumber.propTypes = {
   status: _propTypes.default.any,
   number: _propTypes.default.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.default.any,
+  titleSize: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["none"])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/steps/step_number.styles.js

@@ -43,6 +43,7 @@ var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberSt
     m: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
+    none: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:none;"),
     // status
     incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
     disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), ";;label:disabled;"),
@@ -70,6 +71,7 @@ var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function e
     incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
     disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
-    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
+    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), ";label:none;")
   };
 };

package/test-env/components/steps/steps.js

@@ -67,7 +67,9 @@ EuiSteps.propTypes = {
      */
   headingElement: _propTypes.default.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.default.any,
   className: _propTypes.default.string,

package/test-env/components/steps/steps_horizontal.js

@@ -21,7 +21,7 @@ var _excluded = ["className", "steps", "size"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var SIZES = exports.SIZES = ['s', 'm'];
+var SIZES = exports.SIZES = ['xs', 's', 'm'];
 var EuiStepsHorizontal = exports.EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
     steps = _ref.steps,

package/test-env/global_styling/mixins/_helpers.js

@@ -72,10 +72,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/test-env/services/breakpoint/current_breakpoint.js

@@ -9,7 +9,7 @@ exports.CurrentEuiBreakpointProvider = exports.CurrentEuiBreakpointContext = voi
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _common = require("../../components/common");
-var _theme = require("../theme");
+var _hooks = require("../theme/hooks");
 var _throttle = require("../throttle");
 var _sorting = require("./_sorting");
 var _react2 = require("@emotion/react");
@@ -26,13 +26,15 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var CurrentEuiBreakpointContext = exports.CurrentEuiBreakpointContext = /*#__PURE__*/(0, _react.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
  */
 var CurrentEuiBreakpointProvider = exports.CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
   // Obtain the breakpoints map from the EUI theme
-  var _useEuiTheme = (0, _theme.useEuiTheme)(),
+  var _useEuiTheme = (0, _hooks.useEuiTheme)(),
     breakpoints = _useEuiTheme.euiTheme.breakpoint;
 
   // Ensure the breakpoints map is sorted from largest value to smallest

package/test-env/services/theme/provider.js

@@ -16,6 +16,7 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _emotion = require("../emotion");
 var _css2 = require("../emotion/css");
+var _current_breakpoint = require("../breakpoint/current_breakpoint");
 var _context = require("./context");
 var _emotion2 = require("./emotion");
 var _style_memoization = require("./style_memoization");
@@ -52,6 +53,13 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     system = _useState2[0],
     setSystem = _useState2[1];
   var prevSystemKey = (0, _react2.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 = (0, _react2.useMemo)(function () {
+    return isGlobalTheme || _modifications !== null && _modifications !== void 0 && _modifications.breakpoint ? _current_breakpoint.CurrentEuiBreakpointProvider : _react2.Fragment;
+  }, [isGlobalTheme, _modifications]);
   var _useState3 = (0, _react2.useState)((0, _utils.mergeDeep)(parentModifications, _modifications)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     modifications = _useState4[0],
@@ -161,5 +169,5 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     value: theme
   }, (0, _react.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, (0, _react.jsx)(_style_memoization.EuiThemeMemoizedStylesProvider, null, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, renderedChildren))))))));
+  }, (0, _react.jsx)(_style_memoization.EuiThemeMemoizedStylesProvider, null, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, (0, _react.jsx)(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
 };

package/test-env/services/theme/warning.js

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

package/src/components/color_picker/_color_picker.scss

@@ -1,37 +0,0 @@
-.euiColorPicker {
-  position: relative;
-  width: $euiColorPickerWidth;
-}
-
-.euiColorPicker__swatches {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -$euiSizeS / 2;
-}
-
-.euiColorPicker__swatch-item {
-  margin: $euiSizeS / 2;
-}
-
-// Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
-.euiSwatchInput__stroke {
-  fill: none;
-  stroke: transparentize($euiColorFullShade, .8);
-}
-
-.euiColorPicker__popoverPanel--pickerOnly {
-  // Override of EuiPanel padding
-  // stylelint-disable-next-line declaration-no-important
-  padding-bottom: 0 !important;
-}
-
-.euiColorPicker__input {
-  // Manually account for custom left icon / color swatch preview
-  --euiFormControlLeftIconsCount: 1;
-}
-
-.euiColorPicker__alphaRange {
-  .euiRangeInput {
-    min-width: 0;
-  }
-}

package/src/components/color_picker/_color_picker_swatch.scss

@@ -1,18 +0,0 @@
-
-.euiColorPickerSwatch {
-  display: inline-block;
-  height: $euiSizeL;
-  width: $euiSizeL;
-  border-radius: $euiBorderRadius / 2;
-  cursor: pointer;
-  border: solid 1px transparentize($euiColorFullShade, .9);
-  box-shadow: inset 0 0 0 1px transparentize($euiColorEmptyShade, .95);
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-}

package/src/components/color_picker/_hue.scss

@@ -1,88 +0,0 @@
-// This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
-.euiHue {
-  // stylelint-disable color-no-hex
-  background: linear-gradient(to right,
-    #FF3232 0%,
-    #FFF130 20%,
-    #45FF30 35%,
-    #28FFF0 52%,
-    #282CFF 71%,
-    #FF28FB 88%,
-    #FF0094 100%
-  );
-  // stylelint-enable color-no-hex
-  height: $euiSizeL;
-  margin: $euiSizeXS 0;
-  position: relative;
-
-  // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
-  &::before,
-  &::after {
-    content: '';
-    left: 0;
-    position: absolute;
-    height: $euiSizeS;
-    background: $euiColorEmptyShade;
-    width: 100%;
-  }
-
-  &::after {
-    bottom: 0;
-  }
-}
-
-// The range itself is the same height
-.euiHue__range {
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-    @include euiRangeThumbStyle;
-  }
-
-  position: relative;
-  height: $euiSizeL;
-  width: calc(100% + 2px); // Allow for overlap
-  margin: 0 -1px; // Use ^ overlap to allow thumb to fully cover gradient ends
-  appearance: none;
-  background: transparent;
-  z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
-
-  // Resets for the range
-
-  // Disable linter for these very unique vendor controls
-  // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: 0;
-  }
-
-  &::-ms-thumb {
-    margin-top: 0;
-  }
-
-  &::-ms-track {
-    height: $euiSizeL;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-
-  &::-moz-focus-outer {
-    border: none;
-  }
-
-  &::-ms-fill-lower,
-  &::-ms-fill-upper {
-    background: transparent;
-  }
-
-  // Thumb has trouble with animation, so we make something similar to `@include euiFocusRing`
-  &:focus {
-    @include euiRangeThumbPerBrowser {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-
-    // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
-    outline: none;
-  }
-}

package/src/components/color_picker/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'color_picker';
-@import 'color_picker_swatch';
-@import 'hue';
-@import 'saturation';
-@import 'color_palette_picker/index';
-@import 'color_palette_display/index';

package/src/components/color_picker/_saturation.scss

@@ -1,57 +0,0 @@
-
-.euiSaturation {
-  position: relative;
-  width: 100%;
-  padding-bottom: 100%;
-  border-radius: $euiBorderRadius / 2;
-  touch-action: none; // prevent TouchMove events from scrolling page
-  z-index: 3; // Required to be above the hue slider, which can overlap
-
-  .euiSaturation__lightness,
-  .euiSaturation__saturation {
-    position: absolute;
-    top: -1px; // hides a slight color inconsistency
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: $euiBorderRadius / 2;
-  }
-
-  .euiSaturation__lightness {
-    background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1);
-  }
-
-  .euiSaturation__saturation {
-    background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1);
-  }
-
-  .euiSaturation__indicator {
-    position: absolute;
-    height: $euiColorPickerIndicatorSize;
-    width: $euiColorPickerIndicatorSize;
-    border-radius: 100%;
-    margin-top: $euiColorPickerIndicatorSize * -.5;
-    margin-left: $euiColorPickerIndicatorSize * -.5;
-    border: 1px solid $euiColorDarkestShade;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 100%;
-      border: 1px solid $euiColorLightestShade;
-    }
-  }
-
-  &:focus {
-    outline: none; // Hide focus ring because of `tabindex=0` on Safari
-
-    .euiSaturation__indicator {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-      border-color: $euiColorPrimary;
-    }
-  }
-}

package/src/components/color_picker/_variables.scss

@@ -1,6 +0,0 @@
-$euiColorPickerValueRange0: rgba(255, 255, 255, 1);
-$euiColorPickerValueRange1: rgba(255, 255, 255, 0);
-$euiColorPickerSaturationRange0: rgba(0, 0, 0, 1);
-$euiColorPickerSaturationRange1: rgba(0, 0, 0, 0);
-$euiColorPickerIndicatorSize: $euiSizeM;
-$euiColorPickerWidth: ($euiSizeL * 5) + ($euiSizeS * 4); // 5 columns of swatches + margins + border

package/src/components/color_picker/color_palette_display/_color_palette_display.scss

@@ -1,18 +0,0 @@
-.euiColorPaletteDisplay {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-  height: $euiSizeS;
-}
-
-@each $name, $size in $euiColorPaletteDisplaySizes {
-  .euiColorPaletteDisplay--#{$name} {
-    @include euiColorPaletteInnerBorder('dark', $size, .2);
-    height: $size;
-    border-radius: $size;
-  }
-
-  .euiColorPaletteDisplay--#{$name} .euiColorPaletteDisplayFixed__bleedArea {
-    height: $size;
-  }
-}

package/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss

@@ -1,12 +0,0 @@
-.euiColorPaletteDisplayFixed {
-  // In a few screen sizes the palette display doesn't get a fully 100% width
-  // it gets 1px less on width and for this reason we're adding an horizontal 1px bleed area
-  &__bleedArea {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    height: $euiSizeS;
-    width: calc(100% + 1px);
-  }
-}

package/src/components/color_picker/color_palette_display/_index.scss

@@ -1,4 +0,0 @@
-@import 'variables';
-@import 'mixins';
-@import 'color_palette_display';
-@import 'color_palette_display_fixed';

package/src/components/color_picker/color_palette_display/_mixins.scss

@@ -1,22 +0,0 @@
-// Useful border shade when dealing with images of unknown color.
-@mixin euiColorPaletteInnerBorder($type: 'dark', $borderRadius: 0, $alpha: .1) {
-  $color: rgba($euiColorDarkestShade, $alpha);
-
-  @if $type == 'light' {
-    $color: rgba($euiColorEmptyShade, $alpha);
-  }
-
-  position: relative;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: $borderRadius;
-    content: '';
-    pointer-events: none;
-    border: 1px solid $color;
-  }
-}

package/src/components/color_picker/color_palette_display/_variables.scss

@@ -1,6 +0,0 @@
-// Color Palette Display come in different sizes.
-$euiColorPaletteDisplaySizes: (
-  sizeExtraSmall: $euiSizeXS,
-  sizeSmall: $euiSizeS,
-  sizeMedium: $euiSize,
-);

package/src/components/color_picker/color_palette_picker/_color_palette_picker.scss

@@ -1,9 +0,0 @@
-.euiColorPalettePicker {
-  &__itemTitle {
-    @include euiFontSizeXS;
-  }
-
-  &__itemTitle + .euiColorPaletteDisplay {
-    margin-top: $euiSizeXS;
-  }
-}

package/src/components/color_picker/color_palette_picker/_index.scss

@@ -1 +0,0 @@
-@import 'color_palette_picker';