@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.3

package/dist/components/calcite-action-group/customElement.js

@@ -6,6 +6,7 @@ import { queryAssignedElements } from "lit/decorators.js";
 import { S as SLOTS } from "../../chunks/resources2.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { i as isAction } from "../../chunks/resources.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources3.js";
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-group-gap: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm-plus)}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0;gap:var(--calcite-internal-action-group-gap)}.container{display:flex;flex-grow:1;flex-direction:column;gap:inherit}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;gap:var(--calcite-action-group-gap, var(--calcite-internal-action-group-gap));grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -31,12 +32,14 @@ class ActionGroup extends LitElement {
     this.scale = "m";
     this.selectionMode = "none";
     this.topLayerDisabled = false;
+    this.selectedActions = [];
     this.calciteActionGroupCollapse = createEvent({ cancelable: false });
     this.calciteActionGroupExpand = createEvent({ cancelable: false });
+    this.calciteActionGroupChange = createEvent({ cancelable: false });
     this.listen("click", this.handleActionClick);
   }
   static {
-    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], selectedActions: [0, {}, { attribute: false }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -54,6 +57,13 @@ class ActionGroup extends LitElement {
       } else if (this.selectionMode === "none") {
         this.clearActionAriaAttributes();
       }
+      if (this.selectionMode === "single" || this.selectionMode === "single-persist") {
+        const selected = this.actions?.filter((action) => action.active) ?? [];
+        if (selected.length > 1) {
+          this.actions.forEach((action) => this.updateAction(action, action === selected[selected.length - 1]));
+        }
+      }
+      this.updateSelectedActions(this.selectionMode === "none" ? [] : this.actions?.filter((action) => action.active) ?? []);
     }
     if (changes.has("expanded")) {
       if (this.hasUpdated || this.expanded !== false) {
@@ -70,23 +80,24 @@ class ActionGroup extends LitElement {
   }
   setActiveAction(index, active) {
     if (this.selectionMode === "multiple") {
-      active.active = !active.active;
-      this.setActionAriaChecked(active, active.active);
+      const nextActive = !active.active;
+      this.updateAction(active, nextActive);
+      this.updateSelectedActions(this.actions.filter((action) => action.active));
+      this.calciteActionGroupChange.emit();
       return;
     }
     if (this.selectionMode === "single") {
-      this.actions.forEach((action, i) => {
-        action.active = i === index && !action.active;
-        this.setActionAriaChecked(action, action.active);
-      });
+      const nextActive = !active.active;
+      this.actions.forEach((action, i) => this.updateAction(action, i === index && nextActive));
+      this.updateSelectedActions(this.actions.filter((action) => action.active));
+      this.calciteActionGroupChange.emit();
       return;
     }
     if (this.selectionMode === "single-persist") {
       if (!this.actions[index].active) {
-        this.actions.forEach((action, i) => {
-          action.active = i === index;
-          this.setActionAriaChecked(action, action.active);
-        });
+        this.actions.forEach((action, i) => this.updateAction(action, i === index));
+        this.updateSelectedActions([active]);
+        this.calciteActionGroupChange.emit();
       }
       return;
     }
@@ -98,8 +109,8 @@ class ActionGroup extends LitElement {
     this.hasMenuActions = slotChangeHasAssignedElement(event);
   }
   handleActionClick(event) {
-    const target = event.target;
-    if (!target) {
+    const target = event.composedPath().find((element) => isAction(element));
+    if (!target || target.disabled) {
       return;
     }
     const index = this.actions.indexOf(target);
@@ -134,6 +145,20 @@ class ActionGroup extends LitElement {
       });
     }
   }
+  updateAction(action, isActive) {
+    action.active = isActive;
+    this.setActionAriaChecked(action, isActive);
+  }
+  updateSelectedActions(nextSelected) {
+    const currentSelected = this.selectedActions;
+    if (currentSelected.length === nextSelected.length) {
+      const matches = currentSelected.every((action, index) => action === nextSelected[index]);
+      if (matches) {
+        return;
+      }
+    }
+    this.selectedActions = nextSelected;
+  }
   renderMenu() {
     const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions, menuFlipPlacements, menuPlacement } = this;
     return html`<calcite-action-menu .expanded=${expanded} .flipPlacements=${menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!hasMenuActions} .label=${messages.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${menuOpen} .overlayPositioning=${overlayPositioning} .placement=${menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action .aria=${{ expanded }} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;

package/dist/components/calcite-combobox/customElement.d.ts

@@ -61,7 +61,7 @@ export abstract class Combobox extends LitElement {
   /** Specifies the component's label text. */
   accessor labelText: string;
   /**
-   * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
+   * Specifies the maximum number of `calcite-combobox-item-group`s & `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
    *
    * @default 0
    */

package/dist/components/calcite-combobox/customElement.js

@@ -715,7 +715,7 @@ class Combobox extends LitElement {
     }
   }
   getMaxScrollerHeight() {
-    const allItemsAndGroups = [...this.groupItems, ...this.getItems(true)];
+    const allItemsAndGroups = this.getItemsAndGroups(true);
     const items = allItemsAndGroups.filter((item) => !isHidden(item));
     const { maxItems } = this;
     let itemsToProcess = 0;
@@ -744,8 +744,11 @@ class Combobox extends LitElement {
     const value = event.target.value;
     this.filterText = value;
   }
-  getItemsAndGroups() {
-    return [...this.groupItems, ...this.items];
+  getItemsAndGroups(preserveOrder = false) {
+    if (!preserveOrder) {
+      return [...this.groupItems, ...this.items];
+    }
+    return Array.from(this.el.querySelectorAll(`${ComboboxItemSelector}, ${ComboboxItemGroupSelector}`));
   }
   toggleSelection(item, value) {
     if (!item || this.selectionMode === "single-persist" && item.selected && item.value === this.value && !value) {

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -270,7 +270,7 @@ class DatePickerMonthHeader extends LitElement {
   renderChevron(direction) {
     const isDirectionRight = direction === "right";
     const isDisabled = hasSameMonthAndYear(isDirectionRight ? this.nextMonthDate : this.prevMonthDate, this.activeDate) || !inRange(this.activeDate, this.min, this.max);
-    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale === "l" ? "l" : "m"} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
+    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
   }
 }
 customElement("calcite-date-picker-month-header", DatePickerMonthHeader);

package/dist/components/calcite-filter/customElement.js

@@ -85,8 +85,10 @@ class Filter extends LitElement {
       return;
     }
     if (event.key === "Escape") {
-      this.clear();
-      event.preventDefault();
+      if (this.value.length > 0) {
+        this.clear();
+        event.preventDefault();
+      }
     }
     if (event.key === "Enter") {
       event.preventDefault();

package/dist/components/calcite-popover/customElement.d.ts

@@ -146,8 +146,12 @@ export abstract class Popover extends LitElement {
    * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  updateFocusTrapElements(): Promise<void>;
+  /**
+   * Updates the element(s) that are included in the component's focus-trap.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   readonly calcitePopoverBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */

package/dist/components/calcite-popover/customElement.js

@@ -196,7 +196,8 @@ class Popover extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
-  async updateFocusTrapElements() {
+  async updateFocusTrapElements(extraContainers) {
+    this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
   connectedCallback() {

package/dist/components/calcite-stepper/customElement.js

@@ -39,7 +39,7 @@ const StepBar = ({ disabled, active, complete, error }) => html`<svg class=${saf
   [CSS.stepBarError]: error,
   [CSS.stepBarInActive]: true
 })} width=100% x=0 y=0 />`}</svg>`;
-const styles = css`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .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: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;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:.5rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-stepper-bar-gap, 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:.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:.125rem;inline-size:100%;gap:var(--calcite-stepper-bar-gap, var(--calcite-internal-step-bar-gap, .5rem))}.step-bar--inactive{fill:var(--calcite-stepper-bar-inactive-fill-color, var(--calcite-color-border-3, #dfdfdf));fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-stepper-bar-active-fill-color, var(--calcite-color-brand))}.step-bar--complete{fill:var(--calcite-stepper-bar-complete-fill-color, var(--calcite-color-brand));fill-opacity:.5}.step-bar--error{fill:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .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: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;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:.5rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s));grid-template-rows:auto 1fr}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-stepper-bar-gap, 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:.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:.125rem;inline-size:100%;gap:var(--calcite-stepper-bar-gap, var(--calcite-internal-step-bar-gap, .5rem))}.step-bar--inactive{fill:var(--calcite-stepper-bar-inactive-fill-color, var(--calcite-color-border-3, #dfdfdf));fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-stepper-bar-active-fill-color, var(--calcite-color-brand))}.step-bar--complete{fill:var(--calcite-stepper-bar-complete-fill-color, var(--calcite-color-brand));fill-opacity:.5}.step-bar--error{fill:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
 class Stepper extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-table-cell/customElement.d.ts

@@ -11,7 +11,10 @@ import type { Alignment } from "../interfaces.js";
  */
 export abstract class TableCell extends LitElement {
   /**
-   * Specifies the alignment of the component.
+   * Specifies the horizontal alignment of content within the component, where:
+   * `"start"` positions content at the start of the component,
+   * `"center"` positions content in the middle of the component, and
+   * `"end"` positions content at the end of the component.
    *
    * @default "start"
    */

package/dist/components/calcite-table-row/customElement.d.ts

@@ -12,7 +12,12 @@ import type { Alignment } from "../interfaces.js";
  * @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
  */
 export abstract class TableRow extends LitElement {
-  /** Specifies the alignment of the component. */
+  /**
+   * Specifies the vertical alignment of content within child `calcite-table-cell`s, where:
+   * `"start"` positions content at the top of a `calcite-table-cell`,
+   * `"center"` positions content in the middle of a `calcite-table-cell`, and
+   * `"end"` positions content at the bottom of a `calcite-table-cell`.
+   */
   accessor alignment: Alignment;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.