@elastic/eui 95.10.1 → 95.12.0

package/optimize/es/components/datagrid/controls/column_sorting_draggable.js

@@ -12,6 +12,7 @@ var _excluded = ["id", "display", "direction", "index", "sorting", "schema", "sc
 
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroup, EuiButtonIcon } from '../../button';
 import { EuiDraggable } from '../../drag_and_drop';
@@ -21,6 +22,7 @@ import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
 import { EuiToken } from '../../token';
 import { getDetailsForSchema } from '../utils/data_grid_schema';
+import { euiDataGridColumnSortingStyles } from './column_sorting.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var defaultSortAscLabel = ___EmotionJSX(EuiI18n, {
   token: "euiColumnSortingDraggable.defaultSortAsc",
@@ -75,16 +77,22 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     });
     sorting.onSort(nextColumns);
   }, [id, sorting]);
+  var styles = useEuiMemoizedStyles(euiDataGridColumnSortingStyles);
   return ___EmotionJSX(EuiDraggable, _extends({
     draggableId: id,
     index: index,
     hasInteractiveChildren: true,
     customDragHandle: true
   }, rest), function (provided, state) {
-    return ___EmotionJSX("div", {
+    return ___EmotionJSX(EuiFlexGroup, {
+      css: styles.euiDataGridColumnSorting__item,
       className: classNames('euiDataGridColumnSorting__item', {
         'euiDataGridColumnSorting__item-isDragging': state.isDragging
-      })
+      }),
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false,
+      "data-test-subj": "euiDataGridColumnSorting-sortColumn-".concat(id)
     }, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.activeSortLabel",
       default: "{display} is sorting this data grid",
@@ -93,12 +101,7 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
       }
     }, function (activeSortLabel) {
       return activeSortLabel;
-    }))), ___EmotionJSX(EuiFlexGroup, {
-      gutterSize: "xs",
-      alignItems: "center",
-      responsive: false,
-      "data-test-subj": "euiDataGridColumnSorting-sortColumn-".concat(id)
-    }, ___EmotionJSX(EuiFlexItem, {
+    }))), ___EmotionJSX(EuiFlexItem, {
       grow: false
     }, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.removeSortLabel",
@@ -114,10 +117,12 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
         iconType: "cross",
         onClick: removeSort
       });
-    })), ___EmotionJSX(EuiFlexItem, _extends({
+    })), ___EmotionJSX(EuiFlexItem
+    // This extra column name flex item affords the column more grabbable real estate
+    // for mouse users, while hiding repetition for keyboard/screen reader users
+    , _extends({
+      css: styles.euiDataGridColumnSorting__name,
       className: "euiDataGridColumnSorting__name"
-      // This extra column name flex item affords the column more grabbable real estate
-      // for mouse users, while hiding repetition for keyboard/screen reader users
     }, provided.dragHandleProps, {
       tabIndex: -1,
       "aria-hidden": true
@@ -132,7 +137,7 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
     })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiText, {
       size: "xs"
-    }, ___EmotionJSX("p", null, display))))), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
+    }, display)))), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {
@@ -141,10 +146,10 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     }, function (toggleLegend) {
       return ___EmotionJSX(EuiButtonGroup, {
         legend: toggleLegend,
-        name: id,
         isFullWidth: true,
         options: toggleOptions,
         buttonSize: "compressed",
+        css: styles.euiDataGridColumnSorting__order,
         className: "euiDataGridColumnSorting__order",
         idSelected: direction === 'asc' ? "".concat(id, "Asc") : "".concat(id, "Desc"),
         onChange: toggleLegendHandler
@@ -156,6 +161,6 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     }), ___EmotionJSX(EuiIcon, {
       type: "grab",
       color: "subdued"
-    }))));
+    })));
   });
 };

package/optimize/es/components/datagrid/controls/data_grid_toolbar.js

@@ -8,8 +8,10 @@ import _typeof from "@babel/runtime/helpers/typeof";
  */
 
 import React, { isValidElement } from 'react';
-import { EuiScreenReaderOnly } from '../../accessibility';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiScreenReaderOnly } from '../../accessibility';
+import { euiDataGridToolbarStyles } from './data_grid_toolbar.styles';
 
 // When below this number the grid only shows the right control icon buttons
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -26,6 +28,8 @@ export var EuiDataGridToolbar = function EuiDataGridToolbar(_ref) {
     columnSelector = _ref.columnSelector,
     columnSorting = _ref.columnSorting,
     renderCustomToolbar = _ref.renderCustomToolbar;
+  var styles = useEuiMemoizedStyles(euiDataGridToolbarStyles);
+
   // Enables/disables grid controls based on available width
   var hasRoomForGridControls = IS_JEST_ENVIRONMENT ? true : gridWidth > minSizeForControls || isFullScreen;
   var columnControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showColumnSelector') ? columnSelector : null;
@@ -46,11 +50,14 @@ export var EuiDataGridToolbar = function EuiDataGridToolbar(_ref) {
     });
   }
   return ___EmotionJSX("div", {
+    css: styles.euiDataGrid__controls,
     className: "euiDataGrid__controls",
     "data-test-subj": "dataGridControls"
   }, hasRoomForGridControls && ___EmotionJSX("div", {
+    css: styles.euiDataGrid__leftControls,
     className: "euiDataGrid__leftControls"
   }, renderAdditionalControls(toolbarVisibility, 'left.prepend'), columnControl, columnSortingControl, renderAdditionalControls(toolbarVisibility, 'left.append')), ___EmotionJSX("div", {
+    css: styles.euiDataGrid__rightControls,
     className: "euiDataGrid__rightControls"
   }, renderAdditionalControls(toolbarVisibility, 'right'), keyboardShortcutsControl, displayControl, fullScreenControl));
 };

package/optimize/es/components/datagrid/controls/data_grid_toolbar.styles.js

@@ -0,0 +1,18 @@
+/*
+ * 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 euiDataGridToolbarStyles = function euiDataGridToolbarStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiDataGrid__controls: /*#__PURE__*/css("z-index:2;position:relative;display:flex;justify-content:space-between;align-items:center;gap:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid__controls;"),
+    euiDataGrid__rightControls: /*#__PURE__*/css("display:flex;justify-content:flex-end;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", logicalCSS('padding-right', euiTheme.size.xs), "&:only-child{", logicalCSS('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
+    euiDataGrid__leftControls: /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
+  };
+};

package/optimize/es/components/datagrid/controls/data_grid_toolbar_control.js

@@ -17,28 +17,12 @@ import { EuiButtonEmpty } from '../../button';
 import { EuiNotificationBadge } from '../../badge';
 import { useEuiI18n } from '../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1vci2nd-EuiDataGridToolbarControl",
-  styles: "cursor:inherit;label:EuiDataGridToolbarControl;"
-} : {
-  name: "1vci2nd-EuiDataGridToolbarControl",
-  styles: "cursor:inherit;label:EuiDataGridToolbarControl;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "8fsqop-EuiDataGridToolbarControl",
-  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;"
-} : {
-  name: "8fsqop-EuiDataGridToolbarControl",
-  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:EuiDataGridToolbarControl;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    badgeContent = _ref3.badgeContent,
-    textProps = _ref3.textProps,
-    rest = _objectWithoutProperties(_ref3, _excluded);
+export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    badgeContent = _ref.badgeContent,
+    textProps = _ref.textProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiDataGridToolbarControl', className);
   var badgeAriaLabel = useEuiI18n('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
     count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
@@ -47,15 +31,13 @@ export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3)
     className: classes,
     size: "xs",
     color: "text",
-    textProps: false
-    // Underline actual text, but not the badge
-    ,
-    css: _ref2
+    textProps: false,
+    css: underlineStyles
   }, rest), ___EmotionJSX("span", _extends({}, textProps, {
     className: classNames('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
   }), children), Boolean(badgeContent) && ___EmotionJSX(EuiNotificationBadge, {
     className: "euiDataGridToolbarControl__badge",
-    css: _ref,
+    css: badgeStyles,
     color: "subdued",
     "aria-label": "- ".concat(badgeAriaLabel) // Punctuation helps add pauses for screen readers
     ,
@@ -67,4 +49,22 @@ export var EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3)
 // are being hidden. We can make this a bit more legible to SRs with this quick util
 var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {
   return badgeContent.replaceAll('/', ' out of ');
+};
+
+// Underline actual text, but not the badge
+var underlineStyles = process.env.NODE_ENV === "production" ? {
+  name: "128tp1b-underlineStyles",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:underlineStyles;"
+} : {
+  name: "128tp1b-underlineStyles",
+  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:underlineStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var badgeStyles = process.env.NODE_ENV === "production" ? {
+  name: "1968nw3-badgeStyles",
+  styles: "cursor:inherit;label:badgeStyles;"
+} : {
+  name: "1968nw3-badgeStyles",
+  styles: "cursor:inherit;label:badgeStyles;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -15,11 +15,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { useUpdateEffect } from '../../../services';
+import { logicalStyle, mathWithUnits } from '../../../global_styling';
+import { useUpdateEffect, useEuiTheme } from '../../../services';
 import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiPopover, EuiPopoverFooter } from '../../popover';
 import { EuiButtonIcon, EuiButtonGroup, EuiButtonEmpty } from '../../button';
 import { EuiFormRow, EuiRange } from '../../form';
+import { euiFormMaxWidth } from '../../form/form.styles';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiToolTip } from '../../tool_tip';
 import { getNestedObjectOptions } from './data_grid_toolbar';
@@ -194,7 +196,13 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
   }, []);
   var buttonLabel = useEuiI18n('euiDisplaySelector.buttonText', 'Display options');
   var resetButtonLabel = useEuiI18n('euiDisplaySelector.resetButtonText', 'Reset to default');
+  var euiTheme = useEuiTheme();
   var displaySelector = useMemo(function () {
+    var paddingSize = 's';
+    var formMaxWidth = euiFormMaxWidth(euiTheme);
+    var popoverWidth = mathWithUnits([formMaxWidth, euiTheme.euiTheme.size[paddingSize]], function (x, y) {
+      return x + y * 2;
+    });
     return showDensityControls || showRowHeightControls || additionalDisplaySettings ? ___EmotionJSX(EuiPopover, {
       "data-test-subj": "dataGridDisplaySelectorPopover",
       isOpen: isOpen,
@@ -202,7 +210,10 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
         return setIsOpen(false);
       },
       anchorPosition: "downRight",
-      panelPaddingSize: "s",
+      panelPaddingSize: paddingSize,
+      panelProps: {
+        css: logicalStyle('width', popoverWidth)
+      },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: ___EmotionJSX(EuiToolTip, {
         content: buttonLabel,
@@ -303,6 +314,6 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       onClick: resetToInitialState,
       "data-test-subj": "resetDisplaySelector"
     }, resetButtonLabel)))))) : null;
-  }, [additionalDisplaySettings, buttonLabel, isOpen, resetButtonLabel, showDensityControls, showResetButton, showRowHeightControls, gridDensity, rowHeightSelection, lineCountInput, setGridStyles, setRowHeight, setLineCountHeight, resetToInitialState]);
+  }, [euiTheme, additionalDisplaySettings, buttonLabel, isOpen, resetButtonLabel, showDensityControls, showResetButton, showRowHeightControls, gridDensity, rowHeightSelection, lineCountInput, setGridStyles, setRowHeight, setLineCountHeight, resetToInitialState]);
   return [displaySelector, gridStyles, rowHeightsOptions];
 };

package/optimize/es/components/datagrid/controls/fullscreen_selector.js

@@ -8,10 +8,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { keys } from '../../../services';
+import { keys, useEuiMemoizedStyles } from '../../../services';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiButtonIcon } from '../../button';
 import { useEuiI18n } from '../../i18n';
+import { euiDataGridFullScreenStyles } from './fullscreen_selector.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var GRID_IS_FULLSCREEN_CLASSNAME = 'euiDataGrid__restrictBody';
 export var useDataGridFullScreenSelector = function useDataGridFullScreenSelector() {
@@ -49,19 +50,21 @@ export var useDataGridFullScreenSelector = function useDataGridFullScreenSelecto
         break;
     }
   }, [isFullScreen]);
+  var styles = useEuiMemoizedStyles(euiDataGridFullScreenStyles);
   useEffect(function () {
     // When the data grid is fullscreen, we add a class to the body to remove the extra scrollbar and stay above any fixed headers
     if (isFullScreen) {
-      document.body.classList.add(GRID_IS_FULLSCREEN_CLASSNAME);
+      document.body.classList.add(GRID_IS_FULLSCREEN_CLASSNAME, styles.euiDataGrid__restrictBody);
       return function () {
-        document.body.classList.remove(GRID_IS_FULLSCREEN_CLASSNAME);
+        document.body.classList.remove(GRID_IS_FULLSCREEN_CLASSNAME, styles.euiDataGrid__restrictBody);
       };
     }
-  }, [isFullScreen]);
+  }, [isFullScreen, styles.euiDataGrid__restrictBody]);
   return {
     isFullScreen: isFullScreen,
     setIsFullScreen: setIsFullScreen,
     fullScreenSelector: fullScreenSelector,
-    handleGridKeyDown: handleGridKeyDown
+    handleGridKeyDown: handleGridKeyDown,
+    fullScreenStyles: styles['euiDataGrid--fullScreen']
   };
 };

package/optimize/es/components/datagrid/controls/fullscreen_selector.styles.js

@@ -0,0 +1,20 @@
+/*
+ * 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/css';
+import { logicalCSS } from '../../../global_styling';
+export var euiDataGridFullScreenStyles = function euiDataGridFullScreenStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var fullScreenZIndex = Number(euiTheme.levels.header) - 1;
+  return {
+    'euiDataGrid--fullScreen': /*#__PURE__*/css("z-index:", fullScreenZIndex, ";position:fixed;inset:0;background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid--fullScreen;"),
+    // This is a vanilla className applied to the <body> when fullscreen is enabled.
+    // It removes extra scrollbars + tweaks components to account for fixed headers
+    euiDataGrid__restrictBody: /*#__PURE__*/css(logicalCSS('height', '100vh'), " overflow:hidden;.euiHeader[data-fixed-header]{z-index:", fullScreenZIndex - 1, "!important;}.euiOverlayMask[data-relative-to-header='below']{", logicalCSS('top', '0'), ";}.euiFlyout{", logicalCSS('top', '0'), " ", logicalCSS('height', '100%'), ";};label:euiDataGrid__restrictBody;")
+  };
+};

package/optimize/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -8,13 +8,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useMemo } from 'react';
-import { useGeneratedHtmlId } from '../../../services';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';
 import { EuiButtonIcon } from '../../button';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiPopover, EuiPopoverTitle } from '../../popover';
 import { EuiDescriptionList } from '../../description_list';
 import { EuiText } from '../../text';
 import { useEuiI18n, EuiI18n } from '../../i18n';
+import { euiDataGridKeyboardShortcutsStyles } from './keyboard_shortcuts.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts() {
   var _useState = useState(false),
@@ -23,6 +24,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
     setIsOpen = _useState2[1];
   var title = useEuiI18n('euiKeyboardShortcuts.title', 'Keyboard shortcuts');
   var titleId = useGeneratedHtmlId();
+  var styles = useEuiMemoizedStyles(euiDataGridKeyboardShortcutsStyles);
   var keyboardShortcuts = useMemo(function () {
     return ___EmotionJSX(EuiPopover, {
       "data-test-subj": "dataGridKeyboardShortcutsPopover",
@@ -31,6 +33,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
         return setIsOpen(false);
       },
       anchorPosition: "downRight",
+      panelPaddingSize: "none",
       button: ___EmotionJSX(EuiToolTip, {
         content: title,
         delay: "long"
@@ -49,12 +52,13 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
     }, ___EmotionJSX("h2", {
       id: titleId
     }, title)), ___EmotionJSX(EuiText, {
+      css: styles.euiDataGrid__keyboardShortcuts,
       className: "euiDataGrid__keyboardShortcuts",
       size: "xs"
     }, ___EmotionJSX(EuiDescriptionList, {
       "aria-labelledby": titleId,
       type: "column",
-      columnWidths: [1, 3],
+      columnWidths: ['auto', 'auto'],
       align: "center",
       compressed: true,
       listItems: [{
@@ -173,7 +177,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
         })
       }]
     })));
-  }, [isOpen, title, titleId]);
+  }, [isOpen, title, titleId, styles]);
   return {
     keyboardShortcuts: keyboardShortcuts
   };

package/optimize/es/components/datagrid/controls/keyboard_shortcuts.styles.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling';
+export var euiDataGridKeyboardShortcutsStyles = function euiDataGridKeyboardShortcutsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGrid__keyboardShortcuts: /*#__PURE__*/css(logicalCSS('max-height', '80vh'), " ", logicalCSS('max-width', mathWithUnits(euiTheme.size.xxl, function (x) {
+      return x * 10;
+    })), " padding:", euiTheme.size.m, ";", euiYScroll(euiThemeContext), " .euiDescriptionList{row-gap:0;};label:euiDataGrid__keyboardShortcuts;")
+  };
+};

package/optimize/es/components/datagrid/data_grid.a11y.js

@@ -215,6 +215,7 @@ describe('EuiDataGrid', function () {
     });
     it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('.euiDataGridHeaderCell').last().realHover();
+      cy.wait(200); // Wait for transition
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
       cy.get('div[data-test-subj="dataGridColumnSortingPopover"] button').realClick();

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

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import classNames from 'classnames';
 import React, { forwardRef, useMemo, useRef, useState, memo, useCallback } from 'react';
-import { useGeneratedHtmlId } from '../../services';
+import { useGeneratedHtmlId, useEuiMemoizedStyles, OverrideCopiedTabularContent } from '../../services';
 import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -24,15 +24,16 @@ import { useMutationObserver } from '../observer/mutation_observer';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiDataGridBody } from './body';
 import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplaySelector, startingStyles, useDataGridFullScreenSelector, useDataGridKeyboardShortcuts, checkOrDefaultToolBarDisplayOptions, EuiDataGridToolbar } from './controls';
+import { EuiDataGridPagination, shouldRenderPagination } from './pagination';
 import { DataGridSortedContext, useSorting } from './utils/sorting';
 import { DataGridFocusContext, useFocus, createKeyDownHandler, preventTabbing } from './utils/focus';
 import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memory';
 import { DataGridCellPopoverContext, useCellPopover } from './body/cell';
 import { computeVisibleRows } from './utils/row_count';
-import { EuiDataGridPaginationRenderer } from './utils/data_grid_pagination';
 import { schemaDetectors as providedSchemaDetectors, useMergedSchema } from './utils/data_grid_schema';
 import { useImperativeGridRef } from './utils/ref';
 import { emptyControlColumns } from './data_grid_types';
+import { euiDataGridStyles } from './data_grid.styles';
 
 // Each gridStyle object above sets a specific CSS select to .euiGrid
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -105,6 +106,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
       pageSizeOptions: paginationDefaults.itemsPerPageOptions
     }, _pagination) : _pagination;
   }, [_pagination, paginationDefaults]);
+  var showPagination = pagination && shouldRenderPagination(rowCount, pagination);
   var gridStyleWithDefaults = useMemo(function () {
     return _objectSpread(_objectSpread({}, startingStyles), gridStyle);
   }, [gridStyle]);
@@ -238,7 +240,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     isFullScreen = _useDataGridFullScree.isFullScreen,
     setIsFullScreen = _useDataGridFullScree.setIsFullScreen,
     fullScreenSelector = _useDataGridFullScree.fullScreenSelector,
-    handleGridKeyDown = _useDataGridFullScree.handleGridKeyDown;
+    handleGridKeyDown = _useDataGridFullScree.handleGridKeyDown,
+    fullScreenStyles = _useDataGridFullScree.fullScreenStyles;
 
   /**
    * Expose certain internal APIs as ref to consumer
@@ -262,9 +265,9 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     'euiDataGrid--stripes': gridStyles.stripes
   }, {
     'euiDataGrid--stickyFooter': gridStyles.footer && gridStyles.stickyFooter
-  }, {
+  }, _defineProperty({
     'euiDataGrid--fullScreen': isFullScreen
-  }, {
+  }, fullScreenStyles, isFullScreen), {
     'euiDataGrid--noControls': !toolbarVisibility
   }, className);
 
@@ -309,6 +312,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
       focusContext: focusContext
     })(event);
   }, [focusContext, visibleColCount, visibleRowCount, rowCount, pagination, renderFooterCellValue]);
+  var styles = useEuiMemoizedStyles(euiDataGridStyles);
+  var cssStyles = [styles.euiDataGrid, styles.cellPadding[gridStyles.cellPadding], styles.fontSize[gridStyles.fontSize], styles.borders[gridStyles.border]];
   return ___EmotionJSX(DataGridFocusContext.Provider, {
     value: focusContext
   }, ___EmotionJSX(DataGridCellPopoverContext.Provider, {
@@ -317,8 +322,10 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     value: sortedContext
   }, ___EmotionJSX(EuiFocusTrap, {
     disabled: !isFullScreen,
-    className: "euiDataGrid__focusWrap"
+    className: "euiDataGrid__focusWrap",
+    css: styles.euiDataGrid__focusWrap
   }, ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes,
     onKeyDown: handleGridKeyDown,
     style: isFullScreen ? undefined : {
@@ -352,11 +359,12 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     ref: contentRef,
     onKeyDown: onKeyDown,
     "data-test-subj": "euiDataGridBody",
+    css: styles.euiDataGrid__content,
     className: "euiDataGrid__content",
     role: "grid",
     "aria-rowcount": rowCount,
     id: gridId
-  }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(EuiDataGridBody, {
+  }, wrappingDivFocusProps, gridAriaProps), ___EmotionJSX(OverrideCopiedTabularContent, null, ___EmotionJSX(EuiDataGridBody, {
     columns: orderedVisibleColumns,
     visibleColCount: visibleColCount,
     leadingControlColumns: leadingControlColumns,
@@ -384,10 +392,10 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
     renderCustomGridBody: renderCustomGridBody
-  })), pagination && props['aria-labelledby'] && ___EmotionJSX("p", {
+  }))), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
     id: ariaLabelledById,
     hidden: true
-  }, ariaLabelledBy), pagination && ___EmotionJSX(EuiDataGridPaginationRenderer, _extends({}, pagination, {
+  }, ariaLabelledBy), showPagination && ___EmotionJSX(EuiDataGridPagination, _extends({}, pagination, {
     rowCount: rowCount,
     controls: gridId,
     "aria-label": props['aria-label']