@ariakit/react-core 0.1.5 → 0.1.7

package/cjs/dialog/dialog.cjs

@@ -1,31 +1,35 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _GSMEXLDScjs = require('../__chunks/GSMEXLDS.cjs');
-require('../__chunks/2ZU7T6CD.cjs');
-require('../__chunks/MWKUZW4E.cjs');
-require('../__chunks/5EIZ4QQ7.cjs');
-require('../__chunks/OKPDB2ZM.cjs');
-require('../__chunks/XFVLDGPP.cjs');
-require('../__chunks/ZNVMDYMM.cjs');
-require('../__chunks/YHG3KGFW.cjs');
+var _EEXWIKOBcjs = require('../__chunks/EEXWIKOB.cjs');
+require('../__chunks/QXXZLOZG.cjs');
+require('../__chunks/QRAQT522.cjs');
+require('../__chunks/NZYGNCZL.cjs');
+require('../__chunks/E5VOJWDR.cjs');
+require('../__chunks/W32FX7DM.cjs');
+require('../__chunks/CARNFZQT.cjs');
+require('../__chunks/O45IXGJW.cjs');
+require('../__chunks/TVZPJJTX.cjs');
+require('../__chunks/56NPFF7P.cjs');
+require('../__chunks/NR3SJH64.cjs');
+require('../__chunks/GHWBKA6H.cjs');
+require('../__chunks/EE6OIU6X.cjs');
 require('../__chunks/X2GXTE3P.cjs');
-require('../__chunks/CP6M4POZ.cjs');
-require('../__chunks/ZDO3DQPW.cjs');
-require('../__chunks/UK7WFIG4.cjs');
 require('../__chunks/SOPRUU56.cjs');
 require('../__chunks/CQSUIL2D.cjs');
 require('../__chunks/N2VCZZLP.cjs');
-require('../__chunks/44UMDBZE.cjs');
-require('../__chunks/KUXCWMWW.cjs');
-require('../__chunks/MAH7ORCZ.cjs');
+require('../__chunks/NVBNDB5B.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
+require('../__chunks/PFD4TS6B.cjs');
+require('../__chunks/C7Y26CUV.cjs');
 require('../__chunks/NS56XHXG.cjs');
-require('../__chunks/SWSQUGVG.cjs');
-require('../__chunks/DGBC5VB4.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/EM2PMFEW.cjs');
+require('../__chunks/QTPUX3NM.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
-exports.Dialog = _GSMEXLDScjs.Dialog; exports.useDialog = _GSMEXLDScjs.useDialog;
+exports.Dialog = _EEXWIKOBcjs.Dialog; exports.useDialog = _EEXWIKOBcjs.useDialog;

package/cjs/dialog/dialog.d.ts

@@ -35,16 +35,14 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
     /**
      * Determines whether the dialog is modal. Modal dialogs have distinct states
      * and behaviors:
-     *   - The `portal`, `backdrop` and `preventBodyScroll` props are set to
-     *     `true`. They can still be manually set to `false`.
-     *   - A visually hidden dismiss button will be rendered if the
-     *     `DialogDismiss` component hasn't been used. This allows screen reader
-     *     users to close the dialog.
-     *   - The focus will be trapped within the dialog.
-     *   - When the dialog is open, the elements outside of the dialog will be
-     *     hidden to assistive technology users using the `aria-hidden` attribute.
-     *   - When using the `Heading` or `DialogHeading` components within the
-     *     dialog, their level will be reset so they start with `h1`.
+     * - The `portal` and `preventBodyScroll` props are set to `true`. They can
+     *   still be manually set to `false`.
+     * - A visually hidden dismiss button will be rendered if the `DialogDismiss`
+     *   component hasn't been used. This allows screen reader users to close the
+     *   dialog.
+     * - When the dialog is open, element tree outside it will be disabled.
+     * - When using the `Heading` or `DialogHeading` components within the dialog,
+     *   their level will be reset so they start with `h1`.
      * @default true
      */
     modal?: boolean;
@@ -74,6 +72,18 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * @default true
      */
     hideOnInteractOutside?: BooleanOrCallback<Event | SyntheticEvent>;
+    /**
+     * When a dialog is open, the elements outside of it will be disabled so they
+     * can't be interacted with if the dialog is modal. For non-modal dialogs,
+     * interacting with elements outside of the dialog will close it. With this
+     * function, you can return a collection of elements that will be considered
+     * part of the dialog and therefore will be excluded from this behavior.
+     *
+     * Live examples:
+     * - [Dialog with
+     *   React-Toastify](https://ariakit.org/examples/dialog-react-toastify)
+     */
+    getPersistentElements?: () => Iterable<Element>;
     /**
      * Determines whether the body scrolling will be prevented when the dialog is
      * shown.
@@ -82,8 +92,8 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
     /**
      * Determines whether an element inside the dialog will receive focus when the
      * dialog is shown. By default, this is usually the first tabbable element in
-     * the dialog or the dialog itself. The `initialFocusRef` prop can be used to
-     * set a different element to receive focus.
+     * the dialog or the dialog itself. The `initialFocus` prop can be used to set
+     * a different element to receive focus.
      * @default true
      */
     autoFocusOnShow?: BooleanOrCallback<HTMLElement>;
@@ -92,8 +102,8 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * the dialog is hidden if another element hasn't been focused in the action
      * of hiding the dialog (for example, by clicking or tabbing into another
      * tabbable element outside of the dialog). By default, this is usually the
-     * disclosure element. The `finalFocusRef` prop can be used to define a
-     * different element to be focused.
+     * disclosure element. The `finalFocus` prop can be used to define a different
+     * element to be focused.
      * @default true
      */
     autoFocusOnHide?: BooleanOrCallback<HTMLElement>;
@@ -103,9 +113,10 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * `HTMLElement`. However, if `autoFocusOnShow` is set to `false`, this prop
      * will have no effect. If left unset, the dialog will attempt to determine
      * the initial focus element in the following order:
-     *   1. An element with an `autoFocus` prop.
-     *   2. The first tabbable element inside the dialog.
-     *   3. The dialog element itself.
+     * 1. An element with an `autoFocus` prop.
+     * 2. The first tabbable element inside the dialog.
+     * 3. The first focusable element inside the dialog.
+     * 4. The dialog element itself.
      */
     initialFocus?: HTMLElement | RefObject<HTMLElement> | null;
     /**
@@ -113,7 +124,8 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * provided that no other element has been focused while the dialog was being
      * hidden (e.g., by clicking or tabbing into another tabbable element outside
      * of the dialog). However, if `autoFocusOnHide` is set to `false`, this prop
-     * will have no effect. If left unset, the disclosure element will be used.
+     * will have no effect. If left unset, the element that was focused before the
+     * dialog was opened will be focused again.
      */
     finalFocus?: HTMLElement | RefObject<HTMLElement> | null;
 }

package/cjs/dialog/utils/disable-accessibility-tree-outside.cjs

@@ -1,7 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _XFVLDGPPcjs = require('../../__chunks/XFVLDGPP.cjs');
-require('../../__chunks/YHG3KGFW.cjs');
 
+var _TVZPJJTXcjs = require('../../__chunks/TVZPJJTX.cjs');
+require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/EE6OIU6X.cjs');
+require('../../__chunks/6455U47T.cjs');
 
-exports.disableAccessibilityTreeOutside = _XFVLDGPPcjs.disableAccessibilityTreeOutside;
+
+
+exports.disableAccessibilityTreeOutside = _TVZPJJTXcjs.disableAccessibilityTreeOutside; exports.hideElementFromAccessibilityTree = _TVZPJJTXcjs.hideElementFromAccessibilityTree;

package/cjs/dialog/utils/disable-accessibility-tree-outside.d.ts

@@ -1,3 +1,4 @@
 type Elements = Array<Element | null>;
+export declare function hideElementFromAccessibilityTree(element: Element): () => void;
 export declare function disableAccessibilityTreeOutside(...elements: Elements): () => void;
 export {};

package/cjs/dialog/utils/disable-tree-outside.cjs

@@ -1,7 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _OKPDB2ZMcjs = require('../../__chunks/OKPDB2ZM.cjs');
-require('../../__chunks/YHG3KGFW.cjs');
+var _O45IXGJWcjs = require('../../__chunks/O45IXGJW.cjs');
+require('../../__chunks/TVZPJJTX.cjs');
+require('../../__chunks/56NPFF7P.cjs');
+require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/EE6OIU6X.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
-exports.disableTreeOutside = _OKPDB2ZMcjs.disableTreeOutside;
+exports.disableTreeOutside = _O45IXGJWcjs.disableTreeOutside;

package/cjs/dialog/utils/mark-tree-outside.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+var _CARNFZQTcjs = require('../../__chunks/CARNFZQT.cjs');
+require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/EE6OIU6X.cjs');
+require('../../__chunks/6455U47T.cjs');
+
+
+
+
+
+exports.isElementMarked = _CARNFZQTcjs.isElementMarked; exports.markAncestor = _CARNFZQTcjs.markAncestor; exports.markElement = _CARNFZQTcjs.markElement; exports.markTreeOutside = _CARNFZQTcjs.markTreeOutside;

package/cjs/dialog/utils/mark-tree-outside.d.ts

@@ -0,0 +1,6 @@
+type Elements = Array<Element | null>;
+export declare function markElement(element: Element, id?: string): () => void;
+export declare function markAncestor(element: Element, id?: string): () => void;
+export declare function isElementMarked(element: Element, id?: string): boolean;
+export declare function markTreeOutside(dialogId: string, ...elements: Elements): () => void;
+export {};

package/cjs/dialog/utils/orchestrate.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+var _NR3SJH64cjs = require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/6455U47T.cjs');
+
+
+
+
+
+exports.assignStyle = _NR3SJH64cjs.assignStyle; exports.setAttribute = _NR3SJH64cjs.setAttribute; exports.setCSSProperty = _NR3SJH64cjs.setCSSProperty; exports.setProperty = _NR3SJH64cjs.setProperty;

package/cjs/dialog/utils/orchestrate.d.ts

@@ -0,0 +1,9 @@
+declare const setups: unique symbol;
+type Element$ = Element & {
+    [setups]?: Map<string, () => void>;
+};
+export declare function setAttribute(element: Element$, attr: string, value: string): () => void;
+export declare function setProperty<T extends Element$, K extends keyof T & string>(element: T, property: K, value: T[K]): () => void;
+export declare function assignStyle(element: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>): () => void;
+export declare function setCSSProperty(element: HTMLElement | null | undefined, property: string, value: string): () => void;
+export {};

package/cjs/dialog/utils/prepend-hidden-dismiss.cjs

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _5EIZ4QQ7cjs = require('../../__chunks/5EIZ4QQ7.cjs');
+var _W32FX7DMcjs = require('../../__chunks/W32FX7DM.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
-exports.prependHiddenDismiss = _5EIZ4QQ7cjs.prependHiddenDismiss;
+exports.prependHiddenDismiss = _W32FX7DMcjs.prependHiddenDismiss;

package/cjs/dialog/utils/supports-inert.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _56NPFF7Pcjs = require('../../__chunks/56NPFF7P.cjs');
+require('../../__chunks/6455U47T.cjs');
+
+
+exports.supportsInert = _56NPFF7Pcjs.supportsInert;

package/cjs/dialog/utils/supports-inert.d.ts

@@ -0,0 +1 @@
+export declare function supportsInert(): boolean;

package/cjs/dialog/utils/use-hide-on-interact-outside.cjs

@@ -1,9 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _MWKUZW4Ecjs = require('../../__chunks/MWKUZW4E.cjs');
+var _E5VOJWDRcjs = require('../../__chunks/E5VOJWDR.cjs');
+require('../../__chunks/CARNFZQT.cjs');
+require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/EE6OIU6X.cjs');
 require('../../__chunks/X2GXTE3P.cjs');
-require('../../__chunks/5QY4WCTR.cjs');
+require('../../__chunks/NREUHWTU.cjs');
 require('../../__chunks/2X5K3J7Y.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
-exports.useHideOnInteractOutside = _MWKUZW4Ecjs.useHideOnInteractOutside;
+exports.useHideOnInteractOutside = _E5VOJWDRcjs.useHideOnInteractOutside;

package/cjs/dialog/utils/use-hide-on-interact-outside.d.ts

@@ -1,6 +1,2 @@
 import type { DialogOptions } from "../dialog.js";
-type Options = Pick<DialogOptions, "store" | "modal" | "hideOnInteractOutside"> & {
-    nestedDialogs: HTMLElement[];
-};
-export declare function useHideOnInteractOutside({ store, modal, hideOnInteractOutside, nestedDialogs, }: Options): void;
-export {};
+export declare function useHideOnInteractOutside(store: DialogOptions["store"], hideOnInteractOutside: DialogOptions["hideOnInteractOutside"]): void;

package/cjs/dialog/utils/use-nested-dialogs.cjs

@@ -1,8 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _UK7WFIG4cjs = require('../../__chunks/UK7WFIG4.cjs');
-require('../../__chunks/5QY4WCTR.cjs');
+var _NZYGNCZLcjs = require('../../__chunks/NZYGNCZL.cjs');
+require('../../__chunks/NREUHWTU.cjs');
 require('../../__chunks/2X5K3J7Y.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
-exports.useNestedDialogs = _UK7WFIG4cjs.useNestedDialogs;
+exports.useNestedDialogs = _NZYGNCZLcjs.useNestedDialogs;

package/cjs/dialog/utils/use-nested-dialogs.d.ts

@@ -1,10 +1,6 @@
 import type { WrapElement } from "../../utils/types.js";
 import type { DialogStore } from "../dialog-store.js";
-/**
- * Handles nested dialogs.
- */
-export declare function useNestedDialogs(store: DialogStore, modal?: boolean): {
-    nestedDialogs: HTMLElement[];
-    openModals: HTMLElement[];
+export declare function useNestedDialogs(store: DialogStore): {
     wrapElement: WrapElement;
+    nestedDialogs: HTMLElement[];
 };

package/cjs/dialog/utils/use-prevent-body-scroll.cjs

@@ -1,9 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _CP6M4POZcjs = require('../../__chunks/CP6M4POZ.cjs');
-require('../../__chunks/ZDO3DQPW.cjs');
-require('../../__chunks/5QY4WCTR.cjs');
+var _QRAQT522cjs = require('../../__chunks/QRAQT522.cjs');
+require('../../__chunks/NR3SJH64.cjs');
+require('../../__chunks/NREUHWTU.cjs');
 require('../../__chunks/2X5K3J7Y.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
-exports.usePreventBodyScroll = _CP6M4POZcjs.usePreventBodyScroll;
+exports.usePreventBodyScroll = _QRAQT522cjs.usePreventBodyScroll;

package/cjs/dialog/utils/use-previous-mouse-down-ref.cjs

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 var _X2GXTE3Pcjs = require('../../__chunks/X2GXTE3P.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
 exports.usePreviousMouseDownRef = _X2GXTE3Pcjs.usePreviousMouseDownRef;

package/cjs/dialog/utils/walk-tree-outside.cjs

@@ -1,8 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _YHG3KGFWcjs = require('../../__chunks/YHG3KGFW.cjs');
+var _EE6OIU6Xcjs = require('../../__chunks/EE6OIU6X.cjs');
+require('../../__chunks/6455U47T.cjs');
 
 
 
-exports.isValidElement = _YHG3KGFWcjs.isValidElement; exports.walkTreeOutside = _YHG3KGFWcjs.walkTreeOutside;
+exports.isValidElement = _EE6OIU6Xcjs.isValidElement; exports.walkTreeOutside = _EE6OIU6Xcjs.walkTreeOutside;

package/cjs/dialog/utils/walk-tree-outside.d.ts

@@ -1,4 +1,4 @@
 type Elements = Array<Element | null>;
 export declare function isValidElement(element: Element, ignoredElements: Elements): boolean;
-export declare function walkTreeOutside(elements: Elements, callback: (element: Element) => void): void;
+export declare function walkTreeOutside(elements: Elements, callback: (element: Element) => void, ancestorCallback?: (element: Element) => void): void;
 export {};

package/cjs/disclosure/disclosure-content.cjs

@@ -1,11 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _SWSQUGVGcjs = require('../__chunks/SWSQUGVG.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+var _EM2PMFEWcjs = require('../__chunks/EM2PMFEW.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
-exports.DisclosureContent = _SWSQUGVGcjs.DisclosureContent; exports.useDisclosureContent = _SWSQUGVGcjs.useDisclosureContent;
+exports.DisclosureContent = _EM2PMFEWcjs.DisclosureContent; exports.useDisclosureContent = _EM2PMFEWcjs.useDisclosureContent;

package/cjs/disclosure/disclosure-store.cjs

@@ -2,12 +2,13 @@
 
 
 
-var _EQUPHBKXcjs = require('../__chunks/EQUPHBKX.cjs');
-require('../__chunks/TQ3ZXPQL.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+var _P7TWEJ6Icjs = require('../__chunks/P7TWEJ6I.cjs');
+require('../__chunks/F7HVNVHQ.cjs');
+require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
 
-exports.useDisclosureStore = _EQUPHBKXcjs.useDisclosureStore; exports.useDisclosureStoreOptions = _EQUPHBKXcjs.useDisclosureStoreOptions; exports.useDisclosureStoreProps = _EQUPHBKXcjs.useDisclosureStoreProps;
+exports.useDisclosureStore = _P7TWEJ6Icjs.useDisclosureStore; exports.useDisclosureStoreOptions = _P7TWEJ6Icjs.useDisclosureStoreOptions; exports.useDisclosureStoreProps = _P7TWEJ6Icjs.useDisclosureStoreProps;

package/cjs/disclosure/disclosure.cjs

@@ -1,14 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _VSKE43XZcjs = require('../__chunks/VSKE43XZ.cjs');
-require('../__chunks/GTWUFHVO.cjs');
-require('../__chunks/EWCMH6G3.cjs');
-require('../__chunks/44UMDBZE.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+var _GE4P5OCBcjs = require('../__chunks/GE4P5OCB.cjs');
+require('../__chunks/2DVMVYK2.cjs');
+require('../__chunks/DASOL6J2.cjs');
+require('../__chunks/NVBNDB5B.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
-exports.Disclosure = _VSKE43XZcjs.Disclosure; exports.useDisclosure = _VSKE43XZcjs.useDisclosure;
+exports.Disclosure = _GE4P5OCBcjs.Disclosure; exports.useDisclosure = _GE4P5OCBcjs.useDisclosure;

package/cjs/focus-trap/focus-trap-region.cjs

@@ -1,13 +1,84 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
+var _C7Y26CUVcjs = require('../__chunks/C7Y26CUV.cjs');
+require('../__chunks/QTPUX3NM.cjs');
 
-var _ZNVMDYMMcjs = require('../__chunks/ZNVMDYMM.cjs');
-require('../__chunks/MAH7ORCZ.cjs');
-require('../__chunks/DGBC5VB4.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+
+
+
+var _7NAIPZYNcjs = require('../__chunks/7NAIPZYN.cjs');
+
+
+
+var _NREUHWTUcjs = require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
 
 
 
-exports.FocusTrapRegion = _ZNVMDYMMcjs.FocusTrapRegion; exports.useFocusTrapRegion = _ZNVMDYMMcjs.useFocusTrapRegion;
+
+var _6455U47Tcjs = require('../__chunks/6455U47T.cjs');
+
+// src/focus-trap/focus-trap-region.tsx
+var _react = require('react');
+var _focus = require('@ariakit/core/utils/focus');
+var _jsxruntime = require('react/jsx-runtime');
+var useFocusTrapRegion = _7NAIPZYNcjs.createHook.call(void 0, 
+  (_a) => {
+    var _b = _a, { enabled = false } = _b, props = _6455U47Tcjs.__objRest.call(void 0, _b, ["enabled"]);
+    const ref = _react.useRef.call(void 0, null);
+    props = _NREUHWTUcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => {
+        const renderFocusTrap = () => {
+          if (!enabled)
+            return null;
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _C7Y26CUVcjs.FocusTrap,
+            {
+              onFocus: (event) => {
+                const container = ref.current;
+                if (!container)
+                  return;
+                const tabbables = _focus.getAllTabbableIn.call(void 0, container, true);
+                const first = tabbables[0];
+                const last = tabbables[tabbables.length - 1];
+                if (!tabbables.length) {
+                  container.focus();
+                  return;
+                }
+                if (event.relatedTarget === first) {
+                  last == null ? void 0 : last.focus();
+                } else {
+                  first == null ? void 0 : first.focus();
+                }
+              }
+            }
+          );
+        };
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          renderFocusTrap(),
+          element,
+          renderFocusTrap()
+        ] });
+      },
+      [enabled]
+    );
+    props = _6455U47Tcjs.__spreadProps.call(void 0, _6455U47Tcjs.__spreadValues.call(void 0, {}, props), {
+      ref: _NREUHWTUcjs.useForkRef.call(void 0, ref, props.ref)
+    });
+    return props;
+  }
+);
+var FocusTrapRegion = _7NAIPZYNcjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useFocusTrapRegion(props);
+    return _7NAIPZYNcjs.createElement.call(void 0, "div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  FocusTrapRegion.displayName = "FocusTrapRegion";
+}
+
+
+
+exports.FocusTrapRegion = FocusTrapRegion; exports.useFocusTrapRegion = useFocusTrapRegion;

package/cjs/focus-trap/focus-trap.cjs

@@ -1,10 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _MAH7ORCZcjs = require('../__chunks/MAH7ORCZ.cjs');
-require('../__chunks/DGBC5VB4.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
+var _C7Y26CUVcjs = require('../__chunks/C7Y26CUV.cjs');
+require('../__chunks/QTPUX3NM.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
-exports.FocusTrap = _MAH7ORCZcjs.FocusTrap; exports.useFocusTrap = _MAH7ORCZcjs.useFocusTrap;
+exports.FocusTrap = _C7Y26CUVcjs.FocusTrap; exports.useFocusTrap = _C7Y26CUVcjs.useFocusTrap;

package/cjs/focusable/focusable-container.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _GHWBKA6Hcjs = require('../__chunks/GHWBKA6H.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/NREUHWTU.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
+
+
+
+exports.FocusableContainer = _GHWBKA6Hcjs.FocusableContainer; exports.useFocusableContainer = _GHWBKA6Hcjs.useFocusableContainer;

package/cjs/focusable/focusable-container.d.ts

@@ -0,0 +1,33 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `FocusableContainer` component.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * const props = useFocusableContainer();
+ * <Role {...props} />
+ * ```
+ */
+export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
+/**
+ * Renders a div that wraps `Focusable` components and controls whether they
+ * can be auto focused.
+ * @see https://ariakit.org/components/focusable
+ * @example
+ * ```jsx
+ * <FocusableContainer autoFocusOnShow={false}>
+ *   <Focusable autoFocus />
+ * </FocusableContainer>
+ * ```
+ */
+export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
+export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
+    /**
+     * Determines whether focusable elements inside the container should be
+     * automatically focused when the container is shown and they have the
+     * `autoFocus` prop.
+     * @default true
+     */
+    autoFocusOnShow?: boolean;
+};
+export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;

package/cjs/focusable/focusable-context.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _LHHW5ZQPcjs = require('../__chunks/LHHW5ZQP.cjs');
+require('../__chunks/6455U47T.cjs');
+
+
+exports.FocusableContext = _LHHW5ZQPcjs.FocusableContext;

package/cjs/focusable/focusable-context.d.ts

@@ -0,0 +1 @@
+export declare const FocusableContext: import("react").Context<boolean>;

package/cjs/focusable/focusable.cjs

@@ -1,11 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _44UMDBZEcjs = require('../__chunks/44UMDBZE.cjs');
-require('../__chunks/UYIFJ7U3.cjs');
-require('../__chunks/5QY4WCTR.cjs');
+var _NVBNDB5Bcjs = require('../__chunks/NVBNDB5B.cjs');
+require('../__chunks/LHHW5ZQP.cjs');
+require('../__chunks/7NAIPZYN.cjs');
+require('../__chunks/NREUHWTU.cjs');
 require('../__chunks/2X5K3J7Y.cjs');
+require('../__chunks/6455U47T.cjs');
 
 
 
-exports.Focusable = _44UMDBZEcjs.Focusable; exports.useFocusable = _44UMDBZEcjs.useFocusable;
+exports.Focusable = _NVBNDB5Bcjs.Focusable; exports.useFocusable = _NVBNDB5Bcjs.useFocusable;

package/cjs/focusable/focusable.d.ts

@@ -32,6 +32,10 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
      * Automatically focus the element when it is mounted. It works similarly to
      * the native `autoFocus` prop, but solves an issue where the element is given
      * focus before React effects can run.
+     *
+     * Live examples:
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
      * @default false
      */
     autoFocus?: boolean;
@@ -59,6 +63,9 @@ export interface FocusableOptions<T extends As = "div"> extends Options<T> {
     /**
      * Custom event handler that is called when the element is focused via the
      * keyboard or when a key is pressed while the element is focused.
+     *
+     * Live examples:
+     * - [Custom Checkbox](https://ariakit.org/examples/checkbox-custom)
      */
     onFocusVisible?: BivariantCallback<(event: SyntheticEvent) => void>;
 }