@ariakit/react-core 0.1.3 → 0.1.4

package/esm/__chunks/{ZVCQYVEV.js → FD7UP2TJ.js}

@@ -1,10 +1,9 @@
 import {
-  useForceUpdate,
-  useSafeLayoutEffect
+  useForceUpdate
 } from "./B7MIN7YT.js";
 
 // src/dialog/utils/use-champion-dialog.ts
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { getDocument } from "@ariakit/core/utils/dom";
 import { flushSync } from "react-dom";
 function useChampionDialog(attribute, store, enabled) {
@@ -19,7 +18,7 @@ function useChampionDialog(attribute, store, enabled) {
     const id = body.getAttribute(attribute);
     return !id || id === dialog.id;
   }, [updated, store, enabled, attribute]);
-  useSafeLayoutEffect(() => {
+  useEffect(() => {
     const dialog = store.getState().contentElement;
     if (!dialog)
       return;

package/esm/__chunks/{QCGEDLZG.js → GEOALYS4.js}

@@ -1,6 +1,6 @@
 import {
   useDialog
-} from "./PAZURDJA.js";
+} from "./WWZPDI2E.js";
 import {
   PopoverContext
 } from "./6GS36SYX.js";

package/esm/__chunks/{LFCJQX2O.js → GWYHKM6Q.js}

@@ -1,6 +1,6 @@
 import {
   useChampionDialog
-} from "./ZVCQYVEV.js";
+} from "./FD7UP2TJ.js";
 import {
   useSafeLayoutEffect
 } from "./B7MIN7YT.js";

package/esm/__chunks/{XQPXGTBO.js → IW7LFTQE.js}

@@ -5,7 +5,7 @@ import {
 } from "./X7FKJQME.js";
 import {
   usePopover
-} from "./QCGEDLZG.js";
+} from "./GEOALYS4.js";
 import {
   createComponent,
   createElement,

package/esm/__chunks/{PAZURDJA.js → WWZPDI2E.js}

@@ -3,16 +3,13 @@ import {
 } from "./4U6AOLE4.js";
 import {
   useHideOnInteractOutside
-} from "./HLAXMBLL.js";
-import {
-  useFocusOnChildUnmount
-} from "./WO2RXMKK.js";
+} from "./ARIIJA3Z.js";
 import {
   prependHiddenDismiss
 } from "./PU22SOKH.js";
 import {
-  disablePointerEventsOutside
-} from "./547F7FFZ.js";
+  disableTreeOutside
+} from "./X3J57OQT.js";
 import {
   disableAccessibilityTreeOutside
 } from "./NV7HSBKK.js";
@@ -21,10 +18,10 @@ import {
 } from "./2SVAPVVI.js";
 import {
   usePreventBodyScroll
-} from "./LFCJQX2O.js";
+} from "./GWYHKM6Q.js";
 import {
   useChampionDialog
-} from "./ZVCQYVEV.js";
+} from "./FD7UP2TJ.js";
 import {
   useNestedDialogs
 } from "./EJZ6BVXG.js";
@@ -165,13 +162,36 @@ var useDialog = createHook(
       (state) => preventBodyScroll && state.mounted
     );
     usePreventBodyScroll(store, shouldPreventBodyScroll);
-    useFocusOnChildUnmount(store);
     useHideOnInteractOutside({
       store,
       modal,
       hideOnInteractOutside,
       nestedDialogs
     });
+    const shouldRestoreLostFocus = useChampionDialog(
+      "data-dialog-restore-lost-focus",
+      store,
+      open && modal && !openModals.length
+    );
+    useEffect(() => {
+      if (!shouldRestoreLostFocus())
+        return;
+      let raf = 0;
+      const restoreLostFocus = () => {
+        const dialog = ref.current;
+        raf = requestAnimationFrame(restoreLostFocus);
+        if (!dialog)
+          return;
+        const doc = getDocument(dialog);
+        if (!doc.hasFocus())
+          return;
+        if (doc.activeElement !== doc.body)
+          return;
+        dialog.focus();
+      };
+      restoreLostFocus();
+      return () => cancelAnimationFrame(raf);
+    }, [shouldRestoreLostFocus]);
     const mounted = store.useState("mounted");
     if (isSafariBrowser) {
       useEffect(() => {
@@ -229,13 +249,11 @@ var useDialog = createHook(
       if (modal) {
         return chain(
           disableAccessibilityTreeOutside(element),
-          // When the backdrop is not visible, we also need to disable pointer
-          // events outside of the modal dialog.
-          !backdrop ? disablePointerEventsOutside(element) : null
+          disableTreeOutside(element)
         );
       }
       return disableAccessibilityTreeOutside(element);
-    }, [shouldDisableOutside, portal, portalNode, modal, backdrop]);
+    }, [shouldDisableOutside, portal, portalNode, modal]);
     const mayAutoFocusOnShow = !!autoFocusOnShow;
     const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow);
     useEffect(() => {
@@ -371,9 +389,12 @@ var useDialog = createHook(
       (element) => /* @__PURE__ */ jsx(HeadingLevel, { level: modal ? 1 : void 0, children: element }),
       [modal]
     );
-    const shouldFocusTrap = store.useState(
-      (state) => modal && !openModals.length && state.open
-    );
+    const [shouldFocusTrap, setShouldFocusTrap] = useState(false);
+    const hasOpenModals = !!openModals.length;
+    useSafeLayoutEffect(() => {
+      const value = open && modal && !hasOpenModals && !("inert" in HTMLElement.prototype);
+      setShouldFocusTrap(value);
+    }, [modal, open, hasOpenModals]);
     props = useFocusTrapRegion({ ...props, enabled: shouldFocusTrap });
     const hiddenProp = props.hidden;
     props = useWrapElement(

package/esm/__chunks/X3J57OQT.js

@@ -0,0 +1,44 @@
+import {
+  walkTreeOutside
+} from "./HVXLVRRR.js";
+
+// src/dialog/utils/disable-tree-outside.ts
+import { chain, noop } from "@ariakit/core/utils/misc";
+function assignStyle(element, style) {
+  if (!element)
+    return () => {
+    };
+  const previousStyle = element.style.cssText;
+  Object.assign(element.style, style);
+  return () => {
+    element.style.cssText = previousStyle;
+  };
+}
+function disableElement(element) {
+  if (!("style" in element))
+    return noop;
+  const previousInert = element.inert;
+  element.inert = true;
+  return chain(
+    assignStyle(element, {
+      pointerEvents: "none",
+      userSelect: "none",
+      cursor: "default"
+    }),
+    () => element.inert = previousInert
+  );
+}
+function disableTreeOutside(...elements) {
+  const cleanups = [];
+  walkTreeOutside(elements, (element) => {
+    cleanups.unshift(disableElement(element));
+  });
+  const restorePointerEvents = () => {
+    cleanups.forEach((fn) => fn());
+  };
+  return restorePointerEvents;
+}
+
+export {
+  disableTreeOutside
+};

package/esm/combobox/combobox-popover.js

@@ -4,19 +4,18 @@ import {
 import "../__chunks/5VGBBGF5.js";
 import {
   usePopover
-} from "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+} from "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/combobox/combobox.js

@@ -66,6 +66,7 @@ var useCombobox = createHook(
     const ref = useRef(null);
     const [valueUpdated, forceValueUpdate] = useForceUpdate();
     const valueChangedRef = useRef(false);
+    const composingRef = useRef(false);
     const autoSelect = store.useState(
       (state) => !!autoSelectProp && state.virtualFocus
     );
@@ -127,10 +128,12 @@ var useCombobox = createHook(
         return;
       if (!hasCompletionString(storeValue, activeValue))
         return;
-      const element = ref.current;
-      if (!element)
-        return;
-      element.setSelectionRange(storeValue.length, activeValue.length);
+      queueMicrotask(() => {
+        const element = ref.current;
+        if (!element)
+          return;
+        element.setSelectionRange(storeValue.length, activeValue.length);
+      });
     }, [
       valueUpdated,
       inline,
@@ -143,6 +146,8 @@ var useCombobox = createHook(
     useSafeLayoutEffect(() => {
       if (!storeValue)
         return;
+      if (composingRef.current)
+        return;
       valueChangedRef.current = true;
     }, [storeValue]);
     useSafeLayoutEffect(() => {
@@ -190,10 +195,16 @@ var useCombobox = createHook(
       const { target } = event;
       const nativeEvent = event.nativeEvent;
       valueChangedRef.current = true;
-      if (isInputEvent(nativeEvent) && inline) {
-        const textInserted = nativeEvent.inputType === "insertText";
-        const caretAtEnd = target.selectionStart === target.value.length;
-        setCanInline(textInserted && caretAtEnd);
+      if (isInputEvent(nativeEvent)) {
+        if (nativeEvent.isComposing) {
+          valueChangedRef.current = false;
+          composingRef.current = true;
+        }
+        if (inline) {
+          const textInserted = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertCompositionText";
+          const caretAtEnd = target.selectionStart === target.value.length;
+          setCanInline(textInserted && caretAtEnd);
+        }
       }
       if (showOnChangeProp(event)) {
         store.show();
@@ -215,6 +226,7 @@ var useCombobox = createHook(
         if (event.defaultPrevented)
           return;
         valueChangedRef.current = true;
+        composingRef.current = false;
         if (!autoSelect)
           return;
         forceValueUpdate();

package/esm/composite/composite-overflow.js

@@ -1,18 +1,17 @@
 import {
   usePopover
-} from "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+} from "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/dialog/dialog.js

@@ -1,18 +1,17 @@
 import {
   Dialog,
   useDialog
-} from "../__chunks/PAZURDJA.js";
+} from "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/dialog/utils/disable-tree-outside.d.ts

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

package/esm/dialog/utils/disable-tree-outside.js

@@ -0,0 +1,7 @@
+import {
+  disableTreeOutside
+} from "../../__chunks/X3J57OQT.js";
+import "../../__chunks/HVXLVRRR.js";
+export {
+  disableTreeOutside
+};

package/esm/dialog/utils/use-champion-dialog.js

@@ -1,6 +1,6 @@
 import {
   useChampionDialog
-} from "../../__chunks/ZVCQYVEV.js";
+} from "../../__chunks/FD7UP2TJ.js";
 import "../../__chunks/B7MIN7YT.js";
 import "../../__chunks/SXC6BPOF.js";
 export {

package/esm/dialog/utils/use-hide-on-interact-outside.js

@@ -1,6 +1,6 @@
 import {
   useHideOnInteractOutside
-} from "../../__chunks/HLAXMBLL.js";
+} from "../../__chunks/ARIIJA3Z.js";
 import "../../__chunks/7JNF6I52.js";
 import "../../__chunks/B7MIN7YT.js";
 import "../../__chunks/SXC6BPOF.js";

package/esm/dialog/utils/use-prevent-body-scroll.js

@@ -1,7 +1,7 @@
 import {
   usePreventBodyScroll
-} from "../../__chunks/LFCJQX2O.js";
-import "../../__chunks/ZVCQYVEV.js";
+} from "../../__chunks/GWYHKM6Q.js";
+import "../../__chunks/FD7UP2TJ.js";
 import "../../__chunks/B7MIN7YT.js";
 import "../../__chunks/SXC6BPOF.js";
 export {

package/esm/form/form-checkbox.js

@@ -4,12 +4,12 @@ import {
 import {
   FormContext
 } from "../__chunks/P3I4MECH.js";
-import {
-  useCheckbox
-} from "../__chunks/4RNONDN5.js";
 import {
   useCheckboxStore
 } from "../__chunks/HRNQJHNJ.js";
+import {
+  useCheckbox
+} from "../__chunks/4RNONDN5.js";
 import "../__chunks/M5KYRTQG.js";
 import "../__chunks/SAVDGYCC.js";
 import "../__chunks/OJNRBQKS.js";

package/esm/hovercard/hovercard.js

@@ -1,21 +1,20 @@
 import {
   Hovercard,
   useHovercard
-} from "../__chunks/XQPXGTBO.js";
+} from "../__chunks/IW7LFTQE.js";
 import "../__chunks/X7FKJQME.js";
-import "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+import "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/menu/menu-item-checkbox.js

@@ -1,9 +1,9 @@
-import {
-  useCheckbox
-} from "../__chunks/4RNONDN5.js";
 import {
   useCheckboxStore
 } from "../__chunks/HRNQJHNJ.js";
+import {
+  useCheckbox
+} from "../__chunks/4RNONDN5.js";
 import {
   useMenuItem
 } from "../__chunks/YDNX3N4B.js";

package/esm/menu/menu.js

@@ -1,6 +1,6 @@
 import {
   useHovercard
-} from "../__chunks/XQPXGTBO.js";
+} from "../__chunks/IW7LFTQE.js";
 import "../__chunks/X7FKJQME.js";
 import {
   useMenuList
@@ -9,19 +9,18 @@ import {
   MenuBarContext,
   MenuContext
 } from "../__chunks/HVBRRKV4.js";
-import "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+import "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/popover/popover.js

@@ -1,19 +1,18 @@
 import {
   Popover,
   usePopover
-} from "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+} from "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";

package/esm/select/select-popover.js

@@ -1,18 +1,17 @@
 import {
   usePopover
-} from "../__chunks/QCGEDLZG.js";
-import "../__chunks/PAZURDJA.js";
+} from "../__chunks/GEOALYS4.js";
+import "../__chunks/WWZPDI2E.js";
 import "../__chunks/4U6AOLE4.js";
-import "../__chunks/HLAXMBLL.js";
-import "../__chunks/WO2RXMKK.js";
+import "../__chunks/ARIIJA3Z.js";
 import "../__chunks/PU22SOKH.js";
-import "../__chunks/547F7FFZ.js";
+import "../__chunks/X3J57OQT.js";
 import "../__chunks/NV7HSBKK.js";
 import "../__chunks/2SVAPVVI.js";
 import "../__chunks/HVXLVRRR.js";
 import "../__chunks/7JNF6I52.js";
-import "../__chunks/LFCJQX2O.js";
-import "../__chunks/ZVCQYVEV.js";
+import "../__chunks/GWYHKM6Q.js";
+import "../__chunks/FD7UP2TJ.js";
 import "../__chunks/EJZ6BVXG.js";
 import "../__chunks/6OMX4H3W.js";
 import "../__chunks/COQHFAEN.js";