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

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

@@ -1,5 +1,6 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Scale } from "../interfaces";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
@@ -8,45 +9,58 @@ export declare class Stepper {
   /** optionally display a status icon next to the step title */
   icon: boolean;
   /** specify the layout of stepper, defaults to horizontal */
-  layout: Layout;
+  layout: Extract<"horizontal" | "vertical", Layout>;
   /** optionally display the number next to the step title */
   numbered: boolean;
   /** specify the scale of stepper, defaults to m */
   scale: Scale;
   /** @internal */
-  requestedContent: HTMLElement[] | NodeListOf<any>;
+  requestedContent: Node[];
   contentWatcher(): void;
   /**
    * This event fires when the active stepper item has changed.
+   *
+   */
+  calciteStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;
+  /**
+   * This event fires when the active stepper item has changed.
+   *
    * @internal
    */
-  calciteStepperItemChange: EventEmitter;
+  calciteInternalStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;
   componentDidLoad(): void;
   componentWillLoad(): void;
   render(): VNode;
-  calciteStepperItemKeyEvent(e: CustomEvent): void;
-  registerItem(event: CustomEvent): void;
-  updateItem(event: CustomEvent): void;
+  calciteInternalStepperItemKeyEvent(e: CustomEvent<StepperItemKeyEventDetail>): void;
+  registerItem(event: CustomEvent<StepperItemEventDetail>): void;
+  updateItem(event: CustomEvent<StepperItemEventDetail>): void;
+  handleUserRequestedStepperItemSelect(event: CustomEvent<StepperItemChangeEventDetail>): void;
   /** set the next step as active */
   nextStep(): Promise<void>;
   /** set the previous step as active */
   prevStep(): Promise<void>;
-  /** set the requested step as active */
-  goToStep(num: number): Promise<void>;
+  /**
+   * set the requested step as active
+   *
+   * @param step
+   */
+  goToStep(step: number): Promise<void>;
   /** set the first step as active */
   startStep(): Promise<void>;
   /** set the last step as active */
   endStep(): Promise<void>;
-  /** created list of Stepper items */
+  private itemMap;
+  /** list of sorted Stepper items */
   private items;
-  /** sorted list of Stepper items */
-  private sortedItems;
+  /** list of enabled Stepper items */
+  private enabledItems;
   /** keep track of the currently active item position */
   private currentPosition;
   /** the container where we place horizontal layout step content */
   private stepperContentContainer;
+  private getEnabledStepIndex;
   private addHorizontalContentContainer;
-  private emitChangedItem;
+  private updateStep;
   private focusFirstItem;
   private focusLastItem;
   private focusNextItem;
@@ -54,5 +68,6 @@ export declare class Stepper {
   private itemIndex;
   private focusElement;
   private sortItems;
+  private filterItems;
   private updateContent;
 }

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { Scale } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "../stepper/interfaces";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -14,13 +15,25 @@ export declare class StepperItem implements InteractiveComponent {
   error: boolean;
   /** is the step disabled and not navigable to by a user */
   disabled: boolean;
-  /** pass a title for the stepper item */
+  /**
+   * pass a title for the stepper item
+   *
+   * @deprecated use heading instead
+   */
   itemTitle?: string;
-  /** pass a title for the stepper item */
+  /** stepper item heading */
+  heading?: string;
+  /**
+   * pass a title for the stepper item
+   *
+   * @deprecated use description instead
+   */
   itemSubtitle?: string;
+  /** stepper item description */
+  description: string;
   /** pass a title for the stepper item */
   /** @internal */
-  layout?: string;
+  layout?: Extract<"horizontal" | "vertical", Layout>;
   /** should the items display an icon based on status */
   /** @internal */
   icon: boolean;
@@ -31,25 +44,27 @@ export declare class StepperItem implements InteractiveComponent {
   /** @internal */
   scale: Scale;
   disabledWatcher(): void;
+  activeWatcher(active: boolean): void;
+  /**
+   * @internal
+   */
+  calciteInternalStepperItemKeyEvent: EventEmitter<StepperItemKeyEventDetail>;
   /**
    * @internal
    */
-  calciteStepperItemKeyEvent: EventEmitter;
+  calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;
   /**
    * @internal
    */
-  calciteStepperItemSelect: EventEmitter;
+  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;
   /**
    * @internal
    */
-  calciteStepperItemRegister: EventEmitter;
+  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;
   componentWillLoad(): void;
-  componentDidLoad(): void;
-  componentDidUpdate(): void;
   componentDidRender(): void;
   render(): VNode;
-  keyDownHandler(e: KeyboardEvent): void;
-  updateActiveItemOnChange(event: CustomEvent): void;
+  updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void;
   /** position within parent */
   private itemPosition;
   /** the latest requested item position*/
@@ -58,10 +73,12 @@ export declare class StepperItem implements InteractiveComponent {
   private itemContent;
   /** the parent stepper component */
   private parentStepperEl;
+  private keyDownHandler;
   private renderIcon;
   private determineActiveItem;
   private registerStepperItem;
+  private emitUserRequestedItem;
   private emitRequestedItem;
-  private getItemContent;
+  private setItemContent;
   private getItemPosition;
 }

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

@@ -13,7 +13,9 @@ export declare class Switch implements LabelableComponent, CheckableFormCompomen
   name: string;
   /** The scale of the switch */
   scale: Scale;
-  /** True if the switch is initially on
+  /**
+   * True if the switch is initially on
+   *
    * @deprecated use 'checked' instead.
    */
   switched: boolean;

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

@@ -15,7 +15,9 @@ export declare class Tab {
    * Show this tab
    */
   active: boolean;
-  /** @internal Parent tabs component scale value */
+  /**
+   * @internal
+   */
   scale: Scale;
   render(): VNode;
   connectedCallback(): void;
@@ -25,7 +27,7 @@ export declare class Tab {
   /**
    * @internal
    */
-  calciteTabRegister: EventEmitter;
+  calciteInternalTabRegister: EventEmitter;
   internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Return the index of this tab within the tab array
@@ -35,6 +37,8 @@ export declare class Tab {
   guid: string;
   labeledBy: string;
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;

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

@@ -16,13 +16,21 @@ export declare class TabNav {
    * Pass the same string to multiple tab navs to keep them all in sync if one changes
    */
   syncId: string;
-  /** @internal Parent tabs component scale value */
+  /**
+   * @internal
+   */
   scale: Scale;
-  /** @internal Parent tabs component layout value */
+  /**
+   * @internal
+   */
   layout: TabLayout;
-  /** @internal Parent tabs component position value */
+  /**
+   * @internal
+   */
   position: TabPosition;
-  /** @internal Parent tabs component bordered value when layout is "inline" */
+  /**
+   * @internal
+   */
   bordered: boolean;
   /**
    * @internal
@@ -46,11 +54,14 @@ export declare class TabNav {
   activateTabHandler(e: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Check for active tabs on register and update selected
+   *
+   * @param e
    */
   updateTabTitles(e: CustomEvent<TabID>): void;
   globalInternalTabChangeHandler(e: CustomEvent<TabChangeEventDetail>): void;
   /**
    * Emitted when the active tab changes
+   *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabChange: EventEmitter<TabChangeEventDetail>;

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

@@ -18,13 +18,21 @@ export declare class TabTitle implements InteractiveComponent {
   iconFlipRtl?: FlipContext;
   /** optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names  */
   iconStart?: string;
-  /** @internal Parent tabs component layout value */
+  /**
+   * @internal
+   */
   layout: TabLayout;
-  /** @internal Parent tabs component or parent tab-nav component's position */
+  /**
+   * @internal
+   */
   position: TabPosition;
-  /** @internal Parent tabs component or parent tab-nav component's scale */
+  /**
+   * @internal
+   */
   scale: Scale;
-  /** @internal Parent tabs component bordered value */
+  /**
+   * @internal
+   */
   bordered: boolean;
   /**
    * Optionally include a unique name for the tab title,
@@ -43,12 +51,14 @@ export declare class TabTitle implements InteractiveComponent {
   onClick(): void;
   keyDownHandler(e: KeyboardEvent): void;
   /**
-   * Fires when a specific tab is activated (`event.details`)
+   * Fires when a specific tab is activated. Emits the "tab" property or the index position.
+   *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
   /**
    * Fires when a specific tab is activated (`event.details`)
+   *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    * @internal
    */
@@ -56,15 +66,15 @@ export declare class TabTitle implements InteractiveComponent {
   /**
    * @internal
    */
-  calciteTabsFocusNext: EventEmitter;
+  calciteInternalTabsFocusNext: EventEmitter;
   /**
    * @internal
    */
-  calciteTabsFocusPrevious: EventEmitter;
+  calciteInternalTabsFocusPrevious: EventEmitter;
   /**
    * @internal
    */
-  calciteTabTitleRegister: EventEmitter<TabID>;
+  calciteInternalTabTitleRegister: EventEmitter<TabID>;
   /**
    * Return the index of this title within the nav
    */
@@ -74,10 +84,12 @@ export declare class TabTitle implements InteractiveComponent {
    */
   getTabIdentifier(): Promise<TabID>;
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   updateAriaInfo(tabIds?: string[], titleIds?: string[]): Promise<void>;
-  /** watches for changing text content **/
+  /** watches for changing text content */
   mutationObserver: MutationObserver;
   controls: string;
   /** determine if there is slotted text for styling purposes */

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

@@ -1,3 +1,3 @@
 export declare type TabID = string | number;
-export declare type TabPosition = "above" | "below";
+export declare type TabPosition = "above" | "below" | "top" | "bottom";
 export declare type TabLayout = "center" | "inline";

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

@@ -12,7 +12,8 @@ export declare class Tabs {
    */
   layout: TabLayout;
   /**
-   * Display the tabs above (default) or below the tab content
+   * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+   *
    */
   position: TabPosition;
   /**
@@ -26,18 +27,22 @@ export declare class Tabs {
   connectedCallback(): void;
   render(): VNode;
   /**
+   * @param e
    * @internal
    */
-  calciteTabTitleRegister(e: CustomEvent): void;
+  calciteInternalTabTitleRegister(e: CustomEvent): void;
   /**
+   * @param e
    * @internal
    */
   calciteTabTitleUnregister(e: CustomEvent): void;
   /**
+   * @param e
    * @internal
    */
-  calciteTabRegister(e: CustomEvent): void;
+  calciteInternalTabRegister(e: CustomEvent): void;
   /**
+   * @param e
    * @internal
    */
   calciteTabUnregister(e: CustomEvent): void;

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

@@ -19,6 +19,7 @@ export declare class Tile implements ConditionalSlotComponent, InteractiveCompon
   embed: boolean;
   /**
    * The focused state of the tile.
+   *
    * @internal
    */
   focused: boolean;

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

@@ -3,56 +3,81 @@ import { Scale } from "../interfaces";
 import { TimePart, HourCycle, Meridiem } from "../../utils/time";
 export declare class TimePicker {
   el: HTMLCalciteTimePickerElement;
-  /** aria-label for the hour input
+  /**
+   * aria-label for the hour input
+   *
    * @default "Hour"
    */
   intlHour: string;
-  /** aria-label for the hour down button
+  /**
+   * aria-label for the hour down button
+   *
    * @default "Decrease hour"
    */
   intlHourDown: string;
-  /** aria-label for the hour up button
+  /**
+   * aria-label for the hour up button
+   *
    * @default "Increase hour"
    */
   intlHourUp: string;
-  /** aria-label for the meridiem (am/pm) input
+  /**
+   * aria-label for the meridiem (am/pm) input
+   *
    * @default "AM/PM"
    */
   intlMeridiem: string;
-  /** aria-label for the meridiem (am/pm) down button
+  /**
+   * aria-label for the meridiem (am/pm) down button
+   *
    * @default "Decrease AM/PM"
    */
   intlMeridiemDown: string;
-  /** aria-label for the meridiem (am/pm) up button
+  /**
+   * aria-label for the meridiem (am/pm) up button
+   *
    * @default "Increase AM/PM"
    */
   intlMeridiemUp: string;
-  /** aria-label for the minute input
+  /**
+   * aria-label for the minute input
+   *
    * @default "Minute"
    */
   intlMinute: string;
-  /** aria-label for the minute down button
+  /**
+   * aria-label for the minute down button
+   *
    * @default "Decrease minute"
    */
   intlMinuteDown: string;
-  /** aria-label for the minute up button
+  /**
+   * aria-label for the minute up button
+   *
    * @default "Increase minute"
    */
   intlMinuteUp: string;
-  /** aria-label for the second input
+  /**
+   * aria-label for the second input
+   *
    * @default "Second"
    */
   intlSecond: string;
-  /** aria-label for the second down button
+  /**
+   * aria-label for the second down button
+   *
    * @default "Decrease second"
    */
   intlSecondDown: string;
-  /** aria-label for the second up button
+  /**
+   * aria-label for the second up button
+   *
    * @default "Increase second"
    */
   intlSecondUp: string;
   /**
    * BCP 47 language tag for desired language and country format
+   *
    * @internal
    */
   locale: string;
@@ -86,19 +111,23 @@ export declare class TimePicker {
   /**
    * @internal
    */
-  calciteTimePickerBlur: EventEmitter<void>;
+  calciteInternalTimePickerBlur: EventEmitter<void>;
   /**
    * @internal
    */
-  calciteTimePickerChange: EventEmitter<string>;
+  calciteInternalTimePickerChange: EventEmitter<string>;
   /**
    * @internal
    */
-  calciteTimePickerFocus: EventEmitter<void>;
+  calciteInternalTimePickerFocus: EventEmitter<void>;
   hostBlurHandler(): void;
   hostFocusHandler(): void;
   keyDownHandler(event: KeyboardEvent): void;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param target
+   */
   setFocus(target: TimePart): Promise<void>;
   private buttonActivated;
   private decrementHour;

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

@@ -50,8 +50,14 @@ export declare class TipManager {
   previousTip(): Promise<void>;
   /**
    * Emitted when the `calcite-tip-manager` has been toggled open or closed.
+   *
+   * @deprecated use calciteTipManagerClose instead.
    */
   calciteTipManagerToggle: EventEmitter;
+  /**
+   * Emitted when the `calcite-tip-manager` has been closed.
+   */
+  calciteTipManagerClose: EventEmitter;
   setUpTips(): void;
   hideTipManager: () => void;
   showSelectedTip(): void;

package/dist/types/components/tooltip/TooltipManager.d.ts

@@ -0,0 +1,28 @@
+import { ReferenceElement } from "../../utils/popper";
+export default class TooltipManager {
+  private registeredElements;
+  private hoverTimeouts;
+  private clickedTooltip;
+  private activeTooltipEl;
+  private registeredElementCount;
+  registerElement(referenceEl: ReferenceElement, tooltip: HTMLCalciteTooltipElement): void;
+  unregisterElement(referenceEl: ReferenceElement): void;
+  private queryTooltip;
+  private keyDownHandler;
+  private mouseEnterShow;
+  private mouseLeaveHide;
+  private clickHandler;
+  private focusShow;
+  private blurHide;
+  private addListeners;
+  private removeListeners;
+  private clearHoverTimeout;
+  private closeExistingTooltip;
+  private focusTooltip;
+  private toggleTooltip;
+  private hoverToggle;
+  private hoverTooltip;
+  private activeTooltipHover;
+  private hoverEvent;
+  private focusEvent;
+}

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

@@ -3,5 +3,4 @@ export declare const CSS: {
   arrow: string;
 };
 export declare const TOOLTIP_DELAY_MS = 500;
-export declare const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
 export declare const ARIA_DESCRIBED_BY = "aria-describedby";

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

@@ -1,43 +1,47 @@
 import { VNode } from "../../stencil-public-runtime";
 import { StrictModifiers, Instance as Popper } from "@popperjs/core";
-import { PopperPlacement, OverlayPositioning } from "../../utils/popper";
+import { PopperPlacement, OverlayPositioning, ReferenceElement } from "../../utils/popper";
 /**
  * @slot - A slot for adding text.
  */
 export declare class Tooltip {
-  /** Accessible name for the component */
+  /** Closes the component when the `referenceElement` is clicked. */
+  closeOnClick: boolean;
+  /** Accessible name for the component. */
   label: string;
   /**
-   * Offset the position of the tooltip away from the reference element.
+   * Offset the position of the component away from the `referenceElement`.
+   *
    * @default 6
    */
   offsetDistance: number;
   offsetDistanceOffsetHandler(): void;
   /**
-   * Offset the position of the tooltip along the reference element.
+   * Offset the position of the component along the `referenceElement`.
    */
   offsetSkidding: number;
   offsetSkiddingHandler(): void;
   /**
-   * Display and position the component.
+   * When true, the component is open.
    */
   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 `referenceElement` 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` to position the component according to its "placement" value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used.
    */
-  referenceElement: HTMLElement | string;
+  referenceElement: ReferenceElement | string;
   referenceElementHandler(): void;
   el: HTMLCalciteTooltipElement;
-  effectiveReferenceElement: HTMLElement;
+  effectiveReferenceElement: ReferenceElement;
   arrowEl: HTMLDivElement;
   popper: Popper;
   guid: string;
@@ -50,9 +54,7 @@ export declare class Tooltip {
   getId: () => string;
   addReferences: () => void;
   removeReferences: () => void;
-  show: () => void;
-  hide: () => void;
-  getReferenceElement(): HTMLElement;
+  getReferenceElement(): ReferenceElement;
   getModifiers(): Partial<StrictModifiers>[];
   createPopper(): void;
   destroyPopper(): void;

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

@@ -1,41 +1,14 @@
 import { VNode } from "../../stencil-public-runtime";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @deprecated No longer required for tooltip usage.
  */
 export declare class TooltipManager {
-  el: HTMLCalciteTooltipManagerElement;
-  tooltipEl: HTMLCalciteTooltipElement;
-  hoverTimeouts: WeakMap<HTMLCalciteTooltipElement, number>;
-  clickedTooltip: HTMLCalciteTooltipElement;
   /**
    * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
+   *
    * @default `[data-calcite-tooltip-reference]`
    */
   selector: string;
-  queryTooltip: (composedPath: EventTarget[]) => HTMLCalciteTooltipElement;
-  clearHoverTimeout: (tooltip: HTMLCalciteTooltipElement) => void;
-  closeExistingTooltip: () => void;
-  focusTooltip: ({ tooltip, value }: {
-    tooltip: HTMLCalciteTooltipElement;
-    value: boolean;
-  }) => void;
-  toggleTooltip: (tooltip: HTMLCalciteTooltipElement, value: boolean) => void;
-  hoverToggle: ({ tooltip, value }: {
-    tooltip: HTMLCalciteTooltipElement;
-    value: boolean;
-  }) => void;
-  hoverTooltip: ({ tooltip, value }: {
-    tooltip: HTMLCalciteTooltipElement;
-    value: boolean;
-  }) => void;
-  activeTooltipHover: (event: MouseEvent) => void;
-  hoverEvent: (event: MouseEvent, value: boolean) => void;
-  focusEvent: (event: FocusEvent, value: boolean) => void;
   render(): VNode;
-  keyUpHandler(event: KeyboardEvent): void;
-  mouseEnterShow(event: MouseEvent): void;
-  mouseLeaveHide(event: MouseEvent): void;
-  clickHandler(event: MouseEvent): void;
-  focusShow(event: FocusEvent): void;
-  blurHide(event: FocusEvent): void;
 }