@ember-eui/core 15.0.0 → 16.0.0

package/dist/components/eui-data-grid/cell.js

@@ -0,0 +1,781 @@
+import Component from '@glimmer/component';
+import { tracked, cached } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { schedule } from '@ember/runloop';
+import { service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
+import { focusTrap } from 'ember-focus-trap';
+import { focusTrapFactory } from '../../-private/focus-trap-registry.js';
+import { modifier } from 'ember-modifier';
+import { eq } from 'ember-truth-helpers';
+import { tabbable } from 'tabbable';
+import { afterRender, observeResize } from '../../utils/data-grid/scheduling.js';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
+import { az as euiTextTruncate, ew as euiTextBreakWord, eI as euiDataGridCellPopoverStyles, eF as euiDataGridFooterStyles, eJ as euiDataGridRowCellStyles } from '../../styles.generated-SYAxYhey.js';
+import { euiTextBlockTruncateStyles } from '../../utils/eui/text-truncate.js';
+import { disableInteractives, enableAndFocusInteractives } from '../../utils/data-grid/focus.js';
+import { F2, ESCAPE, ENTER } from '../../utils/keys.js';
+import EuiLiveAnnouncer from '../eui-live-announcer.js';
+import EuiPopoverComponent from '../eui-popover.js';
+import EuiScreenReaderOnly from '../eui-screen-reader-only.js';
+import EuiDataGridCopyMarker from './copy-marker.js';
+import EuiDataGridDefaultCellPopover from './default-cell-popover.js';
+import EuiDataGridTreeCell from './tree-cell.js';
+import { rowTreeCellState, handleRowTreeCellKeyDown } from './row-tree-hooks.js';
+import { EuiDataGridCellPopoverActions, EuiDataGridCellActions } from './cell-actions.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+const concatClass = (...classes) => classes.filter(value => typeof value === 'string' && value).join(' ');
+const TEXT_TRUNCATE = euiTextTruncate();
+const TEXT_BREAK_WORD = euiTextBreakWord();
+const {
+  euiTextBlockTruncate
+} = euiTextBlockTruncateStyles;
+function shallowEqual(a, b) {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    const aValue = a[key];
+    const bValue = b[key];
+    if (aValue === bValue) continue;
+    if (key === 'style' && typeof aValue === 'object' && typeof bValue === 'object' && aValue && bValue && shallowEqual(aValue, bValue)) continue;
+    return false;
+  }
+  return true;
+}
+const toKebab = property => property.startsWith('--') ? property : property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+const UNITLESS = new Set(['opacity', 'z-index', 'flex-grow', 'flex-shrink', 'line-height', 'font-weight', 'order']);
+function styleString(style) {
+  if (!style) return '';
+  return Object.entries(style).filter(([, value]) => value != null && value !== '').map(([key, value]) => {
+    const property = toKebab(key);
+    const cssValue = typeof value === 'number' && !UNITLESS.has(property) ? `${value}px` : String(value);
+    return `${property}:${cssValue}`;
+  }).join(';');
+}
+/**
+ * A grid cell (`role=gridcell`): data, control and footer cells. Port of
+ * upstream `EuiDataGridCell` + `CellWrapper` + `HandleInteractiveChildren`.
+ */
+class EuiDataGridCell extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isFocused = (i(this, "isFocused"), void 0);
+  static {
+    g(this.prototype, "isHovered", [tracked], function () {
+      return false;
+    });
+  }
+  #isHovered = (i(this, "isHovered"), void 0);
+  static {
+    g(this.prototype, "hasInteractiveChildren", [tracked], function () {
+      return false;
+    });
+  }
+  #hasInteractiveChildren = (i(this, "hasInteractiveChildren"), void 0);
+  static {
+    g(this.prototype, "isCellEntered", [tracked], function () {
+      return false;
+    });
+  }
+  #isCellEntered = (i(this, "isCellEntered"), void 0);
+  static {
+    g(this.prototype, "isExited", [tracked], function () {
+      return false;
+    });
+  }
+  #isExited = (i(this, "isExited"), void 0);
+  cellElement = null;
+  contentElement = null;
+  focusTrapHintId = `euiDataGridCell-${guidFor(this)}-focusTrapHint`;
+  constructor(owner, args) {
+    super(owner, args);
+    // Account for virtualization: a cell scrolled back into view keeps focus
+    this.isFocused = args.grid.isFocusedCell(args.colIndex, args.visibleRowIndex);
+  }
+  /** Subscribes to focus changes of this cell's location (re-run if it moves). */
+  registerFocus = modifier((_element, [colIndex, visibleRowIndex]) => {
+    const {
+      grid
+    } = this.args;
+    afterRender(this, () => {
+      const isFocused = grid.isFocusedCell(colIndex, visibleRowIndex);
+      if (isFocused !== this.isFocused) this.isFocused = isFocused;
+    });
+    return grid.onFocusUpdate([colIndex, visibleRowIndex], this.onFocusUpdate);
+  });
+  willDestroy() {
+    super.willDestroy();
+    const {
+      grid,
+      colIndex,
+      visibleRowIndex
+    } = this.args;
+    if (grid.isFocusedCell(colIndex, visibleRowIndex)) grid.setIsFocusedCellInView(false);
+    if (this.isPopoverOpen) grid.closeCellPopover();
+  }
+  get grid() {
+    return this.args.grid;
+  }
+  /* -------------------------------------------------------------------- */ /* Column                                                               */ /* -------------------------------------------------------------------- */
+  get leadingCount() {
+    return this.grid.leadingControlColumns.length;
+  }
+  get isLeadingControlColumn() {
+    return this.args.colIndex < this.leadingCount;
+  }
+  get isTrailingControlColumn() {
+    return this.args.colIndex >= this.leadingCount + this.grid.columns.length;
+  }
+  get isControlColumn() {
+    return this.isLeadingControlColumn || this.isTrailingControlColumn;
+  }
+  get controlColumn() {
+    const {
+      colIndex
+    } = this.args;
+    if (this.isLeadingControlColumn) return this.grid.leadingControlColumns[colIndex];
+    if (this.isTrailingControlColumn) return this.grid.trailingControlColumns[colIndex - this.leadingCount - this.grid.columns.length];
+    return undefined;
+  }
+  get column() {
+    if (this.isControlColumn) return undefined;
+    return this.grid.columns[this.args.colIndex - this.leadingCount];
+  }
+  get columnId() {
+    return this.controlColumn?.id ?? this.column?.id ?? '';
+  }
+  get columnType() {
+    if (this.isControlColumn) return null;
+    return this.grid.schema[this.columnId]?.columnType ?? null;
+  }
+  get textTransform() {
+    const column = this.column;
+    if (!column && !this.isControlColumn) return undefined;
+    const columnId = this.columnId;
+    return this.grid.schemaDetectors.find(detector => column?.schema ? column.schema === detector.type : columnId === detector.type)?.textTransform;
+  }
+  get rowIndex() {
+    if (this.args.isFooter) return this.args.visibleRowIndex;
+    return this.grid.getCorrectRowIndex(this.args.visibleRowIndex);
+  }
+  // ember-eui extension (row-tree): tree row, group/toggle cell flags and `@row`
+  get rowTree() {
+    return rowTreeCellState(this.grid, {
+      visibleRowIndex: this.args.visibleRowIndex,
+      rowIndex: this.rowIndex,
+      column: this.column,
+      isFooter: this.args.isFooter
+    });
+  }
+  static {
+    n(this.prototype, "rowTree", [cached]);
+  }
+  get width() {
+    const control = this.controlColumn;
+    if (control) return control.width;
+    return this.args.body.widthForColumn(this.columnId);
+  }
+  get isFirstColumn() {
+    return this.args.colIndex === 0;
+  }
+  get isLastColumn() {
+    return this.args.colIndex === this.grid.visibleColCount - 1;
+  }
+  /** The last data column ends a copied row (tabular copy). */
+  get isLastCopyColumn() {
+    const columnCount = this.grid.columns.length;
+    return columnCount > 0 && this.args.colIndex === this.leadingCount + columnCount - 1;
+  }
+  get copyMarkerType() {
+    if (this.isControlColumn) return 'no-copy';
+    return this.isLastCopyColumn ? 'newline' : 'tab';
+  }
+  /* -------------------------------------------------------------------- */ /* setCellProps                                                          */ /* -------------------------------------------------------------------- */ // props set by the cell renderer, reset when the cell shows another row/column
+  static {
+    g(this.prototype, "cellPropsState", [tracked], function () {
+      return null;
+    });
+  }
+  #cellPropsState = (i(this, "cellPropsState"), void 0);
+  get cellPropsKey() {
+    return `${this.columnId}:${this.rowIndex}`;
+  }
+  get cellProps() {
+    const state = this.cellPropsState;
+    return state && state.key === this.cellPropsKey ? state.props : {};
+  }
+  /** Renderers may call this during render; the update is applied after rendering. */
+  setCellProps = props => {
+    const key = this.cellPropsKey;
+    schedule('afterRender', () => {
+      if (this.isDestroying || this.isDestroyed) return;
+      const current = this.cellPropsState;
+      if (current && current.key === key && shallowEqual(current.props, props)) return;
+      if (!current && Object.keys(props).length === 0) return;
+      this.cellPropsState = {
+        key,
+        props
+      };
+    });
+  };
+  /** Arbitrary attributes from setCellProps (other than class/style/data-test-subj). */
+  cellPropsAttributes = modifier((element, [props]) => {
+    const names = [];
+    for (const [name, value] of Object.entries(props)) {
+      if (['className', 'style', 'isExpandable', 'data-test-subj'].includes(name)) continue;
+      if (value == null || value === false || typeof value === 'function') continue;
+      element.setAttribute(name, String(value));
+      names.push(name);
+    }
+    return () => names.forEach(name => element.removeAttribute(name));
+  });
+  /* -------------------------------------------------------------------- */ /* Expansion & popover                                                   */ /* -------------------------------------------------------------------- */
+  get defaultIsExpandable() {
+    if (this.args.isExpandable !== undefined && !this.args.isFooter) return this.args.isExpandable;
+    if (this.isControlColumn) return false;
+    if (this.rowTree.isGroupRow) return false; // ember-eui extension (row-tree): group rows have no value
+    if (this.args.isFooter) return true;
+    return this.column?.isExpandable ?? true;
+  }
+  get isExpandable() {
+    // A cell with cell actions must always be expandable, otherwise keyboard
+    // and screen reader users can't access them
+    // ember-eui extension (row-tree): `!isGroupRow`: group rows have no value
+    if (this.column?.cellActions?.length && !this.rowTree.isGroupRow) return true;
+    return this.cellProps.isExpandable ?? this.defaultIsExpandable;
+  }
+  get isPopoverOpen() {
+    return this.isExpandable && this.grid.isPopoverOpenFor(this.args.colIndex, this.args.visibleRowIndex);
+  }
+  get showCellActions() {
+    return this.isExpandable && (this.isPopoverOpen || this.isFocused || this.isHovered);
+  }
+  handleCellExpansionClick() {
+    if (this.isPopoverOpen) {
+      this.grid.closeCellPopover();
+    } else {
+      this.grid.openCellPopover({
+        rowIndex: this.args.visibleRowIndex,
+        colIndex: this.args.colIndex
+      });
+    }
+  }
+  static {
+    n(this.prototype, "handleCellExpansionClick", [action]);
+  }
+  closePopover() {
+    this.grid.closeCellPopover();
+  }
+  /** Clicking the expand action must toggle, not count as an outside click. */
+  static {
+    n(this.prototype, "closePopover", [action]);
+  }
+  onPopoverClickOutside(event) {
+    const actions = this.cellElement?.querySelector('.euiDataGridRowCell__actionsWrapper');
+    if (!actions?.contains(event.target)) this.grid.closeCellPopover();
+  }
+  static {
+    n(this.prototype, "onPopoverClickOutside", [action]);
+  }
+  popoverPanel = null;
+  /**
+  * The cell popover holds forms and editors: focus goes to its first
+  * tabbable element (EuiPopover itself would focus the panel, as
+  * upstream), the panel when there is none.
+  */
+  popoverInitialFocus = () => this.popoverPanel ? tabbable(this.popoverPanel)[0] ?? this.popoverPanel : null;
+  registerPopoverPanel(panel) {
+    this.popoverPanel?.removeEventListener('keydown', this.onPopoverKeyDown, true);
+    this.popoverPanel = panel;
+    panel?.addEventListener('keydown', this.onPopoverKeyDown, true);
+  }
+  static {
+    n(this.prototype, "registerPopoverPanel", [action]);
+  }
+  onPopoverKeyDown(event) {
+    if (event.key === F2 || event.key === ESCAPE) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.grid.closeCellPopover();
+      const cell = this.cellElement;
+      // prevent the actions animation from replaying while focus moves back
+      cell?.setAttribute('data-keyboard-closing', 'true');
+      requestAnimationFrame(() => {
+        cell?.focus();
+        cell?.removeAttribute('data-keyboard-closing');
+      });
+    }
+  }
+  static {
+    n(this.prototype, "onPopoverKeyDown", [action]);
+  }
+  get popoverFocusTrapOptions() {
+    return {
+      onClickOutside: this.onPopoverClickOutside,
+      clickOutsideDeactivates: false,
+      // let clicks through (e.g. the expand button toggling the popover)
+      allowOutsideClick: true
+    };
+  }
+  get popoverPanelClassName() {
+    return concatClass('euiDataGridRowCell__popover', this.grid.cellPopoverProps.panelClassName);
+  }
+  get popoverZIndex() {
+    return this.grid.cellPopoverProps.zIndex;
+  }
+  get popoverPanelStyle() {
+    const width = this.cellElement?.offsetWidth ?? 0;
+    return {
+      maxInlineSize: `min(75vw, max(${width}px, 400px))`,
+      maxBlockSize: '50vh'
+    };
+  }
+  get schema() {
+    return this.column?.schema || this.columnType;
+  }
+  get cellText() {
+    return this.contentElement?.innerText ?? '';
+  }
+  setCellPopoverProps(props) {
+    schedule('afterRender', () => {
+      if (!this.isDestroying) this.grid.cellPopoverProps = props;
+    });
+  }
+  static {
+    n(this.prototype, "setCellPopoverProps", [action]);
+  }
+  get popoverRendererProps() {
+    return {
+      rowIndex: this.rowIndex,
+      colIndex: this.args.colIndex,
+      columnId: this.columnId,
+      schema: this.schema,
+      cellContentsElement: this.contentElement,
+      setCellPopoverProps: this.setCellPopoverProps
+    };
+  }
+  /* -------------------------------------------------------------------- */ /* Focus                                                                */ /* -------------------------------------------------------------------- */
+  onFocusUpdate = (isFocused, preventScroll = false) => {
+    if (this.isDestroying) return;
+    this.isFocused = isFocused;
+    if (isFocused) this.takeFocus(preventScroll);
+  };
+  takeFocus(preventScroll) {
+    const cell = this.cellElement;
+    if (!cell) return;
+    const active = document.activeElement;
+    if (active && !cell.contains(active) && active.closest('.euiPopover__panel')) {
+      // focus is in a popover (e.g. this cell's expansion popover, closing):
+      // its focus trap keeps focus until it closes, so focus the cell after
+      let frames = 30; // the popover's closing transition
+      const focusWhenReleased = () => {
+        if (this.isDestroying || !this.isFocused) return;
+        const current = document.activeElement;
+        if (current?.closest('.euiPopover__panel') && frames-- > 0) {
+          requestAnimationFrame(focusWhenReleased);
+          return;
+        }
+        if (!this.cellElement?.contains(current)) this.cellElement?.focus({
+          preventScroll
+        });
+      };
+      requestAnimationFrame(focusWhenReleased);
+      return;
+    }
+    // Only focus the cell if not already focused on something in the cell
+    if (!cell.contains(active)) cell.focus({
+      preventScroll
+    });
+  }
+  updateCellFocusContext() {
+    this.grid.setFocusedCell([this.args.colIndex, this.args.visibleRowIndex]);
+  }
+  static {
+    n(this.prototype, "updateCellFocusContext", [action]);
+  }
+  setupCell = modifier(element => {
+    this.cellElement = element;
+    const {
+      grid,
+      colIndex,
+      visibleRowIndex
+    } = this.args;
+    if (grid.isFocusedCell(colIndex, visibleRowIndex)) {
+      // preventScroll: don't hijack the user's scrolling when the cell re-mounts
+      this.takeFocus(true);
+      afterRender(this, () => grid.setIsFocusedCellInView(true));
+    }
+    // take interactive children out of the tab order
+    const hasInteractives = disableInteractives(element).length > 0;
+    afterRender(this, () => {
+      if (hasInteractives !== this.hasInteractiveChildren) this.hasInteractiveChildren = hasInteractives;
+    });
+    // focusing any (interactive) child updates the grid focus
+    const onFocus = () => this.updateCellFocusContext();
+    element.addEventListener('focus', onFocus, true);
+    return () => {
+      element.removeEventListener('focus', onFocus, true);
+      this.cellElement = null;
+    };
+  });
+  onMouseEnter() {
+    this.isHovered = true;
+  }
+  static {
+    n(this.prototype, "onMouseEnter", [action]);
+  }
+  onMouseLeave() {
+    this.isHovered = false;
+  }
+  static {
+    n(this.prototype, "onMouseLeave", [action]);
+  }
+  onKeyDown(event) {
+    // ember-eui extension (row-tree): toggle cell keys (Space/Enter/arrows)
+    if (handleRowTreeCellKeyDown(event, {
+      grid: this.grid,
+      tree: this.rowTree,
+      cellElement: this.cellElement,
+      colIndex: this.args.colIndex,
+      isExpandable: this.isExpandable,
+      isPopoverOpen: this.isPopoverOpen,
+      hasFocusTrap: this.renderFocusTrap
+    })) return;
+    if (this.isExpandable) {
+      if (this.isPopoverOpen) return;
+      if (event.key === ENTER || event.key === F2) {
+        event.preventDefault();
+        this.grid.openCellPopover({
+          rowIndex: this.args.visibleRowIndex,
+          colIndex: this.args.colIndex
+        });
+      }
+    }
+  }
+  /* -------------------------------------------------------------------- */ /* Focus trap for non-expandable cells with interactive children         */ /* -------------------------------------------------------------------- */
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  get renderFocusTrap() {
+    return !this.isExpandable && this.hasInteractiveChildren;
+  }
+  onKeyUp(event) {
+    if (!this.renderFocusTrap) return;
+    switch (event.key) {
+      case ENTER:
+      case F2:
+        event.preventDefault();
+        if (!this.isCellEntered) this.enterCell();
+        break;
+      case ESCAPE:
+        event.preventDefault();
+        if (this.isCellEntered) this.exitCell();
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyUp", [action]);
+  }
+  enterCell() {
+    this.isCellEntered = true;
+    if (this.cellElement) enableAndFocusInteractives(this.cellElement);
+  }
+  exitCell() {
+    if (!this.isCellEntered) return;
+    this.isCellEntered = false;
+    this.isExited = true;
+    const cell = this.cellElement;
+    if (cell) {
+      disableInteractives(cell);
+      requestAnimationFrame(() => cell.focus());
+    }
+  }
+  static {
+    n(this.prototype, "exitCell", [action]);
+  }
+  onBlur() {
+    // ensures the SR text is reset when navigating to a different cell
+    if (this.isExited) this.isExited = false;
+  }
+  static {
+    n(this.prototype, "onBlur", [action]);
+  }
+  focusTrapOptions = {
+    clickOutsideDeactivates: true,
+    escapeDeactivates: false,
+    // like react-focus-on, entering the cell focuses its first interactive child
+    returnFocusOnDeactivate: false,
+    onDeactivate: () => {
+      if (this.isCellEntered) this.isCellEntered = false;
+    },
+    fallbackFocus: () => this.cellElement
+  };
+  get focusTrapEnterPrompt() {
+    return this.euiI18n.lookupToken('euiDataGridCell.focusTrapEnterPrompt', "Press the Enter key to interact with this cell's contents.");
+  }
+  get focusTrapExitPrompt() {
+    return this.euiI18n.lookupToken('euiDataGridCell.focusTrapExitPrompt', 'Exited cell content.');
+  }
+  get focusTrapEnteredExitPrompt() {
+    return this.euiI18n.lookupToken('euiDataGridCell.focusTrapEnteredExitPrompt', 'Press the Escape key to exit the cell.');
+  }
+  /* -------------------------------------------------------------------- */ /* Row heights                                                          */ /* -------------------------------------------------------------------- */
+  get rowHeightOption() {
+    return this.args.body.rowHeightUtils.getRowHeightOption(this.rowIndex, this.grid.rowHeightsOptions);
+  }
+  get cellHeightType() {
+    const utils = this.args.body.rowHeightUtils;
+    const option = this.rowHeightOption;
+    if (utils.isAutoBelowLineCount(this.grid.rowHeightsOptions, option)) return 'autoBelowLineCount';
+    return utils.getHeightType(option) || 'default';
+  }
+  get lineClamp() {
+    const type = this.cellHeightType;
+    if ((type === 'lineCount' || type === 'autoBelowLineCount') && !this.isControlColumn) {
+      return this.args.body.rowHeightUtils.getLineCount(this.rowHeightOption);
+    }
+    return undefined;
+  }
+  /** Port of `recalculateLineHeight`: one cell per row measures line heights. */
+  measureLineHeight = modifier((element, positional) => {
+    if (!this.isFirstColumn || this.args.isFooter) return;
+    const {
+      body,
+      grid
+    } = this.args;
+    const utils = body.rowHeightUtils;
+    const options = grid.rowHeightsOptions;
+    const option = utils.getRowHeightOption(this.rowIndex, options);
+    if (utils.isAutoBelowLineCount(options, option)) return; // auto height instead
+    const lineCount = option == null ? 1 : utils.getLineCount(option);
+    if (!lineCount) return;
+    const height = utils.calculateHeightForLineCount(element, lineCount);
+    if (utils.isRowHeightOverride(this.rowIndex, options)) {
+      utils.setRowHeight(this.rowIndex, this.columnId, height, this.args.visibleRowIndex);
+    } else {
+      afterRender(this, () => body.setMinRowHeight(height));
+    }
+  });
+  /** Port of `recalculateAutoHeight`: auto rows report their content height. */
+  measureAutoHeight = modifier((element, [isAuto]) => {
+    if (!isAuto || this.args.isFooter) return;
+    const report = () => {
+      if (this.isDestroying) return;
+      this.args.body.rowHeightUtils.setRowHeight(this.rowIndex, this.columnId, element.offsetHeight, this.args.visibleRowIndex);
+    };
+    report();
+    return observeResize([element], report);
+  });
+  get isAutoHeight() {
+    return this.args.body.rowHeightUtils.isAutoHeight(this.rowIndex, this.grid.rowHeightsOptions);
+  }
+  setContentElement = modifier(element => {
+    this.contentElement = element;
+    return () => {
+      if (this.contentElement === element) this.contentElement = null;
+    };
+  });
+  /* -------------------------------------------------------------------- */ /* Classes, styles & attributes                                         */ /* -------------------------------------------------------------------- */
+  get themeStyles() {
+    const context = getEuiThemeContext(this);
+    return {
+      context,
+      cell: useEuiBorealisStyles(context, euiDataGridRowCellStyles),
+      footer: useEuiBorealisStyles(context, euiDataGridFooterStyles),
+      popover: useEuiBorealisStyles(context, euiDataGridCellPopoverStyles)
+    };
+  }
+  static {
+    n(this.prototype, "themeStyles", [cached]);
+  }
+  get cellClass() {
+    const {
+      context,
+      cell,
+      footer
+    } = this.themeStyles;
+    return euiClass(context, cell.euiDataGridRowCell, this.args.isFooter && footer.euiDataGridFooterCell);
+  }
+  static {
+    n(this.prototype, "cellClass", [cached]);
+  }
+  get classes() {
+    const columnType = this.columnType;
+    return ['euiDataGridRowCell', columnType && `euiDataGridRowCell--${columnType}`, this.isPopoverOpen && 'euiDataGridRowCell--open', this.args.isFooter && 'euiDataGridFooterCell', this.isFirstColumn && 'euiDataGridRowCell--firstColumn', this.isLastColumn && 'euiDataGridRowCell--lastColumn', this.isControlColumn && 'euiDataGridRowCell--controlColumn', this.textTransform && `euiDataGridRowCell--${this.textTransform}`, this.args.isFooter && this.isControlColumn && this.controlColumn?.footerCellProps?.className, this.cellProps.className, this.cellClass].filter(Boolean).join(' ');
+  }
+  get dataTestSubj() {
+    return ['dataGridRowCell', this.cellProps['data-test-subj']].filter(Boolean).join(' ');
+  }
+  /** Ember addition: upstream sets no `aria-colindex`; columns are virtualized here. */
+  get ariaColIndex() {
+    return this.args.colIndex + 1;
+  }
+  get ariaRowIndex() {
+    const pagination = this.grid.pagination;
+    const {
+      visibleRowIndex
+    } = this.args;
+    return pagination ? visibleRowIndex + 1 + pagination.pageSize * pagination.pageIndex : visibleRowIndex + 1;
+  }
+  /** `footerCellProps.style` of a control column's footer cell. */
+  get footerCellPropsStyle() {
+    if (!this.args.isFooter || !this.isControlColumn) return '';
+    const style = this.controlColumn?.footerCellProps?.style;
+    if (!style || typeof style !== 'object') return '';
+    const {
+      top,
+      ...rest
+    } = style;
+    // upstream: `top: style.top ? 0 : undefined` (rows position their cells)
+    return styleString({
+      ...rest,
+      top: top ? 0 : undefined
+    });
+  }
+  get style() {
+    const {
+      body,
+      colIndex,
+      visibleRowIndex,
+      isFooter
+    } = this.args;
+    const width = this.width;
+    const parts = [];
+    // control columns' `footerCellProps.style` comes first, like upstream's
+    // `style` prop under the width, line height and `setCellProps` styles
+    const footerStyle = this.footerCellPropsStyle;
+    if (footerStyle) parts.push(footerStyle);
+    if (!isFooter && !body.isVirtualized) {
+      // custom grid body: cells flow in the consumer's rows
+      parts.push(`height:${this.isAutoHeight ? 'auto' : `${body.rowHeight(visibleRowIndex)}px`}`);
+    } else if (!isFooter) {
+      parts.push('position:absolute', `left:${body.columnLeft(colIndex)}px`, 'top:0', `height:${body.rowHeight(visibleRowIndex)}px`);
+    }
+    if (width != null) parts.push(`width:${width}px`);
+    const lineHeight = this.grid.rowHeightsOptions?.lineHeight;
+    if (lineHeight) parts.push(`line-height:${lineHeight}`);
+    const extra = styleString(this.cellProps.style);
+    if (extra) parts.push(extra);
+    return htmlSafe(parts.join(';'));
+  }
+  get contentClass() {
+    const {
+      context,
+      cell
+    } = this.themeStyles;
+    const type = this.cellHeightType;
+    const isControl = this.isControlColumn;
+    const isAuto = type === 'auto' || type === 'autoBelowLineCount';
+    const hasClamp = this.lineClamp != null;
+    return ['euiDataGridRowCell__content', `euiDataGridRowCell__content--${type}Height`, !isControl && type !== 'default' && 'eui-textBreakWord', !isControl && type === 'default' && 'eui-textTruncate', hasClamp && 'euiTextBlockTruncate', euiClass(context, cell.content.euiDataGridRowCell__content, ...(isControl ? [cell.content.controlColumn, cell.content.autoHeight] : [isAuto ? cell.content.autoHeight : cell.content.defaultHeight]), !isControl && type !== 'default' && TEXT_BREAK_WORD, !isControl && type === 'default' && TEXT_TRUNCATE, hasClamp && euiTextBlockTruncate)].filter(Boolean).join(' ');
+  }
+  static {
+    n(this.prototype, "contentClass", [cached]);
+  }
+  get contentStyle() {
+    const lines = this.lineClamp;
+    return lines ? htmlSafe(`-webkit-line-clamp:${lines}`) : undefined;
+  }
+  get popoverPanelCss() {
+    return this.themeStyles.popover.euiDataGridRowCell__popover;
+  }
+  /* -------------------------------------------------------------------- */ /* Renderers                                                            */ /* -------------------------------------------------------------------- */
+  static {
+    n(this.prototype, "popoverPanelCss", [cached]);
+  }
+  get kind() {
+    if (this.args.isFooter) return this.isControlColumn ? 'controlFooter' : 'footer';
+    return this.isControlColumn ? 'control' : 'data';
+  }
+  get renderer() {
+    if (this.args.renderCellValue && !this.args.isFooter) return this.args.renderCellValue;
+    switch (this.kind) {
+      case 'data':
+        return this.grid.args.renderCellValue;
+      case 'footer':
+        return this.grid.args.renderFooterCellValue;
+      case 'control':
+        return this.controlColumn?.rowCellRender;
+      case 'controlFooter':
+        return this.controlColumn?.footerCellRender;
+    }
+    return undefined;
+  }
+  get cellValueProps() {
+    return {
+      rowIndex: this.rowIndex,
+      colIndex: this.args.colIndex,
+      columnId: this.columnId,
+      setCellProps: this.setCellProps,
+      isExpandable: this.isExpandable,
+      isExpanded: this.isPopoverOpen,
+      isDetails: false,
+      schema: this.schema,
+      cellContext: this.grid.args.cellContext,
+      row: this.rowTree.rowData,
+      rowTree: this.rowTree.info // ember-eui extension (row-tree): `@rowTree`
+    };
+  }
+  get detailsValueProps() {
+    return {
+      ...this.cellValueProps,
+      isExpandable: true,
+      isExpanded: true,
+      isDetails: true
+    };
+  }
+  get cellPosition() {
+    return this.euiI18n.lookupToken('euiDataGridCell.position', '{columnName}, column {columnIndex}, row {rowIndex}', {
+      columnName: this.column?.displayAsText || this.columnId,
+      columnIndex: this.args.colIndex + 1,
+      rowIndex: this.ariaRowIndex
+    });
+  }
+  get expansionEnterPrompt() {
+    return this.euiI18n.lookupToken('euiDataGridCell.expansionEnterPrompt', 'Press the Enter key to expand this cell.');
+  }
+  get screenReaderDescription() {
+    return ` - ${this.cellPosition}${this.showCellActions ? `. ${this.expansionEnterPrompt}` : ''}`;
+  }
+  get ariaDescribedBy() {
+    return this.renderFocusTrap ? this.focusTrapHintId : undefined;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-invalid-interactive require-aria-activedescendant-tabindex --}}\n<div role=\"gridcell\" class={{this.classes}} style={{this.style}} tabindex={{if this.isFocused \"0\" \"-1\"}} aria-rowindex={{this.ariaRowIndex}} aria-colindex={{this.ariaColIndex}} aria-describedby={{this.ariaDescribedBy}} data-test-subj={{this.dataTestSubj}} data-gridcell-column-id={{this.columnId}} data-gridcell-column-index={{@colIndex}} data-gridcell-row-index={{this.rowIndex}} data-gridcell-visible-row-index={{@visibleRowIndex}} {{on \"keydown\" this.onKeyDown}} {{on \"keyup\" this.onKeyUp}} {{on \"blur\" this.onBlur}} {{on \"mouseenter\" this.onMouseEnter}} {{on \"mouseleave\" this.onMouseLeave}} {{this.cellPropsAttributes this.cellProps}} {{this.registerFocus @colIndex @visibleRowIndex}} {{this.setupCell}} ...attributes>\n  {{#if this.isControlColumn}}<EuiDataGridCopyMarker @grid={{@grid}} @type=\"no-copy\" />{{/if}}\n  {{#if this.isExpandable}}\n    {{!-- template-lint-disable no-duplicate-landmark-elements --}}\n    <div data-datagrid-cellcontent class={{this.contentClass}} style={{this.contentStyle}} {{this.setContentElement}} {{this.measureLineHeight this.grid.gridStyles.fontSize this.grid.gridStyles.cellPadding this.grid.rowHeightsOptions this.rowHeightOption}} {{this.measureAutoHeight this.isAutoHeight}}>\n      {{!-- ember-eui extension (row-tree): indentation, toggle, group content --}}\n      {{#if this.rowTree.row}}\n        <EuiDataGridTreeCell @grid={{@grid}} @row={{this.rowTree.row}} @columnId={{this.columnId}} @colIndex={{@colIndex}} @isToggleCell={{this.rowTree.isToggleCell}} />\n      {{/if}}\n      {{!-- ember-eui extension (row-tree): group rows render no value --}}\n      {{#if this.rowTree.isGroupRow}}\n      {{else if this.renderer}}\n        {{#let this.renderer as |Renderer|}}\n          <Renderer @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @columnId={{this.columnId}} @setCellProps={{this.setCellProps}} @isExpandable={{this.isExpandable}} @isExpanded={{this.isPopoverOpen}} @isDetails={{false}} @schema={{this.schema}} @cellContext={{@grid.args.cellContext}} {{!-- ember-eui extension (row-tree): @row, @rowTree --}} @row={{this.rowTree.rowData}} @rowTree={{this.rowTree.info}} />\n        {{/let}}\n      {{else if (eq this.kind \"data\")}}\n        {{yield this.cellValueProps to=\"cell\"}}\n      {{else if (eq this.kind \"control\")}}\n        {{yield this.cellValueProps to=\"controlCell\"}}\n      {{else if (eq this.kind \"footer\")}}\n        {{yield this.cellValueProps to=\"footerCell\"}}\n      {{else if (eq this.kind \"controlFooter\")}}\n        {{yield this.cellValueProps to=\"controlFooterCell\"}}\n      {{/if}}\n    </div>\n  {{else}}\n    <div data-focus-lock-disabled={{if this.isCellEntered \"false\" \"disabled\"}} {{focusTrap _createFocusTrap=focusTrapFactory isActive=this.isCellEntered focusTrapOptions=this.focusTrapOptions}}>\n      <div data-datagrid-cellcontent class={{this.contentClass}} style={{this.contentStyle}} {{this.setContentElement}} {{this.measureLineHeight this.grid.gridStyles.fontSize this.grid.gridStyles.cellPadding this.grid.rowHeightsOptions this.rowHeightOption}} {{this.measureAutoHeight this.isAutoHeight}}>\n        {{!-- ember-eui extension (row-tree): indentation, toggle, group content --}}\n        {{#if this.rowTree.row}}\n          <EuiDataGridTreeCell @grid={{@grid}} @row={{this.rowTree.row}} @columnId={{this.columnId}} @colIndex={{@colIndex}} @isToggleCell={{this.rowTree.isToggleCell}} />\n        {{/if}}\n        {{!-- ember-eui extension (row-tree): group rows render no value --}}\n        {{#if this.rowTree.isGroupRow}}\n        {{else if this.renderer}}\n          {{#let this.renderer as |Renderer|}}\n            <Renderer @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @columnId={{this.columnId}} @setCellProps={{this.setCellProps}} @isExpandable={{this.isExpandable}} @isExpanded={{false}} @isDetails={{false}} @schema={{this.schema}} @cellContext={{@grid.args.cellContext}} {{!-- ember-eui extension (row-tree): @row, @rowTree --}} @row={{this.rowTree.rowData}} @rowTree={{this.rowTree.info}} />\n          {{/let}}\n        {{else if (eq this.kind \"data\")}}\n          {{yield this.cellValueProps to=\"cell\"}}\n        {{else if (eq this.kind \"control\")}}\n          {{yield this.cellValueProps to=\"controlCell\"}}\n        {{else if (eq this.kind \"footer\")}}\n          {{yield this.cellValueProps to=\"footerCell\"}}\n        {{else if (eq this.kind \"controlFooter\")}}\n          {{yield this.cellValueProps to=\"controlFooterCell\"}}\n        {{/if}}\n      </div>\n      {{#if this.renderFocusTrap}}\n        <p id={{this.focusTrapHintId}} hidden>\n          {{#if this.isExited}}{{this.focusTrapExitPrompt}}{{/if}}\n          {{#unless this.isCellEntered}}{{this.focusTrapEnterPrompt}}{{/unless}}\n        </p>\n        <EuiLiveAnnouncer @clearAfterMs={{1000}}>\n          {{#if this.isCellEntered}}{{this.focusTrapEnteredExitPrompt}}{{/if}}\n        </EuiLiveAnnouncer>\n      {{/if}}\n    </div>\n  {{/if}}\n  <EuiDataGridCopyMarker @grid={{@grid}} @type={{this.copyMarkerType}} />\n  {{#if this.isFocused}}\n    <EuiScreenReaderOnly><p><EuiDataGridCopyMarker @grid={{@grid}} @type=\"no-copy\" />{{this.screenReaderDescription}}<EuiDataGridCopyMarker @grid={{@grid}} @type=\"no-copy\" /></p></EuiScreenReaderOnly>\n  {{/if}}\n  {{#if this.showCellActions}}\n    <EuiDataGridCellActions @column={{this.column}} @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @onExpandClick={{this.handleCellExpansionClick}}>\n      <:popover>\n        <EuiPopover @isOpen={{this.isPopoverOpen}} @closePopover={{this.closePopover}} @display=\"block\" @hasArrow={{false}} @attachToAnchor={{true}} @panelPaddingSize=\"s\" @anchorPosition=\"downLeft\" @repositionToCrossAxis={{false}} @panelClassName={{this.popoverPanelClassName}} @panelCss={{this.popoverPanelCss}} @panelStyle={{this.popoverPanelStyle}} @panelRef={{this.registerPopoverPanel}} @initialFocus={{this.popoverInitialFocus}} @focusTrapOptions={{this.popoverFocusTrapOptions}} @zIndex={{this.popoverZIndex}}>\n          <:button>\n            <div data-test-subject=\"cellPopoverAnchor\"></div>\n          </:button>\n          <:content>\n            {{#let (component EuiDataGridCellPopoverActions column=this.column rowIndex=this.rowIndex colIndex=@colIndex) as |CellActions|}}\n            {{#let (component EuiDataGridDefaultCellPopover schema=this.schema cellContentsElement=this.contentElement cellActions=CellActions) as |DefaultCellPopover|}}\n            <div data-test-subj=\"euiDataGridExpansionPopover\">\n              {{#if @grid.args.renderCellPopover}}\n                {{#let @grid.args.renderCellPopover as |PopoverRenderer|}}\n                  <PopoverRenderer @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @columnId={{this.columnId}} @schema={{this.schema}} @cellContentsElement={{this.contentElement}} @setCellPopoverProps={{this.setCellPopoverProps}} @cellActions={{CellActions}} @DefaultCellPopover={{DefaultCellPopover}} {{!-- ember-eui extension (row-tree): @row, @rowTree --}} @row={{this.rowTree.rowData}} @rowTree={{this.rowTree.info}}>\n                    {{#if this.renderer}}\n                      {{#let this.renderer as |Renderer|}}\n                        <Renderer @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @columnId={{this.columnId}} @setCellProps={{this.setCellProps}} @isExpandable={{true}} @isExpanded={{true}} @isDetails={{true}} @schema={{this.schema}} @cellContext={{@grid.args.cellContext}} {{!-- ember-eui extension (row-tree): @row, @rowTree --}} @row={{this.rowTree.rowData}} @rowTree={{this.rowTree.info}} />\n                      {{/let}}\n                    {{/if}}\n                  </PopoverRenderer>\n                {{/let}}\n              {{else if @hasCellPopoverBlock}}\n                {{!-- ember-eui extension (row-tree): `row`, `rowTree` in the hash --}}\n                {{yield (hash rowIndex=this.rowIndex colIndex=@colIndex columnId=this.columnId schema=this.schema cellContentsElement=this.contentElement setCellPopoverProps=this.setCellPopoverProps cellActions=CellActions DefaultCellPopover=DefaultCellPopover row=this.rowTree.rowData rowTree=this.rowTree.info) to=\"cellPopover\"}}\n              {{else}}\n                <EuiDataGridDefaultCellPopover @schema={{this.schema}} @cellContentsElement={{this.contentElement}} @cellActions={{CellActions}}>\n                  {{#if this.renderer}}\n                    {{#let this.renderer as |Renderer|}}\n                      <Renderer @rowIndex={{this.rowIndex}} @colIndex={{@colIndex}} @columnId={{this.columnId}} @setCellProps={{this.setCellProps}} @isExpandable={{true}} @isExpanded={{true}} @isDetails={{true}} @schema={{this.schema}} @cellContext={{@grid.args.cellContext}} {{!-- ember-eui extension (row-tree): @row, @rowTree --}} @row={{this.rowTree.rowData}} @rowTree={{this.rowTree.info}} />\n                    {{/let}}\n                  {{else if (eq this.kind \"footer\")}}\n                    {{yield this.detailsValueProps to=\"footerCell\"}}\n                  {{else}}\n                    {{yield this.detailsValueProps to=\"cell\"}}\n                  {{/if}}\n                </EuiDataGridDefaultCellPopover>\n              {{/if}}\n            </div>\n            {{/let}}\n            {{/let}}\n          </:content>\n        </EuiPopover>\n      </:popover>\n    </EuiDataGridCellActions>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        EuiDataGridCopyMarker,
+        EuiDataGridTreeCell,
+        eq,
+        focusTrap,
+        focusTrapFactory,
+        EuiLiveAnnouncer,
+        EuiScreenReaderOnly,
+        EuiDataGridCellActions,
+        EuiPopover: EuiPopoverComponent,
+        EuiDataGridCellPopoverActions,
+        EuiDataGridDefaultCellPopover,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { EuiDataGridCell as default };
+//# sourceMappingURL=cell.js.map