@elastic/eui 93.2.0 → 93.4.0

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

@@ -1,10 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultSortDescLabel = exports.defaultSortAscLabel = exports.EuiDataGridColumnSortingDraggable = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _accessibility = require("../../accessibility");
@@ -26,6 +27,8 @@ var _excluded = ["id", "display", "direction", "index", "sorting", "schema", "sc
  * Side Public License, v 1.
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -69,6 +72,27 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
     'data-test-subj': "euiDataGridColumnSorting-sortColumn-".concat(id, "-desc")
   }];
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
+  var removeSort = (0, _react.useCallback)(function () {
+    var nextColumns = _toConsumableArray(sorting.columns);
+    var columnIndex = nextColumns.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }).indexOf(id);
+    nextColumns.splice(columnIndex, 1);
+    sorting.onSort(nextColumns);
+  }, [id, sorting]);
+  var toggleLegendHandler = (0, _react.useCallback)(function (_, direction) {
+    var nextColumns = _toConsumableArray(sorting.columns);
+    var columnIndex = nextColumns.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }).indexOf(id);
+    nextColumns.splice(columnIndex, 1, {
+      id: id,
+      direction: direction
+    });
+    sorting.onSort(nextColumns);
+  }, [id, sorting]);
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, _extends({
     draggableId: id,
     index: index,
@@ -106,15 +130,7 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
         className: "euiDataGridColumnSorting__button",
         "aria-label": removeSortLabel,
         iconType: "cross",
-        onClick: function onClick() {
-          var nextColumns = _toConsumableArray(sorting.columns);
-          var columnIndex = nextColumns.map(function (_ref2) {
-            var id = _ref2.id;
-            return id;
-          }).indexOf(id);
-          nextColumns.splice(columnIndex, 1);
-          sorting.onSort(nextColumns);
-        }
+        onClick: removeSort
       });
     })), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
       className: "euiDataGridColumnSorting__name"
@@ -149,18 +165,7 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
         buttonSize: "compressed",
         className: "euiDataGridColumnSorting__order",
         idSelected: direction === 'asc' ? "".concat(id, "Asc") : "".concat(id, "Desc"),
-        onChange: function onChange(_, direction) {
-          var nextColumns = _toConsumableArray(sorting.columns);
-          var columnIndex = nextColumns.map(function (_ref3) {
-            var id = _ref3.id;
-            return id;
-          }).indexOf(id);
-          nextColumns.splice(columnIndex, 1, {
-            id: id,
-            direction: direction
-          });
-          sorting.onSort(nextColumns);
-        }
+        onChange: toggleLegendHandler
       });
     })), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
       grow: false

package/lib/components/datagrid/controls/display_selector.js

@@ -210,114 +210,116 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
   }, []);
   var buttonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.buttonText', 'Display options');
   var resetButtonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.resetButtonText', 'Reset to default');
-  var displaySelector = showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
-    "data-test-subj": "dataGridDisplaySelectorPopover",
-    isOpen: isOpen,
-    closePopover: function closePopover() {
-      return setIsOpen(false);
-    },
-    anchorPosition: "downRight",
-    panelPaddingSize: "s",
-    panelClassName: "euiDataGrid__displayPopoverPanel",
-    button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: buttonLabel,
-      delay: "long"
-    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
-      size: "xs",
-      iconType: "controlsHorizontal",
-      color: "text",
-      "data-test-subj": "dataGridDisplaySelectorButton",
-      onClick: function onClick() {
-        return setIsOpen(!isOpen);
+  var displaySelector = (0, _react.useMemo)(function () {
+    return showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
+      "data-test-subj": "dataGridDisplaySelectorPopover",
+      isOpen: isOpen,
+      closePopover: function closePopover() {
+        return setIsOpen(false);
       },
-      "aria-label": buttonLabel
-    }))
-  }, showDensityControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
-    defaults: ['Density', 'Compact', 'Normal', 'Expanded']
-  }, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 4),
-      densityLabel = _ref2[0],
-      labelCompact = _ref2[1],
-      labelNormal = _ref2[2],
-      labelExpanded = _ref2[3];
-    return (0, _react2.jsx)(_form.EuiFormRow, {
-      label: densityLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-      legend: densityLabel,
-      buttonSize: "compressed",
-      isFullWidth: true,
-      options: [{
-        id: densityOptions[0],
-        label: labelCompact
-      }, {
-        id: densityOptions[1],
-        label: labelNormal
-      }, {
-        id: densityOptions[2],
-        label: labelExpanded
-      }],
-      onChange: setGridStyles,
-      idSelected: gridDensity,
-      "data-test-subj": "densityButtonGroup"
-    }));
-  }), showRowHeightControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelSingle', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelCustom', 'euiDisplaySelector.lineCountLabel'],
-    defaults: ['Row height', 'Single', 'Auto fit', 'Custom', 'Lines per row']
-  }, function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 5),
-      rowHeightLabel = _ref4[0],
-      labelSingle = _ref4[1],
-      labelAuto = _ref4[2],
-      labelCustom = _ref4[3],
-      lineCountLabel = _ref4[4];
-    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_form.EuiFormRow, {
-      label: rowHeightLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-      legend: rowHeightLabel,
-      buttonSize: "compressed",
-      isFullWidth: true,
-      options: [{
-        id: rowHeightButtonOptions[0],
-        label: labelSingle
-      }, {
-        id: rowHeightButtonOptions[1],
-        label: labelAuto
-      }, {
-        id: rowHeightButtonOptions[2],
-        label: labelCustom
-      }],
-      onChange: setRowHeight,
-      idSelected: rowHeightSelection,
-      "data-test-subj": "rowHeightButtonGroup"
-    })), rowHeightSelection === rowHeightButtonOptions[2] && (0, _react2.jsx)(_form.EuiFormRow, {
-      label: lineCountLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_form.EuiRange, {
-      compressed: true,
-      fullWidth: true,
-      showInput: true,
-      min: 1,
-      max: 20,
-      step: 1,
-      required: true,
-      value: lineCountInput,
-      onChange: setLineCountHeight,
-      "data-test-subj": "lineCountNumber"
-    })));
-  }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-    justifyContent: "flexEnd",
-    responsive: false
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-    grow: false
-  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButtonEmpty, {
-    flush: "both",
-    size: "xs",
-    onClick: resetToInitialState,
-    "data-test-subj": "resetDisplaySelector"
-  }, resetButtonLabel)))))) : null;
+      anchorPosition: "downRight",
+      panelPaddingSize: "s",
+      panelClassName: "euiDataGrid__displayPopoverPanel",
+      button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+        content: buttonLabel,
+        delay: "long"
+      }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+        size: "xs",
+        iconType: "controlsHorizontal",
+        color: "text",
+        "data-test-subj": "dataGridDisplaySelectorButton",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
+        "aria-label": buttonLabel
+      }))
+    }, showDensityControls && (0, _react2.jsx)(_i18n.EuiI18n, {
+      tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
+      defaults: ['Density', 'Compact', 'Normal', 'Expanded']
+    }, function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 4),
+        densityLabel = _ref2[0],
+        labelCompact = _ref2[1],
+        labelNormal = _ref2[2],
+        labelExpanded = _ref2[3];
+      return (0, _react2.jsx)(_form.EuiFormRow, {
+        label: densityLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+        legend: densityLabel,
+        buttonSize: "compressed",
+        isFullWidth: true,
+        options: [{
+          id: densityOptions[0],
+          label: labelCompact
+        }, {
+          id: densityOptions[1],
+          label: labelNormal
+        }, {
+          id: densityOptions[2],
+          label: labelExpanded
+        }],
+        onChange: setGridStyles,
+        idSelected: gridDensity,
+        "data-test-subj": "densityButtonGroup"
+      }));
+    }), showRowHeightControls && (0, _react2.jsx)(_i18n.EuiI18n, {
+      tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelSingle', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelCustom', 'euiDisplaySelector.lineCountLabel'],
+      defaults: ['Row height', 'Single', 'Auto fit', 'Custom', 'Lines per row']
+    }, function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 5),
+        rowHeightLabel = _ref4[0],
+        labelSingle = _ref4[1],
+        labelAuto = _ref4[2],
+        labelCustom = _ref4[3],
+        lineCountLabel = _ref4[4];
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_form.EuiFormRow, {
+        label: rowHeightLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+        legend: rowHeightLabel,
+        buttonSize: "compressed",
+        isFullWidth: true,
+        options: [{
+          id: rowHeightButtonOptions[0],
+          label: labelSingle
+        }, {
+          id: rowHeightButtonOptions[1],
+          label: labelAuto
+        }, {
+          id: rowHeightButtonOptions[2],
+          label: labelCustom
+        }],
+        onChange: setRowHeight,
+        idSelected: rowHeightSelection,
+        "data-test-subj": "rowHeightButtonGroup"
+      })), rowHeightSelection === rowHeightButtonOptions[2] && (0, _react2.jsx)(_form.EuiFormRow, {
+        label: lineCountLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_form.EuiRange, {
+        compressed: true,
+        fullWidth: true,
+        showInput: true,
+        min: 1,
+        max: 20,
+        step: 1,
+        required: true,
+        value: lineCountInput,
+        onChange: setLineCountHeight,
+        "data-test-subj": "lineCountNumber"
+      })));
+    }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      justifyContent: "flexEnd",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      flush: "both",
+      size: "xs",
+      onClick: resetToInitialState,
+      "data-test-subj": "resetDisplaySelector"
+    }, resetButtonLabel)))))) : null;
+  }, [additionalDisplaySettings, buttonLabel, isOpen, resetButtonLabel, showDensityControls, showResetButton, showRowHeightControls, gridDensity, rowHeightSelection, lineCountInput, setGridStyles, setRowHeight, setLineCountHeight, resetToInitialState]);
   return [displaySelector, gridStyles, rowHeightsOptions];
 };
 exports.useDataGridDisplaySelector = useDataGridDisplaySelector;

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

@@ -75,9 +75,19 @@ var commaSeparateNumbers = function commaSeparateNumbers(numberString) {
     );
   });
 };
+var renderCellValue = function renderCellValue(_ref2) {
+  var rowIndex = _ref2.rowIndex,
+    columnId = _ref2.columnId,
+    schema = _ref2.schema;
+  var value = storeData[rowIndex][columnId];
+  if (schema === 'numeric') {
+    value = commaSeparateNumbers(value);
+  }
+  return value;
+};
 var DataGrid = function DataGrid() {
-  var _useState = (0, _react.useState)(columns.map(function (_ref2) {
-      var id = _ref2.id;
+  var _useState = (0, _react.useState)(columns.map(function (_ref3) {
+      var id = _ref3.id;
       return id;
     })),
     _useState2 = _slicedToArray(_useState, 2),
@@ -119,16 +129,7 @@ var DataGrid = function DataGrid() {
     inMemory: {
       level: 'sorting'
     },
-    renderCellValue: function renderCellValue(_ref3) {
-      var rowIndex = _ref3.rowIndex,
-        columnId = _ref3.columnId,
-        schema = _ref3.schema;
-      var value = data[rowIndex][columnId];
-      if (schema === 'numeric') {
-        value = commaSeparateNumbers(value);
-      }
-      return value;
-    },
+    renderCellValue: renderCellValue,
     sorting: {
       columns: sortingColumns,
       onSort: setSorting

package/lib/components/datagrid/data_grid.js

@@ -25,8 +25,7 @@ var _data_grid_schema = require("./utils/data_grid_schema");
 var _ref = require("./utils/ref");
 var _data_grid_types = require("./data_grid_types");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
-  _excluded2 = ["focusProps"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -84,8 +83,8 @@ var cellPaddingsToClassMap = {
   m: '',
   l: 'euiDataGrid--paddingLarge'
 };
+var emptyVirtualizationOptions = {};
 var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _gridItemsRendered$cu;
   var _props$leadingControl = props.leadingControlColumns,
     leadingControlColumns = _props$leadingControl === void 0 ? _data_grid_types.emptyControlColumns : _props$leadingControl,
     _props$trailingContro = props.trailingControlColumns,
@@ -95,6 +94,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     schemaDetectors = props.schemaDetectors,
     rowCount = props.rowCount,
     renderCellValue = props.renderCellValue,
+    cellContext = props.cellContext,
     renderCellPopover = props.renderCellPopover,
     renderFooterCellValue = props.renderFooterCellValue,
     className = props.className,
@@ -204,8 +204,14 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   /**
    * Sorting
    */
-  var columnSorting = (0, _controls.useDataGridColumnSorting)(orderedVisibleColumns, sorting, mergedSchema, allSchemaDetectors, displayValues);
-  var sortingContext = (0, _sorting.useSorting)({
+  var columnSorting = (0, _controls.useDataGridColumnSorting)({
+    sorting: sorting,
+    columns: orderedVisibleColumns,
+    displayValues: displayValues,
+    schema: mergedSchema,
+    schemaDetectors: allSchemaDetectors
+  });
+  var sortedContext = (0, _sorting.useSorting)({
     sorting: sorting,
     inMemory: inMemory,
     inMemoryValues: inMemoryValues,
@@ -219,7 +225,20 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
    */
   var _useFocus = (0, _focus.useFocus)(),
     wrappingDivFocusProps = _useFocus.focusProps,
-    focusContext = _objectWithoutProperties(_useFocus, _excluded2);
+    onFocusUpdate = _useFocus.onFocusUpdate,
+    focusedCell = _useFocus.focusedCell,
+    setFocusedCell = _useFocus.setFocusedCell,
+    setIsFocusedCellInView = _useFocus.setIsFocusedCellInView,
+    focusFirstVisibleInteractiveCell = _useFocus.focusFirstVisibleInteractiveCell;
+  var focusContext = (0, _react.useMemo)(function () {
+    return {
+      onFocusUpdate: onFocusUpdate,
+      focusedCell: focusedCell,
+      setFocusedCell: setFocusedCell,
+      setIsFocusedCellInView: setIsFocusedCellInView,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell
+    };
+  }, [onFocusUpdate, focusedCell, setFocusedCell, setIsFocusedCellInView, focusFirstVisibleInteractiveCell]);
 
   /**
    * Cell popover
@@ -249,7 +268,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     setIsFullScreen: setIsFullScreen,
     focusContext: focusContext,
     cellPopoverContext: cellPopoverContext,
-    sortingContext: sortingContext,
+    sortedContext: sortedContext,
     pagination: pagination,
     rowCount: rowCount,
     visibleColCount: visibleColCount
@@ -296,12 +315,25 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     gridAriaProps['aria-labelledby'] = "".concat(rest['aria-labelledby'], " ").concat(pagination ? ariaLabelledById : '');
     delete rest['aria-labelledby'];
   }
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    var _gridItemsRendered$cu;
+    (0, _focus.createKeyDownHandler)({
+      gridElement: contentRef.current,
+      visibleColCount: visibleColCount,
+      visibleRowCount: visibleRowCount,
+      visibleRowStartIndex: ((_gridItemsRendered$cu = gridItemsRendered.current) === null || _gridItemsRendered$cu === void 0 ? void 0 : _gridItemsRendered$cu.visibleRowStartIndex) || 0,
+      rowCount: rowCount,
+      pagination: pagination,
+      hasFooter: !!renderFooterCellValue,
+      focusContext: focusContext
+    })(event);
+  }, [focusContext, visibleColCount, visibleRowCount, rowCount, pagination, renderFooterCellValue]);
   return (0, _react2.jsx)(_focus.DataGridFocusContext.Provider, {
     value: focusContext
   }, (0, _react2.jsx)(_cell.DataGridCellPopoverContext.Provider, {
     value: cellPopoverContext
-  }, (0, _react2.jsx)(_sorting.DataGridSortingContext.Provider, {
-    value: sortingContext
+  }, (0, _react2.jsx)(_sorting.DataGridSortedContext.Provider, {
+    value: sortedContext
   }, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     disabled: !isFullScreen,
     className: "euiDataGrid__focusWrap"
@@ -337,16 +369,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   }) : null, (0, _react2.jsx)("div", _extends({
     // eslint-disable-line jsx-a11y/interactive-supports-focus
     ref: contentRef,
-    onKeyDown: (0, _focus.createKeyDownHandler)({
-      gridElement: contentRef.current,
-      visibleColCount: visibleColCount,
-      visibleRowCount: visibleRowCount,
-      visibleRowStartIndex: ((_gridItemsRendered$cu = gridItemsRendered.current) === null || _gridItemsRendered$cu === void 0 ? void 0 : _gridItemsRendered$cu.visibleRowStartIndex) || 0,
-      rowCount: rowCount,
-      pagination: pagination,
-      hasFooter: !!renderFooterCellValue,
-      focusContext: focusContext
-    }),
+    onKeyDown: onKeyDown,
     "data-test-subj": "euiDataGridBody",
     className: "euiDataGrid__content",
     role: "grid",
@@ -362,15 +385,17 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     switchColumnPos: switchColumnPos,
     onColumnResize: onColumnResize,
     schemaDetectors: allSchemaDetectors,
+    sorting: sorting,
     pagination: pagination,
     renderCellValue: renderCellValue,
+    cellContext: cellContext,
     renderCellPopover: renderCellPopover,
     renderFooterCellValue: renderFooterCellValue,
     rowCount: rowCount,
     visibleRows: visibleRows,
     interactiveCellId: interactiveCellId,
     rowHeightsOptions: rowHeightsOptions,
-    virtualizationOptions: virtualizationOptions || {},
+    virtualizationOptions: virtualizationOptions || emptyVirtualizationOptions,
     isFullScreen: isFullScreen,
     gridStyles: gridStyles,
     gridWidth: gridWidth,

package/lib/components/datagrid/utils/col_widths.js

@@ -8,15 +8,15 @@ exports.useDefaultColumnWidth = exports.useColumnWidths = exports.doesColumnHave
 var _react = require("react");
 var _services = require("../../../services");
 var _utils = require("../../../utils");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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 _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -65,10 +65,12 @@ var useColumnWidths = function useColumnWidths(_ref) {
     onColumnResize = _ref.onColumnResize;
   var computeColumnWidths = (0, _react.useCallback)(function () {
     return columns.filter(doesColumnHaveAnInitialWidth).reduce(function (initialWidths, column) {
-      initialWidths[column.id] = column.initialWidth;
-      return initialWidths;
+      return _objectSpread(_objectSpread({}, initialWidths), {}, _defineProperty({}, column.id, column.initialWidth));
     }, {});
   }, [columns]);
+
+  // Passes initializer function for performance, so computing only runs once on init
+  // @see https://react.dev/reference/react/useState#examples-initializer
   var _useState = (0, _react.useState)(computeColumnWidths),
     _useState2 = _slicedToArray(_useState, 2),
     columnWidths = _useState2[0],
@@ -77,14 +79,16 @@ var useColumnWidths = function useColumnWidths(_ref) {
     setColumnWidths(computeColumnWidths());
   }, [computeColumnWidths]);
   var setColumnWidth = (0, _react.useCallback)(function (columnId, width) {
-    setColumnWidths(_objectSpread(_objectSpread({}, columnWidths), {}, _defineProperty({}, columnId, width)));
+    setColumnWidths(function (prevColumnWidths) {
+      return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));
+    });
     if (onColumnResize) {
       onColumnResize({
         columnId: columnId,
         width: width
       });
     }
-  }, [columnWidths, onColumnResize]);
+  }, [onColumnResize]);
 
   // Used by react-window to determine actual column widths
   var getColumnWidth = (0, _react.useCallback)(function (index) {

package/lib/components/datagrid/utils/focus.js

@@ -97,14 +97,16 @@ var useFocus = function useFocus() {
       }
     };
   }, [isFocusedCellInView, focusFirstVisibleInteractiveCell]);
-  return {
-    onFocusUpdate: onFocusUpdate,
-    focusedCell: focusedCell,
-    setFocusedCell: setFocusedCell,
-    setIsFocusedCellInView: setIsFocusedCellInView,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    focusProps: focusProps
-  };
+  return (0, _react.useMemo)(function () {
+    return {
+      onFocusUpdate: onFocusUpdate,
+      focusedCell: focusedCell,
+      setFocusedCell: setFocusedCell,
+      setIsFocusedCellInView: setIsFocusedCellInView,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      focusProps: focusProps
+    };
+  }, [onFocusUpdate, focusedCell, setFocusedCell, setIsFocusedCellInView, focusFirstVisibleInteractiveCell, focusProps]);
 };
 exports.useFocus = useFocus;
 var notifyCellOfFocusState = function notifyCellOfFocusState(cellsUpdateFocus, cell, isFocused) {