@esri/calcite-components 5.1.1-next.6 → 5.1.1

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

@@ -32,7 +32,7 @@ export abstract class Tile extends LitElement {
    */
   accessor alignment: Exclude<Alignment, "end">;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string | undefined;
+  accessor description: string;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -49,13 +49,13 @@ export abstract class Tile extends LitElement {
    */
   accessor embed: boolean;
   /** Specifies the component's heading text. displays between the `icon` and `description`. */
-  accessor heading: string | undefined;
+  accessor heading: string;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel | undefined;
+  accessor headingLevel: HeadingLevel;
   /** When embed is `false`, specifies the URL for the component. */
-  accessor href: string | undefined;
+  accessor href: string;
   /** Specifies an icon to display. */
-  accessor icon: IconName | undefined;
+  accessor icon: IconName;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -63,7 +63,7 @@ export abstract class Tile extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * Specifies the component's size.
    *

package/dist/components/calcite-time-picker/customElement.d.ts

@@ -62,7 +62,7 @@ export abstract class TimePicker extends LitElement {
   /** @internal */
   accessor time: ReturnType<typeof useTime>;
   /** The component's value in UTC (always 24-hour format). */
-  accessor value: string | null;
+  accessor value: string;
   /**
    * Sets focus on the component's first focusable element.
    *

package/dist/components/calcite-time-picker/customElement.js

@@ -62,8 +62,6 @@ class TimePicker extends LitElement {
     this.secondRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
-    this.showFractionalSecond = false;
-    this.showSecond = false;
     this.time = useTime(this);
     this.hourFormat = "user";
     this.scale = "m";
@@ -197,30 +195,22 @@ class TimePicker extends LitElement {
   }
   fractionalSecondDownClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.nudgeFractionalSecond("down");
   }
   fractionalSecondUpClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.nudgeFractionalSecond("up");
   }
   hourDownClickHandler() {
     this.activeEl = this.hourRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.decrementHour();
   }
   hourUpClickHandler() {
     this.activeEl = this.hourRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.incrementHour();
   }
   inputClickHandler(event) {
@@ -228,42 +218,32 @@ class TimePicker extends LitElement {
   }
   meridiemUpClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.toggleMeridiem("up");
   }
   meridiemDownClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.toggleMeridiem("down");
   }
   minuteDownClickHandler() {
     this.activeEl = this.minuteRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.decrementMinute();
   }
   minuteUpClickHandler() {
     this.activeEl = this.minuteRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.incrementMinute();
   }
   secondDownClickHandler() {
     this.activeEl = this.secondRef.value;
-    if (this.activeEl) {
-      this.activeEl.focus();
-    }
+    this.activeEl.focus();
     this.time.decrementSecond();
   }
   secondUpClickHandler() {
     this.activeEl = this.secondRef.value;
-    this.activeEl?.focus();
+    this.activeEl.focus();
     this.time.incrementSecond();
   }
   timeChangeHandler(event) {
@@ -299,7 +279,7 @@ class TimePicker extends LitElement {
       [CSS.button]: true,
       [CSS.buttonHourUp]: true,
       [CSS.buttonTopLeft]: true
-    })} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${hourIsNumber && parseInt(hour) || "0"} .ariaValueText=${hour ?? void 0} class=${safeClassMap({
+    })} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${hourIsNumber && parseInt(hour) || "0"} .ariaValueText=${hour} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.hour]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.hourRef.value
@@ -310,7 +290,7 @@ class TimePicker extends LitElement {
     })} @click=${this.hourDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div><span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.hourSuffix]: true })}>${localizedHourSuffix}</span><div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.minuteUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMinuteUp]: true
-    })} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${minuteIsNumber && parseInt(minute) || "0"} .ariaValueText=${minute ?? void 0} class=${safeClassMap({
+    })} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${minuteIsNumber && parseInt(minute) || "0"} .ariaValueText=${minute} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.minute]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.minuteRef.value
@@ -320,7 +300,7 @@ class TimePicker extends LitElement {
     })} @click=${this.minuteDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>${this.showSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.minuteSuffix]: true })}>${localizedMinuteSuffix}</span>` || ""}${this.showSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.secondUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonSecondUp]: true
-    })} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${secondIsNumber && parseInt(second) || "0"} .ariaValueText=${second ?? void 0} class=${safeClassMap({
+    })} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${secondIsNumber && parseInt(second) || "0"} .ariaValueText=${second} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.second]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.secondRef.value
@@ -330,7 +310,7 @@ class TimePicker extends LitElement {
     })} @click=${this.secondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${this.showFractionalSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.decimalSeparator]: true })}>${localizedDecimalSeparator}</span>` || ""}${this.showFractionalSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.fractionalSecondUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonFractionalSecondUp]: true
-    })} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${fractionalSecondIsNumber && parseInt(fractionalSecond) || "0"} .ariaValueText=${localizedFractionalSecond ?? void 0} class=${safeClassMap({
+    })} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${fractionalSecondIsNumber && parseInt(fractionalSecond) || "0"} .ariaValueText=${localizedFractionalSecond} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondRef.value
@@ -344,7 +324,7 @@ class TimePicker extends LitElement {
       [CSS.button]: true,
       [CSS.buttonMeridiemUp]: true,
       [CSS.buttonTopRight]: true
-    })} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${meridiem === "PM" && "2" || "1"} .ariaValueText=${meridiem ?? void 0} class=${safeClassMap({
+    })} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${meridiem === "PM" && "2" || "1"} .ariaValueText=${meridiem} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.meridiem]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.meridiemRef.value

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

@@ -23,7 +23,7 @@ export abstract class Tooltip extends LitElement {
    *
    * @deprecated in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.
    */
-  accessor label: string | undefined;
+  accessor label: string;
   /** Specifies the distance to position the component away from the `referenceElement`. */
   accessor offsetDistance: number;
   /**
@@ -69,7 +69,7 @@ export abstract class Tooltip extends LitElement {
    *
    * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
    */
-  accessor referenceElement: ReferenceElement | string;
+  accessor referenceElement: ReferenceElement | string | null;
   /**
    * Specifies the size of the component.
    *

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

@@ -115,7 +115,7 @@ class Tooltip extends LitElement {
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? keyed("floating-arrow", FloatingArrow({ floatingLayout, ref: this.setArrowEl })) : null;
     this.el.inert = hidden;
-    this.el.ariaLabel = label ?? null;
+    this.el.ariaLabel = label;
     this.el.ariaLive = "polite";
     this.el.role = "tooltip";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({

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

@@ -11,8 +11,8 @@ function getTraversableItems(root) {
   return Array.from(root.querySelectorAll("calcite-tree-item:not([disabled])")).filter(
     (item) => {
       let currentItem = item;
-      while (currentItem !== root && currentItem !== null) {
-        const parent = currentItem.parentElement ?? void 0;
+      while (currentItem !== root && currentItem !== void 0) {
+        const parent = currentItem.parentElement;
         const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
         if (!traversable) {
           return false;
@@ -28,7 +28,6 @@ class Tree extends LitElement {
   constructor() {
     super();
     this.items = [];
-    this.child = false;
     this.lines = false;
     this.parentExpanded = false;
     this.scale = "m";
@@ -51,7 +50,7 @@ class Tree extends LitElement {
     if (changes.has("parentExpanded") && (this.hasUpdated || this.parentExpanded !== false)) {
       this.updateItems();
     }
-    const parent = this.el.parentElement?.closest("calcite-tree") ?? void 0;
+    const parent = this.el.parentElement?.closest("calcite-tree");
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -59,7 +58,7 @@ class Tree extends LitElement {
   }
   onFocus() {
     if (!this.child) {
-      const focusTarget = (this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])")) ?? void 0;
+      const focusTarget = this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])");
       focusElement(focusTarget, true, "focusable");
     }
   }
@@ -280,8 +279,8 @@ class Tree extends LitElement {
     return !this.child ? 0 : -1;
   }
   render() {
-    this.el.ariaMultiSelectable = this.child ? null : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
-    this.el.role = !this.child ? "tree" : null;
+    this.el.ariaMultiSelectable = this.child ? void 0 : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
+    this.el.role = !this.child ? "tree" : void 0;
     setAttribute(this.el, "tabIndex", this.getRootTabIndex());
     return html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>`;
   }

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

@@ -25,11 +25,11 @@ export abstract class TreeItem extends LitElement {
    */
   accessor expanded: boolean;
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext | undefined;
+  accessor iconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName | undefined;
+  accessor iconStart: IconName;
   /** Specifies an accessible label for the component. */
-  accessor label: string | undefined;
+  accessor label: string;
   /**
    * When `true`, the component is selected.
    *

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

@@ -40,9 +40,7 @@ class TreeItem extends LitElement {
   constructor() {
     super();
     this.actionSlotWrapperRef = createRef();
-    this.childTree = null;
     this.direction = useDirection();
-    this.isSelectionMultiLike = false;
     this.userChangedValue = false;
     this.interactiveContainer = useInteractive(this);
     this.hasEndActions = false;
@@ -51,7 +49,6 @@ class TreeItem extends LitElement {
     this.disabled = false;
     this.expanded = false;
     this.indeterminate = false;
-    this.lines = false;
     this.parentExpanded = false;
     this.selected = false;
     this.calciteInternalTreeItemSelect = createEvent({ cancelable: false });
@@ -72,7 +69,7 @@ class TreeItem extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item") ?? void 0;
+    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item");
   }
   load() {
     requestAnimationFrame(() => this.updateAfterInitialRender = true);
@@ -194,10 +191,7 @@ class TreeItem extends LitElement {
     }
     if (this.selected) {
       const parentTree = this.el.parentElement;
-      if (!parentTree) {
-        return;
-      }
-      const siblings = Array.from(parentTree.children);
+      const siblings = Array.from(parentTree?.children);
       const selectedSiblings = siblings.filter((child) => child.selected);
       if (siblings.length === selectedSiblings.length) {
         parentItem.selected = true;
@@ -229,7 +223,7 @@ class TreeItem extends LitElement {
     this.lines = parentTree.lines;
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = parentTree.parentElement?.closest("calcite-tree") ?? null;
+      nextParentTree = parentTree.parentElement?.closest("calcite-tree");
       if (nextParentTree === parentTree) {
         break;
       } else {
@@ -268,11 +262,11 @@ class TreeItem extends LitElement {
     const { hasEndActions } = this;
     const slotNode = keyed("actionsEndSlot", html`<slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot>`);
     const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
-    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : null;
-    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : null;
+    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : void 0;
+    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : void 0;
     this.el.inert = hidden;
     this.el.ariaLive = "polite";
-    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : null;
+    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : void 0;
     this.el.role = "treeitem";
     setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({

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

package/dist/controllers/useTime.d.ts

@@ -27,34 +27,34 @@ export interface TimeComponent extends LitElement {
   /** Specifies the granularity the component's `value` must adhere to (in seconds). */
   step: number;
   /** The component's time value in ISO (24-hour) format. */
-  value: string | null;
+  value: string;
 }
 
 export class TimeController extends GenericController<TimeProperties, TimeComponent> {
   calciteTimeChange: EventEmitter<string>;
-  fractionalSecond?: string | null;
+  fractionalSecond: string;
   handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
   handleHourKeyDownEvent: (event: KeyboardEvent) => void;
   handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
   handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
   handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
-  hour?: string | null;
-  hourFormat?: EffectiveHourFormat | null;
-  locale?: Locale | null;
+  hour: string;
+  hourFormat: EffectiveHourFormat;
+  locale: Locale;
   /** @default "." */
   localizedDecimalSeparator: string;
-  localizedFractionalSecond?: string | null;
-  localizedHour?: string | null;
-  localizedHourSuffix?: string | null;
-  localizedMeridiem?: string | null;
-  localizedMinute?: string | null;
-  localizedMinuteSuffix?: string | null;
-  localizedSecond?: string | null;
-  localizedSecondSuffix?: string | null;
-  meridiem?: Meridiem | null;
-  meridiemOrder?: number | null;
-  minute?: string | null;
-  second?: string | null;
+  localizedFractionalSecond: string;
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMeridiem: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
+  meridiem: Meridiem;
+  meridiemOrder: number;
+  minute: string;
+  second: string;
   /** @default false */
   userChangedValue: boolean;
   decrementHour(): void;
@@ -72,7 +72,7 @@ export class TimeController extends GenericController<TimeProperties, TimeCompon
    * @param value
    * @param userChangedValue
    */
-  setValue(value: string | null, userChangedValue?: boolean): void;
+  setValue(value: string, userChangedValue?: boolean): void;
   /**
    * @param key
    * @param value
@@ -88,7 +88,7 @@ export type TimeProperties = {
   /** The fractional second portion of the time value. */
   fractionalSecond: string;
   /** The hour portion of the time value (in ISO 24-hour format). */
-  hour?: string;
+  hour: string;
   /**
    * The effective hour format, calculated based on the component's hour-format property.
    * The component's hour-format of "user" will resolve to the locale's default hour format.
@@ -127,7 +127,7 @@ export type TimeProperties = {
   /** An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat. */
   meridiemOrder: number;
   /** The minute portion of the time value. */
-  minute?: string;
+  minute: string;
   /** The second portion of the time value. */
   second: string;
 };