@esri/solutions-components 0.8.12 → 0.8.13

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

@@ -7,34 +7,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const loadable = require('./loadable-5a794992.js');
-const t9n = require('./t9n-993a84de.js');
-const interactive = require('./interactive-3ab7044d.js');
-const locale = require('./locale-d237c9d5.js');
-const dom = require('./dom-c9c2c835.js');
-const resources = require('./resources-9447c777.js');
-const component = require('./component-ac7c3bd8.js');
-require('./browser-d08a5f99.js');
-require('./key-c5504030.js');
-require('./observers-db4527e4.js');
-require('./guid-ae73cd27.js');
+const index = require('./index-79b35510.js');
+const loadable = require('./loadable-b374ef4b.js');
+const t9n = require('./t9n-9d199056.js');
+const interactive = require('./interactive-f08f0369.js');
+const locale = require('./locale-5efdf085.js');
+const dom = require('./dom-1c78fa73.js');
+const resources = require('./resources-1c0e54c1.js');
+const component = require('./component-d48747c9.js');
+require('./browser-a96d0614.js');
+require('./key-7ed07912.js');
+require('./observers-4fa351d9.js');
+require('./guid-a7528dfa.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS$1 = {
+    contentCell: "content-cell",
     numberCell: "number-cell",
     footerCell: "footer-cell",
     selectionCell: "selection-cell",
     selectedCell: "selected-cell",
     assistiveText: "assistive-text",
     lastCell: "last-cell",
+    staticCell: "static-cell",
 };
 
-const tableCellCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-cell-background:var(--calcite-table-cell-background, 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{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-color-text-1);outline-color:transparent;background:var(--calcite-internal-table-cell-background);font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:1px solid var(--calcite-color-border-3);padding:var(--calcite-internal-table-cell-padding)}td:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}td.last-cell{border-inline-end:0}.number-cell{background-color:var(--calcite-color-foreground-2)}.footer-cell{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-start:1px solid var(--calcite-color-border-3)}.number-cell,.selection-cell{border-inline-end:1px solid var(--calcite-color-border-3);inline-size:2rem;min-inline-size:2rem}.selection-cell{cursor:pointer;color:var(--calcite-color-text-3);inset-inline-start:2rem}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-internal-table-cell-background:var(--calcite-color-foreground-current)}.selection-cell.selected-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-color-brand);color:var(--calcite-color-brand)}.selection-cell.selected-cell calcite-icon{color:var(--calcite-color-brand)}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -0.25rem 0 0 0 var(--calcite-color-brand)}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const tableCellCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-cell-background:var(--calcite-table-cell-background, transparent);display:contents}:host([alignment=center]) td:not(.selection-cell):not(.number-cell){text-align:center}:host([alignment=end]) td:not(.selection-cell):not(.number-cell){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{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-color-text-1);background:var(--calcite-internal-table-cell-background);font-size:var(--calcite-internal-table-cell-font-size);border-inline-end:1px solid var(--calcite-color-border-3);padding:var(--calcite-internal-table-cell-padding)}td:not(.static-cell){outline-color:transparent}td:not(.static-cell):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}td.start.content-cell{vertical-align:top}td.end.content-cell{vertical-align:bottom}td.last-cell{border-inline-end:0}.number-cell{background-color:var(--calcite-color-foreground-2)}.footer-cell{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-start:1px solid var(--calcite-color-border-3)}.number-cell,.selection-cell{text-align:center;border-inline-end:1px solid var(--calcite-color-border-3);inline-size:2rem;min-inline-size:2rem}.selection-cell{color:var(--calcite-color-text-3);inset-inline-start:2rem}.selection-cell:not(.footer-cell){cursor:pointer}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-internal-table-cell-background:var(--calcite-color-foreground-current)}.selection-cell.selected-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-color-brand);color:var(--calcite-color-brand)}.selection-cell.selected-cell calcite-icon{color:var(--calcite-color-brand)}.calcite--rtl.selection-cell.selected-cell{box-shadow:inset -0.25rem 0 0 0 var(--calcite-color-brand)}.selection-cell{vertical-align:middle}.selection-cell ::slotted(calcite-icon){pointer-events:none;margin-block-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const CalciteTableCellStyle0 = tableCellCss;
 
 const TableCell = class {
     constructor(hostRef) {
@@ -52,9 +55,11 @@ const TableCell = class {
         this.colSpan = undefined;
         this.rowSpan = undefined;
         this.disabled = undefined;
+        this.interactionMode = "interactive";
         this.lastCell = undefined;
         this.numberCell = undefined;
         this.parentRowIsSelected = undefined;
+        this.parentRowAlignment = "start";
         this.parentRowPositionLocalized = undefined;
         this.parentRowType = undefined;
         this.positionInRow = undefined;
@@ -133,16 +138,22 @@ const TableCell = class {
     //--------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("td", { "aria-disabled": this.disabled, class: {
+        const staticCell = this.disabled ||
+            (this.interactionMode === "static" &&
+                (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot")));
+        return (index.h(index.Host, { key: '2c8bd5fb8909c57b46499b5fe8a525cdc46bb3c6' }, index.h(interactive.InteractiveContainer, { key: '1a7e4d12f5304274f9085e0f0db4b12ba41d51ed', disabled: this.disabled }, index.h("td", { key: '9a5868a78f21da3c9c0d6be7ecefd28c5e40e5c5', "aria-disabled": this.disabled, class: {
                 [CSS$1.footerCell]: this.parentRowType === "foot",
+                [CSS$1.contentCell]: !this.numberCell && !this.selectionCell,
                 [CSS$1.numberCell]: this.numberCell,
                 [CSS$1.selectionCell]: this.selectionCell,
                 [CSS$1.selectedCell]: this.parentRowIsSelected,
-                [CSS$1.lastCell]: this.lastCell,
+                [CSS$1.lastCell]: this.lastCell && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
                 [resources.CSS_UTILITY.rtl]: dir === "rtl",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "gridcell", rowSpan: this.rowSpan, tabIndex: this.disabled ? -1 : 0,
+                [CSS$1.staticCell]: staticCell,
+                [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end",
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -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 && (index.h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS$1.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), index.h("slot", { onSlotchange: this.updateScreenReaderContentsText })))));
+            ref: (el) => (this.containerEl = el) }, (this.selectionCell || this.readCellContentsToAT) && (index.h("span", { key: '09fb148bff0939488862db0f995643ecd96a0e73', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS$1.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), index.h("slot", { key: '0d74a3e77c1655682e59b38054defa9ebfff8714', onSlotchange: this.updateScreenReaderContentsText })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -152,14 +163,15 @@ const TableCell = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TableCell.style = tableCellCss;
+TableCell.style = CalciteTableCellStyle0;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
+    contentCell: "content-cell",
     numberCell: "number-cell",
     selectionCell: "selection-cell",
     bodyRow: "body-row",
@@ -171,22 +183,31 @@ const CSS = {
     active: "active",
     selectedCell: "selected-cell",
     lastCell: "last-cell",
+    staticCell: "static-cell",
 };
 
-const tableHeaderCss = ":host{--calcite-internal-table-header-background:var(--calcite-table-header-background, var(--calcite-color-foreground-2));--calcite-internal-table-header-border-color:var(--calcite-table-border-color, var(--calcite-color-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{white-space:normal;text-align:start;vertical-align:top;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-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-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}th.last-cell{border-inline-end:0}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-color-text-3)}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-internal-table-header-background:var(--calcite-color-foreground-current)}.number-cell,.selection-cell{color:var(--calcite-color-text-2);inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-color-brand)}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-color-text-1)}.description{color:var(--calcite-color-text-3);font-size:var(--calcite-internal-table-cell-font-size-secondary)}";
+const tableHeaderCss = ":host{--calcite-internal-table-header-background:var(--calcite-table-header-background, var(--calcite-color-foreground-2));--calcite-internal-table-header-border-color:var(--calcite-table-border-color, var(--calcite-color-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{white-space:normal;text-align:start;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);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:not(.static-cell){outline-color:transparent}th:not(.static-cell):not(.static-cell):focus-within{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}th:not(.center):not(.end).content-cell{vertical-align:top}th.center{vertical-align:middle}th.end.content-cell{vertical-align:bottom}th.body-row,th.footer-row{padding-block:var(--calcite-internal-table-cell-padding);border-block-end:0}th.footer-row{border-block-start:1px solid var(--calcite-internal-table-header-border-color)}th.last-cell{border-inline-end:0}.cell--multiple-selection{cursor:pointer;vertical-align:middle;color:var(--calcite-color-text-3)}.cell--multiple-selection:not(.end){vertical-align:middle}.selected-cell:not(.number-cell):not(.footer-cell){--calcite-internal-table-header-background:var(--calcite-color-foreground-current)}.number-cell,.selection-cell{color:var(--calcite-color-text-2);inline-size:2rem;min-inline-size:2rem}.selection-cell calcite-icon.active{color:var(--calcite-color-brand)}.number-cell calcite-icon,.selection-cell calcite-icon{margin-inline-start:auto;margin-inline-end:auto;vertical-align:middle}.heading{color:var(--calcite-color-text-1)}.description{color:var(--calcite-color-text-3);font-size:var(--calcite-internal-table-cell-font-size-secondary)}";
+const CalciteTableHeaderStyle0 = tableHeaderCss;
 
 const TableHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.onContainerBlur = () => {
+            this.focused = false;
+        };
+        this.onContainerFocus = () => {
+            this.focused = true;
+        };
         this.alignment = "start";
         this.colSpan = undefined;
         this.description = undefined;
         this.heading = undefined;
         this.rowSpan = undefined;
+        this.interactionMode = "interactive";
         this.lastCell = undefined;
         this.numberCell = false;
+        this.parentRowAlignment = "start";
         this.parentRowIsSelected = undefined;
-        this.parentRowPosition = undefined;
         this.parentRowType = undefined;
         this.positionInRow = undefined;
         this.scale = undefined;
@@ -198,6 +219,7 @@ const TableHeader = class {
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
+        this.focused = false;
         this.screenReaderText = "";
         this.effectiveLocale = "";
     }
@@ -279,17 +301,21 @@ const TableHeader = class {
                     : "col";
         const allSelected = this.selectedRowCount === this.bodyRowCount;
         const selectionIcon = allSelected ? "check-square-f" : "check-square";
-        return (index.h(index.Host, null, index.h("th", { "aria-colindex": this.parentRowType !== "body" ? this.positionInRow : "", class: {
+        const staticCell = this.interactionMode === "static" && !this.selectionCell;
+        return (index.h(index.Host, { key: '8903d493aaa6fe46c1e7ee00814bc0d409fe05e4' }, index.h("th", { key: 'a8268eb7f5f7e272d9f228ee722ff09d2755fea7', "aria-colindex": this.parentRowType === "head" ? this.positionInRow : undefined, class: {
                 [CSS.bodyRow]: this.parentRowType === "body",
                 [CSS.footerRow]: this.parentRowType === "foot",
+                [CSS.contentCell]: !this.numberCell && !this.selectionCell,
                 [CSS.numberCell]: this.numberCell,
                 [CSS.selectionCell]: this.selectionCell,
                 [CSS.selectedCell]: this.parentRowIsSelected,
                 [CSS.multipleSelectionCell]: this.selectionMode === "multiple",
-                [CSS.lastCell]: this.lastCell,
-            }, colSpan: this.colSpan, role: "columnheader", rowSpan: this.rowSpan, scope: scope, tabIndex: 0,
+                [CSS.staticCell]: staticCell,
+                [CSS.lastCell]: this.lastCell && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
+                [this.parentRowAlignment]: this.parentRowAlignment === "center" || this.parentRowAlignment === "end",
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: this.parentRowType === "head" ? "columnheader" : "rowheader", rowSpan: this.rowSpan, scope: scope, tabIndex: this.selectionCell ? 0 : staticCell ? -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.heading && index.h("div", { class: CSS.heading }, this.heading), this.description && index.h("div", { class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (index.h("calcite-icon", { class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: component.getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (index.h("span", { "aria-hidden": true, "aria-live": "polite", class: CSS.assistiveText }, this.screenReaderText)))));
+            ref: (el) => (this.containerEl = el) }, this.heading && index.h("div", { key: '171a02cb89d9db736a4dda50b643e413e4de3828', class: CSS.heading }, this.heading), this.description && index.h("div", { key: '29fbf42a560ddcce82713de3003a70b67fd0c596', class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (index.h("calcite-icon", { key: '232d1ac6051ad58768b94c5813e96357088b4c4a', class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: component.getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (index.h("span", { key: 'f91e4e2de889f0c8397006470adb8b330d9c50d4', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.screenReaderText)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -300,7 +326,7 @@ const TableHeader = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TableHeader.style = tableHeaderCss;
+TableHeader.style = CalciteTableHeaderStyle0;
 
 exports.calcite_table_cell = TableCell;
 exports.calcite_table_header = TableHeader;

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

@@ -7,25 +7,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const dom = require('./dom-c9c2c835.js');
-const key = require('./key-c5504030.js');
-const interactive = require('./interactive-3ab7044d.js');
-const component = require('./component-ac7c3bd8.js');
-require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./browser-d08a5f99.js');
+const index = require('./index-79b35510.js');
+const dom = require('./dom-1c78fa73.js');
+const key = require('./key-7ed07912.js');
+const interactive = require('./interactive-f08f0369.js');
+const component = require('./component-d48747c9.js');
+require('./guid-a7528dfa.js');
+require('./resources-1c0e54c1.js');
+require('./browser-a96d0614.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     lastVisibleRow: "last-visible-row",
 };
 
 const tableRowCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-internal-table-row-background:var(--calcite-table-row-background, var(--calcite-color-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-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}tr{border-block-end:1px solid var(--calcite-internal-table-row-border-color);background-color:var(--calcite-internal-table-row-background)}tr.last-visible-row{border-block-end:0}";
+const CalciteTableRowStyle0 = tableRowCss;
 
 const TableRow = class {
     constructor(hostRef) {
@@ -33,6 +34,69 @@ const TableRow = class {
         this.calciteTableRowSelect = index.createEvent(this, "calciteTableRowSelect", 6);
         this.calciteInternalTableRowFocusRequest = index.createEvent(this, "calciteInternalTableRowFocusRequest", 6);
         this.rowCells = [];
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.keyDownHandler = (event) => {
+            var _a;
+            if (this.interactionMode !== "interactive") {
+                return;
+            }
+            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":
+                        dom.focusElementInGroup(cells, el, "previous", false);
+                        event.preventDefault();
+                        break;
+                    case "ArrowRight":
+                        dom.focusElementInGroup(cells, el, "next", false);
+                        event.preventDefault();
+                        break;
+                    case "Home":
+                        if (isControl) {
+                            this.emitTableRowFocusRequest(1, this.positionAll, "first");
+                            event.preventDefault();
+                        }
+                        else {
+                            dom.focusElementInGroup(cells, el, "first", false);
+                            event.preventDefault();
+                        }
+                        break;
+                    case "End":
+                        if (isControl) {
+                            this.emitTableRowFocusRequest((_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.length, this.positionAll, "last", true);
+                            event.preventDefault();
+                        }
+                        else {
+                            dom.focusElementInGroup(cells, el, "last", false);
+                            event.preventDefault();
+                        }
+                        break;
+                }
+            }
+        };
         this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
             this.calciteInternalTableRowFocusRequest.emit({
                 cellPosition,
@@ -43,16 +107,23 @@ const TableRow = class {
         };
         this.updateCells = () => {
             var _a, _b, _c, _d;
+            const alignment = this.alignment
+                ? this.alignment
+                : this.rowType !== "head"
+                    ? "center"
+                    : "start";
             const slottedCells = (_b = (_a = this.tableRowSlotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true })) === null || _b === void 0 ? void 0 : _b.filter((el) => el.matches("calcite-table-cell") || el.matches("calcite-table-header"));
             const renderedCells = (_d = Array.from((_c = this.tableRowEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll("calcite-table-header, calcite-table-cell"))) === null || _d === void 0 ? void 0 : _d.filter((el) => el.numberCell || el.selectionCell);
             const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
             if (cells.length > 0) {
                 cells === null || cells === void 0 ? void 0 : cells.forEach((cell, index) => {
-                    cell.positionInRow = index + 1;
-                    cell.parentRowType = this.rowType;
+                    cell.interactionMode = this.interactionMode;
+                    cell.lastCell = index === cells.length - 1;
+                    cell.parentRowAlignment = alignment;
                     cell.parentRowIsSelected = this.selected;
+                    cell.parentRowType = this.rowType;
+                    cell.positionInRow = index + 1;
                     cell.scale = this.scale;
-                    cell.lastCell = index === cells.length - 1;
                     if (cell.nodeName === "CALCITE-TABLE-CELL") {
                         cell.readCellContentsToAT = this.readCellContentsToAT;
                         cell.disabled = this.disabled;
@@ -74,9 +145,11 @@ const TableRow = class {
                 this.handleSelectionOfRow();
             }
         };
+        this.alignment = undefined;
         this.disabled = false;
         this.selected = false;
         this.cellCount = undefined;
+        this.interactionMode = "interactive";
         this.lastVisibleRow = undefined;
         this.rowType = undefined;
         this.numbered = false;
@@ -149,66 +222,6 @@ const TableRow = class {
     }
     //--------------------------------------------------------------------------
     //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    keyDownHandler(event) {
-        var _a;
-        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":
-                    dom.focusElementInGroup(cells, el, "previous", false);
-                    event.preventDefault();
-                    break;
-                case "ArrowRight":
-                    dom.focusElementInGroup(cells, el, "next", false);
-                    event.preventDefault();
-                    break;
-                case "Home":
-                    if (isControl) {
-                        this.emitTableRowFocusRequest(1, this.positionAll, "first");
-                        event.preventDefault();
-                    }
-                    else {
-                        dom.focusElementInGroup(cells, el, "first", false);
-                        event.preventDefault();
-                    }
-                    break;
-                case "End":
-                    if (isControl) {
-                        this.emitTableRowFocusRequest((_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.length, this.positionAll, "last", true);
-                        event.preventDefault();
-                    }
-                    else {
-                        dom.focusElementInGroup(cells, el, "last", false);
-                        event.preventDefault();
-                    }
-                    break;
-            }
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
     //  Render Methods
     //
     //--------------------------------------------------------------------------
@@ -223,15 +236,17 @@ const TableRow = class {
         return index.h("calcite-icon", { icon: icon, scale: component.getIconScale(this.scale) });
     }
     renderSelectableCell() {
-        return this.rowType === "head" ? (index.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" ? (index.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())) : (index.h("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
+        return this.rowType === "head" ? (index.h("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, parentRowAlignment: this.alignment, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (index.h("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowAlignment: this.alignment, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (index.h("calcite-table-cell", { alignment: "center", key: "selection-foot", parentRowAlignment: this.alignment, selectionCell: true }));
     }
     renderNumberedCell() {
-        return this.rowType === "head" ? (index.h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true })) : this.rowType === "body" ? (index.h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true }, this.positionSectionLocalized)) : (index.h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true }));
+        return this.rowType === "head" ? (index.h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true, parentRowAlignment: this.alignment })) : this.rowType === "body" ? (index.h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true, parentRowAlignment: this.alignment }, this.positionSectionLocalized)) : (index.h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true, parentRowAlignment: this.alignment }));
     }
     render() {
-        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("tr", { "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, class: { [CSS.lastVisibleRow]: this.lastVisibleRow }, onKeyDown: (event) => this.keyDownHandler(event),
+        return (index.h(index.Host, { key: '1d51f5351ce604d34d7b5a8c6ff241d1f1bb7121' }, index.h(interactive.InteractiveContainer, { key: '67d835df1a6a91ebddd1742f76bdf45407bce5e5', disabled: this.disabled }, index.h("tr", { key: 'b490313209717e71bb18e277d6795895e7f60a25', "aria-disabled": this.disabled, "aria-rowindex": this.positionAll + 1, "aria-selected": this.selected, class: { [CSS.lastVisibleRow]: this.lastVisibleRow }, onKeyDown: this.keyDownHandler,
             // 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(), index.h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) })))));
+            ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), index.h("slot", { key: 'ca447805a4b4a807ee113fd438fca4fe95a6b6c6', onSlotchange: this.updateCells,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.tableRowSlotEl = el) })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -239,10 +254,11 @@ const TableRow = class {
         "scale": ["handleCellChanges"],
         "selected": ["handleCellChanges"],
         "selectedRowCount": ["handleCellChanges"],
+        "interactionMode": ["handleCellChanges"],
         "numbered": ["handleDelayedCellChanges"],
         "selectionMode": ["handleDelayedCellChanges"]
     }; }
 };
-TableRow.style = tableRowCss;
+TableRow.style = CalciteTableRowStyle0;
 
 exports.calcite_table_row = TableRow;

package/dist/cjs/calcite-table.cjs.entry.js

@@ -7,21 +7,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const loadable = require('./loadable-5a794992.js');
-const t9n = require('./t9n-993a84de.js');
-const locale = require('./locale-d237c9d5.js');
-const browser = require('./browser-d08a5f99.js');
-require('./dom-c9c2c835.js');
-require('./guid-ae73cd27.js');
-require('./resources-9447c777.js');
-require('./key-c5504030.js');
-require('./observers-db4527e4.js');
+const index = require('./index-79b35510.js');
+const loadable = require('./loadable-b374ef4b.js');
+const t9n = require('./t9n-9d199056.js');
+const locale = require('./locale-5efdf085.js');
+const browser = require('./browser-a96d0614.js');
+require('./dom-1c78fa73.js');
+require('./guid-a7528dfa.js');
+require('./resources-1c0e54c1.js');
+require('./key-7ed07912.js');
+require('./observers-4fa351d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     bordered: "bordered",
@@ -41,6 +41,7 @@ const SLOTS = {
 };
 
 const tableCss = ":host([scale=s]){--calcite-internal-table-cell-padding:0.25rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding:0.5rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--2)}:host([scale=l]){--calcite-internal-table-cell-padding:1rem;--calcite-internal-table-cell-font-size:var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary:var(--calcite-font-size--1)}:host{display:flex}.container{display:flex;block-size:100%;inline-size:100%;flex-direction:column}.table-container{overflow:auto;white-space:nowrap;border:1px solid var(--calcite-color-border-3)}.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}table{inline-size:100%;border-collapse:collapse;overflow-x:scroll}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color:var(--calcite-color-border-3)}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background:var(--calcite-color-foreground-2)}.selection-actions{display:flex;flex-direction:row;margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:0.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:0.5rem}.selection-area calcite-button{margin-inline-end:1rem}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteTableStyle0 = tableCss;
 
 const Table = class {
     constructor(hostRef) {
@@ -82,6 +83,7 @@ const Table = class {
                 row.positionSectionLocalized = this.localizeNumber((position + 1).toString());
             });
             allRows === null || allRows === void 0 ? void 0 : allRows.forEach((row) => {
+                row.interactionMode = this.interactionMode;
                 row.selectionMode = this.selectionMode;
                 row.bodyRowCount = bodyRows === null || bodyRows === void 0 ? void 0 : bodyRows.length;
                 row.positionAll = allRows === null || allRows === void 0 ? void 0 : allRows.indexOf(row);
@@ -161,6 +163,7 @@ const Table = class {
         this.bordered = false;
         this.caption = undefined;
         this.groupSeparator = false;
+        this.interactionMode = "interactive";
         this.layout = "auto";
         this.numbered = false;
         this.numberingSystem = undefined;
@@ -284,26 +287,33 @@ const Table = class {
             ref: (el) => (this.paginationEl = el) })));
     }
     renderTHead() {
-        return (index.h("thead", null, index.h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+        return (index.h("thead", null, index.h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.tableHeadSlotEl = el) })));
     }
     renderTBody() {
-        return (index.h("tbody", null, index.h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+        return (index.h("tbody", null, index.h("slot", { onSlotchange: this.updateRows,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.tableBodySlotEl = el) })));
     }
     renderTFoot() {
-        return (index.h("tfoot", null, index.h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+        return (index.h("tfoot", null, index.h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.tableFootSlotEl = el) })));
     }
     render() {
         var _a;
-        return (index.h(index.Host, null, index.h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), index.h("div", { class: {
+        return (index.h(index.Host, { key: 'ef7ccc8c38ffa6a1f2168194360d210d95c93586' }, index.h("div", { key: '5e6c5971b1175ea268c863b394295024d27b30da', class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), index.h("div", { key: '668438589e52c53f20d9a9c97fd732bb5a423175', class: {
                 [CSS.bordered]: this.bordered,
                 [CSS.striped]: this.striped || this.zebra,
                 [CSS.tableContainer]: true,
-            } }, index.h("table", { "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-readonly": true, "aria-rowcount": (_a = this.allRows) === null || _a === void 0 ? void 0 : _a.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: "grid" }, index.h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+            } }, index.h("table", { key: 'c8b35b353d207b4eab3a973a242e38c67642bba3', "aria-colcount": this.colCount, "aria-multiselectable": this.selectionMode === "multiple", "aria-rowcount": (_a = this.allRows) === null || _a === void 0 ? void 0 : _a.length, class: { [CSS.tableFixed]: this.layout === "fixed" }, role: this.interactionMode === "interactive" ? "grid" : "table" }, index.h("caption", { key: '1f5b24d93dc5a715f946e38e3dde002b7ba614ff', class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "groupSeparator": ["handleNumberedChange"],
+        "interactionMode": ["handleNumberedChange"],
         "numbered": ["handleNumberedChange"],
         "numberingSystem": ["handleNumberedChange"],
         "pageSize": ["handleNumberedChange"],
@@ -313,6 +323,6 @@ const Table = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Table.style = tableCss;
+Table.style = CalciteTableStyle0;
 
 exports.calcite_table = Table;