@elastic/eui 93.3.0 → 93.4.0

package/lib/components/datagrid/body/cell/data_grid_cell_popover.js

@@ -48,7 +48,6 @@ var DataGridCellPopoverContext = /*#__PURE__*/(0, _react.createContext)({
 });
 exports.DataGridCellPopoverContext = DataGridCellPopoverContext;
 var useCellPopover = function useCellPopover() {
-  var _cellPopoverProps$pan;
   // Current open state & cell location are handled here
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -99,16 +98,6 @@ var useCellPopover = function useCellPopover() {
     });
     setPopoverIsOpen(true);
   }, [popoverIsOpen, cellLocation]);
-  var cellPopoverContext = {
-    popoverIsOpen: popoverIsOpen,
-    closeCellPopover: closeCellPopover,
-    openCellPopover: openCellPopover,
-    cellLocation: cellLocation,
-    setPopoverAnchor: setPopoverAnchor,
-    setPopoverAnchorPosition: setPopoverAnchorPosition,
-    setPopoverContent: setPopoverContent,
-    setCellPopoverProps: setCellPopoverProps
-  };
 
   // Override the default EuiPopover `onClickOutside` behavior, since the toggling
   // popover button isn't actually the DOM node we pass to `button`. Otherwise,
@@ -120,52 +109,71 @@ var useCellPopover = function useCellPopover() {
       closeCellPopover();
     }
   }, [popoverAnchor, closeCellPopover]);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
+      var _popoverAnchor$parent3, _popoverAnchor$parent4;
+      event.preventDefault();
+      event.stopPropagation();
+      closeCellPopover();
+      var cell = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : (_popoverAnchor$parent3 = popoverAnchor.parentElement) === null || _popoverAnchor$parent3 === void 0 ? void 0 : (_popoverAnchor$parent4 = _popoverAnchor$parent3.parentElement) === null || _popoverAnchor$parent4 === void 0 ? void 0 : _popoverAnchor$parent4.parentElement;
 
-  // Note that this popover is rendered once at the top grid level, rather than one popover per cell
-  var cellPopover = popoverIsOpen && popoverAnchor && (0, _react2.jsx)(_popover.EuiWrappingPopover, _extends({
-    isOpen: popoverIsOpen,
-    display: "block",
-    hasArrow: false,
-    panelPaddingSize: "s",
-    anchorPosition: popoverAnchorPosition,
-    repositionToCrossAxis: false
-  }, cellPopoverProps, {
-    focusTrapProps: {
-      onClickOutside: onClickOutside,
-      clickOutsideDisables: false
-    },
-    panelProps: _objectSpread({
-      'data-test-subj': 'euiDataGridExpansionPopover'
-    }, cellPopoverProps.panelProps || {}),
-    panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
-    panelStyle: {
-      maxInlineSize: "min(75vw, max(".concat(popoverAnchor.parentElement.offsetWidth, "px, 400px))"),
-      maxBlockSize: '50vh'
-    },
-    onKeyDown: function onKeyDown(event) {
-      if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
-        var _popoverAnchor$parent3, _popoverAnchor$parent4;
-        event.preventDefault();
-        event.stopPropagation();
-        closeCellPopover();
-        var cell = (_popoverAnchor$parent3 = popoverAnchor.parentElement) === null || _popoverAnchor$parent3 === void 0 ? void 0 : (_popoverAnchor$parent4 = _popoverAnchor$parent3.parentElement) === null || _popoverAnchor$parent4 === void 0 ? void 0 : _popoverAnchor$parent4.parentElement;
+      // Prevent cell animation flash while focus is being shifted between popover and cell
+      cell === null || cell === void 0 ? void 0 : cell.setAttribute('data-keyboard-closing', 'true');
+      // Ensure focus is returned to the parent cell, and remove animation stopgap
+      requestAnimationFrame(function () {
+        popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.parentElement.focus();
+        cell === null || cell === void 0 ? void 0 : cell.removeAttribute('data-keyboard-closing');
+      });
+    }
+  }, [popoverAnchor, closeCellPopover]);
+  var cellPopoverContext = (0, _react.useMemo)(function () {
+    return {
+      popoverIsOpen: popoverIsOpen,
+      closeCellPopover: closeCellPopover,
+      openCellPopover: openCellPopover,
+      cellLocation: cellLocation,
+      setPopoverAnchorPosition: setPopoverAnchorPosition,
+      setPopoverAnchor: setPopoverAnchor,
+      setPopoverContent: setPopoverContent,
+      setCellPopoverProps: setCellPopoverProps
+    };
+  }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
+  var cellPopover = (0, _react.useMemo)(function () {
+    var _cellPopoverProps$pan;
+    if (!popoverIsOpen || !popoverAnchor) return null;
 
-        // Prevent cell animation flash while focus is being shifted between popover and cell
-        cell === null || cell === void 0 ? void 0 : cell.setAttribute('data-keyboard-closing', 'true');
-        // Ensure focus is returned to the parent cell, and remove animation stopgap
-        requestAnimationFrame(function () {
-          popoverAnchor.parentElement.focus();
-          cell === null || cell === void 0 ? void 0 : cell.removeAttribute('data-keyboard-closing');
-        });
-      }
-    },
-    button: popoverAnchor,
-    closePopover: closeCellPopover
-  }), popoverContent);
-  return {
-    cellPopoverContext: cellPopoverContext,
-    cellPopover: cellPopover
-  };
+    // Note that this popover is rendered once at the top grid level, rather than one popover per cell
+    return (0, _react2.jsx)(_popover.EuiWrappingPopover, _extends({
+      isOpen: popoverIsOpen,
+      display: "block",
+      hasArrow: false,
+      panelPaddingSize: "s",
+      anchorPosition: popoverAnchorPosition,
+      repositionToCrossAxis: false
+    }, cellPopoverProps, {
+      focusTrapProps: {
+        onClickOutside: onClickOutside,
+        clickOutsideDisables: false
+      },
+      panelProps: _objectSpread({
+        'data-test-subj': 'euiDataGridExpansionPopover'
+      }, cellPopoverProps.panelProps || {}),
+      panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
+      panelStyle: {
+        maxInlineSize: "min(75vw, max(".concat(popoverAnchor.parentElement.offsetWidth, "px, 400px))"),
+        maxBlockSize: '50vh'
+      },
+      onKeyDown: onKeyDown,
+      button: popoverAnchor,
+      closePopover: closeCellPopover
+    }), popoverContent);
+  }, [popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
+  return (0, _react.useMemo)(function () {
+    return {
+      cellPopoverContext: cellPopoverContext,
+      cellPopover: cellPopover
+    };
+  }, [cellPopoverContext, cellPopover]);
 };
 
 /**

package/lib/components/datagrid/body/cell/data_grid_cell_wrapper.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Cell = void 0;
+exports.CellWrapper = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _sorting = require("../../utils/sorting");
@@ -33,7 +33,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * It grabs context,  determines the type of cell being rendered
  * (e.g. control vs data cell), & sets shared props between all cells
  */
-var Cell = function Cell(_ref) {
+var CellWrapper = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var colIndex = _ref.colIndex,
     visibleRowIndex = _ref.visibleRowIndex,
     style = _ref.style,
@@ -56,9 +56,8 @@ var Cell = function Cell(_ref) {
     rowManager = _ref.rowManager,
     rest = _objectWithoutProperties(_ref, _excluded);
   var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
-  var _useContext = (0, _react.useContext)(_sorting.DataGridSortingContext),
+  var _useContext = (0, _react.useContext)(_sorting.DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
-  var cellContent;
   var isFirstColumn = colIndex === 0;
   var isLastColumn = colIndex === visibleColCount - 1;
   var isLeadingControlColumn = colIndex < leadingControlColumns.length;
@@ -72,31 +71,33 @@ var Cell = function Cell(_ref) {
       return column !== null && column !== void 0 && column.schema ? (column === null || column === void 0 ? void 0 : column.schema) === row.type : columnId === row.type;
     })[0]) === null || _schemaDetectors$filt === void 0 ? void 0 : _schemaDetectors$filt.textTransform;
   }, [columnId, column === null || column === void 0 ? void 0 : column.schema, schemaDetectors]);
-  var classes = (0, _classnames.default)(_defineProperty({
-    'euiDataGridRowCell--firstColumn': isFirstColumn,
-    'euiDataGridRowCell--lastColumn': isLastColumn,
-    'euiDataGridRowCell--controlColumn': isLeadingControlColumn || isTrailingControlColumn
-  }, "euiDataGridRowCell--".concat(textTransform), textTransform));
-  var sharedCellProps = {
-    rowIndex: getCorrectRowIndex(visibleRowIndex),
-    visibleRowIndex: visibleRowIndex,
-    colIndex: colIndex,
-    interactiveCellId: interactiveCellId,
-    className: classes,
-    style: style,
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils,
-    setRowHeight: isFirstColumn ? setRowHeight : undefined,
-    rowManager: rowManager,
-    popoverContext: popoverContext,
-    pagination: pagination,
-    cellContext: cellContext
-  };
+  var sharedCellProps = (0, _react.useMemo)(function () {
+    var classes = (0, _classnames.default)(_defineProperty({
+      'euiDataGridRowCell--firstColumn': isFirstColumn,
+      'euiDataGridRowCell--lastColumn': isLastColumn,
+      'euiDataGridRowCell--controlColumn': isLeadingControlColumn || isTrailingControlColumn
+    }, "euiDataGridRowCell--".concat(textTransform), textTransform));
+    return {
+      rowIndex: getCorrectRowIndex(visibleRowIndex),
+      visibleRowIndex: visibleRowIndex,
+      colIndex: colIndex,
+      interactiveCellId: interactiveCellId,
+      className: classes,
+      style: style,
+      rowHeightsOptions: rowHeightsOptions,
+      rowHeightUtils: rowHeightUtils,
+      setRowHeight: isFirstColumn ? setRowHeight : undefined,
+      rowManager: rowManager,
+      popoverContext: popoverContext,
+      pagination: pagination,
+      cellContext: cellContext
+    };
+  }, [colIndex, setRowHeight, visibleRowIndex, getCorrectRowIndex, interactiveCellId, style, rowHeightsOptions, rowHeightUtils, rowManager, popoverContext, pagination, cellContext, isFirstColumn, isLastColumn, isLeadingControlColumn, isTrailingControlColumn, textTransform]);
   if (isLeadingControlColumn) {
     var leadingColumn = leadingControlColumns[colIndex];
     var id = leadingColumn.id,
       rowCellRender = leadingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: id,
       width: leadingColumn.width,
       renderCellValue: rowCellRender,
@@ -108,7 +109,7 @@ var Cell = function Cell(_ref) {
     var trailingColumn = trailingControlColumns[trailingcolIndex];
     var _id = trailingColumn.id,
       _rowCellRender = trailingColumn.rowCellRender;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: _id,
       width: trailingColumn.width,
       renderCellValue: _rowCellRender,
@@ -117,9 +118,9 @@ var Cell = function Cell(_ref) {
   } else {
     // this is a normal data cell
     var columnType = schema[columnId] ? schema[columnId].columnType : null;
-    var isExpandable = column.isExpandable !== undefined ? column.isExpandable : true;
+    var isExpandable = (column === null || column === void 0 ? void 0 : column.isExpandable) !== undefined ? column === null || column === void 0 ? void 0 : column.isExpandable : true;
     var width = columnWidths[columnId] || defaultColumnWidth;
-    cellContent = (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: columnId,
       column: column,
       columnType: columnType,
@@ -130,6 +131,6 @@ var Cell = function Cell(_ref) {
       isExpandable: isExpandable
     }, rest));
   }
-  return cellContent;
-};
-exports.Cell = Cell;
+});
+exports.CellWrapper = CellWrapper;
+CellWrapper.displayName = 'CellWrapper';

package/lib/components/datagrid/body/cell/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Cell", {
+Object.defineProperty(exports, "CellWrapper", {
   enumerable: true,
   get: function get() {
-    return _data_grid_cell_wrapper.Cell;
+    return _data_grid_cell_wrapper.CellWrapper;
   }
 });
 Object.defineProperty(exports, "DataGridCellPopoverContext", {

package/lib/components/datagrid/body/data_grid_body.js

@@ -574,6 +574,19 @@ EuiDataGridBody.propTypes = {
   renderFooterCellValue: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.element.isRequired]),
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
+  sorting: _propTypes.default.shape({
+    /**
+       * A function that receives updated column sort details in response to user interactions in the toolbar controls
+       */
+    onSort: _propTypes.default.func.isRequired,
+    /**
+       * An array of the column ids currently being sorted and their sort direction. The array order determines the sort order. `{ id: 'A'; direction: 'asc' }`
+       */
+    columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.string.isRequired,
+      direction: _propTypes.default.oneOf(["asc", "desc"]).isRequired
+    }).isRequired).isRequired
+  }),
   pagination: _propTypes.default.any,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,

package/lib/components/datagrid/body/data_grid_body_custom.js

@@ -44,25 +44,26 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
                                                                                                                                                                                      */
 var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
-    leadingControlColumns = _ref.leadingControlColumns,
-    trailingControlColumns = _ref.trailingControlColumns,
-    columns = _ref.columns,
-    visibleColCount = _ref.visibleColCount,
-    schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors,
-    visibleRows = _ref.visibleRows,
     renderCellValue = _ref.renderCellValue,
     cellContext = _ref.cellContext,
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
+    visibleRows = _ref.visibleRows,
+    visibleColCount = _ref.visibleColCount,
+    leadingControlColumns = _ref.leadingControlColumns,
+    trailingControlColumns = _ref.trailingControlColumns,
+    columns = _ref.columns,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     onColumnResize = _ref.onColumnResize,
-    gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles,
+    schema = _ref.schema,
+    schemaDetectors = _ref.schemaDetectors,
+    sorting = _ref.sorting,
     pagination = _ref.pagination,
-    rowHeightsOptions = _ref.rowHeightsOptions;
+    rowHeightsOptions = _ref.rowHeightsOptions,
+    gridWidth = _ref.gridWidth,
+    gridStyles = _ref.gridStyles;
   /**
    * Columns & widths
    */
@@ -101,14 +102,15 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      switchColumnPos: switchColumnPos,
-      setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
       trailingControlColumns: trailingControlColumns,
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
+      setVisibleColumns: setVisibleColumns,
+      switchColumnPos: switchColumnPos,
+      sorting: sorting,
       schema: schema,
       schemaDetectors: schemaDetectors
     }),
@@ -131,25 +133,27 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   /**
    * Cell render fn
    */
-  var cellProps = {
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    pagination: pagination,
-    columns: columns,
-    leadingControlColumns: leadingControlColumns,
-    trailingControlColumns: trailingControlColumns,
-    visibleColCount: visibleColCount,
-    columnWidths: columnWidths,
-    defaultColumnWidth: defaultColumnWidth,
-    renderCellValue: renderCellValue,
-    cellContext: cellContext,
-    renderCellPopover: renderCellPopover,
-    interactiveCellId: interactiveCellId,
-    setRowHeight: setRowHeight,
-    rowHeightsOptions: rowHeightsOptions,
-    rowHeightUtils: rowHeightUtils
-  };
-  var _Cell = (0, _react.useCallback)(function (_ref2) {
+  var cellProps = (0, _react.useMemo)(function () {
+    return {
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      pagination: pagination,
+      columns: columns,
+      leadingControlColumns: leadingControlColumns,
+      trailingControlColumns: trailingControlColumns,
+      visibleColCount: visibleColCount,
+      columnWidths: columnWidths,
+      defaultColumnWidth: defaultColumnWidth,
+      renderCellValue: renderCellValue,
+      cellContext: cellContext,
+      renderCellPopover: renderCellPopover,
+      interactiveCellId: interactiveCellId,
+      setRowHeight: setRowHeight,
+      rowHeightsOptions: rowHeightsOptions,
+      rowHeightUtils: rowHeightUtils
+    };
+  }, [schema, schemaDetectors, pagination, columns, leadingControlColumns, trailingControlColumns, visibleColCount, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, setRowHeight, rowHeightsOptions, rowHeightUtils]);
+  var Cell = (0, _react.useCallback)(function (_ref2) {
     var colIndex = _ref2.colIndex,
       visibleRowIndex = _ref2.visibleRowIndex,
       rest = _objectWithoutProperties(_ref2, _excluded);
@@ -161,9 +165,8 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
       visibleRowIndex: visibleRowIndex,
       style: style
     }, cellProps);
-    return (0, _react2.jsx)(_cell.Cell, _extends({}, props, rest));
-  }, [].concat(_toConsumableArray(Object.values(cellProps)), [getRowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
-  );
+    return (0, _react2.jsx)(_cell.CellWrapper, _extends({}, props, rest));
+  }, [cellProps, getRowHeight, rowHeightUtils, rowHeightsOptions]);
 
   // Allow consumers to pass custom props/attributes/listeners etc. to the wrapping div
   var _useState = (0, _react.useState)({}),
@@ -175,7 +178,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,
-    Cell: _Cell,
+    Cell: Cell,
     setCustomGridBodyProps: setCustomGridBodyProps
   }), footerRow);
 };
@@ -720,6 +723,19 @@ EuiDataGridBodyCustomRender.propTypes = {
   renderFooterCellValue: _propTypes.default.oneOfType([_propTypes.default.func.isRequired, _propTypes.default.element.isRequired]),
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
+  sorting: _propTypes.default.shape({
+    /**
+       * A function that receives updated column sort details in response to user interactions in the toolbar controls
+       */
+    onSort: _propTypes.default.func.isRequired,
+    /**
+       * An array of the column ids currently being sorted and their sort direction. The array order determines the sort order. `{ id: 'A'; direction: 'asc' }`
+       */
+    columns: _propTypes.default.arrayOf(_propTypes.default.shape({
+      id: _propTypes.default.string.isRequired,
+      direction: _propTypes.default.oneOf(["asc", "desc"]).isRequired
+    }).isRequired).isRequired
+  }),
   pagination: _propTypes.default.any,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,