@elastic/eui 97.0.0 → 97.2.0

package/lib/components/datagrid/body/header/column_sorting.js

@@ -0,0 +1,144 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnSorting = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../../services");
+var _i18n = require("../../../i18n");
+var _icon = require("../../../icon");
+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; }
+/*
+ * 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.
+ */
+
+// Keep the i18n scope the same as EuiDataGridHeaderCell
+/* eslint-disable local/i18n */
+
+/**
+ * Column sorting utility helpers
+ */
+var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref) {
+  var _sorting$columns;
+  var sorting = _ref.sorting,
+    id = _ref.id,
+    hasColumnActions = _ref.hasColumnActions;
+  var sortedColumn = (0, _react.useMemo)(function () {
+    return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
+      return col.id === id;
+    });
+  }, [sorting, id]);
+  var isColumnSorted = !!sortedColumn;
+  var hasOnlyOneSort = (sorting === null || sorting === void 0 || (_sorting$columns = sorting.columns) === null || _sorting$columns === void 0 ? void 0 : _sorting$columns.length) === 1;
+
+  /**
+   * Arrow icon
+   */
+  var sortingArrow = (0, _react.useMemo)(function () {
+    return isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
+      type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
+      color: "text",
+      className: "euiDataGridHeaderCell__sortingArrow",
+      "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
+    }) : null;
+  }, [id, isColumnSorted, sortedColumn]);
+
+  /**
+   * aria-sort attribute - should only be used when a single column is being sorted
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
+   * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
+   * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
+   */
+  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+
+  // aria-describedby ID for when aria-sort isn't sufficient
+  var sortingAriaId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'euiDataGridCellHeader',
+    suffix: 'sorting'
+  });
+
+  /**
+   * Sorting status - screen reader text
+   */
+  var sortingScreenReaderText = (0, _react.useMemo)(function () {
+    var _sorting$columns2;
+    if (!isColumnSorted) return null;
+    if (!hasColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
+    return (0, _react2.jsx)("p", {
+      id: sortingAriaId,
+      hidden: true
+    }, sorting === null || sorting === void 0 || (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref2, index) {
+      var columnId = _ref2.id,
+        direction = _ref2.direction;
+      if (hasOnlyOneSort) {
+        if (direction === 'asc') {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByAscendingSingle",
+            default: "Sorted ascending",
+            key: index
+          });
+        } else {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByDescendingSingle",
+            default: "Sorted descending",
+            key: index
+          });
+        }
+      } else if (index === 0) {
+        if (direction === 'asc') {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByAscendingFirst",
+            default: "Sorted by {columnId}, ascending",
+            values: {
+              columnId: columnId
+            },
+            key: index
+          });
+        } else {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByDescendingFirst",
+            default: "Sorted by {columnId}, descending",
+            values: {
+              columnId: columnId
+            },
+            key: index
+          });
+        }
+      } else {
+        if (direction === 'asc') {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByAscendingMultiple",
+            default: ", then sorted by {columnId}, ascending",
+            values: {
+              columnId: columnId
+            },
+            key: index
+          });
+        } else {
+          return (0, _react2.jsx)(_i18n.EuiI18n, {
+            token: "euiDataGridHeaderCell.sortedByDescendingMultiple",
+            default: ", then sorted by {columnId}, descending",
+            values: {
+              columnId: columnId
+            },
+            key: index
+          });
+        }
+      }
+    }), ".");
+  }, [isColumnSorted, hasColumnActions, hasOnlyOneSort, sorting, sortingAriaId]);
+  return {
+    sortingArrow: sortingArrow,
+    ariaSort: ariaSort,
+    sortingAriaId: sortingAriaId,
+    sortingScreenReaderText: sortingScreenReaderText
+  };
+};

package/lib/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -23,7 +23,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 var EuiDataGridControlHeaderCell = exports.EuiDataGridControlHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlColumn = _ref.controlColumn,
     index = _ref.index,
-    visibleColCount = _ref.visibleColCount;
+    isLastColumn = _ref.isLastColumn;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -33,12 +33,12 @@ var EuiDataGridControlHeaderCell = exports.EuiDataGridControlHeaderCell = /*#__P
     id: id,
     index: index,
     width: width,
-    visibleColCount: visibleColCount
+    isLastColumn: isLastColumn
   }), (0, _react2.jsx)(HeaderCellRender, null));
 });
 EuiDataGridControlHeaderCell.propTypes = {
   index: _propTypes.default.number.isRequired,
-  visibleColCount: _propTypes.default.number.isRequired,
+  isLastColumn: _propTypes.default.bool.isRequired,
   controlColumn: _propTypes.default.shape({
     /**
        * Used as the React `key` when rendering content

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -1,39 +1,35 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSortingUtils = exports.usePopoverArrowNavigation = exports.EuiDataGridHeaderCell = void 0;
+exports.EuiDataGridHeaderCell = void 0;
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _tabbable = require("tabbable");
 var _services = require("../../../../services");
-var _i18n = require("../../../i18n");
 var _icon = require("../../../icon");
-var _list_group = require("../../../list_group");
-var _popover = require("../../../popover");
-var _button = require("../../../button");
-var _focus = require("../../utils/focus");
 var _column_actions = require("./column_actions");
-var _data_grid_column_resizer = require("./data_grid_column_resizer");
+var _column_sorting = require("./column_sorting");
+var _draggable_columns = require("./draggable_columns");
+var _column_resizer = require("./column_resizer");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 var _data_grid_header_cell = require("./data_grid_header_cell.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; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
  * 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
@@ -47,153 +43,103 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     columnWidths = _ref.columnWidths,
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
-    visibleColCount = _ref.visibleColCount,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
+    isLastColumn = _ref.isLastColumn,
     sorting = _ref.sorting,
     schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors;
+    schemaDetectors = _ref.schemaDetectors,
+    canDragAndDropColumns = _ref.canDragAndDropColumns,
+    gridStyles = _ref.gridStyles;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
-    displayHeaderCellProps = column.displayHeaderCellProps;
+    displayHeaderCellProps = column.displayHeaderCellProps,
+    actions = column.actions;
   var title = displayAsText || id;
   var children = display || displayAsText || id;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
-  var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
-    setFocusedCell = _useContext.setFocusedCell,
-    focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
+  var hasColumnActions = (0, _column_actions.useHasColumnActions)(actions);
+  var classes = (0, _classnames2.default)(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
+  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
 
-  /*
-   * Column actions
-   */
-  var _useState = (0, _react.useState)(false),
+  // Props passed from <ColumnActions /> to be set on <EuiDataGridHeaderCellWrapper />
+  var _useState = (0, _react.useState)({}),
     _useState2 = _slicedToArray(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
-  var togglePopover = (0, _react.useCallback)(function () {
-    setIsPopoverOpen(function (isOpen) {
-      return !isOpen;
-    });
-  }, []);
-  var closePopover = (0, _react.useCallback)(function () {
-    return setIsPopoverOpen(false);
-  }, []);
-  var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = (0, _react.useMemo)(function () {
-    return (0, _column_actions.getColumnActions)({
-      column: column,
-      columns: columns,
-      schema: schema,
-      schemaDetectors: schemaDetectors,
-      setVisibleColumns: setVisibleColumns,
-      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-      setIsPopoverOpen: setIsPopoverOpen,
-      sorting: sorting,
-      switchColumnPos: switchColumnPos,
-      setFocusedCell: setFocusedCell,
-      columnFocusIndex: index
-    });
-  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, index]);
-  var showColumnActions = columnActions && columnActions.length > 0;
+    propsFromColumnActions = _useState2[0],
+    setPropsFromColumnActions = _useState2[1];
   var actionsButtonRef = (0, _react.useRef)(null);
-  var clickActionsButton = (0, _react.useCallback)(function () {
-    var _actionsButtonRef$cur;
-    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 || _actionsButtonRef$cur.click();
-  }, []);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
-    title: title
-  });
-  var actionsEnterKeyInstructions = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
-
-  /*
-   * Column sorting
-   */
-  var _useSortingUtils = useSortingUtils({
+  var _useColumnSorting = (0, _column_sorting.useColumnSorting)({
       sorting: sorting,
       id: id,
-      showColumnActions: showColumnActions
+      hasColumnActions: hasColumnActions
     }),
-    sortingArrow = _useSortingUtils.sortingArrow,
-    ariaSort = _useSortingUtils.ariaSort,
-    sortingScreenReaderText = _useSortingUtils.sortingScreenReaderText;
-  var sortingAriaId = (0, _services.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'sorting'
-  });
-
-  /*
-   * Rendering
-   */
-  var classes = (0, _classnames2.default)(_defineProperty(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
-  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
-  var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
-  return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
-    className: classes,
-    id: id,
-    index: index,
-    visibleColCount: visibleColCount,
-    width: width,
-    "aria-sort": ariaSort,
-    hasActionsPopover: showColumnActions,
-    openActionsPopover: clickActionsButton,
-    "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-    ,
-    "aria-describedby": sortingAriaId
-  }), function (hasFocusTrap) {
-    return (0, _react2.jsx)(_react.default.Fragment, null, column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
+    sortingArrow = _useColumnSorting.sortingArrow,
+    ariaSort = _useColumnSorting.ariaSort,
+    sortingAriaId = _useColumnSorting.sortingAriaId,
+    sortingScreenReaderText = _useColumnSorting.sortingScreenReaderText;
+  var columnResizer = (0, _react.useMemo)(function () {
+    return column.isResizable !== false && width != null ? (0, _react2.jsx)(_column_resizer.EuiDataGridColumnResizer, {
       columnId: id,
       columnWidth: width,
-      setColumnWidth: setColumnWidth
-    }) : null, (0, _react2.jsx)("div", {
-      css: contentStyles,
-      className: "euiDataGridHeaderCell__content",
-      title: title
-    }, children), sortingArrow, sortingScreenReaderText && (0, _react2.jsx)("p", {
-      id: sortingAriaId,
-      hidden: true
-    }, sortingScreenReaderText), showColumnActions && (0, _react2.jsx)(_popover.EuiPopover, _extends({
-      display: "block",
-      panelPaddingSize: "none",
-      offset: 7,
-      anchorPosition: "downRight",
-      css: styles.euiDataGridHeaderCell__popover,
-      button: (0, _react2.jsx)(_button.EuiButtonIcon, {
-        iconType: "boxesVertical",
-        iconSize: "s",
-        color: "text",
-        css: styles.euiDataGridHeaderCell__button,
-        className: "euiDataGridHeaderCell__button",
-        buttonRef: actionsButtonRef,
-        onClick: togglePopover,
-        onFocus: function onFocus() {
-          return setIsActionsButtonFocused(true);
-        },
-        onBlur: function onBlur() {
-          return setIsActionsButtonFocused(false);
-        },
-        tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-        ,
-        "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-        : undefined,
-        "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
-        "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-      }),
-      isOpen: isPopoverOpen,
-      closePopover: closePopover
-    }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
-      listItems: columnActions,
-      gutterSize: "none",
-      "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
-    })));
+      setColumnWidth: setColumnWidth,
+      isLastColumn: isLastColumn
+    }) : null;
+  }, [column.isResizable, id, width, setColumnWidth, isLastColumn]);
+  return (0, _react2.jsx)(_draggable_columns.ConditionalDraggableColumn, {
+    id: id,
+    index: index,
+    canDragAndDropColumns: !!canDragAndDropColumns,
+    gridStyles: gridStyles,
+    columnResizer: columnResizer,
+    actionsPopoverToggle: actionsButtonRef.current
+  }, function (dragProps) {
+    return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, dragProps, {
+      hasColumnActions: hasColumnActions
+    }, propsFromColumnActions, {
+      className: (0, _classnames2.default)(classes, propsFromColumnActions.className),
+      id: id,
+      index: index,
+      isLastColumn: isLastColumn,
+      width: width,
+      "aria-sort": ariaSort,
+      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
+      ,
+      "aria-describedby": (0, _classnames2.default)(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
+      "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
+    }), function (hasFocusTrap) {
+      return (0, _react2.jsx)(_react.default.Fragment, null, !canDragAndDropColumns && columnResizer, canDragAndDropColumns && (0, _react2.jsx)("span", {
+        className: "euiDataGridHeaderCell__draggableIcon"
+      }, (0, _react2.jsx)(_icon.EuiIcon, {
+        type: "grabOmnidirectional",
+        size: "s",
+        css: styles.euiDataGridHeaderCell__actions
+      })), (0, _react2.jsx)("div", {
+        css: contentStyles,
+        className: "euiDataGridHeaderCell__content",
+        title: title
+      }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && (0, _react2.jsx)(_column_actions.ColumnActions, {
+        index: index,
+        id: id,
+        title: title,
+        column: column,
+        columns: columns,
+        schema: schema,
+        schemaDetectors: schemaDetectors,
+        setVisibleColumns: setVisibleColumns,
+        switchColumnPos: switchColumnPos,
+        sorting: sorting,
+        hasFocusTrap: hasFocusTrap,
+        setPropsFromColumnActions: setPropsFromColumnActions,
+        actionsButtonRef: actionsButtonRef
+      }));
+    });
   });
 });
 EuiDataGridHeaderCell.propTypes = {
+  index: _propTypes.default.number.isRequired,
   column: _propTypes.default.shape({
     /**
        * The unique identifier for this column
@@ -590,171 +536,6 @@ EuiDataGridHeaderCell.propTypes = {
        */
     visibleCellActions: _propTypes.default.number
   }).isRequired,
-  index: _propTypes.default.number.isRequired
+  isLastColumn: _propTypes.default.bool.isRequired
 };
-EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
-
-/**
- * Column sorting utility helpers
- */
-var useSortingUtils = exports.useSortingUtils = function useSortingUtils(_ref2) {
-  var _sorting$columns;
-  var sorting = _ref2.sorting,
-    id = _ref2.id,
-    showColumnActions = _ref2.showColumnActions;
-  var sortedColumn = (0, _react.useMemo)(function () {
-    return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
-      return col.id === id;
-    });
-  }, [sorting, id]);
-  var isColumnSorted = !!sortedColumn;
-  var hasOnlyOneSort = (sorting === null || sorting === void 0 || (_sorting$columns = sorting.columns) === null || _sorting$columns === void 0 ? void 0 : _sorting$columns.length) === 1;
-
-  /**
-   * Arrow icon
-   */
-  var sortingArrow = (0, _react.useMemo)(function () {
-    return isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
-      type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-      color: "text",
-      className: "euiDataGridHeaderCell__sortingArrow",
-      "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-    }) : null;
-  }, [id, isColumnSorted, sortedColumn]);
-
-  /**
-   * aria-sort attribute - should only be used when a single column is being sorted
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
-   * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
-   * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
-   */
-  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
-
-  /**
-   * Sorting status - screen reader text
-   */
-  var sortingScreenReaderText = (0, _react.useMemo)(function () {
-    var _sorting$columns2;
-    if (!isColumnSorted) return null;
-    if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 || (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref3, index) {
-      var columnId = _ref3.id,
-        direction = _ref3.direction;
-      if (hasOnlyOneSort) {
-        if (direction === 'asc') {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingSingle",
-            default: "Sorted ascending",
-            key: index
-          });
-        } else {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingSingle",
-            default: "Sorted descending",
-            key: index
-          });
-        }
-      } else if (index === 0) {
-        if (direction === 'asc') {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingFirst",
-            default: "Sorted by {columnId}, ascending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        } else {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingFirst",
-            default: "Sorted by {columnId}, descending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        }
-      } else {
-        if (direction === 'asc') {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByAscendingMultiple",
-            default: ", then sorted by {columnId}, ascending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        } else {
-          return (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiDataGridHeaderCell.sortedByDescendingMultiple",
-            default: ", then sorted by {columnId}, descending",
-            values: {
-              columnId: columnId
-            },
-            key: index
-          });
-        }
-      }
-    }), ".");
-  }, [isColumnSorted, showColumnActions, hasOnlyOneSort, sorting]);
-  return {
-    sortingArrow: sortingArrow,
-    ariaSort: ariaSort,
-    sortingScreenReaderText: sortingScreenReaderText
-  };
-};
-
-/**
- * Add keyboard arrow navigation to the cell actions popover
- * to match the UX of the rest of EuiDataGrid
- */
-var usePopoverArrowNavigation = exports.usePopoverArrowNavigation = function usePopoverArrowNavigation() {
-  var popoverPanelRef = (0, _react.useRef)(null);
-  var actionsRef = (0, _react.useRef)(undefined);
-  var panelRef = (0, _react.useCallback)(function (ref) {
-    popoverPanelRef.current = ref;
-    actionsRef.current = ref ? (0, _tabbable.tabbable)(ref) : undefined;
-  }, []);
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    var _actionsRef$current;
-    if (e.key !== _services.keys.ARROW_DOWN && e.key !== _services.keys.ARROW_UP) return;
-    if (!((_actionsRef$current = actionsRef.current) !== null && _actionsRef$current !== void 0 && _actionsRef$current.length)) return;
-    e.preventDefault();
-    var initialState = document.activeElement === popoverPanelRef.current;
-    var currentIndex = !initialState ? actionsRef.current.findIndex(function (el) {
-      return document.activeElement === el;
-    }) : -1;
-    var lastIndex = actionsRef.current.length - 1;
-    var indexToFocus;
-    if (initialState) {
-      if (e.key === _services.keys.ARROW_DOWN) {
-        indexToFocus = 0;
-      } else if (e.key === _services.keys.ARROW_UP) {
-        indexToFocus = lastIndex;
-      }
-    } else {
-      if (e.key === _services.keys.ARROW_DOWN) {
-        indexToFocus = currentIndex + 1;
-        if (indexToFocus > lastIndex) {
-          indexToFocus = 0;
-        }
-      } else if (e.key === _services.keys.ARROW_UP) {
-        indexToFocus = currentIndex - 1;
-        if (indexToFocus < 0) {
-          indexToFocus = lastIndex;
-        }
-      }
-    }
-    actionsRef.current[indexToFocus].focus();
-  }, []);
-  return {
-    panelRef: panelRef,
-    panelProps: {
-      onKeyDown: onKeyDown
-    },
-    popoverScreenReaderText: (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiDataGridHeaderCell.actionsPopoverScreenReaderText",
-      default: "To navigate through the list of column actions, press the Tab or Up and Down arrow keys."
-    })
-  };
-};
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';

package/lib/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -27,6 +27,6 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__button: /*#__PURE__*/(0, _react.css)("overflow:hidden;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__button;")
+    euiDataGridHeaderCell__actions: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
   };
 };