@yamada-ui/react 2.3.0-dev-20260730075027 → 2.3.0-dev-20260730080927

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/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";

package/dist/esm/components/portal/portal.js

@@ -2,7 +2,8 @@
 import { useSsr } from "../../utils/ssr.js";
 import { utils_exports } from "../../utils/index.js";
 import { useEnvironment } from "../../core/system/environment-provider.js";
-import { Children, useEffect, useState } from "react";
+import { useFocusLockShard } from "../focus-lock/focus-lock.js";
+import { Children, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/portal/portal.tsx
@@ -17,14 +18,29 @@ const getPortalNode = (node) => {
 * @see https://yamada-ui.com/docs/components/portal
 */
 const Portal = ({ children, containerRef: ref, disabled }) => {
+	const shardRef = useRef(null);
 	const [target, setTarget] = useState(ref?.current);
 	const ssr = useSsr();
 	const { getRootNode } = useEnvironment();
+	const registerShard = useFocusLockShard();
 	useEffect(() => {
 		setTarget(() => ref?.current);
 	}, [ref]);
+	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 createPortal(/* @__PURE__ */ jsx("div", {
+		ref: shardRef,
+		children
+	}), container);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: Children.map(children, (child) => createPortal(child, container)) });
 };
 //#endregion

package/dist/esm/components/portal/portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal.js","names":[],"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,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,OAAO;CACjD,MAAM,MAAM,OAAO;CACnB,MAAM,EAAE,gBAAgB,eAAe;CAEvC,gBAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,IAAI,OAAO,UAAU,OAAO;CAE5B,MAAM,YAAY,UAAU,cAAc,YAAY,CAAC;CAEvD,OACE,oBAAA,YAAA,EAAA,UAAG,SAAS,IAAI,WAAW,UAAU,aAAa,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}
+{"version":3,"file":"portal.js","names":[],"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,cAAA,aAAA,CAAiB,QAAQ,GAAG,OAAO;CAEnC,QAAA,GAAA,cAAA,YAAA,CAAmB,IAAI,CAAC,CAAC;AAC3B;;;;;;AAkBA,MAAa,UAA2B,EACtC,UACA,cAAc,KACd,eACI;CACJ,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,OAAO;CACjD,MAAM,MAAM,OAAO;CACnB,MAAM,EAAE,gBAAgB,eAAe;CACvC,MAAM,gBAAgB,kBAAkB;CAExC,gBAAgB;EACd,gBAAgB,KAAK,OAAO;CAC9B,GAAG,CAAC,GAAG,CAAC;CAER,gBAAgB;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,OAAO,aAAa,oBAAC,OAAD;EAAK,KAAK;EAAW;CAAc,CAAA,GAAG,SAAS;CAErE,OACE,oBAAA,YAAA,EAAA,UAAG,SAAS,IAAI,WAAW,UAAU,aAAa,OAAO,SAAS,CAAC,EAAI,CAAA;AAE3E"}