@ariakit/react 0.4.25 → 0.4.27

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @ariakit/react
 
+## 0.4.27
+
+- Fixed [`Menu`](https://ariakit.com/reference/menu) to respect the [`autoFocusOnShow`](https://ariakit.com/reference/menu#autofocusonshow) prop when set to `false` or when a callback returns `false`, while still allowing arrow keys to move focus into an already-open menu.
+- Updated dependencies: `@ariakit/react-components@0.1.0`
+
+## 0.4.26
+
+This version focuses on bug fixes across [`Dialog`](https://ariakit.com/reference/dialog), [`Portal`](https://ariakit.com/reference/portal), [`Radio`](https://ariakit.com/reference/radio), [`Combobox`](https://ariakit.com/reference/combobox), and [`MenuButton`](https://ariakit.com/reference/menu-button), along with improvements to how portals behave inside fullscreen elements, how dialogs handle events in popup windows, and how [`Radio`](https://ariakit.com/reference/radio) groups automatically generate unique `name` attributes.
+
+### Fixed events not handled in popup windows
+
+[`Dialog`](https://ariakit.com/reference/dialog) and components that extend it, such as [`Menu`](https://ariakit.com/reference/menu) and [`Popover`](https://ariakit.com/reference/popover), now handle events correctly when rendered in a popup window opened via `window.open()`. [`hideOnEscape`](https://ariakit.com/reference/dialog#hideonescape), [`hideOnInteractOutside`](https://ariakit.com/reference/dialog#hideoninteractoutside), and focus restoration now use the content element's `ownerDocument` instead of the main window's `document` for event listeners.
+
+### Fixed `Portal` not rendering inside fullscreen elements
+
+[`Portal`](https://ariakit.com/reference/portal) was always appended to `document.body`, which made it invisible when an ancestor element entered fullscreen mode via the Fullscreen API. Portals are now automatically moved to `document.fullscreenElement` when it's active, and back to `document.body` when fullscreen is exited.
+
+### Auto-generated `name` attribute for `Radio`
+
+[`Radio`](https://ariakit.com/reference/radio) now automatically uses the [`RadioGroup`](https://ariakit.com/reference/radio-group) store's `id` as the default [`name`](https://ariakit.com/reference/radio#name) attribute when no explicit `name` prop is provided. This ensures consecutive [`RadioGroup`](https://ariakit.com/reference/radio-group) components have unique names, preventing the browser from treating all radio inputs as a single group and fixing Tab navigation and form submission issues.
+
+### Other updates
+
+- Fixed [`Combobox`](https://ariakit.com/reference/combobox) pressing Enter from submitting a parent form when the popover is open but has no matching items.
+- Fixed [`Dialog`](https://ariakit.com/reference/dialog) not removing `data-enter` when closed after using the [`render`](https://ariakit.com/reference/dialog#render) prop to wrap the dialog element in an outer element.
+- Fixed [`Dialog`](https://ariakit.com/reference/dialog) not restoring focus to the disclosure element when the dialog was opened and closed quickly in succession.
+- Fixed [`MenuButton`](https://ariakit.com/reference/menu-button) `aria-haspopup` attribute changing from `"menu"` to `"dialog"` when opening a menu that contains a combobox.
+- Fixed [`render`](https://ariakit.com/guide/composition) prop merging when the rendered element passes falsy `className` or event handler values such as `undefined` or `null`.
+- Fixed `Math.random()` being called unconditionally when creating composite stores ([`useTabStore`](https://ariakit.com/reference/use-tab-store), [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store), [`useSelectStore`](https://ariakit.com/reference/use-select-store), etc.), even when an explicit `id` prop was provided. This was causing Next.js build errors with `cacheComponents` enabled.
+- Updated dependencies: `@ariakit/react-core@0.4.26`
+
 ## 0.4.25
 
 ### Clicking outside no longer restores focus to the disclosure element

package/cjs/__chunks/2HXQHKBC.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _PU63IQFDcjs = require('./PU63IQFD.cjs');
+
+
+var _SXAPGTJ4cjs = require('./SXAPGTJ4.cjs');
+
+
+
+var _LS5VO6AAcjs = require('./LS5VO6AA.cjs');
+
+
+
+
+var _QAUJZR6Ycjs = require('./QAUJZR6Y.cjs');
+
+// ../ariakit-react-components/dist/hovercard/hovercard-description.js
+var TagName = "p";
+var useHovercardDescription = _QAUJZR6Ycjs.createHook.call(void 0, function useHovercardDescription2(props) {
+  props = _SXAPGTJ4cjs.usePopoverDescription.call(void 0, props);
+  return props;
+});
+var HovercardDescription = _QAUJZR6Ycjs.forwardRef.call(void 0, function HovercardDescription2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName, useHovercardDescription(props));
+});
+
+// ../ariakit-react-components/dist/hovercard/hovercard-dismiss.js
+var TagName2 = "button";
+var useHovercardDismiss = _QAUJZR6Ycjs.createHook.call(void 0, function useHovercardDismiss2({ store, ...props }) {
+  const context = _PU63IQFDcjs.useHovercardScopedContext.call(void 0, );
+  store = store || context;
+  props = _LS5VO6AAcjs.usePopoverDismiss.call(void 0, {
+    store,
+    ...props
+  });
+  return props;
+});
+var HovercardDismiss = _QAUJZR6Ycjs.forwardRef.call(void 0, function HovercardDismiss2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName2, useHovercardDismiss(props));
+});
+
+// ../ariakit-react-components/dist/hovercard/hovercard-heading.js
+var TagName3 = "h1";
+var useHovercardHeading = _QAUJZR6Ycjs.createHook.call(void 0, function useHovercardHeading2(props) {
+  props = _LS5VO6AAcjs.usePopoverHeading.call(void 0, props);
+  return props;
+});
+var HovercardHeading = _QAUJZR6Ycjs.forwardRef.call(void 0, function HovercardHeading2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName3, useHovercardHeading(props));
+});
+
+
+
+
+
+
+
+
+exports.useHovercardDescription = useHovercardDescription; exports.HovercardDescription = HovercardDescription; exports.useHovercardDismiss = useHovercardDismiss; exports.HovercardDismiss = HovercardDismiss; exports.useHovercardHeading = useHovercardHeading; exports.HovercardHeading = HovercardHeading;

package/cjs/__chunks/2MDC3Z3V.cjs

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+var _XPQIHUQ7cjs = require('./XPQIHUQ7.cjs');
+
+
+
+
+
+
+var _QAUJZR6Ycjs = require('./QAUJZR6Y.cjs');
+
+// ../ariakit-react-components/dist/collection/collection.js
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useCollection = _QAUJZR6Ycjs.createHook.call(void 0, function useCollection2({ store, ...props }) {
+  const context = _XPQIHUQ7cjs.useCollectionProviderContext.call(void 0, );
+  store = store || context;
+  props = _QAUJZR6Ycjs.useWrapElement.call(void 0, props, (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XPQIHUQ7cjs.CollectionScopedContextProvider, {
+    value: store,
+    children: element
+  }), [store]);
+  return _QAUJZR6Ycjs.removeUndefinedValues.call(void 0, props);
+});
+var Collection = _QAUJZR6Ycjs.forwardRef.call(void 0, function Collection2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName, useCollection(props));
+});
+
+// ../ariakit-react-components/dist/collection/collection-provider.js
+
+function CollectionProvider(props = {}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XPQIHUQ7cjs.CollectionContextProvider, {
+    value: _XPQIHUQ7cjs.useCollectionStore.call(void 0, props),
+    children: props.children
+  });
+}
+
+
+
+
+exports.Collection = Collection; exports.CollectionProvider = CollectionProvider;

package/cjs/__chunks/334WKW6I.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _PDPE2VAZcjs = require('./PDPE2VAZ.cjs');
+
+
+var _7M4GY5DScjs = require('./7M4GY5DS.cjs');
+
+// ../ariakit-react-components/dist/dialog/dialog-provider.js
+var _jsxruntime = require('react/jsx-runtime');
+function DialogProvider(props = {}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7M4GY5DScjs.DialogContextProvider, {
+    value: _PDPE2VAZcjs.useDialogStore.call(void 0, props),
+    children: props.children
+  });
+}
+
+
+
+exports.DialogProvider = DialogProvider;

package/cjs/__chunks/34UJGLOZ.cjs

@@ -0,0 +1,236 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+var _PU63IQFDcjs = require('./PU63IQFD.cjs');
+
+
+var _RVXPEX7Ocjs = require('./RVXPEX7O.cjs');
+
+
+var _PDPE2VAZcjs = require('./PDPE2VAZ.cjs');
+
+
+
+
+
+
+var _D4HCGWOUcjs = require('./D4HCGWOU.cjs');
+
+
+
+
+
+
+
+
+
+
+
+
+var _QAUJZR6Ycjs = require('./QAUJZR6Y.cjs');
+
+// ../ariakit-react-components/dist/tooltip/tooltip-context.js
+var ctx = _QAUJZR6Ycjs.createStoreContext.call(void 0, [_PU63IQFDcjs.HovercardContextProvider], [_PU63IQFDcjs.HovercardScopedContextProvider]);
+var useTooltipContext = ctx.useContext;
+var useTooltipScopedContext = ctx.useScopedContext;
+var useTooltipProviderContext = ctx.useProviderContext;
+var TooltipContextProvider = ctx.ContextProvider;
+var TooltipScopedContextProvider = ctx.ScopedContextProvider;
+
+// ../ariakit-react-components/dist/tooltip/tooltip.js
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useTooltip = _QAUJZR6Ycjs.createHook.call(void 0, function useTooltip2({ store, portal = true, gutter = 8, preserveTabOrder = false, hideOnHoverOutside = true, hideOnInteractOutside = true, ...props }) {
+  const context = useTooltipProviderContext();
+  store = store || context;
+  _QAUJZR6Ycjs.invariant.call(void 0, store, "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component.");
+  props = _QAUJZR6Ycjs.useWrapElement.call(void 0, props, (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipScopedContextProvider, {
+    value: store,
+    children: element
+  }), [store]);
+  props = {
+    role: _D4HCGWOUcjs.useStoreState.call(void 0, store, (state) => state.type === "description" ? "tooltip" : "none"),
+    ...props
+  };
+  props = _PU63IQFDcjs.useHovercard.call(void 0, {
+    ...props,
+    store,
+    portal,
+    gutter,
+    preserveTabOrder,
+    hideOnHoverOutside(event) {
+      if (_QAUJZR6Ycjs.isFalsyBooleanCallback.call(void 0, hideOnHoverOutside, event)) return false;
+      const anchorElement = store == null ? void 0 : store.getState().anchorElement;
+      if (!anchorElement) return true;
+      if ("focusVisible" in anchorElement.dataset) return false;
+      return true;
+    },
+    hideOnInteractOutside: (event) => {
+      if (_QAUJZR6Ycjs.isFalsyBooleanCallback.call(void 0, hideOnInteractOutside, event)) return false;
+      const anchorElement = store == null ? void 0 : store.getState().anchorElement;
+      if (!anchorElement) return true;
+      if (_QAUJZR6Ycjs.contains.call(void 0, anchorElement, event.target)) return false;
+      return true;
+    }
+  });
+  return props;
+});
+var Tooltip = _PDPE2VAZcjs.createDialogComponent.call(void 0, _QAUJZR6Ycjs.forwardRef.call(void 0, function Tooltip2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName, useTooltip(props));
+}), useTooltipProviderContext);
+
+// ../ariakit-react-components/dist/tooltip/tooltip-anchor.js
+var _react = require('react');
+var TagName2 = "div";
+var globalStore = _D4HCGWOUcjs.createStore.call(void 0, { activeStore: null });
+function createRemoveStoreCallback(store) {
+  return () => {
+    const { activeStore } = globalStore.getState();
+    if (activeStore !== store) return;
+    globalStore.setState("activeStore", null);
+  };
+}
+var useTooltipAnchor = _QAUJZR6Ycjs.createHook.call(void 0, function useTooltipAnchor2({ store, showOnHover = true, ...props }) {
+  const context = useTooltipProviderContext();
+  store = store || context;
+  _QAUJZR6Ycjs.invariant.call(void 0, store, "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.");
+  const canShowOnHoverRef = _react.useRef.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    return _D4HCGWOUcjs.sync.call(void 0, store, ["mounted"], (state) => {
+      if (state.mounted) return;
+      canShowOnHoverRef.current = false;
+    });
+  }, [store]);
+  _react.useEffect.call(void 0, () => {
+    if (!store) return;
+    return _QAUJZR6Ycjs.chain.call(void 0, createRemoveStoreCallback(store), _D4HCGWOUcjs.sync.call(void 0, store, ["mounted", "skipTimeout"], (state) => {
+      if (!store) return;
+      if (state.mounted) {
+        const { activeStore } = globalStore.getState();
+        if (activeStore !== store) activeStore == null ? void 0 : activeStore.hide();
+        return globalStore.setState("activeStore", store);
+      }
+      const id = setTimeout(createRemoveStoreCallback(store), state.skipTimeout);
+      return () => clearTimeout(id);
+    }));
+  }, [store]);
+  const onMouseEnterProp = props.onMouseEnter;
+  const onMouseEnter = _QAUJZR6Ycjs.useEvent.call(void 0, (event) => {
+    onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
+    canShowOnHoverRef.current = true;
+  });
+  const onFocusVisibleProp = props.onFocusVisible;
+  const onFocusVisible = _QAUJZR6Ycjs.useEvent.call(void 0, (event) => {
+    onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event);
+    if (event.defaultPrevented) return;
+    store == null ? void 0 : store.setAnchorElement(event.currentTarget);
+    store == null ? void 0 : store.show();
+  });
+  const onBlurProp = props.onBlur;
+  const onBlur = _QAUJZR6Ycjs.useEvent.call(void 0, (event) => {
+    onBlurProp == null ? void 0 : onBlurProp(event);
+    if (event.defaultPrevented) return;
+    const { activeStore } = globalStore.getState();
+    canShowOnHoverRef.current = false;
+    if (activeStore === store) globalStore.setState("activeStore", null);
+  });
+  const type = _D4HCGWOUcjs.useStoreState.call(void 0, store, "type");
+  const contentId = _D4HCGWOUcjs.useStoreState.call(void 0, store, (state) => {
+    var _a;
+    return (_a = state.contentElement) == null ? void 0 : _a.id;
+  });
+  props = {
+    "aria-labelledby": type === "label" && props["aria-label"] == null ? contentId : void 0,
+    ...props,
+    onMouseEnter,
+    onFocusVisible,
+    onBlur
+  };
+  props = _PU63IQFDcjs.useHovercardAnchor.call(void 0, {
+    store,
+    showOnHover(event) {
+      if (!canShowOnHoverRef.current) return false;
+      if (_QAUJZR6Ycjs.isFalsyBooleanCallback.call(void 0, showOnHover, event)) return false;
+      const { activeStore } = globalStore.getState();
+      if (!activeStore) return true;
+      store == null ? void 0 : store.show();
+      return false;
+    },
+    ...props
+  });
+  return props;
+});
+var TooltipAnchor = _QAUJZR6Ycjs.forwardRef.call(void 0, function TooltipAnchor2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName2, useTooltipAnchor(props));
+});
+
+// ../ariakit-react-components/dist/tooltip/tooltip-arrow.js
+var TagName3 = "div";
+var useTooltipArrow = _QAUJZR6Ycjs.createHook.call(void 0, function useTooltipArrow2({ store, size = 16, ...props }) {
+  const context = useTooltipContext();
+  store = store || context;
+  _QAUJZR6Ycjs.invariant.call(void 0, store, "TooltipArrow must be wrapped in a Tooltip component.");
+  props = _RVXPEX7Ocjs.usePopoverArrow.call(void 0, {
+    store,
+    size,
+    ...props
+  });
+  return props;
+});
+var TooltipArrow = _QAUJZR6Ycjs.forwardRef.call(void 0, function TooltipArrow2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName3, useTooltipArrow(props));
+});
+
+// ../ariakit-components/dist/tooltip/tooltip-store.js
+function createTooltipStore(props = {}) {
+  var _a;
+  if (props.type === "label") console.warn("The `type` option on the tooltip store is deprecated.", "Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.", "See https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names");
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+  const hovercard = _PU63IQFDcjs.createHovercardStore.call(void 0, {
+    ...props,
+    placement: _QAUJZR6Ycjs.defaultValue.call(void 0, props.placement, syncState == null ? void 0 : syncState.placement, "top"),
+    hideTimeout: _QAUJZR6Ycjs.defaultValue.call(void 0, props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0)
+  });
+  const tooltip = _D4HCGWOUcjs.createStore.call(void 0, {
+    ...hovercard.getState(),
+    type: _QAUJZR6Ycjs.defaultValue.call(void 0, props.type, syncState == null ? void 0 : syncState.type, "description"),
+    skipTimeout: _QAUJZR6Ycjs.defaultValue.call(void 0, props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300)
+  }, hovercard, props.store);
+  return {
+    ...hovercard,
+    ...tooltip
+  };
+}
+
+// ../ariakit-react-components/dist/tooltip/tooltip-store.js
+function useTooltipStoreProps(store, update, props) {
+  _D4HCGWOUcjs.useStoreProps.call(void 0, store, props, "type");
+  _D4HCGWOUcjs.useStoreProps.call(void 0, store, props, "skipTimeout");
+  return _PU63IQFDcjs.useHovercardStoreProps.call(void 0, store, update, props);
+}
+function useTooltipStore(props = {}) {
+  const [store, update] = _D4HCGWOUcjs.useStore.call(void 0, createTooltipStore, props);
+  return useTooltipStoreProps(store, update, props);
+}
+
+// ../ariakit-react-components/dist/tooltip/tooltip-provider.js
+
+function TooltipProvider(props = {}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipContextProvider, {
+    value: useTooltipStore(props),
+    children: props.children
+  });
+}
+
+
+
+
+
+
+
+
+exports.useTooltipContext = useTooltipContext; exports.Tooltip = Tooltip; exports.TooltipAnchor = TooltipAnchor; exports.TooltipArrow = TooltipArrow; exports.useTooltipStore = useTooltipStore; exports.TooltipProvider = TooltipProvider;

package/cjs/__chunks/3FIXGHZ2.cjs

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _X4U3XKYQcjs = require('./X4U3XKYQ.cjs');
+
+
+
+
+
+var _QAUJZR6Ycjs = require('./QAUJZR6Y.cjs');
+
+// ../ariakit-react-components/dist/checkbox/checkbox-check.js
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "span";
+var checkmark = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
+  display: "block",
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 1.5,
+  viewBox: "0 0 16 16",
+  height: "1em",
+  width: "1em",
+  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "polyline", { points: "4,8 7,12 12,4" })
+});
+function getChildren(props) {
+  if (props.checked) return props.children || checkmark;
+  if (typeof props.children === "function") return props.children;
+  return null;
+}
+var useCheckboxCheck = _QAUJZR6Ycjs.createHook.call(void 0, function useCheckboxCheck2({ store, checked, ...props }) {
+  const context = _react.useContext.call(void 0, _X4U3XKYQcjs.CheckboxCheckedContext);
+  checked = checked != null ? checked : context;
+  const children = getChildren({
+    checked,
+    children: props.children
+  });
+  props = {
+    "aria-hidden": true,
+    ...props,
+    children,
+    style: {
+      width: "1em",
+      height: "1em",
+      pointerEvents: "none",
+      ...props.style
+    }
+  };
+  return _QAUJZR6Ycjs.removeUndefinedValues.call(void 0, props);
+});
+var CheckboxCheck = _QAUJZR6Ycjs.forwardRef.call(void 0, function CheckboxCheck2(props) {
+  return _QAUJZR6Ycjs.createElement.call(void 0, TagName, useCheckboxCheck(props));
+});
+
+
+
+
+exports.useCheckboxCheck = useCheckboxCheck; exports.CheckboxCheck = CheckboxCheck;