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

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"
@@ -1323,7 +1327,7 @@ export namespace Components {
         /**
           * Filter value.
          */
-        "value"?: string;
+        "value": string;
     }
     interface CalciteFlow {
         /**
@@ -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"
@@ -5418,7 +5435,7 @@ declare namespace LocalJSX {
         /**
           * The items to filter through. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.  This property is required.
          */
-        "items": object[];
+        "items"?: object[];
         /**
           * This event fires when the filter text changes.
          */
@@ -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 {};

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

@@ -25,12 +25,14 @@ export interface LabelableComponent {
  * @internal
  */
 export declare const labelClickEvent = "calciteInternalLabelClick";
+export declare const labelConnectedEvent = "calciteInternalLabelConnected";
+export declare const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
 /**
  * Helper to set up label interactions on connectedCallback.
  */
 export declare function connectLabel(component: LabelableComponent): void;
 /**
- * Helper to tear down label interactions on disconnectedCallback.
+ * Helper to tear down label interactions on disconnectedCallback on labelable components.
  */
 export declare function disconnectLabel(component: LabelableComponent): void;
 /**