@yamada-ui/react 2.2.6-dev-20260730073118 → 2.2.6

package/dist/cjs/components/drawer/drawer.cjs

@@ -5,11 +5,11 @@ const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
+const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 const require_portal = require("../portal/portal.cjs");
 const require_button = require("../button/button.cjs");
 const require_close_button = require("../close-button/close-button.cjs");
 const require_fade = require("../fade/fade.cjs");
-const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 const require_drawer_style = require("./drawer.style.cjs");
 const require_slide = require("../slide/slide.cjs");
 const require_use_drawer = require("./use-drawer.cjs");

package/dist/cjs/components/focus-lock/focus-lock.cjs

@@ -1,11 +1,16 @@
 "use client";
 const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../../utils/context.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_focus_lock = require("react-focus-lock");
 react_focus_lock = require_runtime.__toESM(react_focus_lock, 1);
 //#region src/components/focus-lock/focus-lock.tsx
+const [FocusLockShardContext, useFocusLockShard] = require_context.createContext({
+	name: "FocusLockShardContext",
+	strict: false
+});
 const InternalFocusLock = (0, require_utils_index.utils_exports.interopDefault)(react_focus_lock.default);
 /**
 * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
@@ -13,7 +18,14 @@ const InternalFocusLock = (0, require_utils_index.utils_exports.interopDefault)(
 * @see https://yamada-ui.com/docs/components/focus-lock
 */
 const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
+	const [shards, setShards] = (0, react.useState)([]);
 	const returnFocus = restoreFocus && !finalFocusRef;
+	const registerShard = (0, react.useCallback)((shard) => {
+		setShards((prev) => prev.includes(shard) ? prev : [...prev, shard]);
+		return () => {
+			setShards((prev) => prev.filter((item) => item !== shard));
+		};
+	}, []);
 	const onActivation = (0, react.useCallback)(() => {
 		if (initialFocusRef?.current) initialFocusRef.current.focus();
 		else if (contentRef?.current) {
@@ -25,18 +37,23 @@ const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, i
 	const onDeactivation = (0, react.useCallback)(() => {
 		finalFocusRef?.current?.focus();
 	}, [finalFocusRef]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFocusLock, {
-		autoFocus,
-		crossFrame: lockFocusAcrossFrames,
-		disabled,
-		persistentFocus,
-		returnFocus,
-		onActivation,
-		onDeactivation,
-		children
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusLockShardContext, {
+		value: registerShard,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFocusLock, {
+			autoFocus,
+			crossFrame: lockFocusAcrossFrames,
+			disabled,
+			persistentFocus,
+			returnFocus,
+			shards,
+			onActivation,
+			onDeactivation,
+			children
+		})
 	});
 };
 //#endregion
 exports.FocusLock = FocusLock;
+exports.useFocusLockShard = useFocusLockShard;
 
 //# sourceMappingURL=focus-lock.cjs.map

package/dist/cjs/components/focus-lock/focus-lock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"focus-lock.cjs","names":["ReactFocusLock"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport { getFocusableElements, interopDefault } from \"../../utils\"\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <InternalFocusLock\n      autoFocus={autoFocus}\n      crossFrame={lockFocusAcrossFrames}\n      disabled={disabled}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n    >\n      {children}\n    </InternalFocusLock>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,qBAAA,GAAA,oBAAA,cAAA,eAAA,CAAmCA,iBAAAA,OAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,oBAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACa;EACX,YAAY;EACF;EACO;EACJ;EACC;EACE;EAEf;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"focus-lock.cjs","names":["createContext","ReactFocusLock"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n  createContext,\n  getFocusableElements,\n  interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n  ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const [shards, setShards] = useState<HTMLElement[]>([])\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const registerShard = useCallback((shard: HTMLElement) => {\n    setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n    return () => {\n      setShards((prev) => prev.filter((item) => item !== shard))\n    }\n  }, [])\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <FocusLockShardContext value={registerShard}>\n      <InternalFocusLock\n        autoFocus={autoFocus}\n        crossFrame={lockFocusAcrossFrames}\n        disabled={disabled}\n        persistentFocus={persistentFocus}\n        returnFocus={returnFocus}\n        shards={shards}\n        onActivation={onActivation}\n        onDeactivation={onDeactivation}\n      >\n        {children}\n      </InternalFocusLock>\n    </FocusLockShardContext>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAAAA,cAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAA,oBAAA,cAAA,eAAA,CAAmCC,iBAAAA,OAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAqC,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,iBAAA,GAAA,MAAA,YAAA,EAA6B,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,oBAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}

package/dist/cjs/components/focus-lock/index.cjs

@@ -1,3 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_focus_lock = require("./focus-lock.cjs");
 exports.FocusLock = require_focus_lock.FocusLock;
+exports.useFocusLockShard = require_focus_lock.useFocusLockShard;

package/dist/cjs/components/modal/modal.cjs

@@ -6,13 +6,13 @@ const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
+const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 const require_portal = require("../portal/portal.cjs");
 const require_popover = require("../popover/popover.cjs");
 const require_button = require("../button/button.cjs");
 const require_close_button = require("../close-button/close-button.cjs");
 const require_modal_style = require("./modal.style.cjs");
 const require_fade = require("../fade/fade.cjs");
-const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 const require_use_modal = require("./use-modal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/cjs/components/popover/popover.cjs

@@ -1,5 +1,7 @@
 "use client";
+const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
+const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
@@ -97,15 +99,21 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 */
 const PopoverRoot = (props) => {
 	const styleProps = usePopoverStyleProps(props);
-	const [styleContext, { animationScheme, children, duration, ...rest }] = useRootComponentProps({
+	const [styleContext, { anchor: anchorProp, animationScheme, body, children, duration, footer, header, trigger: triggerProp, anchorProps, bodyProps, closeTriggerProps, contentProps, footerProps, headerProps, triggerProps, ...rest }] = useRootComponentProps({
 		...props,
 		...styleProps
 	});
+	const [omittedChildren, trigger, anchor, customContent] = require_children.useSplitChildren((0, require_utils_index.utils_exports.isFunction)(children) ? void 0 : children, PopoverTrigger, PopoverAnchor, PopoverContent);
 	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = require_use_popover.usePopover(rest);
 	const componentContext = (0, react.useMemo)(() => ({
 		animationScheme,
 		duration,
 		open,
+		anchorProps,
+		bodyProps,
+		closeTriggerProps,
+		contentProps,
+		footerProps,
 		getAnchorProps,
 		getBodyProps,
 		getCloseTriggerProps,
@@ -113,11 +121,19 @@ const PopoverRoot = (props) => {
 		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
-		getTriggerProps
+		getTriggerProps,
+		headerProps,
+		triggerProps
 	}), [
 		open,
 		animationScheme,
+		anchorProps,
+		bodyProps,
+		closeTriggerProps,
+		contentProps,
 		duration,
+		footerProps,
+		headerProps,
 		getAnchorProps,
 		getBodyProps,
 		getCloseTriggerProps,
@@ -125,66 +141,89 @@ const PopoverRoot = (props) => {
 		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
-		getTriggerProps
+		getTriggerProps,
+		triggerProps
 	]);
+	const customAnchor = anchorProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverAnchor, { children: anchorProp }) : null;
+	const customTrigger = triggerProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, { children: triggerProp }) : null;
+	const customContentProp = header !== void 0 || body !== void 0 || footer !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShorthandPopoverContent, {
+		body,
+		footer,
+		header
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
 			value: componentContext,
-			children: (0, require_utils_index.utils_exports.runIfFn)(children, {
+			children: (0, require_utils_index.utils_exports.isFunction)(children) ? (0, require_utils_index.utils_exports.runIfFn)(children, {
 				open,
 				onClose
-			})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				anchor ?? customAnchor,
+				trigger ?? customTrigger,
+				omittedChildren,
+				customContent ?? customContentProp
+			] })
 		})
 	});
 };
 const PopoverTrigger = withContext("button", "trigger")({ asChild: true }, (props) => {
-	const { getTriggerProps } = useComponentContext();
-	return getTriggerProps(props);
+	const { getTriggerProps, triggerProps } = useComponentContext();
+	return getTriggerProps(require_props.mergeProps(triggerProps, props)());
 });
 const PopoverCloseTrigger = withContext("button", {
 	name: "CloseTrigger",
 	slot: ["trigger", "close"]
 })({ asChild: true }, (props) => {
-	const { getCloseTriggerProps } = useComponentContext();
-	return getCloseTriggerProps(props);
+	const { closeTriggerProps, getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(require_props.mergeProps(closeTriggerProps, props)());
 });
 const PopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
-	const { getAnchorProps } = useComponentContext();
-	return getAnchorProps(props);
+	const { anchorProps, getAnchorProps } = useComponentContext();
+	return getAnchorProps(require_props.mergeProps(anchorProps, props)());
 });
 const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
 	const { getPositionerProps } = useComponentContext();
 	return getPositionerProps(props);
 });
-const PopoverContent = withContext(({ portalProps, positionerProps, ...rest }) => {
-	const { animationScheme, duration, open, getContentProps } = useComponentContext();
+const PopoverContent = withContext(({ portalProps: portalPropsProp, positionerProps: positionerPropsProp, ...rest }) => {
+	const { animationScheme, duration, open, contentProps: { portalProps, positionerProps, ...contentProps } = {}, getContentProps } = useComponentContext();
 	const popupAnimationProps = usePopupAnimationProps({
 		animationScheme,
 		duration
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
-		...portalProps,
+		...require_props.mergeProps(portalProps, portalPropsProp)(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPositioner, {
-			...positionerProps,
+			...require_props.mergeProps(positionerProps, positionerPropsProp)(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
 				...popupAnimationProps,
-				...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(rest)))
+				...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(require_props.mergeProps(contentProps, rest)())))
 			})
 		})
 	}) : null });
 }, "content")();
+const ShorthandPopoverContent = ({ body, footer, header }) => {
+	const customHeader = require_children.wrapOrPassProps(PopoverHeader, header);
+	const customBody = require_children.wrapOrPassProps(PopoverBody, body);
+	const customFooter = require_children.wrapOrPassProps(PopoverFooter, footer);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverContent, { children: [
+		customHeader,
+		customBody,
+		customFooter
+	] });
+};
 const PopoverHeader = withContext("div", "header")(void 0, (props) => {
-	const { getHeaderProps } = useComponentContext();
-	return getHeaderProps(props);
+	const { getHeaderProps, headerProps } = useComponentContext();
+	return getHeaderProps(require_props.mergeProps(headerProps, props)());
 });
 const PopoverBody = withContext("div", "body")(void 0, (props) => {
-	const { getBodyProps } = useComponentContext();
-	return getBodyProps(props);
+	const { bodyProps, getBodyProps } = useComponentContext();
+	return getBodyProps(require_props.mergeProps(bodyProps, props)());
 });
 const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
-	const { getFooterProps } = useComponentContext();
-	return getFooterProps(props);
+	const { footerProps, getFooterProps } = useComponentContext();
+	return getFooterProps(require_props.mergeProps(footerProps, props)());
 });
 //#endregion
 exports.PopoverAnchor = PopoverAnchor;

package/dist/cjs/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\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?: StyleValue<UsePopoverProps[\"flip\"]>\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?: StyleValue<UsePopoverProps[\"gutter\"]>\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?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for positioner component.\n   */\n  positionerProps?: Omit<PopoverPositionerProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, positionerProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner {...positionerProps}>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","useSplitChildren","usePopover","mergeProps","AnimatePresence","Portal","motion","wrapOrPassProps"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n  cast,\n  filterUndefined,\n  isFunction,\n  runIfFn,\n  useSplitChildren,\n  wrapOrPassProps,\n} from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\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?: StyleValue<UsePopoverProps[\"flip\"]>\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?: StyleValue<UsePopoverProps[\"gutter\"]>\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?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps,\n    Pick<\n      PopoverRootProps,\n      | \"anchorProps\"\n      | \"bodyProps\"\n      | \"closeTriggerProps\"\n      | \"contentProps\"\n      | \"footerProps\"\n      | \"headerProps\"\n      | \"triggerProps\"\n    > {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle>,\n    ShorthandPopoverContentProps {\n  /**\n   * The popover anchor to use.\n   */\n  anchor?: ReactNode\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n  /**\n   * The popover trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * Props for anchor element.\n   */\n  anchorProps?: Omit<PopoverAnchorProps, \"asChild\" | \"children\">\n  /**\n   * Props for body element.\n   */\n  bodyProps?: Omit<PopoverBodyProps, \"children\">\n  /**\n   * Props for close trigger element.\n   */\n  closeTriggerProps?: Omit<PopoverCloseTriggerProps, \"asChild\" | \"children\">\n  /**\n   * Props for content element.\n   */\n  contentProps?: Omit<PopoverContentProps, \"children\">\n  /**\n   * Props for footer element.\n   */\n  footerProps?: Omit<PopoverFooterProps, \"children\">\n  /**\n   * Props for header element.\n   */\n  headerProps?: Omit<PopoverHeaderProps, \"children\">\n  /**\n   * Props for trigger element.\n   */\n  triggerProps?: Omit<PopoverTriggerProps, \"asChild\" | \"children\">\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [\n    styleContext,\n    {\n      anchor: anchorProp,\n      animationScheme,\n      body,\n      children,\n      duration,\n      footer,\n      header,\n      trigger: triggerProp,\n      anchorProps,\n      bodyProps,\n      closeTriggerProps,\n      contentProps,\n      footerProps,\n      headerProps,\n      triggerProps,\n      ...rest\n    },\n  ] = useRootComponentProps({ ...props, ...styleProps })\n  const [omittedChildren, trigger, anchor, customContent] = useSplitChildren(\n    isFunction(children) ? undefined : children,\n    PopoverTrigger,\n    PopoverAnchor,\n    PopoverContent,\n  )\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      anchorProps,\n      bodyProps,\n      closeTriggerProps,\n      contentProps,\n      footerProps,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n      headerProps,\n      triggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      anchorProps,\n      bodyProps,\n      closeTriggerProps,\n      contentProps,\n      duration,\n      footerProps,\n      headerProps,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n      triggerProps,\n    ],\n  )\n  const customAnchor = anchorProp ? (\n    <PopoverAnchor>{anchorProp}</PopoverAnchor>\n  ) : null\n  const customTrigger = triggerProp ? (\n    <PopoverTrigger>{triggerProp}</PopoverTrigger>\n  ) : null\n  const customContentProp =\n    header !== undefined || body !== undefined || footer !== undefined ? (\n      <ShorthandPopoverContent body={body} footer={footer} header={header} />\n    ) : null\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {isFunction(children) ? (\n          runIfFn(children, { open, onClose })\n        ) : (\n          <>\n            {anchor ?? customAnchor}\n            {trigger ?? customTrigger}\n            {omittedChildren}\n            {customContent ?? customContentProp}\n          </>\n        )}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps, triggerProps } = useComponentContext()\n\n  return getTriggerProps(mergeProps(triggerProps, props)())\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(mergeProps(closeTriggerProps, props)())\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { anchorProps, getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(mergeProps(anchorProps, props)())\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for positioner component.\n   */\n  positionerProps?: Omit<PopoverPositionerProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({\n    portalProps: portalPropsProp,\n    positionerProps: positionerPropsProp,\n    ...rest\n  }) => {\n    const {\n      animationScheme,\n      duration,\n      open,\n      contentProps: { portalProps, positionerProps, ...contentProps } = {},\n      getContentProps,\n    } = useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...mergeProps(portalProps, portalPropsProp)()}>\n            <PopoverPositioner\n              {...mergeProps(positionerProps, positionerPropsProp)()}\n            >\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(\n                    cast<HTMLProps>(mergeProps(contentProps, rest)()),\n                  ),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandPopoverContentProps {\n  /**\n   * The popover body to use.\n   */\n  body?: PopoverBodyProps | ReactNode\n  /**\n   * The popover footer to use.\n   */\n  footer?: PopoverFooterProps | ReactNode\n  /**\n   * The popover header to use.\n   */\n  header?: PopoverHeaderProps | ReactNode\n}\n\nconst ShorthandPopoverContent: FC<ShorthandPopoverContentProps> = ({\n  body,\n  footer,\n  header,\n}) => {\n  const customHeader = wrapOrPassProps(PopoverHeader, header)\n  const customBody = wrapOrPassProps(PopoverBody, body)\n  const customFooter = wrapOrPassProps(PopoverFooter, footer)\n\n  return (\n    <PopoverContent>\n      {customHeader}\n      {customBody}\n      {customFooter}\n    </PopoverContent>\n  )\n}\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps, headerProps } = useComponentContext()\n\n  return getHeaderProps(mergeProps(headerProps, props)())\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { bodyProps, getBodyProps } = useComponentContext()\n\n    return getBodyProps(mergeProps(bodyProps, props)())\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { footerProps, getFooterProps } = useComponentContext()\n\n  return getFooterProps(mergeProps(footerProps, props)())\n})\n"],"mappings":"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"}

package/dist/cjs/components/portal/portal.cjs

@@ -2,6 +2,7 @@
 const require_ssr = require("../../utils/ssr.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_environment_provider = require("../../core/system/environment-provider.cjs");
+const require_focus_lock = require("../focus-lock/focus-lock.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_dom = require("react-dom");
@@ -17,14 +18,29 @@ const getPortalNode = (node) => {
 * @see https://yamada-ui.com/docs/components/portal
 */
 const Portal = ({ children, containerRef: ref, disabled }) => {
+	const shardRef = (0, react.useRef)(null);
 	const [target, setTarget] = (0, react.useState)(ref?.current);
 	const ssr = require_ssr.useSsr();
 	const { getRootNode } = require_environment_provider.useEnvironment();
+	const registerShard = require_focus_lock.useFocusLockShard();
 	(0, react.useEffect)(() => {
 		setTarget(() => ref?.current);
 	}, [ref]);
+	(0, react.useEffect)(() => {
+		const shard = shardRef.current;
+		if (disabled || ssr || !shard) return;
+		return registerShard?.(shard);
+	}, [
+		disabled,
+		registerShard,
+		ssr
+	]);
 	if (ssr || disabled) return children;
 	const container = target ?? getPortalNode(getRootNode());
+	if (registerShard) return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: shardRef,
+		children
+	}), container);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: react.Children.map(children, (child) => (0, react_dom.createPortal)(child, container)) });
 };
 //#endregion

package/dist/cjs/components/portal/portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"portal.cjs","names":["useSsr","useEnvironment","Children"],"sources":["../../../../src/components/portal/portal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport type { RootNode } from \"../../core\"\nimport { Children, useEffect, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { useEnvironment } from \"../../core\"\nimport { getDocument, isShadowRoot, useSsr } from \"../../utils\"\n\nconst getPortalNode = (node?: RootNode) => {\n  const rootNode = node?.getRootNode()\n\n  if (isShadowRoot(rootNode)) return rootNode\n\n  return getDocument(node).body\n}\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * The `ref` to the component where the portal will be attached to.\n   */\n  containerRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the forwarding will be disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * `Portal` is a component that renders elements outside of the current `DOM` hierarchy.\n *\n * @see https://yamada-ui.com/docs/components/portal\n */\nexport const Portal: FC<PortalProps> = ({\n  children,\n  containerRef: ref,\n  disabled,\n}) => {\n  const [target, setTarget] = useState(ref?.current)\n  const ssr = useSsr()\n  const { getRootNode } = useEnvironment()\n\n  useEffect(() => {\n    setTarget(() => ref?.current)\n  }, [ref])\n\n  if (ssr || disabled) return children\n\n  const container = target ?? getPortalNode(getRootNode())\n\n  return (\n    <>{Children.map(children, (child) => createPortal(child, container))}</>\n  )\n}\n"],"mappings":";;;;;;;;AASA,MAAM,iBAAiB,SAAoB;CACzC,MAAM,WAAW,MAAM,YAAY;CAEnC,KAAA,GAAA,oBAAA,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,oBAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,KAAK,OAAO;CACjD,MAAM,MAAMA,YAAAA,OAAO;CACnB,MAAM,EAAE,gBAAgBC,6BAAAA,eAAe;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,IAAI,OAAO,UAAU,OAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,YAAY,CAAC;CAEvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAGC,MAAAA,SAAS,IAAI,WAAW,WAAA,GAAA,UAAA,aAAA,CAAuB,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}
+{"version":3,"file":"portal.cjs","names":["useSsr","useEnvironment","useFocusLockShard","Children"],"sources":["../../../../src/components/portal/portal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport type { RootNode } from \"../../core\"\nimport { Children, useEffect, useRef, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { useEnvironment } from \"../../core\"\nimport { getDocument, isShadowRoot, useSsr } from \"../../utils\"\nimport { useFocusLockShard } from \"../focus-lock\"\n\nconst getPortalNode = (node?: RootNode) => {\n  const rootNode = node?.getRootNode()\n\n  if (isShadowRoot(rootNode)) return rootNode\n\n  return getDocument(node).body\n}\n\nexport interface PortalProps extends PropsWithChildren {\n  /**\n   * The `ref` to the component where the portal will be attached to.\n   */\n  containerRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the forwarding will be disabled.\n   */\n  disabled?: boolean\n}\n\n/**\n * `Portal` is a component that renders elements outside of the current `DOM` hierarchy.\n *\n * @see https://yamada-ui.com/docs/components/portal\n */\nexport const Portal: FC<PortalProps> = ({\n  children,\n  containerRef: ref,\n  disabled,\n}) => {\n  const shardRef = useRef<HTMLDivElement>(null)\n  const [target, setTarget] = useState(ref?.current)\n  const ssr = useSsr()\n  const { getRootNode } = useEnvironment()\n  const registerShard = useFocusLockShard()\n\n  useEffect(() => {\n    setTarget(() => ref?.current)\n  }, [ref])\n\n  useEffect(() => {\n    const shard = shardRef.current\n\n    if (disabled || ssr || !shard) return\n\n    return registerShard?.(shard)\n  }, [disabled, registerShard, ssr])\n\n  if (ssr || disabled) return children\n\n  const container = target ?? getPortalNode(getRootNode())\n\n  if (registerShard)\n    return createPortal(<div ref={shardRef}>{children}</div>, container)\n\n  return (\n    <>{Children.map(children, (child) => createPortal(child, container))}</>\n  )\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,iBAAiB,SAAoB;CACzC,MAAM,WAAW,MAAM,YAAY;CAEnC,KAAA,GAAA,oBAAA,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,oBAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkC,IAAI;CAC5C,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAsB,KAAK,OAAO;CACjD,MAAM,MAAMA,YAAAA,OAAO;CACnB,MAAM,EAAE,gBAAgBC,6BAAAA,eAAe;CACvC,MAAM,gBAAgBC,mBAAAA,kBAAkB;CAExC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,QAAQ,SAAS;EAEvB,IAAI,YAAY,OAAO,CAAC,OAAO;EAE/B,OAAO,gBAAgB,KAAK;CAC9B,GAAG;EAAC;EAAU;EAAe;CAAG,CAAC;CAEjC,IAAI,OAAO,UAAU,OAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,YAAY,CAAC;CAEvD,IAAI,eACF,QAAA,GAAA,UAAA,aAAA,CAAoB,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAK;EAAW;CAAc,CAAA,GAAG,SAAS;CAErE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UAAGC,MAAAA,SAAS,IAAI,WAAW,WAAA,GAAA,UAAA,aAAA,CAAuB,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}

package/dist/cjs/index.cjs

@@ -1826,6 +1826,7 @@ const require_namespace$2 = require("./components/native-popover/namespace.cjs")
 const require_popover_style = require("./components/popover/popover.style.cjs");
 const require_fade_scale_style = require("./components/fade-scale/fade-scale.style.cjs");
 const require_fade_scale = require("./components/fade-scale/fade-scale.cjs");
+const require_focus_lock = require("./components/focus-lock/focus-lock.cjs");
 const require_portal = require("./components/portal/portal.cjs");
 const require_slide_fade_style = require("./components/slide-fade/slide-fade.style.cjs");
 const require_slide_fade = require("./components/slide-fade/slide-fade.cjs");
@@ -2043,7 +2044,6 @@ const require_namespace$31 = require("./components/data-list/namespace.cjs");
 const require_modal_style = require("./components/modal/modal.style.cjs");
 const require_fade_style = require("./components/fade/fade.style.cjs");
 const require_fade = require("./components/fade/fade.cjs");
-const require_focus_lock = require("./components/focus-lock/focus-lock.cjs");
 const require_use_modal = require("./components/modal/use-modal.cjs");
 const require_modal = require("./components/modal/modal.cjs");
 const require_namespace$32 = require("./components/modal/namespace.cjs");
@@ -5086,6 +5086,7 @@ var src_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	useFlexPropsContext: () => require_flex.useFlexPropsContext,
 	useFlipPropsContext: () => require_flip.useFlipPropsContext,
 	useFloatPropsContext: () => require_float.useFloatPropsContext,
+	useFocusLockShard: () => require_focus_lock.useFocusLockShard,
 	useFocusOnPointerDown: () => require_hooks_use_focus_index.useFocusOnPointerDown,
 	useFocusOnShow: () => require_hooks_use_focus_index.useFocusOnShow,
 	useFormContext: () => require_form.useFormContext,
@@ -8502,6 +8503,7 @@ exports.useFindChildren = require_children.useFindChildren;
 exports.useFlexPropsContext = require_flex.useFlexPropsContext;
 exports.useFlipPropsContext = require_flip.useFlipPropsContext;
 exports.useFloatPropsContext = require_float.useFloatPropsContext;
+exports.useFocusLockShard = require_focus_lock.useFocusLockShard;
 exports.useFocusOnPointerDown = require_hooks_use_focus_index.useFocusOnPointerDown;
 exports.useFocusOnShow = require_hooks_use_focus_index.useFocusOnShow;
 exports.useFormContext = require_form.useFormContext;

package/dist/esm/components/drawer/drawer.js

@@ -5,11 +5,11 @@ import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import { useValue } from "../../hooks/use-value/index.js";
+import { FocusLock } from "../focus-lock/focus-lock.js";
 import { Portal } from "../portal/portal.js";
 import { Button } from "../button/button.js";
 import { CloseButton } from "../close-button/close-button.js";
 import { fadeVariants } from "../fade/fade.js";
-import { FocusLock } from "../focus-lock/focus-lock.js";
 import { drawerStyle } from "./drawer.style.js";
 import { Slide } from "../slide/slide.js";
 import { useDrawer } from "./use-drawer.js";

package/dist/esm/components/focus-lock/focus-lock.js

@@ -1,9 +1,14 @@
 "use client";
+import { createContext as createContext$1 } from "../../utils/context.js";
 import { utils_exports } from "../../utils/index.js";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import ReactFocusLock from "react-focus-lock";
 //#region src/components/focus-lock/focus-lock.tsx
+const [FocusLockShardContext, useFocusLockShard] = createContext$1({
+	name: "FocusLockShardContext",
+	strict: false
+});
 const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
 /**
 * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
@@ -11,7 +16,14 @@ const InternalFocusLock = (0, utils_exports.interopDefault)(ReactFocusLock);
 * @see https://yamada-ui.com/docs/components/focus-lock
 */
 const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
+	const [shards, setShards] = useState([]);
 	const returnFocus = restoreFocus && !finalFocusRef;
+	const registerShard = useCallback((shard) => {
+		setShards((prev) => prev.includes(shard) ? prev : [...prev, shard]);
+		return () => {
+			setShards((prev) => prev.filter((item) => item !== shard));
+		};
+	}, []);
 	const onActivation = useCallback(() => {
 		if (initialFocusRef?.current) initialFocusRef.current.focus();
 		else if (contentRef?.current) {
@@ -23,18 +35,22 @@ const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, i
 	const onDeactivation = useCallback(() => {
 		finalFocusRef?.current?.focus();
 	}, [finalFocusRef]);
-	return /* @__PURE__ */ jsx(InternalFocusLock, {
-		autoFocus,
-		crossFrame: lockFocusAcrossFrames,
-		disabled,
-		persistentFocus,
-		returnFocus,
-		onActivation,
-		onDeactivation,
-		children
+	return /* @__PURE__ */ jsx(FocusLockShardContext, {
+		value: registerShard,
+		children: /* @__PURE__ */ jsx(InternalFocusLock, {
+			autoFocus,
+			crossFrame: lockFocusAcrossFrames,
+			disabled,
+			persistentFocus,
+			returnFocus,
+			shards,
+			onActivation,
+			onDeactivation,
+			children
+		})
 	});
 };
 //#endregion
-export { FocusLock };
+export { FocusLock, useFocusLockShard };
 
 //# sourceMappingURL=focus-lock.js.map

package/dist/esm/components/focus-lock/focus-lock.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-lock.js","names":[],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport { getFocusableElements, interopDefault } from \"../../utils\"\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <InternalFocusLock\n      autoFocus={autoFocus}\n      crossFrame={lockFocusAcrossFrames}\n      disabled={disabled}\n      persistentFocus={persistentFocus}\n      returnFocus={returnFocus}\n      onActivation={onActivation}\n      onDeactivation={onDeactivation}\n    >\n      {children}\n    </InternalFocusLock>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,mBAAD;EACa;EACX,YAAY;EACF;EACO;EACJ;EACC;EACE;EAEf;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"focus-lock.js","names":["createContext"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n  createContext,\n  getFocusableElements,\n  interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n  ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n  /**\n   * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * The `ref` of the wrapper for which the focus-lock wraps.\n   */\n  contentRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, focus trapping will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * `ref` of the element to return focus to when `FocusLock` unmounts.\n   */\n  finalFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * `ref` of the element to receive focus initially.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * Enables aggressive focus capturing within iframes.\n   * - If `true`: keep focus in the lock, no matter where lock is active.\n   * - If `false`:  allows focus to move outside of iframe.\n   *\n   * @default false\n   */\n  lockFocusAcrossFrames?: boolean\n  /**\n   * If `true`, disables text selections inside, and outside focus lock.\n   *\n   * @default false\n   */\n  persistentFocus?: boolean\n  /**\n   * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n   *\n   * @default false\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n  autoFocus,\n  children,\n  contentRef,\n  disabled,\n  finalFocusRef,\n  initialFocusRef,\n  lockFocusAcrossFrames,\n  persistentFocus,\n  restoreFocus,\n}) => {\n  const [shards, setShards] = useState<HTMLElement[]>([])\n  const returnFocus = restoreFocus && !finalFocusRef\n\n  const registerShard = useCallback((shard: HTMLElement) => {\n    setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n    return () => {\n      setShards((prev) => prev.filter((item) => item !== shard))\n    }\n  }, [])\n\n  const onActivation = useCallback(() => {\n    if (initialFocusRef?.current) {\n      initialFocusRef.current.focus()\n    } else if (contentRef?.current) {\n      const focusables = getFocusableElements(contentRef.current)\n\n      if (focusables.length === 0)\n        requestAnimationFrame(() => {\n          contentRef.current?.focus()\n        })\n    }\n  }, [initialFocusRef, contentRef])\n\n  const onDeactivation = useCallback(() => {\n    finalFocusRef?.current?.focus()\n  }, [finalFocusRef])\n\n  return (\n    <FocusLockShardContext value={registerShard}>\n      <InternalFocusLock\n        autoFocus={autoFocus}\n        crossFrame={lockFocusAcrossFrames}\n        disabled={disabled}\n        persistentFocus={persistentFocus}\n        returnFocus={returnFocus}\n        shards={shards}\n        onActivation={onActivation}\n        onDeactivation={onDeactivation}\n      >\n        {children}\n      </InternalFocusLock>\n    </FocusLockShardContext>\n  )\n}\n"],"mappings":";;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAA,cAAA,eAAA,CAAmC,cAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAwB,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,gBAAgB,aAAa,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,iBAAiB,kBAAkB;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,oBAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,oBAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}

package/dist/esm/components/focus-lock/index.js

@@ -1,2 +1,2 @@
-import { FocusLock } from "./focus-lock.js";
-export { FocusLock };
+import { FocusLock, useFocusLockShard } from "./focus-lock.js";
+export { FocusLock, useFocusLockShard };

package/dist/esm/components/modal/modal.js

@@ -6,13 +6,13 @@ import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import { useValue } from "../../hooks/use-value/index.js";
+import { FocusLock } from "../focus-lock/focus-lock.js";
 import { Portal } from "../portal/portal.js";
 import { usePopupAnimationProps } from "../popover/popover.js";
 import { Button } from "../button/button.js";
 import { CloseButton } from "../close-button/close-button.js";
 import { modalStyle } from "./modal.style.js";
 import { fadeVariants } from "../fade/fade.js";
-import { FocusLock } from "../focus-lock/focus-lock.js";
 import { useModal } from "./use-modal.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";