@elastic/eui 95.10.1 → 95.12.0

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

@@ -11,6 +11,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _button = require("../../button");
 var _drag_and_drop = require("../../drag_and_drop");
@@ -20,6 +21,7 @@ var _icon = require("../../icon");
 var _text = require("../../text");
 var _token = require("../../token");
 var _data_grid_schema = require("../utils/data_grid_schema");
+var _column_sorting = require("./column_sorting.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "display", "direction", "index", "sorting", "schema", "schemaDetectors"];
 /*
@@ -84,16 +86,22 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
     });
     sorting.onSort(nextColumns);
   }, [id, sorting]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_column_sorting.euiDataGridColumnSortingStyles);
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, (0, _extends2.default)({
     draggableId: id,
     index: index,
     hasInteractiveChildren: true,
     customDragHandle: true
   }, rest), function (provided, state) {
-    return (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      css: styles.euiDataGridColumnSorting__item,
       className: (0, _classnames.default)('euiDataGridColumnSorting__item', {
         'euiDataGridColumnSorting__item-isDragging': state.isDragging
-      })
+      }),
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false,
+      "data-test-subj": "euiDataGridColumnSorting-sortColumn-".concat(id)
     }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.activeSortLabel",
       default: "{display} is sorting this data grid",
@@ -102,12 +110,7 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
       }
     }, function (activeSortLabel) {
       return activeSortLabel;
-    }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {
-      gutterSize: "xs",
-      alignItems: "center",
-      responsive: false,
-      "data-test-subj": "euiDataGridColumnSorting-sortColumn-".concat(id)
-    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.removeSortLabel",
@@ -123,10 +126,12 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
         iconType: "cross",
         onClick: removeSort
       });
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
+    })), (0, _react2.jsx)(_flex.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
+    , (0, _extends2.default)({
+      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
@@ -141,7 +146,7 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
     })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_text.EuiText, {
       size: "xs"
-    }, (0, _react2.jsx)("p", null, display))))), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    }, display)))), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {
@@ -150,10 +155,10 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
     }, function (toggleLegend) {
       return (0, _react2.jsx)(_button.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
@@ -165,6 +170,6 @@ var EuiDataGridColumnSortingDraggable = exports.EuiDataGridColumnSortingDraggabl
     }), (0, _react2.jsx)(_icon.EuiIcon, {
       type: "grab",
       color: "subdued"
-    }))));
+    })));
   });
 };

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

@@ -11,8 +11,10 @@ exports.getNestedObjectOptions = getNestedObjectOptions;
 exports.renderAdditionalControls = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
-var _accessibility = require("../../accessibility");
 var _utils = require("../../../utils");
+var _services = require("../../../services");
+var _accessibility = require("../../accessibility");
+var _data_grid_toolbar = require("./data_grid_toolbar.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,6 +40,8 @@ var EuiDataGridToolbar = exports.EuiDataGridToolbar = function EuiDataGridToolba
     columnSelector = _ref.columnSelector,
     columnSorting = _ref.columnSorting,
     renderCustomToolbar = _ref.renderCustomToolbar;
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_toolbar.euiDataGridToolbarStyles);
+
   // Enables/disables grid controls based on available width
   var hasRoomForGridControls = _utils.IS_JEST_ENVIRONMENT ? true : gridWidth > minSizeForControls || isFullScreen;
   var columnControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showColumnSelector') ? columnSelector : null;
@@ -58,11 +62,14 @@ var EuiDataGridToolbar = exports.EuiDataGridToolbar = function EuiDataGridToolba
     });
   }
   return (0, _react2.jsx)("div", {
+    css: styles.euiDataGrid__controls,
     className: "euiDataGrid__controls",
     "data-test-subj": "dataGridControls"
   }, hasRoomForGridControls && (0, _react2.jsx)("div", {
+    css: styles.euiDataGrid__leftControls,
     className: "euiDataGrid__leftControls"
   }, renderAdditionalControls(toolbarVisibility, 'left.prepend'), columnControl, columnSortingControl, renderAdditionalControls(toolbarVisibility, 'left.append')), (0, _react2.jsx)("div", {
+    css: styles.euiDataGrid__rightControls,
     className: "euiDataGrid__rightControls"
   }, renderAdditionalControls(toolbarVisibility, 'right'), keyboardShortcutsControl, displayControl, fullScreenControl));
 };

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridToolbarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiDataGridToolbarStyles = exports.euiDataGridToolbarStyles = function euiDataGridToolbarStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiDataGrid__controls: /*#__PURE__*/(0, _react.css)("z-index:2;position:relative;display:flex;justify-content:space-between;align-items:center;gap:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid__controls;"),
+    euiDataGrid__rightControls: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:flex-end;flex-wrap:wrap;column-gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), "&:only-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:euiDataGrid__rightControls;"),
+    euiDataGrid__leftControls: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xxs, ";;label:euiDataGrid__leftControls;")
+  };
+};

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

@@ -21,28 +21,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-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__
-};
-var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref3) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    badgeContent = _ref3.badgeContent,
-    textProps = _ref3.textProps,
-    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function EuiDataGridToolbarControl(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    badgeContent = _ref.badgeContent,
+    textProps = _ref.textProps,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridToolbarControl', className);
   var badgeAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
     count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
@@ -51,15 +35,13 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
     className: classes,
     size: "xs",
     color: "text",
-    textProps: false
-    // Underline actual text, but not the badge
-    ,
-    css: _ref2
+    textProps: false,
+    css: underlineStyles
   }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
     className: (0, _classnames.default)('euiDataGridToolbarControl__text', 'eui-textTruncate', textProps && textProps.className)
   }), children), Boolean(badgeContent) && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
     className: "euiDataGridToolbarControl__badge",
-    css: _ref,
+    css: badgeStyles,
     color: "subdued",
     "aria-label": "- ".concat(badgeAriaLabel) // Punctuation helps add pauses for screen readers
     ,
@@ -71,4 +53,22 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
 // 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/lib/components/datagrid/controls/display_selector.js

@@ -11,11 +11,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
+var _global_styling = require("../../../global_styling");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _popover = require("../../popover");
 var _button = require("../../button");
 var _form = require("../../form");
+var _form2 = require("../../form/form.styles");
 var _flex = require("../../flex");
 var _tool_tip = require("../../tool_tip");
 var _data_grid_toolbar = require("./data_grid_toolbar");
@@ -202,7 +204,13 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
   }, []);
   var buttonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.buttonText', 'Display options');
   var resetButtonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.resetButtonText', 'Reset to default');
+  var euiTheme = (0, _services.useEuiTheme)();
   var displaySelector = (0, _react.useMemo)(function () {
+    var paddingSize = 's';
+    var formMaxWidth = (0, _form2.euiFormMaxWidth)(euiTheme);
+    var popoverWidth = (0, _global_styling.mathWithUnits)([formMaxWidth, euiTheme.euiTheme.size[paddingSize]], function (x, y) {
+      return x + y * 2;
+    });
     return showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
       "data-test-subj": "dataGridDisplaySelectorPopover",
       isOpen: isOpen,
@@ -210,7 +218,10 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
         return setIsOpen(false);
       },
       anchorPosition: "downRight",
-      panelPaddingSize: "s",
+      panelPaddingSize: paddingSize,
+      panelProps: {
+        css: (0, _global_styling.logicalStyle)('width', popoverWidth)
+      },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         content: buttonLabel,
@@ -311,6 +322,6 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
       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/lib/components/datagrid/controls/fullscreen_selector.js

@@ -12,6 +12,7 @@ var _services = require("../../../services");
 var _tool_tip = require("../../tool_tip");
 var _button = require("../../button");
 var _i18n = require("../../i18n");
+var _fullscreen_selector = require("./fullscreen_selector.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -59,19 +60,21 @@ var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = func
         break;
     }
   }, [isFullScreen]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_fullscreen_selector.euiDataGridFullScreenStyles);
   (0, _react.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/lib/components/datagrid/controls/fullscreen_selector.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridFullScreenStyles = void 0;
+var _css = require("@emotion/css");
+var _global_styling = require("../../../global_styling");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiDataGridFullScreenStyles = exports.euiDataGridFullScreenStyles = function euiDataGridFullScreenStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var fullScreenZIndex = Number(euiTheme.levels.header) - 1;
+  return {
+    'euiDataGrid--fullScreen': /*#__PURE__*/(0, _css.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__*/(0, _css.css)((0, _global_styling.logicalCSS)('height', '100vh'), " overflow:hidden;.euiHeader[data-fixed-header]{z-index:", fullScreenZIndex - 1, "!important;}.euiOverlayMask[data-relative-to-header='below']{", (0, _global_styling.logicalCSS)('top', '0'), ";}.euiFlyout{", (0, _global_styling.logicalCSS)('top', '0'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDataGrid__restrictBody;")
+  };
+};

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

@@ -15,6 +15,7 @@ var _popover = require("../../popover");
 var _description_list = require("../../description_list");
 var _text = require("../../text");
 var _i18n = require("../../i18n");
+var _keyboard_shortcuts = require("./keyboard_shortcuts.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,6 +34,7 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
     setIsOpen = _useState2[1];
   var title = (0, _i18n.useEuiI18n)('euiKeyboardShortcuts.title', 'Keyboard shortcuts');
   var titleId = (0, _services.useGeneratedHtmlId)();
+  var styles = (0, _services.useEuiMemoizedStyles)(_keyboard_shortcuts.euiDataGridKeyboardShortcutsStyles);
   var keyboardShortcuts = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_popover.EuiPopover, {
       "data-test-subj": "dataGridKeyboardShortcutsPopover",
@@ -41,6 +43,7 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
         return setIsOpen(false);
       },
       anchorPosition: "downRight",
+      panelPaddingSize: "none",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
         content: title,
         delay: "long"
@@ -59,12 +62,13 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
     }, (0, _react2.jsx)("h2", {
       id: titleId
     }, title)), (0, _react2.jsx)(_text.EuiText, {
+      css: styles.euiDataGrid__keyboardShortcuts,
       className: "euiDataGrid__keyboardShortcuts",
       size: "xs"
     }, (0, _react2.jsx)(_description_list.EuiDescriptionList, {
       "aria-labelledby": titleId,
       type: "column",
-      columnWidths: [1, 3],
+      columnWidths: ['auto', 'auto'],
       align: "center",
       compressed: true,
       listItems: [{
@@ -183,7 +187,7 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
         })
       }]
     })));
-  }, [isOpen, title, titleId]);
+  }, [isOpen, title, titleId, styles]);
   return {
     keyboardShortcuts: keyboardShortcuts
   };

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridKeyboardShortcutsStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiDataGridKeyboardShortcutsStyles = exports.euiDataGridKeyboardShortcutsStyles = function euiDataGridKeyboardShortcutsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGrid__keyboardShortcuts: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '80vh'), " ", (0, _global_styling.logicalCSS)('max-width', (0, _global_styling.mathWithUnits)(euiTheme.size.xxl, function (x) {
+      return x * 10;
+    })), " padding:", euiTheme.size.m, ";", (0, _global_styling.euiYScroll)(euiThemeContext), " .euiDescriptionList{row-gap:0;};label:euiDataGrid__keyboardShortcuts;")
+  };
+};

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

@@ -221,6 +221,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/lib/components/datagrid/data_grid.js

@@ -21,15 +21,16 @@ var _mutation_observer = require("../observer/mutation_observer");
 var _resize_observer = require("../observer/resize_observer");
 var _body = require("./body");
 var _controls = require("./controls");
+var _pagination2 = require("./pagination");
 var _sorting = require("./utils/sorting");
 var _focus = require("./utils/focus");
 var _in_memory = require("./utils/in_memory");
 var _cell = require("./body/cell");
 var _row_count = require("./utils/row_count");
-var _data_grid_pagination = require("./utils/data_grid_pagination");
 var _data_grid_schema = require("./utils/data_grid_schema");
 var _ref = require("./utils/ref");
 var _data_grid_types = require("./data_grid_types");
+var _data_grid = require("./data_grid.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"];
 /*
@@ -113,6 +114,7 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
       pageSizeOptions: paginationDefaults.itemsPerPageOptions
     }, _pagination) : _pagination;
   }, [_pagination, paginationDefaults]);
+  var showPagination = pagination && (0, _pagination2.shouldRenderPagination)(rowCount, pagination);
   var gridStyleWithDefaults = (0, _react.useMemo)(function () {
     return _objectSpread(_objectSpread({}, _controls.startingStyles), gridStyle);
   }, [gridStyle]);
@@ -246,7 +248,8 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     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
@@ -270,9 +273,9 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     'euiDataGrid--stripes': gridStyles.stripes
   }, {
     'euiDataGrid--stickyFooter': gridStyles.footer && gridStyles.stickyFooter
-  }, {
+  }, (0, _defineProperty2.default)({
     'euiDataGrid--fullScreen': isFullScreen
-  }, {
+  }, fullScreenStyles, isFullScreen), {
     'euiDataGrid--noControls': !toolbarVisibility
   }, className);
 
@@ -317,6 +320,8 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
       focusContext: focusContext
     })(event);
   }, [focusContext, visibleColCount, visibleRowCount, rowCount, pagination, renderFooterCellValue]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid.euiDataGridStyles);
+  var cssStyles = [styles.euiDataGrid, styles.cellPadding[gridStyles.cellPadding], styles.fontSize[gridStyles.fontSize], styles.borders[gridStyles.border]];
   return (0, _react2.jsx)(_focus.DataGridFocusContext.Provider, {
     value: focusContext
   }, (0, _react2.jsx)(_cell.DataGridCellPopoverContext.Provider, {
@@ -325,8 +330,10 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     value: sortedContext
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     disabled: !isFullScreen,
-    className: "euiDataGrid__focusWrap"
+    className: "euiDataGrid__focusWrap",
+    css: styles.euiDataGrid__focusWrap
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     onKeyDown: handleGridKeyDown,
     style: isFullScreen ? undefined : {
@@ -360,11 +367,12 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     ref: contentRef,
     onKeyDown: onKeyDown,
     "data-test-subj": "euiDataGridBody",
+    css: styles.euiDataGrid__content,
     className: "euiDataGrid__content",
     role: "grid",
     "aria-rowcount": rowCount,
     id: gridId
-  }, wrappingDivFocusProps, gridAriaProps), (0, _react2.jsx)(_body.EuiDataGridBody, {
+  }, wrappingDivFocusProps, gridAriaProps), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_body.EuiDataGridBody, {
     columns: orderedVisibleColumns,
     visibleColCount: visibleColCount,
     leadingControlColumns: leadingControlColumns,
@@ -392,10 +400,10 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
     renderCustomGridBody: renderCustomGridBody
-  })), pagination && props['aria-labelledby'] && (0, _react2.jsx)("p", {
+  }))), showPagination && props['aria-labelledby'] && (0, _react2.jsx)("p", {
     id: ariaLabelledById,
     hidden: true
-  }, ariaLabelledBy), pagination && (0, _react2.jsx)(_data_grid_pagination.EuiDataGridPaginationRenderer, (0, _extends2.default)({}, pagination, {
+  }, ariaLabelledBy), showPagination && (0, _react2.jsx)(_pagination2.EuiDataGridPagination, (0, _extends2.default)({}, pagination, {
     rowCount: rowCount,
     controls: gridId,
     "aria-label": props['aria-label']