@esri/calcite-components 1.0.0-next.414 → 1.0.0-next.415

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/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;

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/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.

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.

package/dist/types/components.d.ts

@@ -631,6 +631,10 @@ export namespace Components {
           * Internal prop for advanced use-cases.
          */
         "color": InternalColor | null;
+        /**
+          * When true, disabled prevents user interaction.
+         */
+        "disabled": boolean;
         /**
           * The format of the value property.  When "auto", the format will be inferred from `value` when set.
           * @default "auto"
@@ -1805,6 +1809,7 @@ export namespace Components {
         "disableSpacing": boolean;
         /**
           * is the label disabled
+          * @deprecated use the `disabled` property on the interactive components instead
          */
         "disabled": boolean;
         /**
@@ -1864,6 +1869,10 @@ export namespace Components {
         "target"?: string;
     }
     interface CalciteList {
+        /**
+          * When true, disabled prevents user interaction.
+         */
+        "disabled": boolean;
         /**
           * Number at which section headings should start for this component.
          */
@@ -2239,7 +2248,7 @@ export namespace Components {
         /**
           * When true, the item cannot be clicked and is visually muted.
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         /**
           * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
           * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
@@ -3151,6 +3160,10 @@ export namespace Components {
         "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteTileSelectGroup {
+        /**
+          * The disabled state of the tile select.
+         */
+        "disabled": boolean;
         /**
           * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts
          */
@@ -3446,7 +3459,7 @@ export namespace Components {
         /**
           * When true, the item cannot be clicked and is visually muted
          */
-        "disabled"?: boolean;
+        "disabled": boolean;
         "handleActivated"?: boolean;
         /**
           * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
@@ -4709,6 +4722,10 @@ declare namespace LocalJSX {
           * specify the appearance - default (containing border), or minimal (no containing border)
          */
         "appearance"?: ColorAppearance;
+        /**
+          * When true, disabled prevents user interaction.
+         */
+        "disabled"?: boolean;
         /**
           * The format of the value property.  When "auto", the format will be inferred from `value` when set.
           * @default "auto"
@@ -5912,6 +5929,7 @@ declare namespace LocalJSX {
         "disableSpacing"?: boolean;
         /**
           * is the label disabled
+          * @deprecated use the `disabled` property on the interactive components instead
          */
         "disabled"?: boolean;
         /**
@@ -5967,6 +5985,10 @@ declare namespace LocalJSX {
         "target"?: string;
     }
     interface CalciteList {
+        /**
+          * When true, disabled prevents user interaction.
+         */
+        "disabled"?: boolean;
         /**
           * Number at which section headings should start for this component.
          */
@@ -7206,6 +7228,10 @@ declare namespace LocalJSX {
         "width"?: Extract<"auto" | "full", Width>;
     }
     interface CalciteTileSelectGroup {
+        /**
+          * The disabled state of the tile select.
+         */
+        "disabled"?: boolean;
         /**
           * Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts
          */

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

@@ -0,0 +1,28 @@
+export interface InteractiveComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * When true, prevents user interaction.
+   *
+   * Notes:
+   *
+   * * This prop should use the @Prop decorator and reflect.
+   * * The `disabled` Sass mixin must be added to the component's stylesheet.
+   */
+  disabled: boolean;
+}
+declare type HostIsTabbablePredicate = () => boolean;
+/**
+ * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
+ *
+ * This should be used in the `componentDidRender` lifecycle hook.
+ *
+ * **Notes**
+ *
+ * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
+ * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ */
+export declare function updateHostInteraction(component: InteractiveComponent, hostIsTabbable?: boolean | HostIsTabbablePredicate | "managed"): void;
+export {};