@yamada-ui/react/dist/types/hooks/use-popper/index.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Dict } from "../../utils/index.js";
import { Direction } from "../../core/system/index.types.js";
import { DOMElement, HTMLElementProps, HTMLProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import * as react23 from "react";
import { ComponentRef } from "react";
import * as _floating_ui_react_dom0 from "@floating-ui/react-dom";
import { Middleware, Placement, Platform, Strategy, VirtualElement } from "@floating-ui/react-dom";

//#region src/hooks/use-popper/index.d.ts
type Reference<Y extends DOMElement | VirtualElement = "div"> = Y extends DOMElement ? ComponentRef<Y> : Y;
interface UsePopperProps<Y extends DOMElement | VirtualElement = "div"> {
  /**
   * If `true`, automatically updates the position of the floating element when necessary.
   *
   * @default true
   */
  autoUpdate?: boolean;
  /**
   * Object containing the reference and floating elements.
   */
  elements?: {
    floating?: HTMLElement | null;
    reference?: null | Reference<Y>;
  };
  /**
   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
   *
   * @default true
   */
  flip?: boolean;
  /**
   * The distance or margin between the reference and popper.
   * It is used internally to create an `offset` modifier.
   *
   * @default 8
   */
  gutter?: number;
  /**
   * If `true`, the popper will match the width of the reference at all times.
   * It's useful for `autocomplete`, `date-picker` and `select` patterns.
   *
   * @default false
   */
  matchWidth?: boolean;
  /**
   * Array of middleware objects to modify the positioning or provide data for
   * rendering.
   */
  middleware?: (false | Middleware | null | undefined)[];
  /**
   * The main and cross-axis offset to displace popper element from its reference element.
   */
  offset?: [number, number];
  /**
   * Whether the popper should be enabled.
   *
   * @default true
   */
  open?: boolean;
  /**
   * The placement of the popper relative to its reference.
   *
   * @default 'start'
   */
  placement?: Direction;
  /**
   * Custom or extended platform object.
   */
  platform?: Platform;
  /**
   * If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
   *
   * @default true
   */
  preventOverflow?: boolean;
  /**
   * The CSS positioning strategy to use.
   *
   * @default 'absolute'
   */
  strategy?: Strategy;
  /**
   * Whether to use `transform` for positioning instead of `top` and `left`
   * (layout) in the `floatingStyles` object.
   *
   * @default true
   */
  transform?: boolean;
  /**
   * A callback invoked when both the reference and floating elements are
   * mounted, and cleaned up when either is unmounted. This is useful for
   * setting up event listeners (e.g. pass `autoUpdate`).
   */
  whileElementsMounted?: (reference: Reference<Y>, floating: HTMLElement, update: () => void) => () => void;
}
declare const usePopper: <Y extends DOMElement | VirtualElement = "div", M extends DOMElement = "div">({
  autoUpdate: autoUpdateProp,
  elements,
  flip: flipProp,
  gutter,
  matchWidth,
  middleware: middlewareProp,
  offset: offsetProp,
  open,
  placement,
  platform,
  preventOverflow,
  strategy,
  transform,
  whileElementsMounted: whileElementsMountedProp
}?: UsePopperProps<Y>) => {
  refs: {
    reference: react23.MutableRefObject<Reference<Y> | null>;
    floating: React.MutableRefObject<HTMLElement | null>;
    setReference: (node: Reference<Y> | null) => void;
    setFloating: (node: HTMLElement | null) => void;
  };
  getPopperProps: <H extends DOMElement = M>(props?: HTMLProps<H>) => HTMLProps<H>;
  getReferenceProps: <D extends DOMElement | VirtualElement = Y>(props?: D extends DOMElement ? HTMLProps<D> : HTMLElementProps) => D extends DOMElement ? HTMLProps<D> : HTMLElementProps;
  placement: Placement;
  strategy: Strategy;
  middlewareData: _floating_ui_react_dom0.MiddlewareData;
  x: number;
  y: number;
  isPositioned: boolean;
  update: () => void;
  elements: {
    reference: Reference<Y> | null;
    floating: HTMLElement | null;
  };
};
type UsePopperReturn = ReturnType<typeof usePopper>;
declare const popperProps: (keyof UsePopperProps)[];
declare const usePopperProps: <Y extends DOMElement | VirtualElement = "div", M extends Dict = Dict, D extends keyof UsePopperProps = keyof UsePopperProps>(props: M, omitKeys?: D[]) => [keyof UsePopperProps extends D ? UsePopperProps<Y> : Omit<UsePopperProps<Y>, D>, Omit<M, keyof UsePopperProps extends D ? keyof UsePopperProps : Exclude<keyof UsePopperProps, D>>];
//#endregion
export { UsePopperProps, UsePopperReturn, popperProps, usePopper, usePopperProps };
//# sourceMappingURL=index.d.ts.map