@esri/calcite-components 1.0.0-beta.64 → 1.0.0-beta.68

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

@@ -3,8 +3,8 @@ import { TreeItemSelectDetail } from "./interfaces";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot children - A slot for adding nested `calcite-tree` elements.
  * @slot - A slot for adding content to the item.
+ * @slot children - A slot for adding nested `calcite-tree` elements.
  */
 export declare class CalciteTreeItem {
   el: HTMLCalciteTreeItemElement;
@@ -38,6 +38,7 @@ export declare class CalciteTreeItem {
   selectionMode: TreeSelectionMode;
   connectedCallback(): void;
   componentWillRender(): void;
+  componentDidLoad(): void;
   render(): VNode;
   onClick(e: Event): void;
   iconClickHandler: (event: MouseEvent) => void;
@@ -49,4 +50,5 @@ export declare class CalciteTreeItem {
   calciteTreeItemSelect: EventEmitter<TreeItemSelectDetail>;
   childrenSlotWrapper: HTMLElement;
   defaultSlotWrapper: HTMLElement;
+  private updateAncestorTree;
 }

package/dist/types/components/calcite-value-list/calcite-value-list.d.ts

@@ -3,7 +3,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "../calcite-pick-list/shared-list-logic";
 /**
- * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
  */
 export declare class CalciteValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> {

package/dist/types/components/interfaces.d.ts

@@ -7,4 +7,5 @@ export declare type Position = "start" | "end";
 export declare type Scale = "s" | "m" | "l";
 export declare type Status = "invalid" | "valid" | "idle";
 export declare type ThemeClass = "calcite-theme-light" | "calcite-theme-dark" | "calcite-theme-auto";
+export declare type ThemeName = "light" | "dark" | "auto";
 export declare type Width = "auto" | "half" | "full";

package/dist/types/components.d.ts

@@ -25,7 +25,6 @@ import { SelectionMode } from "./components/calcite-dropdown-group/interfaces";
 import { ColorStop, DataSeries } from "./components/calcite-graph/interfaces";
 import { InputPlacement } from "./components/calcite-input/interfaces";
 import { HourDisplayFormat, Time, TimeFocusId } from "./utils/time";
-import { FocusRequest } from "./components/calcite-label/interfaces";
 import { ModalBackgroundColor } from "./components/calcite-modal/interfaces";
 import { CalcitePaginationDetail } from "./components/calcite-pagination/calcite-pagination";
 import { ListFocusId } from "./components/calcite-pick-list/shared-list-logic";
@@ -84,13 +83,13 @@ export namespace Components {
          */
         "active": boolean;
         /**
-          * Indicates the alignment when text-enabled is false.
+          * Optionally specify the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
           * Specify the appearance style of the action, defaults to solid.
          */
-        "appearance": Appearance;
+        "appearance": Extract<"solid" | "clear", Appearance>;
         /**
           * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
          */
@@ -154,6 +153,10 @@ export namespace Components {
           * Updates the label of the expand icon when the component is not expanded.
          */
         "intlExpand"?: string;
+        /**
+          * Overflows actions that won't fit into menus.
+         */
+        "overflowActions": () => Promise<void>;
         /**
           * Disables automatically overflowing actions that won't fit into menus.
          */
@@ -428,6 +431,7 @@ export namespace Components {
         "disabled": boolean;
         /**
           * The form ID to associate with the component
+          * @deprecated – this property is no longer needed if placed inside a form.
          */
         "form"?: string;
         /**
@@ -1371,6 +1375,7 @@ export namespace Components {
           * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale
          */
         "scale"?: Scale;
+        "setFocus": () => Promise<void>;
     }
     interface CalciteInput {
         /**
@@ -1582,6 +1587,10 @@ export namespace Components {
           * specify the scale of the date picker
          */
         "scale": "s" | "m" | "l";
+        /**
+          * Updates the position of the component.
+         */
+        "setFocus": () => Promise<void>;
         /**
           * Selected start date
          */
@@ -1700,7 +1709,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * The selected time
+          * The selected time (always 24-hour format)
          */
         "value": string;
     }
@@ -1726,7 +1735,7 @@ export namespace Components {
          */
         "layout": "inline" | "inline-space-between" | "default";
         /**
-          * specify the scale of the input, defaults to m
+          * specify the scale of the label, defaults to m
          */
         "scale": Scale;
         /**
@@ -1773,6 +1782,10 @@ export namespace Components {
           * Number at which section headings should start for this component.
          */
         "headingLevel": HeadingLevel;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
     }
     interface CalciteListItem {
         /**
@@ -1791,6 +1804,10 @@ export namespace Components {
           * When true, prevents the content of the list item from user interaction.
          */
         "nonInteractive": boolean;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
     }
     interface CalciteListItemGroup {
         /**
@@ -2666,6 +2683,10 @@ export namespace Components {
           * The selector for the handle elements.
          */
         "handleSelector": string;
+        /**
+          * Indicates the horizontal or vertical orientation of the component.
+         */
+        "layout": Layout;
         /**
           * When true, content is waiting to be loaded. This state shows a busy indicator.
          */
@@ -2799,10 +2820,18 @@ export namespace Components {
         "scale": Scale;
     }
     interface CalciteSwitch {
+        /**
+          * True if the switch is initially on
+         */
+        "checked": boolean;
         /**
           * True if the switch is disabled
          */
         "disabled": boolean;
+        /**
+          * Applies to the aria-label attribute on the switch
+         */
+        "label"?: string;
         /**
           * The name of the switch input
          */
@@ -2817,6 +2846,7 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * True if the switch is initially on
+          * @deprecated use 'checked' instead.
          */
         "switched": boolean;
         /**
@@ -4035,13 +4065,13 @@ declare namespace LocalJSX {
          */
         "active"?: boolean;
         /**
-          * Indicates the alignment when text-enabled is false.
+          * Optionally specify the horizontal alignment of button elements with text content.
          */
         "alignment"?: Alignment;
         /**
           * Specify the appearance style of the action, defaults to solid.
          */
-        "appearance"?: Appearance;
+        "appearance"?: Extract<"solid" | "clear", Appearance>;
         /**
           * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
          */
@@ -4392,6 +4422,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         /**
           * The form ID to associate with the component
+          * @deprecated – this property is no longer needed if placed inside a form.
          */
         "form"?: string;
         /**
@@ -5685,7 +5716,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * The selected time
+          * The selected time (always 24-hour format)
          */
         "value"?: string;
     }
@@ -5711,7 +5742,7 @@ declare namespace LocalJSX {
          */
         "layout"?: "inline" | "inline-space-between" | "default";
         /**
-          * specify the scale of the input, defaults to m
+          * specify the scale of the label, defaults to m
          */
         "scale"?: Scale;
         /**
@@ -6594,12 +6625,16 @@ declare namespace LocalJSX {
          */
         "mirrored"?: boolean;
         /**
-          * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
+          * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead
          */
         "onCalciteSliderChange"?: (event: CustomEvent<any>) => void;
         /**
           * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
-          * @deprecated use calciteSliderChange instead
+         */
+        "onCalciteSliderInput"?: (event: CustomEvent<any>) => void;
+        /**
+          * Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread.
+          * @deprecated use calciteSliderInput instead
          */
         "onCalciteSliderUpdate"?: (event: CustomEvent<any>) => void;
         /**
@@ -6644,6 +6679,10 @@ declare namespace LocalJSX {
           * The selector for the handle elements.
          */
         "handleSelector"?: string;
+        /**
+          * Indicates the horizontal or vertical orientation of the component.
+         */
+        "layout"?: Layout;
         /**
           * When true, content is waiting to be loaded. This state shows a busy indicator.
          */
@@ -6760,16 +6799,24 @@ declare namespace LocalJSX {
         "itemTitle"?: string;
     }
     interface CalciteSwitch {
+        /**
+          * True if the switch is initially on
+         */
+        "checked"?: boolean;
         /**
           * True if the switch is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Applies to the aria-label attribute on the switch
+         */
+        "label"?: string;
         /**
           * The name of the switch input
          */
         "name"?: string;
         /**
-          * Fires when the switched value has changed.
+          * Fires when the checked value has changed.
          */
         "onCalciteSwitchChange"?: (event: CustomEvent<any>) => void;
         /**
@@ -6778,6 +6825,7 @@ declare namespace LocalJSX {
         "scale"?: Scale;
         /**
           * True if the switch is initially on
+          * @deprecated use 'checked' instead.
          */
         "switched"?: boolean;
         /**
@@ -6930,6 +6978,10 @@ declare namespace LocalJSX {
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
         "name"?: string;
+        /**
+          * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+         */
+        "onCalciteTileSelectChange"?: (event: CustomEvent<any>) => void;
         /**
           * The selection mode of the tile select: radio (single) or checkbox (multiple).
          */

package/dist/types/preact.d.ts

@@ -58,9 +58,10 @@ declare module "preact/src/jsx" {
         "oncalciteCardSelect"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-checkbox": Omit<JSX.CalciteCheckbox, "onCalciteCheckboxChange" | "onCalciteCheckboxFocusedChange"> & JSXInternal.HTMLAttributes<HTMLCalciteCheckboxElement> & {
+      "calcite-checkbox": Omit<JSX.CalciteCheckbox, "onCalciteInternalCheckboxBlur" | "onCalciteCheckboxChange" | "onCalciteInternalCheckboxFocus"> & JSXInternal.HTMLAttributes<HTMLCalciteCheckboxElement> & {
+        "oncalciteInternalCheckboxBlur"?: (event: CustomEvent<any>) => void;
         "oncalciteCheckboxChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteCheckboxFocusedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalCheckboxFocus"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-chip": Omit<JSX.CalciteChip, "onCalciteChipDismiss"> & JSXInternal.HTMLAttributes<HTMLCalciteChipElement> & {
@@ -172,8 +173,8 @@ declare module "preact/src/jsx" {
         "oncalciteInputTimePickerChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-label": Omit<JSX.CalciteLabel, "onCalciteLabelFocus"> & JSXInternal.HTMLAttributes<HTMLCalciteLabelElement> & {
-        "oncalciteLabelFocus"?: (event: CustomEvent<any>) => void;
+      "calcite-label": Omit<JSX.CalciteLabel, "onCalciteInternalLabelClick"> & JSXInternal.HTMLAttributes<HTMLCalciteLabelElement> & {
+        "oncalciteInternalLabelClick"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-link": JSX.CalciteLink & JSXInternal.HTMLAttributes<HTMLCalciteLinkElement>
@@ -239,10 +240,11 @@ declare module "preact/src/jsx" {
 
       "calcite-radio": JSX.CalciteRadio & JSXInternal.HTMLAttributes<HTMLCalciteRadioElement>
 
-      "calcite-radio-button": Omit<JSX.CalciteRadioButton, "onCalciteRadioButtonChange" | "onCalciteRadioButtonCheckedChange" | "onCalciteRadioButtonFocusedChange"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonElement> & {
+      "calcite-radio-button": Omit<JSX.CalciteRadioButton, "onCalciteInternalRadioButtonBlur" | "onCalciteRadioButtonChange" | "onCalciteInternalRadioButtonCheckedChange" | "onCalciteInternalRadioButtonFocus"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonElement> & {
+        "oncalciteInternalRadioButtonBlur"?: (event: CustomEvent<any>) => void;
         "oncalciteRadioButtonChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteRadioButtonCheckedChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteRadioButtonFocusedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalRadioButtonCheckedChange"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalRadioButtonFocus"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-radio-button-group": Omit<JSX.CalciteRadioButtonGroup, "onCalciteRadioButtonGroupChange"> & JSXInternal.HTMLAttributes<HTMLCalciteRadioButtonGroupElement> & {
@@ -275,7 +277,8 @@ declare module "preact/src/jsx" {
         "oncalciteShellPanelToggle"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-slider": Omit<JSX.CalciteSlider, "onCalciteSliderChange" | "onCalciteSliderUpdate"> & JSXInternal.HTMLAttributes<HTMLCalciteSliderElement> & {
+      "calcite-slider": Omit<JSX.CalciteSlider, "onCalciteSliderInput" | "onCalciteSliderChange" | "onCalciteSliderUpdate"> & JSXInternal.HTMLAttributes<HTMLCalciteSliderElement> & {
+        "oncalciteSliderInput"?: (event: CustomEvent<any>) => void;
         "oncalciteSliderChange"?: (event: CustomEvent<any>) => void;
         "oncalciteSliderUpdate"?: (event: CustomEvent<any>) => void;
       }
@@ -322,7 +325,9 @@ declare module "preact/src/jsx" {
 
       "calcite-tile": JSX.CalciteTile & JSXInternal.HTMLAttributes<HTMLCalciteTileElement>
 
-      "calcite-tile-select": JSX.CalciteTileSelect & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectElement>
+      "calcite-tile-select": Omit<JSX.CalciteTileSelect, "onCalciteTileSelectChange"> & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectElement> & {
+        "oncalciteTileSelectChange"?: (event: CustomEvent<any>) => void;
+      }
 
       "calcite-tile-select-group": JSX.CalciteTileSelectGroup & JSXInternal.HTMLAttributes<HTMLCalciteTileSelectGroupElement>
 

package/dist/types/utils/dom.d.ts

@@ -31,7 +31,6 @@ export declare function getSlotted<T extends Element = Element>(element: Element
 }): T[];
 export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string, options?: GetSlottedOptions): T | null;
 export declare function filterDirectChildren<T extends Element>(el: Element, selector: string): T[];
-export declare function hasLabel(labelEl: HTMLCalciteLabelElement, el: HTMLElement): boolean;
 export declare function setRequestedIcon(iconObject: Record<string, string>, iconValue: string | boolean, matchedValue: string): string;
 export declare function intersects(rect1: DOMRect, rect2: DOMRect): boolean;
 export {};

package/dist/types/utils/label.d.ts

@@ -0,0 +1,30 @@
+export interface LabelableComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * Text label.
+   */
+  label?: string;
+  /**
+   * The label this component is associated with.
+   */
+  labelEl: HTMLCalciteLabelElement;
+  /**
+   * Hook for components to provide custom label click behavior.
+   */
+  onLabelClick: (event: CustomEvent<any>) => void;
+}
+/**
+ * Helper to set up label interactions on connectedCallback.
+ */
+export declare function connectLabel(component: LabelableComponent): void;
+/**
+ * Helper to tear down label interactions on disconnectedCallback.
+ */
+export declare function disconnectLabel(component: LabelableComponent): void;
+/**
+ * Helper to get the label text from a component.
+ */
+export declare function getLabelText(component: LabelableComponent): string;

package/dist/types/utils/number.d.ts

@@ -1,4 +1,3 @@
-export declare function isValidDecimal(value: number | string): boolean;
 export declare function isValidNumber(numberString: string): boolean;
 export declare function parseNumberString(numberString?: string): string;
 export declare function sanitizeDecimalString(decimalString: string): string;

package/dist/types/utils/resources.d.ts

@@ -1,3 +1,9 @@
+import { ThemeClass, ThemeName } from "../components/interfaces";
+interface Theme {
+  name: ThemeName;
+  className: ThemeClass;
+}
+export declare const THEMES: Theme[];
 export declare const CSS_UTILITY: {
   autoTheme: string;
   darkTheme: string;
@@ -7,3 +13,4 @@ export declare const CSS_UTILITY: {
 export declare const TEXT: {
   loading: string;
 };
+export {};