@ynput/ayon-frontend-shared 0.6.4 → 0.6.6

package/dist/chunks/MenuItem.es.js

@@ -1,26 +1,26 @@
-import { jsxs as j, jsx as o } from "react/jsx-runtime";
-import { Icon as i, ShortcutTag as F } from "@ynput/ayon-react-components";
-import { forwardRef as O } from "react";
-import r, { keyframes as z } from "styled-components";
-import { isArray as E } from "lodash";
-import { Link as L } from "react-router-dom";
-import P from "clsx";
+import { jsxs as _, jsx as o } from "react/jsx-runtime";
+import { Button as j, Icon as a, ShortcutTag as z } from "@ynput/ayon-react-components";
+import { forwardRef as F } from "react";
+import r, { keyframes as O } from "styled-components";
+import { isArray as L } from "lodash";
+import { Link as G } from "react-router-dom";
+import S from "clsx";
 import "@module-federation/enhanced/runtime";
 import "./searchTerms.es.js";
 import "./getUris.es.js";
 import "primereact/confirmdialog";
-import { a as G } from "./DeleteEntitiesContextInstance.es.js";
+import { a as T } from "./DeleteEntitiesContextInstance.es.js";
 import "react-toastify";
 import "uuid";
 import "semver";
 import "./ContextMenuContextInstance.es.js";
 import "react-dom";
 import "react-redux";
-const u = 42, S = 8, ao = u + S, so = r.dialog`
+const v = 42, $ = 8, po = v + $, mo = r.dialog`
   position: fixed;
   margin: 0;
   inset: 0;
-  top: ${u}px;
+  top: ${v}px;
   width: auto;
   height: auto;
   z-index: 1000;
@@ -38,7 +38,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
     display: none;
   }
   padding-bottom: 60px;
-`, T = z`
+`, C = O`
     from {
         scale: 0.95;
         opacity: 0.6;
@@ -47,7 +47,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
         scale: 1;
         opacity: 1;
     }
-`, co = r.div`
+`, go = r.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-large);
@@ -61,7 +61,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
   z-index: 30;
 
   /* animate */
-  animation: ${T} 0.03s ease-in forwards;
+  animation: ${C} 0.03s ease-in forwards;
 
   /* transform origin based on alignment */
   &.right {
@@ -85,7 +85,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
       color: var(--md-sys-color-on-surface, #fff) !important;
     }
   }
-`, lo = r.section`
+`, uo = r.section`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -98,7 +98,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
   color: var(--md-sys-color-on-surface);
   z-index: 10;
   overflow: hidden;
-`, po = r.div`
+`, ho = r.div`
   position: relative;
   border-radius: 8px;
   display: flex;
@@ -122,7 +122,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
       overflow-x: hidden;
     }
   }
-`, mo = r.menu`
+`, fo = r.menu`
   /* reset defaults */
   display: flex;
   list-style-type: none;
@@ -157,7 +157,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
     opacity: 0.5;
     border-color: var(--md-sys-color-surface-container-highest);
   }
-`, $ = r.li`
+`, U = r.li`
   display: flex;
   padding: 6px 16px 6px 12px;
   justify-content: flex-start;
@@ -176,7 +176,7 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest);
   }
-  
+
   .hover-swap {
     display: none;
     cursor: grab;
@@ -272,11 +272,30 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
     }
     background-color: unset;
   }
-`, U = r.img`
+`, B = r.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  margin-left: auto;
+  padding-left: 24px;
+`, R = r(j)`
+  margin-left: auto;
+  &.hasIcon {
+    padding: 4px;
+  }
+  .icon {
+    font-size: 16px;
+  }
+
+  .selected & {
+    background-color: var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-primary);
+  }
+`, W = r.img`
   width: 18px;
   height: 18px;
   object-fit: contain;
-`, go = r.footer`
+`, vo = r.footer`
   position: relative;
   display: flex;
   padding: 8px;
@@ -305,81 +324,97 @@ const u = 42, S = 8, ao = u + S, so = r.dialog`
       display: flex;
     }
   }
-`, R = O(
+`, K = F(
   ({
-    label: t,
-    icon: a,
-    hoverIcon: n,
-    img: s,
-    highlighted: h,
-    notification: f,
-    selected: v,
-    danger: b,
-    items: y = [],
-    className: x,
-    isLink: c,
-    isDev: w,
-    shortcut: l,
-    disabled: k,
-    powerFeature: D,
-    active: d,
-    reserveActiveSlot: N,
-    ...p
-  }, A) => {
-    const m = E(t) ? t : [t], { powerLicense: I } = G(), e = !I && D, g = /* @__PURE__ */ j(
-      $,
+    label: i,
+    icon: l,
+    hoverIcon: s,
+    img: c,
+    highlighted: y,
+    notification: b,
+    selected: x,
+    danger: w,
+    items: k = [],
+    className: D,
+    isLink: d,
+    isDev: N,
+    shortcut: p,
+    disabled: A,
+    powerFeature: I,
+    active: m,
+    reserveActiveSlot: E,
+    endActions: g = [],
+    ...u
+  }, M) => {
+    const h = L(i) ? i : [i], { powerLicense: P } = T(), n = !P && I, f = /* @__PURE__ */ _(
+      U,
       {
-        ref: A,
-        className: P(
+        ref: M,
+        className: S(
           "menu-item",
           {
-            highlighted: h,
-            selected: v,
-            notification: f,
-            danger: b,
-            dev: w,
-            disabled: k,
-            power: e
+            highlighted: y,
+            selected: x,
+            notification: b,
+            danger: w,
+            dev: N,
+            disabled: A,
+            power: n
           },
-          x
+          D
         ),
-        ...p,
-        "aria-label": m.join(", "),
+        ...u,
+        "aria-label": h.join(", "),
         children: [
-          (a || e) && /* @__PURE__ */ o(
-            i,
+          (l || n) && /* @__PURE__ */ o(
+            a,
             {
-              icon: e ? "bolt" : a,
-              className: n && !e ? "hover-swap-default" : void 0
+              icon: n ? "bolt" : l,
+              className: s && !n ? "hover-swap-default" : void 0
             }
           ),
-          n && !e && /* @__PURE__ */ o(i, { icon: n, className: "hover-swap" }),
-          s && /* @__PURE__ */ o(U, { src: s, alt: `${t} icon` }),
-          m.map((M, _) => /* @__PURE__ */ o("span", { children: M }, _)),
-          l && /* @__PURE__ */ o(F, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: l }),
-          (d || N) && /* @__PURE__ */ o(
-            i,
+          s && !n && /* @__PURE__ */ o(a, { icon: s, className: "hover-swap" }),
+          c && /* @__PURE__ */ o(W, { src: c, alt: `${i} icon` }),
+          h.map((e, t) => /* @__PURE__ */ o("span", { children: e }, t)),
+          p && /* @__PURE__ */ o(z, { style: { minWidth: 22, textAlign: "center" }, align: "right", children: p }),
+          (m || E) && /* @__PURE__ */ o(
+            a,
             {
               icon: "check",
-              style: { marginLeft: "auto", visibility: d ? "visible" : "hidden" }
+              style: { marginLeft: "auto", visibility: m ? "visible" : "hidden" }
             }
           ),
-          !!y.length && /* @__PURE__ */ o(i, { icon: "arrow_right", className: "more" })
+          !!g.length && /* @__PURE__ */ o(B, { children: g.map((e) => /* @__PURE__ */ o(
+            R,
+            {
+              variant: "text",
+              icon: e.icon,
+              className: "menu-item-end-action",
+              "data-tooltip": e.tooltip,
+              "aria-label": e.tooltip,
+              onClick: (t) => {
+                t.stopPropagation(), e.onClick(t);
+              },
+              onKeyDown: (t) => t.stopPropagation()
+            },
+            e.icon
+          )) }),
+          !!k.length && /* @__PURE__ */ o(a, { icon: "arrow_right", className: "more" })
         ]
       }
     );
-    return c ? /* @__PURE__ */ o(L, { to: c, target: p.target, children: g }) : g;
+    return d ? /* @__PURE__ */ o(G, { to: d, target: u.target, children: f }) : f;
   }
 );
-R.displayName = "MenuItem";
+K.displayName = "MenuItem";
 export {
-  u as D,
-  go as F,
-  po as M,
-  lo as S,
-  mo as a,
-  R as b,
-  ao as c,
-  so as d,
-  co as e
+  v as D,
+  vo as F,
+  ho as M,
+  uo as S,
+  fo as a,
+  K as b,
+  po as c,
+  mo as d,
+  go as e
 };