@esri/calcite-components 1.7.0-next.8 → 1.7.0

package/dist/esm/calcite-table-cell_2.entry.js

@@ -0,0 +1,277 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-165cd388.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d814078e.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-9a6203a1.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-5801a6e6.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-b09d220a.js';
+import './browser-612db93f.js';
+import './dom-79f84f98.js';
+import './guid-3f32a87e.js';
+import './resources-4b333cce.js';
+import './key-120fe23c.js';
+import './observers-200147a2.js';
+
+const CSS$1 = {
+  numberCell: "number-cell",
+  footerCell: "footer-cell",
+  selectionCell: "selection-cell",
+  selectedCell: "selected-cell",
+  assistiveText: "assistive-text",
+};
+
+const tableCellCss = ":host{--calcite-internal-table-cell-background-internal:var(--calcite-table-cell-background, transparent);--calcite-internal-table-cell-border-color-internal:var(--calcite-table-cell-border-color, transparent);display:contents}:host([alignment=center]) td{text-align:center}:host([alignment=end]) td{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}td{text-align:start;vertical-align:middle;color:var(--calcite-ui-text-1);outline-color:transparent;background:var(--calcite-internal-table-cell-background);border-inline-end:1px solid var(--calcite-ui-border-3);font-size:var(--calcite-internal-table-cell-font-size);padding:var(--calcite-internal-table-cell-padding)}td:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.number-cell{background-color:var(--calcite-ui-foreground-2)}.footer-cell{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-start:1px solid var(--calcite-ui-border-3)}.number-cell,.selection-cell{border-inline-end:1px solid var(--calcite-ui-border-3);inline-size:2rem;min-inline-size:2rem}.selection-cell{cursor:pointer;color:var(--calcite-ui-text-3);inset-inline-start:2rem}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-table-cell-background:var(--calcite-ui-foreground-current);background:var(--calcite-ui-foreground-current)}.selection-cell.selected-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-ui-brand);color:var(--calcite-ui-brand)}.selection-cell.selected-cell calcite-icon{color:var(--calcite-ui-brand)}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:0.25rem}";
+
+const TableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.updateScreenReaderContentsText = () => {
+      this.contentsText = this.el.textContent;
+    };
+    this.onContainerBlur = () => {
+      this.focused = false;
+    };
+    this.onContainerFocus = () => {
+      this.focused = true;
+    };
+    this.alignment = "start";
+    this.colSpan = undefined;
+    this.rowSpan = undefined;
+    this.disabled = undefined;
+    this.numberCell = undefined;
+    this.parentRowIsSelected = undefined;
+    this.parentRowPositionLocalized = undefined;
+    this.parentRowType = undefined;
+    this.positionInRow = undefined;
+    this.readCellContentsToAT = undefined;
+    this.scale = "m";
+    this.selectionCell = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.contentsText = "";
+    this.defaultMessages = undefined;
+    this.focused = false;
+    this.selectionText = "";
+    this.effectiveLocale = "";
+  }
+  onSelectedChange() {
+    this.updateScreenReaderSelectionText();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+    this.updateScreenReaderContentsText();
+    this.updateScreenReaderSelectionText();
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+    connectInteractive(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    disconnectInteractive(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    await componentFocusable(this);
+    this.containerEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  updateScreenReaderSelectionText() {
+    const selectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.selected} ${this.messages?.keyboardDeselect}`;
+    const unselectedText = `${this.messages?.row} ${this.parentRowPositionLocalized} ${this.messages?.unselected} ${this.messages?.keyboardSelect}`;
+    this.selectionText = this.parentRowIsSelected ? selectedText : unselectedText;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("td", { "aria-disabled": this.disabled, class: {
+        [CSS$1.footerCell]: this.parentRowType === "foot",
+        [CSS$1.numberCell]: this.numberCell,
+        [CSS$1.selectionCell]: this.selectionCell,
+        [CSS$1.selectedCell]: this.parentRowIsSelected,
+      }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "gridcell", rowSpan: this.rowSpan, tabIndex: this.disabled ? -1 : 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.containerEl = el) }, (this.selectionCell || this.readCellContentsToAT) && this.focused && (h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS$1.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { onSlotchange: this.updateScreenReaderContentsText }))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "parentRowIsSelected": ["onSelectedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
+TableCell.style = tableCellCss;
+
+const CSS = {
+  numberCell: "number-cell",
+  selectionCell: "selection-cell",
+  bodyRow: "body-row",
+  footerRow: "footer-row",
+  heading: "heading",
+  description: "description",
+  multipleSelectionCell: "cell--multiple-selection",
+  assistiveText: "assistive-text",
+  active: "active",
+};
+
+const tableHeaderCss = ":host{--calcite-internal-table-header-background:var(--calcite-table-header-background, var(--calcite-ui-foreground-2));--calcite-internal-table-header-border-color:var(--calcite-table-border-color, var(--calcite-ui-border-3));display:contents}:host([alignment=center]) th{text-align:center}:host([alignment=end]) th{text-align:end}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}th{text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);outline-color:transparent;font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:1px solid var(--calcite-internal-table-header-border-color);border-block-end:1px solid var(--calcite-internal-table-header-border-color);padding-block:calc(var(--calcite-internal-table-cell-padding) * 1.5);padding-inline:var(--calcite-internal-table-cell-padding);background-color:var(--calcite-internal-table-header-background)}th:focus-within{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}th.body-row,th.footer-row{vertical-align:middle;border-block-end:0}th.footer-row{border-block-start:1px solid var(--calcite-internal-table-header-border-color)}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-ui-text-3)}.number-cell,.selection-cell{color:var(--calcite-ui-text-2);inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-ui-brand)}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-ui-text-1)}.description{color:var(--calcite-ui-text-3);font-size:var(--calcite-internal-table-cell-font-size-secondary)}";
+
+const TableHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.alignment = "start";
+    this.colSpan = undefined;
+    this.description = undefined;
+    this.heading = undefined;
+    this.rowSpan = undefined;
+    this.numberCell = false;
+    this.parentRowPosition = undefined;
+    this.parentRowType = undefined;
+    this.positionInRow = undefined;
+    this.scale = undefined;
+    this.selectedRowCount = undefined;
+    this.selectedRowCountLocalized = undefined;
+    this.selectionCell = false;
+    this.selectionMode = undefined;
+    this.bodyRowCount = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.defaultMessages = undefined;
+    this.screenReaderText = "";
+    this.effectiveLocale = "";
+  }
+  onSelectedChange() {
+    this.updateScreenReaderText();
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+    this.updateScreenReaderText();
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    await componentFocusable(this);
+    this.containerEl.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  updateScreenReaderText() {
+    let text = "";
+    const sharedText = `${this.selectedRowCountLocalized} ${this.messages?.selected}`;
+    if (this.numberCell) {
+      text = this.messages?.rowNumber;
+    }
+    else if (this.selectionMode === "single") {
+      text = `${this.messages?.selectionColumn}. ${sharedText}`;
+    }
+    else if (this.bodyRowCount === this.selectedRowCount) {
+      text = `${this.messages?.selectionColumn}. ${this.messages?.all} ${sharedText} ${this.messages?.keyboardDeselectAll}`;
+    }
+    else {
+      text = `${this.messages?.selectionColumn}. ${sharedText} ${this.messages?.keyboardSelectAll}`;
+    }
+    this.screenReaderText = text;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const scope = this.rowSpan
+      ? "rowgroup"
+      : this.colSpan
+        ? "colgroup"
+        : this.parentRowType === "body"
+          ? "row"
+          : "col";
+    const allSelected = this.selectedRowCount === this.bodyRowCount;
+    const selectionIcon = allSelected ? "check-square-f" : "check-square";
+    return (h(Host, null, h("th", { "aria-colindex": this.parentRowType !== "body" ? this.positionInRow : "", class: {
+        [CSS.bodyRow]: this.parentRowType === "body",
+        [CSS.footerRow]: this.parentRowType === "foot",
+        [CSS.numberCell]: this.numberCell,
+        [CSS.selectionCell]: this.selectionCell,
+        [CSS.multipleSelectionCell]: this.selectionMode === "multiple",
+      }, colSpan: this.colSpan, role: "columnheader", rowSpan: this.rowSpan, scope: scope, tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.containerEl = el) }, this.heading && h("div", { class: CSS.heading }, this.heading), this.description && h("div", { class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (h("calcite-icon", { class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: this.scale === "l" ? "m" : "s" })), (this.selectionCell || this.numberCell) && (h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS.assistiveText }, this.screenReaderText)))));
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectedRowCount": ["onSelectedChange"],
+    "selectedRowCountLocalized": ["onSelectedChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+};
+TableHeader.style = tableHeaderCss;
+
+export { TableCell as calcite_table_cell, TableHeader as calcite_table_header };

package/dist/esm/calcite-table-row.entry.js

@@ -0,0 +1,231 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.7.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-165cd388.js';
+import { l as focusElementInGroup } from './dom-79f84f98.js';
+import { i as isActivationKey } from './key-120fe23c.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-5801a6e6.js';
+import './guid-3f32a87e.js';
+import './resources-4b333cce.js';
+import './browser-612db93f.js';
+
+const tableRowCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-row-background:var(--calcite-table-row-background, var(--calcite-ui-foreground-1));--calcite-internal-table-row-border-color:var(--calcite-table-row-border-color, transparent);display:contents}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) tr{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}tr{border-block-end:1px solid var(--calcite-internal-table-row-border-color);background-color:var(--calcite-internal-table-row-background)}";
+
+const TableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteTableRowSelect = createEvent(this, "calciteTableRowSelect", 6);
+    this.calciteInternalTableRowFocusRequest = createEvent(this, "calciteInternalTableRowFocusRequest", 6);
+    this.rowCells = [];
+    this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
+      this.calciteInternalTableRowFocusRequest.emit({
+        cellPosition,
+        rowPosition,
+        destination,
+        lastCell,
+      });
+    };
+    this.updateCells = () => {
+      const slottedCells = this.tableRowSlotEl
+        ?.assignedElements({ flatten: true })
+        ?.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
+      const renderedCells = Array.from(this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell"))?.filter((el) => el.numberCell || el.selectionCell);
+      const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
+      if (cells.length > 0) {
+        cells?.forEach((cell, index) => {
+          cell.positionInRow = index + 1;
+          cell.parentRowType = this.rowType;
+          cell.scale = this.scale;
+          if (cell.nodeName === "CALCITE-TABLE-CELL") {
+            cell.readCellContentsToAT = this.readCellContentsToAT;
+            cell.disabled = this.disabled;
+            cell.parentRowIsSelected = this.selected;
+          }
+        });
+      }
+      this.rowCells =
+        cells || [];
+      this.cellCount = cells?.length;
+    };
+    this.handleSelectionOfRow = () => {
+      this.calciteTableRowSelect.emit();
+    };
+    this.handleKeyboardSelection = (event) => {
+      if (isActivationKey(event.key)) {
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        this.handleSelectionOfRow();
+      }
+    };
+    this.disabled = false;
+    this.selected = false;
+    this.cellCount = undefined;
+    this.rowType = undefined;
+    this.numbered = false;
+    this.positionSection = undefined;
+    this.positionSectionLocalized = undefined;
+    this.positionAll = undefined;
+    this.readCellContentsToAT = undefined;
+    this.scale = undefined;
+    this.selectionMode = "none";
+    this.selectedRowCount = undefined;
+    this.selectedRowCountLocalized = undefined;
+    this.bodyRowCount = undefined;
+    this.effectiveLocale = "";
+  }
+  handleCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  handleDelayedCellChanges() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      requestAnimationFrame(() => this.updateCells());
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    if (this.tableRowEl && this.rowCells.length > 0) {
+      this.updateCells();
+    }
+  }
+  connectedCallback() {
+    connectInteractive(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalTableRowFocusChangeHandler(event) {
+    if (event.target.contains(this.el)) {
+      const position = event.detail.cellPosition;
+      const rowPosition = event.detail.rowPosition;
+      const destination = event.detail.destination;
+      const lastCell = event.detail.lastCell;
+      if (rowPosition === this.positionAll) {
+        if (this.disabled) {
+          const deflectDirection = destination === "last" ? "previous" : destination === "first" ? "next" : destination;
+          this.emitTableRowFocusRequest(position, this.positionAll, deflectDirection);
+          return;
+        }
+        const cellPosition = lastCell
+          ? this.rowCells[this.rowCells.length - 1]
+          : this.rowCells?.find((_, index) => index + 1 === position);
+        if (cellPosition) {
+          cellPosition.setFocus();
+        }
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(event) {
+    const el = event.target;
+    const key = event.key;
+    const isControl = event.ctrlKey;
+    const cells = this.rowCells;
+    if (el.matches("calcite-table-cell") || el.matches("calcite-table-header")) {
+      switch (key) {
+        case "ArrowUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "previous");
+          event.preventDefault();
+          break;
+        case "ArrowDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "next");
+          event.preventDefault();
+          break;
+        case "PageUp":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "first");
+          event.preventDefault();
+          break;
+        case "PageDown":
+          this.emitTableRowFocusRequest(el.positionInRow, this.positionAll, "last");
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+          focusElementInGroup(cells, el, "previous", false);
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+          focusElementInGroup(cells, el, "next", false);
+          event.preventDefault();
+          break;
+        case "Home":
+          if (isControl) {
+            this.emitTableRowFocusRequest(1, this.positionAll, "first");
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "first", false);
+            event.preventDefault();
+          }
+          break;
+        case "End":
+          if (isControl) {
+            this.emitTableRowFocusRequest(this.rowCells?.length, this.positionAll, "last", true);
+            event.preventDefault();
+          }
+          else {
+            focusElementInGroup(cells, el, "last", false);
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  renderSelectionIcon() {
+    const icon = this.selectionMode === "multiple" && this.selected
+      ? "check-square-f"
+      : this.selectionMode === "multiple"
+        ? "square"
+        : this.selected
+          ? "circle-f"
+          : "circle";
+    return h("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" });
+  }
+  renderSelectableCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (h("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
+  }
+  renderNumberedCell() {
+    return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true }, this.positionSectionLocalized)) : (h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true }));
+  }
+  render() {
+    return (h(Host, null, h("tr", { "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, onKeyDown: (event) => this.keyDownHandler(event),
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) }))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "bodyRowCount": ["handleCellChanges"],
+    "scale": ["handleCellChanges"],
+    "selected": ["handleCellChanges"],
+    "selectedRowCount": ["handleCellChanges"],
+    "numbered": ["handleDelayedCellChanges"],
+    "selectionMode": ["handleDelayedCellChanges"]
+  }; }
+};
+TableRow.style = tableRowCss;
+
+export { TableRow as calcite_table_row };