@elastic/eui 93.3.0 → 93.4.0

package/es/components/button/button_group/button_group_button.styles.js

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,6 +13,22 @@ import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutlin
 import { euiButtonFillColor } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { euiScreenReaderOnly } from '../../accessibility';
 import { euiFormVariables } from '../../form/form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "nwv4a2-tooltipWrapper",
+  styles: "overflow:hidden;label:tooltipWrapper;"
+} : {
+  name: "nwv4a2-tooltipWrapper",
+  styles: "overflow:hidden;label:tooltipWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1u3o7zy-hasToolTip",
+  styles: "border-radius:inherit;label:hasToolTip;"
+} : {
+  name: "1u3o7zy-hasToolTip",
+  styles: "border-radius:inherit;label:hasToolTip;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
@@ -28,9 +45,26 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     euiButtonGroupButton: /*#__PURE__*/css(logicalCSS('min-width', 0), " flex-shrink:1;flex-grow:0;", euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
     iconOnly: /*#__PURE__*/css("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
     // Sizes
-    s: /*#__PURE__*/css(uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;"),
-    m: /*#__PURE__*/css(uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;"),
-    uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:not(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected){box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", transparentize(euiTheme.colors.fullShade, 0.1), ";}&:is(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton-isSelected{box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", transparentize(euiTheme.colors.emptyShade, 0.2), ";};label:uncompressed;"),
+    uncompressed: {
+      uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";};label:uncompressed;"),
+      get borders() {
+        var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
+        var selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
+        var unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
+        var borderWidth = euiTheme.border.width.thin;
+
+        // "Borders" between buttons should be present between two of the same colored buttons,
+        // and absent between selected vs non-selected buttons (different colors)
+        return "\n          &:not(".concat(selectors, ") + *:not(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(unselectedColor, ";\n          }\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(selectedColor, ";\n          }\n        ");
+      },
+      get s() {
+        return /*#__PURE__*/css(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");
+      },
+      get m() {
+        return /*#__PURE__*/css(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;");
+      },
+      hasToolTip: _ref2
+    },
     compressed: /*#__PURE__*/css(logicalCSS('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";padding:", mathWithUnits(euiTheme.border.width.thin, function (x) {
       return x * 2;
     }), ";background-clip:content-box;border-radius:", mathWithUnits([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
@@ -38,6 +72,8 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
     // States
     disabledAndSelected: /*#__PURE__*/css("color:", makeDisabledContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    // Tooltip anchor wrapper
+    tooltipWrapper: _ref,
     // Content wrapper
     content: {
       euiButtonGroupButton__content: /*#__PURE__*/css(";label:euiButtonGroupButton__content;"),

package/es/components/datagrid/body/cell/data_grid_cell.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellActions"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "showCellActions", "onExpandClick", "popoverAnchorRef"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 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; }
@@ -30,7 +30,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import classNames from 'classnames';
 import PropTypes from "prop-types";
-import React, { Component, createRef, memo } from 'react';
+import React, { Component, createRef, memo, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { IS_JEST_ENVIRONMENT } from '../../../../utils';
 import { keys } from '../../../../services';
@@ -55,16 +55,25 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
     isFocused = _ref.isFocused,
-    cellActions = _ref.cellActions,
+    showCellActions = _ref.showCellActions,
+    onExpandClick = _ref.onExpandClick,
+    popoverAnchorRef = _ref.popoverAnchorRef,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // React is more permissible than the TS types indicate
+  // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
-  var cellHeightType = (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
-  var classes = classNames('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
-    'eui-textBreakWord': cellHeightType !== 'default',
-    'eui-textTruncate': cellHeightType === 'default'
-  });
-  var cellContent = ___EmotionJSX("div", {
+  var cellHeightType = useMemo(function () {
+    return (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
+  }, [rowHeightUtils, rowHeight]);
+  var classes = useMemo(function () {
+    return classNames('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
+      'eui-textBreakWord': cellHeightType !== 'default',
+      'eui-textTruncate': cellHeightType === 'default'
+    });
+  }, [cellHeightType, isControlColumn]);
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RenderTruncatedCellContent, {
+    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    rowHeight: rowHeight
+  }, ___EmotionJSX("div", {
     ref: setCellContentsRef,
     "data-datagrid-cellcontent": true,
     className: classes
@@ -74,15 +83,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, cellContext, rest)));
-  if (cellHeightType === 'lineCount' && !isControlColumn) {
-    var lines = rowHeightUtils.getLineCount(rowHeight);
-    cellContent = ___EmotionJSX(EuiTextBlockTruncate, {
-      lines: lines,
-      cloneElement: true
-    }, cellContent);
-  }
-  var screenReaderText = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+  }, cellContext, rest)))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     hidden: !isFocused
   }, '- ', ___EmotionJSX(EuiI18n, {
     token: "euiDataGridCell.position",
@@ -92,11 +93,16 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
       col: colIndex + 1,
       row: ariaRowIndex
     }
-  }), cellActions && ___EmotionJSX(React.Fragment, null, '. ', ___EmotionJSX(EuiI18n, {
+  }), showCellActions && ___EmotionJSX(React.Fragment, null, '. ', ___EmotionJSX(EuiI18n, {
     token: "euiDataGridCell.expansionEnterPrompt",
     default: "Press the Enter key to expand this cell."
-  }))));
-  return ___EmotionJSX(React.Fragment, null, cellContent, screenReaderText, cellActions);
+  })))), showCellActions && ___EmotionJSX(EuiDataGridCellActions, {
+    rowIndex: rowIndex,
+    colIndex: colIndex,
+    column: column,
+    onExpandClick: onExpandClick,
+    popoverAnchorRef: popoverAnchorRef
+  }));
 });
 EuiDataGridCellContent.propTypes = {
   rowIndex: PropTypes.number.isRequired,
@@ -570,16 +576,18 @@ EuiDataGridCellContent.propTypes = {
   rowHeightUtils: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
   pagination: PropTypes.any,
   setCellProps: PropTypes.func.isRequired,
-  setCellContentsRef: PropTypes.any.isRequired,
+  setCellContentsRef: PropTypes.func.isRequired,
+  showCellActions: PropTypes.bool.isRequired,
   isExpanded: PropTypes.bool.isRequired,
+  onExpandClick: PropTypes.func.isRequired,
+  popoverAnchorRef: PropTypes.any.isRequired,
   isControlColumn: PropTypes.bool.isRequired,
   isFocused: PropTypes.bool.isRequired,
   ariaRowIndex: PropTypes.number.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf(["auto"]), PropTypes.shape({
     lineCount: PropTypes.number,
     height: PropTypes.number
-  }).isRequired]),
-  cellActions: PropTypes.node
+  }).isRequired])
 };
 EuiDataGridCellContent.displayName = 'EuiDataGridCellContent';
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -906,6 +914,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         if (nextProps.style.height !== this.props.style.height) return true;
         if (nextProps.style.width !== this.props.style.width) return true;
       }
+      if (nextProps.cellContext !== this.props.cellContext) return true;
       if (nextState.cellProps !== this.state.cellProps) return true;
       if (nextState.isFocused !== this.state.isFocused) return true;
       if (nextState.isHovered !== this.state.isHovered) return true;
@@ -955,21 +964,16 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
       var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
-      var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
-        setCellProps: this.setCellProps,
-        column: column,
-        columnType: columnType,
-        isExpandable: isExpandable,
-        isExpanded: popoverIsOpen,
-        isDetails: false,
-        isFocused: this.state.isFocused,
-        setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
-        rowHeightUtils: rowHeightUtils,
-        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
-        ariaRowIndex: ariaRowIndex
-      });
-      var cell = ___EmotionJSX("div", _extends({
+      var row = rowManager && !IS_JEST_ENVIRONMENT ? rowManager.getRow({
+        rowIndex: rowIndex,
+        visibleRowIndex: visibleRowIndex,
+        top: style.top,
+        // comes in as a `{float}px` string from react-window
+        height: style.height // comes in as an integer from react-window
+      }) : undefined;
+      return ___EmotionJSX(RenderCellInRow, {
+        row: row
+      }, ___EmotionJSX("div", _extends({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused ? 0 : -1,
@@ -993,28 +997,33 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         cellEl: this.cellRef.current,
         updateCellFocusContext: this.updateCellFocusContext,
         renderFocusTrap: !isExpandable
-      }, ___EmotionJSX(EuiDataGridCellContent, _extends({}, cellContentProps, {
-        cellActions: showCellActions && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDataGridCellActions, {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          column: column,
-          onExpandClick: this.handleCellExpansionClick
-        }), ___EmotionJSX("div", {
-          ref: this.popoverAnchorRef,
-          "data-test-subject": "cellPopoverAnchor"
-        }))
-      }))));
-      return rowManager && !IS_JEST_ENVIRONMENT ? /*#__PURE__*/createPortal(cell, rowManager.getRow({
+      }, ___EmotionJSX(EuiDataGridCellContent, _extends({}, rest, {
+        setCellProps: this.setCellProps,
+        column: column,
+        columnType: columnType,
+        isExpandable: isExpandable,
+        isExpanded: popoverIsOpen,
+        onExpandClick: this.handleCellExpansionClick,
+        popoverAnchorRef: this.popoverAnchorRef,
+        showCellActions: showCellActions,
+        isFocused: this.state.isFocused,
+        setCellContentsRef: this.setCellContentsRef,
+        rowHeight: rowHeight,
+        rowHeightUtils: rowHeightUtils,
+        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
+        ariaRowIndex: ariaRowIndex,
         rowIndex: rowIndex,
-        visibleRowIndex: visibleRowIndex,
-        top: style.top,
-        // comes in as a `{float}px` string from react-window
-        height: style.height // comes in as an integer from react-window
-      })) : cell;
+        colIndex: colIndex
+      })))));
     }
   }]);
   return EuiDataGridCell;
 }(Component);
+
+/**
+ * Function component utilities for conditional rendering.
+ * Used for DRYness and performance
+ */
 _defineProperty(EuiDataGridCell, "contextType", DataGridFocusContext);
 EuiDataGridCell.propTypes = {
   rowIndex: PropTypes.number.isRequired,
@@ -1421,4 +1430,34 @@ EuiDataGridCell.propTypes = {
     getRow: PropTypes.func.isRequired
   }),
   pagination: PropTypes.any
-};
+};
+var RenderCellInRow = /*#__PURE__*/memo(function (_ref2) {
+  var row = _ref2.row,
+    children = _ref2.children;
+  return row ? /*#__PURE__*/createPortal(children, row) : children;
+});
+RenderCellInRow.propTypes = {
+  children: PropTypes.element.isRequired,
+  row: PropTypes.any
+};
+RenderCellInRow.displayName = 'RenderCellInRow';
+var RenderTruncatedCellContent = /*#__PURE__*/memo(function (_ref3) {
+  var children = _ref3.children,
+    hasLineCountTruncation = _ref3.hasLineCountTruncation,
+    rowHeight = _ref3.rowHeight;
+  // If `hasLineCountTruncation` is true, we can rely on rowHeight being the correct type
+  var lines = hasLineCountTruncation ? rowHeight.lineCount : undefined;
+  return lines ? ___EmotionJSX(EuiTextBlockTruncate, {
+    lines: lines,
+    cloneElement: true
+  }, children) : children;
+});
+RenderTruncatedCellContent.propTypes = {
+  children: PropTypes.element.isRequired,
+  hasLineCountTruncation: PropTypes.bool.isRequired,
+  rowHeight: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf(["auto"]), PropTypes.shape({
+    lineCount: PropTypes.number,
+    height: PropTypes.number
+  }).isRequired])
+};
+RenderTruncatedCellContent.displayName = 'RenderTruncatedCellContent';

package/es/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -26,6 +26,7 @@ import { EuiPopoverFooter } from '../../../popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
+    popoverAnchorRef = _ref.popoverAnchorRef,
     column = _ref.column,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex;
@@ -33,23 +34,25 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
   // or screen reader users
-  var expandButton = ___EmotionJSX(EuiI18n, {
-    key: 'expand',
-    token: "euiDataGridCellActions.expandButtonTitle",
-    default: "Click or hit enter to interact with cell content"
-  }, function (expandButtonTitle) {
-    return ___EmotionJSX(EuiButtonIcon, {
-      className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
-      "data-test-subj": "euiDataGridCellExpandButton",
-      display: "fill",
-      color: "primary",
-      iconSize: "m",
-      iconType: "expandMini",
-      "aria-hidden": true,
-      onClick: onExpandClick,
-      title: expandButtonTitle
+  var expandButton = useMemo(function () {
+    return ___EmotionJSX(EuiI18n, {
+      key: 'expand',
+      token: "euiDataGridCellActions.expandButtonTitle",
+      default: "Click or hit enter to interact with cell content"
+    }, function (expandButtonTitle) {
+      return ___EmotionJSX(EuiButtonIcon, {
+        className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
+        "data-test-subj": "euiDataGridCellExpandButton",
+        display: "fill",
+        color: "primary",
+        iconSize: "m",
+        iconType: "expandMini",
+        "aria-hidden": true,
+        onClick: onExpandClick,
+        title: expandButtonTitle
+      });
     });
-  });
+  }, [onExpandClick]);
   var additionalButtons = useMemo(function () {
     if (!column || !Array.isArray(column === null || column === void 0 ? void 0 : column.cellActions)) return [];
     var ButtonComponent = function ButtonComponent(props) {
@@ -80,9 +83,12 @@ export var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       });
     });
   }, [column, colIndex, rowIndex]);
-  return ___EmotionJSX("div", {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
     className: "euiDataGridRowCell__actions"
-  }, [].concat(_toConsumableArray(additionalButtons), [expandButton]));
+  }, [].concat(_toConsumableArray(additionalButtons), [expandButton])), ___EmotionJSX("div", {
+    ref: popoverAnchorRef,
+    "data-test-subject": "cellPopoverAnchor"
+  }));
 };
 export var EuiDataGridCellPopoverActions = function EuiDataGridCellPopoverActions(_ref2) {
   var rowIndex = _ref2.rowIndex,

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

@@ -19,7 +19,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-import React, { createContext, useState, useCallback } from 'react';
+import React, { createContext, useState, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { keys } from '../../../../services';
 import { EuiWrappingPopover } from '../../../popover';
@@ -37,7 +37,6 @@ export var DataGridCellPopoverContext = /*#__PURE__*/createContext({
   setCellPopoverProps: function setCellPopoverProps() {}
 });
 export var useCellPopover = function useCellPopover() {
-  var _cellPopoverProps$pan;
   // Current open state & cell location are handled here
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -88,16 +87,6 @@ export 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,
@@ -109,52 +98,71 @@ export var useCellPopover = function useCellPopover() {
       closeCellPopover();
     }
   }, [popoverAnchor, closeCellPopover]);
+  var onKeyDown = useCallback(function (event) {
+    if (event.key === keys.F2 || event.key === 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 && ___EmotionJSX(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: classNames('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 === keys.F2 || event.key === 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 = 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 = 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 ___EmotionJSX(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: classNames('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 useMemo(function () {
+    return {
+      cellPopoverContext: cellPopoverContext,
+      cellPopover: cellPopover
+    };
+  }, [cellPopoverContext, cellPopover]);
 };
 
 /**

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

@@ -14,9 +14,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, memo } from 'react';
 import classNames from 'classnames';
-import { DataGridSortingContext } from '../../utils/sorting';
+import { DataGridSortedContext } from '../../utils/sorting';
 import { DataGridCellPopoverContext } from './data_grid_cell_popover';
 import { EuiDataGridCell } from './data_grid_cell';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -25,7 +25,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * It grabs context,  determines the type of cell being rendered
  * (e.g. control vs data cell), & sets shared props between all cells
  */
-export var Cell = function Cell(_ref) {
+export var CellWrapper = /*#__PURE__*/memo(function (_ref) {
   var colIndex = _ref.colIndex,
     visibleRowIndex = _ref.visibleRowIndex,
     style = _ref.style,
@@ -48,9 +48,8 @@ export var Cell = function Cell(_ref) {
     rowManager = _ref.rowManager,
     rest = _objectWithoutProperties(_ref, _excluded);
   var popoverContext = useContext(DataGridCellPopoverContext);
-  var _useContext = useContext(DataGridSortingContext),
+  var _useContext = useContext(DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
-  var cellContent;
   var isFirstColumn = colIndex === 0;
   var isLastColumn = colIndex === visibleColCount - 1;
   var isLeadingControlColumn = colIndex < leadingControlColumns.length;
@@ -64,31 +63,33 @@ export 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 = classNames(_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 = useMemo(function () {
+    var classes = classNames(_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 = ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
+    return ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: id,
       width: leadingColumn.width,
       renderCellValue: rowCellRender,
@@ -100,7 +101,7 @@ export var Cell = function Cell(_ref) {
     var trailingColumn = trailingControlColumns[trailingcolIndex];
     var _id = trailingColumn.id,
       _rowCellRender = trailingColumn.rowCellRender;
-    cellContent = ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
+    return ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: _id,
       width: trailingColumn.width,
       renderCellValue: _rowCellRender,
@@ -109,9 +110,9 @@ export 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 = ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
+    return ___EmotionJSX(EuiDataGridCell, _extends({}, sharedCellProps, {
       columnId: columnId,
       column: column,
       columnType: columnType,
@@ -122,5 +123,5 @@ export var Cell = function Cell(_ref) {
       isExpandable: isExpandable
     }, rest));
   }
-  return cellContent;
-};
+});
+CellWrapper.displayName = 'CellWrapper';

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

@@ -7,5 +7,5 @@
  */
 
 export { EuiDataGridCell } from './data_grid_cell';
-export { Cell } from './data_grid_cell_wrapper';
+export { CellWrapper } from './data_grid_cell_wrapper';
 export { DataGridCellPopoverContext, useCellPopover } from './data_grid_cell_popover';