@ariakit/react-components 0.1.0 → 0.1.2

package/src/composite/composite-renderer.tsx

@@ -16,7 +16,7 @@ import {
   useCollectionRenderer,
 } from "../collection/collection-renderer.tsx";
 import type { CollectionStoreItem } from "../collection/collection-store.ts";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import type { CompositeStore, CompositeStoreItem } from "./composite-store.ts";
 
 const TagName = "div" satisfies ElementType;
@@ -102,7 +102,7 @@ export function useCompositeRenderer<T extends Item = any>({
   "aria-posinset": ariaPosInSet = 1,
   ...props
 }: CompositeRendererProps<T>) {
-  const context = useCompositeContext();
+  const context = useCompositeScopedContext();
   store = store || (context as typeof store);
 
   const orientation = useStoreState(store, (state) =>

package/src/composite/composite-row.tsx

@@ -12,7 +12,7 @@ import type { ElementType } from "react";
 import { useMemo } from "react";
 import {
   CompositeRowContext,
-  useCompositeContext,
+  useCompositeScopedContext,
 } from "./composite-context.tsx";
 import type { CompositeStore } from "./composite-store.ts";
 
@@ -44,7 +44,7 @@ export const useCompositeRow = createHook<TagName, CompositeRowOptions>(
     "aria-posinset": ariaPosInSet,
     ...props
   }) {
-    const context = useCompositeContext();
+    const context = useCompositeScopedContext();
     store = store || context;
 
     invariant(

package/src/composite/composite-separator.tsx

@@ -5,7 +5,7 @@ import { invariant } from "@ariakit/utils";
 import type { ElementType } from "react";
 import type { SeparatorOptions } from "../separator/separator.tsx";
 import { useSeparator } from "../separator/separator.tsx";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import type { CompositeStore } from "./composite-store.ts";
 
 const TagName = "hr" satisfies ElementType;
@@ -29,7 +29,7 @@ export const useCompositeSeparator = createHook<
   TagName,
   CompositeSeparatorOptions
 >(function useCompositeSeparator({ store, ...props }) {
-  const context = useCompositeContext();
+  const context = useCompositeScopedContext();
   store = store || context;
 
   invariant(

package/src/composite/composite-typeahead.tsx

@@ -16,7 +16,7 @@ import {
 } from "@ariakit/utils";
 import type { ElementType, KeyboardEvent } from "react";
 import { useRef } from "react";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import type { CompositeStore, CompositeStoreItem } from "./composite-store.ts";
 import { flipItems } from "./utils.ts";
 
@@ -112,7 +112,7 @@ export const useCompositeTypeahead = createHook<
   TagName,
   CompositeTypeaheadOptions
 >(function useCompositeTypeahead({ store, typeahead = true, ...props }) {
-  const context = useCompositeContext();
+  const context = useCompositeScopedContext();
   store = store || context;
 
   invariant(

package/src/composite/composite.tsx

@@ -35,7 +35,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { FocusableOptions } from "../focusable/focusable.tsx";
 import { useFocusable } from "../focusable/focusable.tsx";
 import {
-  CompositeContextProvider,
+  CompositeScopedContextProvider,
   useCompositeProviderContext,
 } from "./composite-context.tsx";
 import type { CompositeStore, CompositeStoreItem } from "./composite-store.ts";
@@ -445,9 +445,9 @@ export const useComposite = createHook<TagName, CompositeOptions>(
     props = useWrapElement(
       props,
       (element) => (
-        <CompositeContextProvider value={store}>
+        <CompositeScopedContextProvider value={store}>
           {element}
-        </CompositeContextProvider>
+        </CompositeScopedContextProvider>
       ),
       [store],
     );

package/src/dialog/dialog.tsx

@@ -20,6 +20,8 @@ import {
   getWindow,
   addGlobalEventListener,
   getFirstTabbableIn,
+  isElement,
+  isNode,
   isFocusable,
   chain,
   isSafari,
@@ -497,13 +499,16 @@ export const useDialog = createHook<TagName, DialogOptions>(function useDialog({
       // Ignore the event if the current dialog is marked by another dialog.
       // This guarantees that only the topmost dialog will close on Escape.
       if (isElementMarked(dialog)) return;
-      const target = event.target as Element | null;
-      if (!target) return;
+      const target = event.target;
+      // Guard against non-node targets (e.g. a synthetic event dispatched on
+      // window) so `contains` doesn't throw. `isNode` rather than `isElement`
+      // keeps non-element nodes working with `contains`, as before.
+      if (!isNode(target)) return;
       const { disclosureElement } = store.getState();
       // This considers valid targets only the disclosure element or descendants
       // of the dialog element.
       const isValidTarget = () => {
-        if (target.tagName === "BODY") return true;
+        if (isElement(target) && target.tagName === "BODY") return true;
         if (contains(dialog, target)) return true;
         if (!disclosureElement) return true;
         if (contains(disclosureElement, target)) return true;
@@ -608,6 +613,23 @@ export function createDialogComponent<T extends DialogOptions>(
   });
 }
 
+const DialogImpl = forwardRef(function DialogImpl(props: DialogProps) {
+  const htmlProps = useDialog(props);
+  return createElement(TagName, htmlProps);
+});
+
+const DialogWithStore = createDialogComponent(
+  DialogImpl,
+  useDialogProviderContext,
+);
+
+const DialogWithInternalStore = forwardRef(function DialogWithInternalStore(
+  props: DialogProps,
+) {
+  const store = useDialogStore({ open: props.open });
+  return <DialogWithStore {...props} store={store} />;
+});
+
 /**
  * Renders a dialog similar to the native `dialog` element that's rendered in a
  * [`portal`](https://ariakit.com/reference/dialog#portal) by default.
@@ -628,13 +650,14 @@ export function createDialogComponent<T extends DialogOptions>(
  * </Dialog>
  * ```
  */
-export const Dialog = createDialogComponent(
-  forwardRef(function Dialog(props: DialogProps) {
-    const htmlProps = useDialog(props);
-    return createElement(TagName, htmlProps);
-  }),
-  useDialogProviderContext,
-);
+export const Dialog = forwardRef(function Dialog(props: DialogProps) {
+  const context = useDialogProviderContext();
+  // The hoisted store is only needed for the unmountOnHide mounted-state gate.
+  if (props.store || context || !props.unmountOnHide) {
+    return <DialogWithStore {...props} />;
+  }
+  return <DialogWithInternalStore {...props} />;
+});
 
 export interface DialogOptions<T extends ElementType = TagName>
   extends FocusableOptions<T>, PortalOptions<T>, DisclosureContentOptions<T> {

package/src/dialog/utils/disable-accessibility-tree-outside.ts

@@ -1,30 +1,5 @@
-import { isBackdrop } from "./is-backdrop.ts";
 import { setAttribute } from "./orchestrate.ts";
-import { walkTreeOutside } from "./walk-tree-outside.ts";
-
-type Elements = Array<Element | null>;
 
 export function hideElementFromAccessibilityTree(element: Element) {
   return setAttribute(element, "aria-hidden", "true");
 }
-
-export function disableAccessibilityTreeOutside(
-  id: string,
-  elements: Elements,
-) {
-  const cleanups: Array<() => void> = [];
-  const ids = elements.map((el) => el?.id);
-
-  walkTreeOutside(id, elements, (element) => {
-    if (isBackdrop(element, ...ids)) return;
-    cleanups.unshift(hideElementFromAccessibilityTree(element));
-  });
-
-  const restoreAccessibilityTree = () => {
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-  };
-
-  return restoreAccessibilityTree;
-}

package/src/dialog/utils/use-hide-on-interact-outside.ts

@@ -5,6 +5,7 @@ import {
   getDocument,
   getWindow,
   addGlobalEventListener,
+  isElement,
 } from "@ariakit/utils";
 import type { MutableRefObject } from "react";
 import { useEffect, useRef } from "react";
@@ -78,9 +79,9 @@ function useEventOutside({
     if (!open) return;
     const onEvent = (event: Event) => {
       const { contentElement, disclosureElement } = store.getState();
-      const target = event.target as Element | null;
+      const target = event.target;
       if (!contentElement) return;
-      if (!target) return;
+      if (!isElement(target)) return;
       // When an element is unmounted right after it receives focus, the focus
       // event is triggered after that, when the element isn't part of the
       // current document anymore. We just ignore it.

package/src/focusable/focusable.tsx

@@ -10,6 +10,7 @@ import {
 import type { Options, Props } from "@ariakit/react-utils";
 import {
   addGlobalEventListener,
+  isElement,
   isFocusEventOutside,
   isSelfTarget,
   queueBeforeEvent,
@@ -119,6 +120,18 @@ function needsSafariTabIndex(tagName?: string, inputType?: string) {
   return false;
 }
 
+function isNativeSubmitControl(element: HTMLElement) {
+  if (element.tagName === "BUTTON") {
+    const { type } = element as HTMLButtonElement;
+    return type === "submit";
+  }
+  if (element.tagName === "INPUT") {
+    const { type } = element as HTMLInputElement;
+    return type === "submit" || type === "image";
+  }
+  return false;
+}
+
 function getTabIndex({
   focusable,
   trulyDisabled,
@@ -170,13 +183,11 @@ let hasInstalledGlobalEventListeners = false;
 let isKeyboardModality = true;
 
 function onGlobalMouseDown(event: MouseEvent) {
-  const target = event.target as HTMLElement | EventTarget | null;
-  if (target && "hasAttribute" in target) {
-    // If the target element is already focus-visible, we keep the keyboard
-    // modality.
-    if (!target.hasAttribute("data-focus-visible")) {
-      isKeyboardModality = false;
-    }
+  const target = event.target;
+  // If the target element is already focus-visible, we keep the keyboard
+  // modality.
+  if (isElement(target) && !target.hasAttribute("data-focus-visible")) {
+    isKeyboardModality = false;
   }
 }
 
@@ -225,16 +236,26 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
     const disabled = focusable && disabledFromProps(props);
     const trulyDisabled = disabled && !accessibleWhenDisabled;
     const [focusVisible, setFocusVisible] = useState(false);
+    const focusVisibleRef = useRef(false);
+    const nativeSubmitObserverCleanupRef = useRef<(() => void) | null>(null);
+    const cleanupFocusVisible = useEvent((element: HTMLElement | null) => {
+      nativeSubmitObserverCleanupRef.current?.();
+      nativeSubmitObserverCleanupRef.current = null;
+      focusVisibleRef.current = false;
+      element?.removeAttribute("data-focus-visible");
+    });
 
     // When the focusable element is disabled, it doesn't trigger a blur event
     // so we can't set focusVisible to false there. Instead, we have to do it
     // here by checking the element's disabled attribute.
     useEffect(() => {
       if (!focusable) return;
-      if (trulyDisabled && focusVisible) {
+      if (!trulyDisabled) return;
+      cleanupFocusVisible(ref.current);
+      if (focusVisible) {
         setFocusVisible(false);
       }
-    }, [focusable, trulyDisabled, focusVisible]);
+    }, [focusable, trulyDisabled, focusVisible, cleanupFocusVisible]);
 
     // When an element that has focus becomes hidden, it doesn't trigger a blur
     // event so we can't set focusVisible to false there. We observe the element
@@ -248,6 +269,7 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       if (typeof IntersectionObserver === "undefined") return;
       const observer = new IntersectionObserver(() => {
         if (!isFocusable(element)) {
+          focusVisibleRef.current = false;
           setFocusVisible(false);
         }
       });
@@ -255,6 +277,10 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       return () => observer.disconnect();
     }, [focusable, focusVisible]);
 
+    useEffect(() => {
+      return () => nativeSubmitObserverCleanupRef.current?.();
+    }, []);
+
     // Disable events when the element is disabled.
     const onKeyPressCapture = useDisableEvent(
       props.onKeyPressCapture,
@@ -286,6 +312,22 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       // other data attributes like data-active-item. See
       // https://github.com/ariakit/ariakit/issues/4083
       element.dataset.focusVisible = "true";
+      focusVisibleRef.current = true;
+      // React 19's useFormStatus may lose the pending state when local
+      // component state changes while a native submit control is pending.
+      if (isNativeSubmitControl(element)) {
+        nativeSubmitObserverCleanupRef.current?.();
+        nativeSubmitObserverCleanupRef.current = null;
+        if (typeof IntersectionObserver !== "undefined") {
+          const observer = new IntersectionObserver(() => {
+            if (isFocusable(element)) return;
+            cleanupFocusVisible(element);
+          });
+          observer.observe(element);
+          nativeSubmitObserverCleanupRef.current = () => observer.disconnect();
+        }
+        return;
+      }
       setFocusVisible(true);
     };
 
@@ -296,6 +338,7 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       if (event.defaultPrevented) return;
       if (!focusable) return;
       if (focusVisible) return;
+      if (focusVisibleRef.current) return;
       if (event.metaKey) return;
       if (event.altKey) return;
       if (event.ctrlKey) return;
@@ -335,7 +378,7 @@ export const useFocusable = createHook<TagName, FocusableOptions>(
       // Since we set the data-focus-visible attribute on the element in the
       // handleFocusVisible function, we remove it directly here. Otherwise, the
       // attribute might not be removed on lower-end devices.
-      event.currentTarget.removeAttribute("data-focus-visible");
+      cleanupFocusVisible(event.currentTarget);
       setFocusVisible(false);
     });
 

package/src/form/form-remove.tsx

@@ -62,9 +62,10 @@ function findPushButton(
  * const values = useStoreState(store, "values");
  *
  * <Form store={store}>
- *   {values.languages.map((_, i) => (
- *     <FormInput key={i} name={store.names.languages[i]} />
- *   ))}
+ *   {values.languages.map((language, i) => {
+ *     if (language == null) return null;
+ *     return <FormInput key={i} name={store.names.languages[i]} />;
+ *   })}
  *   <Role {...props}>Remove first language</Role>
  * </Form>
  * ```
@@ -136,7 +137,7 @@ export const useFormRemove = createHook<TagName, FormRemoveOptions>(
  * prop to `false`.
  * @see https://ariakit.com/components/form
  * @example
- * ```jsx {13}
+ * ```jsx {15}
  * const form = useFormStore({
  *   defaultValues: {
  *     languages: ["JavaScript", "PHP"],
@@ -146,12 +147,15 @@ export const useFormRemove = createHook<TagName, FormRemoveOptions>(
  * const values = useStoreState(form, "values");
  *
  * <Form store={form}>
- *   {values.languages.map((_, i) => (
- *     <div key={i}>
- *       <FormInput name={form.names.languages[i]} />
- *       <FormRemove name={form.names.languages} index={i} />
- *     </div>
- *   ))}
+ *   {values.languages.map((language, i) => {
+ *     if (language == null) return null;
+ *     return (
+ *       <div key={i}>
+ *         <FormInput name={form.names.languages[i]} />
+ *         <FormRemove name={form.names.languages} index={i} />
+ *       </div>
+ *     );
+ *   })}
  * </Form>
  * ```
  */

package/src/form/form.tsx

@@ -104,8 +104,10 @@ export const useForm = createHook<TagName, FormOptions>(function useForm({
   }, [autoFocusOnSubmit, submitFailed, items]);
 
   const onSubmitProp = props.onSubmit;
+  // React 19 types submit handlers with SubmitEvent instead of FormEvent.
+  type SubmitEvent = Parameters<NonNullable<typeof onSubmitProp>>[0];
 
-  const onSubmit = useEvent((event: FormEvent<HTMLType>) => {
+  const onSubmit = useEvent((event: SubmitEvent) => {
     onSubmitProp?.(event);
     if (event.defaultPrevented) return;
     event.preventDefault();

package/src/heading/heading.tsx

@@ -7,7 +7,7 @@ import {
 } from "@ariakit/react-utils";
 import type { Options, Props } from "@ariakit/react-utils";
 import type { ElementType } from "react";
-import { useContext, useMemo, useRef } from "react";
+import { useContext, useRef } from "react";
 import { HeadingContext } from "./heading-context.tsx";
 import type { HeadingLevels } from "./utils.ts";
 
@@ -33,10 +33,7 @@ export const useHeading = createHook<TagName, HeadingOptions>(
     const level: HeadingLevels = useContext(HeadingContext) || 1;
     const Element = `h${level}` as const;
     const tagName = useTagName(ref, Element);
-    const isNativeHeading = useMemo(
-      () => !!tagName && /^h\d$/.test(tagName),
-      [tagName],
-    );
+    const isNativeHeading = !!tagName && /^h\d$/.test(tagName);
 
     props = {
       render: <Element />,

package/src/hovercard/hovercard-disclosure.tsx

@@ -7,7 +7,13 @@ import {
 } from "@ariakit/react-utils";
 import type { Props } from "@ariakit/react-utils";
 import { sync } from "@ariakit/store";
-import { contains, addGlobalEventListener, invariant } from "@ariakit/utils";
+import {
+  contains,
+  addGlobalEventListener,
+  invariant,
+  isElement,
+  isNode,
+} from "@ariakit/utils";
 import type {
   ElementType,
   MouseEvent,
@@ -58,8 +64,11 @@ export const useHovercardDisclosure = createHook<
     if (!visible) return;
     const onBlur = (event: FocusEvent) => {
       if (!store) return;
-      const nextActiveElement = event.relatedTarget as Element | null;
-      if (nextActiveElement) {
+      const nextActiveElement = event.relatedTarget;
+      // `isNode` rather than `isElement` so non-element nodes keep working with
+      // `contains` (as before); a non-node relatedTarget (e.g. window) would
+      // make `contains` throw, so it falls through to hiding the disclosure.
+      if (isNode(nextActiveElement)) {
         const {
           anchorElement: anchor,
           popoverElement: popover,
@@ -72,7 +81,12 @@ export const useHovercardDisclosure = createHook<
         // it's going to render focus trap elements outside of the portal.
         // These elements may transfer focus to the disclosure button, so we
         // also ignore them here.
-        if (nextActiveElement.hasAttribute("data-focus-trap")) return;
+        if (
+          isElement(nextActiveElement) &&
+          nextActiveElement.hasAttribute("data-focus-trap")
+        ) {
+          return;
+        }
       }
       setVisible(false);
     };

package/src/hovercard/hovercard.tsx

@@ -65,7 +65,7 @@ function isMovingOnHovercard(
   // The mouse is moving on an element inside the anchor element.
   if (anchor && contains(anchor, target)) return true;
   // The mouse is moving on an element inside a nested hovercard.
-  if (nested?.some((card) => isMovingOnHovercard(target, card, anchor))) {
+  if (nested?.some((card) => hasFocusWithin(card) || contains(card, target))) {
     return true;
   }
   return false;

package/src/menu/menu-bar-store.ts

@@ -27,8 +27,8 @@ export function useMenuBarStoreProps<T extends Core.MenuBarStore>(
  * instead.
  * @example
  * ```jsx
- * const menu = useMenuBarStore();
- * <MenuBar store={menu} />
+ * const menubar = useMenuBarStore();
+ * <MenuBar store={menubar} />
  * ```
  */
 export function useMenuBarStore(props: MenuBarStoreProps = {}): MenuBarStore {

package/src/menu/menu-context.tsx

@@ -74,3 +74,11 @@ export const MenuBarScopedContextProvider = MenubarScopedContextProvider;
 export const MenuItemCheckedContext = createContext<boolean | undefined>(
   undefined,
 );
+
+/**
+ * Whether the enclosing menu list is currently hidden (e.g. a closed menu
+ * rendered without `unmountOnHide`). `MenuItem` uses it to skip registering
+ * items that aren't shown yet. Defaults to `false` so items without a menu list
+ * ancestor (such as menubar items) keep registering.
+ */
+export const MenuListHiddenContext = createContext(false);

package/src/menu/menu-item.tsx

@@ -17,6 +17,7 @@ import {
   invariant,
 } from "@ariakit/utils";
 import type { BooleanOrCallback } from "@ariakit/utils";
+import { useContext } from "react";
 import type { ElementType, MouseEvent } from "react";
 import type { CompositeHoverOptions } from "../composite/composite-hover.tsx";
 import { useCompositeHover } from "../composite/composite-hover.tsx";
@@ -24,7 +25,10 @@ import type { CompositeItemOptions } from "../composite/composite-item.tsx";
 import { useCompositeItem } from "../composite/composite-item.tsx";
 import { useMenubarScopedContext } from "../menubar/menubar-context.tsx";
 import type { MenubarStore } from "../menubar/menubar-store.ts";
-import { useMenuScopedContext } from "./menu-context.tsx";
+import {
+  MenuListHiddenContext,
+  useMenuScopedContext,
+} from "./menu-context.tsx";
 import type { MenuStore, MenuStoreState } from "./menu-store.ts";
 
 const TagName = "div" satisfies ElementType;
@@ -108,6 +112,10 @@ export const useMenuItem = createHook<TagName, MenuItemOptions>(
       "contentElement" in state ? state.contentElement : null,
     );
 
+    // Whether the enclosing menu list is currently hidden (provided by
+    // `MenuList`; see `MenuListHiddenContext`).
+    const menuListHidden = useContext(MenuListHiddenContext);
+
     const role = getPopupItemRole(contentElement, "menuitem");
 
     props = {
@@ -120,6 +128,15 @@ export const useMenuItem = createHook<TagName, MenuItemOptions>(
       store,
       preventScrollOnKeyDown,
       ...props,
+      // Skip registering items while the menu list is hidden. Unlike a Select,
+      // a Menu doesn't interact with its items while hidden, so registering
+      // them isn't useful. Registering many hidden menus' items at once on
+      // mount can also cascade into React's "Maximum update depth exceeded"
+      // error. Using the list's actual hidden state (rather than the store's
+      // `mounted` state) keeps items registered in `alwaysVisible` or
+      // `hidden={false}` menus, where the list is shown even while closed.
+      // See https://github.com/ariakit/ariakit/issues/3214.
+      shouldRegisterItem: menuListHidden ? false : props.shouldRegisterItem,
     });
 
     props = useCompositeHover({

package/src/menu/menu-list.tsx

@@ -19,6 +19,7 @@ import { useComposite } from "../composite/composite.tsx";
 import type { DisclosureContentOptions } from "../disclosure/disclosure-content.tsx";
 import { isHidden } from "../disclosure/disclosure-content.tsx";
 import {
+  MenuListHiddenContext,
   MenuScopedContextProvider,
   useMenuProviderContext,
 } from "./menu-context.tsx";
@@ -157,6 +158,20 @@ export const useMenuList = createHook<TagName, MenuListOptions>(
     const hidden = isHidden(mounted, props.hidden, alwaysVisible);
     const style = hidden ? { ...props.style, display: "none" } : props.style;
 
+    // Expose the list's actual hidden state so MenuItem can avoid registering
+    // items while they're not shown. This accounts for `alwaysVisible` and
+    // `hidden={false}`, where the list is visible even though the store is
+    // closed. See https://github.com/ariakit/ariakit/issues/3214.
+    props = useWrapElement(
+      props,
+      (element) => (
+        <MenuListHiddenContext.Provider value={hidden}>
+          {element}
+        </MenuListHiddenContext.Provider>
+      ),
+      [hidden],
+    );
+
     props = {
       "aria-labelledby": ariaLabelledBy,
       hidden,

package/src/menubar/menubar-context.tsx

@@ -1,5 +1,4 @@
 import { createStoreContext } from "@ariakit/react-utils";
-import { createContext } from "react";
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider,
@@ -33,7 +32,3 @@ export const useMenubarProviderContext = menubar.useProviderContext;
 export const MenubarContextProvider = menubar.ContextProvider;
 
 export const MenubarScopedContextProvider = menubar.ScopedContextProvider;
-
-export const MenuItemCheckedContext = createContext<boolean | undefined>(
-  undefined,
-);

package/src/menubar/menubar-store.ts

@@ -22,9 +22,9 @@ export function useMenubarStoreProps<T extends Core.MenubarStore>(
  * @see https://ariakit.com/components/menubar
  * @example
  * ```jsx
- * const menu = useMenubarStore();
+ * const menubar = useMenubarStore();
  *
- * <Menubar store={menu} />
+ * <Menubar store={menubar} />
  * ```
  */
 export function useMenubarStore(props: MenubarStoreProps = {}): MenubarStore {

package/src/popover/popover-arrow.tsx

@@ -128,7 +128,7 @@ export const usePopoverArrow = createHook<TagName, PopoverArrowOptions>(
               // the appearance of borders on HTML elements.
               <path
                 fill="none"
-                stroke={`var(--ak-layer, ${fill})`}
+                stroke={fill}
                 d={POPOVER_ARROW_PATH}
                 mask={`url(#${maskId})`}
               />
@@ -162,8 +162,8 @@ export const usePopoverArrow = createHook<TagName, PopoverArrowOptions>(
         width: "1em",
         height: "1em",
         pointerEvents: "none",
-        fill: `var(--ak-layer, ${fill})`,
-        stroke: `var(--ak-layer-border, ${stroke})`,
+        fill,
+        stroke,
         strokeWidth,
         ...props.style,
       },

package/src/popover/popover.tsx

@@ -526,6 +526,14 @@ export interface PopoverOptions<
    * @default false
    */
   fixed?: boolean;
+  /**
+   * @default false
+   */
+  modal?: DialogOptions<T>["modal"];
+  /**
+   * @default false
+   */
+  portal?: DialogOptions<T>["portal"];
   /**
    * The distance between the popover and the anchor element.
    *

package/src/tab/tab-panel.tsx

@@ -123,7 +123,7 @@ export const useTabPanel = createHook<TagName, TabPanelOptions>(
       return () => {
         element.removeEventListener("scroll", onScroll);
       };
-    }, [scrollRestoration, mounted, tabId, getScrollElement, store]);
+    }, [scrollRestoration, mounted, tabId, getScrollElement]);
 
     const [hasTabbableChildren, setHasTabbableChildren] = useState(false);