@esri/solutions-components 0.8.12 → 0.8.13

package/dist/components/calcite-stepper.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host, readTask } from '@stencil/core/internal/client';
-import { h as slotChangeGetAssignedElements, w as focusElementInGroup } from './dom.js';
+import { h as slotChangeGetAssignedElements, x as focusElementInGroup } from './dom.js';
 import { c as createObserver } from './observers.js';
 import { g as guid } from './guid.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
@@ -16,9 +16,23 @@ import { d as defineCustomElement$2 } from './loader.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 = {
+    actionIcon: "action-icon",
+    actionIconStart: "action-icon--start",
+    actionIconEnd: "action-icon--end",
+    actionContainer: "action-container",
+    stepBarContainer: "step-bar-container",
+    singleView: "single-view",
+};
+
+/*!
+ * 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
+ */
+const CSS = {
     stepBar: "step-bar",
     stepBarActive: "step-bar--active",
     stepBarComplete: "step-bar--complete",
@@ -27,35 +41,17 @@ const CSS$1 = {
     stepBarInActive: "step-bar--inactive",
 };
 const StepBar = ({ disabled, active, complete, error, key, }) => (h("svg", { class: {
-        [CSS$1.stepBar]: true,
+        [CSS.stepBar]: true,
     }, key: key }, h("rect", { class: {
-        [CSS$1.stepBarActive]: active,
-        [CSS$1.stepBarComplete]: complete,
-        [CSS$1.stepBarDisabled]: disabled,
-        [CSS$1.stepBarError]: error,
-        [CSS$1.stepBarInActive]: true,
+        [CSS.stepBarActive]: active,
+        [CSS.stepBarComplete]: complete,
+        [CSS.stepBarDisabled]: disabled,
+        [CSS.stepBarError]: error,
+        [CSS.stepBarInActive]: true,
     }, width: "100%", x: "0", y: "0" })));
 
-/*!
- * 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
- */
-const ITEM_MIN_WIDTH = {
-    s: 120,
-    m: 180,
-    l: 200,
-};
-const CSS = {
-    actionIcon: "action-icon",
-    actionIconStart: "action-icon--start",
-    actionIconEnd: "action-icon--end",
-    actionContainer: "action-container",
-    stepBarContainer: "step-bar-container",
-    singleView: "single-view",
-};
-
-const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
+const stepperCss = ":host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s:0.25rem;--calcite-internal-stepper-action-block-size:2.75rem;--calcite-internal-stepper-action-inline-size:2rem;--calcite-internal-step-bar-gap:0.25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s:0.5rem;--calcite-internal-stepper-action-block-size:3.25rem;--calcite-internal-stepper-action-inline-size:2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s:0.75rem;--calcite-internal-stepper-action-block-size:4rem;--calcite-internal-stepper-action-inline-size:3rem;--calcite-internal-step-bar-gap:0.75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:\"items\" \"content\";gap:0.5rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:0.25rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:0.75rem var(--calcite-internal-stepper-item-spacing-unit-s)}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:0.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:0.125rem;inline-size:100%;gap:var(--calcite-internal-step-bar-gap, 0.5rem)}.step-bar--inactive{fill:var(--calcite-color-border-3, #dfdfdf);fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-color-brand)}.step-bar--complete{fill:var(--calcite-color-brand);fill-opacity:0.5}.step-bar--error{fill:var(--calcite-color-status-danger)}.step-bar--disabled{opacity:0.5}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteStepperStyle0 = stepperCss;
 
 const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLElement {
     constructor() {
@@ -71,12 +67,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         /** Specifies if the user is viewing one `stepper-item` at a time when the page width is less than sum of min-width of each item. */
         this.multipleViewMode = false;
         this.guid = `calcite-stepper-action-${guid()}`;
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
-        this.resizeObserver = createObserver("resize", (entries) => (this.elWidth = entries[0].contentRect.width));
         this.handleActionClick = (event) => {
             const currentActivePosition = this.currentActivePosition;
             const target = event.target;
@@ -98,7 +88,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.handleDefaultSlotChange = (event) => {
             const items = slotChangeGetAssignedElements(event).filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
             this.items = items;
-            this.setGridTemplateColumns(items);
+            const spacing = Array(items.length).fill("1fr").join(" ");
+            this.containerEl.style.gridTemplateAreas = spacing;
+            this.containerEl.style.gridTemplateColumns = spacing;
             this.setStepperItemNumberingSystem();
         };
         this.icon = false;
@@ -112,10 +104,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
         this.currentActivePosition = undefined;
-        this.elWidth = undefined;
     }
     handleItemPropChange() {
         this.updateItems();
+        this.determineActiveStepper();
     }
     numberingSystemChange() {
         this.setStepperItemNumberingSystem();
@@ -139,8 +131,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         await setUpMessages(this);
     }
     componentDidLoad() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.containerEl);
         // if no stepper items are set as active, default to the first one
         if (typeof this.currentActivePosition !== "number") {
             const enabledStepIndex = this.getFirstEnabledStepperPosition();
@@ -153,14 +143,15 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         }
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        var _a;
         disconnectMessages(this);
         disconnectLocalized(this);
-        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { "aria-label": this.messages.label, role: "region" }, h("div", { class: { container: true, [CSS.singleView]: !this.multipleViewMode }, ref: this.setContainerEl }, !this.multipleViewMode && this.layout === "horizontal" && (h("div", { class: { [CSS.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), h("div", { class: { [CSS.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end")), h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        return (h(Host, { key: '00695fed43575595fcca8adac07588de79f14170', "aria-label": this.messages.label, role: "region" }, h("div", { key: '3b06715dc1220048bdab4743e783fb28a8da001e', class: { container: true, [CSS$1.singleView]: this.layout === "horizontal-single" },
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: this.setContainerEl }, this.layout === "horizontal-single" && (h("div", { key: 'd14afc0d2ae03ea603a5c3a05157825f3dcbcc43', class: { [CSS$1.stepBarContainer]: true } }, this.items.map((item, index) => (h(StepBar, { active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition, key: index }))))), this.layout === "horizontal-single" && (h("div", { key: 'a83ca9efc86407ab66d895027ff3a6b9d4ab698f', class: { [CSS$1.actionContainer]: true } }, this.renderAction("start"), this.renderAction("end"))), h("slot", { key: '104b16d7e23e4ec0977d2934906ea83ffcd7f4cc', onSlotchange: this.handleDefaultSlotChange }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -260,15 +251,15 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         updateMessages(this, this.effectiveLocale);
     }
     handlePositionChange() {
-        readTask(() => {
-            this.determineActiveStepper(true);
-        });
-    }
-    handleElWidthChange() {
         readTask(() => {
             this.determineActiveStepper();
         });
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
     updateItems() {
         this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
             item.icon = this.icon;
@@ -277,43 +268,22 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
             item.scale = this.scale;
         });
     }
-    determineActiveStepper(currentActivePositionChanged = false) {
-        const totalItems = this.items.length;
-        if (!this.elWidth || !totalItems || this.layout !== "horizontal" || totalItems === 1) {
+    determineActiveStepper() {
+        const { items } = this;
+        if (items.length < 2) {
             return;
         }
-        const activePosition = this.currentActivePosition || 0;
-        const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();
-        const totalRowGap = (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);
-        if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {
-            this.multipleViewMode = false;
-            this.items.forEach((item, index) => {
-                if (index !== activePosition) {
-                    item.hidden = true;
-                }
-                else {
-                    item.hidden = false;
-                    item.multipleViewMode = false;
-                }
-            });
-        }
-        else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {
-            if (this.multipleViewMode && !currentActivePositionChanged) {
-                return;
-            }
-            this.multipleViewMode = true;
-            this.setGridTemplateColumns(this.items);
-            this.items.forEach((item) => {
-                item.hidden = false;
-                item.multipleViewMode = true;
-            });
-        }
+        const { currentActivePosition, layout } = this;
+        this.multipleViewMode = layout !== "horizontal-single";
+        items.forEach((item, index) => {
+            item.hidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
+        });
     }
     getEnabledStepIndex(startIndex, direction = "next") {
         var _a;
         const { items, currentActivePosition } = this;
         let newIndex = startIndex;
-        while (((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && this.multipleViewMode) {
+        while (((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && this.layout !== "horizontal-single") {
             newIndex = newIndex + (direction === "previous" ? -1 : 1);
         }
         return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0
@@ -340,8 +310,8 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         const { currentActivePosition, multipleViewMode, layout } = this;
         const totalItems = this.items.length;
         const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
-        return layout === "horizontal" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
-                [CSS.actionIcon]: true,
+        return layout === "horizontal-single" && !multipleViewMode ? (h("calcite-action", { alignment: "center", appearance: "transparent", class: {
+                [CSS$1.actionIcon]: true,
             }, compact: true, "data-position": position, disabled: (currentActivePosition === 0 && isPositionStart) ||
                 (currentActivePosition === totalItems - 1 && !isPositionStart), icon: path, iconFlipRtl: true, id: id, onClick: this.handleActionClick, scale: this.scale, text: isPositionStart ? this.messages.previousStep : this.messages.nextStep })) : null;
     }
@@ -352,15 +322,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         }
         return 0;
     }
-    setGridTemplateColumns(items) {
-        const minWidth = this.getMinWidthOfStepperItem();
-        const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(" ");
-        this.containerEl.style.gridTemplateAreas = spacing;
-        this.containerEl.style.gridTemplateColumns = spacing;
-    }
-    getMinWidthOfStepperItem() {
-        return ITEM_MIN_WIDTH[this.scale];
-    }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
@@ -371,10 +332,9 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         "numberingSystem": ["numberingSystemChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"],
-        "currentActivePosition": ["handlePositionChange"],
-        "elWidth": ["handleElWidthChange"]
+        "currentActivePosition": ["handlePositionChange"]
     }; }
-    static get style() { return stepperCss; }
+    static get style() { return CalciteStepperStyle0; }
 }, [1, "calcite-stepper", {
         "icon": [516],
         "layout": [513],
@@ -387,7 +347,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         "defaultMessages": [32],
         "effectiveLocale": [32],
         "currentActivePosition": [32],
-        "elWidth": [32],
         "nextStep": [64],
         "prevStep": [64],
         "goToStep": [64],
@@ -401,8 +360,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         "numberingSystem": ["numberingSystemChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"],
-        "currentActivePosition": ["handlePositionChange"],
-        "elWidth": ["handleElWidthChange"]
+        "currentActivePosition": ["handlePositionChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/calcite-table-row.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { w as focusElementInGroup } from './dom.js';
+import { x as focusElementInGroup } from './dom.js';
 import { i as isActivationKey } from './key.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { g as getIconScale } from './component.js';
@@ -15,13 +15,14 @@ import { d as defineCustomElement$2 } from './table-header.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 = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLElement {
     constructor() {
@@ -31,6 +32,69 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         this.calciteTableRowSelect = createEvent(this, "calciteTableRowSelect", 6);
         this.calciteInternalTableRowFocusRequest = 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":
+                        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((_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.length, this.positionAll, "last", true);
+                            event.preventDefault();
+                        }
+                        else {
+                            focusElementInGroup(cells, el, "last", false);
+                            event.preventDefault();
+                        }
+                        break;
+                }
+            }
+        };
         this.emitTableRowFocusRequest = (cellPosition, rowPosition, destination, lastCell) => {
             this.calciteInternalTableRowFocusRequest.emit({
                 cellPosition,
@@ -41,16 +105,23 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         };
         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;
@@ -72,9 +143,11 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
                 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;
@@ -147,66 +220,6 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
     }
     //--------------------------------------------------------------------------
     //
-    //  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":
-                    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((_a = this.rowCells) === null || _a === void 0 ? void 0 : _a.length, this.positionAll, "last", true);
-                        event.preventDefault();
-                    }
-                    else {
-                        focusElementInGroup(cells, el, "last", false);
-                        event.preventDefault();
-                    }
-                    break;
-            }
-        }
-    }
-    //--------------------------------------------------------------------------
-    //
     //  Render Methods
     //
     //--------------------------------------------------------------------------
@@ -221,15 +234,17 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         return h("calcite-icon", { icon: icon, scale: getIconScale(this.scale) });
     }
     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 }));
+        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, parentRowAlignment: this.alignment, 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, parentRowAlignment: this.alignment, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (h("calcite-table-cell", { alignment: "center", key: "selection-foot", parentRowAlignment: this.alignment, 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 }));
+        return this.rowType === "head" ? (h("calcite-table-header", { alignment: "center", key: "numbered-head", numberCell: true, parentRowAlignment: this.alignment })) : this.rowType === "body" ? (h("calcite-table-cell", { alignment: "center", key: "numbered-body", numberCell: true, parentRowAlignment: this.alignment }, this.positionSectionLocalized)) : (h("calcite-table-cell", { alignment: "center", key: "numbered-foot", numberCell: true, parentRowAlignment: this.alignment }));
     }
     render() {
-        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, 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 (h(Host, { key: '1d51f5351ce604d34d7b5a8c6ff241d1f1bb7121' }, h(InteractiveContainer, { key: '67d835df1a6a91ebddd1742f76bdf45407bce5e5', disabled: this.disabled }, 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(), h("slot", { onSlotchange: this.updateCells, ref: (el) => (this.tableRowSlotEl = el) })))));
+            ref: (el) => (this.tableRowEl = el) }, this.numbered && this.renderNumberedCell(), this.selectionMode !== "none" && this.renderSelectableCell(), 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 this; }
     static get watchers() { return {
@@ -237,14 +252,17 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         "scale": ["handleCellChanges"],
         "selected": ["handleCellChanges"],
         "selectedRowCount": ["handleCellChanges"],
+        "interactionMode": ["handleCellChanges"],
         "numbered": ["handleDelayedCellChanges"],
         "selectionMode": ["handleDelayedCellChanges"]
     }; }
-    static get style() { return tableRowCss; }
+    static get style() { return CalciteTableRowStyle0; }
 }, [1, "calcite-table-row", {
+        "alignment": [513],
         "disabled": [516],
         "selected": [516],
         "cellCount": [1026, "cell-count"],
+        "interactionMode": [1, "interaction-mode"],
         "lastVisibleRow": [4, "last-visible-row"],
         "rowType": [1, "row-type"],
         "numbered": [4],
@@ -263,6 +281,7 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         "scale": ["handleCellChanges"],
         "selected": ["handleCellChanges"],
         "selectedRowCount": ["handleCellChanges"],
+        "interactionMode": ["handleCellChanges"],
         "numbered": ["handleDelayedCellChanges"],
         "selectionMode": ["handleDelayedCellChanges"]
     }]);

package/dist/components/calcite-table.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$2 } from './pagination.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",
@@ -37,6 +37,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 = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
     constructor() {
@@ -80,6 +81,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
                 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);
@@ -159,6 +161,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         this.bordered = false;
         this.caption = undefined;
         this.groupSeparator = false;
+        this.interactionMode = "interactive";
         this.layout = "auto";
         this.numbered = false;
         this.numberingSystem = undefined;
@@ -282,26 +285,33 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
             ref: (el) => (this.paginationEl = el) })));
     }
     renderTHead() {
-        return (h("thead", null, h("slot", { name: SLOTS.tableHeader, onSlotchange: this.updateRows, ref: (el) => (this.tableHeadSlotEl = el) })));
+        return (h("thead", null, 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 (h("tbody", null, h("slot", { onSlotchange: this.updateRows, ref: (el) => (this.tableBodySlotEl = el) })));
+        return (h("tbody", null, 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 (h("tfoot", null, h("slot", { name: SLOTS.tableFooter, onSlotchange: this.updateRows, ref: (el) => (this.tableFootSlotEl = el) })));
+        return (h("tfoot", null, 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 (h(Host, null, h("div", { class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), h("div", { class: {
+        return (h(Host, { key: 'ef7ccc8c38ffa6a1f2168194360d210d95c93586' }, h("div", { key: '5e6c5971b1175ea268c863b394295024d27b30da', class: CSS.container }, this.selectionMode !== "none" && this.renderSelectionArea(), h("div", { key: '668438589e52c53f20d9a9c97fd732bb5a423175', class: {
                 [CSS.bordered]: this.bordered,
                 [CSS.striped]: this.striped || this.zebra,
                 [CSS.tableContainer]: true,
-            } }, 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" }, h("caption", { class: CSS.assistiveText }, this.caption), this.renderTHead(), this.renderTBody(), this.renderTFoot())), this.pageSize > 0 && this.renderPaginationArea())));
+            } }, 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" }, 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 this; }
     static get watchers() { return {
         "groupSeparator": ["handleNumberedChange"],
+        "interactionMode": ["handleNumberedChange"],
         "numbered": ["handleNumberedChange"],
         "numberingSystem": ["handleNumberedChange"],
         "pageSize": ["handleNumberedChange"],
@@ -310,11 +320,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return tableCss; }
+    static get style() { return CalciteTableStyle0; }
 }, [1, "calcite-table", {
         "bordered": [516],
         "caption": [1],
         "groupSeparator": [516, "group-separator"],
+        "interactionMode": [513, "interaction-mode"],
         "layout": [513],
         "numbered": [516],
         "numberingSystem": [513, "numbering-system"],
@@ -334,6 +345,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         "effectiveLocale": [32]
     }, [[0, "calciteTableRowSelect", "calciteChipSelectListener"], [0, "calciteInternalTableRowFocusRequest", "calciteInternalTableRowFocusEvent"]], {
         "groupSeparator": ["handleNumberedChange"],
+        "interactionMode": ["handleNumberedChange"],
         "numbered": ["handleNumberedChange"],
         "numberingSystem": ["handleNumberedChange"],
         "pageSize": ["handleNumberedChange"],