@esri/calcite-components 5.1.1-next.4 → 5.1.1-next.5

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

@@ -57,9 +57,9 @@ export abstract class List extends LitElement {
    */
   accessor filterEnabled: boolean;
   /** Specifies an accessible name for the filter input field. */
-  accessor filterLabel: string;
+  accessor filterLabel: string | undefined;
   /** Specifies placeholder text for the component's filter input field. */
-  accessor filterPlaceholder: string;
+  accessor filterPlaceholder: string | undefined;
   /**
    * Specifies a function to handle filtering.
    *
@@ -71,7 +71,7 @@ export abstract class List extends LitElement {
    */
   accessor filterPredicate: ((item: ListItem) => boolean) | undefined;
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /**
    * Text for the component's filter input field.
    *
@@ -116,7 +116,7 @@ export abstract class List extends LitElement {
       total?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * Specifies the size of the component.
    *

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

@@ -111,13 +111,13 @@ class List extends LitElement {
     this.styles = styles;
   }
   get hasActiveFilter() {
-    return this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length;
+    return !!(this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length);
   }
   get showEmptyContentContainer() {
     return !this.hasContent && this.hasEmptyContent;
   }
   get showNoResultsContainer() {
-    return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
+    return !!(this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length);
   }
   get effectiveFilterProps() {
     if (!this.filterProps) {
@@ -366,7 +366,7 @@ class List extends LitElement {
     this.calciteListOrderChange.emit(detail);
   }
   setParentList() {
-    this.parentListEl = this.el.parentElement?.closest(listSelector);
+    this.parentListEl = this.el.parentElement?.closest(listSelector) || void 0;
   }
   handleDefaultSlotChange(event) {
     if (this.parentListEl) {
@@ -493,8 +493,7 @@ class List extends LitElement {
     }));
   }
   getGroupHeading(item) {
-    const heading = this.listItemGroups.filter((group) => group.contains(item)).map((group) => group.heading);
-    return heading;
+    return this.listItemGroups.filter((group) => group.contains(item) && group.heading).map((group) => group.heading);
   }
   updateGroupItems() {
     const { el, group, scale } = this;

package/dist/components/calcite-list-item/customElement.d.ts

@@ -35,7 +35,7 @@ export abstract class ListItem extends LitElement {
    */
   accessor closed: boolean;
   /** Specifies a description for the component. Displays below the `label`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -55,13 +55,13 @@ export abstract class ListItem extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component, displays above the `description`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       close?: string;
@@ -69,7 +69,7 @@ export abstract class ListItem extends LitElement {
       collapse?: string;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the item is open to show child components.
    *

package/dist/components/calcite-list-item/customElement.js

@@ -35,7 +35,6 @@ class ListItem extends LitElement {
     this.hasContentEnd = false;
     this.hasContentStart = false;
     this.hasCustomContent = false;
-    this.level = null;
     this.expandable = false;
     this.active = false;
     this.bordered = false;
@@ -47,13 +46,11 @@ class ListItem extends LitElement {
     this.dragHandle = false;
     this.expanded = false;
     this.filterHidden = false;
-    this.interactionMode = null;
     this.displayMode = "flat";
     this.addToItems = [];
     this.moveToItems = [];
     this.scale = "m";
     this.selected = false;
-    this.selectionMode = null;
     this.sortHandleOpen = false;
     this.unavailable = false;
     this.topLayerDisabled = false;
@@ -110,7 +107,7 @@ class ListItem extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     const { el } = this;
-    this.parentListEl = el.closest(listSelector);
+    this.parentListEl = el.closest(listSelector) || void 0;
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
@@ -151,7 +148,7 @@ class ListItem extends LitElement {
   }
   activeHandler(active) {
     if (!active) {
-      this.focusCell(null, false);
+      this.focusCell(void 0, false);
     }
   }
   handleClosedChange() {
@@ -289,7 +286,7 @@ class ListItem extends LitElement {
       this.actionsStartRef.value,
       this.contentRef.value,
       this.actionsEndRef.value
-    ].filter((el) => el && !el.hidden);
+    ].filter((el) => !!(el && !el.hidden));
   }
   handleItemKeyDown(event) {
     if (event.defaultPrevented) {
@@ -300,7 +297,7 @@ class ListItem extends LitElement {
     const { containerRef, actionsStartRef: { value: actionsStartEl }, actionsEndRef: { value: actionsEndEl }, expanded, expandable } = this;
     const cells = this.getGridCells();
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-    if (key === "Enter" && !composedPath.includes(actionsStartEl) && !composedPath.includes(actionsEndEl)) {
+    if (key === "Enter" && actionsStartEl && !composedPath.includes(actionsStartEl) && actionsEndEl && !composedPath.includes(actionsEndEl)) {
       event.preventDefault();
       this.toggleSelected(event.shiftKey);
     } else if (key === "ArrowRight") {
@@ -309,7 +306,7 @@ class ListItem extends LitElement {
       if (currentIndex === -1) {
         if (!expanded && expandable) {
           this.toggle(true);
-          this.focusCell(null);
+          this.focusCell();
         } else if (cells[0]) {
           this.focusCell(cells[0]);
         }
@@ -320,27 +317,27 @@ class ListItem extends LitElement {
       event.preventDefault();
       const prevIndex = currentIndex - 1;
       if (currentIndex === -1) {
-        this.focusCell(null);
+        this.focusCell();
         if (expanded && expandable) {
           this.toggle(false);
         } else {
           this.calciteInternalFocusPreviousItem.emit();
         }
       } else if (currentIndex === 0) {
-        this.focusCell(null);
+        this.focusCell();
         containerRef.value.focus();
       } else if (cells[currentIndex] && cells[prevIndex]) {
         this.focusCell(cells[prevIndex]);
       }
     }
   }
-  focusCellNull() {
-    this.focusCell(null);
+  clearCellFocus() {
+    this.focusCell();
   }
   setFocusCell(focusEl, focusedEl, saveFocusIndex) {
     const { parentListEl } = this;
     if (saveFocusIndex) {
-      focusMap.set(parentListEl, null);
+      focusMap.set(parentListEl, void 0);
     }
     const gridCells = this.getGridCells();
     gridCells.forEach((tableCell) => {
@@ -459,14 +456,14 @@ class ListItem extends LitElement {
     const showSelectionBorder = selectionMode !== "none" && selectionAppearance === "border";
     const showSelectionHighlight = selectionMode !== "none" && selectionAppearance === "highlight";
     const containerInteractive = interactionMode === "interactive";
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : null} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : void 0} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
       [CSS.row]: true,
       [CSS.container]: true,
       [CSS.containerHover]: containerInteractive,
       [CSS.containerBorder]: showSelectionBorder,
       [CSS.containerBorderSelected]: showSelectionBorder && selected,
       [CSS.containerHighlightSelected]: showSelectionHighlight && selected
-    })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
+    })} .hidden=${closed || filterHidden} @focus=${this.clearCellFocus} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
       [CSS.contentContainerWrapper]: true,
       [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered
     })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });

package/dist/components/calcite-list-item-group/customElement.d.ts

@@ -15,7 +15,7 @@ export abstract class ListItemGroup extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the heading text for the nested `calcite-list-item` rows. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /**
    * Specifies the size of the component.
    *

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

@@ -82,9 +82,9 @@ class Loader extends LitElement {
     const isDeterminate = type !== "indeterminate";
     const valueNow = Math.floor(value);
     this.el.ariaLabel = label;
-    this.el.ariaValueMax = isDeterminate ? "100" : void 0;
-    this.el.ariaValueMin = isDeterminate ? "0" : void 0;
-    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : void 0;
+    this.el.ariaValueMax = isDeterminate ? "100" : null;
+    this.el.ariaValueMin = isDeterminate ? "0" : null;
+    this.el.ariaValueNow = isDeterminate ? valueNow.toString() : null;
     setAttribute(this.el, "id", id);
     this.el.role = "progressbar";
     return html`<div class=${safeClassMap(CSS.rings)}>${this.renderRing("track")}${this.renderRing("progress")}${!inline && isDeterminate && html`<div class=${safeClassMap(CSS.percentage)}>${this.formatValue()}</div>` || ""}</div>${!inline && text && html`<div class=${safeClassMap(CSS.text)}>${text}</div>` || ""}`;

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -26,11 +26,11 @@ export abstract class RadioButton extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit.
@@ -56,7 +56,7 @@ export abstract class RadioButton extends LitElement {
    * @internal
    * @mdn [validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/validationMessage)
    */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -84,7 +84,7 @@ export abstract class RadioButton extends LitElement {
    * @param validationMessage
    * @internal
    */
-  setValidity(validity: ValidityStateFlags, validationMessage?: string): Promise<void>;
+  setValidity(validity: ValidityStateFlags, validationMessage?: string | undefined): Promise<void>;
   /**
    * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.
    * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event

package/dist/components/calcite-radio-button/customElement.js

@@ -55,7 +55,7 @@ class RadioButton extends LitElement {
     return this.focusSetter(() => this.containerRef.value, options);
   }
   async setValidity(validity, validationMessage = this.validationMessage) {
-    this.elementInternals.setValidity(validity, validationMessage);
+    this.elementInternals.setValidity(validity, validationMessage || "");
   }
   connectedCallback() {
     this.rootNode = this.el.getRootNode();

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -18,7 +18,7 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Specifies the layout of the component.
    *
@@ -47,7 +47,7 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the component's selected item. */
-  get selectedItem(): RadioButton;
+  get selectedItem(): RadioButton | null;
   /**
    * Specifies the status of the validation message.
    *
@@ -55,9 +55,9 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * Sets focus on the fist focusable `calcite-radio-button` element in the component.
    *

package/dist/components/calcite-radio-button-group/customElement.js

@@ -64,7 +64,7 @@ class RadioButtonGroup extends LitElement {
     this.mutationObserver?.disconnect();
   }
   handleInvalidFormEvent(event) {
-    const message = this.validationMessage || event.target.validationMessage;
+    const message = this.validationMessage || event.target.validationMessage || "";
     displayValidationMessage(this, {
       message,
       icon: true,
@@ -73,7 +73,7 @@ class RadioButtonGroup extends LitElement {
   }
   passPropsToRadioButtons() {
     this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button"));
-    this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) || null;
+    this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) ?? null;
     if (this.radioButtons.length > 0) {
       this.radioButtons.forEach((radioButton) => {
         if (this.hasUpdated) {
@@ -87,7 +87,7 @@ class RadioButtonGroup extends LitElement {
     }
   }
   getFocusableRadioButton() {
-    return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;
+    return this.radioButtons.find((radiobutton) => !radiobutton.disabled);
   }
   radioButtonChangeHandler(event) {
     this.selectedItem = event.target;

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

@@ -15,9 +15,9 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Rating extends LitElement {
   /** Specifies a cumulative average from previous ratings to display. */
-  accessor average: number;
+  accessor average: number | undefined;
   /** Specifies the number of previous ratings to display. */
-  accessor count: number;
+  accessor count: number | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -29,9 +29,9 @@ export abstract class Rating extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       rating?: string;
@@ -39,7 +39,7 @@ export abstract class Rating extends LitElement {
       stars?: string;
   };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `true`, the component's value can be read, but cannot be modified.
    *
@@ -65,9 +65,9 @@ export abstract class Rating extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *

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

@@ -90,12 +90,16 @@ class Rating extends LitElement {
   willUpdate() {
     this.starsMap = Array.from({ length: this.max }, (_, i) => {
       const value = i + 1;
-      const average = !this.hoverValue && this.average && !this.value && value <= this.average;
+      const hoverValue = this.hoverValue ?? 0;
+      const hasHoverValue = hoverValue > 0;
+      const hasAverage = this.average != null;
+      const averageValue = this.average ?? 0;
+      const average = !hasHoverValue && hasAverage && !this.value && value <= averageValue;
       const checked = value === this.value;
-      const fraction = this.average && this.average + 1 - value;
-      const hovered = value <= this.hoverValue;
+      const fraction = hasAverage ? averageValue + 1 - value : 0;
+      const hovered = hasHoverValue && value <= hoverValue;
       const id = `${this.guid}-${value}`;
-      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
+      const partial = !hasHoverValue && !this.value && hasAverage && !hovered && fraction > 0 && fraction < 1;
       const selected = this.value >= value;
       const tabIndex = this.getTabIndex(value);
       return {
@@ -133,7 +137,7 @@ class Rating extends LitElement {
   }
   handleRatingPointerOut() {
     this.isKeyboardInteraction = true;
-    this.hoverValue = null;
+    this.hoverValue = void 0;
   }
   handleHostKeyDown() {
     this.isKeyboardInteraction = true;
@@ -141,7 +145,7 @@ class Rating extends LitElement {
   handleLabelKeyDown(event) {
     const inputValue = this.getValueFromLabelEvent(event);
     const key = event.key;
-    const numberKey = key == " " ? void 0 : Number(key);
+    const numberKey = key == " " ? NaN : Number(key);
     this.emit = true;
     if (isNaN(numberKey)) {
       switch (key) {
@@ -160,7 +164,7 @@ class Rating extends LitElement {
           event.preventDefault();
           break;
         case "Tab":
-          this.hoverValue = null;
+          this.hoverValue = void 0;
           break;
       }
     } else {
@@ -174,7 +178,7 @@ class Rating extends LitElement {
   }
   handleInputChange(event) {
     if (this.isKeyboardInteraction === true) {
-      const inputVal = Number(event.target["value"]);
+      const inputVal = Number(event.target.value);
       this.hoverValue = inputVal;
       this.value = inputVal;
     }
@@ -199,7 +203,7 @@ class Rating extends LitElement {
   }
   updateFocus() {
     this.hoverValue = this.value;
-    this.labelElements[this.value - 1].focus();
+    this.labelElements[this.value - 1]?.focus();
   }
   getTabIndex(value) {
     if (this.readOnly || this.value !== value && (this.value || value !== 1)) {

package/dist/controllers/useSortable.d.ts

@@ -2,6 +2,6 @@ export interface DragDetail<To extends HTMLElement = HTMLElement, From extends H
   toEl: To;
   fromEl: From;
   dragEl: Drag;
-  newIndex: number;
-  oldIndex: number;
+  newIndex?: number;
+  oldIndex?: number;
 }