@ariakit/react-core 0.3.3 → 0.3.5

package/cjs/utils/system.d.cts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import type { Store } from "./store.js";
+import type { Component, HTMLProps, Hook, Options, Props } from "./types.js";
+/**
+ * The same as `React.forwardRef` but passes the `ref` as a prop and returns a
+ * component with the same generic type.
+ */
+export declare function forwardRef<T extends React.FC>(render: T): T;
+/**
+ * The same as `React.memo` but returns a component with the same generic type.
+ */
+export declare function memo<P, T extends React.FC<P>>(Component: T, propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean): T;
+/**
+ * Creates a type-safe component with the `as` prop and `React.forwardRef`.
+ *
+ * @example
+ * import { createComponent } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = {
+ *   as?: "div";
+ *   customProp?: boolean;
+ * };
+ *
+ * const Component = createComponent<Props>(({ customProp, ...props }) => {
+ *   return <div {...props} />;
+ * });
+ *
+ * <Component customProp render={<button />} />
+ */
+export declare function createComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement | null): Component<O>;
+/**
+ * Creates a type-safe component with the `as` prop, `React.forwardRef` and
+ * `React.memo`.
+ *
+ * @example
+ * import { createMemoComponent } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = {
+ *   as?: "div";
+ *   customProp?: boolean;
+ * };
+ *
+ * const Component = createMemoComponent<Props>(({ customProp, ...props }) => {
+ *   return <div {...props} />;
+ * });
+ *
+ * <Component customProp render={<button />} />
+ */
+export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement | null): Component<O>;
+/**
+ * Creates a React element that supports the `render` and `wrapElement` props.
+ * @example
+ * import { createElement } from "@ariakit/react-core/utils/system";
+ *
+ * function Component() {
+ *   const props = {
+ *     render: (htmlProps) => <button {...htmlProps} />,
+ *     wrapElement: (element) => <div>{element}</div>,
+ *   };
+ *   return createElement("div", props);
+ * }
+ */
+export declare function createElement(Type: React.ElementType, props: HTMLProps<Options>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+/**
+ * Creates a component hook that accepts props and returns props so they can be
+ * passed to a React element.
+ *
+ * @example
+ * import { Options, createHook } from "@ariakit/react-core/utils/system";
+ *
+ * type Props = Options<"div"> & {
+ *   customProp?: boolean;
+ * };
+ *
+ * const useComponent = createHook<Props>(({ customProp, ...props }) => {
+ *   return props;
+ * });
+ *
+ * const props = useComponent({ as: "button", customProp: true });
+ */
+export declare function createHook<O extends Options>(useProps: (props: Props<O>) => HTMLProps<O>): Hook<O>;
+type StoreProvider<T extends Store> = React.ComponentType<{
+    value: T | undefined;
+    children?: React.ReactNode;
+}>;
+/**
+ * Creates an Ariakit store context with hooks and provider components.
+ */
+export declare function createStoreContext<T extends Store>(providers?: StoreProvider<T>[], scopedProviders?: StoreProvider<T>[]): {
+    context: React.Context<T | undefined>;
+    scopedContext: React.Context<T | undefined>;
+    useContext: () => T | undefined;
+    useScopedContext: (onlyScoped?: boolean) => T | undefined;
+    useProviderContext: () => T | undefined;
+    ContextProvider: (props: React.ProviderProps<T | undefined>) => import("react/jsx-runtime").JSX.Element;
+    ScopedContextProvider: (props: React.ProviderProps<T | undefined>) => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/cjs/utils/system.d.ts

@@ -27,7 +27,7 @@ export declare function memo<P, T extends React.FC<P>>(Component: T, propsAreEqu
  *
  * <Component customProp render={<button />} />
  */
-export declare function createComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement): Component<O>;
+export declare function createComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement | null): Component<O>;
 /**
  * Creates a type-safe component with the `as` prop, `React.forwardRef` and
  * `React.memo`.
@@ -46,7 +46,7 @@ export declare function createComponent<O extends Options>(render: (props: Props
  *
  * <Component customProp render={<button />} />
  */
-export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement): Component<O>;
+export declare function createMemoComponent<O extends Options>(render: (props: Props<O>) => React.ReactElement | null): Component<O>;
 /**
  * Creates a React element that supports the `render` and `wrapElement` props.
  * @example

package/cjs/utils/types.cjs

@@ -1 +1 @@
-"use strict";
+"use strict";"use client";

package/cjs/utils/types.d.cts

@@ -0,0 +1,79 @@
+import type * as React from "react";
+/**
+ * Render prop type.
+ * @template P Props
+ * @example
+ * const children: RenderProp = (props) => <div {...props} />;
+ */
+export type RenderProp<P = React.HTMLAttributes<any> & React.RefAttributes<any>> = (props: P) => React.ReactNode;
+/**
+ * The `as` prop.
+ * @template P Props
+ */
+export type As<P = any> = React.ElementType<P>;
+/**
+ * The `wrapElement` prop.
+ */
+export type WrapElement = (element: React.ReactElement) => React.ReactElement;
+/**
+ * The `children` prop that supports a function.
+ * @template T Element type.
+ */
+export type Children<T = any> = React.ReactNode | RenderProp<React.HTMLAttributes<T> & React.RefAttributes<T>>;
+/**
+ * Props with the `as` prop.
+ * @template T The `as` prop
+ * @example
+ * type ButtonOptions = Options<"button">;
+ */
+export type Options<T extends As = any> = {
+    /**
+     * @deprecated Use the [`render`](https://ariakit.org/guide/composition) prop
+     * instead.
+     */
+    as?: T;
+};
+/**
+ * Props that automatically includes HTML props based on the `as` prop.
+ * @template O Options
+ * @example
+ * type ButtonHTMLProps = HTMLProps<Options<"button">>;
+ */
+export type HTMLProps<O extends Options> = {
+    wrapElement?: WrapElement;
+    children?: Children;
+    render?: RenderProp | React.ReactElement;
+    [index: `data-${string}`]: unknown;
+} & Omit<React.ComponentPropsWithRef<NonNullable<O["as"]>>, keyof O | "children">;
+/**
+ * Options & HTMLProps
+ * @template O Options
+ * @example
+ * type ButtonProps = Props<Options<"button">>;
+ */
+export type Props<O extends Options> = O & HTMLProps<O>;
+/**
+ * A component that supports the `as` prop and the `children` prop as a
+ * function.
+ * @template O Options
+ * @example
+ * type ButtonComponent = Component<Options<"button">>;
+ */
+export interface Component<O extends Options> {
+    <T extends As>(props: Props<{
+        as: T;
+    } & Omit<O, "as">>): React.ReactElement | null;
+    (props: Props<O>): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * A component hook that supports the `as` prop and the `children` prop as a
+ * function.
+ * @template O Options
+ * @example
+ * type ButtonHook = Hook<Options<"button">>;
+ */
+export interface Hook<O extends Options> {
+    <T extends As = NonNullable<O["as"]>>(props?: Props<Options<T> & Omit<O, "as">>): HTMLProps<Options<T>>;
+    displayName?: string;
+}

package/cjs/visually-hidden/visually-hidden.cjs

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _KSFAO77Ecjs = require('../__chunks/KSFAO77E.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _QCAPQDE7cjs = require('../__chunks/QCAPQDE7.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
-exports.VisuallyHidden = _KSFAO77Ecjs.VisuallyHidden; exports.useVisuallyHidden = _KSFAO77Ecjs.useVisuallyHidden;
+
+exports.VisuallyHidden = _QCAPQDE7cjs.VisuallyHidden; exports.useVisuallyHidden = _QCAPQDE7cjs.useVisuallyHidden;

package/cjs/visually-hidden/visually-hidden.d.cts

@@ -0,0 +1,29 @@
+import type { As, Options, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `VisuallyHidden` component. When applying the props
+ * returned by this hook to a component, the component will be visually hidden,
+ * but still accessible to screen readers.
+ * @see https://ariakit.org/components/visually-hidden
+ * @example
+ * ```jsx
+ * const props = useVisuallyHidden();
+ * <a href="#">
+ *   Learn more<Role {...props}> about the Solar System</Role>.
+ * </a>
+ * ```
+ */
+export declare const useVisuallyHidden: import("../utils/types.js").Hook<VisuallyHiddenOptions<"span">>;
+/**
+ * Renders an element that's visually hidden, but still accessible to screen
+ * readers.
+ * @see https://ariakit.org/components/visually-hidden
+ * @example
+ * ```jsx
+ * <a href="#">
+ *   Learn more<VisuallyHidden> about the Solar System</VisuallyHidden>.
+ * </a>
+ * ```
+ */
+export declare const VisuallyHidden: import("../utils/types.js").Component<VisuallyHiddenOptions<"span">>;
+export type VisuallyHiddenOptions<T extends As = "span"> = Options<T>;
+export type VisuallyHiddenProps<T extends As = "span"> = Props<VisuallyHiddenOptions<T>>;

package/esm/__chunks/{4LP74VAP.js → 2ID5JPOO.js}

@@ -1,45 +1,22 @@
+"use client";
 import {
   useEvent,
   useLiveRef,
   useSafeLayoutEffect
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/utils/store.tsx
 import * as React from "react";
 import { hasOwnProperty, identity } from "@ariakit/core/utils/misc";
 import { init, subscribe, sync } from "@ariakit/core/utils/store";
-import { flushSync } from "react-dom";
 import useSyncExternalStoreExports from "use-sync-external-store/shim/index.js";
 var { useSyncExternalStore } = useSyncExternalStoreExports;
 var noopSubscribe = () => () => {
 };
-var inFlushSyncContext = false;
-function safeFlushSync(fn, canFlushSync = true) {
-  if (inFlushSyncContext || !canFlushSync) {
-    fn();
-    return;
-  }
-  inFlushSyncContext = true;
-  const originalError = console.error;
-  if (process.env.NODE_ENV !== "production") {
-    console.error = (...data) => {
-      if (typeof data[0] === "string" && data[0].startsWith("Warning: flushSync")) {
-        return;
-      }
-      originalError(...data);
-    };
-  }
-  try {
-    flushSync(fn);
-  } finally {
-    console.error = originalError;
-    inFlushSyncContext = false;
-  }
-}
 function useStoreState(store, keyOrSelector = identity) {
   const storeSubscribe = React.useCallback(
     (callback) => {
@@ -71,10 +48,6 @@ function useStoreProps(store, props, key, setKey) {
   const propsRef = useLiveRef({ value, setValue });
   const canSyncValue = React.useRef(true);
   useSafeLayoutEffect(() => {
-    let canFlushSync = false;
-    queueMicrotask(() => {
-      canFlushSync = true;
-    });
     return sync(store, [key], (state, prev) => {
       const { value: value2, setValue: setValue2 } = propsRef.current;
       if (!setValue2)
@@ -83,13 +56,8 @@ function useStoreProps(store, props, key, setKey) {
         return;
       if (state[key] === value2)
         return;
-      if (!canFlushSync) {
-        canSyncValue.current = false;
-        queueMicrotask(() => {
-          canSyncValue.current = true;
-        });
-      }
-      safeFlushSync(() => setValue2(state[key]), canFlushSync);
+      canSyncValue.current = false;
+      setValue2(state[key]);
     });
   }, [store, key]);
   useSafeLayoutEffect(() => {
@@ -97,11 +65,13 @@ function useStoreProps(store, props, key, setKey) {
       return;
     canSyncValue.current = true;
     return sync(store, [key], () => {
+      if (value === void 0)
+        return;
       if (!canSyncValue.current)
         return;
       store.setState(key, value);
     });
-  }, [store, key, value]);
+  });
 }
 function useStore(createStore, props) {
   const [store, setStore] = React.useState(() => createStore(props));

package/esm/__chunks/{4LQJSTB3.js → 2IYBCQM2.js}

@@ -1,26 +1,27 @@
+"use client";
 import {
   selectTextField
-} from "./OXPV2NBK.js";
+} from "./6QXBPV75.js";
 import {
   useCompositeContext
-} from "./5C7J4IAS.js";
+} from "./X3ATWMYX.js";
 import {
   createElement,
   createHook,
   createMemoComponent
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   useStoreState
-} from "./4LP74VAP.js";
+} from "./2ID5JPOO.js";
 import {
   useEvent,
   useMergeRefs
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/composite/composite-container.ts
 import { useEffect, useRef } from "react";

package/esm/__chunks/{5QIDAYL3.js → 2J2XF6WW.js}

@@ -1,18 +1,19 @@
+"use client";
 import {
   usePopoverDismiss
-} from "./T5VBGHBO.js";
+} from "./LAO6LEBC.js";
 import {
   useHovercardScopedContext
-} from "./5DA3HK6G.js";
+} from "./B4BLW6E7.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   __objRest,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/hovercard/hovercard-dismiss.ts
 var useHovercardDismiss = createHook(

package/esm/__chunks/{PNRLI7OV.js → 2SMRF6AD.js}

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;

package/esm/__chunks/{FK7TLQA3.js → 2UMXWJJP.js}

@@ -1,19 +1,20 @@
+"use client";
 import {
   HeadingContext
-} from "./COQHFAEN.js";
+} from "./XPF5GU3Q.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   useMergeRefs,
   useTagName
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/heading/heading.tsx
 import { useContext, useMemo, useRef } from "react";

package/esm/__chunks/{PTJJY26M.js → 2VASUNFX.js}

@@ -1,19 +1,20 @@
+"use client";
 import {
   DialogDescriptionContext
-} from "./5YYGDU4E.js";
+} from "./SNQAYGW2.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   useId,
   useSafeLayoutEffect
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 import {
   __objRest,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/dialog/dialog-description.ts
 import { useContext } from "react";

package/esm/__chunks/{NQQVRTV2.js → 37XXBWT2.js}

@@ -1,25 +1,26 @@
+"use client";
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./2EIZAZYB.js";
+} from "./OKQLSXJX.js";
 import {
   useCompositeContext
-} from "./5C7J4IAS.js";
+} from "./X3ATWMYX.js";
 import {
   createElement,
   forwardRef
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   useStoreState
-} from "./4LP74VAP.js";
+} from "./2ID5JPOO.js";
 import {
   useId
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/composite/composite-renderer.tsx
 import { useMemo } from "react";
@@ -105,7 +106,7 @@ function useCompositeRenderer(_a) {
     var _a2;
     if (!state)
       return props.items;
-    if ("mounted" in state && state.mounted)
+    if ("mounted" in state && !state.mounted)
       return 0;
     return (_a2 = props.items) != null ? _a2 : state.items;
   });

package/esm/__chunks/{MHJWVBOP.js → 3AAZQSAV.js}

@@ -1,14 +1,15 @@
+"use client";
 import {
   useGroup
-} from "./JCUV76PT.js";
+} from "./ULCTMK2H.js";
 import {
   createComponent,
   createElement,
   createHook
-} from "./CFEUKV6C.js";
+} from "./LFJDOMBA.js";
 import {
   __objRest
-} from "./PNRLI7OV.js";
+} from "./2SMRF6AD.js";
 
 // src/form/form-group.ts
 var useFormGroup = createHook(

package/esm/__chunks/{CJI67A3R.js → 3I4EOZD7.js}

@@ -1,6 +1,7 @@
+"use client";
 import {
   useForceUpdate
-} from "./J7Q2EO23.js";
+} from "./6WEF4WY5.js";
 
 // src/dialog/utils/use-root-dialog.ts
 import { useCallback, useEffect } from "react";

package/esm/__chunks/{F5VAC7MB.js → 3X3MDQGM.js}

@@ -1,3 +1,5 @@
+"use client";
+
 // src/group/group-label-context.ts
 import { createContext } from "react";
 var GroupLabelContext = createContext(void 0);