@orioncactuscorp/ui 1.13.0 → 1.15.0

package/dist/components/Menu/Menu.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as t, jsxs as R } from "react/jsx-runtime";
-import v from "react";
+import C from "react";
 import { Menu as r } from "@base-ui-components/react/menu";
-import j from "../Background/Background.js";
-import B, { CellItem as I } from "../Cell/Cell.js";
+import B from "../Background/Background.js";
+import E, { CellItem as T } from "../Cell/Cell.js";
+import { useOverlayPortalContainer as G } from "../internal/OverlayPortalContext.js";
 import e from "./Menu.module.scss.js";
-const E = {
+const z = {
   topLeft: { side: "top", alignment: "start" },
   top: { side: "top", alignment: "center" },
   topRight: { side: "top", alignment: "end" },
@@ -19,17 +20,17 @@ const E = {
   left: { side: "left", alignment: "center" },
   leftBottom: { side: "left", alignment: "end" }
 };
-function F(i) {
+function Q(i) {
   return /* @__PURE__ */ t(r.Root, { ...i });
 }
-function J({
+function U({
   className: i = "",
   children: o,
   render: a,
   nativeButton: n,
-  openOnHover: m,
+  openOnHover: c,
   delay: s,
-  closeDelay: c
+  closeDelay: l
 }) {
   return a ? /* @__PURE__ */ t(
     r.Trigger,
@@ -37,9 +38,9 @@ function J({
       className: e.renderTrigger,
       render: a,
       nativeButton: n,
-      openOnHover: m,
+      openOnHover: c,
       delay: s,
-      closeDelay: c,
+      closeDelay: l,
       "data-oc-component": "menu-trigger",
       children: o
     }
@@ -48,53 +49,56 @@ function J({
     {
       className: `${e.trigger} ${i}`.trim(),
       nativeButton: n,
-      openOnHover: m,
+      openOnHover: c,
       delay: s,
-      closeDelay: c,
+      closeDelay: l,
       "data-oc-component": "menu-trigger",
       children: o
     }
   );
 }
-function K({
+function X({
   className: i = "",
   size: o = "medium",
   placement: a,
   sideOffset: n = 12,
-  alignOffset: m = 0,
-  alignment: s = "center",
-  side: c = "bottom",
-  children: d
+  alignOffset: c = 0,
+  container: s,
+  alignment: l = "center",
+  side: p = "bottom",
+  children: u,
+  "data-oc-interaction-variant": N
 }) {
-  const p = a ? E[a] : void 0, g = p?.side ?? c, f = p?.alignment ?? s;
-  return /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(
+  const b = G(s), g = a ? z[a] : void 0, m = g?.side ?? p, f = g?.alignment ?? l;
+  return /* @__PURE__ */ t(r.Portal, { container: b, children: /* @__PURE__ */ t(
     r.Positioner,
     {
       sideOffset: n,
-      alignOffset: m,
+      alignOffset: c,
       align: f,
-      side: g,
+      side: m,
       className: `${e.positioner} ${i}`.trim(),
       children: /* @__PURE__ */ t(
         r.Popup,
         {
-          render: (u) => /* @__PURE__ */ t(
-            j,
+          render: (d) => /* @__PURE__ */ t(
+            B,
             {
-              ...u,
-              className: `${e.content} ${e[o]} ${u.className || ""}`.trim(),
+              ...d,
+              className: `${e.content} ${e[o]} ${d.className || ""}`.trim(),
               "data-oc-part": "content",
               "data-oc-component": "menu-content",
-              "data-oc-size": o
+              "data-oc-size": o,
+              "data-oc-interaction-variant": N
             }
           ),
           children: /* @__PURE__ */ t(
-            B,
+            E,
             {
               className: e.container,
               divider: "neutral",
               "data-oc-part": "container",
-              children: d
+              children: u
             }
           )
         }
@@ -102,97 +106,100 @@ function K({
     }
   ) });
 }
-function Q({
+function Y({
   className: i = "",
   children: o,
   content: a,
   divider: n,
-  fillWidth: m = !1,
+  fillWidth: c = !1,
   icon: s,
-  leading: c,
-  trailing: d,
-  href: p,
-  target: g,
-  rel: f,
-  linkProps: u,
-  render: l,
-  onClick: T,
-  closeOnClick: N = !0,
-  verticalAlign: b = "center"
+  leading: l,
+  trailing: p,
+  href: u,
+  target: N,
+  rel: b,
+  linkProps: g,
+  render: m,
+  onClick: f,
+  closeOnClick: d = !0,
+  verticalAlign: $ = "center",
+  "data-oc-interaction-variant": h
 }) {
-  const $ = `${e.item} ${i}`.trim(), h = c ?? (s ? /* @__PURE__ */ t("span", { className: e.icon, "data-oc-part": "icon", "aria-hidden": "true", children: /* @__PURE__ */ t(s, { size: "custom" }) }) : null), C = a ?? /* @__PURE__ */ R("span", { className: e.labelGroup, children: [
-    h,
+  const v = `${e.item} ${i}`.trim(), k = l ?? (s ? /* @__PURE__ */ t("span", { className: e.icon, "data-oc-part": "icon", "aria-hidden": "true", children: /* @__PURE__ */ t(s, { size: "custom" }) }) : null), P = a ?? /* @__PURE__ */ R("span", { className: e.labelGroup, children: [
+    k,
     /* @__PURE__ */ t("span", { className: e.label, "data-oc-part": "label", children: o }),
-    d
+    p
   ] });
-  if (p) {
+  if (u) {
     const {
-      className: k,
+      className: I,
       rel: S,
       target: L,
       ...x
-    } = u ?? {}, M = L ?? g, P = S || f || (M === "_blank" ? "noopener noreferrer" : void 0);
+    } = g ?? {}, M = L ?? N, j = S || b || (M === "_blank" ? "noopener noreferrer" : void 0);
     return /* @__PURE__ */ t(
       r.Item,
       {
-        closeOnClick: N,
+        closeOnClick: d,
         render: /* @__PURE__ */ t(
-          I,
+          T,
           {
-            className: $,
+            className: v,
             content: /* @__PURE__ */ t(
               "a",
               {
                 ...x,
-                className: `${e.link} ${k || ""}`.trim(),
+                className: `${e.link} ${I || ""}`.trim(),
                 "data-oc-cell-control": !0,
                 "data-oc-part": "link",
-                href: p,
+                href: u,
                 target: M,
-                rel: P,
+                rel: j,
                 tabIndex: x.tabIndex ?? -1,
-                children: C
+                children: P
               }
             ),
             divider: n,
-            fillWidth: m,
+            fillWidth: c,
             interactive: !0,
-            verticalAlign: b,
+            verticalAlign: $,
             "data-oc-part": "item",
-            "data-oc-component": "menu-item"
+            "data-oc-component": "menu-item",
+            "data-oc-interaction-variant": h
           }
         )
       }
     );
   }
-  if (l && v.isValidElement(l)) {
-    const k = v.cloneElement(l, {
-      className: `${e.link} ${l.props.className || ""}`.trim(),
+  if (m && C.isValidElement(m)) {
+    const I = C.cloneElement(m, {
+      className: `${e.link} ${m.props.className || ""}`.trim(),
       "data-oc-cell-control": !0,
       "data-oc-part": "link",
-      tabIndex: l.props.tabIndex ?? -1,
+      tabIndex: m.props.tabIndex ?? -1,
       children: a ?? /* @__PURE__ */ R("span", { className: e.labelGroup, children: [
-        h,
-        /* @__PURE__ */ t("span", { className: e.label, "data-oc-part": "label", children: l.props.children }),
-        d
+        k,
+        /* @__PURE__ */ t("span", { className: e.label, "data-oc-part": "label", children: m.props.children }),
+        p
       ] })
     });
     return /* @__PURE__ */ t(
       r.Item,
       {
-        closeOnClick: N,
-        onClick: T,
+        closeOnClick: d,
+        onClick: f,
         render: /* @__PURE__ */ t(
-          I,
+          T,
           {
-            className: $,
-            content: k,
+            className: v,
+            content: I,
             divider: n,
-            fillWidth: m,
+            fillWidth: c,
             interactive: !0,
-            verticalAlign: b,
+            verticalAlign: $,
             "data-oc-part": "item",
-            "data-oc-component": "menu-item"
+            "data-oc-component": "menu-item",
+            "data-oc-interaction-variant": h
           }
         )
       }
@@ -201,27 +208,28 @@ function Q({
   return /* @__PURE__ */ t(
     r.Item,
     {
-      closeOnClick: N,
-      onClick: T,
+      closeOnClick: d,
+      onClick: f,
       render: /* @__PURE__ */ t(
-        I,
+        T,
         {
-          className: $,
+          className: v,
           content: a ?? o,
           divider: n,
-          fillWidth: m,
+          fillWidth: c,
           interactive: !0,
-          leading: h,
-          trailing: d,
-          verticalAlign: b,
+          leading: k,
+          trailing: p,
+          verticalAlign: $,
           "data-oc-part": "item",
-          "data-oc-component": "menu-item"
+          "data-oc-component": "menu-item",
+          "data-oc-interaction-variant": h
         }
       )
     }
   );
 }
-function U({
+function Z({
   className: i = "",
   orientation: o,
   ...a
@@ -245,10 +253,10 @@ function U({
   );
 }
 export {
-  K as MenuContent,
-  Q as MenuItem,
-  F as MenuRoot,
-  U as MenuSeparator,
-  J as MenuTrigger,
-  F as default
+  X as MenuContent,
+  Y as MenuItem,
+  Q as MenuRoot,
+  Z as MenuSeparator,
+  U as MenuTrigger,
+  Q as default
 };