@elastic/eui 95.10.0 → 95.11.0

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

@@ -0,0 +1,333 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/typeof";
+var _excluded = ["pagination", "sorting", "columnVisibility"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/*
+ * 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.
+ */
+
+/* eslint-disable storybook/default-exports, storybook/prefer-pascal-case */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { faker } from '@faker-js/faker';
+import { EuiLink } from '../link';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiButtonIcon } from '../button';
+import { MINIMUM_WIDTH_FOR_GRID_CONTROLS } from './controls/data_grid_toolbar';
+import { EuiDataGrid } from './data_grid';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+faker.seed(42);
+
+// NOTE: using faker.date.past() is not fully stable for VRT as the date is
+// based on a years time distance (default 1 year) which updates with progressing time
+// faker.seed() ensures the same date is output in the same time frame
+// but after some time the time distance will generate a newer, closer date
+// 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'];
+export var raw_data = Array.from({
+  length: 10
+}).map(function (_, i) {
+  var email = faker.internet.email();
+  var name = "".concat(faker.person.lastName(), ", ").concat(faker.person.firstName());
+  var date = staticDates[i].toDateString();
+  var suffix = faker.person.suffix();
+  return {
+    name: {
+      formatted: "".concat(name, " ").concat(suffix),
+      raw: name
+    },
+    email: {
+      formatted: ___EmotionJSX(EuiLink, {
+        href: ""
+      }, faker.internet.email()),
+      raw: email
+    },
+    location: ___EmotionJSX(React.Fragment, null, "".concat(faker.location.city(), ", "), ___EmotionJSX(EuiLink, {
+      href: "https://google.com"
+    }, faker.location.country())),
+    date: "".concat(date),
+    account: faker.finance.accountNumber(),
+    version: faker.system.semver()
+  };
+});
+var columns = [{
+  id: 'name',
+  displayAsText: 'Name',
+  defaultSortDirection: 'asc',
+  cellActions: [function (_ref) {
+    var rowIndex = _ref.rowIndex,
+      Component = _ref.Component;
+    var data = raw_data;
+    var value = data[rowIndex].name.raw;
+    return ___EmotionJSX(Component, {
+      onClick: function onClick() {
+        return alert("Hi ".concat(value));
+      },
+      iconType: "heart",
+      "aria-label": "Say hi to ".concat(value, "!")
+    }, "Say hi");
+  }]
+}, {
+  id: 'email',
+  displayAsText: 'Email address',
+  initialWidth: 130,
+  cellActions: [function (_ref2) {
+    var rowIndex = _ref2.rowIndex,
+      Component = _ref2.Component;
+    var data = raw_data;
+    var value = data[rowIndex].email.raw;
+    return ___EmotionJSX(Component, {
+      onClick: function onClick() {
+        return alert(value);
+      },
+      iconType: "email",
+      "aria-label": "Send email to ".concat(value)
+    }, "Send email");
+  }]
+}, {
+  id: 'location',
+  displayAsText: 'Location'
+}, {
+  id: 'account',
+  displayAsText: 'Account',
+  actions: {
+    showHide: {
+      label: 'Custom hide label'
+    },
+    showMoveLeft: false,
+    showMoveRight: false,
+    additional: [{
+      label: 'Custom action',
+      onClick: function onClick() {},
+      iconType: 'cheer',
+      size: 'xs',
+      color: 'text'
+    }]
+  },
+  cellActions: [function (_ref3) {
+    var rowIndex = _ref3.rowIndex,
+      Component = _ref3.Component,
+      isExpanded = _ref3.isExpanded;
+    var data = raw_data;
+    var value = data[rowIndex].account;
+    var onClick = isExpanded ? function () {
+      return alert("Sent money to ".concat(value, " when expanded"));
+    } : function () {
+      return alert("Sent money to ".concat(value, " when not expanded"));
+    };
+    return ___EmotionJSX(Component, {
+      onClick: onClick,
+      iconType: "faceHappy",
+      "aria-label": "Send money to ".concat(value)
+    }, "Send money");
+  }]
+}, {
+  id: 'date',
+  displayAsText: 'Date',
+  defaultSortDirection: 'desc'
+}, {
+  id: 'version',
+  displayAsText: 'Version',
+  defaultSortDirection: 'desc',
+  initialWidth: 70,
+  isResizable: false,
+  actions: false
+}];
+var RenderCellValue = function RenderCellValue(_ref4) {
+  var rowIndex = _ref4.rowIndex,
+    columnId = _ref4.columnId;
+  var data = raw_data;
+  var row = data[rowIndex];
+  var columnName = columnId;
+  var column = row[columnName];
+  var getFormatted = function getFormatted() {
+    if (_typeof(column) === 'object') {
+      var hasFormatted = ('formatted' in column);
+      return hasFormatted ? column.formatted : column;
+    }
+    return typeof column === 'string' ? column : null;
+  };
+  return data.hasOwnProperty(rowIndex) ? getFormatted() : null;
+};
+export var defaultStorybookArgs = {
+  'aria-label': 'EuiDataGrid',
+  columns: columns,
+  rowCount: 10,
+  renderCellValue: RenderCellValue,
+  trailingControlColumns: [{
+    id: 'trailing-actions',
+    width: 40,
+    headerCellRender: function headerCellRender() {
+      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Trailing actions"));
+    },
+    rowCellRender: function rowCellRender() {
+      return ___EmotionJSX(EuiButtonIcon, {
+        iconType: "boxesHorizontal"
+      });
+    }
+  }],
+  leadingControlColumns: [{
+    id: 'leading-actions',
+    width: 40,
+    headerCellRender: function headerCellRender() {
+      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Leading actions"));
+    },
+    rowCellRender: function rowCellRender() {
+      return ___EmotionJSX(EuiButtonIcon, {
+        iconType: "boxesHorizontal"
+      });
+    }
+  }],
+  // setup for easier testing/QA
+  columnVisibility: {
+    visibleColumns: ['name', 'email', 'account', 'location', 'date', 'amount', 'phone', 'version'],
+    setVisibleColumns: function setVisibleColumns() {}
+  },
+  inMemory: {
+    level: 'sorting'
+  },
+  pagination: {
+    pageIndex: 0,
+    pageSize: 10,
+    pageSizeOptions: [10, 20, 50],
+    onChangeItemsPerPage: function onChangeItemsPerPage() {},
+    onChangePage: function onChangePage() {}
+  },
+  gridStyle: {
+    fontSize: 'm',
+    cellPadding: 'm',
+    border: 'all',
+    stripes: false,
+    header: 'shade',
+    footer: 'overline',
+    stickyFooter: true,
+    rowHover: 'highlight',
+    rowClasses: {}
+  },
+  width: '',
+  height: '',
+  toolbarVisibility: {
+    showColumnSelector: true,
+    showDisplaySelector: true,
+    showSortSelector: true,
+    showKeyboardShortcuts: true,
+    showFullScreenSelector: true,
+    additionalControls: null
+  },
+  minSizeForControls: MINIMUM_WIDTH_FOR_GRID_CONTROLS,
+  rowHeightsOptions: {
+    defaultHeight: undefined,
+    rowHeights: {},
+    lineHeight: undefined,
+    scrollAnchorRow: undefined
+  }
+};
+export var StatefulDataGrid = function StatefulDataGrid(props) {
+  var _pagination$pageIndex, _sorting$columns, _columnVisibility$vis;
+  var pagination = props.pagination,
+    sorting = props.sorting,
+    columnVisibility = props.columnVisibility,
+    rest = _objectWithoutProperties(props, _excluded);
+
+  // Pagination
+  var _useState = useState(_objectSpread({
+      pageIndex: (_pagination$pageIndex = pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex) !== null && _pagination$pageIndex !== void 0 ? _pagination$pageIndex : 0
+    }, pagination)),
+    _useState2 = _slicedToArray(_useState, 2),
+    _pagination = _useState2[0],
+    setPagination = _useState2[1];
+  var onChangeItemsPerPage = useCallback(function (pageSize) {
+    return setPagination(function (pagination) {
+      return _objectSpread(_objectSpread({}, pagination), {}, {
+        pageSize: pageSize,
+        pageIndex: 0
+      });
+    });
+  }, [setPagination]);
+  var onChangePage = useCallback(function (pageIndex) {
+    return setPagination(function (pagination) {
+      return _objectSpread(_objectSpread({}, pagination), {}, {
+        pageIndex: pageIndex
+      });
+    });
+  }, [setPagination]);
+  useEffect(function () {
+    if (pagination) {
+      setPagination(function (curentPagination) {
+        return _objectSpread(_objectSpread({}, curentPagination), pagination);
+      });
+    }
+  }, [pagination]);
+
+  // Sorting
+  var _useState3 = useState((_sorting$columns = sorting === null || sorting === void 0 ? void 0 : sorting.columns) !== null && _sorting$columns !== void 0 ? _sorting$columns : []),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sortingColumns = _useState4[0],
+    setSortingColumns = _useState4[1];
+  var onSort = useCallback(function (sortingColumns) {
+    var _sorting$onSort;
+    setSortingColumns(sortingColumns);
+    sorting === null || sorting === void 0 || (_sorting$onSort = sorting.onSort) === null || _sorting$onSort === void 0 || _sorting$onSort.call(sorting, sortingColumns);
+  }, [setSortingColumns, sorting]);
+  useEffect(function () {
+    if (sorting && Array.isArray(sorting.columns)) {
+      setSortingColumns(sorting.columns);
+    }
+  }, [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;
+      return id;
+    }) // initialize to the full set of columns
+    ),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleColumns = _useState6[0],
+    setVisibleColumns = _useState6[1];
+  useEffect(function () {
+    if ((columnVisibility === null || columnVisibility === void 0 ? void 0 : columnVisibility.visibleColumns) != null) {
+      setVisibleColumns(columnVisibility === null || columnVisibility === void 0 ? void 0 : columnVisibility.visibleColumns);
+    }
+  }, [columnVisibility]);
+  return ___EmotionJSX(EuiDataGrid, _extends({}, rest, {
+    columnVisibility: {
+      visibleColumns: visibleColumns,
+      setVisibleColumns: setVisibleColumns
+    },
+    sorting: {
+      columns: sortingColumns,
+      onSort: onSort
+    },
+    pagination: _objectSpread(_objectSpread({}, _pagination), {}, {
+      onChangeItemsPerPage: onChangeItemsPerPage,
+      onChangePage: onChangePage
+    })
+  }));
+};
+
+/*
+ * Components that exist purely for allowing Storybook to parse certain nested
+ * interfaces/types into specific example control tables.
+ *
+ * For whatever reason, they needs to be in a separate file for Storybook's
+ * react-typescript-docgen to parse the jsdoc comments into the controls table
+ */
+
+export var EuiDataGridToolbarPropsComponent = function EuiDataGridToolbarPropsComponent() {
+  return ___EmotionJSX(React.Fragment, null);
+};
+export var EuiDataGridStylePropsComponent = function EuiDataGridStylePropsComponent() {
+  return ___EmotionJSX(React.Fragment, null);
+};
+export var EuiDataGridRowHeightsPropsComponent = function EuiDataGridRowHeightsPropsComponent() {
+  return ___EmotionJSX(React.Fragment, null);
+};

package/optimize/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/optimize/es/components/datagrid/{utils → pagination}/data_grid_pagination.js

@@ -8,22 +8,35 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  */
 
 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 : ''
   });
@@ -37,28 +50,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/optimize/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/optimize/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/optimize/es/components/datagrid/utils/row_heights.js

@@ -17,18 +17,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useForceRender, useLatest } from '../../../services';
+import { useForceRender, useLatest, useEuiMemoizedStyles } from '../../../services';
 import { isNumber, isObject } from '../../../services/predicate';
+import { euiDataGridVariables } from '../data_grid.styles';
 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;
@@ -96,10 +90,13 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "cacheStyles",
-    value: function cacheStyles(gridStyles) {
+    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: cellPaddingsMap[gridStyles.cellPadding || 'm'],
-        paddingBottom: cellPaddingsMap[gridStyles.cellPadding || 'm']
+        paddingTop: padding,
+        paddingBottom: padding
       };
     }
   }, {
@@ -305,11 +302,12 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   rowHeightUtils, forceRenderRef]);
 
   // Re-cache styles whenever grid density changes
+  var styleVars = useEuiMemoizedStyles(euiDataGridVariables);
   useEffect(function () {
     rowHeightUtils.cacheStyles({
       cellPadding: gridStyles.cellPadding
-    });
-  }, [gridStyles.cellPadding, rowHeightUtils]);
+    }, styleVars.cellPadding);
+  }, [gridStyles.cellPadding, rowHeightUtils, styleVars.cellPadding]);
 
   // Update row heights map to remove hidden columns whenever orderedVisibleColumns change
   useEffect(function () {

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

@@ -9,8 +9,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
  */
 
 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,
@@ -206,6 +209,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
@@ -214,22 +218,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,