@elastic/eui 95.12.0 → 96.0.0

package/lib/components/search_bar/search_box.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiSearchBox = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _services = require("../../services");
 var _i18n = require("../i18n");
 var _form = require("../form");
 var _popover = require("../popover");
@@ -33,7 +32,7 @@ var EuiSearchBox = exports.EuiSearchBox = function EuiSearchBox(_ref) {
     hint = _ref.hint,
     rest = _objectWithoutProperties(_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/optimize/es/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -104,7 +104,9 @@ export var euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiTheme
       defaultHeight: /*#__PURE__*/css(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__*/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){", 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__*/css(
+      // ❗ For some reason Chromium browsers will scrollbar stutter without this :|||
+      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){", 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/optimize/es/components/datagrid/controls/column_selector.js

@@ -94,7 +94,6 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       },
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
-      hasDragDrop: true,
       button: ___EmotionJSX(EuiDataGridToolbarControl, {
         badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
         iconType: "tableDensityNormal",
@@ -138,7 +137,8 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         index: index,
         isDragDisabled: !isDragEnabled,
         hasInteractiveChildren: true,
-        customDragHandle: true
+        customDragHandle: true,
+        usePortal: true
       }, function (provided, state) {
         return ___EmotionJSX("div", {
           css: styles.euiDataGridColumnSelector__item,

package/optimize/es/components/datagrid/controls/column_selector.styles.js

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiYScrollWithShadows, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiShadowLarge } from '../../../themes';
 export var euiDataGridColumnSelectorStyles = function euiDataGridColumnSelectorStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -16,7 +16,7 @@ export var euiDataGridColumnSelectorStyles = function euiDataGridColumnSelectorS
   });
   var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 50vh)");
   return {
-    euiDataGridColumnSelector: /*#__PURE__*/css(euiYScroll(euiThemeContext), " ", logicalCSS('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
+    euiDataGridColumnSelector: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), " ", logicalCSS('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
     euiDataGridColumnSelector__item: /*#__PURE__*/css("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", euiShadowLarge(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSelector__item;")
   };
 };

package/optimize/es/components/datagrid/controls/column_sorting.js

@@ -132,7 +132,6 @@ export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
     },
     anchorPosition: "downLeft",
     panelPaddingSize: "s",
-    hasDragDrop: true,
     button: ___EmotionJSX(EuiDataGridToolbarControl, {
       badgeContent: sorting.columns.length,
       iconType: "sortable",

package/optimize/es/components/datagrid/controls/column_sorting.styles.js

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiFontSize, euiMinBreakpoint, euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFontSize, euiMinBreakpoint, euiYScroll, euiYScrollWithShadows, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiShadowLarge } from '../../../themes';
 export var euiDataGridColumnSortingStyles = function euiDataGridColumnSortingStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -19,7 +19,7 @@ export var euiDataGridColumnSortingStyles = function euiDataGridColumnSortingSty
     /**
      * Sorted fields
      */
-    euiDataGridColumnSorting: /*#__PURE__*/css(logicalCSS('max-height', maxResponsiveHeight), " ", logicalCSS('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", euiYScroll(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
+    euiDataGridColumnSorting: /*#__PURE__*/css(logicalCSS('max-height', maxResponsiveHeight), " ", logicalCSS('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", euiYScrollWithShadows(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
     euiDataGridColumnSorting__item: /*#__PURE__*/css(logicalCSS('padding-horizontal', euiTheme.size.s), " &.euiDataGridColumnSorting__item-isDragging{", euiShadowLarge(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSorting__item;"),
     euiDataGridColumnSorting__name: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.xs), " ", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-right', euiTheme.size.l), ";};label:euiDataGridColumnSorting__name;"),
     euiDataGridColumnSorting__order: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('min-width', mathWithUnits(euiTheme.size.xxl, function (x) {

package/optimize/es/components/datagrid/controls/column_sorting_draggable.js

@@ -82,7 +82,8 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     draggableId: id,
     index: index,
     hasInteractiveChildren: true,
-    customDragHandle: true
+    customDragHandle: true,
+    usePortal: true
   }, rest), function (provided, state) {
     return ___EmotionJSX(EuiFlexGroup, {
       css: styles.euiDataGridColumnSorting__item,

package/optimize/es/components/drag_and_drop/draggable.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["customDragHandle", "draggableId", "isDragDisabled", "hasInteractiveChildren", "isRemovable", "index", "children", "className", "spacing", "style", "data-test-subj"];
+var _excluded = ["customDragHandle", "draggableId", "isDragDisabled", "hasInteractiveChildren", "isRemovable", "usePortal", "index", "children", "className", "spacing", "style", "data-test-subj"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -18,6 +18,7 @@ import classNames from 'classnames';
 import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { EuiDroppableContext } from './droppable';
 import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles';
+import { EuiPortal } from '../portal';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDraggable = function EuiDraggable(_ref) {
   var _ref$customDragHandle = _ref.customDragHandle,
@@ -29,6 +30,8 @@ export var EuiDraggable = function EuiDraggable(_ref) {
     hasInteractiveChildren = _ref$hasInteractiveCh === void 0 ? false : _ref$hasInteractiveCh,
     _ref$isRemovable = _ref.isRemovable,
     isRemovable = _ref$isRemovable === void 0 ? false : _ref$isRemovable,
+    _ref$usePortal = _ref.usePortal,
+    usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
     index = _ref.index,
     children = _ref.children,
     className = _ref.className,
@@ -55,7 +58,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -77,5 +80,6 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       className: classNames(classes, 'euiDraggable--clone'),
       css: cssStyles
     }, DraggableElement));
+    return isDragging && usePortal ? ___EmotionJSX(EuiPortal, null, content) : content;
   });
 };

package/optimize/es/components/page/page_header/page_header_content.js

@@ -19,7 +19,7 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSpacer } from '../../spacer';
 import { EuiTitle } from '../../title';
 import { EuiText } from '../../text';
-import { useIsWithinBreakpoints, useEuiTheme } from '../../../services';
+import { useIsWithinBreakpoints, useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBreadcrumbs } from '../../breadcrumbs';
 import { useEuiPaddingCSS } from '../../../global_styling';
@@ -61,10 +61,9 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsiveBreakpoint = useIsWithinBreakpoints(['xs', 's'], !!responsive);
-  var useTheme = useEuiTheme();
   var classes = classNames('euiPageHeaderContent', className);
-  var pageHeaderStyles = euiPageHeaderStyles(useTheme);
-  var contentStyles = euiPageHeaderContentStyles(useTheme);
+  var pageHeaderStyles = useEuiMemoizedStyles(euiPageHeaderStyles);
+  var contentStyles = useEuiMemoizedStyles(euiPageHeaderContentStyles);
   var styles = setStyleForRestrictedPageWidth(restrictWidth, style);
   var paddingSides = 'vertical';
   var paddingSize = _paddingSize;
@@ -87,7 +86,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   }
   var blockPadding = useEuiPaddingCSS(paddingSides);
   var cssStyles = [contentStyles.euiPageHeaderContent, bottomBorder && pageHeaderStyles.border, blockPadding[paddingSize]];
-  var childrenOnlyStyles = [contentStyles.flex, contentStyles[alignItems || 'center'], responsive === true && isResponsiveBreakpoint && contentStyles.responsive, responsive === 'reverse' && isResponsiveBreakpoint && contentStyles.responsiveReverse];
+  var childrenOnlyStyles = [contentStyles.childrenOnly.flex, contentStyles[alignItems || 'center'], isResponsiveBreakpoint && responsive && (responsive === 'reverse' ? contentStyles.childrenOnly.responsiveReverse : contentStyles.childrenOnly.responsive)];
 
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
@@ -146,10 +145,10 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   }
   var childrenNode = children && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), children);
   var bottomContentNode;
-  if (childrenNode || tabsNode && pageTitleNode) {
+  if (tabsNode && pageTitleNode) {
     bottomContentNode = ___EmotionJSX("div", {
       className: "euiPageHeaderContent__bottom"
-    }, childrenNode, pageTitleNode && tabsNode);
+    }, pageTitleNode && tabsNode);
   }
 
   /**
@@ -158,10 +157,14 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
    */
   var leftSideOrder;
   if (tabsNode && !pageTitleNode) {
-    leftSideOrder = ___EmotionJSX(React.Fragment, null, tabsNode, descriptionNode);
+    leftSideOrder = ___EmotionJSX(React.Fragment, null, tabsNode, descriptionNode, childrenNode);
   } else {
-    leftSideOrder = ___EmotionJSX(React.Fragment, null, pageTitleNode, descriptionNode);
+    leftSideOrder = ___EmotionJSX(React.Fragment, null, pageTitleNode, descriptionNode, childrenNode);
   }
+  var leftSideFlexItem = ___EmotionJSX(EuiFlexItem, {
+    grow: 2,
+    css: contentStyles.euiPageHeaderContent__leftSideItems
+  }, leftSideOrder);
   var rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : _toConsumableArray(rightSideItems).reverse();
@@ -171,30 +174,25 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
         key: index
       }, item);
     });
-    rightSideFlexItem = ___EmotionJSX(EuiFlexItem, {
-      grow: false
-    }, ___EmotionJSX(EuiFlexGroup, _extends({
-      wrap: true,
-      responsive: false
-    }, rightSideGroupProps), rightSideFlexItems));
+    var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];
+    rightSideFlexItem = ___EmotionJSX(EuiFlexGroup, _extends({
+      gutterSize: "l",
+      responsive: false,
+      wrap: true
+    }, rightSideGroupProps, {
+      css: _cssStyles
+    }), rightSideFlexItems);
   }
-  return alignItems === 'top' || isResponsiveBreakpoint ? ___EmotionJSX("div", _extends({
-    className: classes,
-    css: cssStyles,
-    style: styles
-  }, rest), optionalBreadcrumbs, ___EmotionJSX(EuiFlexGroup, {
-    responsive: !!responsive,
-    className: "euiPageHeaderContent__top",
-    alignItems: pageTitle ? 'flexStart' : 'baseline',
-    gutterSize: "l"
-  }, isResponsiveBreakpoint && responsive === 'reverse' ? ___EmotionJSX(React.Fragment, null, rightSideFlexItem, ___EmotionJSX(EuiFlexItem, null, leftSideOrder)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, leftSideOrder), rightSideFlexItem)), bottomContentNode) : ___EmotionJSX("div", _extends({
+  return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles,
     style: styles
   }, rest), optionalBreadcrumbs, ___EmotionJSX(EuiFlexGroup, {
     responsive: !!responsive,
+    css: contentStyles.euiPageHeaderContent__top,
     className: "euiPageHeaderContent__top",
-    alignItems: alignItems === 'bottom' ? 'flexEnd' : alignItems,
-    gutterSize: "l"
-  }, ___EmotionJSX(EuiFlexItem, null, leftSideOrder, bottomContentNode), rightSideFlexItem));
+    alignItems: alignItems === 'bottom' ? 'flexEnd' : alignItems === 'top' ? 'flexStart' : alignItems,
+    gutterSize: "l",
+    wrap: true
+  }, isResponsiveBreakpoint && responsive === 'reverse' ? ___EmotionJSX(React.Fragment, null, rightSideFlexItem, leftSideFlexItem) : ___EmotionJSX(React.Fragment, null, leftSideFlexItem, rightSideFlexItem)), bottomContentNode);
 };

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

@@ -10,6 +10,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
 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;"
 } : {
@@ -17,7 +25,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;"
 } : {
@@ -25,7 +33,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;"
 } : {
@@ -33,7 +41,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;"
 } : {
@@ -41,7 +49,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;"
 } : {
@@ -49,7 +57,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;"
 } : {
@@ -57,21 +65,25 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:flex-start;label:top;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+export var euiPageHeaderContentStyles = function euiPageHeaderContentStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     euiPageHeaderContent: /*#__PURE__*/css(logicalCSS('width', '100%'), " ", 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__*/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__*/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__*/css("@container (max-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/css("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", logicalCSS('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/css("position:relative;", logicalCSS('top', "-".concat(euiTheme.size.xs)), " ", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

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

@@ -11,10 +11,10 @@ import { useState, useEffect } from 'react';
 export var COLOR_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 export var 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 = 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 = _slicedToArray(_useState, 2),
     systemColorMode = _useState2[0],

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

@@ -9,8 +9,7 @@ var _excluded = ["query", "placeholder", "incremental", "hint"];
  * Side Public License, v 1.
  */
 
-import React, { useRef } from 'react';
-import { useUpdateEffect } from '../../services';
+import React, { useRef, useLayoutEffect } from 'react';
 import { useEuiI18n } from '../i18n';
 import { EuiFieldSearch } from '../form';
 import { EuiInputPopover } from '../popover';
@@ -22,7 +21,7 @@ export var EuiSearchBox = function EuiSearchBox(_ref) {
     hint = _ref.hint,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _inputRef = useRef(null);
-  useUpdateEffect(function () {
+  useLayoutEffect(function () {
     if (_inputRef.current) {
       _inputRef.current.value = query;
       _inputRef.current.dispatchEvent(new Event('change'));

package/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/components/datagrid/controls/column_sorting.js

@@ -141,7 +141,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/optimize/lib/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/optimize/lib/components/datagrid/controls/column_sorting_draggable.js

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

package/optimize/lib/components/drag_and_drop/draggable.js

@@ -15,8 +15,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _droppable = require("./droppable");
 var _draggable = require("./draggable.styles");
+var _portal = require("../portal");
 var _react2 = require("@emotion/react");
-var _excluded = ["customDragHandle", "draggableId", "isDragDisabled", "hasInteractiveChildren", "isRemovable", "index", "children", "className", "spacing", "style", "data-test-subj"];
+var _excluded = ["customDragHandle", "draggableId", "isDragDisabled", "hasInteractiveChildren", "isRemovable", "usePortal", "index", "children", "className", "spacing", "style", "data-test-subj"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +39,8 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
     hasInteractiveChildren = _ref$hasInteractiveCh === void 0 ? false : _ref$hasInteractiveCh,
     _ref$isRemovable = _ref.isRemovable,
     isRemovable = _ref$isRemovable === void 0 ? false : _ref$isRemovable,
+    _ref$usePortal = _ref.usePortal,
+    usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
     index = _ref.index,
     children = _ref.children,
     className = _ref.className,
@@ -64,7 +67,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -86,5 +89,6 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
       className: (0, _classnames.default)(classes, 'euiDraggable--clone'),
       css: cssStyles
     }, DraggableElement));
+    return isDragging && usePortal ? (0, _react2.jsx)(_portal.EuiPortal, null, content) : content;
   });
 };

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

@@ -67,10 +67,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsiveBreakpoint = (0, _services.useIsWithinBreakpoints)(['xs', 's'], !!responsive);
-  var useTheme = (0, _services.useEuiTheme)();
   var classes = (0, _classnames.default)('euiPageHeaderContent', className);
-  var pageHeaderStyles = (0, _page_header.euiPageHeaderStyles)(useTheme);
-  var contentStyles = (0, _page_header_content.euiPageHeaderContentStyles)(useTheme);
+  var pageHeaderStyles = (0, _services.useEuiMemoizedStyles)(_page_header.euiPageHeaderStyles);
+  var contentStyles = (0, _services.useEuiMemoizedStyles)(_page_header_content.euiPageHeaderContentStyles);
   var styles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, style);
   var paddingSides = 'vertical';
   var paddingSize = _paddingSize;
@@ -93,7 +92,7 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
   }
   var blockPadding = (0, _global_styling.useEuiPaddingCSS)(paddingSides);
   var cssStyles = [contentStyles.euiPageHeaderContent, bottomBorder && pageHeaderStyles.border, blockPadding[paddingSize]];
-  var childrenOnlyStyles = [contentStyles.flex, contentStyles[alignItems || 'center'], responsive === true && isResponsiveBreakpoint && contentStyles.responsive, responsive === 'reverse' && isResponsiveBreakpoint && contentStyles.responsiveReverse];
+  var childrenOnlyStyles = [contentStyles.childrenOnly.flex, contentStyles[alignItems || 'center'], isResponsiveBreakpoint && responsive && (responsive === 'reverse' ? contentStyles.childrenOnly.responsiveReverse : contentStyles.childrenOnly.responsive)];
 
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
@@ -152,10 +151,10 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
   }
   var childrenNode = children && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), children);
   var bottomContentNode;
-  if (childrenNode || tabsNode && pageTitleNode) {
+  if (tabsNode && pageTitleNode) {
     bottomContentNode = (0, _react2.jsx)("div", {
       className: "euiPageHeaderContent__bottom"
-    }, childrenNode, pageTitleNode && tabsNode);
+    }, pageTitleNode && tabsNode);
   }
 
   /**
@@ -164,10 +163,14 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
    */
   var leftSideOrder;
   if (tabsNode && !pageTitleNode) {
-    leftSideOrder = (0, _react2.jsx)(_react.default.Fragment, null, tabsNode, descriptionNode);
+    leftSideOrder = (0, _react2.jsx)(_react.default.Fragment, null, tabsNode, descriptionNode, childrenNode);
   } else {
-    leftSideOrder = (0, _react2.jsx)(_react.default.Fragment, null, pageTitleNode, descriptionNode);
+    leftSideOrder = (0, _react2.jsx)(_react.default.Fragment, null, pageTitleNode, descriptionNode, childrenNode);
   }
+  var leftSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: 2,
+    css: contentStyles.euiPageHeaderContent__leftSideItems
+  }, leftSideOrder);
   var rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : (0, _toConsumableArray2.default)(rightSideItems).reverse();
@@ -177,30 +180,25 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
         key: index
       }, item);
     });
-    rightSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexItem, {
-      grow: false
-    }, (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
-      wrap: true,
-      responsive: false
-    }, rightSideGroupProps), rightSideFlexItems));
+    var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];
+    rightSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
+      gutterSize: "l",
+      responsive: false,
+      wrap: true
+    }, rightSideGroupProps, {
+      css: _cssStyles
+    }), rightSideFlexItems);
   }
-  return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes,
-    css: cssStyles,
-    style: styles
-  }, rest), optionalBreadcrumbs, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-    responsive: !!responsive,
-    className: "euiPageHeaderContent__top",
-    alignItems: pageTitle ? 'flexStart' : 'baseline',
-    gutterSize: "l"
-  }, isResponsiveBreakpoint && responsive === 'reverse' ? (0, _react2.jsx)(_react.default.Fragment, null, rightSideFlexItem, (0, _react2.jsx)(_flex.EuiFlexItem, null, leftSideOrder)) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, leftSideOrder), rightSideFlexItem)), bottomContentNode) : (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles,
     style: styles
   }, rest), optionalBreadcrumbs, (0, _react2.jsx)(_flex.EuiFlexGroup, {
     responsive: !!responsive,
+    css: contentStyles.euiPageHeaderContent__top,
     className: "euiPageHeaderContent__top",
-    alignItems: alignItems === 'bottom' ? 'flexEnd' : alignItems,
-    gutterSize: "l"
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, null, leftSideOrder, bottomContentNode), rightSideFlexItem));
+    alignItems: alignItems === 'bottom' ? 'flexEnd' : alignItems === 'top' ? 'flexStart' : alignItems,
+    gutterSize: "l",
+    wrap: true
+  }, isResponsiveBreakpoint && responsive === 'reverse' ? (0, _react2.jsx)(_react.default.Fragment, null, rightSideFlexItem, leftSideFlexItem) : (0, _react2.jsx)(_react.default.Fragment, null, leftSideFlexItem, rightSideFlexItem)), bottomContentNode);
 };