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

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

@@ -3,42 +3,48 @@ import { Scale } from "../interfaces";
 import { ModalBackgroundColor } from "./interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot header - a slot for adding a modal header
- * @slot content - a slot for adding modal content
- * @slot primary - a slot for adding a primary button
- * @slot secondary - a slot for adding a secondary button
- * @slot back - a slot for adding a back button
+ * @slot header - A slot for adding header text.
+ * @slot content - A slot for adding the component's content.
+ * @slot primary - A slot for adding a primary button.
+ * @slot secondary - A slot for adding a secondary button.
+ * @slot back - A slot for adding a back button.
  */
 export declare class Modal implements ConditionalSlotComponent {
   el: HTMLCalciteModalElement;
-  /** Add the active attribute to open the modal */
+  /**
+   * When true, the `calcite-modal` is active.
+   *
+   * @deprecated use open instead
+   */
   active: boolean;
-  /** Optionally pass a function to run before close */
-  beforeClose: (el: HTMLElement) => Promise<void>;
-  /** Disables the display a close button within the Modal */
+  /** When true,`calcite-modal`  opens  */
+  open: boolean;
+  /** Passes a function to run before the `calcite-modal` closes. */
+  beforeClose?: (el: HTMLElement) => Promise<void>;
+  /** When true, disables the component's close button. */
   disableCloseButton: boolean;
-  /** Disables the closing of the Modal when clicked outside. */
+  /** When true, disables the closing of the component when clicked outside. */
   disableOutsideClose: boolean;
-  /** Aria label for the close button */
+  /** Accessible name for the component's close button. */
   intlClose: string;
-  /** Prevent the modal from taking up the entire screen on mobile */
+  /** When true, prevents the component from expanding to the entire screen on mobile devices. */
   docked: boolean;
-  /** Specify an element to focus when the modal is first opened */
-  firstFocus?: HTMLElement;
-  /** Flag to disable the default close on escape behavior */
+  /** When true, disables the default close on escape behavior. */
   disableEscape: boolean;
-  /** specify the scale of modal, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
+  /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
   width: Scale | number;
-  /** Set the modal to always be fullscreen (overrides width) */
+  /** Sets the component to always be fullscreen (overrides width). */
   fullscreen: boolean;
-  /** Adds a color bar at the top for visual impact,
-   * Use color to add importance to destructive/workflow dialogs. */
+  /**
+   * Adds a color bar to the top of component for visual impact.
+   * Use color to add importance to destructive or workflow dialogs.
+   */
   color?: "red" | "blue";
-  /** Background color of modal content */
+  /** Sets the background color of the component's content. */
   backgroundColor: ModalBackgroundColor;
-  /** Turn off spacing around the content area slot */
+  /** When true, disables spacing to the content area slot. */
   noPadding: boolean;
   componentWillLoad(): void;
   connectedCallback(): void;
@@ -56,29 +62,38 @@ export declare class Modal implements ConditionalSlotComponent {
   titleId: string;
   private activeTransitionProp;
   handleEscape(e: KeyboardEvent): void;
-  /** Fired when the modal finishes the open animation */
+  /** Emits when the component finishes the open animation. */
   calciteModalOpen: EventEmitter;
-  /** Fired when the modal finishes the close animation */
+  /** Emits when the component finishes the close animation. */
   calciteModalClose: EventEmitter;
   /**
-   * Focus first interactive element
+   * Focus the first interactive element.
+   *
+   * @param el
    * @deprecated use `setFocus` instead.
    */
   focusElement(el?: HTMLElement): Promise<void>;
   /**
    * Sets focus on the component.
    *
-   * By default, will try to focus on any focusable content. If there is none, it will focus on the close button.
-   * If you want to focus on the close button, you can use the `close-button` focus ID.
+   * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
+   * To focus on the close button, use the `close-button` focus ID.
+   *
+   * @param focusId
    */
   setFocus(focusId?: "close-button"): Promise<void>;
-  /** Set the scroll top of the modal content */
+  /**
+   * Sets the scroll top of the component's content.
+   *
+   * @param top
+   * @param left
+   */
   scrollContent(top?: number, left?: number): Promise<void>;
   transitionEnd: (event: TransitionEvent) => void;
   toggleModal(value: boolean, oldValue: boolean): Promise<void>;
   private openEnd;
   /** Open the modal */
-  private open;
+  private openModal;
   handleOutsideClose: () => void;
   /** Close the modal, first running the `beforeClose` method */
   close: () => Promise<void>;

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

@@ -2,50 +2,52 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale, Width } from "../interfaces";
 import { StatusColor } from "../alert/interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
+/**
+ * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  */
 /**
- * @slot title - Title of the notice (optional)
- * @slot message - Main text of the notice
- * @slot link - Optional action to take from the notice (undo, try again, link to page, etc.)
- * @slot actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.
+ * @slot title - A slot for adding the title.
+ * @slot message - A slot for adding the message.
+ * @slot link - A slot for adding actions to take, such as: undo, try again, link to page, etc.
+ * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or less actions.
  */
 export declare class Notice implements ConditionalSlotComponent {
   el: HTMLCalciteNoticeElement;
-  /** Is the notice currently active or not */
+  /** When true, the component is active. */
   active: boolean;
-  /** Color for the notice (will apply to top border and icon) */
+  /** The color for the component's top border and icon. */
   color: StatusColor;
-  /** Optionally show a button the user can click to dismiss the notice */
-  dismissible: boolean;
-  /** when used as a boolean set to true, show a default recommended icon. You can
-   * also pass a calcite-ui-icon name to this prop to display a requested icon */
+  /** When true, a close button is added to the component. */
+  dismissible?: boolean;
+  /** Specifies an icon to display - accepts Calcite UI icon names. */
   icon: string | boolean;
-  /** String for the close button.
+  /**
+   * Accessible name for the close button.
+   *
    * @default "Close"
    */
   intlClose: string;
-  /** specify the scale of the notice, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** specify the width of the notice, defaults to auto */
+  /** Specifies the width of the component. */
   width: Width;
   updateRequestedIcon(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
   render(): VNode;
-  /** Fired when an notice is closed */
+  /** Fired when the component is closed. */
   calciteNoticeClose: EventEmitter;
-  /** Fired when an Notice is opened */
+  /** Fired when the component is opened. */
   calciteNoticeOpen: EventEmitter;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private close;
-  /** the close button element */
+  /** The close button element. */
   private closeButton?;
-  /** the computed icon to render */
+  /** The computed icon to render. */
   private requestedIcon?;
 }

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

@@ -1,19 +1,19 @@
 import { VNode } from "../../stencil-public-runtime";
 export declare class Option {
   /**
-   * When true, it prevents the option from being selected.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * The option label.
+   * Accessible name for the component.
    */
   label: string;
   /**
-   * When true, this option is selected. Otherwise, false.
+   * When true, the component is selected.
    */
   selected: boolean;
   /**
-   * The value associated with this option.
+   * The component's value.
    */
   value: any;
   protected handlePropChange(_newValue: any, _oldValue: any, propName: string): void;
@@ -24,7 +24,7 @@ export declare class Option {
   /**
    * @internal
    */
-  private calciteOptionChange;
+  private calciteInternalOptionChange;
   private ensureTextContentDependentProps;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -4,17 +4,17 @@ import { VNode } from "../../stencil-public-runtime";
  */
 export declare class OptionGroup {
   /**
-   * When true, it prevents selection from any of its associated options.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * The group label. This property is required.
+   * Accessible name for the component.
    */
   label: string;
   protected handlePropChange(): void;
   /**
    * @internal
    */
-  private calciteOptionGroupChange;
+  private calciteInternalOptionGroupChange;
   render(): VNode;
 }

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

@@ -1,41 +1,51 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { GlobalAttrComponent } from "../../utils/globalAttributes";
 export interface PaginationDetail {
   start: number;
   total: number;
   num: number;
 }
-export declare class Pagination {
-  /** number of items per page */
+export declare class Pagination implements GlobalAttrComponent {
+  /** Specifies the number of items per page. */
   num: number;
-  /** index of item that should begin the page */
+  /** Specifies the starting item number. */
   start: number;
-  /** total number of items */
+  /** Specifies the total number of items. */
   total: number;
-  /** Used as an accessible label (aria-label) for the next button
+  /**
+   * Accessible name for the component's next button.
+   *
    * @default "Next"
    */
   textLabelNext: string;
-  /** Used as an accessible label (aria-label) of the previous button
+  /**
+   * Accessible name for the component's previous button.
+   *
    * @default "Previous"
    */
   textLabelPrevious: string;
-  /** The scale of the pagination */
+  /** Specifies the size of the component. */
   scale: Scale;
   el: HTMLCalcitePaginationElement;
+  globalAttributes: {};
   /**
-   * Emitted whenever the selected page changes.
+   * Emits when the selected page changes.
+   *
    * @deprecated use calcitePaginationChange instead
    */
   calcitePaginationUpdate: EventEmitter<PaginationDetail>;
   /**
-   * Emitted whenever the selected page changes.
-   * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18)
+   * Emits when the selected page changes.
+   *
+   * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)
    */
   calcitePaginationChange: EventEmitter<PaginationDetail>;
-  /** Go to the next page of results */
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Go to the next page of results. */
   nextPage(): Promise<void>;
-  /** Go to the previous page of results */
+  /** Go to the previous page of results. */
   previousPage(): Promise<void>;
   private getLastStart;
   private previousClicked;

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

@@ -5,17 +5,17 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
- * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
- * @slot header-actions-end - A slot for adding actions or content to the end side of the panel header.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
  * @slot header-content - A slot for adding custom content to the header.
- * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a dropdown.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
 export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * Hides the panel.
+   * When true, hides the component.
    */
   dismissed: boolean;
   dismissedHandler(): void;
@@ -24,55 +24,59 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
    */
   beforeBack?: () => Promise<void>;
   /**
-   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   *  When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * Displays a close button in the trailing side of the header.
+   * When true, a close button is added to the component.
    */
   dismissible: boolean;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   /**
-   * Shows a back button in the header.
+   * When true, displays a back button in the header.
    */
   showBackButton: boolean;
   /**
-   * 'Back' text string.
+   * Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true.
    */
   intlBack?: string;
   /**
-   * Specifies the maximum height of the panel.
+   * Specifies the maximum height of the component.
    */
   heightScale?: Scale;
   /**
-   * This sets width of the panel.
+   * Specifies the width of the component.
    */
   widthScale?: Scale;
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When true, a busy indicator is displayed.
    */
   loading: boolean;
   /**
-   * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+   * Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true.
    */
   intlClose?: string;
   /**
-   * 'Options' text string for the actions menu.
+   * Accessible name for the component's actions menu.
    */
   intlOptions?: string;
   /**
-   * Heading text.
+   * The component header text.
    */
   heading?: string;
   /**
    * Summary text. A description displayed underneath the heading.
+   *
+   * @deprecated use description instead
    */
   summary?: string;
+  /** A description for the component. */
+  description: string;
   /**
-   * Opens the action menu.
+   * When true, the action menu items in the `header-menu-actions` slot are open.
    */
   menuOpen: boolean;
   componentDidRender(): void;
@@ -81,20 +85,28 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   dismissButtonEl: HTMLCalciteActionElement;
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
+  resizeObserver: ResizeObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
-   * Emitted when the close button has been clicked.
+   * Fires when the close button is clicked.
+   */
+  calcitePanelDismiss: EventEmitter;
+  /**
+   * Fires when the close button is clicked.
+   *
+   * @deprecated use calcitePanelDismiss instead.
    */
   calcitePanelDismissedChange: EventEmitter;
   /**
-   * Emitted when the content has been scrolled.
+   * Fires when the content is scrolled.
    */
   calcitePanelScroll: EventEmitter;
   /**
-   * Emitted when the back button has been clicked.
+   * Fires when the back button is clicked.
    */
   calcitePanelBackClick: EventEmitter;
+  resizeHandler: () => void;
   setContainerRef: (node: HTMLElement) => void;
   setDismissRef: (node: HTMLCalciteActionElement) => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
@@ -102,9 +114,14 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   dismiss: () => void;
   panelScrollHandler: () => void;
   backButtonClick: () => void;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   setFocus(focusId?: "dismiss-button" | "back-button"): Promise<void>;
-  /** Scrolls panel content to a particular set of coordinates.
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
    *
    * ```
    *   myCalcitePanel.scrollContentTo({
@@ -113,6 +130,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
    *     behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    *   });
    * ```
+   *
+   * @param options
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   renderBackButton(): VNode;
@@ -126,6 +145,7 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   renderMenu(): VNode;
   renderHeaderNode(): VNode;
   renderFooterNode(): VNode;
+  setPanelScrollEl: (el: HTMLElement) => void;
   renderContent(): VNode;
   renderFab(): VNode;
   render(): VNode;

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

@@ -4,6 +4,7 @@ export declare const CSS: {
   header: string;
   heading: string;
   summary: string;
+  description: string;
   headerContent: string;
   headerActions: string;
   headerActionsEnd: string;

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

@@ -4,12 +4,12 @@ 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.
+ * @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
 export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent {
   /**
-   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
@@ -21,22 +21,22 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
    */
   filterPlaceholder: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When true, a busy indicator is displayed.
    */
   loading: boolean;
   /**
-   * Multiple works similar to standard radio buttons and checkboxes.
-   * When true, a user can select multiple items at a time.
-   * When false, only a single item can be selected at a time
-   * and selecting a new item will deselect any other selected items.
+   * Similar to standard radio buttons and checkboxes.
+   * When true, a user can select multiple `calcite-pick-list-item`s at a time.
+   * When false, only a single `calcite-pick-list-item` can be selected at a time,
+   * and a new selection will deselect previous selections.
    */
   multiple: boolean;
   /**
-   * When true and single-selection is enabled, the selection will change when navigating items via the keyboard.
+   * When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
    */
   selectionFollowsFocus: boolean;
   selectedValues: Map<string, ItemElement>;
@@ -51,13 +51,13 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
   disconnectedCallback(): void;
   componentDidRender(): void;
   /**
-   * Emitted when any of the item selections have changed.
+   * Emits when any of the `calcite-pick-list-item` selections have changed.
    */
   calciteListChange: EventEmitter<Map<string, HTMLCalcitePickListItemElement>>;
   calciteListItemRemoveHandler(event: CustomEvent<void>): void;
   calciteListItemChangeHandler(event: CustomEvent): void;
-  calciteListItemPropsChangeHandler(event: CustomEvent): void;
-  calciteListItemValueChangeHandler(event: CustomEvent): void;
+  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void;
+  calciteInternalListItemValueChangeHandler(event: CustomEvent): void;
   calciteListFocusOutHandler(event: FocusEvent): void;
   setUpItems(): void;
   setUpFilter(): void;
@@ -68,9 +68,13 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
   handleFilter: any;
   getItemData: any;
   keyDownHandler: any;
-  /** Returns the currently selected items */
+  /** Returns the component's selected `calcite-pick-list-item`s. */
   getSelectedItems(): Promise<Map<string, HTMLCalcitePickListItemElement>>;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   setFocus(focusId?: ListFocusId): Promise<void>;
   getIconType(): ICON_TYPES;
   render(): VNode;

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -9,7 +9,7 @@ export declare function initialize<T extends Lists>(this: List<T>): void;
 export declare function initializeObserver<T extends Lists>(this: List<T>): void;
 export declare function cleanUpObserver<T extends Lists>(this: List<T>): void;
 export declare function calciteListItemChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
-export declare function calciteListItemValueChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
+export declare function calciteInternalListItemValueChangeHandler<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;

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

@@ -6,12 +6,12 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class PickListGroup implements ConditionalSlotComponent {
   /**
-   * The title used for all nested `calcite-pick-list` rows.
+   * Specifies the title for all nested `calcite-pick-list-item`s.
    *
    */
   groupTitle: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   el: HTMLCalcitePickListGroupElement;