@ariakit/react-core 0.3.14 → 0.4.0

package/esm/__chunks/{ZEXNX5JH.js → TTFA75QD.js}

@@ -2,18 +2,15 @@
 import {
   ComboboxScopedContextProvider,
   useComboboxProviderContext
-} from "./W76OTZCC.js";
+} from "./UNDSQXBK.js";
 import {
   isHidden
-} from "./CLE7NTOY.js";
+} from "./SOGTNTQC.js";
 import {
-  useFocusable
-} from "./KK7H3W2B.js";
-import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useAttribute,
   useEvent,
@@ -29,12 +26,12 @@ import {
 
 // src/combobox/combobox-list.tsx
 import { useRef } from "react";
-import { isFocusEventOutside } from "@ariakit/core/utils/events";
-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 useComboboxList = createHook(
-  (_a) => {
-    var _b = _a, { store, focusable = true, alwaysVisible } = _b, props = __objRest(_b, ["store", "focusable", "alwaysVisible"]);
+  function useComboboxList2(_a) {
+    var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
     const context = useComboboxProviderContext();
     store = store || context;
     invariant(
@@ -52,37 +49,6 @@ var useComboboxList = createHook(
         store == null ? void 0 : store.move(null);
       }
     });
-    const restoreVirtualFocus = useRef(false);
-    const onFocusVisibleProp = props.onFocusVisible;
-    const onFocusVisible = useEvent((event) => {
-      onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (event.type !== "focus")
-        return;
-      if (!store)
-        return;
-      const { virtualFocus } = store.getState();
-      if (!virtualFocus)
-        return;
-      const { relatedTarget, currentTarget } = event;
-      if (relatedTarget && currentTarget.contains(relatedTarget))
-        return;
-      restoreVirtualFocus.current = true;
-      store.setState("virtualFocus", false);
-    });
-    const onBlurProp = props.onBlur;
-    const onBlur = useEvent((event) => {
-      onBlurProp == null ? void 0 : onBlurProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (!restoreVirtualFocus.current)
-        return;
-      if (!isFocusEventOutside(event))
-        return;
-      restoreVirtualFocus.current = false;
-      store == null ? void 0 : store.setState("virtualFocus", true);
-    });
     props = useWrapElement(
       props,
       (element) => /* @__PURE__ */ jsx(ComboboxScopedContextProvider, { value: store, children: element }),
@@ -101,26 +67,19 @@ var useComboboxList = createHook(
       id,
       hidden,
       role: "listbox",
-      tabIndex: focusable ? -1 : void 0,
       "aria-multiselectable": ariaMultiSelectable
     }, props), {
       ref: useMergeRefs(id ? store.setContentElement : null, ref, props.ref),
       style,
-      onKeyDown,
-      onFocusVisible,
-      onBlur
+      onKeyDown
     });
-    props = useFocusable(__spreadValues({ focusable }, props));
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var ComboboxList = createComponent((props) => {
+var ComboboxList = forwardRef(function ComboboxList2(props) {
   const htmlProps = useComboboxList(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  ComboboxList.displayName = "ComboboxList";
-}
 
 export {
   useComboboxList,

package/esm/__chunks/{TI7CMBHW.js → TWDHCE7Y.js}

@@ -2,10 +2,10 @@
 import {
   PopoverContextProvider,
   PopoverScopedContextProvider
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/hovercard/hovercard-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/{HHNFDKU2.js → TZP63GN5.js}

@@ -2,21 +2,21 @@
 import {
   MenuScopedContextProvider,
   useMenuProviderContext
-} from "./YGMEBI3A.js";
+} from "./IG6NVGLB.js";
 import {
   useCompositeTypeahead
-} from "./346FK57L.js";
+} from "./DMSZFK7W.js";
 import {
   useComposite
-} from "./7QTPYGNZ.js";
+} from "./6WQW7ZIA.js";
 import {
   isHidden
-} from "./CLE7NTOY.js";
+} from "./SOGTNTQC.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -36,6 +36,7 @@ import {
 import { useEffect, useState } from "react";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function useAriaLabelledBy(_a) {
   var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
   const [id, setId] = useState(void 0);
@@ -59,7 +60,7 @@ function useAriaLabelledBy(_a) {
   return id;
 }
 var useMenuList = createHook(
-  (_a) => {
+  function useMenuList2(_a) {
     var _b = _a, { store, alwaysVisible, composite } = _b, props = __objRest(_b, ["store", "alwaysVisible", "composite"]);
     const context = useMenuProviderContext();
     store = store || context;
@@ -164,13 +165,10 @@ var useMenuList = createHook(
     return props;
   }
 );
-var MenuList = createComponent((props) => {
+var MenuList = forwardRef(function MenuList2(props) {
   const htmlProps = useMenuList(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  MenuList.displayName = "MenuList";
-}
 
 export {
   useMenuList,

package/esm/__chunks/{ULAW5PPH.js → UFM3D5TN.js}

@@ -4,12 +4,12 @@ import {
 } from "./QFL5V2DO.js";
 import {
   usePopoverContext
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useMergeRefs,
   useSafeLayoutEffect
@@ -23,8 +23,9 @@ import {
 // src/popover/popover-arrow.tsx
 import { useMemo, useState } from "react";
 import { getWindow } from "@ariakit/core/utils/dom";
-import { invariant } from "@ariakit/core/utils/misc";
+import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc";
 import { jsx, jsxs } from "react/jsx-runtime";
+var TagName = "div";
 var defaultSize = 30;
 var halfDefaultSize = defaultSize / 2;
 var rotateMap = {
@@ -46,7 +47,7 @@ function useComputedStyle(store) {
   return style;
 }
 var usePopoverArrow = createHook(
-  (_a) => {
+  function usePopoverArrow2(_a) {
     var _b = _a, { store, size = defaultSize } = _b, props = __objRest(_b, ["store", "size"]);
     const context = usePopoverContext();
     store = store || context;
@@ -87,16 +88,13 @@ var usePopoverArrow = createHook(
         strokeWidth
       }, props.style)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var PopoverArrow = createComponent((props) => {
+var PopoverArrow = forwardRef(function PopoverArrow2(props) {
   const htmlProps = usePopoverArrow(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  PopoverArrow.displayName = "PopoverArrow";
-}
 
 export {
   usePopoverArrow,

package/esm/__chunks/{W76OTZCC.js → UNDSQXBK.js}

@@ -2,14 +2,14 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   PopoverContextProvider,
   PopoverScopedContextProvider
-} from "./7H5KSHHF.js";
+} from "./TE637IA7.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/combobox/combobox-context.tsx
 import { createContext } from "react";

package/esm/__chunks/{KSKI4NLV.js → UPJMZO6L.js}

@@ -2,14 +2,14 @@
 import {
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "./4HD64GHO.js";
+} from "./UZMGSJE4.js";
 import {
   useCompositeContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createElement,
   forwardRef
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -24,6 +24,7 @@ import {
 
 // src/composite/composite-renderer.tsx
 import { useMemo } from "react";
+var TagName = "div";
 function getItemObject(item) {
   if (!item || typeof item !== "object") {
     return { value: item };
@@ -178,7 +179,7 @@ function useCompositeRenderer(_a) {
 }
 var CompositeRenderer = forwardRef(function CompositeRenderer2(props) {
   const htmlProps = useCompositeRenderer(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
 
 export {

package/esm/__chunks/{ZKJ2WLF7.js → URCSOWGR.js}

@@ -4,7 +4,7 @@ import {
 } from "./7GBW5FLS.js";
 import {
   usePopoverStoreProps
-} from "./MG4P3223.js";
+} from "./XWCFCD3Q.js";
 import {
   useStore,
   useStoreProps
@@ -13,13 +13,15 @@ import {
 // src/combobox/combobox-store.ts
 import * as Core from "@ariakit/core/combobox/combobox-store";
 function useComboboxStoreProps(store, update, props) {
-  store = usePopoverStoreProps(store, update, props);
-  store = useCompositeStoreProps(store, update, props);
   useStoreProps(store, props, "value", "setValue");
   useStoreProps(store, props, "selectedValue", "setSelectedValue");
   useStoreProps(store, props, "resetValueOnHide");
   useStoreProps(store, props, "resetValueOnSelect");
-  return store;
+  return useCompositeStoreProps(
+    usePopoverStoreProps(store, update, props),
+    update,
+    props
+  );
 }
 function useComboboxStore(props = {}) {
   const [store, update] = useStore(Core.createComboboxStore, props);

package/esm/__chunks/{4HD64GHO.js → UZMGSJE4.js}

@@ -1,11 +1,11 @@
 "use client";
 import {
   useCollectionContext
-} from "./4UUKJZ4V.js";
+} from "./MADQZZRL.js";
 import {
   createElement,
   forwardRef
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -37,6 +37,7 @@ import { getScrollingElement, getWindow } from "@ariakit/core/utils/dom";
 import { invariant, shallowEqual } from "@ariakit/core/utils/misc";
 import { flushSync } from "react-dom";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 var CollectionRendererContext = createContext(null);
 function createTask() {
   let raf = 0;
@@ -702,7 +703,7 @@ function useCollectionRenderer(_a) {
 }
 var CollectionRenderer = forwardRef(function CollectionRenderer2(props) {
   const htmlProps = useCollectionRenderer(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
 var getCollectionRendererItem = getItem;
 var getCollectionRendererItemId = getItemId;

package/esm/__chunks/{KK7H3W2B.js → VA234QKF.js}

@@ -3,10 +3,10 @@ import {
   FocusableContext
 } from "./SHA3WOPI.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   useEvent,
   useMergeRefs,
@@ -19,7 +19,7 @@ import {
 } from "./4R3V3JGP.js";
 
 // src/focusable/focusable.ts
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { isButton } from "@ariakit/core/utils/dom";
 import {
   addGlobalEventListener,
@@ -33,8 +33,12 @@ import {
   hasFocus,
   isFocusable
 } from "@ariakit/core/utils/focus";
-import { disabledFromProps } from "@ariakit/core/utils/misc";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
 import { isSafari } from "@ariakit/core/utils/platform";
+var TagName = "div";
 var isSafariBrowser = isSafari();
 var alwaysFocusVisibleInputTypes = [
   "text",
@@ -138,7 +142,7 @@ function onGlobalKeyDown(event) {
   isKeyboardModality = true;
 }
 var useFocusable = createHook(
-  (_a) => {
+  function useFocusable2(_a) {
     var _b = _a, {
       focusable = true,
       accessibleWhenDisabled,
@@ -259,27 +263,25 @@ var useFocusable = createHook(
       setFocusVisible(true);
     };
     const onKeyDownCaptureProp = props.onKeyDownCapture;
-    const onKeyDownCapture = useEvent(
-      (event) => {
-        onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
-        if (event.defaultPrevented)
-          return;
-        if (!focusable)
-          return;
-        if (focusVisible)
-          return;
-        if (event.metaKey)
-          return;
-        if (event.altKey)
-          return;
-        if (event.ctrlKey)
-          return;
-        if (!isSelfTarget(event))
-          return;
-        const element = event.currentTarget;
-        queueMicrotask(() => handleFocusVisible(event, element));
-      }
-    );
+    const onKeyDownCapture = useEvent((event) => {
+      onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!focusable)
+        return;
+      if (focusVisible)
+        return;
+      if (event.metaKey)
+        return;
+      if (event.altKey)
+        return;
+      if (event.ctrlKey)
+        return;
+      if (!isSelfTarget(event))
+        return;
+      const element = event.currentTarget;
+      queueMicrotask(() => handleFocusVisible(event, element));
+    });
     const onFocusCaptureProp = props.onFocusCapture;
     const onFocusCapture = useEvent((event) => {
       onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event);
@@ -328,14 +330,19 @@ var useFocusable = createHook(
         element.focus();
       });
     });
-    const tagName = useTagName(ref, props.as);
+    const tagName = useTagName(ref);
     const nativeTabbable = focusable && isNativeTabbable(tagName);
     const supportsDisabled = focusable && supportsDisabledAttribute(tagName);
-    const style = trulyDisabled ? __spreadValues({ pointerEvents: "none" }, props.style) : props.style;
+    const style = useMemo(() => {
+      if (trulyDisabled) {
+        return __spreadValues({ pointerEvents: "none" }, props.style);
+      }
+      return props.style;
+    }, [trulyDisabled, props.style]);
     props = __spreadProps(__spreadValues({
-      "data-focus-visible": focusable && focusVisible ? "" : void 0,
-      "data-autofocus": autoFocus ? true : void 0,
-      "aria-disabled": disabled ? true : void 0
+      "data-focus-visible": focusable && focusVisible || void 0,
+      "data-autofocus": autoFocus || void 0,
+      "aria-disabled": disabled || void 0
     }, props), {
       ref: useMergeRefs(ref, autoFocusRef, props.ref),
       style,
@@ -357,16 +364,13 @@ var useFocusable = createHook(
       onFocusCapture,
       onBlur
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var Focusable = createComponent((props) => {
-  props = useFocusable(props);
-  return createElement("div", props);
+var Focusable = forwardRef(function Focusable2(props) {
+  const htmlProps = useFocusable(props);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Focusable.displayName = "Focusable";
-}
 
 export {
   useFocusable,

package/esm/__chunks/{KA4GX64Z.js → VBF5EZBB.js}

@@ -2,10 +2,10 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/menubar/menubar-context.ts
 import { createContext } from "react";

package/esm/__chunks/{QZLXIDNP.js → VVLSOSIG.js}

@@ -1,10 +1,10 @@
 "use client";
 import {
   useCommand
-} from "./NWCBQ4CV.js";
+} from "./ZF6ZK5BT.js";
 import {
   useCollectionItem
-} from "./UH3I23HL.js";
+} from "./7YKLTEOQ.js";
 import {
   focusSilently,
   getEnabledItem,
@@ -14,12 +14,13 @@ import {
   CompositeItemContext,
   CompositeRowContext,
   useCompositeContext
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "./3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "./5M6RSQEC.js";
 import {
   useStoreState
 } from "./EKQEJRUF.js";
@@ -45,8 +46,12 @@ import {
   isTextField
 } from "@ariakit/core/utils/dom";
 import { isPortalEvent, isSelfTarget } from "@ariakit/core/utils/events";
-import { disabledFromProps } from "@ariakit/core/utils/misc";
+import {
+  disabledFromProps,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "button";
 function isEditableElement(element) {
   if (element.isContentEditable)
     return true;
@@ -144,7 +149,7 @@ function supportsAriaSelected(role) {
   return false;
 }
 var useCompositeItem = createHook(
-  (_a) => {
+  function useCompositeItem2(_a) {
     var _b = _a, {
       store,
       rowId: rowIdProp,
@@ -373,7 +378,7 @@ var useCompositeItem = createHook(
     props = __spreadProps(__spreadValues({
       id,
       "aria-selected": ariaSelected,
-      "data-active-item": isActiveItem ? "" : void 0
+      "data-active-item": isActiveItem || void 0
     }, props), {
       ref: useMergeRefs(ref, props.ref),
       tabIndex: isTabbable ? props.tabIndex : -1,
@@ -388,21 +393,18 @@ var useCompositeItem = createHook(
       getItem,
       shouldRegisterItem: !!id ? props.shouldRegisterItem : false
     }));
-    return __spreadProps(__spreadValues({}, props), {
+    return removeUndefinedValues(__spreadProps(__spreadValues({}, props), {
       "aria-setsize": ariaSetSize,
       "aria-posinset": ariaPosInSet
-    });
+    }));
   }
 );
-var CompositeItem = createMemoComponent(
-  (props) => {
+var CompositeItem = memo(
+  forwardRef(function CompositeItem2(props) {
     const htmlProps = useCompositeItem(props);
-    return createElement("button", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  CompositeItem.displayName = "CompositeItem";
-}
 
 export {
   useCompositeItem,

package/esm/__chunks/WCIYB4YS.js

@@ -0,0 +1,37 @@
+"use client";
+import {
+  FocusableContext
+} from "./SHA3WOPI.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  __objRest
+} from "./4R3V3JGP.js";
+
+// src/focusable/focusable-container.tsx
+import { jsx } from "react/jsx-runtime";
+var TagName = "div";
+var useFocusableContainer = createHook(function useFocusableContainer2(_a) {
+  var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]);
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
+    [autoFocusOnShow]
+  );
+  return props;
+});
+var FocusableContainer = forwardRef(function FocusableContainer2(props) {
+  const htmlProps = useFocusableContainer(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  useFocusableContainer,
+  FocusableContainer
+};