@elastic/eui 95.10.1 → 95.12.0

package/es/components/datagrid/controls/column_selector.js

@@ -19,16 +19,18 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import React, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
+import { useDependentState, useEuiMemoizedStyles } from '../../../services';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
 import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiButtonEmpty } from '../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSwitch, EuiFieldText } from '../../form';
-import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '../../drag_and_drop';
+import { EuiText } from '../../text';
 import { EuiIcon } from '../../icon';
-import { useDependentState } from '../../../services';
+import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '../../drag_and_drop';
 import { getNestedObjectOptions } from './data_grid_toolbar';
 import { EuiDataGridToolbarControl } from './data_grid_toolbar_control';
+import { euiDataGridColumnSelectorStyles } from './column_selector.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useDataGridColumnSelector = function useDataGridColumnSelector(availableColumns, columnVisibility, showColumnSelector, displayValues) {
   var allowColumnHiding = getNestedObjectOptions(showColumnSelector, 'allowHide');
@@ -90,6 +92,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       return column != null;
     });
   }, [availableColumns, visibleColumns]);
+  var styles = useEuiMemoizedStyles(euiDataGridColumnSelectorStyles);
   var columnSelector = useMemo(function () {
     return allowColumnHiding || allowColumnReorder ? ___EmotionJSX(EuiPopover, {
       "data-test-subj": "dataGridColumnSelectorPopover",
@@ -98,7 +101,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         return setIsOpen(false);
       },
       anchorPosition: "downLeft",
-      panelPaddingSize: "s",
+      panelPaddingSize: "none",
       hasDragDrop: true,
       button: ___EmotionJSX(EuiDataGridToolbarControl, {
         badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
@@ -111,7 +114,9 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         token: "euiColumnSelector.button",
         default: "Columns"
       }))
-    }, allowColumnHiding && ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
+    }, allowColumnHiding && ___EmotionJSX(EuiPopoverTitle, {
+      paddingSize: "s"
+    }, ___EmotionJSX(EuiI18n, {
       tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
       defaults: ['Search', 'Search columns']
     }, function (_ref4) {
@@ -133,7 +138,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
     }, ___EmotionJSX(EuiDroppable, {
       droppableId: "columnOrder",
       isDropDisabled: !isDragEnabled,
-      className: "euiDataGrid__controlScroll"
+      css: styles.euiDataGridColumnSelector
     }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
       return ___EmotionJSX(EuiDraggable, {
         key: id,
@@ -144,6 +149,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         customDragHandle: true
       }, function (provided, state) {
         return ___EmotionJSX("div", {
+          css: styles.euiDataGridColumnSelector__item,
           className: classNames('euiDataGridColumnSelector__item', {
             'euiDataGridColumnSelector__item-isDragging': state.isDragging
           }),
@@ -174,7 +180,8 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         , _extends({}, provided.dragHandleProps, {
           "aria-hidden": true,
           tabIndex: -1
-        }), ___EmotionJSX("span", {
+        }), ___EmotionJSX(EuiText, {
+          size: "xs",
           className: "euiDataGridColumnSelector__itemLabel"
         }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
           grow: false
@@ -185,7 +192,9 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           color: "subdued"
         }))));
       });
-    })))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
+    })))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, {
+      paddingSize: "s"
+    }, ___EmotionJSX(EuiFlexGroup, {
       gutterSize: "s",
       responsive: false,
       justifyContent: "spaceBetween"
@@ -214,7 +223,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       token: "euiColumnSelector.hideAll",
       default: "Hide all"
     })))))) : null;
-  }, [availableColumns.length, numberOfHiddenFields, orderedVisibleColumns.length, allowColumnHiding, allowColumnReorder, isOpen, columnSearchText, displayValues, visibleColumnIds, sortedColumns, setVisibleColumns, setIsOpen, onDragEnd, isDragEnabled, dragHandleAriaLabel, filteredColumns]);
+  }, [styles, availableColumns.length, numberOfHiddenFields, orderedVisibleColumns.length, allowColumnHiding, allowColumnReorder, isOpen, columnSearchText, displayValues, visibleColumnIds, sortedColumns, setVisibleColumns, setIsOpen, onDragEnd, isDragEnabled, dragHandleAriaLabel, filteredColumns]);
 
   /**
    * Used for moving columns left/right, available in the headers actions menu

package/es/components/datagrid/controls/column_selector.styles.js

@@ -0,0 +1,22 @@
+/*
+ * 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';
+import { euiShadowLarge } from '../../../themes';
+export var euiDataGridColumnSelectorStyles = function euiDataGridColumnSelectorStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var maxStaticHeight = mathWithUnits(euiTheme.size.base, function (x) {
+    return x * 25;
+  });
+  var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 50vh)");
+  return {
+    euiDataGridColumnSelector: /*#__PURE__*/css(euiYScroll(euiThemeContext), " ", logicalCSS('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
+    euiDataGridColumnSelector__item: /*#__PURE__*/css("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", euiShadowLarge(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSelector__item;")
+  };
+};

package/es/components/datagrid/controls/column_sorting.js

@@ -22,6 +22,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  */
 
 import React, { useEffect, useState, useMemo, useCallback, memo } from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiDragDropContext, euiDragDropReorder, EuiDroppable } from '../../drag_and_drop';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
@@ -29,9 +30,10 @@ import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiPopover, EuiPopoverFooter } from '../../popover';
 import { EuiText } from '../../text';
 import { EuiToken } from '../../token';
+import { getDetailsForSchema } from '../utils/data_grid_schema';
 import { EuiDataGridToolbarControl } from './data_grid_toolbar_control';
 import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable';
-import { getDetailsForSchema } from '../utils/data_grid_schema';
+import { euiDataGridColumnSortingStyles } from './column_sorting.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useDataGridColumnSorting = function useDataGridColumnSorting(_ref) {
   var sorting = _ref.sorting,
@@ -52,6 +54,7 @@ export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
     setIsOpen = _useState2[1];
   var sortingButtonText = useEuiI18n('euiColumnSorting.button', 'Sort fields');
   var sortFieldAriaLabel = useEuiI18n('euiColumnSorting.sortFieldAriaLabel', 'Sort by: ');
+  var styles = useEuiMemoizedStyles(euiDataGridColumnSortingStyles);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     availableColumnsIsOpen = _useState4[0],
@@ -152,7 +155,7 @@ export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
     onDragEnd: onDragEnd
   }, ___EmotionJSX(EuiDroppable, {
     droppableId: "columnSorting",
-    className: "euiDataGrid__controlScroll"
+    css: styles.euiDataGridColumnSorting
   }, ___EmotionJSX(React.Fragment, null, sorting.columns.map(function (_ref7, index) {
     var id = _ref7.id,
       direction = _ref7.direction;
@@ -202,6 +205,7 @@ export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
       default: "Pick fields to sort by"
     }))
   }, ___EmotionJSX("div", {
+    css: styles.euiDataGridColumnSorting__fieldList,
     className: "euiDataGridColumnSorting__fieldList",
     role: "listbox"
   }, inactiveSortableColumns.map(function (_ref8) {
@@ -209,6 +213,7 @@ export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
       defaultSortDirection = _ref8.defaultSortDirection;
     return ___EmotionJSX("button", {
       key: id,
+      css: styles.euiDataGridColumnSorting__field,
       className: "euiDataGridColumnSorting__field",
       "aria-label": "".concat(sortFieldAriaLabel, " ").concat(id),
       role: "option",

package/es/components/datagrid/controls/column_sorting.styles.js

@@ -0,0 +1,35 @@
+/*
+ * 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 { euiFontSize, euiMinBreakpoint, euiYScroll, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiShadowLarge } from '../../../themes';
+export var euiDataGridColumnSortingStyles = function euiDataGridColumnSortingStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var maxStaticHeight = mathWithUnits(euiTheme.size.m, function (x) {
+    return x * 25;
+  });
+  var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 75vh)");
+  return {
+    /**
+     * Sorted fields
+     */
+    euiDataGridColumnSorting: /*#__PURE__*/css(logicalCSS('max-height', maxResponsiveHeight), " ", logicalCSS('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", euiYScroll(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
+    euiDataGridColumnSorting__item: /*#__PURE__*/css(logicalCSS('padding-horizontal', euiTheme.size.s), " &.euiDataGridColumnSorting__item-isDragging{", euiShadowLarge(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSorting__item;"),
+    euiDataGridColumnSorting__name: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.xs), " ", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-right', euiTheme.size.l), ";};label:euiDataGridColumnSorting__name;"),
+    euiDataGridColumnSorting__order: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('min-width', mathWithUnits(euiTheme.size.xxl, function (x) {
+      return x * 5;
+    })), ";}.euiButtonGroup__buttons{border:none;}.euiButtonGroupButton{font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";};label:euiDataGridColumnSorting__order;"),
+    euiDataGridColumnSorting__dragHandle: /*#__PURE__*/css(logicalCSS('padding-right', euiTheme.size.xs), ";;label:euiDataGridColumnSorting__dragHandle;"),
+    /**
+     * 'Pick fields to sort by' popover
+     */
+    euiDataGridColumnSorting__fieldList: /*#__PURE__*/css("display:flex;flex-direction:column;padding-block:", euiTheme.size.xs, ";", logicalCSS('max-height', maxResponsiveHeight), " ", euiYScroll(euiThemeContext), ";;label:euiDataGridColumnSorting__fieldList;"),
+    euiDataGridColumnSorting__field: /*#__PURE__*/css("padding-block:", euiTheme.size.xs, ";padding-inline:", euiTheme.size.s, ";outline-offset:-", euiTheme.focus.width, ";;label:euiDataGridColumnSorting__field;")
+  };
+};

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

@@ -19,6 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroup, EuiButtonIcon } from '../../button';
 import { EuiDraggable } from '../../drag_and_drop';
@@ -28,6 +29,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",
@@ -82,16 +84,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",
@@ -100,12 +108,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",
@@ -121,10 +124,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
@@ -139,7 +144,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: {
@@ -148,10 +153,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
@@ -163,7 +168,7 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     }), ___EmotionJSX(EuiIcon, {
       type: "grab",
       color: "subdued"
-    }))));
+    })));
   });
 };
 EuiDataGridColumnSortingDraggable.propTypes = {

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

@@ -8,8 +8,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  */
 
 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/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/es/components/datagrid/controls/data_grid_toolbar_control.js

@@ -19,28 +19,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
@@ -49,15 +33,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
     ,
@@ -151,4 +133,22 @@ EuiDataGridToolbarControl.propTypes = {
 };
 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/es/components/datagrid/controls/display_selector.js

@@ -23,11 +23,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  */
 
 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';
@@ -202,7 +204,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,
@@ -210,7 +218,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,
@@ -311,6 +322,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/es/components/datagrid/controls/fullscreen_selector.js

@@ -13,10 +13,11 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  */
 
 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() {
@@ -54,19 +55,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/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/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -13,13 +13,14 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
  */
 
 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),
@@ -28,6 +29,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",
@@ -36,6 +38,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
         return setIsOpen(false);
       },
       anchorPosition: "downRight",
+      panelPaddingSize: "none",
       button: ___EmotionJSX(EuiToolTip, {
         content: title,
         delay: "long"
@@ -54,12 +57,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: [{
@@ -178,7 +182,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
         })
       }]
     })));
-  }, [isOpen, title, titleId]);
+  }, [isOpen, title, titleId, styles]);
   return {
     keyboardShortcuts: keyboardShortcuts
   };

package/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/es/components/datagrid/data_grid.a11y.js

@@ -223,6 +223,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();