@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/WKBVQ2CE.js

@@ -0,0 +1,170 @@
+"use client";
+import {
+  useRadioContext
+} from "./ZVFJIYOE.js";
+import {
+  useCompositeItem
+} from "./VVLSOSIG.js";
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
+import {
+  useStoreState
+} from "./EKQEJRUF.js";
+import {
+  useEvent,
+  useForceUpdate,
+  useId,
+  useMergeRefs,
+  useTagName
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/radio/radio.ts
+import { useEffect, useRef } from "react";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
+var TagName = "input";
+function getIsChecked(value, storeValue) {
+  if (storeValue === void 0)
+    return;
+  if (value != null && storeValue != null) {
+    return storeValue === value;
+  }
+  return !!storeValue;
+}
+function isNativeRadio(tagName, type) {
+  return tagName === "input" && (!type || type === "radio");
+}
+var useRadio = createHook(function useRadio2(_a) {
+  var _b = _a, {
+    store,
+    name,
+    value,
+    checked
+  } = _b, props = __objRest(_b, [
+    "store",
+    "name",
+    "value",
+    "checked"
+  ]);
+  const context = useRadioContext();
+  store = store || context;
+  const id = useId(props.id);
+  const ref = useRef(null);
+  const isChecked = useStoreState(
+    store,
+    (state) => checked != null ? checked : getIsChecked(value, state == null ? void 0 : state.value)
+  );
+  useEffect(() => {
+    if (!id)
+      return;
+    if (!isChecked)
+      return;
+    const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id;
+    if (isActiveItem)
+      return;
+    store == null ? void 0 : store.setActiveId(id);
+  }, [store, isChecked, id]);
+  const onChangeProp = props.onChange;
+  const tagName = useTagName(ref, TagName);
+  const nativeRadio = isNativeRadio(tagName, props.type);
+  const disabled = disabledFromProps(props);
+  const [propertyUpdated, schedulePropertyUpdate] = useForceUpdate();
+  useEffect(() => {
+    const element = ref.current;
+    if (!element)
+      return;
+    if (nativeRadio)
+      return;
+    if (isChecked !== void 0) {
+      element.checked = isChecked;
+    }
+    if (name !== void 0) {
+      element.name = name;
+    }
+    if (value !== void 0) {
+      element.value = `${value}`;
+    }
+  }, [propertyUpdated, nativeRadio, isChecked, name, value]);
+  const onChange = useEvent((event) => {
+    if (disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (!nativeRadio) {
+      event.currentTarget.checked = true;
+      schedulePropertyUpdate();
+    }
+    onChangeProp == null ? void 0 : onChangeProp(event);
+    if (event.defaultPrevented)
+      return;
+    store == null ? void 0 : store.setValue(value);
+  });
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    onClickProp == null ? void 0 : onClickProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (nativeRadio)
+      return;
+    onChange(event);
+  });
+  const onFocusProp = props.onFocus;
+  const onFocus = useEvent((event) => {
+    onFocusProp == null ? void 0 : onFocusProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!nativeRadio)
+      return;
+    if (!store)
+      return;
+    const { moves, activeId } = store.getState();
+    if (!moves)
+      return;
+    if (id && activeId !== id)
+      return;
+    onChange(event);
+  });
+  props = __spreadProps(__spreadValues({
+    id,
+    role: !nativeRadio ? "radio" : void 0,
+    type: nativeRadio ? "radio" : void 0,
+    "aria-checked": isChecked
+  }, props), {
+    ref: useMergeRefs(ref, props.ref),
+    onChange,
+    onClick,
+    onFocus
+  });
+  props = useCompositeItem(__spreadValues({
+    store,
+    clickOnEnter: !nativeRadio
+  }, props));
+  return removeUndefinedValues(__spreadValues({
+    name: nativeRadio ? name : void 0,
+    value: nativeRadio ? value : void 0,
+    checked: isChecked
+  }, props));
+});
+var Radio = memo(
+  forwardRef(function Radio2(props) {
+    const htmlProps = useRadio(props);
+    return createElement(TagName, htmlProps);
+  })
+);
+
+export {
+  useRadio,
+  Radio
+};

package/esm/__chunks/{2QMN5E6B.js → WKII7I2E.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useHovercardStoreProps
-} from "./ZU7LQC5V.js";
+} from "./E5E7G32I.js";
 import {
   useStore,
   useStoreProps
@@ -10,10 +10,9 @@ import {
 // src/tooltip/tooltip-store.ts
 import * as Core from "@ariakit/core/tooltip/tooltip-store";
 function useTooltipStoreProps(store, update, props) {
-  store = useHovercardStoreProps(store, update, props);
   useStoreProps(store, props, "type");
   useStoreProps(store, props, "skipTimeout");
-  return store;
+  return useHovercardStoreProps(store, update, props);
 }
 function useTooltipStore(props = {}) {
   const [store, update] = useStore(Core.createTooltipStore, props);

package/esm/__chunks/WKWX2XLD.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  useVisuallyHidden
+} from "./IFT5JEUU.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/focus-trap/focus-trap.ts
+var TagName = "span";
+var useFocusTrap = createHook(
+  function useFocusTrap2(props) {
+    props = __spreadProps(__spreadValues({
+      "data-focus-trap": "",
+      tabIndex: 0,
+      "aria-hidden": true
+    }, props), {
+      style: __spreadValues({
+        // Prevents unintended scroll jumps.
+        position: "fixed",
+        top: 0,
+        left: 0
+      }, props.style)
+    });
+    props = useVisuallyHidden(props);
+    return props;
+  }
+);
+var FocusTrap = forwardRef(function FocusTrap2(props) {
+  const htmlProps = useFocusTrap(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useFocusTrap,
+  FocusTrap
+};

package/esm/__chunks/{G6ONQ5EH.js → WL6TTPTB.js}

@@ -1,12 +1,13 @@
 "use client";
 import {
   useCompositeContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "./3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -23,7 +24,12 @@ import {
 import { useCallback } from "react";
 import { contains } from "@ariakit/core/utils/dom";
 import { hasFocus, hasFocusWithin } from "@ariakit/core/utils/focus";
-import { hasOwnProperty, invariant } from "@ariakit/core/utils/misc";
+import {
+  hasOwnProperty,
+  invariant,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
+var TagName = "div";
 function getMouseDestination(event) {
   const relatedTarget = event.relatedTarget;
   if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) {
@@ -50,7 +56,7 @@ function movingToAnotherItem(event) {
   return false;
 }
 var useCompositeHover = createHook(
-  (_a) => {
+  function useCompositeHover2(_a) {
     var _b = _a, {
       store,
       focusOnHover = true,
@@ -115,18 +121,15 @@ var useCompositeHover = createHook(
       onMouseMove,
       onMouseLeave
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CompositeHover = createMemoComponent(
-  (props) => {
+var CompositeHover = memo(
+  forwardRef(function CompositeHover2(props) {
     const htmlProps = useCompositeHover(props);
-    return createElement("div", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  CompositeHover.displayName = "CompositeHover";
-}
 
 export {
   useCompositeHover,

package/esm/__chunks/{QWSZGSIG.js → WWVP4SPG.js}

@@ -6,19 +6,19 @@ import {
 } from "./YMV43K4F.js";
 import {
   usePopover
-} from "./IRX7SFUJ.js";
+} from "./KMWSQ7OZ.js";
 import {
   createDialogComponent
-} from "./NERBASET.js";
+} from "./SSK5L4K7.js";
 import {
   HovercardScopedContextProvider,
   useHovercardProviderContext
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useBooleanEvent,
   useEvent,
@@ -53,6 +53,7 @@ import {
 } from "@ariakit/core/utils/misc";
 import { sync } from "@ariakit/core/utils/store";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function isMovingOnHovercard(target, card, anchor, nested) {
   if (hasFocusWithin(card))
     return true;
@@ -103,7 +104,7 @@ function useAutoFocusOnHide(_a) {
 }
 var NestedHovercardContext = createContext(null);
 var useHovercard = createHook(
-  (_a) => {
+  function useHovercard2(_a) {
     var _b = _a, {
       store,
       modal = false,
@@ -305,15 +306,12 @@ var useHovercard = createHook(
   }
 );
 var Hovercard = createDialogComponent(
-  createComponent((props) => {
+  forwardRef(function Hovercard2(props) {
     const htmlProps = useHovercard(props);
-    return createElement("div", htmlProps);
+    return createElement(TagName, htmlProps);
   }),
   useHovercardProviderContext
 );
-if (process.env.NODE_ENV !== "production") {
-  Hovercard.displayName = "Hovercard";
-}
 
 export {
   useHovercard,

package/esm/__chunks/{MG4P3223.js → XWCFCD3Q.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useDialogStoreProps
-} from "./ZSELSBRM.js";
+} from "./I62TROYO.js";
 import {
   useStore,
   useStoreProps
@@ -14,9 +14,8 @@ import {
 import * as Core from "@ariakit/core/popover/popover-store";
 function usePopoverStoreProps(store, update, props) {
   useUpdateEffect(update, [props.popover]);
-  store = useDialogStoreProps(store, update, props);
   useStoreProps(store, props, "placement");
-  return store;
+  return useDialogStoreProps(store, update, props);
 }
 function usePopoverStore(props = {}) {
   const [store, update] = useStore(Core.createPopoverStore, props);

package/esm/__chunks/{G6BJYYBK.js → XXVAHUAO.js}

@@ -2,10 +2,10 @@
 import {
   DisclosureContextProvider,
   DisclosureScopedContextProvider
-} from "./OAYFXAQ2.js";
+} from "./J55AVALY.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/dialog/dialog-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{RIL2SEAH.js → Y44K72CZ.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   MenubarContextProvider
-} from "./KA4GX64Z.js";
+} from "./VBF5EZBB.js";
 import {
   useMenubarStore
 } from "./HVBNG5AF.js";

package/esm/__chunks/{NWCBQ4CV.js → ZF6ZK5BT.js}

@@ -1,12 +1,12 @@
 "use client";
 import {
   useFocusable
-} from "./KK7H3W2B.js";
+} from "./VA234QKF.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useEvent,
   useMergeRefs,
@@ -29,6 +29,7 @@ import {
 } from "@ariakit/core/utils/events";
 import { disabledFromProps } from "@ariakit/core/utils/misc";
 import { isFirefox } from "@ariakit/core/utils/platform";
+var TagName = "button";
 function isNativeClick(event) {
   if (!event.isTrusted)
     return false;
@@ -43,10 +44,10 @@ function isNativeClick(event) {
 }
 var symbol = Symbol("command");
 var useCommand = createHook(
-  (_a) => {
+  function useCommand2(_a) {
     var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]);
     const ref = useRef(null);
-    const tagName = useTagName(ref, props.as);
+    const tagName = useTagName(ref);
     const type = props.type;
     const [isNativeButton, setIsNativeButton] = useState(
       () => !!tagName && isButton({ tagName, type })
@@ -130,7 +131,7 @@ var useCommand = createHook(
       }
     });
     props = __spreadProps(__spreadValues(__spreadValues({
-      "data-active": active ? "" : void 0,
+      "data-active": active || void 0,
       type: isNativeButton ? "button" : void 0
     }, metadataProps), props), {
       ref: useMergeRefs(ref, props.ref),
@@ -141,13 +142,10 @@ var useCommand = createHook(
     return props;
   }
 );
-var Command = createComponent((props) => {
-  props = useCommand(props);
-  return createElement("button", props);
+var Command = forwardRef(function Command2(props) {
+  const htmlProps = useCommand(props);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Command.displayName = "Command";
-}
 
 export {
   useCommand,

package/esm/__chunks/{636A7WVS.js → ZO6PSJHJ.js}

@@ -1,33 +1,29 @@
 "use client";
 import {
   useGroup
-} from "./R2QZ3KXH.js";
+} from "./CWDOOAGR.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest
 } from "./4R3V3JGP.js";
 
 // src/composite/composite-group.ts
+var TagName = "div";
 var useCompositeGroup = createHook(
-  (_a) => {
+  function useCompositeGroup2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     props = useGroup(props);
     return props;
   }
 );
-var CompositeGroup = createComponent(
-  (props) => {
-    const htmlProps = useCompositeGroup(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  CompositeGroup.displayName = "CompositeGroup";
-}
+var CompositeGroup = forwardRef(function CompositeGroup2(props) {
+  const htmlProps = useCompositeGroup(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useCompositeGroup,

package/esm/__chunks/{XEV62JUQ.js → ZVFJIYOE.js}

@@ -2,10 +2,10 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/radio/radio-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/ZXBIDNZ3.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  useDialogHeading
+} from "./E47ASM2Y.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+
+// src/popover/popover-heading.ts
+var TagName = "h1";
+var usePopoverHeading = createHook(
+  function usePopoverHeading2(props) {
+    props = useDialogHeading(props);
+    return props;
+  }
+);
+var PopoverHeading = forwardRef(function PopoverHeading2(props) {
+  const htmlProps = usePopoverHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  usePopoverHeading,
+  PopoverHeading
+};

package/esm/button/button.d.ts

@@ -1,5 +1,8 @@
+import type { ElementType } from "react";
 import type { CommandOptions } from "../command/command.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Button` component. If the element is not a native
  * button, the hook will return additional props to make sure it's accessible.
@@ -10,7 +13,7 @@ import type { As, Props } from "../utils/types.js";
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"button">>;
+export declare const useButton: import("../utils/types.js").Hook<"button", ButtonOptions<"button">>;
 /**
  * Renders an accessible button element. If the underlying element is not a
  * native button, this component will pass additional attributes to make sure
@@ -21,6 +24,8 @@ export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"
  * <Button>Button</Button>
  * ```
  */
-export declare const Button: import("../utils/types.js").Component<ButtonOptions<"button">>;
-export type ButtonOptions<T extends As = "button"> = CommandOptions<T>;
-export type ButtonProps<T extends As = "button"> = Props<ButtonOptions<T>>;
+export declare const Button: (props: ButtonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ButtonOptions<T extends ElementType = TagName> extends CommandOptions<T> {
+}
+export type ButtonProps<T extends ElementType = TagName> = Props<T, ButtonOptions<T>>;
+export {};

package/esm/button/button.js

@@ -2,11 +2,11 @@
 import {
   Button,
   useButton
-} from "../__chunks/VDNZBO4W.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/KK7H3W2B.js";
+} from "../__chunks/ID4VKXL5.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-check.d.ts

@@ -1,5 +1,8 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
 import type { CheckboxStore } from "./checkbox-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `CheckboxCheck` component, that's usually rendered
  * inside a `Checkbox` component.
@@ -10,7 +13,7 @@ import type { CheckboxStore } from "./checkbox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
+export declare const useCheckboxCheck: import("../utils/types.js").Hook<"span", CheckboxCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
@@ -26,8 +29,8 @@ export declare const useCheckboxCheck: import("../utils/types.js").Hook<Checkbox
  * <CheckboxCheck checked />
  * ```
  */
-export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
-export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
+export declare const CheckboxCheck: (props: CheckboxCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CheckboxCheckOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
@@ -45,4 +48,5 @@ export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T>
      */
     checked?: boolean;
 }
-export type CheckboxCheckProps<T extends As = "span"> = Props<CheckboxCheckOptions<T>>;
+export type CheckboxCheckProps<T extends ElementType = TagName> = Props<T, CheckboxCheckOptions<T>>;
+export {};

package/esm/checkbox/checkbox-check.js

@@ -2,9 +2,9 @@
 import {
   CheckboxCheck,
   useCheckboxCheck
-} from "../__chunks/MW2F7SEA.js";
+} from "../__chunks/BX7FFG2R.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-context.js

@@ -5,8 +5,8 @@ import {
   useCheckboxContext,
   useCheckboxProviderContext,
   useCheckboxScopedContext
-} from "../__chunks/VPR2WHQV.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/EUN6HFWO.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-provider.js

@@ -4,8 +4,8 @@ import {
 } from "../__chunks/JIZ5C2JK.js";
 import {
   CheckboxContextProvider
-} from "../__chunks/VPR2WHQV.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/EUN6HFWO.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";