@esri/calcite-components 1.0.0-next.637 → 1.0.0-next.638

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

@@ -1,6 +1,8 @@
-import { VNode } from "../../stencil-public-runtime";
-import { HeadingLevel } from "../functional/Heading";
+import { VNode, Event, EventEmitter } from "../../stencil-public-runtime";
+import { SelectionAppearance, SelectionMode } from "./resources";
 import { InteractiveComponent } from "../../utils/interactive";
+import { HeadingLevel } from "../functional/Heading";
+import { ItemData } from "../list-item/interfaces";
 import { LoadableComponent } from "../../utils/loadable";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
@@ -12,15 +14,95 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
+  /**
+   * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+   */
+  filterEnabled: boolean;
+  handleFilterEnabledChange(): void;
+  /**
+   * **read-only** The currently filtered items
+   *
+   * @readonly
+   */
+  filteredItems: HTMLCalciteListItemElement[];
+  /**
+   * **read-only** The currently filtered items
+   *
+   * @readonly
+   */
+  filteredData: ItemData;
+  /**
+   * Placeholder text for the filter input field.
+   */
+  filterPlaceholder: string;
+  /**
+   * Text for the filter input field.
+   */
+  filterText: string;
   /**
    * Specifies the number at which section headings should start.
+   *
+   * @deprecated no longer necessary.
    */
   headingLevel: HeadingLevel;
+  /**
+   * Specifies an accessible name for the component.
+   */
+  label?: string;
+  /**
+   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   */
+  loading: boolean;
+  /**
+   * One of the items within the list can be opened.
+   *
+   * @internal
+   */
+  openable: boolean;
+  /**
+   * **read-only** The currently selected items
+   *
+   * @readonly
+   */
+  selectedItems: HTMLCalciteListItemElement[];
+  /**
+   * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+   */
+  selectionMode: SelectionMode;
+  /**
+   * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+   */
+  selectionAppearance: SelectionAppearance;
+  handleSelectionAppearanceChange(): void;
+  /**
+   * Emits when a filter has changed.
+   */
+  calciteListFilter: EventEmitter<void>;
+  handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
+  handleCalciteListItemSelect(event: CustomEvent): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   componentWillLoad(): void;
-  componentDidLoad(): void;
   componentDidRender(): void;
+  componentDidLoad(): void;
   el: HTMLCalciteListElement;
+  listItems: HTMLCalciteListItemElement[];
+  enabledListItems: HTMLCalciteListItemElement[];
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
+  dataForFilter: ItemData;
+  filterEl: HTMLCalciteFilterElement;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   render(): VNode;
+  handleDefaultSlotChange: (event: Event) => void;
+  setActiveListItem: () => void;
+  private updateSelectedItems;
+  private updateFilteredItems;
+  handleFilter: (event: CustomEvent) => void;
+  getItemData: () => ItemData;
+  private updateListItems;
+  queryListItems: () => HTMLCalciteListItemElement[];
+  focusRow: (focusEl: HTMLCalciteListItemElement) => void;
+  isNavigable: (listItem: HTMLCalciteListItemElement) => boolean;
+  handleListKeydown: (event: KeyboardEvent) => void;
 }

package/dist/types/components/list/resources.d.ts

@@ -1,3 +1,10 @@
 export declare const CSS: {
   container: string;
+  table: string;
+  scrim: string;
+  tableContainer: string;
+  sticky: string;
 };
+export declare const debounceTimeout = 100;
+export declare type SelectionAppearance = "border" | "icon";
+export declare type SelectionMode = "single" | "multiple" | "none";

package/dist/types/components/list-item/interfaces.d.ts

@@ -0,0 +1,6 @@
+export type ItemData = {
+  label: string;
+  description: string;
+  metadata: Record<string, unknown>;
+  value: string;
+}[];

package/dist/types/components/list-item/list-item.d.ts

@@ -1,6 +1,6 @@
-import { VNode } from "../../stencil-public-runtime";
-import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { VNode, Event, EventEmitter } from "../../stencil-public-runtime";
 import { InteractiveComponent } from "../../utils/interactive";
+import { SelectionAppearance, SelectionMode } from "../list/resources";
 import { LoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -9,11 +9,14 @@ import { LoadableComponent } from "../../utils/loadable";
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
  */
-export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent {
+export declare class ListItem implements InteractiveComponent, LoadableComponent {
   /**
-   * When `true`, prevents the content of the component from user interaction.
+   * Sets the item as focusable. Only one item should be focusable within a list.
+   *
+   * @internal
    */
-  nonInteractive: boolean;
+  active: boolean;
+  activeHandler(active: boolean): void;
   /**
    * A description for the component. Displays below the label text.
    */
@@ -26,15 +29,88 @@ export declare class ListItem implements ConditionalSlotComponent, InteractiveCo
    * The label text of the component. Displays above the description text.
    */
   label: string;
+  /**
+   * Provides additional metadata to the component. Primary use is for a filter on the parent list.
+   */
+  metadata?: Record<string, unknown>;
+  /**
+   * When `true`, prevents the content of the component from user interaction.
+   *
+   * @deprecated no longer necessary.
+   */
+  nonInteractive: boolean;
+  /**
+   * When true, item is open to show child components.
+   */
+  open: boolean;
+  /**
+   * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
+   *
+   * @internal
+   */
+  setSize: number;
+  /**
+   * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility.
+   *
+   * @internal
+   */
+  setPosition: number;
+  /**
+   * When true, the component is selected.
+   */
+  selected: boolean;
+  handleSelectedChange(value: boolean): void;
+  /**
+   * The component's value.
+   */
+  value: any;
+  /**
+   * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+   *
+   * @internal
+   */
+  selectionMode: SelectionMode;
+  /**
+   * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+   *
+   * @internal
+   */
+  selectionAppearance: SelectionAppearance;
+  /**
+   * Emitted whenever the list item content is selected.
+   */
+  calciteListItemSelect: EventEmitter<void>;
+  /**
+   *
+   * @internal
+   */
+  calciteInternalListItemSelect: EventEmitter<void>;
+  /**
+   *
+   * @internal
+   */
+  calciteInternalFocusPreviousItem: EventEmitter<void>;
   el: HTMLCalciteListItemElement;
-  focusEl: HTMLButtonElement;
+  level: number;
+  visualLevel: number;
+  parentListEl: HTMLCalciteListElement;
+  openable: boolean;
+  hasActionsStart: boolean;
+  hasActionsEnd: boolean;
+  hasContentStart: boolean;
+  hasContentEnd: boolean;
+  containerEl: HTMLTableRowElement;
+  contentEl: HTMLTableCellElement;
+  actionsStartEl: HTMLTableCellElement;
+  actionsEndEl: HTMLTableCellElement;
+  connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  renderSelected(): VNode;
+  renderOpen(): VNode;
   renderActionsStart(): VNode;
   renderActionsEnd(): VNode;
   renderContentStart(): VNode;
@@ -42,4 +118,15 @@ export declare class ListItem implements ConditionalSlotComponent, InteractiveCo
   renderContent(): VNode;
   renderContentContainer(): VNode;
   render(): VNode;
+  handleActionsStartSlotChange: (event: Event) => void;
+  handleActionsEndSlotChange: (event: Event) => void;
+  handleContentStartSlotChange: (event: Event) => void;
+  handleContentEndSlotChange: (event: Event) => void;
+  setSelectionDefaults(): void;
+  handleDefaultSlotChange: (event: Event) => void;
+  toggleOpen: () => void;
+  toggleSelected: () => void;
+  handleItemKeyDown: (event: KeyboardEvent) => void;
+  focusCellNull: () => void;
+  focusCell: (focusEl: HTMLTableCellElement, saveFocusIndex?: boolean) => void;
 }

package/dist/types/components/list-item/resources.d.ts

@@ -1,8 +1,12 @@
 export declare const CSS: {
   container: string;
+  containerBorderSelected: string;
+  containerBorderUnselected: string;
   contentContainer: string;
+  contentContainerSelectable: string;
+  contentContainerHasCenterContent: string;
   nestedContainer: string;
-  contentContainerButton: string;
+  nestedContainerHidden: string;
   content: string;
   actionsStart: string;
   contentStart: string;
@@ -10,7 +14,8 @@ export declare const CSS: {
   description: string;
   contentEnd: string;
   actionsEnd: string;
-  hasCenterContent: string;
+  selectionContainer: string;
+  openContainer: string;
 };
 export declare const SLOTS: {
   actionsStart: string;
@@ -18,3 +23,13 @@ export declare const SLOTS: {
   contentEnd: string;
   actionsEnd: string;
 };
+export declare const MAX_COLUMNS = 5;
+export declare const ICONS: {
+  selectedMultiple: string;
+  selectedSingle: string;
+  unselected: string;
+  closedLTR: string;
+  closedRTL: string;
+  open: string;
+  blank: string;
+};

package/dist/types/components/list-item/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getListItemChildren(event: Event): HTMLCalciteListItemElement[];
+export declare function updateListItemChildren(listItemChildren: HTMLCalciteListItemElement[]): void;
+export declare function getDepth(element: HTMLElement, includeGroup?: boolean): number;

package/dist/types/components/list-item-group/list-item-group.d.ts

@@ -1,9 +1,14 @@
 import { VNode } from "../../stencil-public-runtime";
+import { InteractiveComponent } from "../../utils/interactive";
 import { HeadingLevel } from "../functional/Heading";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  */
-export declare class ListItemGroup {
+export declare class ListItemGroup implements InteractiveComponent {
+  /**
+   * When true, interaction is prevented and the component is displayed with lower opacity.
+   */
+  disabled: boolean;
   /**
    * The header text for all nested `calcite-list-item` rows.
    *
@@ -11,8 +16,13 @@ export declare class ListItemGroup {
   heading: string;
   /**
    * Specifies the number at which section headings should start.
+   *
+   * @deprecated no longer necessary.
    */
   headingLevel: HeadingLevel;
+  connectedCallback(): void;
+  componentDidRender(): void;
   el: HTMLCalciteListItemGroupElement;
+  visualLevel: number;
   render(): VNode;
 }

package/dist/types/components/list-item-group/resources.d.ts

@@ -1,4 +1,4 @@
 export declare const CSS: {
-  heading: string;
   container: string;
+  heading: string;
 };

package/dist/types/components.d.ts

@@ -26,9 +26,11 @@ import { RequestedItem as RequestedItem2, SelectionMode } from "./components/dro
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
 import { InputPlacement } from "./components/input/interfaces";
 import { InputPlacement as InputPlacement1 } from "./components/input-number/interfaces";
+import { ItemData } from "./components/list-item/interfaces";
+import { SelectionAppearance, SelectionMode as SelectionMode1 } from "./components/list/resources";
 import { ModalBackgroundColor } from "./components/modal/interfaces";
 import { PaginationDetail } from "./components/pagination/pagination";
-import { ItemData, ListFocusId } from "./components/pick-list/shared-list-logic";
+import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
 import { RadioAppearance } from "./components/radio-group/interfaces";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
@@ -2399,16 +2401,68 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+         */
+        "filterEnabled": boolean;
+        /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder": string;
+        /**
+          * Text for the filter input field.
+         */
+        "filterText": string;
+        /**
+          * **read-only** The currently filtered items
+          * @readonly
+         */
+        "filteredData": ItemData;
+        /**
+          * **read-only** The currently filtered items
+          * @readonly
+         */
+        "filteredItems": HTMLCalciteListItemElement[];
         /**
           * Specifies the number at which section headings should start.
+          * @deprecated no longer necessary.
          */
         "headingLevel": HeadingLevel;
+        /**
+          * Specifies an accessible name for the component.
+         */
+        "label"?: string;
+        /**
+          * When true, content is waiting to be loaded. This state shows a busy indicator.
+         */
+        "loading": boolean;
+        /**
+          * One of the items within the list can be opened.
+         */
+        "openable": boolean;
+        /**
+          * **read-only** The currently selected items
+          * @readonly
+         */
+        "selectedItems": HTMLCalciteListItemElement[];
+        /**
+          * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+         */
+        "selectionAppearance": SelectionAppearance;
+        /**
+          * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+         */
+        "selectionMode": SelectionMode1;
         /**
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
     }
     interface CalciteListItem {
+        /**
+          * Sets the item as focusable. Only one item should be focusable within a list.
+         */
+        "active": boolean;
         /**
           * A description for the component. Displays below the label text.
          */
@@ -2421,22 +2475,60 @@ export namespace Components {
           * The label text of the component. Displays above the description text.
          */
         "label": string;
+        /**
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
+         */
+        "metadata"?: Record<string, unknown>;
         /**
           * When `true`, prevents the content of the component from user interaction.
+          * @deprecated no longer necessary.
          */
         "nonInteractive": boolean;
+        /**
+          * When true, item is open to show child components.
+         */
+        "open": boolean;
+        /**
+          * When true, the component is selected.
+         */
+        "selected": boolean;
+        /**
+          * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+         */
+        "selectionAppearance": SelectionAppearance;
+        /**
+          * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+         */
+        "selectionMode": SelectionMode1;
         /**
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility.
+         */
+        "setPosition": number;
+        /**
+          * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
+         */
+        "setSize": number;
+        /**
+          * The component's value.
+         */
+        "value": any;
     }
     interface CalciteListItemGroup {
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
         /**
           * The header text for all nested `calcite-list-item` rows.
          */
         "heading": string;
         /**
           * Specifies the number at which section headings should start.
+          * @deprecated no longer necessary.
          */
         "headingLevel": HeadingLevel;
     }
@@ -2783,7 +2875,7 @@ export namespace Components {
           * **read-only** The currently filtered items
           * @readonly
          */
-        "filteredData": ItemData;
+        "filteredData": ItemData1;
         /**
           * **read-only** The currently filtered items
           * @readonly
@@ -4123,7 +4215,7 @@ export namespace Components {
           * **read-only** The currently filtered items
           * @readonly
          */
-        "filteredData": ItemData;
+        "filteredData": ItemData1;
         /**
           * **read-only** The currently filtered items
           * @readonly
@@ -4354,6 +4446,14 @@ export interface CalciteLabelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteLabelElement;
 }
+export interface CalciteListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteListElement;
+}
+export interface CalciteListItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteListItemElement;
+}
 export interface CalciteModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteModalElement;
@@ -7561,10 +7661,58 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+         */
+        "filterEnabled"?: boolean;
+        /**
+          * Placeholder text for the filter input field.
+         */
+        "filterPlaceholder"?: string;
+        /**
+          * Text for the filter input field.
+         */
+        "filterText"?: string;
+        /**
+          * **read-only** The currently filtered items
+          * @readonly
+         */
+        "filteredData"?: ItemData;
+        /**
+          * **read-only** The currently filtered items
+          * @readonly
+         */
+        "filteredItems"?: HTMLCalciteListItemElement[];
         /**
           * Specifies the number at which section headings should start.
+          * @deprecated no longer necessary.
          */
         "headingLevel"?: HeadingLevel;
+        /**
+          * Specifies an accessible name for the component.
+         */
+        "label"?: string;
+        /**
+          * When true, content is waiting to be loaded. This state shows a busy indicator.
+         */
+        "loading"?: boolean;
+        /**
+          * Emits when a filter has changed.
+         */
+        "onCalciteListFilter"?: (event: CalciteListCustomEvent<void>) => void;
+        /**
+          * **read-only** The currently selected items
+          * @readonly
+         */
+        "selectedItems"?: HTMLCalciteListItemElement[];
+        /**
+          * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+         */
+        "selectionAppearance"?: SelectionAppearance;
+        /**
+          * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+         */
+        "selectionMode"?: SelectionMode1;
     }
     interface CalciteListItem {
         /**
@@ -7579,18 +7727,44 @@ declare namespace LocalJSX {
           * The label text of the component. Displays above the description text.
          */
         "label"?: string;
+        /**
+          * Provides additional metadata to the component. Primary use is for a filter on the parent list.
+         */
+        "metadata"?: Record<string, unknown>;
         /**
           * When `true`, prevents the content of the component from user interaction.
+          * @deprecated no longer necessary.
          */
         "nonInteractive"?: boolean;
+        /**
+          * Emitted whenever the list item content is selected.
+         */
+        "onCalciteListItemSelect"?: (event: CalciteListItemCustomEvent<void>) => void;
+        /**
+          * When true, item is open to show child components.
+         */
+        "open"?: boolean;
+        /**
+          * When true, the component is selected.
+         */
+        "selected"?: boolean;
+        /**
+          * The component's value.
+         */
+        "value"?: any;
     }
     interface CalciteListItemGroup {
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
         /**
           * The header text for all nested `calcite-list-item` rows.
          */
         "heading"?: string;
         /**
           * Specifies the number at which section headings should start.
+          * @deprecated no longer necessary.
          */
         "headingLevel"?: HeadingLevel;
     }
@@ -7954,7 +8128,7 @@ declare namespace LocalJSX {
           * **read-only** The currently filtered items
           * @readonly
          */
-        "filteredData"?: ItemData;
+        "filteredData"?: ItemData1;
         /**
           * **read-only** The currently filtered items
           * @readonly
@@ -9246,7 +9420,7 @@ declare namespace LocalJSX {
           * **read-only** The currently filtered items
           * @readonly
          */
-        "filteredData"?: ItemData;
+        "filteredData"?: ItemData1;
         /**
           * **read-only** The currently filtered items
           * @readonly

package/dist/types/preact.d.ts

@@ -209,9 +209,15 @@ declare module "preact/src/jsx" {
 
       "calcite-link": JSX.CalciteLink & JSXInternal.HTMLAttributes<HTMLCalciteLinkElement>
 
-      "calcite-list": JSX.CalciteList & JSXInternal.HTMLAttributes<HTMLCalciteListElement>
+      "calcite-list": Omit<JSX.CalciteList, "onCalciteListFilter"> & JSXInternal.HTMLAttributes<HTMLCalciteListElement> & {
+        "oncalciteListFilter"?: (event: CustomEvent<any>) => void;
+      }
 
-      "calcite-list-item": JSX.CalciteListItem & JSXInternal.HTMLAttributes<HTMLCalciteListItemElement>
+      "calcite-list-item": Omit<JSX.CalciteListItem, "onCalciteListItemSelect" | "onCalciteInternalListItemSelect" | "onCalciteInternalFocusPreviousItem"> & JSXInternal.HTMLAttributes<HTMLCalciteListItemElement> & {
+        "oncalciteListItemSelect"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalListItemSelect"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalFocusPreviousItem"?: (event: CustomEvent<any>) => void;
+      }
 
       "calcite-list-item-group": JSX.CalciteListItemGroup & JSXInternal.HTMLAttributes<HTMLCalciteListItemGroupElement>