@yamada-ui/react 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358

package/dist/esm/hooks/use-popper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PLACEMENT_MAP: {\n  [key in Direction]: FloatingPlacement\n}","middleware: (false | Middleware | null | undefined)[]","elements","middleware","popperProps: (keyof UsePopperProps)[]"],"sources":["../../../../src/hooks/use-popper/index.ts"],"sourcesContent":["import type {\n  Placement as FloatingPlacement,\n  Middleware,\n  Platform,\n  Strategy,\n  UseFloatingOptions,\n  VirtualElement,\n} from \"@floating-ui/react-dom\"\nimport type { ComponentRef, Ref } from \"react\"\nimport type {\n  Direction,\n  DOMElement,\n  HTMLElementProps,\n  HTMLProps,\n} from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\"\nimport { useCallback, useMemo } from \"react\"\nimport { useSplitProps } from \"../../core\"\nimport { mergeRefs } from \"../../utils\"\n\nconst PLACEMENT_MAP: {\n  [key in Direction]: FloatingPlacement\n} = {\n  \"center-end\": \"right\",\n  \"center-start\": \"left\",\n  end: \"bottom\",\n  \"end-center\": \"bottom\",\n  \"end-end\": \"bottom-end\",\n  \"end-start\": \"bottom-start\",\n  start: \"top\",\n  \"start-center\": \"top\",\n  \"start-end\": \"top-end\",\n  \"start-start\": \"top-start\",\n}\n\ntype WhileElementsMounted = UseFloatingOptions[\"whileElementsMounted\"]\n\ntype Reference<Y extends DOMElement | VirtualElement = \"div\"> =\n  Y extends DOMElement ? ComponentRef<Y> : Y\n\nexport interface UsePopperProps<Y extends DOMElement | VirtualElement = \"div\"> {\n  /**\n   * If `true`, automatically updates the position of the floating element when necessary.\n   *\n   * @default true\n   */\n  autoUpdate?: boolean\n  /**\n   * Object containing the reference and floating elements.\n   */\n  elements?: {\n    floating?: HTMLElement | null\n    reference?: null | Reference<Y>\n  }\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: boolean\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: number\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: boolean\n  /**\n   * Array of middleware objects to modify the positioning or provide data for\n   * rendering.\n   */\n  middleware?: (false | Middleware | null | undefined)[]\n  /**\n   * The main and cross-axis offset to displace popper element from its reference element.\n   */\n  offset?: [number, number]\n  /**\n   * Whether the popper should be enabled.\n   *\n   * @default true\n   */\n  open?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'start'\n   */\n  placement?: Direction\n  /**\n   * Custom or extended platform object.\n   */\n  platform?: Platform\n  /**\n   * If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.\n   *\n   * @default true\n   */\n  preventOverflow?: boolean\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: Strategy\n  /**\n   * Whether to use `transform` for positioning instead of `top` and `left`\n   * (layout) in the `floatingStyles` object.\n   *\n   * @default true\n   */\n  transform?: boolean\n  /**\n   * A callback invoked when both the reference and floating elements are\n   * mounted, and cleaned up when either is unmounted. This is useful for\n   * setting up event listeners (e.g. pass `autoUpdate`).\n   */\n  whileElementsMounted?: (\n    reference: Reference<Y>,\n    floating: HTMLElement,\n    update: () => void,\n  ) => () => void\n}\n\nexport const usePopper = <\n  Y extends DOMElement | VirtualElement = \"div\",\n  M extends DOMElement = \"div\",\n>({\n  autoUpdate: autoUpdateProp = true,\n  elements,\n  flip: flipProp = true,\n  gutter = 8,\n  matchWidth,\n  middleware: middlewareProp,\n  offset: offsetProp,\n  open = true,\n  placement = \"start\",\n  platform,\n  preventOverflow = true,\n  strategy = \"absolute\",\n  transform = true,\n  whileElementsMounted: whileElementsMountedProp,\n}: UsePopperProps<Y> = {}) => {\n  const middleware = useMemo(() => {\n    const middleware: (false | Middleware | null | undefined)[] = []\n\n    if (offsetProp) {\n      const [mainAxis, crossAxis] = offsetProp\n\n      middleware.push(offset({ crossAxis, mainAxis }))\n    } else if (gutter) {\n      middleware.push(offset(gutter))\n    }\n\n    if (flipProp) middleware.push(flip())\n\n    if (preventOverflow) middleware.push(shift())\n\n    if (middlewareProp) middleware.push(...middlewareProp)\n\n    if (matchWidth)\n      middleware.push(\n        size({\n          apply({ elements, rects }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      )\n\n    return middleware\n  }, [\n    flipProp,\n    gutter,\n    matchWidth,\n    middlewareProp,\n    offsetProp,\n    preventOverflow,\n  ])\n  const whileElementsMounted = useMemo(() => {\n    if (whileElementsMountedProp)\n      return whileElementsMountedProp as WhileElementsMounted\n\n    if (autoUpdateProp) return autoUpdate\n  }, [autoUpdateProp, whileElementsMountedProp])\n\n  const { floatingStyles, refs, ...rest } = useFloating<Reference<Y>>({\n    elements,\n    middleware,\n    open,\n    placement: PLACEMENT_MAP[placement],\n    platform,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  const getReferenceProps = useCallback(\n    <D extends DOMElement | VirtualElement = Y>(\n      props?: D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    ) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setReference),\n      }) as D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    [refs.setReference],\n  )\n\n  const getPopperProps = useCallback(\n    <H extends DOMElement = M>(props?: HTMLProps<H>) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setFloating),\n        style: {\n          ...props?.style,\n          minWidth: matchWidth ? undefined : \"max-content\",\n          ...floatingStyles,\n        },\n      }) as HTMLProps<H>,\n    [refs.setFloating, matchWidth, floatingStyles],\n  )\n\n  return {\n    ...rest,\n    refs,\n    getPopperProps,\n    getReferenceProps,\n  }\n}\n\nexport type UsePopperReturn = ReturnType<typeof usePopper>\n\nexport const popperProps: (keyof UsePopperProps)[] = [\n  \"autoUpdate\",\n  \"elements\",\n  \"flip\",\n  \"gutter\",\n  \"matchWidth\",\n  \"middleware\",\n  \"offset\",\n  \"open\",\n  \"placement\",\n  \"platform\",\n  \"preventOverflow\",\n  \"strategy\",\n  \"transform\",\n  \"whileElementsMounted\",\n]\n\nexport const usePopperProps = <\n  Y extends DOMElement | VirtualElement = \"div\",\n  M extends Dict = Dict,\n  D extends keyof UsePopperProps = keyof UsePopperProps,\n>(\n  props: M,\n  omitKeys?: D[],\n) => {\n  return useSplitProps(\n    props,\n    popperProps.filter((key) => !omitKeys?.includes(key as D)),\n  ) as unknown as [\n    keyof UsePopperProps extends D\n      ? UsePopperProps<Y>\n      : Omit<UsePopperProps<Y>, D>,\n    Omit<\n      M,\n      keyof UsePopperProps extends D\n        ? keyof UsePopperProps\n        : Exclude<keyof UsePopperProps, D>\n    >,\n  ]\n}\n"],"mappings":";;;;;;;;AA4BA,MAAMA,gBAEF;CACF,cAAc;CACd,gBAAgB;CAChB,KAAK;CACL,cAAc;CACd,WAAW;CACX,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,aAAa;CACb,eAAe;CAChB;AAiGD,MAAa,aAGX,EACA,YAAY,iBAAiB,MAC7B,UACA,MAAM,WAAW,MACjB,SAAS,GACT,YACA,YAAY,gBACZ,QAAQ,YACR,OAAO,MACP,YAAY,SACZ,UACA,kBAAkB,MAClB,WAAW,YACX,YAAY,MACZ,sBAAsB,6BACD,EAAE,KAAK;CAC5B,MAAM,aAAa,cAAc;EAC/B,MAAMC,eAAwD,EAAE;AAEhE,MAAI,YAAY;GACd,MAAM,CAAC,UAAU,aAAa;AAE9B,gBAAW,KAAK,OAAO;IAAE;IAAW;IAAU,CAAC,CAAC;aACvC,OACT,cAAW,KAAK,OAAO,OAAO,CAAC;AAGjC,MAAI,SAAU,cAAW,KAAK,MAAM,CAAC;AAErC,MAAI,gBAAiB,cAAW,KAAK,OAAO,CAAC;AAE7C,MAAI,eAAgB,cAAW,KAAK,GAAG,eAAe;AAEtD,MAAI,WACF,cAAW,KACT,KAAK,EACH,MAAM,EAAE,sBAAU,SAAS;AACzB,UAAO,OAAOC,WAAS,SAAS,OAAO,EACrC,UAAU,GAAG,MAAM,UAAU,MAAM,KACpC,CAAC;KAEL,CAAC,CACH;AAEH,SAAOC;IACN;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,uBAAuB,cAAc;AACzC,MAAI,yBACF,QAAO;AAET,MAAI,eAAgB,QAAO;IAC1B,CAAC,gBAAgB,yBAAyB,CAAC;CAE9C,MAAM,EAAE,gBAAgB,MAAM,GAAG,SAAS,YAA0B;EAClE;EACA;EACA;EACA,WAAW,cAAc;EACzB;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,oBAAoB,aAEtB,WAEC;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,aAAa;EAC1D,GACH,CAAC,KAAK,aAAa,CACpB;CAED,MAAM,iBAAiB,aACM,WACxB;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,YAAY;EACxD,OAAO;GACL,GAAG,OAAO;GACV,UAAU,aAAa,SAAY;GACnC,GAAG;GACJ;EACF,GACH;EAAC,KAAK;EAAa;EAAY;EAAe,CAC/C;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACD;;AAKH,MAAaC,cAAwC;CACnD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAKX,OACA,aACG;AACH,QAAO,cACL,OACA,YAAY,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAS,CAAC,CAC3D"}
+{"version":3,"file":"index.js","names":["PLACEMENT_MAP: {\n  [key in Direction]: FloatingPlacement\n}","middleware: (false | Middleware | null | undefined)[]","elements","middleware","popperProps: (keyof UsePopperProps)[]"],"sources":["../../../../src/hooks/use-popper/index.ts"],"sourcesContent":["import type {\n  Placement as FloatingPlacement,\n  Middleware,\n  Platform,\n  Strategy,\n  UseFloatingOptions,\n  VirtualElement,\n} from \"@floating-ui/react-dom\"\nimport type { ComponentRef, Ref } from \"react\"\nimport type {\n  Direction,\n  DOMElement,\n  HTMLElementProps,\n  HTMLProps,\n} from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  size,\n  useFloating,\n} from \"@floating-ui/react-dom\"\nimport { useCallback, useMemo } from \"react\"\nimport { useSplitProps } from \"../../core\"\nimport { mergeRefs } from \"../../utils\"\n\nconst PLACEMENT_MAP: {\n  [key in Direction]: FloatingPlacement\n} = {\n  \"center-end\": \"right\",\n  \"center-end-end\": \"right-end\",\n  \"center-end-start\": \"right-start\",\n  \"center-start\": \"left\",\n  \"center-start-end\": \"left-end\",\n  \"center-start-start\": \"left-start\",\n  end: \"bottom\",\n  \"end-center\": \"bottom\",\n  \"end-end\": \"bottom-end\",\n  \"end-start\": \"bottom-start\",\n  start: \"top\",\n  \"start-center\": \"top\",\n  \"start-end\": \"top-end\",\n  \"start-start\": \"top-start\",\n}\n\ntype WhileElementsMounted = UseFloatingOptions[\"whileElementsMounted\"]\n\ntype Reference<Y extends DOMElement | VirtualElement = \"div\"> =\n  Y extends DOMElement ? ComponentRef<Y> : Y\n\nexport interface UsePopperProps<Y extends DOMElement | VirtualElement = \"div\"> {\n  /**\n   * If `true`, automatically updates the position of the floating element when necessary.\n   *\n   * @default true\n   */\n  autoUpdate?: boolean\n  /**\n   * Object containing the reference and floating elements.\n   */\n  elements?: {\n    floating?: HTMLElement | null\n    reference?: null | Reference<Y>\n  }\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: boolean\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: number\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: boolean\n  /**\n   * Array of middleware objects to modify the positioning or provide data for\n   * rendering.\n   */\n  middleware?: (false | Middleware | null | undefined)[]\n  /**\n   * The main and cross-axis offset to displace popper element from its reference element.\n   */\n  offset?: [number, number]\n  /**\n   * Whether the popper should be enabled.\n   *\n   * @default true\n   */\n  open?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'start'\n   */\n  placement?: Direction\n  /**\n   * Custom or extended platform object.\n   */\n  platform?: Platform\n  /**\n   * If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.\n   *\n   * @default true\n   */\n  preventOverflow?: boolean\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: Strategy\n  /**\n   * Whether to use `transform` for positioning instead of `top` and `left`\n   * (layout) in the `floatingStyles` object.\n   *\n   * @default true\n   */\n  transform?: boolean\n  /**\n   * A callback invoked when both the reference and floating elements are\n   * mounted, and cleaned up when either is unmounted. This is useful for\n   * setting up event listeners (e.g. pass `autoUpdate`).\n   */\n  whileElementsMounted?: (\n    reference: Reference<Y>,\n    floating: HTMLElement,\n    update: () => void,\n  ) => () => void\n}\n\nexport const usePopper = <\n  Y extends DOMElement | VirtualElement = \"div\",\n  M extends DOMElement = \"div\",\n>({\n  autoUpdate: autoUpdateProp = true,\n  elements,\n  flip: flipProp = true,\n  gutter = 8,\n  matchWidth,\n  middleware: middlewareProp,\n  offset: offsetProp,\n  open = true,\n  placement = \"start\",\n  platform,\n  preventOverflow = true,\n  strategy = \"absolute\",\n  transform = true,\n  whileElementsMounted: whileElementsMountedProp,\n}: UsePopperProps<Y> = {}) => {\n  const middleware = useMemo(() => {\n    const middleware: (false | Middleware | null | undefined)[] = []\n\n    if (offsetProp) {\n      const [mainAxis, crossAxis] = offsetProp\n\n      middleware.push(offset({ crossAxis, mainAxis }))\n    } else if (gutter) {\n      middleware.push(offset(gutter))\n    }\n\n    if (flipProp) middleware.push(flip())\n\n    if (preventOverflow) middleware.push(shift())\n\n    if (middlewareProp) middleware.push(...middlewareProp)\n\n    if (matchWidth)\n      middleware.push(\n        size({\n          apply({ elements, rects }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      )\n\n    return middleware\n  }, [\n    flipProp,\n    gutter,\n    matchWidth,\n    middlewareProp,\n    offsetProp,\n    preventOverflow,\n  ])\n  const whileElementsMounted = useMemo(() => {\n    if (whileElementsMountedProp)\n      return whileElementsMountedProp as WhileElementsMounted\n\n    if (autoUpdateProp) return autoUpdate\n  }, [autoUpdateProp, whileElementsMountedProp])\n\n  const { floatingStyles, refs, ...rest } = useFloating<Reference<Y>>({\n    elements,\n    middleware,\n    open,\n    placement: PLACEMENT_MAP[placement],\n    platform,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  const getReferenceProps = useCallback(\n    <D extends DOMElement | VirtualElement = Y>(\n      props?: D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    ) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setReference),\n      }) as D extends DOMElement ? HTMLProps<D> : HTMLElementProps,\n    [refs.setReference],\n  )\n\n  const getPopperProps = useCallback(\n    <H extends DOMElement = M>(props?: HTMLProps<H>) =>\n      ({\n        ...props,\n        ref: mergeRefs(props?.ref as Ref<any>, refs.setFloating),\n        style: {\n          ...props?.style,\n          minWidth: matchWidth ? undefined : \"max-content\",\n          ...floatingStyles,\n        },\n      }) as HTMLProps<H>,\n    [refs.setFloating, matchWidth, floatingStyles],\n  )\n\n  return {\n    ...rest,\n    refs,\n    getPopperProps,\n    getReferenceProps,\n  }\n}\n\nexport type UsePopperReturn = ReturnType<typeof usePopper>\n\nexport const popperProps: (keyof UsePopperProps)[] = [\n  \"autoUpdate\",\n  \"elements\",\n  \"flip\",\n  \"gutter\",\n  \"matchWidth\",\n  \"middleware\",\n  \"offset\",\n  \"open\",\n  \"placement\",\n  \"platform\",\n  \"preventOverflow\",\n  \"strategy\",\n  \"transform\",\n  \"whileElementsMounted\",\n]\n\nexport const usePopperProps = <\n  Y extends DOMElement | VirtualElement = \"div\",\n  M extends Dict = Dict,\n  D extends keyof UsePopperProps = keyof UsePopperProps,\n>(\n  props: M,\n  omitKeys?: D[],\n) => {\n  return useSplitProps(\n    props,\n    popperProps.filter((key) => !omitKeys?.includes(key as D)),\n  ) as unknown as [\n    keyof UsePopperProps extends D\n      ? UsePopperProps<Y>\n      : Omit<UsePopperProps<Y>, D>,\n    Omit<\n      M,\n      keyof UsePopperProps extends D\n        ? keyof UsePopperProps\n        : Exclude<keyof UsePopperProps, D>\n    >,\n  ]\n}\n"],"mappings":";;;;;;;;AA4BA,MAAMA,gBAEF;CACF,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,gBAAgB;CAChB,oBAAoB;CACpB,sBAAsB;CACtB,KAAK;CACL,cAAc;CACd,WAAW;CACX,aAAa;CACb,OAAO;CACP,gBAAgB;CAChB,aAAa;CACb,eAAe;CAChB;AAiGD,MAAa,aAGX,EACA,YAAY,iBAAiB,MAC7B,UACA,MAAM,WAAW,MACjB,SAAS,GACT,YACA,YAAY,gBACZ,QAAQ,YACR,OAAO,MACP,YAAY,SACZ,UACA,kBAAkB,MAClB,WAAW,YACX,YAAY,MACZ,sBAAsB,6BACD,EAAE,KAAK;CAC5B,MAAM,aAAa,cAAc;EAC/B,MAAMC,eAAwD,EAAE;AAEhE,MAAI,YAAY;GACd,MAAM,CAAC,UAAU,aAAa;AAE9B,gBAAW,KAAK,OAAO;IAAE;IAAW;IAAU,CAAC,CAAC;aACvC,OACT,cAAW,KAAK,OAAO,OAAO,CAAC;AAGjC,MAAI,SAAU,cAAW,KAAK,MAAM,CAAC;AAErC,MAAI,gBAAiB,cAAW,KAAK,OAAO,CAAC;AAE7C,MAAI,eAAgB,cAAW,KAAK,GAAG,eAAe;AAEtD,MAAI,WACF,cAAW,KACT,KAAK,EACH,MAAM,EAAE,sBAAU,SAAS;AACzB,UAAO,OAAOC,WAAS,SAAS,OAAO,EACrC,UAAU,GAAG,MAAM,UAAU,MAAM,KACpC,CAAC;KAEL,CAAC,CACH;AAEH,SAAOC;IACN;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,uBAAuB,cAAc;AACzC,MAAI,yBACF,QAAO;AAET,MAAI,eAAgB,QAAO;IAC1B,CAAC,gBAAgB,yBAAyB,CAAC;CAE9C,MAAM,EAAE,gBAAgB,MAAM,GAAG,SAAS,YAA0B;EAClE;EACA;EACA;EACA,WAAW,cAAc;EACzB;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,oBAAoB,aAEtB,WAEC;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,aAAa;EAC1D,GACH,CAAC,KAAK,aAAa,CACpB;CAED,MAAM,iBAAiB,aACM,WACxB;EACC,GAAG;EACH,KAAK,UAAU,OAAO,KAAiB,KAAK,YAAY;EACxD,OAAO;GACL,GAAG,OAAO;GACV,UAAU,aAAa,SAAY;GACnC,GAAG;GACJ;EACF,GACH;EAAC,KAAK;EAAa;EAAY;EAAe,CAC/C;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACD;;AAKH,MAAaC,cAAwC;CACnD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAKX,OACA,aACG;AACH,QAAO,cACL,OACA,YAAY,QAAQ,QAAQ,CAAC,UAAU,SAAS,IAAS,CAAC,CAC3D"}