@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -3,58 +3,60 @@ 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.
+ * @slot actions-end - A slot for adding actions or content to the end side of the component.
+ * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * An optional description for this item.  This will appear below the label text.
+   * A description for the component that displays below the label text.
    */
   description?: string;
   descriptionWatchHandler(): void;
   /**
-   * When true, the item cannot be clicked and is visually muted.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * When false, the item cannot be deselected by user interaction.
+   * When false, the component cannot be deselected by user interaction.
    */
   disableDeselect: boolean;
   /**
-   * @internal When true, the item cannot be selected by user interaction.
+   * @internal
    */
   nonInteractive: 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)
    */
   icon?: ICON_TYPES | null;
   /**
-   * The main label for this item. This will appear next to the icon.
+   * Label and accessible name for the component. Appears next to the icon.
    */
   label: string;
   labelWatchHandler(): void;
   /**
-   * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+   * Provides additional metadata to the component. Primary use is for a filter on the parent list.
    */
   metadata?: Record<string, unknown>;
   metadataWatchHandler(): void;
   /**
-   * Set this to true to display a remove action that removes the item from the list.
+   * When true, displays a remove action that removes the item from the list.
    */
   removable?: boolean;
   /**
-   * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+   * When true, selects an item. Toggles when an item is checked/unchecked.
    */
   selected: boolean;
   selectedWatchHandler(): void;
   /**
-   * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+   * Accessible name for the component's remove button. Only applicable if removable is "true".
+   *
    * @default "Remove"
    */
   intlRemove: string;
   /**
-   * The item's associated value.
+   * The component's value.
    */
   value: any;
   valueWatchHandler(newValue: any, oldValue: any): void;
@@ -65,7 +67,7 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
   disconnectedCallback(): void;
   componentDidRender(): void;
   /**
-   * Emitted whenever the item is selected or unselected.
+   * Fires when the component is selected or unselected.
    */
   calciteListItemChange: EventEmitter<{
     item: HTMLCalcitePickListItemElement;
@@ -74,25 +76,29 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
     shiftPressed: boolean;
   }>;
   /**
-   * Emitted whenever the remove button is pressed.
+   * Fires when the remove button is pressed.
    */
   calciteListItemRemove: EventEmitter<void>;
   /**
-   * Emitted whenever the the item's label, description, value or metadata properties are modified.
+   * Emits when the the component's label, description, value, or metadata properties are modified.
+   *
    * @internal
    */
-  calciteListItemPropsChange: EventEmitter<void>;
+  calciteInternalListItemPropsChange: EventEmitter<void>;
   /**
-   * Emitted whenever the the item's value property is modified.
+   * Emits when the the component's value property is modified.
+   *
    * @internal
    */
-  calciteListItemValueChange: EventEmitter<{
+  calciteInternalListItemValueChange: EventEmitter<{
     oldValue: any;
     newValue: any;
   }>;
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggles the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   toggleSelected(coerce?: boolean): Promise<void>;
   /** Sets focus on the component. */

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

@@ -0,0 +1,13 @@
+import { ReferenceElement } from "../../utils/popper";
+export default class PopoverManager {
+  private registeredElements;
+  private registeredElementCount;
+  registerElement(referenceEl: ReferenceElement, popover: HTMLCalcitePopoverElement): void;
+  unregisterElement(referenceEl: ReferenceElement): void;
+  private queryPopover;
+  private togglePopovers;
+  private keyHandler;
+  private clickHandler;
+  private addListeners;
+  private removeListeners;
+}

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

@@ -1,5 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { PopperPlacement, OverlayPositioning, ComputedPlacement } from "../../utils/popper";
+import { PopperPlacement, OverlayPositioning, ComputedPlacement, ReferenceElement } from "../../utils/popper";
 import { StrictModifiers, Instance as Popper } from "@popperjs/core";
 import { HeadingLevel } from "../functional/Heading";
 /**
@@ -7,20 +7,25 @@ import { HeadingLevel } from "../functional/Heading";
  */
 export declare class Popover {
   /**
-   * Display a close button within the Popover.
+   * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
+   */
+  autoClose: boolean;
+  /**
+   * When true, a close button is added to the component.
+   *
    * @deprecated use dismissible instead.
    */
   closeButton: boolean;
   /**
-   * Display a close button within the Popover.
+   * When true, a close button is added to the component.
    */
   dismissible: boolean;
   /**
-   * Prevents flipping the popover's placement when it starts to overlap its reference element.
+   * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
    */
   disableFlip: boolean;
   /**
-   * Removes the caret pointer.
+   * When true, removes the caret pointer.
    */
   disablePointer: boolean;
   /**
@@ -29,51 +34,59 @@ export declare class Popover {
   flipPlacements?: ComputedPlacement[];
   flipPlacementsHandler(): void;
   /**
-   * Heading text.
+   * The component header text.
    */
   heading?: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
-  /** Accessible name for the component */
+  /** Accessible name for the component. */
   label: string;
   /**
-   * Offset the position of the popover away from the reference element.
+   * Offsets the position of the popover away from the `referenceElement`.
+   *
    * @default 6
    */
   offsetDistance: number;
   offsetDistanceOffsetHandler(): void;
   /**
-   * Offset the position of the popover along the reference element.
+   * Offsets the position of the popover along the `referenceElement`.
    */
   offsetSkidding: number;
   offsetSkiddingHandler(): void;
   /**
-   * Display and position the component.
+   * When true, displays and positions the component.
    */
   open: boolean;
   openHandler(): void;
-  /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+  /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
   overlayPositioning: OverlayPositioning;
   /**
-   * Determines where the component will be positioned relative to the referenceElement.
+   * Determines where the component will be positioned relative to the `referenceElement`.
+   *
    * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
    */
   placement: PopperPlacement;
   placementHandler(): void;
   /**
-   * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
+   *  The `referenceElement` used to position the component according to its "placement" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used.
    */
-  referenceElement: HTMLElement | string;
+  referenceElement: ReferenceElement | string;
   referenceElementHandler(): void;
-  /** Text for close button.
+  /**
+   * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
+   */
+  triggerDisabled: boolean;
+  /**
+   * Accessible name for the component's close button.
+   *
    * @default "Close"
    */
   intlClose: string;
   filteredFlipPlacements: ComputedPlacement[];
   el: HTMLCalcitePopoverElement;
-  effectiveReferenceElement: HTMLElement;
+  effectiveReferenceElement: ReferenceElement;
   popper: Popper;
   arrowEl: HTMLDivElement;
   closeButtonEl: HTMLCalciteActionElement;
@@ -83,15 +96,23 @@ export declare class Popover {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  /** Fired when the popover is closed */
+  /** Fired when the component is closed. */
   calcitePopoverClose: EventEmitter;
-  /** Fired when the popover is opened */
+  /** Fired when the component is opened. */
   calcitePopoverOpen: EventEmitter;
   /** Updates the position of the component. */
   reposition(): Promise<void>;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   setFocus(focusId?: "close-button"): Promise<void>;
-  /** Toggles the popover's open property. */
+  /**
+   * Toggles the component's open property.
+   *
+   * @param value
+   */
   toggle(value?: boolean): Promise<void>;
   setFilteredPlacements: () => void;
   setUpReferenceElement: () => void;
@@ -99,7 +120,7 @@ export declare class Popover {
   setExpandedAttr: () => void;
   addReferences: () => void;
   removeReferences: () => void;
-  getReferenceElement(): HTMLElement;
+  getReferenceElement(): ReferenceElement;
   getModifiers(): Partial<StrictModifiers>[];
   createPopper(): void;
   destroyPopper(): void;

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

@@ -14,7 +14,6 @@ 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";
 export declare const HEADING_LEVEL = 2;

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

@@ -1,11 +1,14 @@
 import { VNode } from "../../stencil-public-runtime";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-popover' by the 'selector' property.
+ * @deprecated No longer required for popover usage.
  */
 export declare class PopoverManager {
   el: HTMLCalcitePopoverManagerElement;
+  mutationObserver: MutationObserver;
   /**
    * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+   *
    * @default `[data-calcite-popover-reference]`
    */
   selector: string;
@@ -13,7 +16,9 @@ export declare class PopoverManager {
    * Automatically closes any currently open popovers when clicking outside of a popover.
    */
   autoClose: boolean;
+  autoCloseHandler(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
-  queryPopover: (composedPath: EventTarget[]) => HTMLCalcitePopoverElement;
-  closeOpenPopovers(event: Event): void;
+  setAutoClose(): void;
 }

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

@@ -1,15 +1,15 @@
 import { VNode } from "../../stencil-public-runtime";
 export declare class Progress {
   el: HTMLCalciteProgressElement;
-  /** Use indeterminate if finding actual progress value is impossible */
+  /** Use indeterminate if finding actual progress value is impossible. */
   type: "indeterminate" | "determinate";
-  /** Fraction completed, in the range of 0 - 1.0 */
+  /** The component's progress value, with a range of 0.0 - 1.0. */
   value: number;
-  /** Label for the progress indicator */
+  /** Accessible name for the component. */
   label: string;
-  /** Text to display for the progress indicator */
+  /** Text that displays under the component's indicator. */
   text: string;
-  /** For indeterminate progress bars, reverse the animation direction */
+  /** When true and for indeterminate progress bars, reverses the animation direction. */
   reversed: boolean;
   render(): VNode;
 }

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

@@ -12,6 +12,7 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   disabled: boolean;
   /**
    * The focused state of the radio button.
+   *
    * @internal
    */
   focused: boolean;
@@ -21,11 +22,13 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   hidden: boolean;
   /**
    * The hovered state of the radio button.
+   *
    * @internal
    */
   hovered: boolean;
   /**
    * The label of the radio input
+   *
    * @internal
    */
   label?: string;
@@ -40,6 +43,7 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   value: any;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
+  defaultChecked: boolean;
   defaultValue: RadioButton["value"];
   rootNode: HTMLElement;
   containerEl: HTMLDivElement;
@@ -60,6 +64,7 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   private getTabIndex;
   /**
    * Fires when the radio button is blurred.
+   *
    * @internal
    */
   calciteInternalRadioButtonBlur: EventEmitter;
@@ -73,11 +78,13 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   /**
    * Fires when the checked property changes.  This is an internal event used for styling purposes only.
    * Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms.
+   *
    * @internal
    */
   calciteInternalRadioButtonCheckedChange: EventEmitter;
   /**
    * Fires when the radio button is focused.
+   *
    * @internal
    */
   calciteInternalRadioButtonFocus: EventEmitter;

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

@@ -32,12 +32,15 @@ export declare class RadioGroup implements LabelableComponent, FormComponent, In
   valueHandler(value: string): void;
   /**
    * The group's selected item.
+   *
+   * @readonly
    */
   selectedItem: HTMLCalciteRadioGroupItemElement;
   protected handleSelectedItemChange<T extends HTMLCalciteRadioGroupItemElement>(newItem: T, oldItem: T): void;
   /** specify the width of the group, defaults to auto */
   width: Extract<"auto" | "full", Width>;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

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

@@ -18,7 +18,8 @@ export declare class RadioGroupItem {
   render(): VNode;
   /**
    * Fires when the item has been selected.
+   *
    * @internal
    */
-  calciteRadioGroupItemChange: EventEmitter;
+  calciteInternalRadioGroupItemChange: EventEmitter;
 }

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

@@ -21,11 +21,15 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   average?: number;
   /** The name of the rating */
   name: string;
-  /** Localized string for "Rating" (used for aria label)
+  /**
+   * Localized string for "Rating" (used for aria label)
+   *
    * @default "Rating"
    */
   intlRating?: string;
-  /** Localized string for labelling each star, `${num}` in the string will be replaced by the number
+  /**
+   * Localized string for labelling each star, `${num}` in the string will be replaced by the number
+   *
    * @default "Stars: ${num}"
    */
   intlStars?: string;
@@ -49,6 +53,8 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   render(): any;
   onLabelClick(): void;
   private updateValue;
+  private onKeyboardPressed;
+  private onFocusChange;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;

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

@@ -3,7 +3,9 @@ import { VNode } from "../../stencil-public-runtime";
  * @slot - A slot for adding custom content, primarily loading information.
  */
 export declare class Scrim {
-  /** string to override English loading text
+  /**
+   * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;

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

@@ -29,6 +29,7 @@ export declare class ShellPanel implements ConditionalSlotComponent {
   position: Position;
   /**
    * Accessible label for resize separator.
+   *
    * @default "Resize"
    */
   intlResize: string;
@@ -51,6 +52,8 @@ export declare class ShellPanel implements ConditionalSlotComponent {
   stepMultiplier: number;
   /**
    * Emitted when collapse has been toggled.
+   *
+   * @deprecated use a resizeObserver on the shell-panel to listen for changes to its size.
    */
   calciteShellPanelToggle: EventEmitter;
   renderHeader(): VNode;

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

@@ -12,6 +12,7 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   hasHistogram: boolean;
   /**
    * List of x,y coordinates within the slider's min and max, displays above the slider track.
+   *
    * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)
    */
   histogram?: DataSeries;
@@ -95,6 +96,7 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
    * :warning: Will be fired frequently during drag. If you are performing any
    * expensive operations consider using a debounce or throttle to avoid
    * locking up the main thread.
+   *
    * @deprecated use calciteSliderInput instead
    */
   calciteSliderUpdate: EventEmitter;
@@ -130,28 +132,37 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   private removeDragListeners;
   /**
    * Set the prop value if changed at the component level
+   *
    * @param valueProp
    * @param value
    */
   private setValue;
   /**
    * Set the reference of the track Element
+   *
    * @internal
    * @param node
    */
   private storeTrackRef;
   /**
    * If number is outside range, constrain to min or max
+   *
+   * @param value
+   * @param prop
    * @internal
    */
   private clamp;
   /**
    * Translate a pixel position to value along the range
+   *
+   * @param x
    * @internal
    */
   private translate;
   /**
    * Get closest allowed value along stepped values
+   *
+   * @param num
    * @internal
    */
   private getClosestStep;
@@ -160,6 +171,8 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   private getFontSizeForElement;
   /**
    * Get position of value along range as fractional value
+   *
+   * @param num
    * @return {number} number in the unit interval [0,1]
    * @internal
    */
@@ -172,24 +185,30 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   private hideObscuredBoundingTickLabels;
   /**
    * Returns an integer representing the number of pixels to offset on the left or right side based on desired position behavior.
+   *
+   * @param leftBounds
+   * @param rightBounds
    * @internal
    */
   private getHostOffset;
   /**
    * Returns an integer representing the number of pixels that the two given span elements are overlapping, taking into account
    * a space in between the two spans equal to the font-size set on them to account for the space needed to render a hyphen.
+   *
    * @param leftLabel
    * @param rightLabel
    */
   private getRangeLabelOverlap;
   /**
    * 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 div element.
+   *
    * @param maxLabel
    * @param handle
    */

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

@@ -17,6 +17,7 @@ export declare class SplitButton implements InteractiveComponent {
   handleDisabledChange(value: boolean): void;
   /**
    * Is the dropdown currently active or not
+   *
    * @internal
    */
   active: boolean;
@@ -25,8 +26,10 @@ export declare class SplitButton implements InteractiveComponent {
   dropdownIconType: DropdownIconType;
   /** aria label for overflow button */
   dropdownLabel?: string;
-  /** optionally add a calcite-loader component to the control,
-   disabling interaction. with the primary button */
+  /**
+    optionally add a calcite-loader component to the control,
+   disabling interaction. with the primary button
+   */
   loading: boolean;
   /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;

package/dist/types/components/stepper/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface StepperItemEventDetail {
+  position: number;
+  content: Node[];
+}
+export interface StepperItemKeyEventDetail {
+  item: KeyboardEvent;
+}
+export interface StepperItemChangeEventDetail {
+  position: number;
+}