@seed-design/react-menu 0.0.0-alpha-20260511052324 → 1.0.0

package/lib/{Menu-12s-KCTCu-et.cjs → Menu-12s-BZEIsPP0.cjs}

@@ -7,7 +7,7 @@ var reactDismissibleLayer = require('@seed-design/react-dismissible-layer');
 var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var React = require('react');
-var useMenu12s = require('./useMenu-12s-DN0SpRKs.cjs');
+var useMenu12s = require('./useMenu-12s-Cv5FQJ3x.cjs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 

package/lib/{Menu-12s-DcQqm37B.js → Menu-12s-Cfv1stLD.js}

@@ -7,7 +7,7 @@ import { DismissibleLayer } from '@seed-design/react-dismissible-layer';
 import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import React, { createContext, useContext, forwardRef } from 'react';
-import { u as useMenu } from './useMenu-12s-WINwYlwH.js';
+import { u as useMenu } from './useMenu-12s-BrOJabEO.js';
 
 const MenuContext = /*#__PURE__*/ createContext(null);
 const MenuProvider = MenuContext.Provider;

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Menu12s = require('./Menu-12s-KCTCu-et.cjs');
+var Menu12s = require('./Menu-12s-BZEIsPP0.cjs');
 
 var Menu_namespace = {
   __proto__: null,

package/lib/index.js

@@ -1,5 +1,5 @@
-import { M as MenuAnchor, a as MenuContent, b as MenuGroup, c as MenuGroupLabel, d as MenuItem, e as MenuPositioner, f as MenuRoot, g as MenuTrigger } from './Menu-12s-DcQqm37B.js';
-export { u as useMenuContext, h as useMenuItemContext } from './Menu-12s-DcQqm37B.js';
+import { M as MenuAnchor, a as MenuContent, b as MenuGroup, c as MenuGroupLabel, d as MenuItem, e as MenuPositioner, f as MenuRoot, g as MenuTrigger } from './Menu-12s-Cfv1stLD.js';
+export { u as useMenuContext, h as useMenuItemContext } from './Menu-12s-Cfv1stLD.js';
 
 var Menu_namespace = {
   __proto__: null,

package/lib/{useMenu-12s-WINwYlwH.js → useMenu-12s-BrOJabEO.js}

@@ -2,9 +2,23 @@
 import { useFloating, offset, size, flip, shift, useTransitionStatus, autoUpdate, useClick, useRole, useListNavigation, useTypeahead, useInteractions } from '@floating-ui/react';
 import { useControllableState } from '@seed-design/react-use-controllable-state';
 import { elementProps, dataAttr, buttonProps } from '@seed-design/dom-utils';
-import { useCallback, useEffect, useMemo, useState, useRef, useId } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef, useId } from 'react';
 
 const MIN_HEIGHT = 200;
+// flip/size/shift derive collisions from numeric padding, so the safe-area insets
+// have to reach floating-ui as numbers — a CSS env() value alone can't. The first
+// cut stayed in CSS, insetting the menu's max-height per placement; on iOS WebKit
+// that coupled height to placement, so flip kept re-measuring, oscillated
+// top<->bottom, and the synchronous reposition re-renders pinned the main thread.
+// Folding the insets into the collision boundary instead keeps placement stable.
+//
+// So, like Snackbar's `useSafeOffset`, the positioner re-declares the insets from
+// env() here and the hook reads them back as px (see the effect after useFloating),
+// which also keeps this layer self-contained from the global SEED safe-area tokens.
+const SAFE_AREA_STYLE = {
+    "--seed-safe-area-top": "env(safe-area-inset-top)",
+    "--seed-safe-area-bottom": "env(safe-area-inset-bottom)"
+};
 function getTransformOrigin(placement) {
     const [side, align] = placement.split("-");
     const y = {
@@ -47,6 +61,20 @@ function useMenuState(props) {
 function useMenu(props) {
     const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
     const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
+    const [safeArea, setSafeArea] = useState({
+        top: 0,
+        bottom: 0
+    });
+    // Inset the viewport collision boundary so flip/size/shift keep the menu clear of
+    // the notch and home indicator, not just the viewport edge. The safe area is already
+    // a visual buffer, so where it exists the menu sits right at its boundary; only where
+    // there is none does it fall back to overflowPadding off the bare viewport edge.
+    const collisionPadding = {
+        top: safeArea.top || overflowPadding,
+        right: overflowPadding,
+        bottom: safeArea.bottom || overflowPadding,
+        left: overflowPadding
+    };
     const setOpen = useCallback((nextOpen, details)=>{
         if (disabled && nextOpen) return;
         setOpenState(nextOpen, details);
@@ -75,7 +103,7 @@ function useMenu(props) {
         middleware: [
             offset(gutter),
             size({
-                padding: overflowPadding,
+                padding: collisionPadding,
                 apply ({ availableHeight, rects, elements }) {
                     elements.floating.style.setProperty("--seed-menu-available-height", `${Math.max(MIN_HEIGHT, availableHeight)}px`);
                     if (matchReferenceWidth) {
@@ -84,11 +112,11 @@ function useMenu(props) {
                 }
             }),
             flip({
-                padding: overflowPadding,
+                padding: collisionPadding,
                 fallbackStrategy: "initialPlacement"
             }),
             shift({
-                padding: overflowPadding
+                padding: collisionPadding
             })
         ]
     });
@@ -106,6 +134,30 @@ function useMenu(props) {
         floatingRefs.floating,
         context
     ]);
+    // Read the env()-resolved insets off the positioner, which carries the env()
+    // declarations via SAFE_AREA_STYLE. Key on the reactive `elements.floating`, not
+    // `refs.floating`: the ref object's identity never changes, so an effect depending
+    // on it runs only once at mount — before FloatingPortal has committed the positioner
+    // child — reads a null ref, bails, and never re-fires, leaving `safeArea` stuck at
+    // {0,0}. `elements.floating` updates when the positioner mounts (it stays mounted
+    // even while closed), so the insets are read before the first open and the menu
+    // clears the safe area on its first frame. Re-read on resize for orientation changes.
+    const floatingElement = context.elements.floating;
+    useEffect(()=>{
+        if (!floatingElement) return;
+        const read = ()=>{
+            const styles = getComputedStyle(floatingElement);
+            setSafeArea({
+                top: Number.parseInt(styles.getPropertyValue("--seed-safe-area-top"), 10) || 0,
+                bottom: Number.parseInt(styles.getPropertyValue("--seed-safe-area-bottom"), 10) || 0
+            });
+        };
+        read();
+        window.addEventListener("resize", read);
+        return ()=>window.removeEventListener("resize", read);
+    }, [
+        floatingElement
+    ]);
     const click = useClick(context, {
         enabled: !disabled
     });
@@ -173,7 +225,10 @@ function useMenu(props) {
         }),
         positionerProps: elementProps({
             ...stateProps,
-            style: floatingStyles
+            style: {
+                ...SAFE_AREA_STYLE,
+                ...floatingStyles
+            }
         }),
         contentProps: elementProps({
             ...stateProps,

package/lib/{useMenu-12s-DN0SpRKs.cjs → useMenu-12s-Cv5FQJ3x.cjs}

@@ -5,6 +5,20 @@ var domUtils = require('@seed-design/dom-utils');
 var React = require('react');
 
 const MIN_HEIGHT = 200;
+// flip/size/shift derive collisions from numeric padding, so the safe-area insets
+// have to reach floating-ui as numbers — a CSS env() value alone can't. The first
+// cut stayed in CSS, insetting the menu's max-height per placement; on iOS WebKit
+// that coupled height to placement, so flip kept re-measuring, oscillated
+// top<->bottom, and the synchronous reposition re-renders pinned the main thread.
+// Folding the insets into the collision boundary instead keeps placement stable.
+//
+// So, like Snackbar's `useSafeOffset`, the positioner re-declares the insets from
+// env() here and the hook reads them back as px (see the effect after useFloating),
+// which also keeps this layer self-contained from the global SEED safe-area tokens.
+const SAFE_AREA_STYLE = {
+    "--seed-safe-area-top": "env(safe-area-inset-top)",
+    "--seed-safe-area-bottom": "env(safe-area-inset-bottom)"
+};
 function getTransformOrigin(placement) {
     const [side, align] = placement.split("-");
     const y = {
@@ -47,6 +61,20 @@ function useMenuState(props) {
 function useMenu(props) {
     const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
     const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
+    const [safeArea, setSafeArea] = React.useState({
+        top: 0,
+        bottom: 0
+    });
+    // Inset the viewport collision boundary so flip/size/shift keep the menu clear of
+    // the notch and home indicator, not just the viewport edge. The safe area is already
+    // a visual buffer, so where it exists the menu sits right at its boundary; only where
+    // there is none does it fall back to overflowPadding off the bare viewport edge.
+    const collisionPadding = {
+        top: safeArea.top || overflowPadding,
+        right: overflowPadding,
+        bottom: safeArea.bottom || overflowPadding,
+        left: overflowPadding
+    };
     const setOpen = React.useCallback((nextOpen, details)=>{
         if (disabled && nextOpen) return;
         setOpenState(nextOpen, details);
@@ -75,7 +103,7 @@ function useMenu(props) {
         middleware: [
             react.offset(gutter),
             react.size({
-                padding: overflowPadding,
+                padding: collisionPadding,
                 apply ({ availableHeight, rects, elements }) {
                     elements.floating.style.setProperty("--seed-menu-available-height", `${Math.max(MIN_HEIGHT, availableHeight)}px`);
                     if (matchReferenceWidth) {
@@ -84,11 +112,11 @@ function useMenu(props) {
                 }
             }),
             react.flip({
-                padding: overflowPadding,
+                padding: collisionPadding,
                 fallbackStrategy: "initialPlacement"
             }),
             react.shift({
-                padding: overflowPadding
+                padding: collisionPadding
             })
         ]
     });
@@ -106,6 +134,30 @@ function useMenu(props) {
         floatingRefs.floating,
         context
     ]);
+    // Read the env()-resolved insets off the positioner, which carries the env()
+    // declarations via SAFE_AREA_STYLE. Key on the reactive `elements.floating`, not
+    // `refs.floating`: the ref object's identity never changes, so an effect depending
+    // on it runs only once at mount — before FloatingPortal has committed the positioner
+    // child — reads a null ref, bails, and never re-fires, leaving `safeArea` stuck at
+    // {0,0}. `elements.floating` updates when the positioner mounts (it stays mounted
+    // even while closed), so the insets are read before the first open and the menu
+    // clears the safe area on its first frame. Re-read on resize for orientation changes.
+    const floatingElement = context.elements.floating;
+    React.useEffect(()=>{
+        if (!floatingElement) return;
+        const read = ()=>{
+            const styles = getComputedStyle(floatingElement);
+            setSafeArea({
+                top: Number.parseInt(styles.getPropertyValue("--seed-safe-area-top"), 10) || 0,
+                bottom: Number.parseInt(styles.getPropertyValue("--seed-safe-area-bottom"), 10) || 0
+            });
+        };
+        read();
+        window.addEventListener("resize", read);
+        return ()=>window.removeEventListener("resize", read);
+    }, [
+        floatingElement
+    ]);
     const click = react.useClick(context, {
         enabled: !disabled
     });
@@ -173,7 +225,10 @@ function useMenu(props) {
         }),
         positionerProps: domUtils.elementProps({
             ...stateProps,
-            style: floatingStyles
+            style: {
+                ...SAFE_AREA_STYLE,
+                ...floatingStyles
+            }
         }),
         contentProps: domUtils.elementProps({
             ...stateProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-menu",
-  "version": "0.0.0-alpha-20260511052324",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -31,10 +31,10 @@
     "@floating-ui/react": "^0.27.0",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-focus-scope": "^1.1.8",
-    "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-dismissible-layer": "0.0.0-alpha-20260511052324",
-    "@seed-design/react-primitive": "0.0.0-alpha-20260511052324",
-    "@seed-design/react-use-controllable-state": "1.0.0"
+    "@seed-design/dom-utils": "^2.0.0",
+    "@seed-design/react-dismissible-layer": "^1.0.0",
+    "@seed-design/react-primitive": "^2.0.0",
+    "@seed-design/react-use-controllable-state": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

package/src/useMenu.ts

@@ -21,6 +21,21 @@ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 
 const MIN_HEIGHT = 200;
 
+// flip/size/shift derive collisions from numeric padding, so the safe-area insets
+// have to reach floating-ui as numbers — a CSS env() value alone can't. The first
+// cut stayed in CSS, insetting the menu's max-height per placement; on iOS WebKit
+// that coupled height to placement, so flip kept re-measuring, oscillated
+// top<->bottom, and the synchronous reposition re-renders pinned the main thread.
+// Folding the insets into the collision boundary instead keeps placement stable.
+//
+// So, like Snackbar's `useSafeOffset`, the positioner re-declares the insets from
+// env() here and the hook reads them back as px (see the effect after useFloating),
+// which also keeps this layer self-contained from the global SEED safe-area tokens.
+const SAFE_AREA_STYLE = {
+  "--seed-safe-area-top": "env(safe-area-inset-top)",
+  "--seed-safe-area-bottom": "env(safe-area-inset-bottom)",
+} as React.CSSProperties;
+
 function getTransformOrigin(placement: string) {
   const [side, align] = placement.split("-");
   const y = { top: "bottom", bottom: "top", left: "center", right: "center" }[side] ?? "top";
@@ -167,6 +182,19 @@ export function useMenu(props: UseMenuProps) {
     matchReferenceWidth = false,
   } = props;
 
+  const [safeArea, setSafeArea] = useState({ top: 0, bottom: 0 });
+
+  // Inset the viewport collision boundary so flip/size/shift keep the menu clear of
+  // the notch and home indicator, not just the viewport edge. The safe area is already
+  // a visual buffer, so where it exists the menu sits right at its boundary; only where
+  // there is none does it fall back to overflowPadding off the bare viewport edge.
+  const collisionPadding = {
+    top: safeArea.top || overflowPadding,
+    right: overflowPadding,
+    bottom: safeArea.bottom || overflowPadding,
+    left: overflowPadding,
+  };
+
   const setOpen = useCallback(
     (nextOpen: boolean, details?: MenuChangeDetails) => {
       if (disabled && nextOpen) return;
@@ -201,7 +229,7 @@ export function useMenu(props: UseMenuProps) {
     middleware: [
       offset(gutter),
       size({
-        padding: overflowPadding,
+        padding: collisionPadding,
         apply({ availableHeight, rects, elements }) {
           elements.floating.style.setProperty(
             "--seed-menu-available-height",
@@ -215,8 +243,8 @@ export function useMenu(props: UseMenuProps) {
           }
         },
       }),
-      flip({ padding: overflowPadding, fallbackStrategy: "initialPlacement" }),
-      shift({ padding: overflowPadding }),
+      flip({ padding: collisionPadding, fallbackStrategy: "initialPlacement" }),
+      shift({ padding: collisionPadding }),
     ],
   });
 
@@ -237,6 +265,33 @@ export function useMenu(props: UseMenuProps) {
     );
   }, [mounted, floatingRefs.reference, floatingRefs.floating, context]);
 
+  // Read the env()-resolved insets off the positioner, which carries the env()
+  // declarations via SAFE_AREA_STYLE. Key on the reactive `elements.floating`, not
+  // `refs.floating`: the ref object's identity never changes, so an effect depending
+  // on it runs only once at mount — before FloatingPortal has committed the positioner
+  // child — reads a null ref, bails, and never re-fires, leaving `safeArea` stuck at
+  // {0,0}. `elements.floating` updates when the positioner mounts (it stays mounted
+  // even while closed), so the insets are read before the first open and the menu
+  // clears the safe area on its first frame. Re-read on resize for orientation changes.
+  const floatingElement = context.elements.floating;
+
+  useEffect(() => {
+    if (!floatingElement) return;
+
+    const read = () => {
+      const styles = getComputedStyle(floatingElement);
+      setSafeArea({
+        top: Number.parseInt(styles.getPropertyValue("--seed-safe-area-top"), 10) || 0,
+        bottom: Number.parseInt(styles.getPropertyValue("--seed-safe-area-bottom"), 10) || 0,
+      });
+    };
+
+    read();
+    window.addEventListener("resize", read);
+
+    return () => window.removeEventListener("resize", read);
+  }, [floatingElement]);
+
   const click = useClick(context, {
     enabled: !disabled,
   });
@@ -309,7 +364,7 @@ export function useMenu(props: UseMenuProps) {
 
     positionerProps: elementProps({
       ...stateProps,
-      style: floatingStyles,
+      style: { ...SAFE_AREA_STYLE, ...floatingStyles },
     }),
 
     contentProps: elementProps({