@ariakit/react-core 0.4.1 → 0.4.3

package/esm/select/select-value.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import type { PickRequired, ToPrimitive } from "@ariakit/core/utils/types";
+import type { SelectStore, SelectStoreValue } from "./select-store.js";
+type Value = SelectStoreValue;
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-select-store#value) state in the
+ * [select store](https://ariakit.org/reference/use-select-store).
+ *
+ * As a headless value component, it doesn't render any DOM elements and
+ * therefore doesn't accept HTML props. It can optionally accept a
+ * [`fallback`](https://ariakit.org/reference/select-value#fallback) prop to use
+ * as a default value if the store's
+ * [`value`](https://ariakit.org/reference/use-select-store#value) is
+ * `undefined`.
+ *
+ * Additionally, it takes a `children` function that gets called with the
+ * current value as an argument. This feature is handy for renderind the value
+ * in a custom way.
+ * @see https://ariakit.org/components/select
+ * @example
+ * ```jsx {3}
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue fallback="Select a value" />
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ * @example
+ * ```jsx {1-3,7}
+ * function renderValue(value) {
+ *   // render custom JSX
+ * }
+ *
+ * <SelectProvider>
+ *   <Select>
+ *     <SelectValue>{renderValue}</SelectValue>
+ *     <SelectArrow />
+ *   </Select>
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Banana" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
+ * ```
+ */
+export declare function SelectValue<T extends Value = Value>(props: PickRequired<SelectValueProps<T>, "fallback">): T;
+export declare function SelectValue(props?: SelectValueProps): Value;
+export interface SelectValueProps<T extends Value = Value> {
+    /**
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
+     */
+    store?: SelectStore<T>;
+    /**
+     * The value to use as a default if the store's
+     * [`value`](https://ariakit.org/reference/use-select-store#value) is
+     * `undefined`.
+     * @default ""
+     */
+    fallback?: T;
+    /**
+     * A function that gets called with the current value as an argument. This
+     * feature is handy for renderind the value in a custom way.
+     */
+    children?: (value: ToPrimitive<T>) => ReactNode;
+}
+export {};

package/esm/select/select-value.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  useSelectContext
+} from "../__chunks/SYZHUNAU.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 {
+  useStoreState
+} from "../__chunks/PWUXK5IM.js";
+import "../__chunks/WOWUAP42.js";
+import "../__chunks/XM66DUTO.js";
+import "../__chunks/4R3V3JGP.js";
+
+// src/select/select-value.tsx
+function SelectValue({
+  store,
+  fallback,
+  children
+} = {}) {
+  const context = useSelectContext();
+  store = store || context;
+  const value = useStoreState(store, (state) => (state == null ? void 0 : state.value) || fallback);
+  if (children) {
+    return children(value || "");
+  }
+  return value;
+}
+export {
+  SelectValue
+};

package/esm/select/select.js

@@ -1,42 +1,42 @@
 "use client";
 import {
   usePopoverDisclosure
-} from "../__chunks/Z72LDQLY.js";
-import "../__chunks/5SF76VVA.js";
-import "../__chunks/AFNONYRE.js";
-import "../__chunks/NLT7LY5Y.js";
-import "../__chunks/JJ3MV4KB.js";
+} from "../__chunks/RSEU2ZAG.js";
+import "../__chunks/LTYBQEWX.js";
+import "../__chunks/R6SM2O47.js";
+import "../__chunks/DYQUE3V3.js";
+import "../__chunks/CKAOM5LG.js";
 import {
   SelectArrow
-} from "../__chunks/6PC3IJNK.js";
-import "../__chunks/HA4U57LH.js";
+} from "../__chunks/FYNSL2D5.js";
+import "../__chunks/NN4HLGKS.js";
 import {
   useCompositeTypeahead
-} from "../__chunks/DMSZFK7W.js";
+} from "../__chunks/QRAMDWD7.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   SelectScopedContextProvider,
   useSelectProviderContext
-} from "../__chunks/TKSBJDO3.js";
-import "../__chunks/KSZPJCUA.js";
+} from "../__chunks/SYZHUNAU.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/TE637IA7.js";
-import "../__chunks/XXVAHUAO.js";
-import "../__chunks/J55AVALY.js";
-import "../__chunks/WAZE6NXP.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/5B3U64HV.js";
+import "../__chunks/IWHI6Y45.js";
+import "../__chunks/RG6J4TID.js";
+import "../__chunks/7JCFLN3D.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "../__chunks/5M6RSQEC.js";
+} from "../__chunks/GUCZNEAD.js";
 import {
   useBooleanEvent,
   useEvent,
   useMergeRefs,
   useWrapElement
-} from "../__chunks/6O5OEQGF.js";
+} from "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import {
   __objRest,

package/esm/separator/separator.js

@@ -2,9 +2,9 @@
 import {
   Separator,
   useSeparator
-} from "../__chunks/SDQLXKEV.js";
-import "../__chunks/5M6RSQEC.js";
-import "../__chunks/6O5OEQGF.js";
+} from "../__chunks/GBZR5YWM.js";
+import "../__chunks/GUCZNEAD.js";
+import "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 export {

package/esm/tab/tab-context.js

@@ -5,11 +5,11 @@ import {
   useTabContext,
   useTabProviderContext,
   useTabScopedContext
-} from "../__chunks/32VQXIYR.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/5M6RSQEC.js";
-import "../__chunks/6O5OEQGF.js";
+} from "../__chunks/VFICFWOQ.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/GUCZNEAD.js";
+import "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 export {

package/esm/tab/tab-list.js

@@ -2,23 +2,23 @@
 import {
   TabScopedContextProvider,
   useTabProviderContext
-} from "../__chunks/32VQXIYR.js";
+} from "../__chunks/VFICFWOQ.js";
 import {
   useComposite
-} from "../__chunks/FTNKYK65.js";
+} from "../__chunks/CDZXDIC7.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/WAZE6NXP.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/7JCFLN3D.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "../__chunks/5M6RSQEC.js";
+} from "../__chunks/GUCZNEAD.js";
 import {
   useWrapElement
-} from "../__chunks/6O5OEQGF.js";
+} from "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import {
   __objRest,
@@ -46,6 +46,11 @@ var useTabList = createHook(
       (element) => /* @__PURE__ */ jsx(TabScopedContextProvider, { value: store, children: element }),
       [store]
     );
+    if (store.composite) {
+      props = __spreadValues({
+        focusable: false
+      }, props);
+    }
     props = __spreadValues({
       role: "tablist",
       "aria-orientation": orientation

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

@@ -44,7 +44,7 @@ export declare const useTabPanel: import("../utils/types.js").Hook<"div", TabPan
  * ```
  */
 export declare const TabPanel: (props: TabPanelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store" | "unmountOnHide"> {
+export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -68,6 +68,7 @@ export interface TabPanelOptions<T extends ElementType = TagName> extends Focusa
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     tabId?: string | null;
 }

package/esm/tab/tab-panel.js

@@ -1,36 +1,37 @@
 "use client";
 import {
   useCollectionItem
-} from "../__chunks/7YKLTEOQ.js";
+} from "../__chunks/IFMAUEA7.js";
 import {
   TabScopedContextProvider,
   useTabProviderContext
-} from "../__chunks/32VQXIYR.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
+} from "../__chunks/VFICFWOQ.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
 import {
   useDisclosureContent
-} from "../__chunks/RQZGFHI2.js";
-import "../__chunks/XXVAHUAO.js";
-import "../__chunks/J55AVALY.js";
+} from "../__chunks/KCMTTTFR.js";
+import "../__chunks/IWHI6Y45.js";
+import "../__chunks/RG6J4TID.js";
 import {
   useFocusable
-} from "../__chunks/WAZE6NXP.js";
+} from "../__chunks/7JCFLN3D.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
   forwardRef
-} from "../__chunks/5M6RSQEC.js";
+} from "../__chunks/GUCZNEAD.js";
 import {
   useDisclosureStore
-} from "../__chunks/HZJ2XALY.js";
-import "../__chunks/EKQEJRUF.js";
+} from "../__chunks/ZIX5D53S.js";
+import "../__chunks/PWUXK5IM.js";
 import {
+  useEvent,
   useId,
   useMergeRefs,
   useWrapElement
-} from "../__chunks/6O5OEQGF.js";
+} from "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import {
   __objRest,
@@ -40,6 +41,7 @@ import {
 
 // src/tab/tab-panel.tsx
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createTabStore } from "@ariakit/core/tab/tab-store";
 import { getAllTabbableIn } from "@ariakit/core/utils/focus";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
@@ -48,10 +50,12 @@ var useTabPanel = createHook(
   function useTabPanel2(_a) {
     var _b = _a, {
       store,
+      unmountOnHide,
       tabId: tabIdProp,
       getItem: getItemProp
     } = _b, props = __objRest(_b, [
       "store",
+      "unmountOnHide",
       "tabId",
       "getItem"
     ]);
@@ -81,6 +85,31 @@ var useTabPanel = createHook(
       },
       [id, tabIdProp, getItemProp]
     );
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = useEvent((event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!(store == null ? void 0 : store.composite))
+        return;
+      const { items, renderedItems, selectedId } = store.getState();
+      const tab = createTabStore({ items, activeId: selectedId });
+      tab.setState("renderedItems", renderedItems);
+      const keyMap = {
+        ArrowLeft: tab.previous,
+        ArrowRight: tab.next,
+        Home: tab.first,
+        End: tab.last
+      };
+      const action = keyMap[event.key];
+      if (!action)
+        return;
+      const nextId = action();
+      if (!nextId)
+        return;
+      event.preventDefault();
+      store.select(nextId);
+    });
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(TabScopedContextProvider, { value: store, children: element }),
@@ -95,15 +124,22 @@ var useTabPanel = createHook(
     const open = store.useState(
       (state) => !!tabId && state.selectedId === tabId
     );
+    const disclosure = useDisclosureStore({ open });
+    const mounted = disclosure.useState("mounted");
     props = __spreadProps(__spreadValues({
       id,
       role: "tabpanel",
       "aria-labelledby": tabId || void 0
     }, props), {
-      ref: useMergeRefs(ref, props.ref)
+      children: unmountOnHide && !mounted ? null : props.children,
+      ref: useMergeRefs(ref, props.ref),
+      onKeyDown
     });
-    const disclosure = useDisclosureStore({ open });
-    props = useFocusable(__spreadValues({ focusable: !hasTabbableChildren }, props));
+    props = useFocusable(__spreadValues({
+      // If the tab panel is rendered as part of another composite widget such
+      // as combobox, it should not be focusable.
+      focusable: !store.composite && !hasTabbableChildren
+    }, props));
     props = useDisclosureContent(__spreadValues({ store: disclosure }, props));
     props = useCollectionItem(__spreadProps(__spreadValues({ store: store.panels }, props), { getItem }));
     return props;

package/esm/tab/tab-provider.js

@@ -1,17 +1,22 @@
 "use client";
 import {
   useTabStore
-} from "../__chunks/CQMDBRG5.js";
+} from "../__chunks/APFOINTZ.js";
+import "../__chunks/N4X7J4OQ.js";
+import "../__chunks/SYZHUNAU.js";
 import {
   TabContextProvider
-} from "../__chunks/32VQXIYR.js";
-import "../__chunks/7GBW5FLS.js";
-import "../__chunks/Y6GYTNQ2.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/5M6RSQEC.js";
-import "../__chunks/EKQEJRUF.js";
-import "../__chunks/6O5OEQGF.js";
+} from "../__chunks/VFICFWOQ.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";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 

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

@@ -1,5 +1,6 @@
 import * as Core from "@ariakit/core/tab/tab-store";
-import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+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 & {
     panels: import("@ariakit/core/collection/collection-store").CollectionStore<Core.TabStorePanel> & {
@@ -9,6 +10,9 @@ export declare function useTabStoreProps<T extends Core.TabStore>(store: T, upda
             <V>(selector: (state: import("@ariakit/core/collection/collection-store").CollectionStoreState<Core.TabStorePanel>) => V): V;
         };
     };
+} & {
+    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
@@ -31,10 +35,10 @@ export interface TabStoreItem extends Core.TabStoreItem {
 }
 export interface TabStoreState extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {
 }
-export interface TabStoreFunctions extends Core.TabStoreFunctions, 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 Core.TabStoreOptions, 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
@@ -44,8 +48,29 @@ export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOpt
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
+    /**
+     * A reference to another [composite
+     * 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, Core.TabStoreProps {
+export interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite" | "combobox"> {
 }
-export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels"> {
+export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite" | "combobox"> {
 }

package/esm/tab/tab-store.js

@@ -2,11 +2,19 @@
 import {
   useTabStore,
   useTabStoreProps
-} from "../__chunks/CQMDBRG5.js";
-import "../__chunks/7GBW5FLS.js";
-import "../__chunks/Y6GYTNQ2.js";
-import "../__chunks/EKQEJRUF.js";
-import "../__chunks/6O5OEQGF.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";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 export {

package/esm/tab/tab.d.ts

@@ -1,5 +1,5 @@
 import type { ElementType } from "react";
-import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { CompositeItemOptions } from "../composite/composite-item.jsx";
 import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
 declare const TagName = "button";

package/esm/tab/tab.js

@@ -1,28 +1,30 @@
 "use client";
 import {
+  CompositeItem,
   useCompositeItem
-} from "../__chunks/C6OBNQ4F.js";
-import "../__chunks/KSZPJCUA.js";
-import "../__chunks/7YKLTEOQ.js";
+} from "../__chunks/ONUY4D7O.js";
+import "../__chunks/PJ7ERAIM.js";
+import "../__chunks/IFMAUEA7.js";
 import {
   useTabScopedContext
-} from "../__chunks/32VQXIYR.js";
+} from "../__chunks/VFICFWOQ.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/WAZE6NXP.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/7JCFLN3D.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
   forwardRef,
   memo
-} from "../__chunks/5M6RSQEC.js";
-import "../__chunks/EKQEJRUF.js";
+} from "../__chunks/GUCZNEAD.js";
+import "../__chunks/PWUXK5IM.js";
 import {
   useEvent,
-  useId
-} from "../__chunks/6O5OEQGF.js";
+  useId,
+  useWrapElement
+} from "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import {
   __objRest,
@@ -30,9 +32,10 @@ import {
   __spreadValues
 } from "../__chunks/4R3V3JGP.js";
 
-// src/tab/tab.ts
+// src/tab/tab.tsx
 import { useCallback } from "react";
 import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
 var TagName = "button";
 var useTab = createHook(function useTab2(_a) {
   var _b = _a, {
@@ -77,6 +80,27 @@ var useTab = createHook(function useTab2(_a) {
     }
   );
   const selected = store.useState((state) => !!id && state.selectedId === id);
+  const shouldRegisterItem = !!defaultId ? props.shouldRegisterItem : false;
+  props = useWrapElement(
+    props,
+    (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,
+        __spreadProps(__spreadValues({}, defaultProps), {
+          render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ jsx(CompositeItem, __spreadProps(__spreadValues({}, defaultProps), { store: store.combobox })) : element
+        })
+      );
+    },
+    [store, id, selected, shouldRegisterItem]
+  );
   props = __spreadProps(__spreadValues({
     id,
     role: "tab",
@@ -90,7 +114,7 @@ var useTab = createHook(function useTab2(_a) {
   }, props), {
     accessibleWhenDisabled,
     getItem,
-    shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false
+    shouldRegisterItem
   }));
   return props;
 });

package/esm/toolbar/toolbar-container.js

@@ -1,29 +1,29 @@
 "use client";
 import {
   useCompositeContainer
-} from "../__chunks/KTZEHGAP.js";
+} from "../__chunks/LQCUPYIB.js";
 import {
   useToolbarItem
-} from "../__chunks/237HGZM2.js";
-import "../__chunks/C6OBNQ4F.js";
-import "../__chunks/KSZPJCUA.js";
-import "../__chunks/7YKLTEOQ.js";
+} from "../__chunks/XK6CE2M5.js";
+import "../__chunks/ONUY4D7O.js";
+import "../__chunks/PJ7ERAIM.js";
+import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";
 import {
   useToolbarContext
-} from "../__chunks/2OCM6QMR.js";
-import "../__chunks/3D6OCOHF.js";
-import "../__chunks/MADQZZRL.js";
-import "../__chunks/WAZE6NXP.js";
+} from "../__chunks/766APSLG.js";
+import "../__chunks/QFI3MCMR.js";
+import "../__chunks/6LTHW2TQ.js";
+import "../__chunks/7JCFLN3D.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
   forwardRef,
   memo
-} from "../__chunks/5M6RSQEC.js";
-import "../__chunks/EKQEJRUF.js";
-import "../__chunks/6O5OEQGF.js";
+} from "../__chunks/GUCZNEAD.js";
+import "../__chunks/PWUXK5IM.js";
+import "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
 import {
   __objRest,