@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/types/preact.d.ts

@@ -119,12 +119,12 @@ declare module "preact/src/jsx" {
         "oncalciteDatePickerSelect"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-dropdown": Omit<JSX.CalciteDropdown, "onCalciteDropdownSelect" | "onCalciteDropdownBeforeOpen" | "onCalciteDropdownOpen" | "onCalciteDropdownBeforeClose" | "onCalciteDropdownClose"> & JSXInternal.HTMLAttributes<HTMLCalciteDropdownElement> & {
+      "calcite-dropdown": Omit<JSX.CalciteDropdown, "onCalciteDropdownSelect" | "onCalciteDropdownBeforeClose" | "onCalciteDropdownClose" | "onCalciteDropdownBeforeOpen" | "onCalciteDropdownOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteDropdownElement> & {
         "oncalciteDropdownSelect"?: (event: CustomEvent<any>) => void;
-        "oncalciteDropdownBeforeOpen"?: (event: CustomEvent<any>) => void;
-        "oncalciteDropdownOpen"?: (event: CustomEvent<any>) => void;
         "oncalciteDropdownBeforeClose"?: (event: CustomEvent<any>) => void;
         "oncalciteDropdownClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteDropdownBeforeOpen"?: (event: CustomEvent<any>) => void;
+        "oncalciteDropdownOpen"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-dropdown-group": Omit<JSX.CalciteDropdownGroup, "onCalciteInternalDropdownItemChange"> & JSXInternal.HTMLAttributes<HTMLCalciteDropdownGroupElement> & {
@@ -166,12 +166,14 @@ declare module "preact/src/jsx" {
         "oncalciteInputChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerChange" | "onCalciteInternalInputDatePickerOpen" | "onCalciteInternalInputDatePickerClose"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
+      "calcite-input-date-picker": Omit<JSX.CalciteInputDatePicker, "onCalciteDatePickerChange" | "onCalciteDatePickerRangeChange" | "onCalciteInputDatePickerChange" | "onCalciteInputDatePickerBeforeClose" | "onCalciteInputDatePickerClose" | "onCalciteInputDatePickerBeforeOpen" | "onCalciteInputDatePickerOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteInputDatePickerElement> & {
         "oncalciteDatePickerChange"?: (event: CustomEvent<any>) => void;
         "oncalciteDatePickerRangeChange"?: (event: CustomEvent<any>) => void;
         "oncalciteInputDatePickerChange"?: (event: CustomEvent<any>) => void;
-        "oncalciteInternalInputDatePickerOpen"?: (event: CustomEvent<any>) => void;
-        "oncalciteInternalInputDatePickerClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerBeforeClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerBeforeOpen"?: (event: CustomEvent<any>) => void;
+        "oncalciteInputDatePickerOpen"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-input-message": JSX.CalciteInputMessage & JSXInternal.HTMLAttributes<HTMLCalciteInputMessageElement>
@@ -201,9 +203,11 @@ declare module "preact/src/jsx" {
 
       "calcite-loader": JSX.CalciteLoader & JSXInternal.HTMLAttributes<HTMLCalciteLoaderElement>
 
-      "calcite-modal": Omit<JSX.CalciteModal, "onCalciteModalOpen" | "onCalciteModalClose"> & JSXInternal.HTMLAttributes<HTMLCalciteModalElement> & {
-        "oncalciteModalOpen"?: (event: CustomEvent<any>) => void;
+      "calcite-modal": Omit<JSX.CalciteModal, "onCalciteModalBeforeClose" | "onCalciteModalClose" | "onCalciteModalBeforeOpen" | "onCalciteModalOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteModalElement> & {
+        "oncalciteModalBeforeClose"?: (event: CustomEvent<any>) => void;
         "oncalciteModalClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteModalBeforeOpen"?: (event: CustomEvent<any>) => void;
+        "oncalciteModalOpen"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-notice": Omit<JSX.CalciteNotice, "onCalciteNoticeClose" | "onCalciteNoticeOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteNoticeElement> & {
@@ -244,8 +248,10 @@ declare module "preact/src/jsx" {
         "oncalciteInternalListItemValueChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-popover": Omit<JSX.CalcitePopover, "onCalcitePopoverClose" | "onCalcitePopoverOpen"> & JSXInternal.HTMLAttributes<HTMLCalcitePopoverElement> & {
+      "calcite-popover": Omit<JSX.CalcitePopover, "onCalcitePopoverBeforeClose" | "onCalcitePopoverClose" | "onCalcitePopoverBeforeOpen" | "onCalcitePopoverOpen"> & JSXInternal.HTMLAttributes<HTMLCalcitePopoverElement> & {
+        "oncalcitePopoverBeforeClose"?: (event: CustomEvent<any>) => void;
         "oncalcitePopoverClose"?: (event: CustomEvent<any>) => void;
+        "oncalcitePopoverBeforeOpen"?: (event: CustomEvent<any>) => void;
         "oncalcitePopoverOpen"?: (event: CustomEvent<any>) => void;
       }
 

package/dist/types/utils/floating-ui.d.ts

@@ -0,0 +1,109 @@
+import { Placement, Strategy, VirtualElement } from "@floating-ui/dom";
+export declare type ReferenceElement = VirtualElement | Element;
+declare type UIType = "menu" | "tooltip" | "popover";
+export declare type OverlayPositioning = Strategy;
+/**
+ * Placements that change based on element direction.
+ *
+ * These variation placements will automatically flip "left"/"right" depending on LTR/RTL direction.
+ *
+ * Floating-ui has no plans to offer this functionality out of the box at this time.
+ *
+ * see: https://github.com/floating-ui/floating-ui/issues/1563 and https://github.com/floating-ui/floating-ui/discussions/1549
+ */
+declare type VariationPlacement = "leading-start" | "leading" | "leading-end" | "trailing-end" | "trailing" | "trailing-start";
+declare type AutoPlacement = "auto" | "auto-start" | "auto-end";
+/**
+ * Use "*-start" and "*-end" instead.
+ *
+ * There is no need for our "*-leading" and "*-trailing" values anymore since "*-start" and "*-end" are already flipped in RTL.
+ *
+ * @deprecated use expanded instead
+ */
+declare type DeprecatedPlacement = "leading-leading" | "leading-trailing" | "trailing-leading" | "trailing-trailing" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing" | "right-leading" | "right-trailing" | "left-leading" | "left-trailing";
+export declare type LogicalPlacement = AutoPlacement | Placement | VariationPlacement | DeprecatedPlacement;
+export declare type EffectivePlacement = Placement;
+export declare const placements: LogicalPlacement[];
+export declare const effectivePlacements: EffectivePlacement[];
+export declare const menuPlacements: MenuPlacement[];
+export declare const menuEffectivePlacements: EffectivePlacement[];
+export declare const flipPlacements: EffectivePlacement[];
+export declare type MenuPlacement = Extract<LogicalPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end">;
+export declare const defaultMenuPlacement: MenuPlacement;
+export interface FloatingUIComponent {
+  /**
+   * Whether the component is opened.
+   */
+  open: boolean;
+  /**
+   * 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;
+  /**
+   * Determines where the component will be positioned relative to the referenceElement.
+   *
+   * Possible values: "auto", "auto-start", "auto-end", "top", "right", "bottom", "left", "top-start", "top-end", "right-start", "right-end", "bottom-start", "bottom-end", "left-start", "left-end", "leading-start", "leading", "leading-end", "trailing-end", "trailing",  or "trailing-start".
+   *
+   */
+  placement: LogicalPlacement;
+  /**
+   * Updates the position of the component.
+   */
+  reposition(): Promise<void>;
+}
+export declare const FloatingCSS: {
+  animation: string;
+  animationActive: string;
+};
+export declare function filterComputedPlacements(placements: string[], el: HTMLElement): EffectivePlacement[];
+export declare function getEffectivePlacement(floatingEl: HTMLElement, placement: LogicalPlacement): EffectivePlacement;
+/**
+ * Positions the floating element relative to the reference element.
+ *
+ * @param root0
+ * @param root0.referenceEl
+ * @param root0.floatingEl
+ * @param root0.overlayPositioning
+ * @param root0.placement
+ * @param root0.disableFlip
+ * @param root0.flipPlacements
+ * @param root0.offsetDistance
+ * @param root0.offsetSkidding
+ * @param root0.arrowEl
+ * @param root0.type
+ */
+export declare function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning, placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type }: {
+  referenceEl: ReferenceElement;
+  floatingEl: HTMLElement;
+  overlayPositioning: Strategy;
+  placement: LogicalPlacement;
+  disableFlip?: boolean;
+  flipPlacements?: EffectivePlacement[];
+  offsetDistance?: number;
+  offsetSkidding?: number;
+  arrowEl?: HTMLElement;
+  type: UIType;
+}): Promise<void>;
+/**
+ * Helper to set up floating element interactions on connectedCallback.
+ *
+ * @param component
+ * @param referenceEl
+ * @param floatingEl
+ */
+export declare function connectFloatingUI(component: FloatingUIComponent, referenceEl: ReferenceElement, floatingEl: HTMLElement): void;
+/**
+ * Helper to tear down floating element interactions on disconnectedCallback.
+ *
+ * @param component
+ * @param referenceEl
+ * @param floatingEl
+ */
+export declare function disconnectFloatingUI(component: FloatingUIComponent, referenceEl: ReferenceElement, floatingEl: HTMLElement): void;
+/**
+ * Default offset the position of the floating element away from the reference element.
+ *
+ * @default 6
+ */
+export declare const defaultOffsetDistance: number;
+export {};