@ariakit/react-core 0.4.2 → 0.4.4

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

@@ -1,4 +1,5 @@
 import * as Core from "@ariakit/core/tab/tab-store";
+import type { ComboboxStore } from "../combobox/combobox-store.js";
 import type { CompositeStore, CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store } from "../utils/store.js";
 export declare function useTabStoreProps<T extends Core.TabStore>(store: T, update: () => void, props: TabStoreProps): T & {
@@ -11,6 +12,7 @@ export declare function useTabStoreProps<T extends Core.TabStore>(store: T, upda
     };
 } & {
     composite: CompositeStore<import("../composite/composite-store.js").CompositeStoreItem> | null | undefined;
+    combobox: ComboboxStore<import("@ariakit/core/combobox/combobox-store").ComboboxStoreSelectedValue> | null | undefined;
 };
 /**
  * Creates a tab store to control the state of
@@ -33,10 +35,10 @@ export interface TabStoreItem extends Core.TabStoreItem {
 }
 export interface TabStoreState extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {
 }
-export interface TabStoreFunctions extends Pick<TabStoreOptions, "composite">, Omit<Core.TabStoreFunctions, "panels" | "composite">, CompositeStoreFunctions<TabStoreItem> {
+export interface TabStoreFunctions extends Pick<TabStoreOptions, "composite" | "combobox">, Omit<Core.TabStoreFunctions, "panels" | "composite" | "combobox">, CompositeStoreFunctions<TabStoreItem> {
     panels: Store<Core.TabStoreFunctions["panels"]>;
 }
-export interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite">, CompositeStoreOptions<TabStoreItem> {
+export interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite" | "combobox">, CompositeStoreOptions<TabStoreItem> {
     /**
      * Function that will be called when the
      * [`selectedId`](https://ariakit.org/reference/tab-provider#selectedid) state
@@ -48,14 +50,27 @@ export interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite">
     setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
     /**
      * A reference to another [composite
-     * store](https://ariakit.org/reference/use-composite-store). It's
-     * automatically set when rendering tabs within another composite widget like
-     * [Combobox](https://ariakit.org/components/combobox) or
+     * store](https://ariakit.org/reference/use-composite-store). This is
+     * automatically set when rendering tabs as part of another composite widget,
+     * such as [Combobox](https://ariakit.org/components/combobox) or
      * [Select](https://ariakit.org/components/select).
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     composite?: CompositeStore | null;
+    /**
+     * A reference to a [combobox
+     * store](https://ariakit.org/reference/use-combobox-store). This is
+     * automatically set when rendering tabs inside a
+     * [Combobox](https://ariakit.org/components/combobox).
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     */
+    combobox?: ComboboxStore | null;
 }
-export interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite"> {
+export interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite" | "combobox"> {
 }
-export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite"> {
+export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite" | "combobox"> {
 }

package/esm/tab/tab-store.js

@@ -2,11 +2,16 @@
 import {
   useTabStore,
   useTabStoreProps
-} from "../__chunks/DGR3GYOB.js";
+} from "../__chunks/APFOINTZ.js";
+import "../__chunks/N4X7J4OQ.js";
+import "../__chunks/SYZHUNAU.js";
 import "../__chunks/ZR5N62ZV.js";
 import "../__chunks/LGWSZOP2.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/5B3U64HV.js";
+import "../__chunks/IWHI6Y45.js";
+import "../__chunks/RG6J4TID.js";
 import "../__chunks/GUCZNEAD.js";
 import "../__chunks/PWUXK5IM.js";
 import "../__chunks/WOWUAP42.js";

package/esm/tab/tab.js

@@ -2,7 +2,7 @@
 import {
   CompositeItem,
   useCompositeItem
-} from "../__chunks/VGL3CETR.js";
+} from "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import {
@@ -86,14 +86,17 @@ var useTab = createHook(function useTab2(_a) {
     (element) => {
       if (!(store == null ? void 0 : store.composite))
         return element;
+      const defaultProps = {
+        id,
+        store: store.composite,
+        shouldRegisterItem: selected && shouldRegisterItem,
+        render: element
+      };
       return /* @__PURE__ */ jsx(
         CompositeItem,
-        {
-          id,
-          render: element,
-          store: store.composite,
-          shouldRegisterItem: selected && shouldRegisterItem
-        }
+        __spreadProps(__spreadValues({}, defaultProps), {
+          render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ jsx(CompositeItem, __spreadProps(__spreadValues({}, defaultProps), { store: store.combobox })) : element
+        })
       );
     },
     [store, id, selected, shouldRegisterItem]

package/esm/toolbar/toolbar-container.js

@@ -4,8 +4,8 @@ import {
 } from "../__chunks/LQCUPYIB.js";
 import {
   useToolbarItem
-} from "../__chunks/DCFMDHRW.js";
-import "../__chunks/VGL3CETR.js";
+} from "../__chunks/NHVUMSP7.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/toolbar/toolbar-input.d.ts

@@ -1,5 +1,4 @@
 import type { ElementType } from "react";
-import type { CompositeInputOptions } from "../composite/composite-input.js";
 import type { Props } from "../utils/types.js";
 import type { ToolbarItemOptions } from "./toolbar-item.js";
 declare const TagName = "input";
@@ -7,6 +6,7 @@ type TagName = typeof TagName;
 /**
  * Returns props to create a `ToolbarInput` component.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `useToolbarItem` instead.
  * @example
  * ```jsx
  * const store = useToolbarStore();
@@ -21,6 +21,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * Renders a text input as a toolbar item, maintaining arrow key navigation on
  * the toolbar.
  * @see https://ariakit.org/components/toolbar
+ * @deprecated Use `<ToolbarItem render={<input />}>` instead.
  * @example
  * ```jsx {2}
  * <Toolbar>
@@ -29,7 +30,7 @@ export declare const useToolbarInput: import("../utils/types.js").Hook<"input",
  * ```
  */
 export declare const ToolbarInput: (props: ToolbarInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T>, Omit<CompositeInputOptions<T>, "store"> {
+export interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T> {
 }
 export type ToolbarInputProps<T extends ElementType = TagName> = Props<T, ToolbarInputOptions<T>>;
 export {};

package/esm/toolbar/toolbar-input.js

@@ -1,11 +1,8 @@
 "use client";
-import {
-  useCompositeInput
-} from "../__chunks/RPGNBKKU.js";
 import {
   useToolbarItem
-} from "../__chunks/DCFMDHRW.js";
-import "../__chunks/VGL3CETR.js";
+} from "../__chunks/NHVUMSP7.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";
@@ -37,7 +34,6 @@ var useToolbarInput = createHook(
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useToolbarContext();
     store = store || context;
-    props = useCompositeInput(__spreadValues({ store }, props));
     props = useToolbarItem(__spreadValues({ store }, props));
     return props;
   }

package/esm/toolbar/toolbar-item.js

@@ -2,8 +2,8 @@
 import {
   ToolbarItem,
   useToolbarItem
-} from "../__chunks/DCFMDHRW.js";
-import "../__chunks/VGL3CETR.js";
+} from "../__chunks/NHVUMSP7.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/tooltip/tooltip.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   useHovercard
-} from "../__chunks/6VDNHSLX.js";
+} from "../__chunks/XEJ23EM6.js";
 import "../__chunks/YMV43K4F.js";
-import "../__chunks/X3V2DT2U.js";
+import "../__chunks/LTYEFENI.js";
 import {
   createDialogComponent
-} from "../__chunks/NQ4PTILT.js";
+} from "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";

package/esm/utils/misc.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, MutableRefObject, ReactElement, RefAttributes, RefCallback } from "react";
+import type { HTMLAttributes, MutableRefObject, ReactElement, Ref, RefCallback } from "react";
 /**
  * Sets both a function and object React ref.
  */
@@ -6,11 +6,13 @@ export declare function setRef<T>(ref: RefCallback<T> | MutableRefObject<T> | nu
 /**
  * Checks if an element is a valid React element with a ref.
  */
-export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & RefAttributes<any>;
+export declare function isValidElementWithRef<P>(element: unknown): element is ReactElement<P> & {
+    ref?: Ref<any>;
+};
 /**
  * Gets the ref property from a React element.
  */
-export declare function getRefProperty(element: unknown): import("react").Ref<any> | undefined;
+export declare function getRefProperty(element: unknown): Ref<any> | undefined;
 /**
  * Merges two sets of props.
  */

package/esm/utils/types.d.ts

@@ -6,7 +6,9 @@ import type { AnyObject, EmptyObject } from "@ariakit/core/utils/types";
  * @example
  * const children: RenderProp = (props) => <div {...props} />;
  */
-export type RenderProp<P = React.HTMLAttributes<any> & React.RefAttributes<any>> = (props: P) => React.ReactNode;
+export type RenderProp<P = React.HTMLAttributes<any> & {
+    ref?: React.Ref<any>;
+}> = (props: P) => React.ReactNode;
 /**
  * The `wrapElement` prop.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/react-core",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Ariakit React core",
   "sideEffects": false,
   "license": "MIT",
@@ -30,7 +30,7 @@
     "core"
   ],
   "dependencies": {
-    "@ariakit/core": "0.4.2",
+    "@ariakit/core": "0.4.4",
     "@floating-ui/dom": "^1.0.0",
     "use-sync-external-store": "^1.2.0"
   },

package/cjs/__chunks/WGZQRLXV.cjs

@@ -1,84 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-
-
-var _6ZZYUFPWcjs = require('./6ZZYUFPW.cjs');
-
-
-
-
-
-var _NGD3IQDBcjs = require('./NGD3IQDB.cjs');
-
-
-var _TW3SFX4Ccjs = require('./TW3SFX4C.cjs');
-
-
-
-
-var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
-
-// src/composite/composite-input.ts
-
-
-
-
-var _dom = require('@ariakit/core/utils/dom');
-var _misc = require('@ariakit/core/utils/misc');
-var TagName = "input";
-function getValueLength(element) {
-  if (_dom.isTextField.call(void 0, element)) {
-    return element.value.length;
-  } else if (element.isContentEditable) {
-    const range = _dom.getDocument.call(void 0, element).createRange();
-    range.selectNodeContents(element);
-    return range.toString().length;
-  }
-  return 0;
-}
-var useCompositeInput = _NGD3IQDBcjs.createHook.call(void 0, 
-  function useCompositeInput2(_a) {
-    var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const onKeyDownCaptureProp = props.onKeyDownCapture;
-    const onKeyDownCapture = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
-      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
-      if (event.defaultPrevented)
-        return;
-      const element = event.currentTarget;
-      if (!element.isContentEditable && !_dom.isTextField.call(void 0, element))
-        return;
-      const selection = _dom.getTextboxSelection.call(void 0, element);
-      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-        if (selection.end !== getValueLength(element)) {
-          event.stopPropagation();
-        }
-      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-        if (selection.start !== 0) {
-          event.stopPropagation();
-        }
-      }
-    });
-    const onFocusProp = props.onFocus;
-    const onFocus = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
-      onFocusProp == null ? void 0 : onFocusProp(event);
-      if (event.defaultPrevented)
-        return;
-      _6ZZYUFPWcjs.selectTextField.call(void 0, event.currentTarget);
-    });
-    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
-      onKeyDownCapture,
-      onFocus
-    });
-    return _misc.removeUndefinedValues.call(void 0, props);
-  }
-);
-var CompositeInput = _NGD3IQDBcjs.memo.call(void 0, 
-  _NGD3IQDBcjs.forwardRef.call(void 0, function CompositeInput2(props) {
-    const htmlProps = useCompositeInput(props);
-    return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
-  })
-);
-
-
-
-
-exports.useCompositeInput = useCompositeInput; exports.CompositeInput = CompositeInput;

package/esm/__chunks/RPGNBKKU.js

@@ -1,84 +0,0 @@
-"use client";
-import {
-  selectTextField
-} from "./3IEDWLST.js";
-import {
-  createElement,
-  createHook,
-  forwardRef,
-  memo
-} from "./GUCZNEAD.js";
-import {
-  useEvent
-} from "./WOWUAP42.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./4R3V3JGP.js";
-
-// src/composite/composite-input.ts
-import {
-  getDocument,
-  getTextboxSelection,
-  isTextField
-} from "@ariakit/core/utils/dom";
-import { removeUndefinedValues } from "@ariakit/core/utils/misc";
-var TagName = "input";
-function getValueLength(element) {
-  if (isTextField(element)) {
-    return element.value.length;
-  } else if (element.isContentEditable) {
-    const range = getDocument(element).createRange();
-    range.selectNodeContents(element);
-    return range.toString().length;
-  }
-  return 0;
-}
-var useCompositeInput = createHook(
-  function useCompositeInput2(_a) {
-    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
-    const onKeyDownCaptureProp = props.onKeyDownCapture;
-    const onKeyDownCapture = useEvent((event) => {
-      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
-      if (event.defaultPrevented)
-        return;
-      const element = event.currentTarget;
-      if (!element.isContentEditable && !isTextField(element))
-        return;
-      const selection = getTextboxSelection(element);
-      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-        if (selection.end !== getValueLength(element)) {
-          event.stopPropagation();
-        }
-      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-        if (selection.start !== 0) {
-          event.stopPropagation();
-        }
-      }
-    });
-    const onFocusProp = props.onFocus;
-    const onFocus = useEvent((event) => {
-      onFocusProp == null ? void 0 : onFocusProp(event);
-      if (event.defaultPrevented)
-        return;
-      selectTextField(event.currentTarget);
-    });
-    props = __spreadProps(__spreadValues({}, props), {
-      onKeyDownCapture,
-      onFocus
-    });
-    return removeUndefinedValues(props);
-  }
-);
-var CompositeInput = memo(
-  forwardRef(function CompositeInput2(props) {
-    const htmlProps = useCompositeInput(props);
-    return createElement(TagName, htmlProps);
-  })
-);
-
-export {
-  useCompositeInput,
-  CompositeInput
-};