@esri/calcite-components 1.0.0-beta.77 → 1.0.0-beta.80

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

@@ -2,6 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -12,7 +13,7 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class Panel implements ConditionalSlotComponent {
+export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * Hides the panel.
    */
@@ -74,6 +75,7 @@ export declare class Panel implements ConditionalSlotComponent {
    * Opens the action menu.
    */
   menuOpen: boolean;
+  componentDidRender(): void;
   el: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
   dismissButtonEl: HTMLCalciteActionElement;

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

@@ -2,11 +2,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "./shared-list-logic";
 import { HeadingLevel } from "../functional/Heading";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` 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 PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> {
+export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent {
   /**
    * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
    */
@@ -48,6 +49,7 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
   filterEl: HTMLCalciteFilterElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted when any of the item selections have changed.
    */

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -12,6 +12,7 @@ export declare function calciteListItemChangeHandler<T extends Lists>(this: List
 export declare function calciteListItemValueChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
 export declare function calciteListFocusOutHandler<T extends Lists>(this: List<T>, event: FocusEvent): void;
 export declare function keyDownHandler<T extends Lists>(this: List<T>, event: KeyboardEvent): void;
+export declare function moveItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>, direction: "up" | "down"): number;
 export declare function internalCalciteListChangeEvent<T extends Lists>(this: List<T>): void;
 export declare function removeItem<T extends Lists, U extends ListItemElement<T>>(this: List<T>, event: CustomEvent): void;
 export declare function setFocus<T extends Lists>(this: List<T>, focusId: ListFocusId): Promise<void>;

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

@@ -1,11 +1,12 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../pick-list/resources";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot actions-end - a slot for adding actions or content to the end side of the item.
  * @slot actions-start - a slot for adding actions or content to the start side of the item.
  */
-export declare class PickListItem implements ConditionalSlotComponent {
+export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * An optional description for this item.  This will appear below the label text.
    */
@@ -14,7 +15,7 @@ export declare class PickListItem implements ConditionalSlotComponent {
   /**
    * When true, the item cannot be clicked and is visually muted.
    */
-  disabled?: boolean;
+  disabled: boolean;
   /**
    * When false, the item cannot be deselected by user interaction.
    */
@@ -62,6 +63,7 @@ export declare class PickListItem implements ConditionalSlotComponent {
   shiftPressed: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted whenever the item is selected or unselected.
    */

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

@@ -1,6 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { PopperPlacement, OverlayPositioning } from "../../utils/popper";
-import { StrictModifiers, Placement, Instance as Popper } from "@popperjs/core";
+import { PopperPlacement, OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { StrictModifiers, Instance as Popper } from "@popperjs/core";
 import { HeadingLevel } from "../functional/Heading";
 /**
  * @slot - A slot for adding custom content.
@@ -26,7 +26,7 @@ export declare class Popover {
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: Placement[];
+  flipPlacements?: ComputedPlacement[];
   /**
    * Heading text.
    */

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

@@ -13,6 +13,7 @@ export declare const CSS: {
 export declare const TEXT: {
   close: string;
 };
+export declare const defaultPopoverPlacement = "auto";
 export declare const POPOVER_REFERENCE = "data-calcite-popover-reference";
 export declare const ARIA_CONTROLS = "aria-controls";
 export declare const ARIA_EXPANDED = "aria-expanded";

package/dist/types/components/radio-button/radio-button.d.ts

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { CheckableFormCompoment } from "../../utils/form";
-export declare class RadioButton implements LabelableComponent, CheckableFormCompoment {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class RadioButton implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
   el: HTMLCalciteRadioButtonElement;
   /** The checked state of the radio button. */
   checked: boolean;
@@ -88,5 +89,6 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

package/dist/types/components/radio-group/radio-group.d.ts

@@ -3,10 +3,11 @@ import { Layout, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { RadioAppearance } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
-export declare class RadioGroup implements LabelableComponent, FormComponent {
+export declare class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteRadioGroupElement;
   /** specify the appearance style of the radio group, defaults to solid. */
   appearance: RadioAppearance;
@@ -39,6 +40,7 @@ export declare class RadioGroup implements LabelableComponent, FormComponent {
   componentWillLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
   protected handleClick: (event: MouseEvent) => void;
   protected handleSelected(event: Event): void;

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

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-export declare class Rating implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Rating implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteRatingElement;
   /** specify the scale of the component, defaults to m */
   scale: Scale;
@@ -36,6 +37,7 @@ export declare class Rating implements LabelableComponent, FormComponent {
   required: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Fires when the rating value has changed.
    */

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-option`s.
  */
-export declare class Select implements LabelableComponent, FormComponent {
+export declare class Select implements LabelableComponent, FormComponent, InteractiveComponent {
   /**
    * When true, it prevents the option from being selected.
    */
@@ -53,6 +54,7 @@ export declare class Select implements LabelableComponent, FormComponent {
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /**

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

@@ -3,7 +3,8 @@ import { ColorStop, DataSeries } from "../graph/interfaces";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-export declare class Slider implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteSliderElement;
   /** Disable and gray out the slider */
   disabled: boolean;
@@ -179,13 +180,13 @@ export declare class Slider implements LabelableComponent, FormComponent {
    */
   private getRangeLabelOverlap;
   /**
-   * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle button element.
+   * Returns a boolean value representing if the minLabel span element is obscured (being overlapped) by the given handle div element.
    * @param minLabel
    * @param handle
    */
   private isMinTickLabelObscured;
   /**
-   * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle button element.
+   * Returns a boolean value representing if the maxLabel span element is obscured (being overlapped) by the given handle div element.
    * @param maxLabel
    * @param handle
    */

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

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding sortable items.
  */
-export declare class SortableList {
+export declare class SortableList implements InteractiveComponent {
   /**
    * Specifies which items inside the element should be draggable.
    */
@@ -38,6 +39,7 @@ export declare class SortableList {
   sortable: Sortable;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted when the order of the list has changed.
    */

package/dist/types/components/split-button/split-button.d.ts

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { OverlayPositioning } from "../../utils/popper";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
  */
-export declare class SplitButton {
+export declare class SplitButton implements InteractiveComponent {
   el: HTMLCalciteSplitButtonElement;
   /** specify the appearance style of the button, defaults to solid. */
   appearance: ButtonAppearance;
@@ -13,11 +14,13 @@ export declare class SplitButton {
   color: ButtonColor;
   /** is the control disabled  */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
   /**
    * Is the dropdown currently active or not
    * @internal
    */
   active: boolean;
+  activeHandler(): void;
   /** specify the icon used for the dropdown menu, defaults to chevron */
   dropdownIconType: DropdownIconType;
   /** aria label for overflow button */
@@ -45,6 +48,7 @@ export declare class SplitButton {
   calciteSplitButtonPrimaryClick: EventEmitter;
   /** fired when the secondary button is clicked */
   calciteSplitButtonSecondaryClick: EventEmitter;
+  componentDidRender(): void;
   render(): VNode;
   private calciteSplitButtonPrimaryClickHandler;
   private calciteSplitButtonSecondaryClickHandler;

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

@@ -1,9 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class StepperItem {
+export declare class StepperItem implements InteractiveComponent {
   el: HTMLCalciteStepperItemElement;
   /** is the step active */
   active: boolean;
@@ -45,6 +46,7 @@ export declare class StepperItem {
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidUpdate(): void;
+  componentDidRender(): void;
   render(): VNode;
   keyDownHandler(e: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;

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

@@ -2,11 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { CheckableFormCompoment } from "../../utils/form";
-export declare class Switch implements LabelableComponent, CheckableFormCompoment {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Switch implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
   el: HTMLCalciteSwitchElement;
   /** True if the switch is disabled */
   disabled: boolean;
-  disabledWatcher(newDisabled: boolean): void;
   /** Applies to the aria-label attribute on the switch */
   label?: string;
   /** The name of the switch input */
@@ -27,7 +27,6 @@ export declare class Switch implements LabelableComponent, CheckableFormCompomen
   formEl: HTMLFormElement;
   defaultValue: Switch["checked"];
   defaultChecked: boolean;
-  tabindex: number;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   keyDownHandler: (e: KeyboardEvent) => void;
@@ -41,6 +40,6 @@ export declare class Switch implements LabelableComponent, CheckableFormCompomen
   calciteSwitchChange: EventEmitter;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  componentWillLoad(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

package/dist/types/components/tab-title/tab-title.d.ts

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { TabChangeEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 import { FlipContext, Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding text.
  */
-export declare class TabTitle {
+export declare class TabTitle implements InteractiveComponent {
   el: HTMLCalciteTabTitleElement;
   /** Show this tab title as selected */
   active: boolean;
@@ -37,6 +38,7 @@ export declare class TabTitle {
   componentWillRender(): void;
   render(): VNode;
   componentDidLoad(): Promise<void>;
+  componentDidRender(): void;
   tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   onClick(): void;
   keyDownHandler(e: KeyboardEvent): void;

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

@@ -1,10 +1,11 @@
 import { VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot content-start - A slot for adding non-actionable elements before the tile content.
  * @slot content-end - A slot for adding non-actionable elements after the tile content.
  */
-export declare class Tile implements ConditionalSlotComponent {
+export declare class Tile implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTileElement;
   /** The active state of the tile. */
   active: boolean;
@@ -31,6 +32,7 @@ export declare class Tile implements ConditionalSlotComponent {
   icon?: string;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   renderTile(): VNode;
   render(): VNode;
 }

package/dist/types/components/tile-select/tile-select.d.ts

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Alignment, Width } from "../interfaces";
 import { TileSelectType } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class TileSelect {
+export declare class TileSelect implements InteractiveComponent {
   el: HTMLCalciteTileSelectElement;
   /** The checked state of the tile select. */
   checked: boolean;
@@ -52,6 +53,7 @@ export declare class TileSelect {
   mouseleave(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   private renderInput;
   render(): VNode;
 }

package/dist/types/components/tile-select-group/tile-select-group.d.ts

@@ -1,10 +1,15 @@
 import { VNode } from "../../stencil-public-runtime";
 import { TileSelectGroupLayout } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-tile-select`s.
  */
-export declare class TileSelectGroup {
+export declare class TileSelectGroup implements InteractiveComponent {
+  el: HTMLCalciteTileSelectGroupElement;
+  /** The disabled state of the tile select. */
+  disabled: boolean;
   /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
   layout?: TileSelectGroupLayout;
+  componentDidRender(): void;
   render(): VNode;
 }

package/dist/types/components/time-picker/resources.d.ts

@@ -25,6 +25,7 @@ export declare const CSS: {
   "scale-m": string;
   "scale-l": string;
   timePicker: string;
+  meridiemStart: string;
 };
 export declare const TEXT: {
   hour: string;

package/dist/types/components/time-picker/time-picker.d.ts

@@ -69,6 +69,7 @@ export declare class TimePicker {
   private meridiemEl;
   private minuteEl;
   private secondEl;
+  private meridiemOrder;
   hour: string;
   hourChanged(newHour: string): void;
   hourCycle: HourCycle;
@@ -130,6 +131,7 @@ export declare class TimePicker {
   private setSecondEl;
   private setValue;
   private setValuePart;
+  private getMeridiemOrder;
   connectedCallback(): void;
   render(): VNode;
 }

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

@@ -28,6 +28,7 @@ export declare class Tree {
   onFocusIn(event: FocusEvent): void;
   onFocusOut(event: FocusEvent): void;
   onClick(e: CustomEvent<TreeItemSelectDetail>): void;
+  keyDownHandler(event: KeyboardEvent): void;
   updateAncestorTree(e: CustomEvent<TreeItemSelectDetail>): void;
   /**
    * Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property.

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

@@ -2,11 +2,12 @@ import Sortable from "sortablejs";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "../pick-list/shared-list-logic";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @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 ValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> {
+export declare class ValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> implements InteractiveComponent {
   /**
    * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
    */
@@ -55,6 +56,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   filterEl: HTMLCalciteFilterElement;
   connectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
   /**
    * Emitted when any of the item selections have changed.
@@ -64,6 +66,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    * Emitted when the order of the list has changed.
    */
   calciteListOrderChange: EventEmitter<any[]>;
+  calciteListFocusOutHandler(event: FocusEvent): void;
   calciteListItemRemoveHandler(event: CustomEvent<void>): void;
   calciteListItemChangeHandler(event: CustomEvent): void;
   calciteListItemPropsChangeHandler(event: CustomEvent): void;

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

@@ -1,11 +1,12 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../pick-list/resources";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
  */
-export declare class ValueListItem implements ConditionalSlotComponent {
+export declare class ValueListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * An optional description for this item. Will appear below the label text.
    */
@@ -13,7 +14,7 @@ export declare class ValueListItem implements ConditionalSlotComponent {
   /**
    * When true, the item cannot be clicked and is visually muted
    */
-  disabled?: boolean;
+  disabled: boolean;
   /**
    * @internal When false, the item cannot be deselected by user interaction.
    */
@@ -56,6 +57,7 @@ export declare class ValueListItem implements ConditionalSlotComponent {
   guid: string;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.