@octavius2929-personal/design-system 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -1968,6 +1968,7 @@ function assignRef(ref, value) {
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles25();
   const [open, setOpen] = (0, import_react36.useState)(false);
+  const [alignEnd, setAlignEnd] = (0, import_react36.useState)(false);
   const rootRef = (0, import_react36.useRef)(null);
   const listRef = (0, import_react36.useRef)(null);
   const triggerRef = (0, import_react36.useRef)(null);
@@ -1982,6 +1983,18 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
+  (0, import_react36.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]);
   (0, import_react36.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
@@ -2049,21 +2062,31 @@ function Menu({ trigger: trigger2, items }) {
   });
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref: rootRef, className: wrapper4, children: [
     clonedTrigger,
-    open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: listRef, role: "menu", className: list2, onKeyDown: onMenuKeyDown, children: items.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      "button",
+    open && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "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__ */ (0, import_jsx_runtime39.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: entry.danger ? dangerItem : item3,
+            onClick: () => {
+              entry.onClick?.();
+              setOpen(false);
+            },
+            children: entry.label
+          },
+          index
+        ))
+      }
+    )
   ] });
 }