@elastic/eui 95.10.1 → 95.12.0

package/optimize/es/components/datagrid/body/cell/data_grid_cell_popover.styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/*
+ * 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, keyframes } from '@emotion/react';
+import { euiScrollBarStyles, euiCanAnimate } from '../../../../global_styling';
+export var euiDataGridCellPopoverStyles = function euiDataGridCellPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGridRowCell__popover: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " overflow:auto;", euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";animation-name:", fadeIn, ";};label:euiDataGridRowCell__popover;")
+  };
+};
+var fadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));

package/optimize/es/components/datagrid/body/cell/focus_utils.js

@@ -9,11 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React, { useEffect, useState, useMemo } from 'react';
 import { tabbable } from 'tabbable';
-import { keys } from '../../../../services';
-import { useGeneratedHtmlId } from '../../../../services/accessibility';
+import classNames from 'classnames';
+import { keys, useGeneratedHtmlId } from '../../../../services';
 import { isDOMNode } from '../../../../utils';
 import { EuiFocusTrap } from '../../../focus_trap';
-import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiI18n } from '../../../i18n';
 
 /**
@@ -87,20 +86,22 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
     _useState6 = _slicedToArray(_useState5, 2),
     isExited = _useState6[0],
     setExited = _useState6[1];
-  var keyboardHintAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'keyboardHint'
-  });
-  var exitedHintAriaId = useGeneratedHtmlId({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'exited'
+  var ariaDescribedById = useGeneratedHtmlId({
+    suffix: 'focusTrapHint'
   });
 
   // direct DOM manipulation as workaround to attach required hints
   useEffect(function () {
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
-  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
+    cellEl.setAttribute('aria-describedby', classNames(currentAriaDescribedbyId, ariaDescribedById));
+    return function () {
+      if (currentAriaDescribedbyId) {
+        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+      } else {
+        cellEl.removeAttribute('aria-describedby');
+      }
+    };
+  }, [cellEl, ariaDescribedById]);
   useEffect(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -154,23 +155,20 @@ export var FocusTrappedChildren = function FocusTrappedChildren(_ref2) {
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
     }
-  }, children, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: exitedHintAriaId,
-    "aria-hidden": "true"
+  }, children, ___EmotionJSX("p", {
+    id: ariaDescribedById,
+    hidden: true
   }, isExited && ___EmotionJSX(EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapExitPrompt",
     default: "Exited cell content."
-  }))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-    id: keyboardHintAriaId,
-    "aria-hidden": "true"
-  }, !isCellEntered && ___EmotionJSX(EuiI18n
+  }), !isCellEntered && ___EmotionJSX(EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
     default: "Press the Enter key to interact with this cell's contents."
-  }))));
+  })));
 };
 
 /**

package/optimize/es/components/datagrid/body/data_grid_body.js

@@ -10,8 +10,10 @@ var _excluded = ["renderCustomGridBody"];
  */
 
 import React from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiDataGridBodyVirtualized } from './data_grid_body_virtualized';
 import { EuiDataGridBodyCustomRender } from './data_grid_body_custom';
+import { euiDataGridBodyStyles } from './data_grid_body.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridBody = function EuiDataGridBody(_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
@@ -21,7 +23,12 @@ export var EuiDataGridBody = function EuiDataGridBody(_ref) {
    * + virtualization library for rendering content, or if consumers have
    * passed their own custom renderer
    */
+  var styles = useEuiMemoizedStyles(euiDataGridBodyStyles);
+  var cssStyles = [styles.euiDataGridBody, renderCustomGridBody ? styles.customRender : styles.virtualized];
   return renderCustomGridBody ? ___EmotionJSX(EuiDataGridBodyCustomRender, _extends({
-    renderCustomGridBody: renderCustomGridBody
-  }, props)) : ___EmotionJSX(EuiDataGridBodyVirtualized, props);
+    renderCustomGridBody: renderCustomGridBody,
+    css: cssStyles
+  }, props)) : ___EmotionJSX(EuiDataGridBodyVirtualized, _extends({
+    css: cssStyles
+  }, props));
 };

package/optimize/es/components/datagrid/body/data_grid_body.styles.js

@@ -0,0 +1,26 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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 { euiScrollBarStyles, logicalSizeCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;"
+} : {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridBodyStyles = function euiDataGridBodyStyles(euiThemeContext) {
+  return {
+    euiDataGridBody: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), ";;label:euiDataGridBody;"),
+    virtualized: _ref,
+    customRender: /*#__PURE__*/css(logicalSizeCSS('100%'), " overflow:auto;;label:customRender;")
+  };
+};

package/optimize/es/components/datagrid/body/data_grid_body_custom.js

@@ -43,7 +43,8 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     pagination = _ref.pagination,
     rowHeightsOptions = _ref.rowHeightsOptions,
     gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles;
+    gridStyles = _ref.gridStyles,
+    className = _ref.className;
   /**
    * Columns & widths
    */
@@ -88,11 +89,13 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow;
   var _useDataGridFooter = useDataGridFooter({
@@ -100,13 +103,15 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRows.visibleRowCount,
       visibleRowIndex: visibleRows.visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow;
 
@@ -130,9 +135,10 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
       interactiveCellId: interactiveCellId,
       setRowHeight: setRowHeight,
       rowHeightsOptions: rowHeightsOptions,
-      rowHeightUtils: rowHeightUtils
+      rowHeightUtils: rowHeightUtils,
+      gridStyles: gridStyles
     };
-  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils]);
+  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils, gridStyles]);
   var Cell = useCallback(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,
@@ -154,7 +160,7 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
   return ___EmotionJSX("div", _extends({}, customGridBodyProps, {
-    className: classNames('euiDataGrid__customRenderBody', customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
+    className: classNames('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,

package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -103,7 +103,8 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     gridWidth = _ref3.gridWidth,
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef;
+    wrapperRef = _ref3.wrapperRef,
+    className = _ref3.className;
   /**
    * Grid refs & observers
    */
@@ -148,11 +149,13 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      visibleColCount: visibleColCount,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -161,13 +164,15 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       renderCellPopover: renderCellPopover,
       rowIndex: visibleRowCount,
       visibleRowIndex: visibleRowCount,
+      visibleColCount: visibleColCount,
       interactiveCellId: interactiveCellId,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow,
     footerRowHeight = _useDataGridFooter.footerRowHeight;
@@ -282,9 +287,10 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       rowHeightUtils: rowHeightUtils,
       rowManager: rowManager,
       pagination: pagination,
-      headerRowHeight: headerRowHeight
+      headerRowHeight: headerRowHeight,
+      gridStyles: gridStyles
     };
-  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight]);
+  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight, gridStyles]);
   var rowWrapperContextValue = useMemo(function () {
     return {
       headerRowHeight: headerRowHeight,
@@ -296,7 +302,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     value: rowWrapperContextValue
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
     ref: gridRef,
-    className: classNames('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
+    className: classNames('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
     innerElementType: InnerElement,
     outerRef: outerGridRef,

package/optimize/es/components/datagrid/body/footer/data_grid_footer.styles.js

@@ -0,0 +1,24 @@
+/*
+ * 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';
+import { euiDataGridVariables } from '../../data_grid.styles';
+export var euiDataGridFooterStyles = function euiDataGridFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  return {
+    euiDataGridFooter: /*#__PURE__*/css("display:flex;", logicalCSS('width', 'fit-content'), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGridFooter;"),
+    sticky: /*#__PURE__*/css("z-index:", levels.stickyHeader, ";position:sticky;", logicalCSS('bottom', 0), ";;label:sticky;"),
+    overline: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.text)), ";;label:overline;"),
+    shade: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    striped: /*#__PURE__*/css(".euiDataGrid--stripes &{background-color:", euiTheme.colors.lightestShade, ";};label:striped;"),
+    euiDataGridFooterCell: /*#__PURE__*/css("flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";;label:euiDataGridFooterCell;")
+  };
+};

package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex", "visibleColCount", "gridStyles"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,9 +9,11 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
  * Side Public License, v 1.
  */
 
-import classnames from 'classnames';
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { forwardRef, memo, useCallback, useContext } from 'react';
+import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../../services';
 import { EuiDataGridCell, DataGridCellPopoverContext } from '../cell';
+import { euiDataGridFooterStyles } from './data_grid_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var renderEmpty = function renderEmpty() {
   return null;
@@ -31,21 +33,32 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
     _dataTestSubj = _ref['data-test-subj'],
     _ref$visibleRowIndex = _ref.visibleRowIndex,
     visibleRowIndex = _ref$visibleRowIndex === void 0 ? rowIndex : _ref$visibleRowIndex,
+    visibleColCount = _ref.visibleColCount,
+    gridStyles = _ref.gridStyles,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classnames('euiDataGridRow', {
-    'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
-  }, 'euiDataGridFooter', className);
-  var dataTestSubj = classnames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
+  var styles = useEuiMemoizedStyles(euiDataGridFooterStyles);
+  var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
+  var classes = classNames('euiDataGridFooter', className);
+  var dataTestSubj = classNames('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
+  var getCellClasses = useCallback(function (columnIndex, classes) {
+    return classNames('euiDataGridFooterCell', {
+      'euiDataGridRowCell--firstColumn': columnIndex === 0,
+      'euiDataGridRowCell--lastColumn': columnIndex === visibleColCount - 1
+    }, classes);
+  }, [visibleColCount]);
   var popoverContext = useContext(DataGridCellPopoverContext);
   var sharedCellProps = {
+    css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
-    popoverContext: popoverContext
+    popoverContext: popoverContext,
+    gridStyles: gridStyles
   };
   return ___EmotionJSX("div", _extends({
     ref: ref,
     role: "row",
+    css: cssStyles,
     className: classes,
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (_ref2, i) {
@@ -60,7 +73,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: classnames('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(i, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }), columns.map(function (_ref3, i) {
     var id = _ref3.id;
@@ -77,7 +90,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       renderCellValue: renderCellValue,
       renderCellPopover: renderCellPopover,
       isExpandable: true,
-      className: "euiDataGridFooterCell"
+      className: getCellClasses(columnPosition)
     }));
   }), trailingControlColumns.map(function (_ref4, i) {
     var id = _ref4.id,
@@ -92,7 +105,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (
       width: width,
       renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
       isExpandable: false,
-      className: classnames('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
+      className: getCellClasses(colIndex, classNames('euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className))
     }));
   }));
 }));

package/optimize/es/components/datagrid/body/header/column_actions.js

@@ -209,8 +209,15 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
     var onClickSortAsc = function onClickSortAsc() {
       sortBy('asc');
     };
+    var isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc';
     var action = {
-      label: ___EmotionJSX(EuiI18n, {
+      label: isSorted ? ___EmotionJSX(EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: label
+        }
+      }) : ___EmotionJSX(EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -219,7 +226,6 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
       }),
       onClick: onClickSortAsc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortUp',
       size: 'xs',
       color: 'text'
@@ -231,8 +237,15 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
     var onClickSortDesc = function onClickSortDesc() {
       sortBy('desc');
     };
+    var _isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc';
     var _action2 = {
-      label: ___EmotionJSX(EuiI18n, {
+      label: _isSorted ? ___EmotionJSX(EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: _label
+        }
+      }) : ___EmotionJSX(EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -241,7 +254,6 @@ export var getSortColumnActions = function getSortColumnActions(_ref4) {
       }),
       onClick: onClickSortDesc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortDown',
       size: 'xs',
       color: 'text'

package/optimize/es/components/datagrid/body/header/data_grid_column_resizer.js

@@ -15,6 +15,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  */
 
 import React, { Component } from 'react';
+import { RenderWithEuiStylesMemoizer } from '../../../../services';
+import { logicalStyle } from '../../../../global_styling';
+import { euiDataGridColumnResizerStyles } from './data_grid_column_resizer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MINIMUM_COLUMN_WIDTH = 40;
 export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
@@ -69,14 +72,18 @@ export var EuiDataGridColumnResizer = /*#__PURE__*/function (_Component) {
   return _createClass(EuiDataGridColumnResizer, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
       var offset = this.state.offset;
-      return ___EmotionJSX("div", {
-        className: "euiDataGridColumnResizer",
-        "data-test-subj": "dataGridColumnResizer",
-        style: {
-          marginRight: "".concat(-offset, "px")
-        },
-        onMouseDown: this.onMouseDown
+      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(euiDataGridColumnResizerStyles);
+        var cssStyles = [styles.euiDataGridColumnResizer, offset && styles.isDragging];
+        return ___EmotionJSX("div", {
+          css: cssStyles,
+          className: "euiDataGridColumnResizer",
+          "data-test-subj": "dataGridColumnResizer",
+          style: offset ? logicalStyle('margin-right', "".concat(-offset, "px")) : undefined,
+          onMouseDown: _this2.onMouseDown
+        });
       });
     }
   }]);

package/optimize/es/components/datagrid/body/header/data_grid_column_resizer.styles.js

@@ -0,0 +1,36 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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, mathWithUnits } from '../../../../global_styling';
+
+// Resizer straddles the column border and is an invisible hitzone for dragging
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1i9vv3a-isDragging",
+  styles: "opacity:1;label:isDragging;"
+} : {
+  name: "1i9vv3a-isDragging",
+  styles: "opacity:1;label:isDragging;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridColumnResizerStyles = function euiDataGridColumnResizerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var clickableWidth = euiTheme.size.base;
+  var positionOffset = mathWithUnits(clickableWidth, function (x) {
+    return x / -2;
+  });
+  var indicatorWidth = mathWithUnits([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  }); // Odd number because it straddles a border
+  var indicatorOffset = "-".concat(euiTheme.border.width.thin);
+  return {
+    euiDataGridColumnResizer: /*#__PURE__*/css("z-index:2;position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', positionOffset), " ", logicalCSS('margin-left', indicatorOffset), " ", logicalCSS('width', indicatorWidth), " background-color:", euiTheme.colors.primary, ";}.euiDataGridHeaderCell:last-child &{", logicalCSS('right', 0), " ", logicalCSS('width', euiTheme.size.s), " &::after{", logicalCSS('left', 'auto'), " ", logicalCSS('right', 0), ";}};label:euiDataGridColumnResizer;"),
+    isDragging: _ref
+  };
+};

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

@@ -13,7 +13,8 @@ import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var controlColumn = _ref.controlColumn,
-    index = _ref.index;
+    index = _ref.index,
+    visibleColCount = _ref.visibleColCount;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -22,9 +23,8 @@ export var EuiDataGridControlHeaderCell = /*#__PURE__*/memo(function (_ref) {
     className: classNames('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width
-  }), ___EmotionJSX("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, ___EmotionJSX(HeaderCellRender, null)));
+    width: width,
+    visibleColCount: visibleColCount
+  }), ___EmotionJSX(HeaderCellRender, null));
 });
 EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';