@elastic/eui 95.11.0 → 95.12.0

package/es/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -14,7 +14,8 @@ import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var controlColumn = _ref.controlColumn,
-    index = _ref.index;
+    index = _ref.index,
+    visibleColCount = _ref.visibleColCount;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -23,11 +24,13 @@ export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
     className: classNames('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width
+    width: width,
+    visibleColCount: visibleColCount
   }), ___EmotionJSX(HeaderCellRender, null));
 });
 EuiDataGridControlHeaderCell.propTypes = {
   index: PropTypes.number.isRequired,
+  visibleColCount: PropTypes.number.isRequired,
   controlColumn: PropTypes.shape({
     /**
        * Used as the React `key` when rendering content

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -40,6 +40,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
+    visibleColCount = _ref.visibleColCount,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     sorting = _ref.sorting,
@@ -124,11 +125,12 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
    */
   var classes = classnames(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
-  var contentStyles = [styles.euiDataGridHeaderCell__content, columnType === 'numeric' || columnType === 'currency' ? styles.right : styles.left];
+  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
   return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
     index: index,
+    visibleColCount: visibleColCount,
     width: width,
     "aria-sort": ariaSort,
     hasActionsPopover: showColumnActions,

package/es/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -19,8 +19,6 @@ export var euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(eu
     header = _euiDataGridCellOutli.header;
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/css("flex-grow:1;", euiTextTruncate(), ";;label:euiDataGridHeaderCell__content;"),
-    // Overwrite inherited 'center' styles from <button>
-    left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),

package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
+var _excluded = ["id", "index", "visibleColCount", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
 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."); }
@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useContext, useEffect, useState, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
-import { keys, useEuiMemoizedStyles } from '../../../../services';
+import { keys, tabularCopyMarkers, useEuiMemoizedStyles } from '../../../../services';
 import { DataGridFocusContext } from '../../utils/focus';
 import { HandleInteractiveChildren } from '../cell/focus_utils';
 import { euiDataGridHeaderCellWrapperStyles } from './data_grid_header_cell_wrapper.styles';
@@ -33,6 +33,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(_ref) {
   var id = _ref.id,
     index = _ref.index,
+    visibleColCount = _ref.visibleColCount,
     width = _ref.width,
     className = _ref.className,
     children = _ref.children,
@@ -88,6 +89,7 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
       openActionsPopover === null || openActionsPopover === void 0 || openActionsPopover();
     }
   }, [hasActionsPopover, openActionsPopover, renderFocusTrap, headerEl]);
+  var isLastColumn = index === visibleColCount - 1;
   return ___EmotionJSX("div", _extends({
     role: "columnheader",
     ref: setHeaderEl,
@@ -109,12 +111,13 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     updateCellFocusContext: updateCellFocusContext,
     renderFocusTrap: renderFocusTrap,
     onInteractiveChildrenFound: setInteractiveChildren
-  }, typeof children === 'function' ? children(renderFocusTrap) : children));
+  }, typeof children === 'function' ? children(renderFocusTrap) : children), isLastColumn ? tabularCopyMarkers.hiddenNewline : tabularCopyMarkers.hiddenTab);
 };
 EuiDataGridHeaderCellWrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]).isRequired,
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
+  visibleColCount: PropTypes.number.isRequired,
   width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   className: PropTypes.string,
   "aria-label": PropTypes.any,

package/es/components/datagrid/body/header/data_grid_header_row.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "visibleColCount", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "gridStyles"];
 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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -29,6 +29,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     columnWidths = props.columnWidths,
     defaultColumnWidth = props.defaultColumnWidth,
     setColumnWidth = props.setColumnWidth,
+    visibleColCount = props.visibleColCount,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
     sorting = props.sorting,
@@ -50,6 +51,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
+      visibleColCount: visibleColCount,
       controlColumn: controlColumn
     });
   }), columns.map(function (column, index) {
@@ -61,6 +63,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
@@ -71,6 +74,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index + leadingControlColumns.length + columns.length,
+      visibleColCount: visibleColCount,
       controlColumn: controlColumn
     });
   }));

package/es/components/datagrid/data_grid.js

@@ -28,7 +28,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import classNames from 'classnames';
 import React, { forwardRef, useMemo, useRef, useState, memo, useCallback } from 'react';
-import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../services';
+import { useGeneratedHtmlId, useEuiMemoizedStyles, OverrideCopiedTabularContent } from '../../services';
 import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -376,7 +376,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     role: "grid",
     "aria-rowcount": rowCount,
     id: gridId
-  }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(EuiDataGridBody, {
+  }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiDataGridBody, {
     columns: orderedVisibleColumns,
     visibleColCount: visibleColCount,
     leadingControlColumns: leadingControlColumns,
@@ -404,7 +404,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
     renderCustomGridBody: renderCustomGridBody
-  })), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
+  }))), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
     id: ariaLabelledById,
     hidden: true
   }, ariaLabelledBy), showPagination && ___EmotionJSX(EuiDataGridPagination, _extends({}, pagination, {

package/es/components/datagrid/data_grid.stories.utils.js

@@ -15,6 +15,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,10 +27,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 /* eslint-disable storybook/default-exports, storybook/prefer-pascal-case */
 
 import React, { useCallback, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
 import { faker } from '@faker-js/faker';
 import { EuiLink } from '../link';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiButtonIcon } from '../button';
+import { EuiCheckbox } from '../form';
+import { EuiBadge } from '../badge';
 import { MINIMUM_WIDTH_FOR_GRID_CONTROLS } from './controls/data_grid_toolbar';
 import { EuiDataGrid } from './data_grid';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -42,6 +46,14 @@ faker.seed(42);
 // which then invalidates the VRT
 var staticDates = [new Date('Tue Mar 19 2024 18:54:51 GMT+0100'), new Date('Mon Mar 25 2024 19:27:35 GMT+0100'), new Date('Sat Sep 09 2023 00:32:42 GMT+0200'), new Date('Wed Jun 14 2023 06:48:29 GMT+0200'), new Date('Mon Mar 04 2024 04:40:36 GMT+0100'), new Date('Mon Feb 05 2024 10:51:48 GMT+0100'), new Date('Mon Jun 19 2023 12:08:38 GMT+0200'), new Date('Wed Jul 26 2023 01:15:02 GMT+0200'), new Date('Wed Nov 08 2023 08:49:13 GMT+0100'), new Date('Sun Nov 19 2023 01:49:12 GMT+0100')];
 var dataKeys = ['name', 'email', 'account', 'location', 'date', 'version'];
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1u596ek-version",
+  styles: "vertical-align:text-bottom;label:version;"
+} : {
+  name: "1u596ek-version",
+  styles: "vertical-align:text-bottom;label:version;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var raw_data = Array.from({
   length: 10
 }).map(function (_, i) {
@@ -57,24 +69,28 @@ export var raw_data = Array.from({
     email: {
       formatted: ___EmotionJSX(EuiLink, {
         href: ""
-      }, faker.internet.email()),
+      }, email),
       raw: email
     },
     location: ___EmotionJSX(React.Fragment, null, "".concat(faker.location.city(), ", "), ___EmotionJSX(EuiLink, {
       href: "https://google.com"
     }, faker.location.country())),
-    date: "".concat(date),
+    date: date,
     account: faker.finance.accountNumber(),
-    version: faker.system.semver()
+    version: ___EmotionJSX(EuiBadge
+    // Tweak the badge's vertical centering
+    , {
+      css: _ref
+    }, faker.system.semver())
   };
 });
 var columns = [{
   id: 'name',
   displayAsText: 'Name',
   defaultSortDirection: 'asc',
-  cellActions: [function (_ref) {
-    var rowIndex = _ref.rowIndex,
-      Component = _ref.Component;
+  cellActions: [function (_ref2) {
+    var rowIndex = _ref2.rowIndex,
+      Component = _ref2.Component;
     var data = raw_data;
     var value = data[rowIndex].name.raw;
     return ___EmotionJSX(Component, {
@@ -89,9 +105,9 @@ var columns = [{
   id: 'email',
   displayAsText: 'Email address',
   initialWidth: 130,
-  cellActions: [function (_ref2) {
-    var rowIndex = _ref2.rowIndex,
-      Component = _ref2.Component;
+  cellActions: [function (_ref3) {
+    var rowIndex = _ref3.rowIndex,
+      Component = _ref3.Component;
     var data = raw_data;
     var value = data[rowIndex].email.raw;
     return ___EmotionJSX(Component, {
@@ -122,10 +138,10 @@ var columns = [{
       color: 'text'
     }]
   },
-  cellActions: [function (_ref3) {
-    var rowIndex = _ref3.rowIndex,
-      Component = _ref3.Component,
-      isExpanded = _ref3.isExpanded;
+  cellActions: [function (_ref4) {
+    var rowIndex = _ref4.rowIndex,
+      Component = _ref4.Component,
+      isExpanded = _ref4.isExpanded;
     var data = raw_data;
     var value = data[rowIndex].account;
     var onClick = isExpanded ? function () {
@@ -149,11 +165,12 @@ var columns = [{
   defaultSortDirection: 'desc',
   initialWidth: 70,
   isResizable: false,
-  actions: false
+  actions: false,
+  schema: 'version' // Custom schema + CSS
 }];
-var RenderCellValue = function RenderCellValue(_ref4) {
-  var rowIndex = _ref4.rowIndex,
-    columnId = _ref4.columnId;
+var RenderCellValue = function RenderCellValue(_ref5) {
+  var rowIndex = _ref5.rowIndex,
+    columnId = _ref5.columnId;
   var data = raw_data;
   var row = data[rowIndex];
   var columnName = columnId;
@@ -169,30 +186,49 @@ var RenderCellValue = function RenderCellValue(_ref4) {
 };
 export var defaultStorybookArgs = {
   'aria-label': 'EuiDataGrid',
+  css: process.env.NODE_ENV === "production" ? {
+    name: "1h7lf59-css",
+    styles: ".euiDataGridRowCell--version,.euiDataGridHeaderCell--version{text-align:center;};label:css;"
+  } : {
+    name: "1h7lf59-css",
+    styles: ".euiDataGridRowCell--version,.euiDataGridHeaderCell--version{text-align:center;};label:css;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
   columns: columns,
   rowCount: 10,
   renderCellValue: RenderCellValue,
   trailingControlColumns: [{
     id: 'trailing-actions',
-    width: 40,
+    width: 64,
     headerCellRender: function headerCellRender() {
-      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Trailing actions"));
+      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Row actions"));
     },
     rowCellRender: function rowCellRender() {
-      return ___EmotionJSX(EuiButtonIcon, {
-        iconType: "boxesHorizontal"
-      });
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiButtonIcon, {
+        iconType: "indexEdit",
+        "aria-label": "Edit row"
+      }), ___EmotionJSX(EuiButtonIcon, {
+        iconType: "boxesHorizontal",
+        "aria-label": "Open actions popover"
+      }));
     }
   }],
   leadingControlColumns: [{
     id: 'leading-actions',
-    width: 40,
+    width: 32,
     headerCellRender: function headerCellRender() {
-      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Leading actions"));
+      return ___EmotionJSX(EuiCheckbox, {
+        id: "selectAll",
+        "aria-label": "Select all rows",
+        onChange: function onChange() {}
+      });
     },
-    rowCellRender: function rowCellRender() {
-      return ___EmotionJSX(EuiButtonIcon, {
-        iconType: "boxesHorizontal"
+    rowCellRender: function rowCellRender(_ref6) {
+      var rowIndex = _ref6.rowIndex;
+      return ___EmotionJSX(EuiCheckbox, {
+        id: "selectRow".concat(rowIndex),
+        "aria-label": "Select row ".concat(rowIndex + 1),
+        onChange: function onChange() {}
       });
     }
   }],
@@ -294,8 +330,8 @@ export var StatefulDataGrid = function StatefulDataGrid(props) {
   }, [sorting]);
 
   // Column visibility
-  var _useState5 = useState((_columnVisibility$vis = columnVisibility === null || columnVisibility === void 0 ? void 0 : columnVisibility.visibleColumns) !== null && _columnVisibility$vis !== void 0 ? _columnVisibility$vis : columns.map(function (_ref5) {
-      var id = _ref5.id;
+  var _useState5 = useState((_columnVisibility$vis = columnVisibility === null || columnVisibility === void 0 ? void 0 : columnVisibility.visibleColumns) !== null && _columnVisibility$vis !== void 0 ? _columnVisibility$vis : columns.map(function (_ref7) {
+      var id = _ref7.id;
       return id;
     }) // initialize to the full set of columns
     ),

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

@@ -29,9 +29,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useForceRender, useLatest, useEuiMemoizedStyles } from '../../../services';
+import { useForceRender, useLatest } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
-import { euiDataGridVariables } from '../data_grid.styles';
 import { DataGridSortedContext } from './sorting';
 var AUTO_HEIGHT = 'auto';
 var DEFAULT_ROW_HEIGHT = 34;
@@ -39,13 +38,6 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   function RowHeightUtils() {
     var _this = this;
     _classCallCheck(this, RowHeightUtils);
-    /**
-     * Styles utils
-     */
-    _defineProperty(this, "styles", {
-      paddingTop: 0,
-      paddingBottom: 0
-    });
     /**
      * Height types
      */
@@ -56,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';
     });
@@ -100,17 +93,6 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       }
       return defaultHeight;
     }
-  }, {
-    key: "cacheStyles",
-    value: function cacheStyles(gridStyles, cellPaddingsMap) {
-      var _gridStyles$cellPaddi;
-      var paddingSize = (_gridStyles$cellPaddi = gridStyles.cellPadding) !== null && _gridStyles$cellPaddi !== void 0 ? _gridStyles$cellPaddi : 'm';
-      var padding = parseFloat(cellPaddingsMap[paddingSize]);
-      this.styles = {
-        paddingTop: padding,
-        paddingBottom: padding
-      };
-    }
   }, {
     key: "getLineCount",
     value:
@@ -123,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;
     }
 
     /**
@@ -285,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 () {
@@ -313,14 +297,6 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   // Dependencies
   rowHeightUtils, forceRenderRef]);
 
-  // Re-cache styles whenever grid density changes
-  var styleVars = useEuiMemoizedStyles(euiDataGridVariables);
-  useEffect(function () {
-    rowHeightUtils.cacheStyles({
-      cellPadding: gridStyles.cellPadding
-    }, styleVars.cellPadding);
-  }, [gridStyles.cellPadding, rowHeightUtils, styleVars.cellPadding]);
-
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   useEffect(function () {
     rowHeightUtils.pruneHiddenColumnHeights(columns);

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/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
        */

package/es/components/resizable_container/resizable_button.styles.js

@@ -37,6 +37,9 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiResizableButtonStyles = function euiResizableButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var buttonSize = euiTheme.size.base;
+  var negativeMargin = mathWithUnits(buttonSize, function (x) {
+    return x / -2;
+  });
   var grabHandleWidth = euiTheme.size.m;
   var grabHandleHeight = euiTheme.border.width.thin;
   var transitionSpeed = euiTheme.animation.fast;
@@ -49,12 +52,22 @@ export var euiResizableButtonStyles = function euiResizableButtonStyles(euiTheme
     euiResizableButton: /*#__PURE__*/css("z-index:1;flex-shrink:0;display:flex;justify-content:center;&:disabled{display:none;}&::before,&::after{content:'';display:block;", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";}}&:focus,&:active{background-color:", transparentize(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", mathWithUnits(transitionSpeed, function (x) {
       return x / 2;
     }), ";}}};label:euiResizableButton;"),
-    horizontal: /*#__PURE__*/css("cursor:col-resize;", logicalCSS('height', '100%'), " ", logicalCSS('width', buttonSize), " margin-inline:", mathWithUnits(buttonSize, function (x) {
-      return x / -2;
-    }), ";;label:horizontal;"),
-    vertical: /*#__PURE__*/css("flex-direction:column;cursor:row-resize;", logicalCSS('width', '100%'), " ", logicalCSS('height', buttonSize), " margin-block:", mathWithUnits(buttonSize, function (x) {
-      return x / -2;
-    }), ";;label:vertical;"),
+    horizontal: /*#__PURE__*/css("cursor:col-resize;", logicalCSS('height', '100%'), " ", logicalCSS('width', buttonSize), ";;label:horizontal;"),
+    vertical: /*#__PURE__*/css("flex-direction:column;cursor:row-resize;", logicalCSS('width', '100%'), " ", logicalCSS('height', buttonSize), ";;label:vertical;"),
+    accountForScrollbars: {
+      horizontal: {
+        both: /*#__PURE__*/css(";label:both;"),
+        before: /*#__PURE__*/css(logicalCSS('margin-right', negativeMargin), ";label:before;"),
+        after: /*#__PURE__*/css(logicalCSS('margin-left', negativeMargin), ";label:after;"),
+        none: /*#__PURE__*/css(logicalCSS('margin-horizontal', negativeMargin), ";label:none;")
+      },
+      vertical: {
+        both: /*#__PURE__*/css(";label:both;"),
+        before: /*#__PURE__*/css(logicalCSS('margin-bottom', negativeMargin), ";label:before;"),
+        after: /*#__PURE__*/css(logicalCSS('margin-top', negativeMargin), ";label:after;"),
+        none: /*#__PURE__*/css(logicalCSS('margin-vertical', negativeMargin), ";label:none;")
+      }
+    },
     border: /*#__PURE__*/css("&::before,&::after{background-color:", euiTheme.border.color, ";};label:border;"),
     borderDirection: {
       horizontal: /*#__PURE__*/css("&::before{", logicalCSS('width', euiTheme.border.width.thin), " ", logicalCSS('height', '100%'), ";}&:hover,&:focus,&:active{&::after{", logicalCSS('width', euiTheme.border.width.thin), " ", logicalCSS('height', '100%'), ";}};label:horizontal;"),