@esri/calcite-components 1.1.0 → 1.1.1-next.1

package/dist/types/components.d.ts

@@ -2184,6 +2184,9 @@ export namespace Components {
          */
         "target": string;
     }
+    /**
+     * A general purpose list that enables users to construct list items that conform to Calcite styling.
+     */
     interface CalciteList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -2570,6 +2573,9 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -2623,6 +2629,9 @@ export namespace Components {
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickListGroup {
         /**
           * Specifies the title for all nested `calcite-pick-list-item`s.
@@ -2633,6 +2642,9 @@ export namespace Components {
          */
         "headingLevel": HeadingLevel;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickListItem {
         /**
           * A description for the component that displays below the label text.
@@ -3816,6 +3828,9 @@ export namespace Components {
         "selected": boolean;
         "selectionMode": SelectionMode;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalciteValueList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -3881,6 +3896,9 @@ export namespace Components {
          */
         "setFocus": (focusId?: ListFocusId) => Promise<void>;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalciteValueListItem {
         /**
           * A description for the component that displays below the label text.
@@ -4469,6 +4487,9 @@ declare global {
         prototype: HTMLCalciteLinkElement;
         new (): HTMLCalciteLinkElement;
     };
+    /**
+     * A general purpose list that enables users to construct list items that conform to Calcite styling.
+     */
     interface HTMLCalciteListElement extends Components.CalciteList, HTMLStencilElement {
     }
     var HTMLCalciteListElement: {
@@ -4529,18 +4550,27 @@ declare global {
         prototype: HTMLCalcitePanelElement;
         new (): HTMLCalcitePanelElement;
     };
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface HTMLCalcitePickListElement extends Components.CalcitePickList, HTMLStencilElement {
     }
     var HTMLCalcitePickListElement: {
         prototype: HTMLCalcitePickListElement;
         new (): HTMLCalcitePickListElement;
     };
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface HTMLCalcitePickListGroupElement extends Components.CalcitePickListGroup, HTMLStencilElement {
     }
     var HTMLCalcitePickListGroupElement: {
         prototype: HTMLCalcitePickListGroupElement;
         new (): HTMLCalcitePickListGroupElement;
     };
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface HTMLCalcitePickListItemElement extends Components.CalcitePickListItem, HTMLStencilElement {
     }
     var HTMLCalcitePickListItemElement: {
@@ -4739,12 +4769,18 @@ declare global {
         prototype: HTMLCalciteTreeItemElement;
         new (): HTMLCalciteTreeItemElement;
     };
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface HTMLCalciteValueListElement extends Components.CalciteValueList, HTMLStencilElement {
     }
     var HTMLCalciteValueListElement: {
         prototype: HTMLCalciteValueListElement;
         new (): HTMLCalciteValueListElement;
     };
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface HTMLCalciteValueListItemElement extends Components.CalciteValueListItem, HTMLStencilElement {
     }
     var HTMLCalciteValueListItemElement: {
@@ -6889,6 +6925,9 @@ declare namespace LocalJSX {
          */
         "target"?: string;
     }
+    /**
+     * A general purpose list that enables users to construct list items that conform to Calcite styling.
+     */
     interface CalciteList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -7231,6 +7270,9 @@ declare namespace LocalJSX {
          */
         "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<void>) => void;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -7283,6 +7325,9 @@ declare namespace LocalJSX {
          */
         "selectionFollowsFocus"?: boolean;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickListGroup {
         /**
           * Specifies the title for all nested `calcite-pick-list-item`s.
@@ -7293,6 +7338,9 @@ declare namespace LocalJSX {
          */
         "headingLevel"?: HeadingLevel;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalcitePickListItem {
         /**
           * A description for the component that displays below the label text.
@@ -8390,6 +8438,9 @@ declare namespace LocalJSX {
          */
         "selected"?: boolean;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalciteValueList {
         /**
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -8454,6 +8505,9 @@ declare namespace LocalJSX {
          */
         "selectionFollowsFocus"?: boolean;
     }
+    /**
+     * @deprecated Use the `list` component instead.
+     */
     interface CalciteValueListItem {
         /**
           * A description for the component that displays below the label text.
@@ -8643,6 +8697,9 @@ declare module "@stencil/core" {
             "calcite-input-time-picker": LocalJSX.CalciteInputTimePicker & JSXBase.HTMLAttributes<HTMLCalciteInputTimePickerElement>;
             "calcite-label": LocalJSX.CalciteLabel & JSXBase.HTMLAttributes<HTMLCalciteLabelElement>;
             "calcite-link": LocalJSX.CalciteLink & JSXBase.HTMLAttributes<HTMLCalciteLinkElement>;
+            /**
+             * A general purpose list that enables users to construct list items that conform to Calcite styling.
+             */
             "calcite-list": LocalJSX.CalciteList & JSXBase.HTMLAttributes<HTMLCalciteListElement>;
             "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes<HTMLCalciteListItemElement>;
             "calcite-list-item-group": LocalJSX.CalciteListItemGroup & JSXBase.HTMLAttributes<HTMLCalciteListItemGroupElement>;
@@ -8653,8 +8710,17 @@ declare module "@stencil/core" {
             "calcite-option-group": LocalJSX.CalciteOptionGroup & JSXBase.HTMLAttributes<HTMLCalciteOptionGroupElement>;
             "calcite-pagination": LocalJSX.CalcitePagination & JSXBase.HTMLAttributes<HTMLCalcitePaginationElement>;
             "calcite-panel": LocalJSX.CalcitePanel & JSXBase.HTMLAttributes<HTMLCalcitePanelElement>;
+            /**
+             * @deprecated Use the `list` component instead.
+             */
             "calcite-pick-list": LocalJSX.CalcitePickList & JSXBase.HTMLAttributes<HTMLCalcitePickListElement>;
+            /**
+             * @deprecated Use the `list` component instead.
+             */
             "calcite-pick-list-group": LocalJSX.CalcitePickListGroup & JSXBase.HTMLAttributes<HTMLCalcitePickListGroupElement>;
+            /**
+             * @deprecated Use the `list` component instead.
+             */
             "calcite-pick-list-item": LocalJSX.CalcitePickListItem & JSXBase.HTMLAttributes<HTMLCalcitePickListItemElement>;
             "calcite-popover": LocalJSX.CalcitePopover & JSXBase.HTMLAttributes<HTMLCalcitePopoverElement>;
             "calcite-progress": LocalJSX.CalciteProgress & JSXBase.HTMLAttributes<HTMLCalciteProgressElement>;
@@ -8688,7 +8754,13 @@ declare module "@stencil/core" {
             "calcite-tooltip": LocalJSX.CalciteTooltip & JSXBase.HTMLAttributes<HTMLCalciteTooltipElement>;
             "calcite-tree": LocalJSX.CalciteTree & JSXBase.HTMLAttributes<HTMLCalciteTreeElement>;
             "calcite-tree-item": LocalJSX.CalciteTreeItem & JSXBase.HTMLAttributes<HTMLCalciteTreeItemElement>;
+            /**
+             * @deprecated Use the `list` component instead.
+             */
             "calcite-value-list": LocalJSX.CalciteValueList & JSXBase.HTMLAttributes<HTMLCalciteValueListElement>;
+            /**
+             * @deprecated Use the `list` component instead.
+             */
             "calcite-value-list-item": LocalJSX.CalciteValueListItem & JSXBase.HTMLAttributes<HTMLCalciteValueListItemElement>;
         }
     }

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;

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

@@ -86,7 +86,7 @@ export declare function parseDateString(string: string, localeData: DateLocaleDa
   month: number;
   year: number;
 };
-declare type unitOrderSignifier = "m" | "d" | "y";
+type unitOrderSignifier = "m" | "d" | "y";
 /**
  * Based on the unitOrder string, find order of month, day, and year for locale
  *

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

@@ -11,7 +11,7 @@ export declare const tabbableOptions: {
  */
 export declare function ensureId(el: Element): string;
 export declare function nodeListToArray<T extends Element>(nodeList: HTMLCollectionOf<T> | NodeListOf<T> | T[]): T[];
-export declare type Direction = "ltr" | "rtl";
+export type Direction = "ltr" | "rtl";
 export declare function getModeName(el: HTMLElement): "light" | "dark";
 export declare function getElementDir(el: HTMLElement): Direction;
 export declare function getElementProp(el: Element, prop: string, fallbackValue: any): any;
@@ -129,6 +129,6 @@ export declare function isPrimaryPointerButton(event: PointerEvent): boolean;
  * @param destination The target destination element to focus
  * @returns {Element} The focused element
  */
-export declare type FocusElementInGroupDestination = "first" | "last" | "next" | "previous";
+export type FocusElementInGroupDestination = "first" | "last" | "next" | "previous";
 export declare const focusElementInGroup: (elements: Element[], currentElement: Element, destination: FocusElementInGroupDestination) => Element;
 export {};

package/dist/types/utils/floating-ui.d.ts

@@ -7,9 +7,9 @@ export declare const placementDataAttribute = "data-placement";
  * Exported for testing purposes only
  */
 export declare const repositionDebounceTimeout = 100;
-export declare type ReferenceElement = VirtualElement | Element;
-declare type UIType = "menu" | "tooltip" | "popover";
-export declare type OverlayPositioning = Strategy;
+export type ReferenceElement = VirtualElement | Element;
+type UIType = "menu" | "tooltip" | "popover";
+export type OverlayPositioning = Strategy;
 /**
  * Variation Placements change based on element direction.
  *
@@ -19,14 +19,14 @@ export declare type OverlayPositioning = Strategy;
  *
  * see: https://github.com/floating-ui/floating-ui/issues/1563 and https://github.com/floating-ui/floating-ui/discussions/1549
  */
-export declare type EffectivePlacement = Placement;
+export type EffectivePlacement = Placement;
 export declare const placements: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end", "leading-start", "leading", "leading-end", "trailing-end", "trailing", "trailing-start"];
-export declare type LogicalPlacement = typeof placements[number];
+export type LogicalPlacement = typeof placements[number];
 export declare const effectivePlacements: EffectivePlacement[];
 export declare const menuPlacements: MenuPlacement[];
 export declare const menuEffectivePlacements: EffectivePlacement[];
 export declare const flipPlacements: EffectivePlacement[];
-export declare type MenuPlacement = Extract<LogicalPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end">;
+export type MenuPlacement = Extract<LogicalPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end">;
 export declare const defaultMenuPlacement: MenuPlacement;
 export interface FloatingUIComponent {
   /**

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

@@ -20,7 +20,7 @@ export interface FocusTrapComponent {
    */
   updateFocusTrapElements: () => Promise<void>;
 }
-export declare type FocusTrap = _FocusTrap;
+export type FocusTrap = _FocusTrap;
 /**
  * Helper to set up the FocusTrap component.
  *

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

@@ -1,3 +1,4 @@
+import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { FunctionalComponent } from "../stencil-public-runtime";
 /**
  * Exported for testing purposes.

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

@@ -1,7 +1,7 @@
-declare type AttributeObject = {
+type AttributeObject = {
   [k: string]: any;
 };
-declare type AllowedGlobalAttribute = "lang";
+type AllowedGlobalAttribute = "lang";
 /**
  * Watches global attributes of a component.
  *

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

@@ -13,7 +13,7 @@ export interface InteractiveComponent {
    */
   disabled: boolean;
 }
-declare type HostIsTabbablePredicate = () => boolean;
+type HostIsTabbablePredicate = () => boolean;
 /**
  * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
  *

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

@@ -3,8 +3,8 @@ export declare const t9nLocales: string[];
 export declare const locales: string[];
 export declare const numberingSystems: readonly ["arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"];
 export declare const supportedLocales: readonly string[];
-export declare type NumberingSystem = typeof numberingSystems[number];
-export declare type SupportedLocales = typeof supportedLocales[number];
+export type NumberingSystem = typeof numberingSystems[number];
+export type SupportedLocales = typeof supportedLocales[number];
 export declare const defaultNumberingSystem: "arab" | "arabext" | "bali" | "beng" | "deva" | "fullwide" | "gujr" | "guru" | "hanidec" | "khmr" | "knda" | "laoo" | "latn" | "limb" | "mlym" | "mong" | "mymr" | "orya" | "tamldec" | "telu" | "thai" | "tibt";
 export declare const getSupportedNumberingSystem: (numberingSystem: string) => NumberingSystem;
 /**

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

@@ -2,10 +2,10 @@ export interface ExtendedMutationObserver extends MutationObserver {
   new: () => ExtendedMutationObserver;
   unobserve(target: Node): void;
 }
-declare type ObserverType = "mutation" | "intersection" | "resize";
-declare type ObserverCallbackType<T extends ObserverType> = T extends "mutation" ? MutationCallback : T extends "intersection" ? IntersectionObserverCallback : T extends "resize" ? ResizeObserverCallback : never;
-declare type ObserverOptions<T extends ObserverType> = T extends "mutation" ? MutationObserverInit : T extends "intersection" ? IntersectionObserverInit : T extends "resize" ? never : never;
-declare type ObserverInstanceType<T extends ObserverType> = T extends "mutation" ? ExtendedMutationObserver : T extends "intersection" ? IntersectionObserver : T extends "resize" ? ResizeObserver : never;
+type ObserverType = "mutation" | "intersection" | "resize";
+type ObserverCallbackType<T extends ObserverType> = T extends "mutation" ? MutationCallback : T extends "intersection" ? IntersectionObserverCallback : T extends "resize" ? ResizeObserverCallback : never;
+type ObserverOptions<T extends ObserverType> = T extends "mutation" ? MutationObserverInit : T extends "intersection" ? IntersectionObserverInit : T extends "resize" ? never : never;
+type ObserverInstanceType<T extends ObserverType> = T extends "mutation" ? ExtendedMutationObserver : T extends "intersection" ? IntersectionObserver : T extends "resize" ? ResizeObserver : never;
 /**
  * This utility ensures observers are created only for browser contexts.
  *

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

@@ -1,5 +1,5 @@
 import { LocalizedComponent } from "./locale";
-export declare type MessageBundle = Record<string, string>;
+export type MessageBundle = Record<string, string>;
 export declare const componentLangToMessageBundleCache: Record<string, Promise<MessageBundle>>;
 /**
  * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.

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

@@ -1,5 +1,5 @@
 import { NumberingSystem } from "./locale";
-export declare type HourCycle = "12" | "24";
+export type HourCycle = "12" | "24";
 export interface LocalizedTime {
   localizedHour: string;
   localizedHourSuffix: string;
@@ -9,14 +9,14 @@ export interface LocalizedTime {
   localizedSecondSuffix: string;
   localizedMeridiem: string;
 }
-export declare type Meridiem = "AM" | "PM";
-export declare type MinuteOrSecond = "minute" | "second";
+export type Meridiem = "AM" | "PM";
+export type MinuteOrSecond = "minute" | "second";
 export interface Time {
   hour: string;
   minute: string;
   second: string;
 }
-export declare type TimePart = "hour" | "hourSuffix" | "minute" | "minuteSuffix" | "second" | "secondSuffix" | "meridiem";
+export type TimePart = "hour" | "hourSuffix" | "minute" | "minuteSuffix" | "second" | "secondSuffix" | "meridiem";
 export declare const maxTenthForMinuteAndSecond = 5;
 export declare function formatTimePart(number: number): string;
 export declare function formatTimeString(value: string): string;