@elastic/eui 95.12.0 → 96.1.0

package/es/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.bool,
     /**

package/es/components/breadcrumbs/breadcrumbs.js

@@ -264,6 +264,8 @@ EuiBreadcrumbs.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.bool,
       /**

package/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/es/components/datagrid/controls/column_selector.js

@@ -102,7 +102,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",
@@ -146,7 +145,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/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/es/components/datagrid/controls/column_sorting.js

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

package/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/es/components/datagrid/controls/column_sorting_draggable.js

@@ -89,7 +89,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/es/components/drag_and_drop/draggable.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -23,6 +23,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,
@@ -34,6 +35,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,
@@ -60,7 +63,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,
@@ -82,6 +85,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       className: classNames(classes, 'euiDraggable--clone'),
       css: cssStyles
     }, DraggableElement));
+    return isDragging && usePortal ? ___EmotionJSX(EuiPortal, null, content) : content;
   });
 };
 EuiDraggable.propTypes = {
@@ -103,6 +107,15 @@ EuiDraggable.propTypes = {
      * Whether the item is currently in a position to be removed
      */
   isRemovable: PropTypes.bool,
+  /**
+     * Whether the currently dragged item is cloned into a portal in the body. This settings will
+     * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
+     * `EuiModal` and `EuiPopover`).
+     *
+     * Make sure to apply styles directly to the Draggable content as relative styling from an outside
+     * scope might not be applied when the content is placed in a portal as the DOM structure changes.
+     */
+  usePortal: PropTypes.bool,
   /**
      * Adds padding to the draggable item
      */

package/es/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -210,6 +210,8 @@ EuiHeaderBreadcrumbs.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.bool,
       /**

package/es/components/header/header_links/header_links.js

@@ -249,6 +249,8 @@ EuiHeaderLinks.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.bool,
     /**

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

@@ -26,7 +26,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';
@@ -68,10 +68,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;
@@ -94,7 +93,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) {
@@ -153,10 +152,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);
   }
 
   /**
@@ -165,10 +164,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();
@@ -178,32 +181,27 @@ 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);
 };
 EuiPageHeaderContent.propTypes = {
   className: PropTypes.string,
@@ -211,7 +209,8 @@ EuiPageHeaderContent.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
   /**
-     * The only option is on/off
+     * If not set, defaults to true if `tabs` are passed and render at the bottom of the page.
+     * Otherwise, defaults to false.
      */
   bottomBorder: PropTypes.bool,
   /**
@@ -231,8 +230,8 @@ EuiPageHeaderContent.propTypes = {
   alignItems: PropTypes.any,
   /**
      * Pass custom an array of content to this side usually up to 3 buttons.
-     * The first button should be primary, usually with `fill` and will be visually displayed as the last item,
-     * but first in the tab order
+     * The first button should be primary, usually with `fill`. At larger breakpoints, items will
+     * render from right to left, but will collapse vertically and render left to right on smaller mobile screens.
      */
   rightSideItems: PropTypes.arrayOf(PropTypes.node.isRequired),
   /**
@@ -424,6 +423,8 @@ EuiPageHeaderContent.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.bool,
       /**

package/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/es/components/popover/popover.js

@@ -663,6 +663,8 @@ EuiPopover.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.bool,
   /**

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

@@ -17,10 +17,10 @@ import PropTypes from "prop-types";
 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/es/components/search_bar/search_box.js

@@ -10,9 +10,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useRef } from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import PropTypes from "prop-types";
-import { useUpdateEffect } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiFieldSearch } from '../form';
 import { EuiInputPopover } from '../popover';
@@ -24,7 +23,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/es/components/tour/tour_step.js

@@ -260,6 +260,8 @@ EuiTourStep.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.bool,
   /**

package/eui.d.ts

@@ -5976,6 +5976,8 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * 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?: boolean;
 	    /**
@@ -15730,6 +15732,15 @@ declare module '@elastic/eui/src/components/drag_and_drop/draggable' {
 	     * Whether the item is currently in a position to be removed
 	     */
 	    isRemovable?: boolean;
+	    /**
+	     * Whether the currently dragged item is cloned into a portal in the body. This settings will
+	     * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
+	     * `EuiModal` and `EuiPopover`).
+	     *
+	     * Make sure to apply styles directly to the Draggable content as relative styling from an outside
+	     * scope might not be applied when the content is placed in a portal as the DOM structure changes.
+	     */
+	    usePortal?: boolean;
 	    /**
 	     * Adds padding to the draggable item
 	     */
@@ -20659,9 +20670,14 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    bottom: import("@emotion/utils").SerializedStyles;
 	    center: import("@emotion/utils").SerializedStyles;
 	    stretch: import("@emotion/utils").SerializedStyles;
-	    flex: import("@emotion/utils").SerializedStyles;
-	    responsive: import("@emotion/utils").SerializedStyles;
-	    responsiveReverse: import("@emotion/utils").SerializedStyles;
+	    childrenOnly: {
+	        flex: import("@emotion/utils").SerializedStyles;
+	        responsive: import("@emotion/utils").SerializedStyles;
+	        responsiveReverse: import("@emotion/utils").SerializedStyles;
+	    };
+	    euiPageHeaderContent__top: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__leftSideItems: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__rightSideItems: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__titleIcon: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -20736,7 +20752,8 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	}
 	export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft, _EuiPageRestrictWidth {
 	    /**
-	     * The only option is on/off
+	     * If not set, defaults to true if `tabs` are passed and render at the bottom of the page.
+	     * Otherwise, defaults to false.
 	     */
 	    bottomBorder?: boolean;
 	    /**
@@ -20756,8 +20773,8 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    alignItems?: (typeof ALIGN_ITEMS)[number];
 	    /**
 	     * Pass custom an array of content to this side usually up to 3 buttons.
-	     * The first button should be primary, usually with `fill` and will be visually displayed as the last item,
-	     * but first in the tab order
+	     * The first button should be primary, usually with `fill`. At larger breakpoints, items will
+	     * render from right to left, but will collapse vertically and render left to right on smaller mobile screens.
 	     */
 	    rightSideItems?: ReactNode[];
 	    /**