@elastic/eui 93.3.0 → 93.4.0

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

@@ -20,7 +20,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import classnames from 'classnames';
 import PropTypes from "prop-types";
-import React, { useContext, useState, useRef, useCallback, useMemo } from 'react';
+import React, { useContext, useState, useRef, useCallback, useMemo, memo } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../../services';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
@@ -29,13 +29,25 @@ import { EuiI18n } from '../../../i18n';
 import { EuiIcon } from '../../../icon';
 import { EuiListGroup } from '../../../list_group';
 import { EuiPopover } from '../../../popover';
-import { DataGridSortingContext } from '../../utils/sorting';
 import { DataGridFocusContext } from '../../utils/focus';
 import { getColumnActions } from './column_actions';
 import { EuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    arrow = _ref.arrow;
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
+    title: title,
+    className: "euiDataGridHeaderCell__content"
+  }, children), arrow);
+};
+CellContent.propTypes = {
+  title: PropTypes.string.isRequired,
+  arrow: PropTypes.node
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "mc0thx-EuiDataGridHeaderCell",
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
 } : {
@@ -43,18 +55,19 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref2) {
   var _classnames;
-  var column = _ref.column,
-    index = _ref.index,
-    columns = _ref.columns,
-    columnWidths = _ref.columnWidths,
-    schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors,
-    defaultColumnWidth = _ref.defaultColumnWidth,
-    setColumnWidth = _ref.setColumnWidth,
-    setVisibleColumns = _ref.setVisibleColumns,
-    switchColumnPos = _ref.switchColumnPos;
+  var index = _ref2.index,
+    column = _ref2.column,
+    columns = _ref2.columns,
+    columnWidths = _ref2.columnWidths,
+    defaultColumnWidth = _ref2.defaultColumnWidth,
+    setColumnWidth = _ref2.setColumnWidth,
+    setVisibleColumns = _ref2.setVisibleColumns,
+    switchColumnPos = _ref2.switchColumnPos,
+    sorting = _ref2.sorting,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
@@ -64,25 +77,25 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
-  var _useContext2 = useContext(DataGridSortingContext),
-    sorting = _useContext2.sorting;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = getColumnActions({
-    column: column,
-    columns: columns,
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    setVisibleColumns: setVisibleColumns,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    setIsPopoverOpen: setIsPopoverOpen,
-    sorting: sorting,
-    switchColumnPos: switchColumnPos,
-    setFocusedCell: setFocusedCell
-  });
+  var columnActions = useMemo(function () {
+    return getColumnActions({
+      column: column,
+      columns: columns,
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      setVisibleColumns: setVisibleColumns,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      setIsPopoverOpen: setIsPopoverOpen,
+      sorting: sorting,
+      switchColumnPos: switchColumnPos,
+      setFocusedCell: setFocusedCell
+    });
+  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell]);
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = useRef(null);
   var focusActionsButton = useCallback(function () {
@@ -109,11 +122,9 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
-  var cellContent = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
-    title: displayAsText || id,
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id), sortingArrow);
   var classes = classnames((_classnames = {}, _defineProperty(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), _defineProperty(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), _defineProperty(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
+  var title = displayAsText || id;
+  var children = display || displayAsText || id;
   return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -127,7 +138,10 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, cellContent, sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
+  }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
       return setIsPopoverOpen(function (isPopoverOpen) {
@@ -143,12 +157,15 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, cellContent, ___EmotionJSX(EuiPopover, _extends({
+  }, ___EmotionJSX(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), ___EmotionJSX(EuiPopover, _extends({
     display: "block",
     panelPaddingSize: "none",
     offset: 7,
     anchorPosition: "downRight",
-    css: _ref2 // Align to right
+    css: _ref3 // Align to right
     ,
     focusTrapProps: {
       // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
@@ -184,11 +201,7 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     token: "euiDataGridHeaderCell.headerActions",
     default: "Click to view column header actions"
   }))));
-};
-
-/**
- * Column sorting utility helpers
- */
+});
 EuiDataGridHeaderCell.propTypes = {
   column: PropTypes.shape({
     /**
@@ -615,11 +628,16 @@ EuiDataGridHeaderCell.propTypes = {
   }).isRequired,
   index: PropTypes.number.isRequired
 };
-export var useSortingUtils = function useSortingUtils(_ref3) {
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
+
+/**
+ * Column sorting utility helpers
+ */
+export var useSortingUtils = function useSortingUtils(_ref4) {
   var _sorting$columns;
-  var sorting = _ref3.sorting,
-    id = _ref3.id,
-    showColumnActions = _ref3.showColumnActions;
+  var sorting = _ref4.sorting,
+    id = _ref4.id,
+    showColumnActions = _ref4.showColumnActions;
   var sortedColumn = useMemo(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -631,12 +649,14 @@ export var useSortingUtils = function useSortingUtils(_ref3) {
   /**
    * Arrow icon
    */
-  var sortingArrow = isColumnSorted ? ___EmotionJSX(EuiIcon, {
-    type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-    color: "text",
-    className: "euiDataGridHeaderCell__sortingArrow",
-    "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-  }) : null;
+  var sortingArrow = useMemo(function () {
+    return isColumnSorted ? ___EmotionJSX(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
@@ -653,9 +673,9 @@ export var useSortingUtils = function useSortingUtils(_ref3) {
     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 ___EmotionJSX(React.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref4, index) {
-      var columnId = _ref4.id,
-        direction = _ref4.direction;
+    return ___EmotionJSX(React.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref5, index) {
+      var columnId = _ref5.id,
+        direction = _ref5.direction;
       if (hasOnlyOneSort) {
         if (direction === 'asc') {
           return ___EmotionJSX(EuiI18n, {