@elastic/eui 95.12.0 → 96.0.0

package/i18ntokens.json

@@ -1409,14 +1409,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 159,
+        "line": 158,
         "column": 12,
-        "index": 4993
+        "index": 4973
       },
       "end": {
-        "line": 159,
+        "line": 158,
         "column": 74,
-        "index": 5055
+        "index": 5035
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1427,14 +1427,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 165,
+        "line": 164,
         "column": 12,
-        "index": 5201
+        "index": 5181
       },
       "end": {
-        "line": 171,
+        "line": 170,
         "column": 13,
-        "index": 5413
+        "index": 5393
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1445,14 +1445,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 165,
+        "line": 164,
         "column": 12,
-        "index": 5201
+        "index": 5181
       },
       "end": {
-        "line": 171,
+        "line": 170,
         "column": 13,
-        "index": 5413
+        "index": 5393
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1465,12 +1465,12 @@
       "start": {
         "line": 288,
         "column": 18,
-        "index": 10378
+        "index": 10386
       },
       "end": {
         "line": 291,
         "column": 20,
-        "index": 10502
+        "index": 10510
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1483,12 +1483,12 @@
       "start": {
         "line": 301,
         "column": 18,
-        "index": 10862
+        "index": 10870
       },
       "end": {
         "line": 304,
         "column": 20,
-        "index": 10984
+        "index": 10992
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1553,14 +1553,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 119,
+        "line": 120,
         "column": 14,
-        "index": 3743
+        "index": 3759
       },
       "end": {
-        "line": 123,
+        "line": 124,
         "column": 15,
-        "index": 3932
+        "index": 3948
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting_draggable.tsx"
@@ -1571,14 +1571,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 129,
+        "line": 130,
         "column": 12,
-        "index": 4120
+        "index": 4136
       },
       "end": {
-        "line": 133,
+        "line": 134,
         "column": 13,
-        "index": 4302
+        "index": 4318
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting_draggable.tsx"
@@ -1589,14 +1589,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 177,
+        "line": 178,
         "column": 12,
-        "index": 5805
+        "index": 5821
       },
       "end": {
-        "line": 181,
+        "line": 182,
         "column": 13,
-        "index": 5983
+        "index": 5999
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting_draggable.tsx"
@@ -1643,14 +1643,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 221,
+        "line": 220,
         "column": 14,
-        "index": 6957
+        "index": 6937
       },
       "end": {
-        "line": 224,
+        "line": 223,
         "column": 16,
-        "index": 7093
+        "index": 7073
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting.tsx"
@@ -1661,14 +1661,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 254,
+        "line": 253,
         "column": 24,
-        "index": 8316
+        "index": 8296
       },
       "end": {
-        "line": 257,
+        "line": 256,
         "column": 26,
-        "index": 8472
+        "index": 8452
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting.tsx"
@@ -1679,14 +1679,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 329,
+        "line": 328,
         "column": 20,
-        "index": 11826
+        "index": 11806
       },
       "end": {
-        "line": 332,
+        "line": 331,
         "column": 22,
-        "index": 11959
+        "index": 11939
       }
     },
     "filepath": "src/components/datagrid/controls/column_sorting.tsx"
@@ -5927,14 +5927,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 698,
+        "line": 700,
         "column": 16,
-        "index": 20714
+        "index": 20806
       },
       "end": {
-        "line": 701,
+        "line": 703,
         "column": 18,
-        "index": 20908
+        "index": 21000
       }
     },
     "filepath": "src/components/popover/popover.tsx"
@@ -6017,14 +6017,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 49,
+        "line": 48,
         "column": 29,
-        "index": 1421
+        "index": 1388
       },
       "end": {
-        "line": 52,
+        "line": 51,
         "column": 3,
-        "index": 1484
+        "index": 1451
       }
     },
     "filepath": "src/components/search_bar/search_box.tsx"
@@ -6035,14 +6035,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 53,
+        "line": 52,
         "column": 31,
-        "index": 1517
+        "index": 1484
       },
       "end": {
-        "line": 56,
+        "line": 55,
         "column": 3,
-        "index": 1671
+        "index": 1638
       }
     },
     "filepath": "src/components/search_bar/search_box.tsx"
@@ -6053,14 +6053,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 57,
+        "line": 56,
         "column": 25,
-        "index": 1698
+        "index": 1665
       },
       "end": {
-        "line": 60,
+        "line": 59,
         "column": 3,
-        "index": 1847
+        "index": 1814
       }
     },
     "filepath": "src/components/search_bar/search_box.tsx"

package/lib/components/breadcrumbs/_breadcrumb_content.js

@@ -260,6 +260,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/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/lib/components/datagrid/controls/column_selector.js

@@ -110,7 +110,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",
@@ -154,7 +153,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/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/lib/components/datagrid/controls/column_sorting.js

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

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

@@ -12,8 +12,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
@@ -42,6 +43,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,
@@ -68,7 +71,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", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -90,6 +93,7 @@ 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;
   });
 };
 EuiDraggable.propTypes = {
@@ -111,6 +115,15 @@ EuiDraggable.propTypes = {
      * Whether the item is currently in a position to be removed
      */
   isRemovable: _propTypes.default.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.default.bool,
   /**
      * Adds padding to the draggable item
      */

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

@@ -74,10 +74,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     style = _ref.style,
     rest = _objectWithoutProperties(_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;
@@ -100,7 +99,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) {
@@ -159,10 +158,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);
   }
 
   /**
@@ -171,10 +170,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 : _toConsumableArray(rightSideItems).reverse();
@@ -184,32 +187,27 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
         key: index
       }, item);
     });
-    rightSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexItem, {
-      grow: false
-    }, (0, _react2.jsx)(_flex.EuiFlexGroup, _extends({
-      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, _extends({
+      gutterSize: "l",
+      responsive: false,
+      wrap: true
+    }, rightSideGroupProps, {
+      css: _cssStyles
+    }), rightSideFlexItems);
   }
-  return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", _extends({
-    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", _extends({
+  return (0, _react2.jsx)("div", _extends({
     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);
 };
 EuiPageHeaderContent.propTypes = {
   className: _propTypes.default.string,
@@ -217,7 +215,8 @@ EuiPageHeaderContent.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.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.default.bool,
   /**
@@ -237,8 +236,8 @@ EuiPageHeaderContent.propTypes = {
   alignItems: _propTypes.default.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.default.arrayOf(_propTypes.default.node.isRequired),
   /**

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

@@ -653,6 +653,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.default.bool,
   /**

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

@@ -22,10 +22,10 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
 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 = _slicedToArray(_useState, 2),
     systemColorMode = _useState2[0],