@elastic/eui 95.10.1 → 95.12.0

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridVariables = exports.euiDataGridStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+/*
+ * 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.
+ */
+
+var euiDataGridVariables = exports.euiDataGridVariables = function euiDataGridVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    cellPadding: {
+      s: euiTheme.size.xs,
+      m: (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
+        return x / 2;
+      }),
+      l: euiTheme.size.s
+    },
+    lineHeight: {
+      s: (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').lineHeight,
+      m: (0, _global_styling.euiFontSize)(euiThemeContext, 'm').lineHeight
+    },
+    fontSize: {
+      s: (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize,
+      m: (0, _global_styling.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
+      }
+    }
+  };
+};
+var euiDataGridStyles = exports.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__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.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__*/(0, _react.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{", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
+      },
+      get s() {
+        return /*#__PURE__*/(0, _react.css)(this.cellPadding('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/(0, _react.css)(this.cellPadding('m'), ";label:m;");
+      },
+      get l() {
+        return /*#__PURE__*/(0, _react.css)(this.cellPadding('l'), ";label:l;");
+      }
+    },
+    fontSize: {
+      fontSize: function fontSize(size) {
+        return /*#__PURE__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell{font-size:", _fontSize[size], ";line-height:", lineHeight[size], ";};label:fontSize;");
+      },
+      get s() {
+        return /*#__PURE__*/(0, _react.css)(this.fontSize('s'), ";label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/(0, _react.css)(this.fontSize('m'), ";label:m;");
+      },
+      get l() {
+        // On the Amsterdam theme, the l fontSize is the same as m
+        return /*#__PURE__*/(0, _react.css)(this.fontSize('m'), ";label:l;");
+      }
+    },
+    borders: {
+      none: null,
+      horizontal: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:horizontal;"),
+      all: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-right', // Visually lighten vertical borders
+      "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.tintOrShade)(euiTheme.border.color, 0.3, colorMode))), ";}&--firstColumn{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}&--lastColumn{", (0, _global_styling.logicalCSS)('border-right-color', euiTheme.border.color), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " &:first-of-type{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}}.euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", (0, _global_styling.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__*/(0, _react.css)("z-index:1;position:relative;flex-grow:1;", (0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiDataGrid__focusWrap;")
+  };
+};

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

@@ -4,11 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDataGridPaginationRenderer = void 0;
+exports.shouldRenderPagination = exports.EuiDataGridPagination = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _table_pagination = require("../../table/table_pagination");
-var _focus = require("./focus");
+var _focus = require("../utils/focus");
+var _data_grid_pagination = require("./data_grid_pagination.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,19 +25,30 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
  * 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.
- */ // Note: this file must be named data_grid_pagination to match i18n tokens
-var EuiDataGridPaginationRenderer = exports.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 = (0, _table_pagination.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)
+ */
+var shouldRenderPagination = exports.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));
+};
+var EuiDataGridPagination = exports.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 = (0, _services.useEuiMemoizedStyles)(_data_grid_pagination.euiDataGridPaginationStyles);
   var detailedPaginationLabel = (0, _i18n.useEuiI18n)('euiDataGridPagination.detailedPaginationLabel', 'Pagination for preceding grid: {label}', {
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ''
   });
@@ -49,28 +62,15 @@ var EuiDataGridPaginationRenderer = exports.EuiDataGridPaginationRenderer = func
     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 (0, _react2.jsx)("div", {
+    css: styles.euiDataGrid__pagination,
     className: "euiDataGrid__pagination"
   }, (0, _react2.jsx)(_table_pagination.EuiTablePagination, {
     "aria-controls": controls,
     activePage: pageIndex,
-    showPerPageOptions: !hidePerPageOptions,
     itemsPerPage: pageSize,
     itemsPerPageOptions: pageSizeOptions,
+    showPerPageOptions: pageSizeOptions.length > 0,
     pageCount: pageCount,
     onChangePage: onChangePage,
     onChangeItemsPerPage: onChangeItemsPerPage,

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridPaginationStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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.
+ */
+
+var euiDataGridPaginationStyles = exports.euiDataGridPaginationStyles = function euiDataGridPaginationStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiDataGrid__pagination: /*#__PURE__*/(0, _react.css)("z-index:2;flex-grow:0;", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " .euiDataGrid--fullScreen &{", (0, _global_styling.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/lib/components/datagrid/pagination/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiDataGridPagination", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_pagination.EuiDataGridPagination;
+  }
+});
+Object.defineProperty(exports, "shouldRenderPagination", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_pagination.shouldRenderPagination;
+  }
+});
+var _data_grid_pagination = require("./data_grid_pagination");

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRowHeightUtils = exports.useDefaultRowHeight = exports.cellPaddingsMap = exports.RowHeightVirtualizationUtils = exports.RowHeightUtils = exports.DEFAULT_ROW_HEIGHT = exports.AUTO_HEIGHT = void 0;
+exports.useRowHeightUtils = exports.useDefaultRowHeight = exports.RowHeightVirtualizationUtils = exports.RowHeightUtils = void 0;
 var _react = require("react");
 var _services = require("../../../services");
 var _predicate = require("../../../services/predicate");
@@ -36,25 +36,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-// TODO: Once JS variables are available, use them here instead of hard-coded maps
-var cellPaddingsMap = exports.cellPaddingsMap = {
-  s: 4,
-  m: 6,
-  l: 8
-};
-var AUTO_HEIGHT = exports.AUTO_HEIGHT = 'auto';
-var DEFAULT_ROW_HEIGHT = exports.DEFAULT_ROW_HEIGHT = 34;
+var AUTO_HEIGHT = 'auto';
+var DEFAULT_ROW_HEIGHT = 34;
 var RowHeightUtils = exports.RowHeightUtils = /*#__PURE__*/function () {
   function RowHeightUtils() {
     var _this = this;
     _classCallCheck(this, RowHeightUtils);
-    /**
-     * Styles utils
-     */
-    _defineProperty(this, "styles", {
-      paddingTop: 0,
-      paddingBottom: 0
-    });
     /**
      * Height types
      */
@@ -65,8 +52,9 @@ var RowHeightUtils = exports.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';
     });
@@ -109,14 +97,6 @@ var RowHeightUtils = exports.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:
@@ -129,11 +109,14 @@ var RowHeightUtils = exports.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;
     }
 
     /**
@@ -289,7 +272,6 @@ var RowHeightVirtualizationUtils = exports.RowHeightVirtualizationUtils = /*#__P
 var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_ref2) {
   var virtualization = _ref2.virtualization,
     rowHeightsOptions = _ref2.rowHeightsOptions,
-    gridStyles = _ref2.gridStyles,
     columns = _ref2.columns;
   var forceRenderRef = (0, _services.useLatest)((0, _services.useForceRender)());
   var _useState = (0, _react.useState)(function () {
@@ -317,13 +299,6 @@ var useRowHeightUtils = exports.useRowHeightUtils = function useRowHeightUtils(_
   // Dependencies
   rowHeightUtils, forceRenderRef]);
 
-  // Re-cache styles whenever grid density changes
-  (0, _react.useEffect)(function () {
-    rowHeightUtils.cacheStyles({
-      cellPadding: gridStyles.cellPadding
-    });
-  }, [gridStyles.cellPadding, rowHeightUtils]);
-
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   (0, _react.useEffect)(function () {
     rowHeightUtils.pruneHiddenColumnHeights(columns);

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

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useScrollCellIntoView = exports.useScrollBars = exports.useScroll = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
+var _global_styling = require("../../../global_styling");
 var _cell = require("../body/cell");
 var _focus = require("./focus");
+var _scrolling = require("./scrolling.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -214,6 +217,7 @@ var useScrollBars = exports.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 = (0, _services.useEuiMemoizedStyles)(_scrolling.euiDataGridScrollBarStyles);
   var scrollBorderOverlay = (0, _react.useMemo)(function () {
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
@@ -222,22 +226,25 @@ var useScrollBars = exports.useScrollBars = function useScrollBars(outerGridRef)
       return null; // Nothing to render if the grid doesn't use borders
     }
     return (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollOverlay,
       className: "euiDataGrid__scrollOverlay",
       role: "presentation"
     }, scrollBarHeight > 0 && (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollBarOverlayBottom,
       className: "euiDataGrid__scrollBarOverlayBottom",
-      style: {
-        bottom: scrollBarHeight,
-        right: 0
-      }
+      style: (0, _global_styling.logicalStyles)({
+        bottom: scrollBarHeight
+      })
     }), scrollBarWidth > 0 && (0, _react2.jsx)("div", {
+      css: styles.euiDataGrid__scrollBarOverlayRight,
       className: "euiDataGrid__scrollBarOverlayRight",
-      style: {
+      style: (0, _global_styling.logicalStyles)({
+        top: 0,
         bottom: scrollBarHeight,
         right: scrollBarWidth
-      }
+      })
     }));
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle]);
+  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth, borderStyle, styles]);
   return {
     scrollBarHeight: scrollBarHeight,
     scrollBarWidth: scrollBarWidth,

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridScrollBarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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.
+ */
+
+var euiDataGridScrollBarStyles = exports.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__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalCSS)('top', "-".concat(borderWidth)), "pointer-events:none;box-shadow:inset 0 0 0 ", borderWidth, " ", borderColor, ";.euiDataGrid--bordersHorizontal &{box-shadow:inset 0 -", (0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+      return x * 2;
+    }), " 0 -", borderWidth, " ", borderColor, ";};label:euiDataGrid__scrollOverlay;"),
+    // Ensure the horizontal scrollbar has a top border
+    euiDataGrid__scrollBarOverlayBottom: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline:0;", (0, _global_styling.logicalCSS)('height', borderWidth), " background-color:", borderColor, ";;label:euiDataGrid__scrollBarOverlayBottom;"),
+    // Ensure the vertical scrollbar has a left border
+    euiDataGrid__scrollBarOverlayRight: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.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/lib/components/date_picker/date_picker.js

@@ -209,7 +209,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     className: classes
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, _extends({
     icon: optionalIcon,
-    clear: selected && onClear ? {
+    clear: selected && !disabled && onClear ? {
       onClick: onClear
     } : undefined,
     isLoading: isLoading,

package/lib/components/flyout/flyout_resizable.js

@@ -12,7 +12,7 @@ var _helpers = require("../resizable_container/helpers");
 var _flyout = require("./flyout");
 var _flyout_resizable = require("./flyout_resizable.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,10 +43,13 @@ var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.fo
     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 = (0, _services.useEuiMemoizedStyles)(_flyout_resizable.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 = (0, _react.useCallback)(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -150,6 +153,7 @@ var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.fo
     maxWidth: maxWidth,
     side: side,
     type: type,
+    ownFocus: ownFocus,
     ref: setRefs
   }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
     isHorizontal: true,

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

@@ -14,6 +14,30 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 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;"
 } : {
@@ -21,17 +45,22 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiFlyoutResizableButtonStyles = exports.euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref,
+    euiFlyoutResizableButton: _ref4,
     overlay: {
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), ";;label:left;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), ";;label:right;")
     },
     push: {
-      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thick)), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
+    },
+    noOverlay: {
+      noOverlay: _ref3,
+      left: _ref2,
+      right: _ref
     }
   };
 };

package/lib/components/popover/popover.js

@@ -446,7 +446,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           }), popoverScreenReaderText));
         }
         var returnFocus = this.state.isOpenStable ? returnFocusConfig : false;
-        panel = (0, _react2.jsx)(_portal.EuiPortal, {
+        panel = (0, _react2.jsx)(_portal.EuiPortal, insert && {
           insert: insert
         }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, _extends({
           clickOutsideDisables: true,

package/lib/components/provider/provider.js

@@ -12,6 +12,7 @@ var _global_styles = require("../../global_styling/reset/global_styles");
 var _utility = require("../../global_styling/utility/utility");
 var _themes = require("../../themes");
 var _cache = require("./cache");
+var _system_color_mode = require("./system_color_mode");
 var _nested = require("./nested");
 var _component_defaults = require("./component_defaults");
 var _react2 = require("@emotion/react");
@@ -71,17 +72,19 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
   }
   return (0, _react2.jsx)(_nested.EuiProviderNestedCheck, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : _css.cache
-  }, (0, _react2.jsx)(_services.EuiThemeProvider, {
-    theme: theme !== null && theme !== void 0 ? theme : undefined,
-    colorMode: colorMode,
-    modify: modify
-  }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
-    cache: globalCache,
-    children: Globals && (0, _react2.jsx)(Globals, null)
-  }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
-    cache: utilityCache,
-    children: Utilities && (0, _react2.jsx)(Utilities, null)
-  })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
-    componentDefaults: componentDefaults
-  }, children))));
+  }, (0, _react2.jsx)(_system_color_mode.EuiSystemColorModeProvider, null, function (systemColorMode) {
+    return (0, _react2.jsx)(_services.EuiThemeProvider, {
+      theme: theme !== null && theme !== void 0 ? theme : undefined,
+      colorMode: colorMode !== null && colorMode !== void 0 ? colorMode : systemColorMode,
+      modify: modify
+    }, theme && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_cache.EuiCacheProvider, {
+      cache: globalCache,
+      children: Globals && (0, _react2.jsx)(Globals, null)
+    }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
+      cache: utilityCache,
+      children: Utilities && (0, _react2.jsx)(Utilities, null)
+    })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
+      componentDefaults: componentDefaults
+    }, children));
+  })));
 };

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiSystemColorModeProvider", {
+  enumerable: true,
+  get: function get() {
+    return _system_color_mode_provider.EuiSystemColorModeProvider;
+  }
+});
+var _system_color_mode_provider = require("./system_color_mode_provider");