@ariakit/react-core 0.3.14 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,160 @@
 # @ariakit/react-core
 
+## 0.4.1
+
+### New `autoSelect` mode
+
+The [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop of the [`Combobox`](https://ariakit.org/reference/combobox) component now accepts a new `"always"` value:
+
+```jsx
+<Combobox autoSelect="always" />
+```
+
+When using this value, the first enabled item will automatically gain focus when the list shows up, as well as when the combobox input value changes (which is the behavior of the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop when set to `true`).
+
+### `ComboboxItem` losing focus too early
+
+Some tweaks were made to the [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component to ensure it doesn't lose focus right after a click or <kbd>Escape</kbd> keystroke when the combobox popover is animated. This should avoid an inconsistent UI as the popover plays its exit animation.
+
+### Other updates
+
+- Added [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
+- Added [`blurActiveItemOnClick`](https://ariakit.org/reference/combobox#bluractiveitemonclick) prop to [`Combobox`](https://ariakit.org/reference/combobox).
+- Added [`showOnClick`](https://ariakit.org/reference/combobox#showonclick) prop to [`Combobox`](https://ariakit.org/reference/combobox).
+- Added [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress) prop to [`Combobox`](https://ariakit.org/reference/combobox).
+- Fixed [`DisclosureContent`](https://ariakit.org/reference/disclosure-content) components losing their ref value on fast refresh.
+- Improved JSDocs.
+- Updated dependencies: `@ariakit/core@0.4.1`
+
+## 0.4.0
+
+This version introduces enhanced support for CSS animations and transitions, along with a few breaking changes for quite specific cases. The majority of users won't be impacted by these.
+
+Please review the brief notes following the **BREAKING** labels on each update to determine if any changes are needed in your code.
+
+### Improved animation support
+
+This version enhances support for CSS animations and transitions on Ariakit components that use [Disclosure](https://ariakit.org/component/disclosure). This includes [Dialog](https://ariakit.org/components/dialog), [Popover](https://ariakit.org/components/popover), [Combobox](https://ariakit.org/components/combobox), [Select](https://ariakit.org/components/select), [Hovercard](https://ariakit.org/components/hovercard), [Menu](https://ariakit.org/components/menu), and [Tooltip](https://ariakit.org/components/tooltip).
+
+These components now support _enter_ and _leave_ transitions and animations right out of the box, eliminating the need to provide an explicit `animated` prop. If an enter animation is detected, the component will automatically wait for a leave animation to complete before unmounting or hiding itself.
+
+Use the [`[data-enter]`](https://ariakit.org/guide/styling#data-enter) selector for CSS transitions. For CSS animations, use the newly introduced [`[data-open]`](https://ariakit.org/guide/styling#data-open) selector. The [`[data-leave]`](https://ariakit.org/guide/styling#data-leave) selector can be used for both transitions and animations.
+
+### `ComboboxList` is no longer focusable
+
+**BREAKING** if you're using the [`ComboboxList`](https://ariakit.org/reference/combobox-list) component directly with [`Focusable`](https://ariakit.org/reference/focusable) props.
+
+The [`ComboboxList`](https://ariakit.org/reference/combobox-list) component is no longer focusable and doesn't accept [`Focusable`](https://ariakit.org/reference/focusable) props such as [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`disabled`](https://ariakit.org/reference/focusable#disabled), and [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) anymore. If you need [Focusable](https://ariakit.org/components/focusable) features specifically on the [`ComboboxList`](https://ariakit.org/reference/combobox-list) component, you can use [composition](https://ariakit.org/guide/composition) to render it as a [`Focusable`](https://ariakit.org/reference/focusable) component.
+
+Before:
+
+```jsx
+<ComboboxList disabled />
+```
+
+After:
+
+```jsx
+<ComboboxList render={<Focusable disabled />} />
+```
+
+### Composite widgets with `grid` role
+
+**BREAKING** if you're manually setting the `role="grid"` prop on a composite widget.
+
+Ariakit automatically assigns the `role` prop to all composite items to align with the container `role`. For example, if [`SelectPopover`](https://ariakit.org/reference/select-popover) has its role set to `listbox` (which is the default value), its owned [`SelectItem`](https://ariakit.org/reference/select-item) elements will automatically get their role set to `option`.
+
+In previous versions, this was also valid for composite widgets with a `grid` role, where the composite item element would automatically be given `role="gridcell"`. This is no longer the case, and you're now required to manually pass `role="gridcell"` to the composite item element if you're rendering a container with `role="grid"`.
+
+Before:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow> {/* Automatically gets role="row" */}
+    <SelectItem> {/* Automatically gets role="gridcell" */}
+```
+
+After:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow> {/* Still gets role="row" */}
+    <SelectItem role="gridcell">
+```
+
+This change is due to the possibility of rendering a composite item element with a different role as a child of a static `div` with `role="gridcell"`, which is a valid and frequently used practice when using the `grid` role. As a result, you no longer have to manually adjust the `role` prop on the composite item:
+
+```jsx
+<SelectPopover role="grid">
+  <SelectRow>
+    <div role="gridcell">
+      <SelectItem render={<button />}>
+```
+
+Previously, you had to explicitly pass `role="button"` to the [`SelectItem`](https://ariakit.org/reference/select-item) component above, otherwise it would automatically receive `role="gridcell"`, leading to an invalid accessibility tree.
+
+### Radio types have improved
+
+**BREAKING** if you're using TypeScript and the [`onChange`](https://ariakit.org/reference/radio#onchange) prop on [`Radio`](https://ariakit.org/reference/radio), [`FormRadio`](https://ariakit.org/reference/form-radio), or [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
+
+The [`onChange`](https://ariakit.org/reference/radio#onchange) callback argument type has changed from `React.SyntheticEvent` to `React.ChangeEvent`.
+
+Before:
+
+```tsx
+<Radio onChange={(event: React.SyntheticEvent) => {}} />
+```
+
+After:
+
+```tsx
+<Radio onChange={(event: React.ChangeEvent) => {}} />
+```
+
+### Public data attributes have now boolean values
+
+**BREAKING** if you're depending on [data attributes](https://ariakit.org/guide/styling#data-active) to carry an empty string (`""`) value.
+
+In previous versions, data attributes such as [`data-active`](https://ariakit.org/guide/styling#data-active), [`data-active-item`](https://ariakit.org/guide/styling#data-active-item), [`data-enter`](https://ariakit.org/guide/styling#data-enter), [`data-leave`](https://ariakit.org/guide/styling#data-leave), and [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible) would carry an empty string (`""`) value when active, and `undefined` when inactive. Now, they have a `true` value when active, but remain `undefined` when inactive.
+
+Their use as CSS selectors remains unchanged. You should continue to select them with the attribute selector with no value (e.g., `[data-enter]`). However, if you're employing them in different ways or have snapshot tests that depend on their value, you might need to update your code.
+
+### Removed deprecated features
+
+**BREAKING** if you haven't addressed the deprecation warnings from previous releases.
+
+This version eliminates features that were deprecated in previous releases: the `backdropProps` and `as` props, as well as the ability to use a render function for the `children` prop across all components.
+
+Before:
+
+```jsx
+<Dialog backdropProps={{ className: "backdrop" }} />
+<Combobox as="textarea" />
+<Combobox>
+  {(props) => <textarea {...props} />}
+</Combobox>
+```
+
+After:
+
+```jsx
+<Dialog backdrop={<div className="backdrop" />} />
+<Combobox render={<textarea />} />
+<Combobox render={(props) => <textarea {...props} />} />
+```
+
+You can learn more about these new features in the [Composition guide](https://ariakit.org/guide/composition).
+
+### Other updates
+
+- Deprecated `MenuBar` in favor of [Menubar](https://ariakit.org/components/menubar) components.
+- Revamped utilities for creating Ariakit components.
+- The `type` prop for the [Tooltip](https://ariakit.org/components/tooltip) has been deprecated. See [Tooltip anchors must have accessible names](https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names).
+- Removed the ancestors of open, nested modals from the accessibility tree.
+- Tooltips no longer use `aria-describedby` to associate the tooltip content with the anchor.
+- Added new [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
+- Updated dependencies: `@ariakit/core@0.4.0`
+
 ## 0.3.14
 
 - Fixed a regression introduced in `v0.3.13` where dialogs wouldn't close when clicking outside on iOS.

package/cjs/__chunks/2CZCHCJM.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _GMXGH5P5cjs = require('./GMXGH5P5.cjs');
+
+
+
+
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
+
+
+var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
+
+// src/composite/composite-group-label.ts
+var TagName = "div";
+var useCompositeGroupLabel = _Q67LZMDTcjs.createHook.call(void 0, function useCompositeGroupLabel2(_a) {
+  var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
+  props = _GMXGH5P5cjs.useGroupLabel.call(void 0, props);
+  return props;
+});
+var CompositeGroupLabel = _Q67LZMDTcjs.forwardRef.call(void 0, function CompositeGroupLabel2(props) {
+  const htmlProps = useCompositeGroupLabel(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+
+exports.useCompositeGroupLabel = useCompositeGroupLabel; exports.CompositeGroupLabel = CompositeGroupLabel;

package/cjs/__chunks/{WZ3DRKGP.cjs → 375RXJFL.cjs}

@@ -4,14 +4,13 @@
 var _VV6WA3I6cjs = require('./VV6WA3I6.cjs');
 
 
-var _LAUATD5Ocjs = require('./LAUATD5O.cjs');
+var _SFDUOV6Fcjs = require('./SFDUOV6F.cjs');
 
 
-var _YPVQYY4Jcjs = require('./YPVQYY4J.cjs');
+var _THCBJSSMcjs = require('./THCBJSSM.cjs');
 
 
-var _JAQJG42Rcjs = require('./JAQJG42R.cjs');
-
+var _QJZAESARcjs = require('./QJZAESAR.cjs');
 
 
 var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
@@ -26,12 +25,11 @@ var _jsxruntime = require('react/jsx-runtime');
 function DialogBackdrop({
   store,
   backdrop,
-  backdropProps,
   alwaysVisible,
   hidden
 }) {
   const ref = _react.useRef.call(void 0, null);
-  const disclosure = _JAQJG42Rcjs.useDisclosureStore.call(void 0, { disclosure: store });
+  const disclosure = _QJZAESARcjs.useDisclosureStore.call(void 0, { disclosure: store });
   const contentElement = store.useState("contentElement");
   _EO6LS72Hcjs.useSafeLayoutEffect.call(void 0, () => {
     const backdrop2 = ref.current;
@@ -51,31 +49,28 @@ function DialogBackdrop({
       return;
     return _VV6WA3I6cjs.markAncestor.call(void 0, backdrop2, id);
   }, [contentElement]);
-  if (hidden != null) {
-    backdropProps = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, backdropProps), { hidden });
-  }
-  const props = _YPVQYY4Jcjs.useDisclosureContent.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+  const props = _THCBJSSMcjs.useDisclosureContent.call(void 0, {
+    ref,
     store: disclosure,
     role: "presentation",
     "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "",
-    alwaysVisible
-  }, backdropProps), {
-    ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, backdropProps == null ? void 0 : backdropProps.ref, ref),
-    style: _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    alwaysVisible,
+    hidden: hidden != null ? hidden : void 0,
+    style: {
       position: "fixed",
       top: 0,
       right: 0,
       bottom: 0,
       left: 0
-    }, backdropProps == null ? void 0 : backdropProps.style)
-  }));
+    }
+  });
   if (!backdrop)
     return null;
   if (_react.isValidElement.call(void 0, backdrop)) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _LAUATD5Ocjs.Role, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { render: backdrop }));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SFDUOV6Fcjs.Role, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { render: backdrop }));
   }
   const Component = typeof backdrop !== "boolean" ? backdrop : "div";
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _LAUATD5Ocjs.Role, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, {}) }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SFDUOV6Fcjs.Role, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, {}) }));
 }
 
 

package/cjs/__chunks/{HEEQY4DZ.cjs → 43LZBXXJ.cjs}

@@ -2,15 +2,15 @@
 
 
 
-var _UZNYSPKPcjs = require('./UZNYSPKP.cjs');
+var _4XFLDG56cjs = require('./4XFLDG56.cjs');
 
 
-var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
 
 // src/radio/radio-context.tsx
-var ctx = _RNZNGEL4cjs.createStoreContext.call(void 0, 
-  [_UZNYSPKPcjs.CompositeContextProvider],
-  [_UZNYSPKPcjs.CompositeScopedContextProvider]
+var ctx = _Q67LZMDTcjs.createStoreContext.call(void 0, 
+  [_4XFLDG56cjs.CompositeContextProvider],
+  [_4XFLDG56cjs.CompositeScopedContextProvider]
 );
 var useRadioContext = ctx.useContext;
 var useRadioScopedContext = ctx.useScopedContext;

package/cjs/__chunks/47V4ED4R.cjs

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _FE3YCURHcjs = require('./FE3YCURH.cjs');
+
+
+
+
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
+
+
+var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
+
+
+var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
+
+// src/group/group.tsx
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useGroup = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useGroup2(props) {
+    const [labelId, setLabelId] = _react.useState.call(void 0, );
+    props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FE3YCURHcjs.GroupLabelContext.Provider, { value: setLabelId, children: element }),
+      []
+    );
+    props = _AV6KTKLEcjs.__spreadValues.call(void 0, {
+      role: "group",
+      "aria-labelledby": labelId
+    }, props);
+    return _misc.removeUndefinedValues.call(void 0, props);
+  }
+);
+var Group = _Q67LZMDTcjs.forwardRef.call(void 0, function Group2(props) {
+  const htmlProps = useGroup(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+
+exports.useGroup = useGroup; exports.Group = Group;

package/cjs/__chunks/{T4KYZJUY.cjs → 4ITCBJNT.cjs}

@@ -6,7 +6,7 @@ var _ERFHNHONcjs = require('./ERFHNHON.cjs');
 
 
 
-var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
 
 
 
@@ -15,7 +15,9 @@ var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
 
 // src/checkbox/checkbox-check.tsx
 var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
+var TagName = "span";
 var checkmark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   "svg",
   {
@@ -40,8 +42,8 @@ function getChildren(props) {
   }
   return null;
 }
-var useCheckboxCheck = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var useCheckboxCheck = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useCheckboxCheck2(_a) {
     var _b = _a, { store, checked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
     const context = _react.useContext.call(void 0, _ERFHNHONcjs.CheckboxCheckedContext);
     checked = checked != null ? checked : context;
@@ -56,16 +58,13 @@ var useCheckboxCheck = _RNZNGEL4cjs.createHook.call(void 0,
         pointerEvents: "none"
       }, props.style)
     });
-    return props;
+    return _misc.removeUndefinedValues.call(void 0, props);
   }
 );
-var CheckboxCheck = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var CheckboxCheck = _Q67LZMDTcjs.forwardRef.call(void 0, function CheckboxCheck2(props) {
   const htmlProps = useCheckboxCheck(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "span", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  CheckboxCheck.displayName = "CheckboxCheck";
-}
 
 
 

package/cjs/__chunks/{KSPMHEYZ.cjs → 4OFNVXGN.cjs}

@@ -46,11 +46,22 @@ function disableTree(element, ignoredElements) {
 function disableTreeOutside(id, elements) {
   const cleanups = [];
   const ids = elements.map((el) => el == null ? void 0 : el.id);
-  _5GTNIPQ6cjs.walkTreeOutside.call(void 0, id, elements, (element) => {
-    if (_7YLCVXZ7cjs.isBackdrop.call(void 0, element, ...ids))
-      return;
-    cleanups.unshift(disableTree(element, elements));
-  });
+  _5GTNIPQ6cjs.walkTreeOutside.call(void 0, 
+    id,
+    elements,
+    (element) => {
+      if (_7YLCVXZ7cjs.isBackdrop.call(void 0, element, ...ids))
+        return;
+      cleanups.unshift(disableTree(element, elements));
+    },
+    (element) => {
+      if (!element.hasAttribute("role"))
+        return;
+      if (elements.some((el) => el && _dom.contains.call(void 0, el, element)))
+        return;
+      cleanups.unshift(_V24PR4PWcjs.setAttribute.call(void 0, element, "role", "none"));
+    }
+  );
   const restoreTreeOutside = () => {
     cleanups.forEach((fn) => fn());
   };

package/cjs/__chunks/{CGIHR7QS.cjs → 4R64K3WW.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
 
 
-var _NGEKJJDHcjs = require('./NGEKJJDH.cjs');
+var _HD6KOF3Gcjs = require('./HD6KOF3G.cjs');
 
 
-var _7LBZXSLYcjs = require('./7LBZXSLY.cjs');
+var _GAHLF3OIcjs = require('./GAHLF3OI.cjs');
 
 
-var _3WCBE6SUcjs = require('./3WCBE6SU.cjs');
+var _OBT2YMBCcjs = require('./OBT2YMBC.cjs');
 
 
 var _LUL2YWZ3cjs = require('./LUL2YWZ3.cjs');
 
 
-var _OZ4FTKEHcjs = require('./OZ4FTKEH.cjs');
+var _G5BGNCVUcjs = require('./G5BGNCVU.cjs');
 
 
 
@@ -30,19 +30,24 @@ var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
 var _menustore = require('@ariakit/core/menu/menu-store'); var Core = _interopRequireWildcard(_menustore);
 function useMenuStoreProps(store, update, props) {
   _EO6LS72Hcjs.useUpdateEffect.call(void 0, update, [props.combobox, props.parent, props.menubar]);
-  store = _LUL2YWZ3cjs.useCompositeStoreProps.call(void 0, store, update, props);
-  store = _OZ4FTKEHcjs.useHovercardStoreProps.call(void 0, store, update, props);
   _OLOZ5JT2cjs.useStoreProps.call(void 0, store, props, "values", "setValues");
-  return Object.assign(store, {
-    combobox: props.combobox,
-    parent: props.parent,
-    menubar: props.menubar
-  });
+  return Object.assign(
+    _G5BGNCVUcjs.useHovercardStoreProps.call(void 0, 
+      _LUL2YWZ3cjs.useCompositeStoreProps.call(void 0, store, update, props),
+      update,
+      props
+    ),
+    {
+      combobox: props.combobox,
+      parent: props.parent,
+      menubar: props.menubar
+    }
+  );
 }
 function useMenuStore(props = {}) {
-  const parent = _NGEKJJDHcjs.useMenuContext.call(void 0, );
-  const menubar = _7LBZXSLYcjs.useMenubarContext.call(void 0, );
-  const combobox = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
+  const parent = _HD6KOF3Gcjs.useMenuContext.call(void 0, );
+  const menubar = _GAHLF3OIcjs.useMenubarContext.call(void 0, );
+  const combobox = _OBT2YMBCcjs.useComboboxProviderContext.call(void 0, );
   props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
     parent: props.parent !== void 0 ? props.parent : parent,
     menubar: props.menubar !== void 0 ? props.menubar : menubar,

package/cjs/__chunks/{UZNYSPKP.cjs → 4XFLDG56.cjs}

@@ -2,16 +2,16 @@
 
 
 
-var _BZTDJIVTcjs = require('./BZTDJIVT.cjs');
+var _Q6CVYJBOcjs = require('./Q6CVYJBO.cjs');
 
 
-var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
 
 // src/composite/composite-context.tsx
 var _react = require('react');
-var ctx = _RNZNGEL4cjs.createStoreContext.call(void 0, 
-  [_BZTDJIVTcjs.CollectionContextProvider],
-  [_BZTDJIVTcjs.CollectionScopedContextProvider]
+var ctx = _Q67LZMDTcjs.createStoreContext.call(void 0, 
+  [_Q6CVYJBOcjs.CollectionContextProvider],
+  [_Q6CVYJBOcjs.CollectionScopedContextProvider]
 );
 var useCompositeContext = ctx.useContext;
 var useCompositeScopedContext = ctx.useScopedContext;

package/cjs/__chunks/5SRODZ4B.cjs

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _75KXQZJXcjs = require('./75KXQZJX.cjs');
+
+
+
+
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
+
+
+var _EO6LS72Hcjs = require('./EO6LS72H.cjs');
+
+
+var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
+
+// src/focusable/focusable-container.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useFocusableContainer = _Q67LZMDTcjs.createHook.call(void 0, function useFocusableContainer2(_a) {
+  var _b = _a, { autoFocusOnShow = true } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["autoFocusOnShow"]);
+  props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+    props,
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _75KXQZJXcjs.FocusableContext.Provider, { value: autoFocusOnShow, children: element }),
+    [autoFocusOnShow]
+  );
+  return props;
+});
+var FocusableContainer = _Q67LZMDTcjs.forwardRef.call(void 0, function FocusableContainer2(props) {
+  const htmlProps = useFocusableContainer(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+
+exports.useFocusableContainer = useFocusableContainer; exports.FocusableContainer = FocusableContainer;

package/cjs/__chunks/{LY6FB2NE.cjs → 6772TC3F.cjs}

@@ -2,14 +2,14 @@
 
 
 
-var _6LVRCU4Jcjs = require('./6LVRCU4J.cjs');
+var _C6G4FIVIcjs = require('./C6G4FIVI.cjs');
 
 
-var _UZNYSPKPcjs = require('./UZNYSPKP.cjs');
+var _4XFLDG56cjs = require('./4XFLDG56.cjs');
 
 
 
-var _RNZNGEL4cjs = require('./RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('./Q67LZMDT.cjs');
 
 
 var _OLOZ5JT2cjs = require('./OLOZ5JT2.cjs');
@@ -24,6 +24,7 @@ var _AV6KTKLEcjs = require('./AV6KTKLE.cjs');
 
 // src/composite/composite-renderer.tsx
 var _react = require('react');
+var TagName = "div";
 function getItemObject(item) {
   if (!item || typeof item !== "object") {
     return { value: item };
@@ -68,7 +69,7 @@ function findLast(items) {
 function findById(items, id, baseId) {
   return items.findIndex((item, index) => {
     var _a;
-    const itemId = _6LVRCU4Jcjs.getCollectionRendererItemId.call(void 0, item, index, baseId);
+    const itemId = _C6G4FIVIcjs.getCollectionRendererItemId.call(void 0, item, index, baseId);
     if (itemId === id)
       return true;
     const object = getItemObject(item);
@@ -96,7 +97,7 @@ function useCompositeRenderer(_a) {
     "aria-setsize",
     "aria-posinset"
   ]);
-  const context = _UZNYSPKPcjs.useCompositeContext.call(void 0, );
+  const context = _4XFLDG56cjs.useCompositeContext.call(void 0, );
   store = store || context;
   const orientation = _OLOZ5JT2cjs.useStoreState.call(void 0, 
     store,
@@ -160,7 +161,7 @@ function useCompositeRenderer(_a) {
     }
     return indices;
   }, [firstIndex, activeIndex, lastIndex, persistentIndicesProp]);
-  return _6LVRCU4Jcjs.useCollectionRenderer.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+  return _C6G4FIVIcjs.useCollectionRenderer.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
     id,
     store,
     orientation,
@@ -176,9 +177,9 @@ function useCompositeRenderer(_a) {
     }
   }));
 }
-var CompositeRenderer = _RNZNGEL4cjs.forwardRef.call(void 0, function CompositeRenderer2(props) {
+var CompositeRenderer = _Q67LZMDTcjs.forwardRef.call(void 0, function CompositeRenderer2(props) {
   const htmlProps = useCompositeRenderer(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });