@esri/calcite-components 1.0.0-next.538 → 1.0.0-next.539

package/dist/types/components/date-picker-month/date-picker-month.d.ts

@@ -29,22 +29,22 @@ export declare class DatePickerMonth {
   /**
    * Event emitted when user selects the date.
    */
-  calciteDatePickerSelect: EventEmitter;
+  calciteDatePickerSelect: EventEmitter<Date>;
   /**
    * Event emitted when user hovers the date.
    *
    * @internal
    */
-  calciteInternalDatePickerHover: EventEmitter;
+  calciteInternalDatePickerHover: EventEmitter<Date>;
   /**
    * Active date for the user keyboard access.
    */
-  calciteDatePickerActiveDateChange: EventEmitter;
+  calciteDatePickerActiveDateChange: EventEmitter<Date>;
   /**
    * @internal
    */
-  calciteInternalDatePickerMouseOut: EventEmitter;
-  keyDownHandler: (e: KeyboardEvent) => void;
+  calciteInternalDatePickerMouseOut: EventEmitter<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
   /**
    * Once user is not interacting via keyboard,
    * disable auto focusing of active date
@@ -107,8 +107,8 @@ export declare class DatePickerMonth {
    */
   private isStartOfRange;
   private isEndOfRange;
-  dayHover: (e: CustomEvent) => void;
-  daySelect: (e: CustomEvent) => void;
+  dayHover: (event: CustomEvent) => void;
+  daySelect: (event: CustomEvent) => void;
   /**
    * Render calcite-date-picker-day
    *

package/dist/types/components/date-picker-month-header/date-picker-month-header.d.ts

@@ -42,7 +42,7 @@ export declare class DatePickerMonthHeader {
   /**
    * Increment year on UP/DOWN keys
    *
-   * @param e
+   * @param event
    */
   private onYearKey;
   private formatCalendarYear;

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

@@ -1,7 +1,6 @@
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "./interfaces";
-import { ComputedPlacement, OverlayPositioning, MenuPlacement } from "../../utils/popper";
-import { StrictModifiers } from "@popperjs/core";
+import { OverlayPositioning, FloatingUIComponent, EffectivePlacement, MenuPlacement } from "../../utils/floating-ui";
 import { Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
@@ -9,7 +8,7 @@ import { OpenCloseComponent } from "../../utils/openCloseComponent";
  * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
  * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
  */
-export declare class Dropdown implements InteractiveComponent, OpenCloseComponent {
+export declare class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteDropdownElement;
   /**
    * Opens or closes the dropdown
@@ -31,7 +30,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: ComputedPlacement[];
+  flipPlacements?: EffectivePlacement[];
   flipPlacementsHandler(): void;
   /**
    specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
@@ -41,10 +40,11 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   maxItemsHandler(): void;
   /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;
+  overlayPositioningHandler(): void;
   /**
    * Determines where the dropdown will be positioned relative to the button.
    *
-   * @default "bottom-leading"
+   * @default "bottom-start"
    */
   placement: MenuPlacement;
   placementHandler(): void;
@@ -69,33 +69,37 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   reposition(): Promise<void>;
   /** fires when a dropdown item has been selected or deselected */
   calciteDropdownSelect: EventEmitter<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteDropdownBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calciteDropdownClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
   calciteDropdownBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
   calciteDropdownOpen: EventEmitter<void>;
-  closeCalciteDropdownOnClick(e: Event): void;
-  closeCalciteDropdownOnEvent(e: Event): void;
-  closeCalciteDropdownOnOpenEvent(e: Event): void;
+  closeCalciteDropdownOnClick(event: Event): void;
+  closeCalciteDropdownOnEvent(event: Event): void;
+  closeCalciteDropdownOnOpenEvent(event: Event): void;
   mouseEnterHandler(): void;
   mouseLeaveHandler(): void;
-  calciteInternalDropdownItemKeyEvent(e: CustomEvent<ItemKeyboardEvent>): void;
+  calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void;
   handleItemSelect(event: CustomEvent): void;
-  filteredFlipPlacements: ComputedPlacement[];
+  filteredFlipPlacements: EffectivePlacement[];
   private items;
-  private groups;
   /** trigger elements */
   private triggers;
-  private popper;
-  private menuEl;
-  private referenceEl;
+  floatingEl: HTMLDivElement;
+  referenceEl: HTMLDivElement;
   private activeTransitionProp;
   private scrollerEl;
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
+  guid: string;
+  defaultAssignedElements: Element[];
+  slotChangeHandler: (event: Event) => void;
   setFilteredPlacements: () => void;
   updateTriggers: (event: Event) => void;
   updateItems: () => void;
-  updateGroups: (event: Event) => void;
   resizeObserverCallback: (entries: ResizeObserverEntry[]) => void;
   setDropdownWidth: () => void;
   setMaxScrollerHeight: () => void;
@@ -107,10 +111,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   onBeforeClose(): void;
   onClose(): void;
   setReferenceEl: (el: HTMLDivElement) => void;
-  setMenuEl: (el: HTMLDivElement) => void;
-  getModifiers(): Partial<StrictModifiers>[];
-  createPopper(): void;
-  destroyPopper(): void;
+  setFloatingEl: (el: HTMLDivElement) => void;
   private keyDownHandler;
   private updateSelectedItems;
   private getMaxScrollerHeight;

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

@@ -1,5 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { SelectionMode } from "./interfaces";
+import { RequestedItem, SelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-dropdown-item`s.
@@ -20,7 +20,7 @@ export declare class DropdownGroup {
   /**
    * @internal
    */
-  calciteInternalDropdownItemChange: EventEmitter;
+  calciteInternalDropdownItemChange: EventEmitter<RequestedItem>;
   componentWillLoad(): void;
   render(): VNode;
   updateActiveItemOnChange(event: CustomEvent): void;

package/dist/types/components/dropdown-group/interfaces.d.ts

@@ -1 +1,5 @@
 export declare type SelectionMode = "multi" | "single" | "none";
+export interface RequestedItem {
+  requestedDropdownItem: HTMLCalciteDropdownItemElement;
+  requestedDropdownGroup: HTMLCalciteDropdownGroupElement;
+}

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "../dropdown/interfaces";
 import { FlipContext } from "../interfaces";
+import { RequestedItem } from "../dropdown-group/interfaces";
 /**
  * @slot - A slot for adding text.
  */
@@ -25,18 +26,18 @@ export declare class DropdownItem {
   /**
    * @internal
    */
-  calciteInternalDropdownItemSelect: EventEmitter;
+  calciteInternalDropdownItemSelect: EventEmitter<RequestedItem>;
   /** @internal */
   calciteInternalDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;
   /** @internal */
-  calciteInternalDropdownCloseRequest: EventEmitter;
+  calciteInternalDropdownCloseRequest: EventEmitter<void>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
   connectedCallback(): void;
   render(): VNode;
   onClick(): void;
-  keyDownHandler(e: KeyboardEvent): void;
+  keyDownHandler(event: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
   /** id of containing group */
   private parentDropdownGroupEl;

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

@@ -1,4 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { DeprecatedEventPayload } from "../interfaces";
 export declare class Handle {
   /**
    * @internal
@@ -12,8 +13,10 @@ export declare class Handle {
   handleButton: HTMLElement;
   /**
    * Emitted when the the handle is activated and the up or down arrow key is pressed.
+   *
+   * **Note:**: The `handle` event payload prop is deprecated, please use the event's target/currentTarget instead
    */
-  calciteHandleNudge: EventEmitter;
+  calciteHandleNudge: EventEmitter<DeprecatedEventPayload>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   handleKeyDown: (event: KeyboardEvent) => void;

package/dist/types/components/inline-editable/inline-editable.d.ts

@@ -54,7 +54,7 @@ export declare class InlineEditable implements InteractiveComponent, LabelableCo
   /**
    * @internal
    */
-  calciteInternalInlineEditableEnableEditingChange: EventEmitter;
+  calciteInternalInlineEditableEnableEditingChange: EventEmitter<void>;
   blurHandler(): void;
   private inputElement;
   private valuePriorToEditing;

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

@@ -1,4 +1,4 @@
-import { Scale, Status } from "../interfaces";
+import { DeprecatedEventPayload, Scale, Status } from "../interfaces";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { InputPlacement } from "./interfaces";
 import { Position } from "../interfaces";
@@ -189,15 +189,17 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
   /**
    * @internal
    */
-  calciteInternalInputFocus: EventEmitter;
+  calciteInternalInputFocus: EventEmitter<void>;
   /**
    * @internal
    */
-  calciteInternalInputBlur: EventEmitter;
+  calciteInternalInputBlur: EventEmitter<void>;
   /**
    * Fires each time a new value is typed.
+   *
+   * **Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead
    */
-  calciteInputInput: EventEmitter;
+  calciteInputInput: EventEmitter<DeprecatedEventPayload>;
   /**
    * Fires each time a new value is typed and committed.
    */

package/dist/types/components/input-date-picker/input-date-picker.d.ts

@@ -2,12 +2,11 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-import { OverlayPositioning, ComputedPlacement, MenuPlacement } from "../../utils/popper";
-import { StrictModifiers } from "@popperjs/core";
+import { OverlayPositioning, FloatingUIComponent, EffectivePlacement, MenuPlacement } from "../../utils/floating-ui";
 import { DateRangeChange } from "../date-picker/interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
-export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent {
+export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteInputDatePickerElement;
   /**
    * When false, the component won't be interactive.
@@ -26,7 +25,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: ComputedPlacement[];
+  flipPlacements?: EffectivePlacement[];
   flipPlacementsHandler(): void;
   /**
    * Number at which section headings should start for this component.
@@ -95,7 +94,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   /**
    * Determines where the date-picker component will be positioned relative to the input.
    *
-   * @default "bottom-leading"
+   * @default "bottom-start"
    */
   placement: MenuPlacement;
   /** Range mode activation */
@@ -120,6 +119,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   end?: string;
   /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;
+  overlayPositioningHandler(): void;
   /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
   proximitySelectionDisabled: boolean;
   /** Layout */
@@ -143,9 +143,13 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
    * This event fires when the input date picker value changes.
    */
   calciteInputDatePickerChange: EventEmitter<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteInputDatePickerBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calciteInputDatePickerClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
   calciteInputDatePickerBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
   calciteInputDatePickerOpen: EventEmitter<void>;
   /** Updates the position of the component. */
   setFocus(): Promise<void>;
@@ -153,10 +157,11 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   reposition(): Promise<void>;
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;
   render(): VNode;
-  filteredFlipPlacements: ComputedPlacement[];
+  filteredFlipPlacements: EffectivePlacement[];
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: InputDatePicker["value"];
@@ -164,8 +169,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private localeData;
   private startInput;
   private endInput;
-  private popper;
-  private menuEl;
+  private floatingEl;
   private referenceEl;
   private startWrapper;
   private endWrapper;
@@ -184,18 +188,14 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   setStartInput: (el: HTMLCalciteInputElement) => void;
   setEndInput: (el: HTMLCalciteInputElement) => void;
   deactivate: () => void;
-  keyDownHandler: (event: KeyboardEvent) => void;
-  keyUpHandler: (e: KeyboardEvent) => void;
-  inputBlur: (e: CustomEvent<any>) => void;
+  keyDownHandler: ({ defaultPrevented, key }: KeyboardEvent) => void;
+  inputBlur: (event: CustomEvent<any>) => void;
   startInputFocus: () => void;
   endInputFocus: () => void;
-  inputInput: (e: CustomEvent<any>) => void;
-  setMenuEl: (el: HTMLDivElement) => void;
+  inputInput: (event: CustomEvent<any>) => void;
+  setFloatingEl: (el: HTMLDivElement) => void;
   setStartWrapper: (el: HTMLDivElement) => void;
   setEndWrapper: (el: HTMLDivElement) => void;
-  getModifiers(): Partial<StrictModifiers>[];
-  createPopper(): void;
-  destroyPopper(): void;
   startWatcher(start: string): void;
   endWatcher(end: string): void;
   private loadLocaleData;

package/dist/types/components/input-number/input-number.d.ts

@@ -1,4 +1,4 @@
-import { Scale, Status } from "../interfaces";
+import { DeprecatedEventPayload, Scale, Status } from "../interfaces";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { InputPlacement } from "./interfaces";
 import { Position } from "../interfaces";
@@ -172,15 +172,17 @@ export declare class InputNumber implements LabelableComponent, FormComponent, I
   /**
    * @internal
    */
-  calciteInternalInputNumberFocus: EventEmitter;
+  calciteInternalInputNumberFocus: EventEmitter<void>;
   /**
    * @internal
    */
-  calciteInternalInputNumberBlur: EventEmitter;
+  calciteInternalInputNumberBlur: EventEmitter<void>;
   /**
    * Fires each time a new value is typed.
+   *
+   * **Note:**: The `el` and `value` event payload props are deprecated, please use the event's target/currentTarget instead
    */
-  calciteInputNumberInput: EventEmitter;
+  calciteInputNumberInput: EventEmitter<DeprecatedEventPayload>;
   /**
    * Fires each time a new value is typed and committed.
    */

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

@@ -1,6 +1,6 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-import { PopperPlacement } from "../../utils/popper";
+import { LogicalPlacement } from "../../utils/floating-ui";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
@@ -62,9 +62,9 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   /**
    * Determines where the popover will be positioned relative to the input.
    *
-   * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+   * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
    */
-  placement: PopperPlacement;
+  placement: LogicalPlacement;
   /** number (seconds) that specifies the granularity that the value must adhere to */
   step: number;
   /** The selected time in UTC (always 24-hour format) */
@@ -89,7 +89,6 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   private calciteInternalInputFocusHandler;
   private calciteInputInputHandler;
   clickHandler(event: MouseEvent): void;
-  keyUpHandler(event: KeyboardEvent): void;
   timePickerBlurHandler(event: CustomEvent): void;
   private timePickerChangeHandler;
   timePickerFocusHandler(event: CustomEvent): void;
@@ -97,7 +96,7 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   setFocus(): Promise<void>;
   /** Updates the position of the component. */
   reposition(): Promise<void>;
-  keyDownHandler: (event: KeyboardEvent) => void;
+  keyDownHandler: ({ defaultPrevented, key }: KeyboardEvent) => void;
   onLabelClick(): void;
   private shouldIncludeSeconds;
   private setCalcitePopoverEl;

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

@@ -10,3 +10,4 @@ export declare type Status = "invalid" | "valid" | "idle";
 export declare type ThemeClass = "calcite-theme-light" | "calcite-theme-dark" | "calcite-theme-auto";
 export declare type ThemeName = "light" | "dark" | "auto";
 export declare type Width = "auto" | "half" | "full";
+export declare type DeprecatedEventPayload = any;

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

@@ -16,7 +16,11 @@ export declare class Loader {
   value: number;
   /** Text that displays under the component's indicator. */
   text?: string;
-  /** Disables spacing around the component. */
+  /**
+   * Disables spacing around the component.
+   *
+   * @deprecated Use `--calcite-loader-padding` CSS variable instead.
+   */
   noPadding: boolean;
   render(): VNode;
   /**

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

@@ -45,7 +45,11 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   color?: "red" | "blue";
   /** Sets the background color of the component's content. */
   backgroundColor: ModalBackgroundColor;
-  /** When true, disables spacing to the content area slot. */
+  /**
+   * When true, disables spacing to the content area slot.
+   *
+   * @deprecated  Use `--calcite-modal-padding` CSS variable instead.
+   */
   noPadding: boolean;
   componentWillLoad(): void;
   connectedCallback(): void;
@@ -63,10 +67,14 @@ export declare class Modal implements ConditionalSlotComponent, OpenCloseCompone
   titleId: string;
   private activeTransitionProp;
   private containerEl;
-  handleEscape(e: KeyboardEvent): void;
+  handleEscape(event: KeyboardEvent): void;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteModalBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calciteModalClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
   calciteModalBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
   calciteModalOpen: EventEmitter<void>;
   /**
    * Focus the first interactive element.

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

@@ -16,8 +16,16 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class Notice implements ConditionalSlotComponent {
   el: HTMLCalciteNoticeElement;
-  /** When true, the component is active. */
+  /**
+   * When true, the component is active.
+   *
+   * @deprecated Use open instead.
+   */
   active: boolean;
+  activeHandler(value: boolean): void;
+  /** When true, the component is visible */
+  open: boolean;
+  openHandler(value: boolean): void;
   /** The color for the component's top border and icon. */
   color: StatusColor;
   /**
@@ -49,9 +57,9 @@ export declare class Notice implements ConditionalSlotComponent {
   componentWillLoad(): void;
   render(): VNode;
   /** Fired when the component is closed. */
-  calciteNoticeClose: EventEmitter;
+  calciteNoticeClose: EventEmitter<void>;
   /** Fired when the component is opened. */
-  calciteNoticeOpen: EventEmitter;
+  calciteNoticeOpen: EventEmitter<void>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private close;

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

@@ -22,7 +22,8 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   dismissed: boolean;
   /** When true, panel will be hidden */
   closed: boolean;
-  dismissedHandler(): void;
+  dismissedHandler(value: boolean): void;
+  closedHandler(value: boolean): void;
   /**
    * When provided, this method will be called before it is removed from the parent flow.
    */
@@ -37,8 +38,10 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
    * @deprecated use closable instead
    */
   dismissible: boolean;
+  dismissibleHandler(value: boolean): void;
   /** When true, displays a close button in the trailing side of the header */
   closable: boolean;
+  closableHandler(value: boolean): void;
   /**
    * Specifies the number at which section headings should start.
    */
@@ -90,7 +93,7 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   componentDidRender(): void;
   el: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
-  dismissButtonEl: HTMLCalciteActionElement;
+  closeButtonEl: HTMLCalciteActionElement;
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
@@ -99,27 +102,27 @@ export declare class Panel implements ConditionalSlotComponent, InteractiveCompo
   /**
    * Fires when the close button is clicked.
    */
-  calcitePanelDismiss: EventEmitter;
+  calcitePanelDismiss: EventEmitter<void>;
   /**
-   * Fires when the close button is clicked.
+   * Fires when there is a change to the `dismissed` property value .
    *
    * @deprecated use calcitePanelDismiss instead.
    */
-  calcitePanelDismissedChange: EventEmitter;
+  calcitePanelDismissedChange: EventEmitter<void>;
   /**
    * Fires when the content is scrolled.
    */
-  calcitePanelScroll: EventEmitter;
+  calcitePanelScroll: EventEmitter<void>;
   /**
    * Fires when the back button is clicked.
    */
-  calcitePanelBackClick: EventEmitter;
+  calcitePanelBackClick: EventEmitter<void>;
   resizeHandler: () => void;
   setContainerRef: (node: HTMLElement) => void;
-  setDismissRef: (node: HTMLCalciteActionElement) => void;
+  setCloseRef: (node: HTMLCalciteActionElement) => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
   panelKeyDownHandler: (event: KeyboardEvent) => void;
-  dismiss: () => void;
+  close: () => void;
   panelScrollHandler: () => void;
   backButtonClick: () => void;
   /**

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

@@ -1,4 +1,4 @@
-import { ReferenceElement } from "../../utils/popper";
+import { ReferenceElement } from "../../utils/floating-ui";
 export default class PopoverManager {
   private registeredElements;
   private registeredElementCount;

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

@@ -1,12 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { PopperPlacement, OverlayPositioning, ComputedPlacement, ReferenceElement } from "../../utils/popper";
-import { StrictModifiers, Instance as Popper } from "@popperjs/core";
+import { OverlayPositioning, FloatingUIComponent, LogicalPlacement, EffectivePlacement, ReferenceElement } from "../../utils/floating-ui";
 import { OpenCloseComponent } from "../../utils/openCloseComponent";
 import { HeadingLevel } from "../functional/Heading";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class Popover implements OpenCloseComponent {
+export declare class Popover implements FloatingUIComponent, OpenCloseComponent {
   /**
    * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
    */
@@ -36,7 +35,7 @@ export declare class Popover implements OpenCloseComponent {
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: ComputedPlacement[];
+  flipPlacements?: EffectivePlacement[];
   flipPlacementsHandler(): void;
   /**
    * The component header text.
@@ -67,12 +66,13 @@ export declare class Popover implements OpenCloseComponent {
   openHandler(): void;
   /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
   overlayPositioning: OverlayPositioning;
+  overlayPositioningHandler(): void;
   /**
    * 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)
+   * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
    */
-  placement: PopperPlacement;
+  placement: LogicalPlacement;
   placementHandler(): void;
   /**
    *  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.
@@ -89,10 +89,9 @@ export declare class Popover implements OpenCloseComponent {
    * @default "Close"
    */
   intlClose: string;
-  filteredFlipPlacements: ComputedPlacement[];
+  filteredFlipPlacements: EffectivePlacement[];
   el: HTMLCalcitePopoverElement;
   effectiveReferenceElement: ReferenceElement;
-  popper: Popper;
   arrowEl: HTMLDivElement;
   closeButtonEl: HTMLCalciteActionElement;
   guid: string;
@@ -103,9 +102,13 @@ export declare class Popover implements OpenCloseComponent {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
   calcitePopoverBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
   calcitePopoverClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
   calcitePopoverBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
   calcitePopoverOpen: EventEmitter<void>;
   /** Updates the position of the component. */
   reposition(): Promise<void>;
@@ -128,9 +131,6 @@ export declare class Popover implements OpenCloseComponent {
   addReferences: () => void;
   removeReferences: () => void;
   getReferenceElement(): ReferenceElement;
-  getModifiers(): Partial<StrictModifiers>[];
-  createPopper(): void;
-  destroyPopper(): void;
   hide: () => void;
   onBeforeOpen(): void;
   onOpen(): void;
@@ -138,6 +138,7 @@ export declare class Popover implements OpenCloseComponent {
   onClose(): void;
   transitionStartHandler: (event: TransitionEvent) => void;
   transitionEnd: (event: TransitionEvent) => void;
+  storeArrowEl: (el: HTMLDivElement) => void;
   renderCloseButton(): VNode;
   renderHeader(): VNode;
   render(): VNode;