@elastic/eui 95.2.0 → 95.3.0

package/test-env/components/modal/modal.styles.js

@@ -19,7 +19,7 @@ var _form = require("../form/form.styles");
 var euiModalStyles = exports.euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/(0, _react.css)("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/(0, _react.css)("min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _mixins.euiShadowXLarge)(euiThemeContext, {

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

@@ -120,9 +120,11 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
-        // If `returnFocus` failed and focus was stranded on the body,
-        // attempt to manually restore focus to the toggle button
-        if (document.activeElement === document.body) {
+        // If `returnFocus` failed and focus was stranded,
+        // attempt to manually restore focus to the toggle button.
+        // The stranded focus is either in most cases on body but
+        // it will be on the panel instead on mount when isOpen=true
+        if (document.activeElement === document.body || document.activeElement === _this.panel) {
           if (!_this.button) return;
           var focusableItems = (0, _tabbable.focusable)(_this.button);
           if (!focusableItems.length) return;

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

@@ -83,5 +83,5 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)))));
+  }, children))));
 };

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/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';

package/src/themes/amsterdam/overrides/_hue.scss

@@ -1,44 +0,0 @@
-.euiHue {
-  position: relative;
-  height: $euiSizeM;
-  border-radius: $euiSizeM;
-  margin: $euiSizeS 0;
-
-  &::before,
-  &::after {
-    display: none;
-  }
-
-  &__range {
-    @include euiRangeThumbPerBrowser {
-      border: 3px solid $euiRangeThumbBorderColor;
-      box-shadow:
-        0 2px 2px -1px rgba($euiShadowColor, .2),
-        0 1px 5px -2px rgba($euiShadowColor, .2);
-      background-color: inherit;
-    }
-
-    top: - $euiSizeM / 2;
-
-    &:focus {
-      @include euiRangeThumbPerBrowser {
-        @include euiRangeThumbFocusBoxShadow;
-        border: 3px solid $euiRangeThumbBorderColor;
-      }
-
-      outline: none;
-    }
-
-    &:focus:not(:focus-visible) {
-      @include euiRangeThumbPerBrowser {
-        box-shadow:
-          0 2px 2px -1px rgba($euiShadowColor, .2),
-          0 1px 5px -2px rgba($euiShadowColor, .2);
-      }
-    }
-
-    &:focus:focus-visible {
-      outline: none;
-    }
-  }
-}