@octavius2929-personal/design-system 0.8.0 → 0.9.0

package/dist/index.js

@@ -1855,6 +1855,7 @@ function Tabs({ items, value, onChange }) {
 import {
   cloneElement as cloneElement2,
   useEffect as useEffect4,
+  useLayoutEffect,
   useRef as useRef3,
   useState as useState8
 } from "react";
@@ -1891,6 +1892,7 @@ function assignRef(ref, value) {
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
   const [open, setOpen] = useState8(false);
+  const [alignEnd, setAlignEnd] = useState8(false);
   const rootRef = useRef3(null);
   const listRef = useRef3(null);
   const triggerRef = useRef3(null);
@@ -1905,6 +1907,18 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
+  useLayoutEffect(() => {
+    if (!open) {
+      setAlignEnd(false);
+      return;
+    }
+    const listEl = listRef.current;
+    const rootEl = rootRef.current;
+    if (!listEl || !rootEl) return;
+    const rootLeft = rootEl.getBoundingClientRect().left;
+    const viewport = document.documentElement.clientWidth;
+    setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
+  }, [open]);
   useEffect4(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
@@ -1972,21 +1986,31 @@ function Menu({ trigger: trigger2, items }) {
   });
   return /* @__PURE__ */ jsxs24("div", { ref: rootRef, className: wrapper4, children: [
     clonedTrigger,
-    open && /* @__PURE__ */ jsx39("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ jsx39(
-      "button",
+    open && /* @__PURE__ */ jsx39(
+      "div",
       {
-        type: "button",
-        role: "menuitem",
-        tabIndex: -1,
-        className: entry.danger ? dangerItem : item3,
-        onClick: () => {
-          entry.onClick?.();
-          setOpen(false);
-        },
-        children: entry.label
-      },
-      index
-    )) })
+        ref: listRef,
+        role: "menu",
+        className: list2,
+        "data-align": alignEnd ? "end" : "start",
+        onKeyDown: onMenuKeyDown,
+        children: items.map((entry, index) => /* @__PURE__ */ jsx39(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: entry.danger ? dangerItem : item3,
+            onClick: () => {
+              entry.onClick?.();
+              setOpen(false);
+            },
+            children: entry.label
+          },
+          index
+        ))
+      }
+    )
   ] });
 }