@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/utils/types.d.cts

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
 /**
  * Render prop type.
  * @template P Props
@@ -6,74 +7,50 @@ import type * as React from "react";
  * 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.
+ * Custom props including the `render` prop.
  */
-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> = {
+export interface Options {
+    wrapElement?: WrapElement;
     /**
-     * @deprecated
-     * Use the [`render`](https://ariakit.org/guide/composition) prop instead.
+     * Allows the component to be rendered as a different HTML element or React
+     * component. The value can be a React element or a function that takes in the
+     * original component props and gives back a React element with the props
+     * merged.
+     *
+     * Check out the [Composition](https://ariakit.org/guide/composition) guide
+     * for more details.
      */
-    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
+ * HTML props based on the element type, excluding custom props.
+ * @template T The element type.
+ * @template P Custom props.
  * @example
- * type ButtonProps = Props<Options<"button">>;
+ * type ButtonHTMLProps = HTMLProps<"button", { custom?: boolean }>;
  */
-export type Props<O extends Options> = O & HTMLProps<O>;
+export type HTMLProps<T extends React.ElementType, P extends AnyObject = EmptyObject> = Omit<React.ComponentPropsWithRef<T>, keyof P> & {
+    [index: `data-${string}`]: unknown;
+};
 /**
- * A component that supports the `as` prop and the `children` prop as a
- * function.
- * @template O Options
- * @example
- * type ButtonComponent = Component<Options<"button">>;
+ * Props based on the element type, including custom props.
+ * @template T The element type.
+ * @template P Custom props.
  */
-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;
-}
+export type Props<T extends React.ElementType, P extends AnyObject = EmptyObject> = P & HTMLProps<T, P>;
 /**
- * A component hook that supports the `as` prop and the `children` prop as a
- * function.
- * @template O Options
+ * A component hook that supports the `render` prop and returns HTML props based
+ * on the element type.
+ * @template T The element type.
+ * @template P Custom props.
  * @example
- * type ButtonHook = Hook<Options<"button">>;
+ * type UseButton = Hook<"button", { custom?: boolean }>;
  */
-export interface Hook<O extends Options> {
-    <T extends As = NonNullable<O["as"]>>(props?: Props<Options<T> & Omit<O, "as">>): HTMLProps<Options<T>>;
-    displayName?: string;
+export interface Hook<T extends React.ElementType, P extends AnyObject = EmptyObject> {
+    <ElementType extends React.ElementType = T>(props?: Props<ElementType, P>): HTMLProps<ElementType, P>;
 }

package/cjs/utils/types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
 /**
  * Render prop type.
  * @template P Props
@@ -6,74 +7,50 @@ import type * as React from "react";
  * 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.
+ * Custom props including the `render` prop.
  */
-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> = {
+export interface Options {
+    wrapElement?: WrapElement;
     /**
-     * @deprecated
-     * Use the [`render`](https://ariakit.org/guide/composition) prop instead.
+     * Allows the component to be rendered as a different HTML element or React
+     * component. The value can be a React element or a function that takes in the
+     * original component props and gives back a React element with the props
+     * merged.
+     *
+     * Check out the [Composition](https://ariakit.org/guide/composition) guide
+     * for more details.
      */
-    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
+ * HTML props based on the element type, excluding custom props.
+ * @template T The element type.
+ * @template P Custom props.
  * @example
- * type ButtonProps = Props<Options<"button">>;
+ * type ButtonHTMLProps = HTMLProps<"button", { custom?: boolean }>;
  */
-export type Props<O extends Options> = O & HTMLProps<O>;
+export type HTMLProps<T extends React.ElementType, P extends AnyObject = EmptyObject> = Omit<React.ComponentPropsWithRef<T>, keyof P> & {
+    [index: `data-${string}`]: unknown;
+};
 /**
- * A component that supports the `as` prop and the `children` prop as a
- * function.
- * @template O Options
- * @example
- * type ButtonComponent = Component<Options<"button">>;
+ * Props based on the element type, including custom props.
+ * @template T The element type.
+ * @template P Custom props.
  */
-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;
-}
+export type Props<T extends React.ElementType, P extends AnyObject = EmptyObject> = P & HTMLProps<T, P>;
 /**
- * A component hook that supports the `as` prop and the `children` prop as a
- * function.
- * @template O Options
+ * A component hook that supports the `render` prop and returns HTML props based
+ * on the element type.
+ * @template T The element type.
+ * @template P Custom props.
  * @example
- * type ButtonHook = Hook<Options<"button">>;
+ * type UseButton = Hook<"button", { custom?: boolean }>;
  */
-export interface Hook<O extends Options> {
-    <T extends As = NonNullable<O["as"]>>(props?: Props<Options<T> & Omit<O, "as">>): HTMLProps<Options<T>>;
-    displayName?: string;
+export interface Hook<T extends React.ElementType, P extends AnyObject = EmptyObject> {
+    <ElementType extends React.ElementType = T>(props?: Props<ElementType, P>): HTMLProps<ElementType, P>;
 }

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

@@ -2,12 +2,12 @@
 
 
 
-var _R66IWXK6cjs = require('../__chunks/R66IWXK6.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _HQKST6ZJcjs = require('../__chunks/HQKST6ZJ.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.VisuallyHidden = _R66IWXK6cjs.VisuallyHidden; exports.useVisuallyHidden = _R66IWXK6cjs.useVisuallyHidden;
+exports.VisuallyHidden = _HQKST6ZJcjs.VisuallyHidden; exports.useVisuallyHidden = _HQKST6ZJcjs.useVisuallyHidden;

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

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `VisuallyHidden` component. When applying the props
  * returned by this hook to a component, the component will be visually hidden,
@@ -12,7 +15,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * </a>
  * ```
  */
-export declare const useVisuallyHidden: import("../utils/types.js").Hook<VisuallyHiddenOptions<"span">>;
+export declare const useVisuallyHidden: import("../utils/types.js").Hook<"span", VisuallyHiddenOptions<"span">>;
 /**
  * Renders an element that's visually hidden, but still accessible to screen
  * readers.
@@ -24,6 +27,8 @@ export declare const useVisuallyHidden: import("../utils/types.js").Hook<Visuall
  * </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>>;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface VisuallyHiddenOptions<_T extends ElementType = TagName> extends Options {
+}
+export type VisuallyHiddenProps<T extends ElementType = TagName> = Props<T, VisuallyHiddenOptions<T>>;
+export {};

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

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `VisuallyHidden` component. When applying the props
  * returned by this hook to a component, the component will be visually hidden,
@@ -12,7 +15,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * </a>
  * ```
  */
-export declare const useVisuallyHidden: import("../utils/types.js").Hook<VisuallyHiddenOptions<"span">>;
+export declare const useVisuallyHidden: import("../utils/types.js").Hook<"span", VisuallyHiddenOptions<"span">>;
 /**
  * Renders an element that's visually hidden, but still accessible to screen
  * readers.
@@ -24,6 +27,8 @@ export declare const useVisuallyHidden: import("../utils/types.js").Hook<Visuall
  * </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>>;
+export declare const VisuallyHidden: (props: VisuallyHiddenProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface VisuallyHiddenOptions<_T extends ElementType = TagName> extends Options {
+}
+export type VisuallyHiddenProps<T extends ElementType = TagName> = Props<T, VisuallyHiddenOptions<T>>;
+export {};

package/esm/__chunks/{BNUFNEVY.js → 2O7COXT7.js}

@@ -2,12 +2,12 @@
 import {
   CompositeRowContext,
   useCompositeContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useId,
   useWrapElement
@@ -19,10 +19,11 @@ import {
 
 // src/composite/composite-row.tsx
 import { useMemo } from "react";
-import { invariant } from "@ariakit/core/utils/misc";
+import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 var useCompositeRow = createHook(
-  (_a) => {
+  function useCompositeRow2(_a) {
     var _b = _a, {
       store,
       "aria-setsize": ariaSetSize,
@@ -52,16 +53,13 @@ var useCompositeRow = createHook(
       [providerValue]
     );
     props = __spreadValues({ id }, props);
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var CompositeRow = createComponent((props) => {
+var CompositeRow = forwardRef(function CompositeRow2(props) {
   const htmlProps = useCompositeRow(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  CompositeRow.displayName = "CompositeRow";
-}
 
 export {
   useCompositeRow,

package/esm/__chunks/{SOK7T35T.js → 2OCM6QMR.js}

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

package/esm/__chunks/{4B73HROV.js → 32VQXIYR.js}

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

package/esm/__chunks/{IB7YUKH5.js → 3D6OCOHF.js}

@@ -2,10 +2,10 @@
 import {
   CollectionContextProvider,
   CollectionScopedContextProvider
-} from "./4UUKJZ4V.js";
+} from "./MADQZZRL.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/composite/composite-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{MNFF5YOJ.js → 3OMHZVJD.js}

@@ -2,10 +2,10 @@
 import {
   HovercardContextProvider,
   HovercardScopedContextProvider
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/tooltip/tooltip-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/{3AHQ6JCP.js → 3PDOEITM.js}

@@ -1,18 +1,18 @@
 "use client";
 import {
   useCheckboxContext
-} from "./VPR2WHQV.js";
+} from "./EUN6HFWO.js";
 import {
   CheckboxCheckedContext
 } from "./6XBVQI3K.js";
 import {
   useCommand
-} from "./NWCBQ4CV.js";
+} from "./ZF6ZK5BT.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -31,8 +31,12 @@ import {
 
 // src/checkbox/checkbox.tsx
 import { useEffect, useRef, useState } from "react";
-import { disabledFromProps } from "@ariakit/core/utils/misc";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "input";
 function setMixed(element, mixed) {
   if (mixed) {
     element.indeterminate = true;
@@ -50,7 +54,7 @@ function getPrimitiveValue(value) {
   return value;
 }
 var useCheckbox = createHook(
-  (_a) => {
+  function useCheckbox2(_a) {
     var _b = _a, {
       store,
       name,
@@ -86,7 +90,7 @@ var useCheckbox = createHook(
       return false;
     });
     const ref = useRef(null);
-    const tagName = useTagName(ref, props.as || "input");
+    const tagName = useTagName(ref, TagName);
     const nativeCheckbox = isNativeCheckbox(tagName, props.type);
     const mixed = checked ? checked === "mixed" : void 0;
     const isChecked = checked === "mixed" ? false : checked;
@@ -164,20 +168,17 @@ var useCheckbox = createHook(
       onClick
     });
     props = useCommand(__spreadValues({ clickOnEnter: !nativeCheckbox }, props));
-    return __spreadValues({
+    return removeUndefinedValues(__spreadValues({
       name: nativeCheckbox ? name : void 0,
       value: nativeCheckbox ? valueProp : void 0,
       checked: isChecked
-    }, props);
+    }, props));
   }
 );
-var Checkbox = createComponent((props) => {
+var Checkbox = forwardRef(function Checkbox2(props) {
   const htmlProps = useCheckbox(props);
-  return createElement("input", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Checkbox.displayName = "Checkbox";
-}
 
 export {
   useCheckbox,

package/esm/__chunks/{3ORBWXWF.js → 5M6RSQEC.js}

@@ -14,63 +14,24 @@ import {
 
 // src/utils/system.tsx
 import * as React from "react";
-import { hasOwnProperty } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
-function isRenderProp(children) {
-  return typeof children === "function";
-}
 function forwardRef2(render) {
   const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref })));
   Role.displayName = render.displayName || render.name;
   return Role;
 }
 function memo2(Component, propsAreEqual) {
-  const Role = React.memo(Component, propsAreEqual);
-  Role.displayName = Component.displayName || Component.name;
-  return Role;
-}
-function createComponent(render) {
-  const Role = (props, ref) => render(__spreadValues({ ref }, props));
-  return React.forwardRef(Role);
-}
-function createMemoComponent(render) {
-  const Role = createComponent(render);
-  return React.memo(Role);
+  return React.memo(Component, propsAreEqual);
 }
 function createElement(Type, props) {
-  const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]);
-  let element;
+  const _a = props, { wrapElement, render } = _a, rest = __objRest(_a, ["wrapElement", "render"]);
   const mergedRef = useMergeRefs(props.ref, getRefProperty(render));
-  if (process.env.NODE_ENV !== "production") {
-    React.useEffect(() => {
-      if (!As)
-        return;
-      console.warn(
-        "The `as` prop is deprecated. Use the `render` prop instead.",
-        "See https://ariakit.org/guide/composition"
-      );
-    }, [As]);
-  }
-  if (As && typeof As !== "string") {
-    element = /* @__PURE__ */ jsx(As, __spreadProps(__spreadValues({}, rest), { render }));
-  } else if (React.isValidElement(render)) {
+  let element;
+  if (React.isValidElement(render)) {
     const renderProps = __spreadProps(__spreadValues({}, render.props), { ref: mergedRef });
     element = React.cloneElement(render, mergeProps(rest, renderProps));
   } else if (render) {
     element = render(rest);
-  } else if (isRenderProp(props.children)) {
-    if (process.env.NODE_ENV !== "production") {
-      React.useEffect(() => {
-        console.warn(
-          "The `children` prop as a function is deprecated. Use the `render` prop instead.",
-          "See https://ariakit.org/guide/composition"
-        );
-      }, []);
-    }
-    const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]);
-    element = props.children(otherProps);
-  } else if (As) {
-    element = /* @__PURE__ */ jsx(As, __spreadValues({}, rest));
   } else {
     element = /* @__PURE__ */ jsx(Type, __spreadValues({}, rest));
   }
@@ -81,15 +42,9 @@ function createElement(Type, props) {
 }
 function createHook(useProps) {
   const useRole = (props = {}) => {
-    const htmlProps = useProps(props);
-    const copy = {};
-    for (const prop in htmlProps) {
-      if (hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) {
-        copy[prop] = htmlProps[prop];
-      }
-    }
-    return copy;
+    return useProps(props);
   };
+  useRole.displayName = useProps.name;
   return useRole;
 }
 function createStoreContext(providers = [], scopedProviders = []) {
@@ -136,8 +91,6 @@ function createStoreContext(providers = [], scopedProviders = []) {
 export {
   forwardRef2 as forwardRef,
   memo2 as memo,
-  createComponent,
-  createMemoComponent,
   createElement,
   createHook,
   createStoreContext

package/esm/__chunks/{NUNVG4IK.js → 6PC3IJNK.js}

@@ -1,23 +1,24 @@
 "use client";
 import {
   usePopoverDisclosureArrow
-} from "./JHO32H4J.js";
+} from "./HA4U57LH.js";
 import {
   useSelectContext
-} from "./5HVNGX6D.js";
+} from "./TKSBJDO3.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/select/select-arrow.ts
+var TagName = "span";
 var useSelectArrow = createHook(
-  (_a) => {
+  function useSelectArrow2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useSelectContext();
     store = store || context;
@@ -25,13 +26,10 @@ var useSelectArrow = createHook(
     return props;
   }
 );
-var SelectArrow = createComponent((props) => {
+var SelectArrow = forwardRef(function SelectArrow2(props) {
   const htmlProps = useSelectArrow(props);
-  return createElement("span", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  SelectArrow.displayName = "SelectArrow";
-}
 
 export {
   useSelectArrow,