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

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

@@ -46,7 +46,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
-  accessor beforeClose: () => Promise<void>;
+  accessor beforeClose: (() => Promise<void>) | undefined;
   /**
    * When `true`, displays a close button in the component.
    *
@@ -78,7 +78,7 @@ export abstract class Panel extends LitElement {
    */
   accessor collapsible: boolean;
   /** Specifies a description for the component. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -86,11 +86,11 @@ export abstract class Panel extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -104,7 +104,7 @@ export abstract class Panel extends LitElement {
    */
   accessor loading: boolean;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    *

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

@@ -33,7 +33,7 @@ export abstract class Popover extends LitElement {
    */
   accessor flipDisabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
    *
@@ -49,11 +49,11 @@ export abstract class Popover extends LitElement {
    * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
    * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /**
    * Specifies an accessible label for the component.
    *

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

@@ -147,7 +147,7 @@ class Popover extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   hide() {
     this.open = false;

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

@@ -8,7 +8,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  */
 export abstract class Progress extends LitElement {
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true` and type is `"indeterminate"`, reverses the animation direction.
    *
@@ -16,7 +16,7 @@ export abstract class Progress extends LitElement {
    */
   accessor reversed: boolean;
   /** Text that displays under the component's indicator. */
-  accessor text: string;
+  accessor text: string | undefined;
   /**
    * Specifies the component type.
    *

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;
 }