@elastic/eui 95.10.1 → 95.12.0

package/es/components/datagrid/data_grid.styles.js

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { tintOrShade } from '../../services';
+import { euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+export var euiDataGridVariables = function euiDataGridVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    cellPadding: {
+      s: euiTheme.size.xs,
+      m: mathWithUnits(euiTheme.size.m, function (x) {
+        return x / 2;
+      }),
+      l: euiTheme.size.s
+    },
+    lineHeight: {
+      s: euiFontSize(euiThemeContext, 'xs').lineHeight,
+      m: euiFontSize(euiThemeContext, 'm').lineHeight
+    },
+    fontSize: {
+      s: euiFontSize(euiThemeContext, 'xs').fontSize,
+      m: euiFontSize(euiThemeContext, 's').fontSize
+    },
+    levels: {
+      cellPopover: Number(euiTheme.levels.header),
+      // Same z-index as EuiFlyout mask overlays - cell popovers should be under both modal and flyout overlays
+      get stickyHeader() {
+        return this.cellPopover - 1; // Needs to sit above the content + cell focus outlines/actions, but below actual popovers
+      }
+    }
+  };
+};
+export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
+    _cellPadding = _euiDataGridVariables.cellPadding,
+    lineHeight = _euiDataGridVariables.lineHeight,
+    _fontSize = _euiDataGridVariables.fontSize;
+  return {
+    euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", logicalCSS('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.colors.emptyShade, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.colors.lightestShade, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.colors.highlight, ";};label:euiDataGrid;"),
+    cellPadding: {
+      cellPadding: function cellPadding(size) {
+        return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}/* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */.euiDataGridRowCell__content--lineCountHeight{", logicalCSS('padding-bottom', 0), " ", logicalCSS('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
+      },
+      get s() {
+        return /*#__PURE__*/css(this.cellPadding('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/css(this.cellPadding('m'), ";label:m;");
+      },
+      get l() {
+        return /*#__PURE__*/css(this.cellPadding('l'), ";label:l;");
+      }
+    },
+    fontSize: {
+      fontSize: function fontSize(size) {
+        return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell{font-size:", _fontSize[size], ";line-height:", lineHeight[size], ";};label:fontSize;");
+      },
+      get s() {
+        return /*#__PURE__*/css(this.fontSize('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/css(this.fontSize('m'), ";label:m;");
+      },
+      get l() {
+        // On the Amsterdam theme, the l fontSize is the same as m
+        return /*#__PURE__*/css(this.fontSize('m'), ";label:l;");
+      }
+    },
+    borders: {
+      none: null,
+      horizontal: /*#__PURE__*/css("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", logicalCSS('border-top', euiTheme.border.thin), ";};label:horizontal;"),
+      all: /*#__PURE__*/css("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", logicalCSS('border-bottom', euiTheme.border.thin), " ", logicalCSS('border-right', // Visually lighten vertical borders
+      "".concat(euiTheme.border.width.thin, " solid ").concat(tintOrShade(euiTheme.border.color, 0.3, colorMode))), ";}&--firstColumn{", logicalCSS('border-left', euiTheme.border.thin), ";}&--lastColumn{", logicalCSS('border-right-color', euiTheme.border.color), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", logicalCSS('border-right', euiTheme.border.thin), " &:first-of-type{", logicalCSS('border-left', euiTheme.border.thin), ";}}.euiDataGridFooter{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', euiTheme.border.thin), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", logicalCSS('border-top', euiTheme.border.thin), ";}.euiDataGrid__controls{border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.body, ";};label:all;")
+    },
+    // Sits below the controls above it and pagination below it
+    euiDataGrid__content: /*#__PURE__*/css("z-index:1;position:relative;flex-grow:1;", logicalSizeCSS('100%'), " ", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", euiTheme.colors.body, ";font-feature-settings:'tnum' 1;;label:euiDataGrid__content;"),
+    // Wrapper around EuiDataGrid
+    euiDataGrid__focusWrap: /*#__PURE__*/css(logicalCSS('height', '100%'), ";;label:euiDataGrid__focusWrap;")
+  };
+};

package/es/components/datagrid/{utils → pagination}/data_grid_pagination.js

@@ -13,22 +13,35 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  */
 
 import React, { useCallback, useContext } from 'react';
-import { useEuiI18n } from '../../i18n'; // Note: this file must be named data_grid_pagination to match i18n tokens
-import { EuiTablePagination, useEuiTablePaginationDefaults } from '../../table/table_pagination';
-import { DataGridFocusContext } from './focus';
+import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiI18n } from '../../i18n';
+import { EuiTablePagination } from '../../table/table_pagination';
+import { DataGridFocusContext } from '../utils/focus';
+import { euiDataGridPaginationStyles } from './data_grid_pagination.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref) {
-  var pageIndex = _ref.pageIndex,
-    _pageSize = _ref.pageSize,
-    _pageSizeOptions = _ref.pageSizeOptions,
-    _onChangePage = _ref.onChangePage,
-    onChangeItemsPerPage = _ref.onChangeItemsPerPage,
-    rowCount = _ref.rowCount,
-    controls = _ref.controls,
-    ariaLabel = _ref['aria-label'];
-  var defaults = useEuiTablePaginationDefaults();
-  var pageSize = _pageSize !== null && _pageSize !== void 0 ? _pageSize : defaults.itemsPerPage;
-  var pageSizeOptions = _pageSizeOptions !== null && _pageSizeOptions !== void 0 ? _pageSizeOptions : defaults.itemsPerPageOptions;
+/**
+ * Do not render the pagination when:
+ * 1. Rows count is less than min pagination option (rows per page)
+ * 2. Rows count is less than pageSize (the case when there are no pageSizeOptions provided)
+ */
+export var shouldRenderPagination = function shouldRenderPagination(rowCount, _ref) {
+  var pageSize = _ref.pageSize,
+    pageSizeOptions = _ref.pageSizeOptions;
+  var minSizeOption = _toConsumableArray(pageSizeOptions).sort(function (a, b) {
+    return a - b;
+  })[0];
+  return !(rowCount < (minSizeOption || pageSize));
+};
+export var EuiDataGridPagination = function EuiDataGridPagination(_ref2) {
+  var pageIndex = _ref2.pageIndex,
+    pageSize = _ref2.pageSize,
+    pageSizeOptions = _ref2.pageSizeOptions,
+    _onChangePage = _ref2.onChangePage,
+    onChangeItemsPerPage = _ref2.onChangeItemsPerPage,
+    rowCount = _ref2.rowCount,
+    controls = _ref2.controls,
+    ariaLabel = _ref2['aria-label'];
+  var styles = useEuiMemoizedStyles(euiDataGridPaginationStyles);
   var detailedPaginationLabel = useEuiI18n('euiDataGridPagination.detailedPaginationLabel', 'Pagination for preceding grid: {label}', {
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ''
   });
@@ -42,28 +55,15 @@ export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRendere
     setFocusedCell([0, 0]);
   }, [setFocusedCell, _onChangePage]);
   var pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1;
-  var minSizeOption = _toConsumableArray(pageSizeOptions).sort(function (a, b) {
-    return a - b;
-  })[0];
-  if (rowCount < (minSizeOption || pageSize)) {
-    /**
-     * Do not render the pagination when:
-     * 1. Rows count is less than min pagination option (rows per page)
-     * 2. Rows count is less than pageSize (the case when there are no pageSizeOptions provided)
-     */
-    return null;
-  }
-
-  // Hide select rows per page if pageSizeOptions is an empty array
-  var hidePerPageOptions = pageSizeOptions.length === 0;
   return ___EmotionJSX("div", {
+    css: styles.euiDataGrid__pagination,
     className: "euiDataGrid__pagination"
   }, ___EmotionJSX(EuiTablePagination, {
     "aria-controls": controls,
     activePage: pageIndex,
-    showPerPageOptions: !hidePerPageOptions,
     itemsPerPage: pageSize,
     itemsPerPageOptions: pageSizeOptions,
+    showPerPageOptions: pageSizeOptions.length > 0,
     pageCount: pageCount,
     onChangePage: onChangePage,
     onChangeItemsPerPage: onChangeItemsPerPage,

package/es/components/datagrid/pagination/data_grid_pagination.styles.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+export var euiDataGridPaginationStyles = function euiDataGridPaginationStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiDataGrid__pagination: /*#__PURE__*/css("z-index:2;flex-grow:0;", logicalCSS('padding-top', euiTheme.size.xs), " .euiDataGrid--fullScreen &{", logicalCSS('padding-bottom', euiTheme.size.xs), " background-color:", euiTheme.colors.lightestShade, ";box-shadow:", euiTheme.border.width.thin, " 0 0 ", euiTheme.border.width.thin, " ", euiTheme.border.color, ";};label:euiDataGrid__pagination;")
+  };
+};

package/es/components/datagrid/pagination/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { shouldRenderPagination, EuiDataGridPagination } from './data_grid_pagination';

package/es/components/datagrid/utils/row_heights.js

@@ -32,26 +32,12 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useForceRender, useLatest } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
 import { DataGridSortedContext } from './sorting';
-
-// TODO: Once JS variables are available, use them here instead of hard-coded maps
-export var cellPaddingsMap = {
-  s: 4,
-  m: 6,
-  l: 8
-};
-export var AUTO_HEIGHT = 'auto';
-export var DEFAULT_ROW_HEIGHT = 34;
+var AUTO_HEIGHT = 'auto';
+var DEFAULT_ROW_HEIGHT = 34;
 export var RowHeightUtils = /*#__PURE__*/function () {
   function RowHeightUtils() {
     var _this = this;
     _classCallCheck(this, RowHeightUtils);
-    /**
-     * Styles utils
-     */
-    _defineProperty(this, "styles", {
-      paddingTop: 0,
-      paddingBottom: 0
-    });
     /**
      * Height types
      */
@@ -62,8 +48,9 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       if (option === AUTO_HEIGHT) {
         return 'auto';
       }
-      if (_this.getLineCount(option) != null) {
-        return 'lineCount';
+      var lineCount = _this.getLineCount(option);
+      if (lineCount != null) {
+        return lineCount > 1 ? 'lineCount' : 'default';
       }
       return 'numerical';
     });
@@ -106,14 +93,6 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       }
       return defaultHeight;
     }
-  }, {
-    key: "cacheStyles",
-    value: function cacheStyles(gridStyles) {
-      this.styles = {
-        paddingTop: cellPaddingsMap[gridStyles.cellPadding || 'm'],
-        paddingBottom: cellPaddingsMap[gridStyles.cellPadding || 'm']
-      };
-    }
   }, {
     key: "getLineCount",
     value:
@@ -126,11 +105,14 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "calculateHeightForLineCount",
-    value: function calculateHeightForLineCount(cellRef, lineCount, excludePadding) {
+    value: function calculateHeightForLineCount(cellRef, lineCount) {
       var computedStyles = window.getComputedStyle(cellRef, null);
       var lineHeight = parseInt(computedStyles.lineHeight, 10);
       var contentHeight = Math.ceil(lineCount * lineHeight);
-      return excludePadding ? contentHeight : contentHeight + this.styles.paddingTop + this.styles.paddingBottom;
+      var padding = parseInt(computedStyles.paddingTop, 10);
+
+      // Assumes both padding-top and bottom are the same
+      return contentHeight + padding * 2;
     }
 
     /**
@@ -288,7 +270,6 @@ export var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils
 export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   var virtualization = _ref2.virtualization,
     rowHeightsOptions = _ref2.rowHeightsOptions,
-    gridStyles = _ref2.gridStyles,
     columns = _ref2.columns;
   var forceRenderRef = useLatest(useForceRender());
   var _useState = useState(function () {
@@ -316,13 +297,6 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   // Dependencies
   rowHeightUtils, forceRenderRef]);
 
-  // Re-cache styles whenever grid density changes
-  useEffect(function () {
-    rowHeightUtils.cacheStyles({
-      cellPadding: gridStyles.cellPadding
-    });
-  }, [gridStyles.cellPadding, rowHeightUtils]);
-
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   useEffect(function () {
     rowHeightUtils.pruneHiddenColumnHeights(columns);

package/es/components/datagrid/utils/scrolling.js

@@ -11,8 +11,11 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
  */
 
 import React, { useContext, useEffect, useCallback, useMemo } from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
 import { DataGridCellPopoverContext } from '../body/cell';
 import { DataGridFocusContext } from './focus';
+import { euiDataGridScrollBarStyles } from './scrolling.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
@@ -208,6 +211,7 @@ export var useScrollBars = function useScrollBars(outerGridRef) {
   // If the grid scrolls or has scrollbars, we add custom border overlays
   // (since borders are normally set by cells) to ensure our grid body has
   // ending borders regardless of scroll position
+  var styles = useEuiMemoizedStyles(euiDataGridScrollBarStyles);
   var scrollBorderOverlay = useMemo(function () {
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
@@ -216,22 +220,25 @@ export var useScrollBars = function useScrollBars(outerGridRef) {
       return null; // Nothing to render if the grid doesn't use borders
     }
     return ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollOverlay,
       className: "euiDataGrid__scrollOverlay",
       role: "presentation"
     }, scrollBarHeight > 0 && ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollBarOverlayBottom,
       className: "euiDataGrid__scrollBarOverlayBottom",
-      style: {
-        bottom: scrollBarHeight,
-        right: 0
-      }
+      style: logicalStyles({
+        bottom: scrollBarHeight
+      })
     }), scrollBarWidth > 0 && ___EmotionJSX("div", {
+      css: styles.euiDataGrid__scrollBarOverlayRight,
       className: "euiDataGrid__scrollBarOverlayRight",
-      style: {
+      style: logicalStyles({
+        top: 0,
         bottom: scrollBarHeight,
         right: scrollBarWidth
-      }
+      })
     }));
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle]);
+  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle, styles]);
   return {
     scrollBarHeight: scrollBarHeight,
     scrollBarWidth: scrollBarWidth,

package/es/components/datagrid/utils/scrolling.styles.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+export var euiDataGridScrollBarStyles = function euiDataGridScrollBarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Note that 'borders' *must* be rendered with inset box-shadow, because actual
+  // `border` CSS will affect the relative position of the child scroll bar overlays
+  // and cause them to be off by the width of the border
+  var borderWidth = euiTheme.border.width.thin;
+  var borderColor = euiTheme.border.color;
+  return {
+    euiDataGrid__scrollOverlay: /*#__PURE__*/css("position:absolute;inset:0;", logicalCSS('top', "-".concat(borderWidth)), "pointer-events:none;box-shadow:inset 0 0 0 ", borderWidth, " ", borderColor, ";.euiDataGrid--bordersHorizontal &{box-shadow:inset 0 -", mathWithUnits(borderWidth, function (x) {
+      return x * 2;
+    }), " 0 -", borderWidth, " ", borderColor, ";};label:euiDataGrid__scrollOverlay;"),
+    // Ensure the horizontal scrollbar has a top border
+    euiDataGrid__scrollBarOverlayBottom: /*#__PURE__*/css("position:absolute;inset-inline:0;", logicalCSS('height', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayBottom;"),
+    // Ensure the vertical scrollbar has a left border
+    euiDataGrid__scrollBarOverlayRight: /*#__PURE__*/css("position:absolute;", logicalCSS('width', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayRight;")
+    // Note: Scroll bar border positions are set via JS inline style, since
+    // JS has access to the exact OS scrollbar width/height and CSS doesn't
+  };
+};

package/es/components/date_picker/date_picker.js

@@ -200,7 +200,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     className: classes
   }, ___EmotionJSX(EuiFormControlLayout, _extends({
     icon: optionalIcon,
-    clear: selected && onClear ? {
+    clear: selected && !disabled && onClear ? {
       onClick: onClear
     } : undefined,
     isLoading: isLoading,

package/es/components/flyout/flyout_resizable.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -35,10 +35,13 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     side = _ref$side === void 0 ? 'right' : _ref$side,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasOverlay = type === 'overlay' && ownFocus;
   var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
   var getFlyoutMinMaxWidth = useCallback(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -142,6 +145,7 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     maxWidth: maxWidth,
     side: side,
     type: type,
+    ownFocus: ownFocus,
     ref: setRefs
   }), ___EmotionJSX(EuiResizableButton, {
     isHorizontal: true,

package/es/components/flyout/flyout_resizable.styles.js

@@ -10,6 +10,30 @@ 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: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;"
+} : {
+  name: "1vfos8p-right",
+  styles: "justify-content:flex-start;label:right;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;"
+} : {
+  name: "1ydooaf-left",
+  styles: "justify-content:flex-end;label:left;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;"
+} : {
+  name: "1cw850z-noOverlay",
+  styles: "margin-inline:0;label:noOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "1gfwqnd-euiFlyoutResizableButton",
   styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
@@ -17,17 +41,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref,
+    euiFlyoutResizableButton: _ref4,
     overlay: {
       left: /*#__PURE__*/css(logicalCSS('right', 0), ";;label:left;"),
       right: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:right;")
     },
     push: {
-      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thick)), ";;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
+    },
+    noOverlay: {
+      noOverlay: _ref3,
+      left: _ref2,
+      right: _ref
     }
   };
 };

package/es/components/popover/popover.js

@@ -437,7 +437,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = ___EmotionJSX(EuiPortal, {
+        panel = ___EmotionJSX(EuiPortal, insert && {
           insert: insert
         }, ___EmotionJSX(EuiFocusTrap, _extends({
           clickOutsideDisables: true,

package/es/components/provider/provider.js

@@ -14,6 +14,7 @@ import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
 import { EuiCacheProvider } from './cache';
+import { EuiSystemColorModeProvider } from './system_color_mode';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import { EuiComponentDefaultsProvider } from './component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -64,17 +65,19 @@ export var EuiProvider = function EuiProvider(_ref) {
   }
   return ___EmotionJSX(EuiProviderNestedCheck, null, ___EmotionJSX(EuiCacheProvider, {
     cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
-  }, ___EmotionJSX(EuiThemeProvider, {
-    theme: theme !== null && theme !== void 0 ? theme : undefined,
-    colorMode: colorMode,
-    modify: modify
-  }, theme && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCacheProvider, {
-    cache: globalCache,
-    children: Globals && ___EmotionJSX(Globals, null)
-  }), ___EmotionJSX(EuiCacheProvider, {
-    cache: utilityCache,
-    children: Utilities && ___EmotionJSX(Utilities, null)
-  })), ___EmotionJSX(EuiComponentDefaultsProvider, {
-    componentDefaults: componentDefaults
-  }, children))));
+  }, ___EmotionJSX(EuiSystemColorModeProvider, null, function (systemColorMode) {
+    return ___EmotionJSX(EuiThemeProvider, {
+      theme: theme !== null && theme !== void 0 ? theme : undefined,
+      colorMode: colorMode !== null && colorMode !== void 0 ? colorMode : systemColorMode,
+      modify: modify
+    }, theme && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCacheProvider, {
+      cache: globalCache,
+      children: Globals && ___EmotionJSX(Globals, null)
+    }), ___EmotionJSX(EuiCacheProvider, {
+      cache: utilityCache,
+      children: Utilities && ___EmotionJSX(Utilities, null)
+    })), ___EmotionJSX(EuiComponentDefaultsProvider, {
+      componentDefaults: componentDefaults
+    }, children));
+  })));
 };

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiSystemColorModeProvider } from './system_color_mode_provider';

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

@@ -0,0 +1,49 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useState, useEffect } from 'react';
+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
+  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';
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    systemColorMode = _useState2[0],
+    setSystemColorMode = _useState2[1];
+
+  // Listen for system changes
+  useEffect(function () {
+    var _window$matchMedia2, _window2, _window$matchMedia2$c, _window$matchMedia2$c2;
+    var eventListener = function eventListener(event) {
+      setSystemColorMode(event.matches ? 'DARK' : 'LIGHT');
+    };
+
+    // Optional chaining here is for test environments - SSR should not run useEffect
+    (_window$matchMedia2 = (_window2 = window).matchMedia) === null || _window$matchMedia2 === void 0 || (_window$matchMedia2$c = (_window$matchMedia2$c2 = _window$matchMedia2.call(_window2, COLOR_MODE_MEDIA_QUERY)).addEventListener) === null || _window$matchMedia2$c === void 0 || _window$matchMedia2$c.call(_window$matchMedia2$c2, 'change', eventListener);
+
+    // Clean up the listener on unmount
+    return function () {
+      var _window$matchMedia3, _window3, _window$matchMedia3$c, _window$matchMedia3$c2;
+      (_window$matchMedia3 = (_window3 = window).matchMedia) === null || _window$matchMedia3 === void 0 || (_window$matchMedia3$c = (_window$matchMedia3$c2 = _window$matchMedia3.call(_window3, COLOR_MODE_MEDIA_QUERY)).removeEventListener) === null || _window$matchMedia3$c === void 0 || _window$matchMedia3$c.call(_window$matchMedia3$c2, 'change', eventListener);
+    };
+  }, []);
+  return children(systemColorMode);
+};
+EuiSystemColorModeProvider.propTypes = {
+  children: PropTypes.func.isRequired
+};

package/es/components/resizable_container/resizable_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["isHorizontal", "indicator", "alignIndicator", "className"],
+var _excluded = ["isHorizontal", "indicator", "alignIndicator", "accountForScrollbars", "className"],
   _excluded2 = ["registration", "id", "disabled", "onFocus"];
 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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -35,12 +35,13 @@ export var EuiResizableButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     indicator = _ref$indicator === void 0 ? 'handle' : _ref$indicator,
     _ref$alignIndicator = _ref.alignIndicator,
     alignIndicator = _ref$alignIndicator === void 0 ? 'center' : _ref$alignIndicator,
+    accountForScrollbars = _ref.accountForScrollbars,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiResizableButton', className);
   var resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
   var styles = useEuiMemoizedStyles(euiResizableButtonStyles);
-  var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator]];
+  var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator], styles.accountForScrollbars[resizeDirection][accountForScrollbars !== null && accountForScrollbars !== void 0 ? accountForScrollbars : 'none']];
   return ___EmotionJSX(EuiI18n, {
     tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],
     defaults: ['Press the left or right arrow keys to adjust panels size', 'Press the up or down arrow keys to adjust panels size']
@@ -79,6 +80,12 @@ EuiResizableButton.propTypes = {
        * tall content that scrolls off-screen
        */
   alignIndicator: PropTypes.oneOf(["center", "start", "end"]),
+  /**
+       * By default, EuiResizableButton will overlap into the panels before/after it.
+       * This can occasionally occlude interactive elements like scrollbars. To prevent
+       * this overlap, use this prop to remove the overlap for the specified side.
+       */
+  accountForScrollbars: PropTypes.oneOf(["before", "after", "both"]),
   /**
        * When disabled, the resizer button will be completely hidden
        */