@ariakit/react-components 0.1.0

package/dist/popover-dismiss-DPeI6Zse.d.ts

@@ -0,0 +1,50 @@
+import { t as PopoverStore } from "./popover-store-Bc-l5VVO.js";
+import { n as DialogDismissOptions } from "./dialog-dismiss-CnwEbzc6.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-dismiss.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverDismiss` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverDismiss({ store });
+ * <Popover store={store}>
+ *   <Role {...props} />
+ * </Popover>
+ * ```
+ */
+declare const usePopoverDismiss: import("@ariakit/react-utils").Hook<"button", PopoverDismissOptions<"button">>;
+/**
+ * Renders a button that hides a
+ * [`Popover`](https://ariakit.com/reference/popover) component when clicked.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverDismiss />
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverDismiss: (props: PopoverDismissProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverDismissOptions<T extends ElementType = TagName> extends DialogDismissOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+}
+type PopoverDismissProps<T extends ElementType = TagName> = Props<T, PopoverDismissOptions<T>>;
+//#endregion
+export { usePopoverDismiss as i, PopoverDismissOptions as n, PopoverDismissProps as r, PopoverDismiss as t };
+//# sourceMappingURL=popover-dismiss-DPeI6Zse.d.ts.map

package/dist/popover-dismiss-DPeI6Zse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-dismiss-DPeI6Zse.d.ts","names":["Props","ElementType","DialogDismissOptions","PopoverStore","TagName","usePopoverDismiss","PopoverDismissOptions","Hook","PopoverDismiss","PopoverDismissProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../src/popover/popover-dismiss.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAa7B;;AAfuD,cAelCC,iBAAAA,iCAAkDE,IAAAA,WAAeD,qBAAqB;;AAAA;AAc3G;;;;;;;;;AAAqJ;AACrJ;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAApDZ;;;;;;;;EAS7Ca,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/popover-heading-DGsr6D5W.d.ts

@@ -0,0 +1,51 @@
+import { t as PopoverStore } from "./popover-store-Bc-l5VVO.js";
+import { n as DialogHeadingOptions } from "./dialog-heading-DQvnOfZH.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-heading.d.ts
+declare const TagName = "h1";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverHeading` component. This hook must be used
+ * in a component that's wrapped with `Popover` so the `aria-labelledby` prop is
+ * properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Popover
+ * const props = usePopoverHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+declare const usePopoverHeading: import("@ariakit/react-utils").Hook<"h1", PopoverHeadingOptions<"h1">>;
+/**
+ * Renders a heading in a popover. This component must be wrapped with
+ * [`Popover`](https://ariakit.com/reference/popover) so the `aria-labelledby`
+ * prop is properly set on the popover element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {3}
+ * <PopoverProvider>
+ *   <Popover>
+ *     <PopoverHeading>Heading</PopoverHeading>
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverHeading: (props: PopoverHeadingProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverHeadingOptions<T extends ElementType = TagName> extends DialogHeadingOptions<T> {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+}
+type PopoverHeadingProps<T extends ElementType = TagName> = Props<T, PopoverHeadingOptions<T>>;
+//#endregion
+export { usePopoverHeading as i, PopoverHeadingOptions as n, PopoverHeadingProps as r, PopoverHeading as t };
+//# sourceMappingURL=popover-heading-DGsr6D5W.d.ts.map

package/dist/popover-heading-DGsr6D5W.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-heading-DGsr6D5W.d.ts","names":["Props","ElementType","DialogHeadingOptions","PopoverStore","TagName","usePopoverHeading","PopoverHeadingOptions","Hook","PopoverHeading","PopoverHeadingProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../src/popover/popover-heading.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAa7B;;AAfuD,cAelCC,iBAAAA,iCAAkDE,IAAAA,OAAWD,qBAAqB;;AAAA;AAevG;;;;;;;;;AAAqJ;AACrJ;;cADqBE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,WAAgCL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAAtCT;;;;;;;;EAS3DU,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,mBAAAA,WAA8BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,qBAAAA,CAAsBO,CAAAA"}

package/dist/popover-store-Bc-l5VVO.d.ts

@@ -0,0 +1,29 @@
+import { t as DisclosureStore } from "./disclosure-store-BsaBaRKv.js";
+import { a as DialogStoreState, n as DialogStoreFunctions, r as DialogStoreOptions } from "./dialog-store-Cjt12T_Y.js";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/popover/popover-store";
+
+//#region src/popover/popover-store.d.ts
+declare function usePopoverStoreProps<T extends Core.PopoverStore>(store: T, update: () => void, props: PopoverStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+};
+/**
+ * Creates a popover store to control the state of
+ * [Popover](https://ariakit.com/components/popover) components.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const popover = usePopoverStore();
+ * <PopoverDisclosure store={popover}>Disclosure</PopoverDisclosure>
+ * <Popover store={popover}>Popover</Popover>
+ * ```
+ */
+declare function usePopoverStore(props?: PopoverStoreProps): PopoverStore;
+interface PopoverStoreState extends Core.PopoverStoreState, DialogStoreState {}
+interface PopoverStoreFunctions extends Omit<Core.PopoverStoreFunctions, "disclosure">, DialogStoreFunctions {}
+interface PopoverStoreOptions extends Omit<Core.PopoverStoreOptions, "disclosure">, DialogStoreOptions {}
+interface PopoverStoreProps extends PopoverStoreOptions, Omit<Core.PopoverStoreProps, "disclosure"> {}
+interface PopoverStore extends PopoverStoreFunctions, Omit<Store<Core.PopoverStore>, "disclosure"> {}
+//#endregion
+export { PopoverStoreState as a, PopoverStoreProps as i, PopoverStoreFunctions as n, usePopoverStore as o, PopoverStoreOptions as r, usePopoverStoreProps as s, PopoverStore as t };
+//# sourceMappingURL=popover-store-Bc-l5VVO.d.ts.map

package/dist/popover-store-Bc-l5VVO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-store-Bc-l5VVO.d.ts","names":["Core","Store","DialogStoreFunctions","DialogStoreOptions","DialogStoreState","usePopoverStoreProps","T","PopoverStore","PopoverStoreProps","_$___disclosure_disclosure_store_ts0","DisclosureStore","store","update","props","disclosure","usePopoverStore","PopoverStoreState","PopoverStoreFunctions","Omit","PopoverStoreOptions"],"sources":["../src/popover/popover-store.d.ts"],"mappings":";;;;;;iBAGwBK,oBAAAA,WAA+BL,IAAAA,CAAKO,YAAAA,CAAAA,CAAcI,KAAAA,EAAOL,CAAAA,EAAGM,MAAAA,cAAoBC,KAAAA,EAAOL,iBAAAA,GAAoBF,CAAAA;EAC/HQ,UAAAA,EADgIL,eAAAA;AAAAA;AAApI;;;;;;;;;;;AAAA,iBAcwBM,eAAAA,CAAgBF,KAAAA,GAAQL,iBAAAA,GAAoBD,YAAY;AAAA,UAC/DS,iBAAAA,SAA0BhB,IAAAA,CAAKgB,iBAAAA,EAAmBZ,gBAAgB;AAAA,UAElEa,qBAAAA,SAA8BC,IAAAA,CAAKlB,IAAAA,CAAKiB,qBAAAA,iBAAsCf,oBAAAA;AAAAA,UAE9EiB,mBAAAA,SAA4BD,IAAAA,CAAKlB,IAAAA,CAAKmB,mBAAAA,iBAAoChB,kBAAAA;AAAAA,UAE1EK,iBAAAA,SAA0BW,mBAAAA,EAAqBD,IAAAA,CAAKlB,IAAAA,CAAKQ,iBAAAA;AAAAA,UAEzDD,YAAAA,SAAqBU,qBAAAA,EAAuBC,IAAAA,CAAKjB,KAAAA,CAAMD,IAAAA,CAAKO,YAAAA"}

package/dist/portal/portal-context.d.ts

@@ -0,0 +1,21 @@
+//#region src/portal/portal-context.d.ts
+/**
+ * Stores the element that will contain the portal. By default, it will be the
+ * body of the document.
+ * @example
+ * ```jsx
+ * const container = document.getElementById("container");
+ *
+ * function App() {
+ *   return (
+ *     <PortalContext.Provider value={container}>
+ *       <Portal />
+ *     </PortalContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+declare const PortalContext: import("react").Context<HTMLElement | null>;
+//#endregion
+export { PortalContext };
+//# sourceMappingURL=portal-context.d.ts.map

package/dist/portal/portal-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-context.d.ts","names":["PortalContext","HTMLElement","Context"],"sources":["../../src/portal/portal-context.d.ts"],"mappings":";;AAgBA;;;;AAAuE;;;;;;;;;;;cAAlDA,aAAAA,kBAA+BE,OAAAA,CAAQD,WAAW"}

package/dist/portal/portal-context.js

@@ -0,0 +1,24 @@
+"use client";
+import { createContext } from "react";
+//#region src/portal/portal-context.tsx
+/**
+* Stores the element that will contain the portal. By default, it will be the
+* body of the document.
+* @example
+* ```jsx
+* const container = document.getElementById("container");
+*
+* function App() {
+*   return (
+*     <PortalContext.Provider value={container}>
+*       <Portal />
+*     </PortalContext.Provider>
+*   );
+* }
+* ```
+*/
+const PortalContext = createContext(null);
+//#endregion
+export { PortalContext };
+
+//# sourceMappingURL=portal-context.js.map

package/dist/portal/portal-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-context.js","names":[],"sources":["../../src/portal/portal-context.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\n/**\n * Stores the element that will contain the portal. By default, it will be the\n * body of the document.\n * @example\n * ```jsx\n * const container = document.getElementById(\"container\");\n *\n * function App() {\n *   return (\n *     <PortalContext.Provider value={container}>\n *       <Portal />\n *     </PortalContext.Provider>\n *   );\n * }\n * ```\n */\nexport const PortalContext = createContext<HTMLElement | null>(null);\n"],"mappings":""}

package/dist/portal/portal.d.ts

@@ -0,0 +1,2 @@
+import { i as usePortal, n as PortalOptions, r as PortalProps, t as Portal } from "../portal-CMBWiayp.js";
+export { Portal, PortalOptions, PortalProps, usePortal };

package/dist/portal/portal.js

@@ -0,0 +1,242 @@
+"use client";
+import { FocusTrap } from "../focus-trap/focus-trap.js";
+import { PortalContext } from "./portal-context.js";
+import { createElement, createHook, forwardRef, setRef, useMergeRefs, useSafeLayoutEffect, useWrapElement } from "@ariakit/react-utils";
+import { disableFocusIn, getDocument, getNextTabbable, getPreviousTabbable, isFocusEventOutside, restoreFocusIn } from "@ariakit/utils";
+import { useContext, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/portal/portal.tsx
+const TagName = "div";
+function getRootElement(element) {
+	const doc = getDocument(element);
+	const { fullscreenElement } = doc;
+	if (fullscreenElement instanceof HTMLElement) return fullscreenElement;
+	return doc.body;
+}
+function getPortalElement(element, portalElement) {
+	if (!portalElement) return getDocument(element).createElement("div");
+	if (typeof portalElement === "function") return portalElement(element);
+	return portalElement;
+}
+function getRandomId(prefix = "id") {
+	return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).slice(2, 8)}`;
+}
+function queueFocus(element) {
+	queueMicrotask(() => {
+		element?.focus();
+	});
+}
+/**
+* Returns props to create a `Portal` component.
+* @see https://ariakit.com/components/portal
+* @example
+* ```jsx
+* const props = usePortal();
+* <Role {...props}>Content</Role>
+* ```
+*/
+const usePortal = createHook(function usePortal({ preserveTabOrder, preserveTabOrderAnchor, portalElement, portalRef, portal = true, ...props }) {
+	const ref = useRef(null);
+	const refProp = useMergeRefs(ref, props.ref);
+	const context = useContext(PortalContext);
+	const [portalNode, setPortalNode] = useState(null);
+	const [anchorPortalNode, setAnchorPortalNode] = useState(null);
+	const outerBeforeRef = useRef(null);
+	const innerBeforeRef = useRef(null);
+	const innerAfterRef = useRef(null);
+	const outerAfterRef = useRef(null);
+	useSafeLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || !portal) {
+			setPortalNode(null);
+			return;
+		}
+		const portalEl = getPortalElement(element, portalElement);
+		if (!portalEl) {
+			setPortalNode(null);
+			return;
+		}
+		const isPortalInDocument = portalEl.isConnected;
+		if (!isPortalInDocument) (context || getRootElement(element)).appendChild(portalEl);
+		if (!portalEl.id) portalEl.id = element.id ? `portal/${element.id}` : getRandomId();
+		setPortalNode(portalEl);
+		setRef(portalRef, portalEl);
+		if (isPortalInDocument) return;
+		return () => {
+			portalEl.remove();
+			setRef(portalRef, null);
+		};
+	}, [
+		portal,
+		portalElement,
+		context,
+		portalRef
+	]);
+	useEffect(() => {
+		if (!portalNode) return;
+		if (context) return;
+		if (portalElement) return;
+		const doc = getDocument(portalNode);
+		const onFullscreenChange = () => {
+			const rootElement = getRootElement(portalNode);
+			if (portalNode.parentElement !== rootElement) rootElement.appendChild(portalNode);
+		};
+		onFullscreenChange();
+		doc.addEventListener("fullscreenchange", onFullscreenChange);
+		return () => {
+			doc.removeEventListener("fullscreenchange", onFullscreenChange);
+		};
+	}, [
+		portalNode,
+		context,
+		portalElement
+	]);
+	useSafeLayoutEffect(() => {
+		if (!portal) return;
+		if (!preserveTabOrder) return;
+		if (!preserveTabOrderAnchor) return;
+		const element = getDocument(preserveTabOrderAnchor).createElement("span");
+		element.style.position = "fixed";
+		preserveTabOrderAnchor.insertAdjacentElement("afterend", element);
+		setAnchorPortalNode(element);
+		return () => {
+			element.remove();
+			setAnchorPortalNode(null);
+		};
+	}, [
+		portal,
+		preserveTabOrder,
+		preserveTabOrderAnchor
+	]);
+	useEffect(() => {
+		if (!portalNode) return;
+		if (!preserveTabOrder) return;
+		let raf = 0;
+		const onFocus = (event) => {
+			if (!isFocusEventOutside(event)) return;
+			const focusing = event.type === "focusin";
+			cancelAnimationFrame(raf);
+			if (focusing) return restoreFocusIn(portalNode);
+			raf = requestAnimationFrame(() => {
+				disableFocusIn(portalNode, true);
+			});
+		};
+		portalNode.addEventListener("focusin", onFocus, true);
+		portalNode.addEventListener("focusout", onFocus, true);
+		return () => {
+			cancelAnimationFrame(raf);
+			portalNode.removeEventListener("focusin", onFocus, true);
+			portalNode.removeEventListener("focusout", onFocus, true);
+		};
+	}, [portalNode, preserveTabOrder]);
+	props = useWrapElement(props, (element) => {
+		element = /* @__PURE__ */ jsx(PortalContext.Provider, {
+			value: portalNode || context,
+			children: element
+		});
+		if (!portal) return element;
+		if (!portalNode) return /* @__PURE__ */ jsx("span", {
+			ref: refProp,
+			id: props.id,
+			style: { position: "fixed" },
+			hidden: true
+		});
+		element = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			preserveTabOrder && portalNode && /* @__PURE__ */ jsx(FocusTrap, {
+				ref: innerBeforeRef,
+				"data-focus-trap": props.id,
+				className: "__focus-trap-inner-before",
+				onFocus: (event) => {
+					if (isFocusEventOutside(event, portalNode)) queueFocus(getNextTabbable());
+					else queueFocus(outerBeforeRef.current);
+				}
+			}),
+			element,
+			preserveTabOrder && portalNode && /* @__PURE__ */ jsx(FocusTrap, {
+				ref: innerAfterRef,
+				"data-focus-trap": props.id,
+				className: "__focus-trap-inner-after",
+				onFocus: (event) => {
+					if (isFocusEventOutside(event, portalNode)) queueFocus(getPreviousTabbable());
+					else queueFocus(outerAfterRef.current);
+				}
+			})
+		] });
+		if (portalNode) element = createPortal(element, portalNode);
+		let preserveTabOrderElement = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			preserveTabOrder && portalNode && /* @__PURE__ */ jsx(FocusTrap, {
+				ref: outerBeforeRef,
+				"data-focus-trap": props.id,
+				className: "__focus-trap-outer-before",
+				onFocus: (event) => {
+					if (!(event.relatedTarget === outerAfterRef.current) && isFocusEventOutside(event, portalNode)) queueFocus(innerBeforeRef.current);
+					else queueFocus(getPreviousTabbable());
+				}
+			}),
+			preserveTabOrder && /* @__PURE__ */ jsx("span", {
+				"aria-owns": portalNode?.id,
+				style: { position: "fixed" }
+			}),
+			preserveTabOrder && portalNode && /* @__PURE__ */ jsx(FocusTrap, {
+				ref: outerAfterRef,
+				"data-focus-trap": props.id,
+				className: "__focus-trap-outer-after",
+				onFocus: (event) => {
+					if (isFocusEventOutside(event, portalNode)) queueFocus(innerAfterRef.current);
+					else {
+						const nextTabbable = getNextTabbable();
+						if (nextTabbable === innerBeforeRef.current) {
+							requestAnimationFrame(() => getNextTabbable()?.focus());
+							return;
+						}
+						queueFocus(nextTabbable);
+					}
+				}
+			})
+		] });
+		if (anchorPortalNode && preserveTabOrder) preserveTabOrderElement = createPortal(preserveTabOrderElement, anchorPortalNode);
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [preserveTabOrderElement, element] });
+	}, [
+		portalNode,
+		context,
+		portal,
+		props.id,
+		preserveTabOrder,
+		anchorPortalNode
+	]);
+	props = {
+		...props,
+		ref: refProp
+	};
+	return props;
+});
+/**
+* Renders an element using [React
+* Portal](https://react.dev/reference/react-dom/createPortal).
+*
+* By default, the portal element is a `div` element appended to the
+* `document.body` element. You can customize this with the
+* [`portalElement`](https://ariakit.com/reference/portal#portalelement) prop.
+*
+* The
+* [`preserveTabOrder`](https://ariakit.com/reference/portal#preservetaborder)
+* prop allows this component to manage the tab order of the elements. It
+* ensures the tab order remains consistent with the original location where the
+* portal was rendered in the React tree, instead of the final location in the
+* DOM. The
+* [`preserveTabOrderAnchor`](https://ariakit.com/reference/portal#preservetaborderanchor)
+* prop can specify a different location from which the tab order is preserved.
+* @see https://ariakit.com/components/portal
+* @example
+* ```jsx
+* <Portal>Content</Portal>
+* ```
+*/
+const Portal = forwardRef(function Portal(props) {
+	return createElement(TagName, usePortal(props));
+});
+//#endregion
+export { Portal, usePortal };
+
+//# sourceMappingURL=portal.js.map

package/dist/portal/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","names":[],"sources":["../../src/portal/portal.tsx"],"sourcesContent":["import {\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useWrapElement,\n  setRef,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport {\n  getDocument,\n  isFocusEventOutside,\n  disableFocusIn,\n  getNextTabbable,\n  getPreviousTabbable,\n  restoreFocusIn,\n} from \"@ariakit/utils\";\nimport type { ElementType, MutableRefObject, RefCallback } from \"react\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FocusTrap } from \"../focus-trap/focus-trap.tsx\";\nimport { PortalContext } from \"./portal-context.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n// Returns the best root element for appending portal nodes. When an element\n// is in fullscreen mode, portals must be appended inside the fullscreen\n// element instead of document.body so they remain visible.\nfunction getRootElement(element?: Element | null) {\n  const doc = getDocument(element);\n  const { fullscreenElement } = doc;\n  if (fullscreenElement instanceof HTMLElement) {\n    return fullscreenElement;\n  }\n  return doc.body;\n}\n\nfunction getPortalElement(\n  element: HTMLElement,\n  portalElement: PortalOptions[\"portalElement\"],\n) {\n  if (!portalElement) {\n    return getDocument(element).createElement(\"div\");\n  }\n  if (typeof portalElement === \"function\") {\n    return portalElement(element);\n  }\n  return portalElement;\n}\n\nfunction getRandomId(prefix = \"id\") {\n  return `${prefix ? `${prefix}-` : \"\"}${Math.random()\n    .toString(36)\n    .slice(2, 8)}`;\n}\n\nfunction queueFocus(element?: HTMLElement | null) {\n  queueMicrotask(() => {\n    element?.focus();\n  });\n}\n\n/**\n * Returns props to create a `Portal` component.\n * @see https://ariakit.com/components/portal\n * @example\n * ```jsx\n * const props = usePortal();\n * <Role {...props}>Content</Role>\n * ```\n */\nexport const usePortal = createHook<TagName, PortalOptions>(function usePortal({\n  preserveTabOrder,\n  preserveTabOrderAnchor,\n  portalElement,\n  portalRef,\n  portal = true,\n  ...props\n}) {\n  const ref = useRef<HTMLType>(null);\n  const refProp = useMergeRefs(ref, props.ref);\n  const context = useContext(PortalContext);\n  const [portalNode, setPortalNode] = useState<HTMLElement | null>(null);\n  const [anchorPortalNode, setAnchorPortalNode] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const outerBeforeRef = useRef<HTMLSpanElement>(null);\n  const innerBeforeRef = useRef<HTMLSpanElement>(null);\n  const innerAfterRef = useRef<HTMLSpanElement>(null);\n  const outerAfterRef = useRef<HTMLSpanElement>(null);\n\n  // Create the portal node and attach it to the DOM.\n  useSafeLayoutEffect(() => {\n    const element = ref.current;\n    if (!element || !portal) {\n      setPortalNode(null);\n      return;\n    }\n    const portalEl = getPortalElement(element, portalElement);\n    // TODO: Warn about portals as the document.body element.\n    if (!portalEl) {\n      setPortalNode(null);\n      return;\n    }\n    const isPortalInDocument = portalEl.isConnected;\n    if (!isPortalInDocument) {\n      const rootElement = context || getRootElement(element);\n      rootElement.appendChild(portalEl);\n    }\n    // If the portal element doesn't have an id already, set one.\n    if (!portalEl.id) {\n      // Use the element's id so rendering <Portal id=\"some-id\" /> will\n      // produce predictable results.\n      portalEl.id = element.id ? `portal/${element.id}` : getRandomId();\n    }\n    // Set the internal portal node state and the portalRef prop.\n    setPortalNode(portalEl);\n    setRef(portalRef, portalEl);\n    // If the portal element was already in the document, we don't need to\n    // remove it when the element is unmounted, so we just return.\n    if (isPortalInDocument) return;\n    // Otherwise, we need to remove the portal from the DOM.\n    return () => {\n      portalEl.remove();\n      setRef(portalRef, null);\n    };\n  }, [portal, portalElement, context, portalRef]);\n\n  // Move the portal node when fullscreen state changes so it stays visible.\n  useEffect(() => {\n    if (!portalNode) return;\n    if (context) return;\n    if (portalElement) return;\n    const doc = getDocument(portalNode);\n    const onFullscreenChange = () => {\n      const rootElement = getRootElement(portalNode);\n      if (portalNode.parentElement !== rootElement) {\n        rootElement.appendChild(portalNode);\n      }\n    };\n    // Sync immediately in case fullscreen was entered before this effect\n    // ran, which can happen if the portal mounts while already in\n    // fullscreen mode.\n    onFullscreenChange();\n    doc.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () => {\n      doc.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n    };\n  }, [portalNode, context, portalElement]);\n\n  // Create the anchor portal node and attach it to the DOM.\n  useSafeLayoutEffect(() => {\n    if (!portal) return;\n    if (!preserveTabOrder) return;\n    if (!preserveTabOrderAnchor) return;\n    const doc = getDocument(preserveTabOrderAnchor);\n    const element = doc.createElement(\"span\");\n    element.style.position = \"fixed\";\n    preserveTabOrderAnchor.insertAdjacentElement(\"afterend\", element);\n    setAnchorPortalNode(element);\n    return () => {\n      element.remove();\n      setAnchorPortalNode(null);\n    };\n  }, [portal, preserveTabOrder, preserveTabOrderAnchor]);\n\n  // When preserveTabOrder is true, make sure elements inside the portal\n  // element are tabbable only when the portal has already been focused,\n  // either by tabbing into a focus trap element outside or using the mouse.\n  useEffect(() => {\n    if (!portalNode) return;\n    if (!preserveTabOrder) return;\n    let raf = 0;\n    const onFocus = (event: FocusEvent) => {\n      if (!isFocusEventOutside(event)) return;\n      const focusing = event.type === \"focusin\";\n      cancelAnimationFrame(raf);\n      if (focusing) {\n        return restoreFocusIn(portalNode);\n      }\n      // Wait for the next frame to allow tabindex changes after the focus\n      // event.\n      raf = requestAnimationFrame(() => {\n        disableFocusIn(portalNode, true);\n      });\n    };\n    // Listen to the event on the capture phase so they run before the focus\n    // trap elements onFocus prop is called.\n    portalNode.addEventListener(\"focusin\", onFocus, true);\n    portalNode.addEventListener(\"focusout\", onFocus, true);\n    return () => {\n      cancelAnimationFrame(raf);\n      portalNode.removeEventListener(\"focusin\", onFocus, true);\n      portalNode.removeEventListener(\"focusout\", onFocus, true);\n    };\n  }, [portalNode, preserveTabOrder]);\n\n  props = useWrapElement(\n    props,\n    (element) => {\n      element = (\n        // While the portal node is not in the DOM, we need to pass the\n        // current context to the portal context, otherwise it's going to\n        // reset to the body element on nested portals.\n        <PortalContext.Provider value={portalNode || context}>\n          {element}\n        </PortalContext.Provider>\n      );\n\n      if (!portal) return element;\n\n      if (!portalNode) {\n        // If the element should be rendered within a portal, but the portal\n        // node is not yet in the DOM, we'll return an empty div element. We\n        // assign the id to the element so we can use it to set the portal id\n        // later on. We're using position: fixed here so that the browser\n        // doesn't add margin to the element when setting gap on a parent\n        // element.\n        return (\n          <span\n            ref={refProp}\n            id={props.id}\n            style={{ position: \"fixed\" }}\n            hidden\n          />\n        );\n      }\n\n      element = (\n        <>\n          {preserveTabOrder && portalNode && (\n            <FocusTrap\n              ref={innerBeforeRef}\n              data-focus-trap={props.id}\n              className=\"__focus-trap-inner-before\"\n              onFocus={(event) => {\n                if (isFocusEventOutside(event, portalNode)) {\n                  queueFocus(getNextTabbable());\n                } else {\n                  queueFocus(outerBeforeRef.current);\n                }\n              }}\n            />\n          )}\n          {element}\n          {preserveTabOrder && portalNode && (\n            <FocusTrap\n              ref={innerAfterRef}\n              data-focus-trap={props.id}\n              className=\"__focus-trap-inner-after\"\n              onFocus={(event) => {\n                if (isFocusEventOutside(event, portalNode)) {\n                  queueFocus(getPreviousTabbable());\n                } else {\n                  queueFocus(outerAfterRef.current);\n                }\n              }}\n            />\n          )}\n        </>\n      );\n\n      if (portalNode) {\n        element = createPortal(element, portalNode);\n      }\n\n      let preserveTabOrderElement = (\n        <>\n          {preserveTabOrder && portalNode && (\n            <FocusTrap\n              ref={outerBeforeRef}\n              data-focus-trap={props.id}\n              className=\"__focus-trap-outer-before\"\n              onFocus={(event) => {\n                // If the event is coming from the outer after focus trap, it\n                // means there's no tabbable element inside the portal. In\n                // this case, we don't focus the inner before focus trap, but\n                // the previous tabbable element outside the portal.\n                const fromOuter = event.relatedTarget === outerAfterRef.current;\n                if (!fromOuter && isFocusEventOutside(event, portalNode)) {\n                  queueFocus(innerBeforeRef.current);\n                } else {\n                  queueFocus(getPreviousTabbable());\n                }\n              }}\n            />\n          )}\n          {preserveTabOrder && (\n            // We're using position: fixed here so that the browser doesn't\n            // add margin to the element when setting gap on a parent element.\n            <span aria-owns={portalNode?.id} style={{ position: \"fixed\" }} />\n          )}\n          {preserveTabOrder && portalNode && (\n            <FocusTrap\n              ref={outerAfterRef}\n              data-focus-trap={props.id}\n              className=\"__focus-trap-outer-after\"\n              onFocus={(event) => {\n                if (isFocusEventOutside(event, portalNode)) {\n                  queueFocus(innerAfterRef.current);\n                } else {\n                  const nextTabbable = getNextTabbable();\n                  // If the next tabbable element is the inner before focus\n                  // trap, this means we're at the end of the document or the\n                  // portal was placed right after the original spot in the\n                  // React tree. We need to wait for the next frame so the\n                  // preserveTabOrder effect can run and disable the inner\n                  // before focus trap. If there's no tabbable element after\n                  // that, the focus will stay on this element.\n                  if (nextTabbable === innerBeforeRef.current) {\n                    requestAnimationFrame(() => getNextTabbable()?.focus());\n                    return;\n                  }\n                  queueFocus(nextTabbable);\n                }\n              }}\n            />\n          )}\n        </>\n      );\n\n      if (anchorPortalNode && preserveTabOrder) {\n        preserveTabOrderElement = createPortal(\n          preserveTabOrderElement,\n          anchorPortalNode,\n        );\n      }\n\n      return (\n        <>\n          {preserveTabOrderElement}\n          {element}\n        </>\n      );\n    },\n    [portalNode, context, portal, props.id, preserveTabOrder, anchorPortalNode],\n  );\n\n  props = {\n    ...props,\n    ref: refProp,\n  };\n\n  return props;\n});\n\n/**\n * Renders an element using [React\n * Portal](https://react.dev/reference/react-dom/createPortal).\n *\n * By default, the portal element is a `div` element appended to the\n * `document.body` element. You can customize this with the\n * [`portalElement`](https://ariakit.com/reference/portal#portalelement) prop.\n *\n * The\n * [`preserveTabOrder`](https://ariakit.com/reference/portal#preservetaborder)\n * prop allows this component to manage the tab order of the elements. It\n * ensures the tab order remains consistent with the original location where the\n * portal was rendered in the React tree, instead of the final location in the\n * DOM. The\n * [`preserveTabOrderAnchor`](https://ariakit.com/reference/portal#preservetaborderanchor)\n * prop can specify a different location from which the tab order is preserved.\n * @see https://ariakit.com/components/portal\n * @example\n * ```jsx\n * <Portal>Content</Portal>\n * ```\n */\nexport const Portal = forwardRef(function Portal(props: PortalProps) {\n  const htmlProps = usePortal(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface PortalOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * When enabled, `preserveTabOrder` will keep the DOM element's tab order the\n   * same as the order in which the underlying\n   * [`Portal`](https://ariakit.com/reference/portal) component was mounted in\n   * the React tree.\n   *\n   * If the\n   * [`preserveTabOrderAnchor`](https://ariakit.com/reference/portal#preservetaborderanchor)\n   * prop is provided, the tab order will be preserved relative to that element.\n   * @default false\n   */\n  preserveTabOrder?: boolean;\n  /**\n   * An anchor element for maintaining the tab order when\n   * [`preserveTabOrder`](https://ariakit.com/reference/portal#preservetaborder)\n   * prop is enabled. The tab order will be kept relative to this element.\n   *\n   * By default, the tab order is kept relative to the original location in the\n   * React tree where the underlying\n   * [`Portal`](https://ariakit.com/reference/portal) component was mounted.\n   * @example\n   * ```jsx {18-20}\n   * const [anchor, setAnchor] = useState(null);\n   *\n   * <button ref={setAnchor}>Order 0</button>\n   * <button>Order 2</button>\n   *\n   * // Rendered at the end of the document.\n   * <Portal>\n   *   <button>Order 5</button>\n   * </Portal>\n   *\n   * // Rendered at the end of the document, but the tab order is preserved.\n   * <Portal preserveTabOrder>\n   *   <button>Order 3</button>\n   * </Portal>\n   *\n   * // Rendered at the end of the document, but the tab order is preserved\n   * // relative to the anchor element.\n   * <Portal preserveTabOrder preserveTabOrderAnchor={anchor}>\n   *   <button>Order 1</button>\n   * </Portal>\n   *\n   * <button>Order 4</button>\n   * ```\n   */\n  preserveTabOrderAnchor?: Element | null;\n  /**\n   * `portalRef` is similar to `ref` but is scoped to the portal node. It's\n   * useful when you need to be informed when the portal element is appended to\n   * the DOM or removed from the DOM.\n   *\n   * Live examples:\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   * @example\n   * ```jsx\n   * const [portalElement, setPortalElement] = useState(null);\n   *\n   * <Portal portalRef={setPortalElement} />\n   * ```\n   */\n  portalRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;\n  /**\n   * Determines whether the element should be rendered as a React Portal.\n   *\n   * Live examples:\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [Dialog with Menu](https://ariakit.com/examples/dialog-menu)\n   * - [Hovercard with keyboard\n   *   support](https://ariakit.com/examples/hovercard-disclosure)\n   * - [Menubar](https://ariakit.com/components/menubar)\n   * - [Standalone Popover](https://ariakit.com/examples/popover-standalone)\n   * - [Animated Select](https://ariakit.com/examples/select-animated)\n   * @default true\n   */\n  portal?: boolean;\n  /**\n   * An HTML element or a memoized callback function that returns an HTML\n   * element to be used as the portal element. By default, the portal element\n   * will be a `div` element appended to the `document.body`.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   * @example\n   * ```jsx\n   * const [portal, setPortal] = useState(null);\n   *\n   * <Portal portalElement={portal} />\n   * <div ref={setPortal} />\n   * ```\n   * @example\n   * ```jsx\n   * const getPortalElement = useCallback(() => {\n   *   const div = document.createElement(\"div\");\n   *   const portalRoot = document.getElementById(\"portal-root\");\n   *   portalRoot.appendChild(div);\n   *   return div;\n   * }, []);\n   *\n   * <Portal portalElement={getPortalElement} />\n   * ```\n   */\n  portalElement?:\n    | ((element: HTMLElement) => HTMLElement | null)\n    | HTMLElement\n    | null;\n}\n\nexport type PortalProps<T extends ElementType = TagName> = Props<\n  T,\n  PortalOptions<T>\n>;\n"],"mappings":"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"}

package/dist/portal-CMBWiayp.d.ts

@@ -0,0 +1,149 @@
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType, MutableRefObject, RefCallback } from "react";
+
+//#region src/portal/portal.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Portal` component.
+ * @see https://ariakit.com/components/portal
+ * @example
+ * ```jsx
+ * const props = usePortal();
+ * <Role {...props}>Content</Role>
+ * ```
+ */
+declare const usePortal: import("@ariakit/react-utils").Hook<"div", PortalOptions<"div">>;
+/**
+ * Renders an element using [React
+ * Portal](https://react.dev/reference/react-dom/createPortal).
+ *
+ * By default, the portal element is a `div` element appended to the
+ * `document.body` element. You can customize this with the
+ * [`portalElement`](https://ariakit.com/reference/portal#portalelement) prop.
+ *
+ * The
+ * [`preserveTabOrder`](https://ariakit.com/reference/portal#preservetaborder)
+ * prop allows this component to manage the tab order of the elements. It
+ * ensures the tab order remains consistent with the original location where the
+ * portal was rendered in the React tree, instead of the final location in the
+ * DOM. The
+ * [`preserveTabOrderAnchor`](https://ariakit.com/reference/portal#preservetaborderanchor)
+ * prop can specify a different location from which the tab order is preserved.
+ * @see https://ariakit.com/components/portal
+ * @example
+ * ```jsx
+ * <Portal>Content</Portal>
+ * ```
+ */
+declare const Portal: (props: PortalProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PortalOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * When enabled, `preserveTabOrder` will keep the DOM element's tab order the
+   * same as the order in which the underlying
+   * [`Portal`](https://ariakit.com/reference/portal) component was mounted in
+   * the React tree.
+   *
+   * If the
+   * [`preserveTabOrderAnchor`](https://ariakit.com/reference/portal#preservetaborderanchor)
+   * prop is provided, the tab order will be preserved relative to that element.
+   * @default false
+   */
+  preserveTabOrder?: boolean;
+  /**
+   * An anchor element for maintaining the tab order when
+   * [`preserveTabOrder`](https://ariakit.com/reference/portal#preservetaborder)
+   * prop is enabled. The tab order will be kept relative to this element.
+   *
+   * By default, the tab order is kept relative to the original location in the
+   * React tree where the underlying
+   * [`Portal`](https://ariakit.com/reference/portal) component was mounted.
+   * @example
+   * ```jsx {18-20}
+   * const [anchor, setAnchor] = useState(null);
+   *
+   * <button ref={setAnchor}>Order 0</button>
+   * <button>Order 2</button>
+   *
+   * // Rendered at the end of the document.
+   * <Portal>
+   *   <button>Order 5</button>
+   * </Portal>
+   *
+   * // Rendered at the end of the document, but the tab order is preserved.
+   * <Portal preserveTabOrder>
+   *   <button>Order 3</button>
+   * </Portal>
+   *
+   * // Rendered at the end of the document, but the tab order is preserved
+   * // relative to the anchor element.
+   * <Portal preserveTabOrder preserveTabOrderAnchor={anchor}>
+   *   <button>Order 1</button>
+   * </Portal>
+   *
+   * <button>Order 4</button>
+   * ```
+   */
+  preserveTabOrderAnchor?: Element | null;
+  /**
+   * `portalRef` is similar to `ref` but is scoped to the portal node. It's
+   * useful when you need to be informed when the portal element is appended to
+   * the DOM or removed from the DOM.
+   *
+   * Live examples:
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * @example
+   * ```jsx
+   * const [portalElement, setPortalElement] = useState(null);
+   *
+   * <Portal portalRef={setPortalElement} />
+   * ```
+   */
+  portalRef?: RefCallback<HTMLElement> | MutableRefObject<HTMLElement | null>;
+  /**
+   * Determines whether the element should be rendered as a React Portal.
+   *
+   * Live examples:
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [Dialog with Menu](https://ariakit.com/examples/dialog-menu)
+   * - [Hovercard with keyboard
+   *   support](https://ariakit.com/examples/hovercard-disclosure)
+   * - [Menubar](https://ariakit.com/components/menubar)
+   * - [Standalone Popover](https://ariakit.com/examples/popover-standalone)
+   * - [Animated Select](https://ariakit.com/examples/select-animated)
+   * @default true
+   */
+  portal?: boolean;
+  /**
+   * An HTML element or a memoized callback function that returns an HTML
+   * element to be used as the portal element. By default, the portal element
+   * will be a `div` element appended to the `document.body`.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   * @example
+   * ```jsx
+   * const [portal, setPortal] = useState(null);
+   *
+   * <Portal portalElement={portal} />
+   * <div ref={setPortal} />
+   * ```
+   * @example
+   * ```jsx
+   * const getPortalElement = useCallback(() => {
+   *   const div = document.createElement("div");
+   *   const portalRoot = document.getElementById("portal-root");
+   *   portalRoot.appendChild(div);
+   *   return div;
+   * }, []);
+   *
+   * <Portal portalElement={getPortalElement} />
+   * ```
+   */
+  portalElement?: ((element: HTMLElement) => HTMLElement | null) | HTMLElement | null;
+}
+type PortalProps<T extends ElementType = TagName> = Props<T, PortalOptions<T>>;
+//#endregion
+export { usePortal as i, PortalOptions as n, PortalProps as r, Portal as t };
+//# sourceMappingURL=portal-CMBWiayp.d.ts.map

package/dist/portal-CMBWiayp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-CMBWiayp.d.ts","names":["Options","Props","ElementType","MutableRefObject","RefCallback","TagName","usePortal","PortalOptions","Hook","Portal","PortalProps","props","ReactElement","JSXElementConstructor","_T","Element","HTMLElement","preserveTabOrder","preserveTabOrderAnchor","portalRef","portal","portalElement","element","T"],"sources":["../src/portal/portal.d.ts"],"mappings":";;;;cAEcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF2C;;;;AACnD;AAAA;;;;AADmD,cAYnDC,SAAAA,iCAA0CE,IAAAA,QAAYD,aAAa;AAAxF;;;;AAAwF;AAuBxF;;;;;;;;;AAAqI;AACrI;;;;;;;AAxBA,cAuBqBE,MAAAA,GAASE,KAAAA,EAAOD,WAAW,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/FN,aAAAA,YAAyBL,WAAAA,GAAcG,OAAAA,UAAiBL,OAAAA;EA8D9BG;;;;;;;;;;;EAlDvCc,gBAAAA;EAmCAC;;;;;;;;;;;;;;AAyD4E;AAEhF;;;;;;;;;;;;;;;;;;;EA3DIA,sBAAAA,GAAyBH,OAAAA;;;;;;;;;;;;;;;EAezBI,SAAAA,GAAYf,WAAAA,CAAYY,WAAAA,IAAeb,gBAAAA,CAAiBa,WAAAA;;;;;;;;;;;;;;;EAexDI,MAAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BAC,aAAAA,KAAkBC,OAAAA,EAASN,WAAAA,KAAgBA,WAAAA,WAAsBA,WAAAA;AAAAA;AAAAA,KAEzDN,WAAAA,WAAsBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMsB,CAAAA,EAAGhB,aAAAA,CAAcgB,CAAAA"}