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

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

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionAppearance } from "./components/accordion/interfaces";
 import { Alignment, Appearance, Columns, FlipContext, Layout, Position, Scale, Status, Width } from "./components/interfaces";
 import { Placement } from "@popperjs/core";
-import { OverlayPositioning, PopperPlacement } from "./utils/popper";
+import { ComputedPlacement, MenuPlacement, OverlayPositioning, PopperPlacement } from "./utils/popper";
 import { AlertDuration, AlertPlacement, StatusColor } from "./components/alert/interfaces";
 import { HeadingLevel } from "./components/functional/Heading";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
@@ -20,8 +20,8 @@ import { ComboboxChildElement, ComboboxSelectionMode } from "./components/combob
 import { DateRangeChange } from "./components/date-picker/interfaces";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
-import { DropdownPlacement, ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { SelectionMode } from "./components/dropdown-group/interfaces";
+import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
 import { InputPlacement } from "./components/input/interfaces";
 import { ModalBackgroundColor } from "./components/modal/interfaces";
@@ -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"
@@ -818,6 +822,10 @@ export namespace Components {
           * Disable combobox input
          */
         "disabled": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -1156,6 +1164,10 @@ export namespace Components {
           * is the dropdown disabled
          */
         "disabled": boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
@@ -1168,7 +1180,7 @@ export namespace Components {
           * Determines where the dropdown will be positioned relative to the button.
           * @default "bottom-leading"
          */
-        "placement": DropdownPlacement;
+        "placement": MenuPlacement;
         /**
           * Updates the position of the component.
          */
@@ -1591,6 +1603,10 @@ export namespace Components {
           * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * Number at which section headings should start for this component.
          */
@@ -1805,6 +1821,7 @@ export namespace Components {
         "disableSpacing": boolean;
         /**
           * is the label disabled
+          * @deprecated use the `disabled` property on the interactive components instead
          */
         "disabled": boolean;
         /**
@@ -1864,6 +1881,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 +2260,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 +3172,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 +3471,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 +4734,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"
@@ -4900,6 +4929,10 @@ declare namespace LocalJSX {
           * Disable combobox input
          */
         "disabled"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * string to override the English "Remove tag" text for when an item is selected.
           * @default "Remove tag"
@@ -5267,6 +5300,10 @@ declare namespace LocalJSX {
           * is the dropdown disabled
          */
         "disabled"?: boolean;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 - this value does not include groupTitles passed to calcite-dropdown-group
          */
@@ -5291,7 +5328,7 @@ declare namespace LocalJSX {
           * Determines where the dropdown will be positioned relative to the button.
           * @default "bottom-leading"
          */
-        "placement"?: DropdownPlacement;
+        "placement"?: MenuPlacement;
         /**
           * specify the scale of dropdown, defaults to m
          */
@@ -5703,6 +5740,10 @@ declare namespace LocalJSX {
           * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: ComputedPlacement[];
         /**
           * Number at which section headings should start for this component.
          */
@@ -5912,6 +5953,7 @@ declare namespace LocalJSX {
         "disableSpacing"?: boolean;
         /**
           * is the label disabled
+          * @deprecated use the `disabled` property on the interactive components instead
          */
         "disabled"?: boolean;
         /**
@@ -5967,6 +6009,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 +7252,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/popper.d.ts

@@ -1,8 +1,15 @@
-import { Placement, Instance as Popper, StrictModifiers, PositioningStrategy } from "@popperjs/core";
+import { Placement, ComputedPlacement as PopperComputedPlacement, Instance as Popper, StrictModifiers, PositioningStrategy } from "@popperjs/core";
 declare type PlacementRtl = "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start";
 declare type VariationRtl = "leading-leading" | "leading-trailing" | "trailing-leading" | "trailing-trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing" | "right-leading" | "right-trailing" | "left-leading" | "left-trailing";
+export declare type ComputedPlacement = PopperComputedPlacement;
 export declare type PopperPlacement = Placement | PlacementRtl | VariationRtl;
 export declare type OverlayPositioning = PositioningStrategy;
+export declare const popperPlacements: PopperPlacement[];
+export declare const popperFlipPlacements: ComputedPlacement[];
+export declare type MenuPlacement = Extract<PopperPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;
+export declare const defaultMenuPlacement: MenuPlacement;
+export declare const popperMenuPlacements: MenuPlacement[];
+export declare const popperMenuFlipPlacements: ComputedPlacement[];
 export declare const CSS: {
   animation: string;
   animationActive: string;