@elastic/eui 95.12.0 → 96.0.0

package/optimize/lib/components/page/page_header/page_header_content.styles.js

@@ -14,6 +14,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1574q9m-euiPageHeaderContent__top",
+  styles: "container-type:inline-size;label:euiPageHeaderContent__top;"
+} : {
+  name: "1574q9m-euiPageHeaderContent__top",
+  styles: "container-type:inline-size;label:euiPageHeaderContent__top;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1ajq27l-responsiveReverse",
   styles: "flex-direction:column-reverse;align-items:flex-start;label:responsiveReverse;"
 } : {
@@ -21,7 +29,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "flex-direction:column-reverse;align-items:flex-start;label:responsiveReverse;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "177mkz8-responsive",
   styles: "flex-direction:column;align-items:flex-start;label:responsive;"
 } : {
@@ -29,7 +37,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "flex-direction:column;align-items:flex-start;label:responsive;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1uwc4oj-stretch",
   styles: "align-items:stretch;label:stretch;"
 } : {
@@ -37,7 +45,7 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:stretch;label:stretch;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref4 = process.env.NODE_ENV === "production" ? {
+var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "8391db-center",
   styles: "align-items:center;label:center;"
 } : {
@@ -45,7 +53,7 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:center;label:center;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref5 = process.env.NODE_ENV === "production" ? {
+var _ref6 = process.env.NODE_ENV === "production" ? {
   name: "1msaet2-bottom",
   styles: "align-items:flex-end;label:bottom;"
 } : {
@@ -53,7 +61,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:flex-end;label:bottom;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref6 = process.env.NODE_ENV === "production" ? {
+var _ref7 = process.env.NODE_ENV === "production" ? {
   name: "1gnwbvd-top",
   styles: "align-items:flex-start;label:top;"
 } : {
@@ -61,21 +69,25 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:flex-start;label:top;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     euiPageHeaderContent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:euiPageHeaderContent;"),
     // alignItems
-    top: _ref6,
-    bottom: _ref5,
-    center: _ref4,
-    stretch: _ref3,
+    top: _ref7,
+    bottom: _ref6,
+    center: _ref5,
+    stretch: _ref4,
     // Children only (legacy) expects EuiPageHeaderSections as children
-    flex: /*#__PURE__*/(0, _react.css)("flex-direction:row;display:flex;gap:", euiTheme.size.base, ";justify-content:space-between;;label:flex;"),
-    // Responsive (what to do at the smaller breakpoint)
-    responsive: _ref2,
-    responsiveReverse: _ref,
-    // Content
+    childrenOnly: {
+      flex: /*#__PURE__*/(0, _react.css)("flex-direction:row;display:flex;gap:", euiTheme.size.base, ";justify-content:space-between;;label:flex;"),
+      // Responsive (what to do at the smaller breakpoint)
+      responsive: _ref3,
+      responsiveReverse: _ref2
+    },
+    euiPageHeaderContent__top: _ref,
+    euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/optimize/lib/components/provider/system_color_mode/system_color_mode_provider.js

@@ -18,10 +18,10 @@ var _react = require("react");
 var COLOR_MODE_MEDIA_QUERY = exports.COLOR_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 var EuiSystemColorModeProvider = exports.EuiSystemColorModeProvider = function EuiSystemColorModeProvider(_ref) {
   var children = _ref.children;
-  // Use optional chaining here for SSR or test environments
+  // Check typeof and use optional chaining for SSR or test environments
   var _useState = (0, _react.useState)(function () {
-      var _window, _window$matchMedia;
-      return (_window = window) !== null && _window !== void 0 && (_window$matchMedia = _window.matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, COLOR_MODE_MEDIA_QUERY).matches ? 'DARK' : 'LIGHT';
+      var _window$matchMedia, _window;
+      return typeof window !== 'undefined' && (_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && (_window$matchMedia = _window$matchMedia.call(_window, COLOR_MODE_MEDIA_QUERY)) !== null && _window$matchMedia !== void 0 && _window$matchMedia.matches ? 'DARK' : 'LIGHT';
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     systemColorMode = _useState2[0],

package/optimize/lib/components/search_bar/search_box.js

@@ -9,7 +9,6 @@ exports.EuiSearchBox = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _services = require("../../services");
 var _i18n = require("../i18n");
 var _form = require("../form");
 var _popover = require("../popover");
@@ -31,7 +30,7 @@ var EuiSearchBox = exports.EuiSearchBox = function EuiSearchBox(_ref) {
     hint = _ref.hint,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _inputRef = (0, _react.useRef)(null);
-  (0, _services.useUpdateEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     if (_inputRef.current) {
       _inputRef.current.value = query;
       _inputRef.current.dispatchEvent(new Event('change'));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "95.12.0",
+  "version": "96.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/global_styling/mixins/_form.scss

@@ -1,108 +1,3 @@
-@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
-  $iconSize: $euiSize;
-  $iconPadding: $euiFormControlPadding;
-  $marginBetweenIcons: $euiFormControlPadding / 2;
-
-  @if ($compressed) {
-    $iconPadding: $euiFormControlCompressedPadding;
-  }
-
-  @if variable-exists(numOfIcons) == false {
-    @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
-  } @else if $numOfIcons == 1 {
-    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
-  } @else if $numOfIcons == 2 {
-    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
-  } @else if $numOfIcons == 3 {
-    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
-  }
-}
-
-@mixin euiPlaceholderPerBrowser {
-  // stylelint-disable selector-no-vendor-prefix
-  // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; opacity: 1; }
-  &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
-  &:-moz-placeholder { @content; opacity: 1; }
-  &::placeholder { @content; opacity: 1; }
-}
-
-@function euiFormControlGradient($color: $euiColorPrimary) {
-  @return linear-gradient(to top,
-    $color,
-    $color 2px,
-    transparent 2px,
-    transparent 100%
-  );
-}
-
-@mixin euiFormControlText {
-  @include euiFont;
-  font-size: $euiFontSizeS;
-  color: $euiTextColor;
-
-  @include euiPlaceholderPerBrowser {
-    color: $euiFormControlPlaceholderText;
-  }
-}
-
-@mixin euiFormControlSize(
-  $height: $euiFormControlHeight,
-  $includeAlternates: false
-) {
-  // Default
-  max-width: $euiFormMaxWidth;
-  width: 100%;
-  height: $height;
-
-  @if ($includeAlternates) {
-    &--fullWidth {
-      max-width: 100%;
-    }
-
-    &--compressed {
-      height: $euiFormControlCompressedHeight;
-    }
-
-    &--inGroup {
-      height: 100%;
-    }
-  }
-}
-
-@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
-  @if ($isIconOptional) {
-    @at-root {
-      #{&}--withIcon {
-        @include euiFormControlLayoutPadding(1, $side, $compressed);
-      }
-    }
-  } @else {
-    @include euiFormControlLayoutPadding(1, $side, $compressed);
-  }
-}
-
-@mixin euiFormControlIsLoading($isNextToIcon: false) {
-  @at-root {
-    #{&}-isLoading {
-      @if ($isNextToIcon) {
-        @include euiFormControlLayoutPadding(2);
-      } @else {
-        @include euiFormControlLayoutPadding(1);
-      }
-    }
-
-    #{&}-isLoading#{&}--compressed {
-      @if ($isNextToIcon) {
-        @include euiFormControlLayoutPadding(2, $compressed: true);
-      } @else {
-        @include euiFormControlLayoutPadding(1, $compressed: true);
-      }
-    }
-  }
-}
-
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
@@ -131,143 +26,3 @@
     transition-property: box-shadow, background-image, background-size;
   }
 }
-
-@mixin euiFormControlFocusStyle($borderOnly: false) {
-  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
-  background-image: euiFormControlGradient();
-  background-size: 100% 100%; // 1
-  outline: none; // Blanket remove all outlines relying on our own bottom border
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  }
-}
-
-@mixin euiFormControlInvalidStyle {
-  background-image: euiFormControlGradient($euiColorDanger);
-  background-size: 100%;
-}
-
-@mixin euiFormControlDisabledTextStyle {
-  color: $euiFormControlDisabledColor;
-  -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
-}
-
-@mixin euiFormControlDisabledStyle {
-  @include euiFormControlDisabledTextStyle;
-  cursor: not-allowed;
-  background: $euiFormBackgroundDisabledColor;
-  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
-
-  @include euiPlaceholderPerBrowser {
-    color: $euiFormControlDisabledColor;
-  }
-}
-
-@mixin euiFormControlReadOnlyStyle {
-  cursor: default;
-  color: $euiTextColor;
-  -webkit-text-fill-color: $euiTextColor; // Required for Safari
-  // Use transparency since there is no border and in case form is on a non-white background
-  background: $euiFormBackgroundReadOnlyColor;
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
-}
-
-// 2. Override invalid state with focus state.
-
-@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
-  @include euiFormControlSize($includeAlternates: $includeSizes);
-  @include euiFormControlDefaultShadow;
-  @include euiFormControlText;
-
-  border: none;
-  border-radius: $euiFormControlBorderRadius;
-  padding: $euiFormControlPadding;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle;
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-
-    // Needs to be set for autofill
-    &:-webkit-autofill {
-      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-
-      ~ .euiFormControlLayoutIcons {
-        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-      }
-    }
-  }
-
-  @if ($includeSizes) {
-    &--compressed {
-      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
-    }
-
-    &--inGroup {
-      // stylelint-disable-next-line declaration-no-important
-      box-shadow: none !important;
-      border-radius: 0;
-    }
-  }
-}
-
-@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
-  @include euiFormControlDefaultShadow($borderOnly: true);
-  padding: $euiFormControlCompressedPadding;
-  border-radius: $euiFormControlCompressedBorderRadius;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle($borderOnly: true);
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-  }
-}
-
-@mixin euiHiddenSelectableInput {
-  position: absolute;
-  // stylelint-disable-next-line declaration-no-important
-  opacity: 0 !important; // Make sure it's still hidden when :disabled
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-// Adjusts form controls border radius
-@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
-  @if $internal == true {
-    $borderRadius: $borderRadius - 1;
-  }
-  @if $side == 'left' {
-    border-radius: $borderRadius 0 0 $borderRadius;
-  } @else if $side == 'right' {
-    border-radius: 0 $borderRadius $borderRadius 0;
-  }
-}

package/src/global_styling/mixins/_index.scss

@@ -7,8 +7,5 @@
 
 @import 'button';
 @import 'form';
-@import 'loading';
-@import 'link';
 @import 'panel';
-@import 'range';
 @import 'tool_tip';

package/src/global_styling/mixins/_states.scss

@@ -15,36 +15,3 @@
 @mixin euiFocusBackground($color: $euiColorPrimary) {
   background-color: tintOrShade($euiColorPrimary, ((1 - $euiFocusTransparency) * 100%), ((1 - $euiFocusTransparency) * 100%));
 }
-
-@mixin euiHoverState {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-@mixin euiFocusState($color: $euiColorPrimary) {
-  @include euiHoverState;
-  @include euiFocusBackground($color);
-}
-
-@mixin euiDisabledState($color: $euiButtonColorDisabledText) {
-  cursor: not-allowed;
-  text-decoration: none;
-
-  @if ($color) {
-    color: $color;
-  }
-}
-
-@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) {
-  &:hover {
-    @include euiHoverState;
-  }
-
-  &:focus {
-    @include euiFocusState($focusColor);
-  }
-
-  &:disabled {
-    @include euiDisabledState($disabledColor);
-  }
-}

package/src/global_styling/mixins/_tool_tip.scss

@@ -1,5 +1,9 @@
 @mixin euiToolTipStyle($size: null) {
   @include euiBottomShadow($color: $euiColorInk);
+
+  $euiTooltipBackgroundColor: tintOrShade($euiColorFullShade, 25%, 100%) !default;
+  $euiTooltipBorderColor: tintOrShade($euiColorFullShade, 35%, 80%) !default;
+
   border-radius: $euiBorderRadius;
   background-color: $euiTooltipBackgroundColor;
   color: $euiColorGhost;
@@ -19,7 +23,3 @@
   padding-bottom: $euiSizeXS;
   margin-bottom: $euiSizeXS;
 }
-
-@mixin euiToolTipAnimation($side: 'top') {
-  animation: #{map-get($euiTooltipAnimations, $side)} $euiAnimSpeedSlow ease-out 0s forwards;
-}

package/src/global_styling/variables/_buttons.scss

@@ -2,11 +2,6 @@ $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
 $euiButtonHeightXSmall: $euiSizeL !default;
 
-$euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
-// Only increase the contrast of background color to text to 2.0 for disabled
-$euiButtonColorDisabledText: makeDisabledContrastColor($euiButtonColorDisabled) !default;
-$euiButtonColorGhostDisabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade) !default;
-
 // Modifier naming and colors.
 $euiButtonTypes: (
   primary: $euiColorPrimary,
@@ -17,3 +12,7 @@ $euiButtonTypes: (
   ghost: $euiColorGhost, // Ghost is special, and does not care about theming.
   text: $euiColorDarkShade, // Reserved for special use cases
 ) !default;
+
+// TODO: Remove this once elastic-charts no longer uses this variable
+// @see https://github.com/elastic/elastic-charts/pull/2528
+$euiButtonColorDisabledText: $euiColorDisabledText;

package/src/global_styling/variables/_form.scss

@@ -19,41 +19,3 @@ $euiFormControlBoxShadow: 0 0 transparent !default;
 $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
 $euiFormInputGroupBorder: none !default;
-
-// Icons sizes
-$euiFormControlIconSizes: (
-  small: $euiSizeM,
-  medium: $euiSize,
-  large: $euiSizeL,
-  xLarge: $euiSizeXL,
-  xxLarge: $euiSizeXXL
-);
-
-// Control Layout
-$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px !default;
-$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px !default;
-$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2 !default;
-
-// Range
-$euiRangeTrackColor: $euiColorLightShade !default;
-$euiRangeHighlightColor: $euiColorDarkShade !default;
-
-$euiRangeThumbHeight: $euiSize !default;
-$euiRangeThumbWidth: $euiSize !default;
-$euiRangeThumbBorderColor: $euiColorEmptyShade !default;
-$euiRangeThumbBackgroundColor: $euiRangeHighlightColor;
-
-$euiRangeTrackWidth: 100% !default;
-$euiRangeTrackHeight: $euiSizeM / 2 !default;
-$euiRangeTrackCompressedHeight: $euiSizeXS;
-$euiRangeTrackBorderWidth: 0 !default;
-$euiRangeTrackBorderColor: $euiRangeTrackColor !default;
-$euiRangeTrackRadius: $euiBorderRadius !default;
-
-$euiRangeDisabledOpacity: .25 !default;
-
-$euiRangeHighlightHeight: $euiRangeTrackHeight !default;
-$euiRangeHighlightCompressedHeight: $euiRangeTrackCompressedHeight !default;
-
-$euiRangeHeight: $euiFormControlHeight !default;
-$euiRangeCompressedHeight: $euiFormControlCompressedHeight !default;

package/src/global_styling/variables/_index.scss

@@ -21,6 +21,3 @@
 
 @import 'buttons';
 @import 'form';
-@import 'page';
-@import 'panel';
-@import 'tool_tip';

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -9,8 +9,5 @@
 
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
-@import '../../../../global_styling/mixins/loading';
-@import 'link';
 @import '../../../../global_styling/mixins/panel';
-@import '../../../../global_styling/mixins/range';
 @import '../../../../global_styling/mixins/tool_tip';

package/src/themes/amsterdam/global_styling/mixins/_states.scss

@@ -39,36 +39,3 @@
 @mixin euiFocusBackground($color: $euiColorPrimary) {
   background-color: transparentize($color, $euiFocusTransparency);
 }
-
-@mixin euiHoverState {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-@mixin euiFocusState($color: $euiColorPrimary) {
-  @include euiHoverState;
-  @include euiFocusBackground($color);
-}
-
-@mixin euiDisabledState($color: $euiButtonColorDisabledText) {
-  cursor: not-allowed;
-  text-decoration: none;
-
-  @if ($color) {
-    color: $color;
-  }
-}
-
-@mixin euiInteractiveStates($focusColor: $euiColorPrimary, $disabledColor: $euiButtonColorDisabledText) {
-  &:hover {
-    @include euiHoverState;
-  }
-
-  &:focus {
-    @include euiFocusState($focusColor);
-  }
-
-  &:disabled {
-    @include euiDisabledState($disabledColor);
-  }
-}

package/src/themes/amsterdam/global_styling/variables/_index.scss

@@ -2,6 +2,4 @@
 @import '../../../../global_styling/variables/index';
 @import 'states';
 
-@import 'buttons';
-@import 'page';
 @import 'typography';

package/test-env/components/breadcrumbs/_breadcrumb_content.js

@@ -251,6 +251,8 @@ EuiBreadcrumbContent.propTypes = {
     /**
        * Must be set to true if using `EuiDragDropContext` within a popover,
        * otherwise your nested drag & drop will have incorrect positioning
+       *
+       * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead.
        */
     hasDragDrop: _propTypes.default.bool,
     /**

package/test-env/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -108,7 +108,9 @@ var euiDataGridRowCellStyles = exports.euiDataGridRowCellStyles = function euiDa
       defaultHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:defaultHeight;"),
       // Control columns should be vertically centered with the *first line* of text
       // for both single and multi-line heights (see https://github.com/elastic/eui/issues/7897)
-      controlColumn: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:start;gap:", euiTheme.size.xxs, ";vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;.euiDataGrid--fontSizeSmall &:where(.euiDataGridRowCell__content--defaultHeight){", (0, _global_styling.logicalCSS)('height', '100%'), " align-items:center;}.euiCheckbox:not(:has(label)){display:inline;.euiCheckbox__square{display:inline-flex;vertical-align:text-bottom;@supports (vertical-align: -moz-middle-with-baseline){vertical-align:sub;}}};label:controlColumn;")
+      controlColumn: /*#__PURE__*/(0, _react.css)(
+      // ❗ For some reason Chromium browsers will scrollbar stutter without this :|||
+      (0, _global_styling.logicalCSS)('max-height', '100%'), " display:inline-flex;align-items:start;gap:", euiTheme.size.xxs, ";vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;.euiDataGrid--fontSizeSmall &:where(.euiDataGridRowCell__content--defaultHeight){", (0, _global_styling.logicalCSS)('height', '100%'), " align-items:center;}.euiCheckbox:not(:has(label)){display:inline;.euiCheckbox__square{display:inline-flex;vertical-align:text-bottom;@supports (vertical-align: -moz-middle-with-baseline){vertical-align:sub;}}};label:controlColumn;")
     }
   };
 };

package/test-env/components/datagrid/controls/column_selector.js

@@ -104,7 +104,6 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       },
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
-      hasDragDrop: true,
       button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
         badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
         iconType: "tableDensityNormal",
@@ -148,7 +147,8 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         index: index,
         isDragDisabled: !isDragEnabled,
         hasInteractiveChildren: true,
-        customDragHandle: true
+        customDragHandle: true,
+        usePortal: true
       }, function (provided, state) {
         return (0, _react2.jsx)("div", {
           css: styles.euiDataGridColumnSelector__item,

package/test-env/components/datagrid/controls/column_selector.styles.js

@@ -22,7 +22,7 @@ var euiDataGridColumnSelectorStyles = exports.euiDataGridColumnSelectorStyles =
   });
   var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 50vh)");
   return {
-    euiDataGridColumnSelector: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScroll)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
+    euiDataGridColumnSelector: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
     euiDataGridColumnSelector__item: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", (0, _themes.euiShadowLarge)(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSelector__item;")
   };
 };

package/test-env/components/datagrid/controls/column_sorting.js

@@ -142,7 +142,6 @@ var DataGridSortingControl = exports.DataGridSortingControl = /*#__PURE__*/(0, _
     },
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
-    hasDragDrop: true,
     button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
       badgeContent: sorting.columns.length,
       iconType: "sortable",

package/test-env/components/datagrid/controls/column_sorting.styles.js

@@ -25,7 +25,7 @@ var euiDataGridColumnSortingStyles = exports.euiDataGridColumnSortingStyles = fu
     /**
      * Sorted fields
      */
-    euiDataGridColumnSorting: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", (0, _global_styling.euiYScroll)(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
+    euiDataGridColumnSorting: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
     euiDataGridColumnSorting__item: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " &.euiDataGridColumnSorting__item-isDragging{", (0, _themes.euiShadowLarge)(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSorting__item;"),
     euiDataGridColumnSorting__name: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), " ", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ";};label:euiDataGridColumnSorting__name;"),
     euiDataGridColumnSorting__order: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.xxl, function (x) {

package/test-env/components/datagrid/controls/column_sorting_draggable.js

@@ -92,7 +92,8 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
     draggableId: id,
     index: index,
     hasInteractiveChildren: true,
-    customDragHandle: true
+    customDragHandle: true,
+    usePortal: true
   }, rest), function (provided, state) {
     return (0, _react2.jsx)(_flex.EuiFlexGroup, {
       css: styles.euiDataGridColumnSorting__item,