react-floater/dist/index.d.cts

Floaters everywhere!

import * as react_jsx_runtime0 from "react/jsx-runtime";
import { CSSProperties, FunctionComponent, MouseEventHandler, ReactElement, ReactNode } from "react";
import { Instance, Placement as Placement$1 } from "@popperjs/core";
import { ApplyStylesModifier } from "@popperjs/core/lib/modifiers/applyStyles";
import { ArrowModifier } from "@popperjs/core/lib/modifiers/arrow";
import { ComputeStylesModifier } from "@popperjs/core/lib/modifiers/computeStyles";
import { EventListenersModifier } from "@popperjs/core/lib/modifiers/eventListeners";
import { FlipModifier } from "@popperjs/core/lib/modifiers/flip";
import { HideModifier } from "@popperjs/core/lib/modifiers/hide";
import { OffsetModifier } from "@popperjs/core/lib/modifiers/offset";
import { PopperOffsetsModifier } from "@popperjs/core/lib/modifiers/popperOffsets";
import { PreventOverflowModifier } from "@popperjs/core/lib/modifiers/preventOverflow";

//#region src/types/popper.d.ts
type PopperInstance = Instance;
type PopperPlacement = Placement$1;
interface PopperModifiers {
  applyStyles?: Partial<ApplyStylesModifier>;
  arrow?: Partial<ArrowModifier>;
  computeStyles?: Partial<ComputeStylesModifier>;
  eventListeners?: Partial<EventListenersModifier>;
  flip?: Partial<FlipModifier>;
  hide?: Partial<HideModifier>;
  offset?: Partial<OffsetModifier>;
  popperOffsets?: Partial<PopperOffsetsModifier>;
  preventOverflow?: Partial<PreventOverflowModifier>;
}
//#endregion
//#region src/types/utilities.d.ts
type PartialDeep<T> = { [K in keyof T]?: T[K] extends object ? Partial<T[K]> : T[K] };
type RequireExactlyOne<T, Keys extends keyof T = keyof T> = { [K in Keys]: Required<Pick<T, K>> & Partial<Record<Exclude<Keys, K>, never>> }[Keys] & Omit<T, Keys>;
//#endregion
//#region src/types/common.d.ts
type Action = 'open' | 'close';
type CloseFunction<T = HTMLElement> = MouseEventHandler<T>;
type FloaterComponent<T = CustomComponentProps> = FunctionComponent<T> | ReactElement<T>;
type Placement = PopperPlacement | 'center';
type Props = RequireExactlyOne<BaseProps, 'content' | 'component'>;
type SelectorOrElement = string | null | HTMLElement;
interface BaseProps {
  /**
   * A custom arrow for the Floater.
   */
  arrow?: ReactNode;
  /**
   * Open the Floater automatically.
   * @default false
   */
  autoOpen?: boolean;
  callback?: (action: Action, props: Props) => void;
  children?: ReactNode;
  /**
   * A React element or function to be used as the custom UI for the Floater.
   * The prop closeFloater will be available in your component.
   */
  component: FloaterComponent;
  content: ReactNode;
  /**
   * Log some actions.
   * @default false
   */
  debug?: boolean;
  /**
   * Disable placement adjustments on scroll/resize.
   * @default false
   */
  disableFlip?: boolean;
  /**
   * Disable the conversion of hover to click on mobile.
   * @default false
   */
  disableHoverToClick?: boolean;
  /**
   * The event type that will trigger the Floater.
   * Unused in controlled mode.
   * @default click
   */
  event?: 'click' | 'hover';
  /**
   *  The amount of time (in seconds) that the floater should wait after a mouseLeave event before hiding.
   *  Only valid for event type hover.
   *  @default 0.4
   *  */
  eventDelay?: number;
  footer?: ReactNode;
  getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
  /**
   * Hide the arrow.
   * @default false
   */
  hideArrow?: boolean;
  id?: string;
  modifiers?: PopperModifiers;
  /**
   * The distance between the target and the Floater in pixels.
   * @default 15
   */
  offset?: number;
  open?: boolean;
  /**
   * The placement of the Floater
   * This will be updated automatically if there's no space available unless the "disableFlip" is set to true
   * @default bottom
   */
  placement?: Placement;
  portalElement?: SelectorOrElement;
  /**
   * Show a button to close the Floater.
   * @default false
   */
  showCloseButton?: boolean;
  style?: CSSProperties;
  styles?: PartialDeep<Styles>;
  target?: SelectorOrElement;
  title?: ReactNode;
  wrapperOptions?: {
    offset?: number;
    placement?: PopperPlacement;
    position?: boolean;
  };
}
interface CustomComponentProps {
  closeFn: CloseFunction;
}
interface Styles {
  arrow: CSSProperties & {
    /**
     * The distance from the tip of the arrow to the edge of the Floater.
     */
    base: number;
    /**
     * The width of the base of the arrow.
     */
    size: number;
  };
  close: CSSProperties;
  container: CSSProperties;
  content: CSSProperties;
  floater: CSSProperties;
  floaterCentered: CSSProperties;
  floaterClosing: CSSProperties;
  floaterOpening: CSSProperties;
  floaterWithAnimation: CSSProperties;
  floaterWithComponent: CSSProperties;
  footer: CSSProperties;
  options: {
    zIndex: number;
  };
  title: CSSProperties;
  wrapper: CSSProperties;
  wrapperPosition: CSSProperties;
}
declare global {
  interface Window {
    ReactFloaterDebug?: boolean;
  }
}
//#endregion
//#region src/index.d.ts
declare function ReactFloater(props: Props): react_jsx_runtime0.JSX.Element | null;
declare namespace ReactFloater {
    export { type Action, type CustomComponentProps, type Placement, type PopperInstance, type Props, type Styles, ReactFloater as default };
}

export = ReactFloater;