@esri/solutions-components 0.8.6-6.3 → 0.8.6

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

@@ -7,37 +7,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const loadable = require('./loadable-53f1d561.js');
-const t9n = require('./t9n-d347df79.js');
-const interactive = require('./interactive-34bc91a0.js');
-const locale = require('./locale-73a540a5.js');
-const dom = require('./dom-1c78fa73.js');
-const resources = require('./resources-1c0e54c1.js');
-const component = require('./component-d48747c9.js');
-require('./browser-6137dfdf.js');
-require('./key-7ed07912.js');
-require('./observers-a2648fc8.js');
-require('./guid-a7528dfa.js');
+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');
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
 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: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 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 TableCell = class {
     constructor(hostRef) {
@@ -55,11 +52,9 @@ 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;
@@ -138,22 +133,16 @@ const TableCell = class {
     //--------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        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: {
+        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("td", { "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 && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
+                [CSS$1.lastCell]: this.lastCell,
                 [resources.CSS_UTILITY.rtl]: dir === "rtl",
-                [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,
+            }, 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) && (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 })))));
+            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 })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -163,15 +152,14 @@ const TableCell = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TableCell.style = CalciteTableCellStyle0;
+TableCell.style = tableCellCss;
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
 const CSS = {
-    contentCell: "content-cell",
     numberCell: "number-cell",
     selectionCell: "selection-cell",
     bodyRow: "body-row",
@@ -183,31 +171,22 @@ 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;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 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 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;
@@ -219,7 +198,6 @@ const TableHeader = class {
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.defaultMessages = undefined;
-        this.focused = false;
         this.screenReaderText = "";
         this.effectiveLocale = "";
     }
@@ -301,21 +279,17 @@ const TableHeader = class {
                     : "col";
         const allSelected = this.selectedRowCount === this.bodyRowCount;
         const selectionIcon = allSelected ? "check-square-f" : "check-square";
-        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: {
+        return (index.h(index.Host, null, index.h("th", { "aria-colindex": this.parentRowType !== "body" ? this.positionInRow : "", 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.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,
+                [CSS.lastCell]: this.lastCell,
+            }, 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 && 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)))));
+            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)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -326,7 +300,7 @@ const TableHeader = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-TableHeader.style = CalciteTableHeaderStyle0;
+TableHeader.style = tableHeaderCss;
 
 exports.calcite_table_cell = TableCell;
 exports.calcite_table_header = TableHeader;

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

@@ -7,26 +7,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const dom = require('./dom-1c78fa73.js');
-const key = require('./key-7ed07912.js');
-const interactive = require('./interactive-34bc91a0.js');
-const component = require('./component-d48747c9.js');
-require('./guid-a7528dfa.js');
-require('./resources-1c0e54c1.js');
-require('./browser-6137dfdf.js');
+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');
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
 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) {
@@ -34,69 +33,6 @@ 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,
@@ -107,23 +43,16 @@ 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.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.parentRowType = this.rowType;
+                    cell.parentRowIsSelected = this.selected;
                     cell.scale = this.scale;
+                    cell.lastCell = index === cells.length - 1;
                     if (cell.nodeName === "CALCITE-TABLE-CELL") {
                         cell.readCellContentsToAT = this.readCellContentsToAT;
                         cell.disabled = this.disabled;
@@ -145,11 +74,9 @@ 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;
@@ -222,6 +149,66 @@ 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
     //
     //--------------------------------------------------------------------------
@@ -236,17 +223,15 @@ 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, 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 }));
+        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 }));
     }
     renderNumberedCell() {
-        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 }));
+        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 }));
     }
     render() {
-        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,
+        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),
             // 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", { 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) })))));
+            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) })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -254,11 +239,10 @@ const TableRow = class {
         "scale": ["handleCellChanges"],
         "selected": ["handleCellChanges"],
         "selectedRowCount": ["handleCellChanges"],
-        "interactionMode": ["handleCellChanges"],
         "numbered": ["handleDelayedCellChanges"],
         "selectionMode": ["handleDelayedCellChanges"]
     }; }
 };
-TableRow.style = CalciteTableRowStyle0;
+TableRow.style = tableRowCss;
 
 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-696e53e6.js');
-const loadable = require('./loadable-53f1d561.js');
-const t9n = require('./t9n-d347df79.js');
-const locale = require('./locale-73a540a5.js');
-const browser = require('./browser-6137dfdf.js');
-require('./dom-1c78fa73.js');
-require('./guid-a7528dfa.js');
-require('./resources-1c0e54c1.js');
-require('./key-7ed07912.js');
-require('./observers-a2648fc8.js');
+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');
 
 /*!
  * 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.8.2
+ * v2.4.0
  */
 const CSS = {
     bordered: "bordered",
@@ -41,7 +41,6 @@ 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) {
@@ -83,7 +82,6 @@ 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);
@@ -163,7 +161,6 @@ const Table = class {
         this.bordered = false;
         this.caption = undefined;
         this.groupSeparator = false;
-        this.interactionMode = "interactive";
         this.layout = "auto";
         this.numbered = false;
         this.numberingSystem = undefined;
@@ -287,33 +284,26 @@ const Table = class {
             ref: (el) => (this.paginationEl = el) })));
     }
     renderTHead() {
-        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) })));
+        return (index.h("thead", null, index.h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
     }
     renderTBody() {
-        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) })));
+        return (index.h("tbody", null, index.h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
     }
     renderTFoot() {
-        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) })));
+        return (index.h("tfoot", null, index.h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
     }
     render() {
         var _a;
-        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: {
+        return (index.h(index.Host, null, index.h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), index.h("div", { class: {
                 [CSS.bordered]: this.bordered,
                 [CSS.striped]: this.striped || this.zebra,
                 [CSS.tableContainer]: true,
-            } }, 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())));
+            } }, 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())));
     }
     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"],
@@ -323,6 +313,6 @@ const Table = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Table.style = CalciteTableStyle0;
+Table.style = tableCss;
 
 exports.calcite_table = Table;