@ariakit/react-core 0.4.2 → 0.4.4

package/esm/combobox/combobox.d.ts

@@ -143,6 +143,26 @@ export interface ComboboxOptions<T extends ElementType = TagName> extends Compos
      * value.
      */
     blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Specifies the minimum character count the input value should have before
+     * the [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components are displayed.
+     *
+     * The [`showOnChange`](https://ariakit.org/reference/combobox#showonchange),
+     * [`showOnClick`](https://ariakit.org/reference/combobox#showonclick), and
+     * [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress)
+     * props allow you to tailor the behavior for each unique event.
+     * @default 0
+     * @example
+     * In the following example, the combobox list will be shown when the input
+     * value has at least one character. However, if the user presses the arrow
+     * keys, the list will be shown regardless of the input value length.
+     * ```jsx
+     * <Combobox showMinLength={1} showOnKeyPress />
+     * ```
+     */
+    showMinLength?: number;
     /**
      * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
      * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)

package/esm/combobox/combobox.js

@@ -38,7 +38,7 @@ import {
   __spreadValues
 } from "../__chunks/4R3V3JGP.js";
 
-// src/combobox/combobox.ts
+// src/combobox/combobox.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
   getPopupRole,
@@ -93,14 +93,15 @@ var useCombobox = createHook(
       focusable = true,
       autoSelect: autoSelectProp = false,
       getAutoSelectId,
-      showOnChange = true,
       setValueOnChange = true,
-      showOnMouseDown = true,
+      showMinLength = 0,
+      showOnChange,
+      showOnMouseDown,
       showOnClick = showOnMouseDown,
+      showOnKeyDown,
+      showOnKeyPress = showOnKeyDown,
       blurActiveItemOnClick,
       setValueOnClick = true,
-      showOnKeyDown = true,
-      showOnKeyPress = showOnKeyDown,
       moveOnKeyPress = true,
       autoComplete = "list"
     } = _b, props = __objRest(_b, [
@@ -108,14 +109,15 @@ var useCombobox = createHook(
       "focusable",
       "autoSelect",
       "getAutoSelectId",
-      "showOnChange",
       "setValueOnChange",
+      "showMinLength",
+      "showOnChange",
       "showOnMouseDown",
       "showOnClick",
-      "blurActiveItemOnClick",
-      "setValueOnClick",
       "showOnKeyDown",
       "showOnKeyPress",
+      "blurActiveItemOnClick",
+      "setValueOnClick",
       "moveOnKeyPress",
       "autoComplete"
     ]);
@@ -312,8 +314,9 @@ var useCombobox = createHook(
         elements.forEach((el) => el.removeEventListener("focusout", onBlur2));
       };
     }, [inline, contentElement, store, value]);
+    const canShow = value.length >= showMinLength;
     const onChangeProp = props.onChange;
-    const showOnChangeProp = useBooleanEvent(showOnChange);
+    const showOnChangeProp = useBooleanEvent(showOnChange != null ? showOnChange : canShow);
     const setValueOnChangeProp = useBooleanEvent(setValueOnChange);
     const onChange = useEvent((event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
@@ -366,7 +369,7 @@ var useCombobox = createHook(
       blurActiveItemOnClick != null ? blurActiveItemOnClick : () => !!(store == null ? void 0 : store.getState().includesBaseElement)
     );
     const setValueOnClickProp = useBooleanEvent(setValueOnClick);
-    const showOnClickProp = useBooleanEvent(showOnClick);
+    const showOnClickProp = useBooleanEvent(showOnClick != null ? showOnClick : canShow);
     const onMouseDown = useEvent((event) => {
       onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
@@ -388,7 +391,7 @@ var useCombobox = createHook(
       }
     });
     const onKeyDownProp = props.onKeyDown;
-    const showOnKeyPressProp = useBooleanEvent(showOnKeyPress);
+    const showOnKeyPressProp = useBooleanEvent(showOnKeyPress != null ? showOnKeyPress : canShow);
     const onKeyDown = useEvent((event) => {
       onKeyDownProp == null ? void 0 : onKeyDownProp(event);
       if (!event.repeat) {

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

@@ -8,6 +8,7 @@ type TagName = typeof TagName;
  * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
  * or any other component/hook that uses `CompositeItem` underneath.
  * @see https://ariakit.org/components/composite
+ * @deprecated Use `useCompositeItem` instead.
  * @example
  * ```jsx
  * const store = useCompositeStore();
@@ -24,6 +25,7 @@ export declare const useCompositeInput: import("../utils/types.js").Hook<"input"
  * or a component that uses
  * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
  * @see https://ariakit.org/components/composite
+ * @deprecated Use `<CompositeItem render={<input />}>` instead.
  * @example
  * ```jsx {3}
  * <CompositeProvider>

package/esm/composite/composite-input.js

@@ -1,13 +1,98 @@
 "use client";
 import {
-  CompositeInput,
-  useCompositeInput
-} from "../__chunks/RPGNBKKU.js";
-import "../__chunks/3IEDWLST.js";
-import "../__chunks/GUCZNEAD.js";
-import "../__chunks/WOWUAP42.js";
+  selectTextField
+} from "../__chunks/3IEDWLST.js";
+import {
+  createElement,
+  createHook,
+  forwardRef,
+  memo
+} from "../__chunks/GUCZNEAD.js";
+import {
+  useEvent
+} from "../__chunks/WOWUAP42.js";
 import "../__chunks/XM66DUTO.js";
-import "../__chunks/4R3V3JGP.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4R3V3JGP.js";
+
+// src/composite/composite-input.ts
+import { useEffect } from "react";
+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;
+    if (process.env.NODE_ENV !== "production") {
+      useEffect(() => {
+        console.warn(
+          "CompositeInput is deprecated. Use `<CompositeItem render={<input />}>` instead."
+        );
+      }, []);
+    }
+    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);
+      const { orientation } = (store == null ? void 0 : store.getState()) || {};
+      const isHorizontal = orientation !== "vertical";
+      const isVertical = orientation !== "horizontal";
+      const isLeft = isHorizontal && event.key === "ArrowLeft";
+      const isRight = isHorizontal && event.key === "ArrowRight";
+      const isUp = isVertical && event.key === "ArrowUp";
+      const isDown = isVertical && event.key === "ArrowDown";
+      if (isRight || isDown) {
+        if (selection.end !== getValueLength(element)) {
+          event.stopPropagation();
+        }
+      } else if (isLeft || isUp) {
+        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 {
   CompositeInput,
   useCompositeInput

package/esm/composite/composite-item.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 "../__chunks/3IEDWLST.js";

package/esm/composite/composite-overflow-disclosure.js

@@ -8,7 +8,7 @@ import "../__chunks/DYQUE3V3.js";
 import "../__chunks/CKAOM5LG.js";
 import {
   useCompositeItem
-} from "../__chunks/VGL3CETR.js";
+} from "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/composite/composite-overflow.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   usePopover
-} from "../__chunks/X3V2DT2U.js";
-import "../__chunks/NQ4PTILT.js";
+} from "../__chunks/LTYEFENI.js";
+import "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";

package/esm/composite/composite-renderer.d.ts

@@ -18,7 +18,9 @@ type ItemProps<T extends Item, P extends BaseItemProps = BaseItemProps> = Collec
 export declare function useCompositeRenderer<T extends Item = any>({ store, orientation: orientationProp, persistentIndices: persistentIndicesProp, children: renderItem, "aria-setsize": ariaSetSize, "aria-posinset": ariaPosInSet, ...props }: CompositeRendererProps<T>): {
     children: ReactNode[];
     wrapElement?: import("../utils/types.js").WrapElement | undefined;
-    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & import("react").RefAttributes<any>> | undefined;
+    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }> | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -263,9 +265,7 @@ export declare function useCompositeRenderer<T extends Item = any>({ store, orie
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;

package/esm/dialog/dialog-dismiss.js

@@ -2,7 +2,7 @@
 import {
   DialogDismiss,
   useDialogDismiss
-} from "../__chunks/JCOBPKEI.js";
+} from "../__chunks/BY6P32UK.js";
 import "../__chunks/CKAOM5LG.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IWHI6Y45.js";

package/esm/dialog/dialog.js

@@ -3,7 +3,7 @@ import {
   Dialog,
   createDialogComponent,
   useDialog
-} from "../__chunks/NQ4PTILT.js";
+} from "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";

package/esm/form/form-radio.js

@@ -7,9 +7,9 @@ import {
 } from "../__chunks/HQB73KOV.js";
 import {
   useRadio
-} from "../__chunks/QDVOJENT.js";
+} from "../__chunks/DSUHLHLE.js";
 import "../__chunks/MIIHBIKN.js";
-import "../__chunks/VGL3CETR.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/hovercard/hovercard-disclosure.js

@@ -117,7 +117,7 @@ var useHovercardDisclosure = createHook(function useHovercardDisclosure2(_a) {
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: "1.5pt",
+      strokeWidth: 1.5,
       viewBox: "0 0 16 16",
       height: "1em",
       width: "1em",

package/esm/hovercard/hovercard-dismiss.js

@@ -2,9 +2,9 @@
 import {
   HovercardDismiss,
   useHovercardDismiss
-} from "../__chunks/2VWKZYYT.js";
-import "../__chunks/LABIXQLW.js";
-import "../__chunks/JCOBPKEI.js";
+} from "../__chunks/H5N72W37.js";
+import "../__chunks/44PDY2W5.js";
+import "../__chunks/BY6P32UK.js";
 import "../__chunks/CKAOM5LG.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/5YBNH7BL.js";

package/esm/hovercard/hovercard.js

@@ -2,10 +2,10 @@
 import {
   Hovercard,
   useHovercard
-} from "../__chunks/6VDNHSLX.js";
+} from "../__chunks/XEJ23EM6.js";
 import "../__chunks/YMV43K4F.js";
-import "../__chunks/X3V2DT2U.js";
-import "../__chunks/NQ4PTILT.js";
+import "../__chunks/LTYEFENI.js";
+import "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";

package/esm/menu/menu-button-arrow.js

@@ -5,7 +5,7 @@ import {
 import "../__chunks/UY6VBRVY.js";
 import {
   usePopoverDisclosureArrow
-} from "../__chunks/NN4HLGKS.js";
+} from "../__chunks/F2RFUFO2.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import "../__chunks/5YBNH7BL.js";

package/esm/menu/menu-dismiss.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   useHovercardDismiss
-} from "../__chunks/2VWKZYYT.js";
+} from "../__chunks/H5N72W37.js";
 import {
   useMenuScopedContext
 } from "../__chunks/3HX4ZAOG.js";
 import "../__chunks/UY6VBRVY.js";
-import "../__chunks/LABIXQLW.js";
-import "../__chunks/JCOBPKEI.js";
+import "../__chunks/44PDY2W5.js";
+import "../__chunks/BY6P32UK.js";
 import "../__chunks/CKAOM5LG.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/QFI3MCMR.js";

package/esm/menu/menu-item-check.js

@@ -5,7 +5,7 @@ import {
 import "../__chunks/UY6VBRVY.js";
 import {
   useCheckboxCheck
-} from "../__chunks/RAKW656I.js";
+} from "../__chunks/Q4PZFBSW.js";
 import "../__chunks/6XBVQI3K.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";

package/esm/menu/menu-item-checkbox.js

@@ -8,14 +8,14 @@ import {
 import "../__chunks/ZKBA2XH4.js";
 import {
   useMenuItem
-} from "../__chunks/H4YBNKTY.js";
+} from "../__chunks/NFPDVAAW.js";
 import {
   useMenuScopedContext
 } from "../__chunks/3HX4ZAOG.js";
 import "../__chunks/UY6VBRVY.js";
 import "../__chunks/VXKKJNIF.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/VGL3CETR.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/menu/menu-item-radio.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useMenuItem
-} from "../__chunks/H4YBNKTY.js";
+} from "../__chunks/NFPDVAAW.js";
 import {
   MenuItemCheckedContext,
   useMenuScopedContext
@@ -9,10 +9,10 @@ import {
 import "../__chunks/UY6VBRVY.js";
 import {
   useRadio
-} from "../__chunks/QDVOJENT.js";
+} from "../__chunks/DSUHLHLE.js";
 import "../__chunks/MIIHBIKN.js";
 import "../__chunks/VXKKJNIF.js";
-import "../__chunks/VGL3CETR.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/menu/menu-item.js

@@ -2,11 +2,11 @@
 import {
   MenuItem,
   useMenuItem
-} from "../__chunks/H4YBNKTY.js";
+} from "../__chunks/NFPDVAAW.js";
 import "../__chunks/3HX4ZAOG.js";
 import "../__chunks/UY6VBRVY.js";
 import "../__chunks/VXKKJNIF.js";
-import "../__chunks/VGL3CETR.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/menu/menu.js

@@ -13,12 +13,12 @@ import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 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/popover/popover-disclosure-arrow.js

@@ -2,7 +2,7 @@
 import {
   PopoverDisclosureArrow,
   usePopoverDisclosureArrow
-} from "../__chunks/NN4HLGKS.js";
+} from "../__chunks/F2RFUFO2.js";
 import "../__chunks/5B3U64HV.js";
 import "../__chunks/IWHI6Y45.js";
 import "../__chunks/RG6J4TID.js";

package/esm/popover/popover-dismiss.js

@@ -2,8 +2,8 @@
 import {
   PopoverDismiss,
   usePopoverDismiss
-} from "../__chunks/LABIXQLW.js";
-import "../__chunks/JCOBPKEI.js";
+} from "../__chunks/44PDY2W5.js";
+import "../__chunks/BY6P32UK.js";
 import "../__chunks/CKAOM5LG.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/5B3U64HV.js";

package/esm/popover/popover.js

@@ -2,8 +2,8 @@
 import {
   Popover,
   usePopover
-} from "../__chunks/X3V2DT2U.js";
-import "../__chunks/NQ4PTILT.js";
+} from "../__chunks/LTYEFENI.js";
+import "../__chunks/IOUGWXY5.js";
 import "../__chunks/GOXKZAQI.js";
 import "../__chunks/6GXEOXGT.js";
 import "../__chunks/PTPUIM7N.js";

package/esm/radio/radio.js

@@ -2,9 +2,9 @@
 import {
   Radio,
   useRadio
-} from "../__chunks/QDVOJENT.js";
+} from "../__chunks/DSUHLHLE.js";
 import "../__chunks/MIIHBIKN.js";
-import "../__chunks/VGL3CETR.js";
+import "../__chunks/R33ISPJY.js";
 import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";

package/esm/select/select-arrow.js

@@ -2,8 +2,8 @@
 import {
   SelectArrow,
   useSelectArrow
-} from "../__chunks/FYNSL2D5.js";
-import "../__chunks/NN4HLGKS.js";
+} from "../__chunks/5H3YXAUC.js";
+import "../__chunks/F2RFUFO2.js";
 import "../__chunks/SYZHUNAU.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";

package/esm/select/select-item-check.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   useCheckboxCheck
-} from "../__chunks/RAKW656I.js";
+} from "../__chunks/Q4PZFBSW.js";
 import "../__chunks/6XBVQI3K.js";
 import {
   SelectItemCheckedContext

package/esm/select/select-item.js

@@ -2,14 +2,14 @@
 import {
   useCompositeHover
 } from "../__chunks/VXKKJNIF.js";
+import {
+  useCompositeItem
+} from "../__chunks/R33ISPJY.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   SelectItemCheckedContext,
   useSelectScopedContext
 } from "../__chunks/SYZHUNAU.js";
-import {
-  useCompositeItem
-} from "../__chunks/VGL3CETR.js";
-import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/IFMAUEA7.js";
 import "../__chunks/3IEDWLST.js";
 import "../__chunks/QFI3MCMR.js";

package/esm/select/select-popover.js

@@ -12,10 +12,10 @@ import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";
 import {
   usePopover
-} from "../__chunks/X3V2DT2U.js";
+} from "../__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/select/select.js

@@ -8,16 +8,16 @@ import "../__chunks/DYQUE3V3.js";
 import "../__chunks/CKAOM5LG.js";
 import {
   SelectArrow
-} from "../__chunks/FYNSL2D5.js";
-import "../__chunks/NN4HLGKS.js";
+} from "../__chunks/5H3YXAUC.js";
+import "../__chunks/F2RFUFO2.js";
 import {
   useCompositeTypeahead
 } from "../__chunks/QRAMDWD7.js";
+import "../__chunks/PJ7ERAIM.js";
 import {
   SelectScopedContextProvider,
   useSelectProviderContext
 } from "../__chunks/SYZHUNAU.js";
-import "../__chunks/PJ7ERAIM.js";
 import "../__chunks/3IEDWLST.js";
 import "../__chunks/QFI3MCMR.js";
 import "../__chunks/6LTHW2TQ.js";

package/esm/tab/tab-panel.js

@@ -40,7 +40,7 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/tab/tab-panel.tsx
-import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+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";
@@ -124,27 +124,17 @@ 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), {
+      children: unmountOnHide && !mounted ? null : props.children,
       ref: useMergeRefs(ref, props.ref),
       onKeyDown
     });
-    const disclosure = useDisclosureStore({ open });
-    const mounted = disclosure.useState("mounted");
-    props = useWrapElement(
-      props,
-      (element) => {
-        if (!unmountOnHide)
-          return element;
-        if (!mounted)
-          return /* @__PURE__ */ jsx(Fragment, {});
-        return element;
-      },
-      [unmountOnHide, mounted]
-    );
     props = useFocusable(__spreadValues({
       // If the tab panel is rendered as part of another composite widget such
       // as combobox, it should not be focusable.

package/esm/tab/tab-provider.js

@@ -1,7 +1,9 @@
 "use client";
 import {
   useTabStore
-} from "../__chunks/DGR3GYOB.js";
+} from "../__chunks/APFOINTZ.js";
+import "../__chunks/N4X7J4OQ.js";
+import "../__chunks/SYZHUNAU.js";
 import {
   TabContextProvider
 } from "../__chunks/VFICFWOQ.js";
@@ -9,6 +11,9 @@ 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";