@esri/calcite-components 5.1.1-next.5 → 5.2.0-next.0

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -62,6 +62,8 @@ 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";
@@ -195,22 +197,30 @@ class TimePicker extends LitElement {
   }
   fractionalSecondDownClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.nudgeFractionalSecond("down");
   }
   fractionalSecondUpClickHandler() {
     this.activeEl = this.fractionalSecondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.nudgeFractionalSecond("up");
   }
   hourDownClickHandler() {
     this.activeEl = this.hourRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementHour();
   }
   hourUpClickHandler() {
     this.activeEl = this.hourRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.incrementHour();
   }
   inputClickHandler(event) {
@@ -218,32 +228,42 @@ class TimePicker extends LitElement {
   }
   meridiemUpClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.toggleMeridiem("up");
   }
   meridiemDownClickHandler() {
     this.activeEl = this.meridiemRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.toggleMeridiem("down");
   }
   minuteDownClickHandler() {
     this.activeEl = this.minuteRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementMinute();
   }
   minuteUpClickHandler() {
     this.activeEl = this.minuteRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.incrementMinute();
   }
   secondDownClickHandler() {
     this.activeEl = this.secondRef.value;
-    this.activeEl.focus();
+    if (this.activeEl) {
+      this.activeEl.focus();
+    }
     this.time.decrementSecond();
   }
   secondUpClickHandler() {
     this.activeEl = this.secondRef.value;
-    this.activeEl.focus();
+    this.activeEl?.focus();
     this.time.incrementSecond();
   }
   timeChangeHandler(event) {
@@ -279,7 +299,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} 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 ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.hour]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.hourRef.value
@@ -290,7 +310,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} 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 ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.minute]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.minuteRef.value
@@ -300,7 +320,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} 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 ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.second]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.secondRef.value
@@ -310,7 +330,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} 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 ?? void 0} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
       [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondRef.value
@@ -324,7 +344,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} 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 ?? void 0} 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;
+  accessor label: string | undefined;
   /** 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 | null;
+  accessor referenceElement: ReferenceElement | string;
   /**
    * Specifies the size of the component.
    *

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
@@ -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;
+    this.el.ariaLabel = label ?? null;
     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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
@@ -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 !== void 0) {
-        const parent = currentItem.parentElement;
+      while (currentItem !== root && currentItem !== null) {
+        const parent = currentItem.parentElement ?? void 0;
         const traversable = !isTreeItem(parent) || !parent.hasChildren || parent.expanded;
         if (!traversable) {
           return false;
@@ -28,6 +28,7 @@ class Tree extends LitElement {
   constructor() {
     super();
     this.items = [];
+    this.child = false;
     this.lines = false;
     this.parentExpanded = false;
     this.scale = "m";
@@ -50,7 +51,7 @@ class Tree extends LitElement {
     if (changes.has("parentExpanded") && (this.hasUpdated || this.parentExpanded !== false)) {
       this.updateItems();
     }
-    const parent = this.el.parentElement?.closest("calcite-tree");
+    const parent = this.el.parentElement?.closest("calcite-tree") ?? void 0;
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -58,7 +59,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])");
+      const focusTarget = (this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])")) ?? void 0;
       focusElement(focusTarget, true, "focusable");
     }
   }
@@ -279,8 +280,8 @@ class Tree extends LitElement {
     return !this.child ? 0 : -1;
   }
   render() {
-    this.el.ariaMultiSelectable = this.child ? void 0 : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
-    this.el.role = !this.child ? "tree" : void 0;
+    this.el.ariaMultiSelectable = this.child ? null : toAriaBoolean(this.selectionMode === "multiple" || this.selectionMode === "multichildren");
+    this.el.role = !this.child ? "tree" : null;
     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;
+  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. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, the component is selected.
    *

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
@@ -40,7 +40,9 @@ 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;
@@ -49,6 +51,7 @@ 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 });
@@ -69,7 +72,7 @@ class TreeItem extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item");
+    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item") ?? void 0;
   }
   load() {
     requestAnimationFrame(() => this.updateAfterInitialRender = true);
@@ -191,7 +194,10 @@ class TreeItem extends LitElement {
     }
     if (this.selected) {
       const parentTree = this.el.parentElement;
-      const siblings = Array.from(parentTree?.children);
+      if (!parentTree) {
+        return;
+      }
+      const siblings = Array.from(parentTree.children);
       const selectedSiblings = siblings.filter((child) => child.selected);
       if (siblings.length === selectedSiblings.length) {
         parentItem.selected = true;
@@ -223,7 +229,7 @@ class TreeItem extends LitElement {
     this.lines = parentTree.lines;
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = parentTree.parentElement?.closest("calcite-tree");
+      nextParentTree = parentTree.parentElement?.closest("calcite-tree") ?? null;
       if (nextParentTree === parentTree) {
         break;
       } else {
@@ -262,11 +268,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) : void 0;
-    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : void 0;
+    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.inert = hidden;
     this.el.ariaLive = "polite";
-    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : void 0;
+    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : null;
     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/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;
+  value: string | null;
 }
 
 export class TimeController extends GenericController<TimeProperties, TimeComponent> {
   calciteTimeChange: EventEmitter<string>;
-  fractionalSecond: string;
+  fractionalSecond?: string | null;
   handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
   handleHourKeyDownEvent: (event: KeyboardEvent) => void;
   handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
   handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
   handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
-  hour: string;
-  hourFormat: EffectiveHourFormat;
-  locale: Locale;
+  hour?: string | null;
+  hourFormat?: EffectiveHourFormat | null;
+  locale?: Locale | null;
   /** @default "." */
   localizedDecimalSeparator: string;
-  localizedFractionalSecond: string;
-  localizedHour: string;
-  localizedHourSuffix: string;
-  localizedMeridiem: string;
-  localizedMinute: string;
-  localizedMinuteSuffix: string;
-  localizedSecond: string;
-  localizedSecondSuffix: string;
-  meridiem: Meridiem;
-  meridiemOrder: number;
-  minute: string;
-  second: 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;
   /** @default false */
   userChangedValue: boolean;
   decrementHour(): void;
@@ -72,7 +72,7 @@ export class TimeController extends GenericController<TimeProperties, TimeCompon
    * @param value
    * @param userChangedValue
    */
-  setValue(value: string, userChangedValue?: boolean): void;
+  setValue(value: string | null, 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;
 };