@ariakit/react-core 0.2.17 → 0.3.0

package/esm/form/form-radio.js

@@ -1,27 +1,27 @@
 import {
   useFormField
-} from "../__chunks/5QHNNZNE.js";
+} from "../__chunks/24EUVZFE.js";
 import {
-  FormContext
-} from "../__chunks/P3I4MECH.js";
+  useFormContext
+} from "../__chunks/NJS632IW.js";
 import {
   useRadio
-} from "../__chunks/UVKFBOMX.js";
-import "../__chunks/6I2PARRP.js";
-import "../__chunks/FVD2NJZN.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/VFNGSUSF.js";
-import "../__chunks/T3DJZG63.js";
+} from "../__chunks/NVEAMD2G.js";
+import "../__chunks/NRFPH2ON.js";
+import "../__chunks/6TWF32ML.js";
+import "../__chunks/LND6SMHN.js";
+import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
-import "../__chunks/WJ37OVG2.js";
-import "../__chunks/MYID4V27.js";
+import "../__chunks/5C7J4IAS.js";
+import "../__chunks/74KKBFVP.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "../__chunks/NQJBHION.js";
-import "../__chunks/P63NRZ4A.js";
+} from "../__chunks/CFEUKV6C.js";
+import "../__chunks/L3AX6U5E.js";
 import {
   useEvent
 } from "../__chunks/J7Q2EO23.js";
@@ -33,16 +33,15 @@ import {
 } from "../__chunks/PNRLI7OV.js";
 
 // src/form/form-radio.ts
-import { useContext } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormRadio = createHook(
   (_a) => {
     var _b = _a, { store, name: nameProp, value } = _b, props = __objRest(_b, ["store", "name", "value"]);
-    const context = useContext(FormContext);
+    const context = useFormContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "FormRadio must be wrapped in a Form component"
+      process.env.NODE_ENV !== "production" && "FormRadio must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
     const onChangeProp = props.onChange;

package/esm/form/form-remove.js

@@ -1,17 +1,18 @@
 import {
-  FormContext
-} from "../__chunks/P3I4MECH.js";
+  useFormContext
+} from "../__chunks/NJS632IW.js";
 import {
   useButton
-} from "../__chunks/O6CV6VRM.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/QPWEKAWF.js";
+import "../__chunks/LND6SMHN.js";
+import "../__chunks/74KKBFVP.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import {
   useEvent
 } from "../__chunks/J7Q2EO23.js";
@@ -23,7 +24,6 @@ import {
 } from "../__chunks/PNRLI7OV.js";
 
 // src/form/form-remove.ts
-import { useContext } from "react";
 import { isTextField } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
 function findNextOrPreviousField(items, name, index) {
@@ -48,11 +48,11 @@ function findPushButton(items, name) {
 var useFormRemove = createHook(
   (_a) => {
     var _b = _a, { store, name: nameProp, index, autoFocusOnClick = true } = _b, props = __objRest(_b, ["store", "name", "index", "autoFocusOnClick"]);
-    const context = useContext(FormContext);
+    const context = useFormContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "FormRemove must be wrapped in a Form component"
+      process.env.NODE_ENV !== "production" && "FormRemove must be wrapped in a Form component."
     );
     const name = `${nameProp}`;
     const onClickProp = props.onClick;

package/esm/form/form-reset.js

@@ -1,17 +1,18 @@
 import {
-  FormContext
-} from "../__chunks/P3I4MECH.js";
+  useFormContext
+} from "../__chunks/NJS632IW.js";
 import {
   useButton
-} from "../__chunks/O6CV6VRM.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/QPWEKAWF.js";
+import "../__chunks/LND6SMHN.js";
+import "../__chunks/74KKBFVP.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {
@@ -20,16 +21,15 @@ import {
 } from "../__chunks/PNRLI7OV.js";
 
 // src/form/form-reset.ts
-import { useContext } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormReset = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
-    const context = useContext(FormContext);
+    const context = useFormContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "FormReset must be wrapped in a Form component"
+      process.env.NODE_ENV !== "production" && "FormReset must be wrapped in a Form component."
     );
     props = __spreadValues({
       type: "reset",

package/esm/form/form-store.d.ts

@@ -5,14 +5,7 @@ import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreS
 import type { Store } from "../utils/store.js";
 type Values = Core.FormStoreValues;
 type Item = Core.FormStoreItem;
-export declare function useFormStoreOptions(props: FormStoreProps): Partial<CollectionStoreOptions<{
-    id: string;
-    element?: HTMLElement | null | undefined;
-} & {
-    type: "button" | "label" | "error" | "description" | "field";
-    name: string;
-}>>;
-export declare function useFormStoreProps<T extends Omit<FormStore, "useValue" | "useValidate" | "useSubmit">>(store: T, props: FormStoreProps): T & {
+export declare function useFormStoreProps<T extends Omit<FormStore, "useValue" | "useValidate" | "useSubmit">>(store: T, update: () => void, props: FormStoreProps): T & {
     useValue: <T_1 = any>(name: StringLike) => T_1;
     useValidate: (callback: Core.FormStoreCallback<FormStoreState<import("@ariakit/core/utils/types").AnyObject>>) => void;
     useSubmit: (callback: Core.FormStoreCallback<FormStoreState<import("@ariakit/core/utils/types").AnyObject>>) => void;

package/esm/form/form-store.js

@@ -1,67 +1,13 @@
 import {
-  useCollectionStoreOptions,
-  useCollectionStoreProps
-} from "../__chunks/RS7KBRGA.js";
-import {
-  useStore,
-  useStoreProps
-} from "../__chunks/P63NRZ4A.js";
-import {
-  useEvent
-} from "../__chunks/J7Q2EO23.js";
+  useFormStore,
+  useFormStoreProps
+} from "../__chunks/HVG5WXKX.js";
+import "../__chunks/JEQRR7AL.js";
+import "../__chunks/L3AX6U5E.js";
+import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "../__chunks/PNRLI7OV.js";
-
-// src/form/form-store.ts
-import { useCallback, useEffect, useMemo } from "react";
-import * as Core from "@ariakit/core/form/form-store";
-function useFormStoreOptions(props) {
-  return useCollectionStoreOptions(props);
-}
-function useFormStoreProps(store, props) {
-  store = useCollectionStoreProps(store, props);
-  useStoreProps(store, props, "values", "setValues");
-  useStoreProps(store, props, "errors", "setErrors");
-  useStoreProps(store, props, "touched", "setTouched");
-  const useValue = useCallback(
-    (name) => store.useState(() => store.getValue(name)),
-    [store]
-  );
-  const useValidate = useCallback(
-    (callback) => {
-      callback = useEvent(callback);
-      const items = store.useState("items");
-      useEffect(() => store.onValidate(callback), [items, callback]);
-    },
-    [store]
-  );
-  const useSubmit = useCallback(
-    (callback) => {
-      callback = useEvent(callback);
-      const items = store.useState("items");
-      useEffect(() => store.onSubmit(callback), [items, callback]);
-    },
-    [store]
-  );
-  return useMemo(
-    () => __spreadProps(__spreadValues({}, store), {
-      useValue,
-      useValidate,
-      useSubmit
-    }),
-    []
-  );
-}
-function useFormStore(props = {}) {
-  const options = useFormStoreOptions(props);
-  const store = useStore(() => Core.createFormStore(__spreadValues(__spreadValues({}, props), options)));
-  return useFormStoreProps(store, props);
-}
+import "../__chunks/PNRLI7OV.js";
 export {
   useFormStore,
-  useFormStoreOptions,
   useFormStoreProps
 };

package/esm/form/form-submit.js

@@ -1,17 +1,18 @@
 import {
-  FormContext
-} from "../__chunks/P3I4MECH.js";
+  useFormContext
+} from "../__chunks/NJS632IW.js";
 import {
   useButton
-} from "../__chunks/O6CV6VRM.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/QPWEKAWF.js";
+import "../__chunks/LND6SMHN.js";
+import "../__chunks/74KKBFVP.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {
@@ -21,16 +22,15 @@ import {
 } from "../__chunks/PNRLI7OV.js";
 
 // src/form/form-submit.ts
-import { useContext } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 var useFormSubmit = createHook(
   (_a) => {
     var _b = _a, { store, accessibleWhenDisabled = true } = _b, props = __objRest(_b, ["store", "accessibleWhenDisabled"]);
-    const context = useContext(FormContext);
+    const context = useFormContext();
     store = store || context;
     invariant(
       store,
-      process.env.NODE_ENV !== "production" && "FormSubmit must be wrapped in a Form component"
+      process.env.NODE_ENV !== "production" && "FormSubmit must be wrapped in a Form component."
     );
     props = __spreadValues({
       type: "submit",

package/esm/form/form.d.ts

@@ -28,7 +28,7 @@ export interface FormOptions<T extends As = "form"> extends Options<T> {
     /**
      * Object returned by the `useFormStore` hook.
      */
-    store: FormStore;
+    store?: FormStore;
     /**
      * Whether the form should trigger the validation callbacks when values
      * change.

package/esm/form/form.js

@@ -1,11 +1,13 @@
 import {
-  FormContext
-} from "../__chunks/P3I4MECH.js";
+  FormScopedContextProvider,
+  useFormContext
+} from "../__chunks/NJS632IW.js";
+import "../__chunks/74KKBFVP.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import {
   useEvent,
   useInitialValue,
@@ -24,6 +26,7 @@ import {
 // src/form/form.tsx
 import { useEffect, useRef, useState } from "react";
 import { isTextField } from "@ariakit/core/utils/dom";
+import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
 function isField(element, items) {
   return items.some(
@@ -55,6 +58,12 @@ var useForm = createHook(
       "resetOnSubmit",
       "autoFocusOnSubmit"
     ]);
+    const context = useFormContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "Form must receive a `store` prop or be wrapped in a FormProvider component."
+    );
     const ref = useRef(null);
     const values = store.useState("values");
     const submitSucceed = store.useState("submitSucceed");
@@ -62,22 +71,22 @@ var useForm = createHook(
     const items = store.useState("items");
     const defaultValues = useInitialValue(values);
     useEffect(
-      () => resetOnUnmount ? store.reset : void 0,
-      [resetOnUnmount, store.reset]
+      () => resetOnUnmount ? store == null ? void 0 : store.reset : void 0,
+      [resetOnUnmount, store]
     );
     useUpdateEffect(() => {
       if (!validateOnChange)
         return;
       if (values === defaultValues)
         return;
-      store.validate();
+      store == null ? void 0 : store.validate();
     }, [validateOnChange, values, defaultValues, store]);
     useEffect(() => {
       if (!resetOnSubmit)
         return;
       if (!submitSucceed)
         return;
-      store.reset();
+      store == null ? void 0 : store.reset();
     }, [resetOnSubmit, submitSucceed, store]);
     const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = useState(false);
     useEffect(() => {
@@ -101,7 +110,7 @@ var useForm = createHook(
       if (event.defaultPrevented)
         return;
       event.preventDefault();
-      store.submit();
+      store == null ? void 0 : store.submit();
       if (!autoFocusOnSubmit)
         return;
       setShouldFocusOnSubmit(true);
@@ -113,6 +122,8 @@ var useForm = createHook(
         return;
       if (!validateOnBlur)
         return;
+      if (!store)
+        return;
       if (!isField(event.target, store.getState().items))
         return;
       store.validate();
@@ -123,11 +134,11 @@ var useForm = createHook(
       if (event.defaultPrevented)
         return;
       event.preventDefault();
-      store.reset();
+      store == null ? void 0 : store.reset();
     });
     props = useWrapElement(
       props,
-      (element) => /* @__PURE__ */ jsx(FormContext.Provider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ jsx(FormScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const tagName = useTagName(ref, props.as || "form");

package/esm/group/group-label.js

@@ -1,9 +1,9 @@
 import {
   GroupLabel,
   useGroupLabel
-} from "../__chunks/CTVLGQZG.js";
+} from "../__chunks/JGFZEURZ.js";
 import "../__chunks/F5VAC7MB.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/group/group.js

@@ -1,9 +1,9 @@
 import {
   Group,
   useGroup
-} from "../__chunks/2NIRKFVH.js";
+} from "../__chunks/JCUV76PT.js";
 import "../__chunks/F5VAC7MB.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/heading/heading.js

@@ -1,9 +1,9 @@
 import {
   Heading,
   useHeading
-} from "../__chunks/YAQX4NUA.js";
+} from "../__chunks/FK7TLQA3.js";
 import "../__chunks/COQHFAEN.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/hovercard/hovercard-anchor.d.ts

@@ -30,7 +30,7 @@ export interface HovercardAnchorOptions<T extends As = "a"> extends FocusableOpt
     /**
      * Object returned by the `useHovercardStore` hook.
      */
-    store: HovercardStore;
+    store?: HovercardStore;
     /**
      * Whether to show the hovercard on mouse move.
      * @default true

package/esm/hovercard/hovercard-anchor.js

@@ -1,10 +1,14 @@
 import {
   HovercardAnchor,
   useHovercardAnchor
-} from "../__chunks/Y5XLHDDM.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/54DCICBS.js";
+import "../__chunks/5DA3HK6G.js";
+import "../__chunks/547DFODS.js";
+import "../__chunks/5YYGDU4E.js";
+import "../__chunks/56KWVYDN.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
-import "../__chunks/NQJBHION.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/hovercard/hovercard-arrow.js

@@ -1,22 +1,35 @@
 import {
   usePopoverArrow
-} from "../__chunks/SWPAMWUW.js";
+} from "../__chunks/3AVEDDB7.js";
 import "../__chunks/GM7XQV7F.js";
-import "../__chunks/6GS36SYX.js";
+import {
+  useHovercardContext
+} from "../__chunks/5DA3HK6G.js";
+import "../__chunks/547DFODS.js";
+import "../__chunks/5YYGDU4E.js";
+import "../__chunks/56KWVYDN.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
-import "../__chunks/PNRLI7OV.js";
+import {
+  __objRest,
+  __spreadValues
+} from "../__chunks/PNRLI7OV.js";
 
 // src/hovercard/hovercard-arrow.ts
-var useHovercardArrow = createHook((props) => {
-  props = usePopoverArrow(props);
-  return props;
-});
+var useHovercardArrow = createHook(
+  (_a) => {
+    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = useHovercardContext();
+    store = store || context;
+    props = usePopoverArrow(__spreadValues({ store }, props));
+    return props;
+  }
+);
 var HovercardArrow = createComponent(
   (props) => {
     const htmlProps = useHovercardArrow(props);

package/esm/hovercard/hovercard-context.d.ts

@@ -0,0 +1,19 @@
+import type { HovercardStore } from "./hovercard-store.js";
+/**
+ * Returns the hovercard store from the nearest hovercard container.
+ * @example
+ * function Hovercard() {
+ *   const store = useHovercardContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Hovercard must be wrapped in HovercardProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useHovercardContext: () => HovercardStore | undefined;
+export declare const useHovercardScopedContext: (onlyScoped?: boolean) => HovercardStore | undefined;
+export declare const useHovercardProviderContext: () => HovercardStore | undefined;
+export declare const HovercardContextProvider: (props: import("react").ProviderProps<HovercardStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const HovercardScopedContextProvider: (props: import("react").ProviderProps<HovercardStore | undefined>) => import("react/jsx-runtime").JSX.Element;

package/esm/hovercard/hovercard-context.js

@@ -0,0 +1,21 @@
+import {
+  HovercardContextProvider,
+  HovercardScopedContextProvider,
+  useHovercardContext,
+  useHovercardProviderContext,
+  useHovercardScopedContext
+} from "../__chunks/5DA3HK6G.js";
+import "../__chunks/547DFODS.js";
+import "../__chunks/5YYGDU4E.js";
+import "../__chunks/56KWVYDN.js";
+import "../__chunks/CFEUKV6C.js";
+import "../__chunks/J7Q2EO23.js";
+import "../__chunks/CP3U4HPL.js";
+import "../__chunks/PNRLI7OV.js";
+export {
+  HovercardContextProvider,
+  HovercardScopedContextProvider,
+  useHovercardContext,
+  useHovercardProviderContext,
+  useHovercardScopedContext
+};

package/esm/hovercard/hovercard-description.js

@@ -1,11 +1,12 @@
 import {
   HovercardDescription,
   useHovercardDescription
-} from "../__chunks/ROOVOZJF.js";
-import "../__chunks/SRHDWRFI.js";
-import "../__chunks/YSASCXX3.js";
-import "../__chunks/LNHZLQEK.js";
-import "../__chunks/NQJBHION.js";
+} from "../__chunks/CX73JT3N.js";
+import "../__chunks/DJJWAII5.js";
+import "../__chunks/PTJJY26M.js";
+import "../__chunks/5YYGDU4E.js";
+import "../__chunks/56KWVYDN.js";
+import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/hovercard/hovercard-disclosure.d.ts

@@ -32,6 +32,6 @@ export interface HovercardDisclosureOptions<T extends As = "button"> extends Dia
     /**
      * Object returned by the `useHovercardStore` hook.
      */
-    store: HovercardStore;
+    store?: HovercardStore;
 }
 export type HovercardDisclosureProps<T extends As = "button"> = Props<HovercardDisclosureOptions<T>>;

package/esm/hovercard/hovercard-disclosure.js

@@ -1,19 +1,25 @@
 import {
   useDialogDisclosure
-} from "../__chunks/5I6BQS7D.js";
-import "../__chunks/LDJKN2ZV.js";
-import "../__chunks/O6CV6VRM.js";
-import "../__chunks/P4RGQGTG.js";
-import "../__chunks/MYID4V27.js";
+} from "../__chunks/TQ2YQL6O.js";
+import "../__chunks/7AFOF5E7.js";
+import "../__chunks/QPWEKAWF.js";
+import "../__chunks/LND6SMHN.js";
+import {
+  useHovercardProviderContext
+} from "../__chunks/5DA3HK6G.js";
+import "../__chunks/547DFODS.js";
+import "../__chunks/5YYGDU4E.js";
+import "../__chunks/56KWVYDN.js";
+import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   useVisuallyHidden
-} from "../__chunks/FL2AU7YJ.js";
+} from "../__chunks/6XXSNRNX.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "../__chunks/NQJBHION.js";
+} from "../__chunks/CFEUKV6C.js";
 import {
   useEvent,
   useMergeRefs
@@ -29,16 +35,25 @@ import {
 import { useEffect, useState } from "react";
 import { contains } from "@ariakit/core/utils/dom";
 import { addGlobalEventListener } from "@ariakit/core/utils/events";
+import { invariant } from "@ariakit/core/utils/misc";
 import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
 var useHovercardDisclosure = createHook(
   (_a) => {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+    const context = useHovercardProviderContext();
+    store = store || context;
+    invariant(
+      store,
+      process.env.NODE_ENV !== "production" && "HovercardDisclosure must receive a `store` prop or be wrapped in a HovercardProvider component."
+    );
     const [visible, setVisible] = useState(false);
     useEffect(() => {
       if (!visible)
         return;
       const onBlur = (event) => {
+        if (!store)
+          return;
         const nextActiveElement = event.relatedTarget;
         if (nextActiveElement) {
           const {
@@ -78,7 +93,7 @@ var useHovercardDisclosure = createHook(
       onClickProp == null ? void 0 : onClickProp(event);
       if (event.defaultPrevented)
         return;
-      store.setAutoFocusOnShow(true);
+      store == null ? void 0 : store.setAutoFocusOnShow(true);
     });
     const onFocusProp = props.onFocus;
     const onFocus = useEvent((event) => {