@ynput/ayon-frontend-shared 0.4.6 → 0.5.0

package/dist/chunks/GlobalContext.es.js

@@ -1,18 +1,18 @@
 import { jsx as g } from "react/jsx-runtime";
 import { createContext as v, useContext as x, useMemo as I } from "react";
 import "./searchTerms.es.js";
-import { ce as C, bn as G, cQ as P, cz as b } from "./getUris.es.js";
+import { cf as C, bo as G, cR as P, cA as b } from "./getUris.es.js";
 import "primereact/confirmdialog";
-const a = v(void 0), A = ({ children: r, skip: e = !1 }) => {
+const a = v(void 0), M = ({ children: r, skip: t = !1 }) => {
   const {
-    data: t = {},
-    isLoading: n,
-    error: i
-  } = C({ full: !0 }, { skip: e }), { data: s, isLoading: u, error: c } = G(), {
+    data: e = {},
+    isLoading: i,
+    error: n
+  } = C({ full: !0 }, { skip: t }), { data: s, isLoading: u, error: c } = G(), {
     data: o = [],
     isLoading: l,
     error: d
-  } = P({}, { skip: e }), f = I(() => o.filter((L) => L.active), [o]), {
+  } = P({}, { skip: t }), f = I(() => o.filter((L) => L.active), [o]), {
     data: m,
     isLoading: p,
     error: j
@@ -21,8 +21,8 @@ const a = v(void 0), A = ({ children: r, skip: e = !1 }) => {
     a.Provider,
     {
       value: {
-        siteInfo: t,
-        attributes: t?.attributes || [],
+        siteInfo: e,
+        attributes: e?.attributes || [],
         user: s,
         cloudInfo: m,
         projects: {
@@ -30,13 +30,13 @@ const a = v(void 0), A = ({ children: r, skip: e = !1 }) => {
           active: f
         },
         isLoading: {
-          siteInfo: n,
+          siteInfo: i,
           user: u,
           cloudInfo: p,
           projects: l
         },
         error: {
-          siteInfo: i,
+          siteInfo: n,
           user: c,
           cloudInfo: j,
           projects: d
@@ -45,8 +45,8 @@ const a = v(void 0), A = ({ children: r, skip: e = !1 }) => {
       children: r
     }
   );
-}, M = () => x(a) || {};
+}, R = () => x(a) || {};
 export {
-  A as G,
-  M as u
+  M as G,
+  R as u
 };

package/dist/chunks/InfoMessage.es.js

@@ -0,0 +1,146 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import u from "styled-components";
+import m from "clsx";
+import { Icon as s, Button as b } from "@ynput/ayon-react-components";
+const v = u.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: var(--padding-m) var(--padding-l);
+  border-radius: var(--border-radius-m);
+  font-weight: 600;
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .icon {
+    font-size: 24px;
+  }
+
+  &.compact {
+    gap: var(--base-gap-large);
+    padding: var(--padding-s) var(--padding-s) var(--padding-s) var(--padding-m);
+
+    .content {
+      gap: var(--base-gap-large);
+    }
+
+    .icon {
+      font-size: 20px;
+    }
+
+    button {
+      &,
+      &.hasIcon {
+        padding: 2px 6px;
+      }
+      gap: 4px;
+    }
+  }
+
+  /* default background */
+  &.info {
+    --message-background-color: var(--md-sys-color-secondary-container);
+    --message-color: var(--md-sys-color-on-secondary-container);
+    --button-background-color: var(--md-sys-color-secondary);
+    --button-background-color-hover: var(--md-sys-color-secondary-hover);
+    --button-color: var(--md-sys-color-on-secondary);
+  }
+
+  /* warning background */
+  &.warning {
+    --message-background-color: var(--md-sys-color-warning-container);
+    --message-color: var(--md-sys-color-on-warning-container);
+    --button-background-color: var(--md-sys-color-warning);
+    --button-background-color-hover: hsl(25, 100%, 80%);
+    --button-color: var(--md-sys-color-on-warning);
+  }
+
+  /* error background */
+  &.error {
+    --message-background-color: var(--md-sys-color-error-container);
+    --message-color: var(--md-sys-color-on-error-container);
+    --button-background-color: var(--md-sys-color-error);
+    --button-background-color-hover: var(--md-sys-color-error-hover);
+    --button-color: var(--md-sys-color-on-error);
+  }
+
+  /* success background */
+  &.success {
+    --message-background-color: var(--md-sys-color-tertiary-container);
+    --message-color: var(--md-sys-color-on-tertiary-container);
+    --button-background-color: var(--md-sys-color-tertiary);
+    --button-background-color-hover: var(--md-sys-color-tertiary-hover);
+    --button-color: var(--md-sys-color-on-tertiary);
+  }
+
+  background-color: var(--message-background-color);
+  &,
+  .icon {
+    color: var(--message-color);
+  }
+
+  button {
+    &,
+    &.hasIcon {
+      padding: 4px;
+    }
+    background-color: var(--button-background-color);
+    &,
+    .icon {
+      color: var(--button-color);
+    }
+    &:hover {
+      background-color: var(--button-background-color-hover);
+    }
+  }
+`, w = g(
+  ({ variant: r = "info", message: e, icon: t, action: o, compact: d, ...a }, l) => /* @__PURE__ */ n(
+    v,
+    {
+      ...a,
+      className: m("message", a.className, r, { compact: d }),
+      ref: l,
+      children: [
+        /* @__PURE__ */ n("div", { className: "content", children: [
+          /* @__PURE__ */ c(s, { icon: t || p(r) }),
+          e
+        ] }),
+        o && /* @__PURE__ */ n(
+          b,
+          {
+            icon: o.iconPosition === "right" ? void 0 : o.icon,
+            onClick: (i) => {
+              i.stopPropagation(), o.callback();
+            },
+            children: [
+              o.label,
+              o.iconPosition === "right" && /* @__PURE__ */ c(s, { icon: o.icon })
+            ]
+          }
+        )
+      ]
+    }
+  )
+), p = (r) => {
+  switch (r) {
+    case "info":
+      return "info";
+    case "warning":
+      return "warning";
+    case "error":
+      return "error";
+    case "success":
+      return "done_all";
+    default:
+      return "info";
+  }
+};
+export {
+  w as I
+};

package/dist/chunks/JsonViewer.es.js

@@ -2,7 +2,7 @@ import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import { useMemo as a } from "react";
 import c from "styled-components";
 import { Icon as p } from "@ynput/ayon-react-components";
-import s from "/home/jakub/code/ynput/ayon-frontend/node_modules/@uiw/react-textarea-code-editor/esm/index.js";
+import s from "@uiw/react-textarea-code-editor";
 import "lodash";
 import "primereact/confirmdialog";
 import "react-toastify";

package/dist/chunks/Menu.es.js

@@ -395,10 +395,10 @@ const it = "ayon-menu-dialog", ft = "ayon-menu-content", ne = ({
 };
 export {
   te as E,
-  ft as M,
-  ee as a,
-  it as b,
-  oe as c,
-  ne as d,
+  ne as M,
+  oe as a,
+  ee as b,
+  ft as c,
+  it as d,
   ot as e
 };

package/dist/chunks/MenuContext.es.js

@@ -1,42 +1,42 @@
-import { jsx as C } from "react/jsx-runtime";
-import { createContext as N, useState as g, useEffect as T, useCallback as p, useContext as A, useRef as ae } from "react";
-import { u as ue, r as pe, w as de } from "./useLocalStorage.es.js";
+import { jsx as D } from "react/jsx-runtime";
+import { createContext as N, useState as w, useEffect as T, useCallback as d, useContext as A, useRef as ae } from "react";
+import { u as ue, r as de, w as pe } from "./useLocalStorage.es.js";
 import "lodash";
 import "primereact/confirmdialog";
 import "react-toastify";
 import "uuid";
 import { p as le, b as fe, g as ge } from "./getBundleMode.es.js";
 import "./searchTerms.es.js";
-import { cW as Se } from "./getUris.es.js";
+import { cX as Se } from "./getUris.es.js";
 const Me = "uri", V = N(void 0), Le = ({ children: e }) => {
-  const t = location.pathname, [n, s] = g(""), c = ["projects", "settings", "dashboard/tasks"];
+  const t = location.pathname, [n, s] = w(""), c = ["projects", "settings", "dashboard/tasks"];
   T(() => {
     c.some((v) => t.startsWith(`/${v}`)) || s("");
   }, [t, s]);
-  const { type: u, entity: a, settings: i } = le(n), o = p(
+  const { type: u, entity: a, settings: i } = le(n), o = d(
     ({ projectName: l, folderPath: v, taskName: x, productName: M, versionName: L }) => {
-      const m = fe({ projectName: l, folderPath: v, taskName: x, productName: M, versionName: L });
-      s(m);
+      const y = fe({ projectName: l, folderPath: v, taskName: x, productName: M, versionName: L });
+      s(y);
     },
     [s]
-  ), [S] = Se(), w = p(async () => {
+  ), [g] = Se(), S = d(async () => {
     if (u !== "entity" || !n) return [];
     try {
-      const l = await S({ resolveRequestModel: { uris: [n] } }).unwrap();
+      const l = await g({ resolveRequestModel: { uris: [n] } }).unwrap();
       return console.log("Resolved entity from URI:", l), l;
     } catch (l) {
       return console.warn("Failed to resolve URI:", l), [];
     }
-  }, [S, n, u]), d = {
+  }, [g, n, u]), p = {
     uri: n,
     uriType: u,
     entity: a,
     settings: i,
     setUri: s,
     setEntityUri: o,
-    getUriEntities: w
+    getUriEntities: S
   };
-  return /* @__PURE__ */ C(V.Provider, { value: d, children: e });
+  return /* @__PURE__ */ D(V.Provider, { value: p, children: e });
 }, we = () => {
   const e = A(V);
   if (e === void 0)
@@ -56,23 +56,25 @@ const Me = "uri", V = N(void 0), Le = ({ children: e }) => {
   } catch {
     return t;
   }
-}, De = (e, t) => {
+}, Ce = (e, t) => {
   if (!(typeof window > "u"))
     try {
-      sessionStorage.setItem(e, JSON.stringify(t)), window.dispatchEvent(new Event("session-storage"));
+      sessionStorage.setItem(e, JSON.stringify(t)), window.dispatchEvent(new CustomEvent("session-storage", { detail: { key: e } }));
     } catch (n) {
       console.error(n);
     }
 };
-function Y(e, t) {
+function W(e, t) {
   const n = ae(t);
   n.current = t;
-  const [s, c] = g(() => typeof window > "u" ? t : U(sessionStorage.getItem(e), t));
+  const [s, c] = w(() => typeof window > "u" ? t : U(sessionStorage.getItem(e), t));
   T(() => {
     const a = sessionStorage.getItem(e);
     c(U(a, n.current)), a || sessionStorage.setItem(e, JSON.stringify(n.current));
     function i(o) {
       if ("key" in o && o.key && o.key !== e) return;
+      const g = o.detail?.key;
+      if (g && g !== e) return;
       const S = sessionStorage.getItem(e);
       c(U(S, n.current));
     }
@@ -80,12 +82,12 @@ function Y(e, t) {
       window.removeEventListener("session-storage", i), window.removeEventListener("storage", i);
     };
   }, [e]);
-  const u = p(
+  const u = d(
     (a) => {
       try {
         c((i) => {
           const o = typeof a == "function" ? a(i) : a;
-          return sessionStorage.setItem(e, JSON.stringify(o)), typeof window < "u" && window.dispatchEvent(new Event("session-storage")), o;
+          return sessionStorage.setItem(e, JSON.stringify(o)), typeof window < "u" && window.dispatchEvent(new CustomEvent("session-storage", { detail: { key: e } })), o;
         });
       } catch (i) {
         console.error(i);
@@ -95,55 +97,55 @@ function Y(e, t) {
   );
   return [s, u];
 }
-const q = N(void 0), ye = ["feed", "subtasks", "details", "files"], H = (e) => typeof e == "string" && ye.includes(e), Ce = ({
+const Y = N(void 0), me = ["feed", "subtasks", "details", "files"], q = (e) => typeof e == "string" && me.includes(e), De = ({
   children: e,
   defaultTab: t = "feed",
   hasLicense: n,
   debug: s = {},
   ...c
 }) => {
-  const u = c.user, a = ge(u), i = "isGuest" in s ? s.isGuest : u?.data?.isGuest, { powerLicense: o, setPowerpackDialog: S } = ue(), w = "hasLicense" in s ? s.hasLicense : !!o || n, [d, l] = g({}), [v, x] = g([]), M = p(
-    (r) => d[r] ? d[r] : !1,
-    [d]
-  ), L = p(
-    (r, y) => {
-      const f = { ...d };
-      f[r] = y, l(f);
+  const u = c.user, a = ge(u), i = "isGuest" in s ? s.isGuest : u?.data?.isGuest, { powerLicense: o, setPowerpackDialog: g } = ue(), S = "hasLicense" in s ? s.hasLicense : !!o || n, [p, l] = w({}), [v, x] = w([]), M = d(
+    (r) => p[r] ? p[r] : !1,
+    [p]
+  ), L = d(
+    (r, m) => {
+      const f = { ...p };
+      f[r] = m, l(f);
     },
-    [d]
-  ), [m, $] = Y(b, {}), z = p(
+    [p]
+  ), [y, X] = W(b, {}), $ = d(
     (r) => {
-      const y = m[r];
-      return H(y) ? y : t;
+      const m = y[r];
+      return q(m) ? m : t;
     },
-    [m, t]
-  ), [B, F] = g(null), Q = p((r) => {
+    [y, t]
+  ), [B, F] = w(null), z = d((r) => {
     F(r);
-  }, []), j = p(() => {
-    F(null), B && D([]);
+  }, []), j = d(() => {
+    F(null), B && C([]);
   }, []);
   T(() => {
     j();
   }, [c.useLocation().pathname]);
-  const [X, _] = g(null), Z = p((r) => {
+  const [Q, _] = w(null), Z = d((r) => {
     _(r);
-  }, []), k = p(() => {
+  }, []), k = d(() => {
     _(null);
-  }, []), [ee, R] = g(null), [te, D] = g([]), { uriType: ne, uri: se, entity: h, getUriEntities: oe } = we(), [P] = c.useSearchParams(), E = P.get("project"), O = P.get("type"), I = P.get("id"), J = P.get("activity");
+  }, []), [ee, R] = w(null), [te, C] = w([]), { uriType: ne, uri: se, entity: h, getUriEntities: oe } = we(), [P] = c.useSearchParams(), E = P.get("project"), O = P.get("type"), I = P.get("id"), J = P.get("activity");
   T(() => {
     if (!(!E && !O && !I)) {
       if (ne === "entity" && h && h.entityType !== "product") {
         oe().then((r) => {
           if (r.length === 0) return;
-          const y = r.find((ce) => ce.uri === se), f = y?.entities?.[0];
-          if (!y || !f) return;
-          const G = f?.projectName || h.projectName || "", W = f.representationId || f.versionId || f.productId || f.taskId || f.folderId;
-          if (!G || !W) return;
+          const m = r.find((ce) => ce.uri === se), f = m?.entities?.[0];
+          if (!m || !f) return;
+          const G = f?.projectName || h.projectName || "", K = f.representationId || f.versionId || f.productId || f.taskId || f.folderId;
+          if (!G || !K) return;
           const re = {
             entityType: h.entityType,
             entities: [
               {
-                id: W,
+                id: K,
                 projectName: G
               }
             ],
@@ -164,30 +166,30 @@ const q = N(void 0), ye = ["feed", "subtasks", "details", "files"], H = (e) => t
           }
         ],
         source: "url"
-      }), J && (D([J]), $({
-        ...m,
+      }), J && (C([J]), X({
+        ...y,
         overview: "feed"
       })));
     }
   }, [E, O, I]);
   const ie = {
     // open state for the panel by scope
-    panelOpenByScope: d,
+    panelOpenByScope: p,
     getOpenForScope: M,
     setPanelOpen: L,
     setPanelOpenByScope: l,
     // tab preferences
-    tabsByScope: m,
-    getTabForScope: z,
+    tabsByScope: y,
+    getTabForScope: $,
     // slide out state
     slideOut: B,
-    openSlideOut: Q,
+    openSlideOut: z,
     closeSlideOut: j,
     // highlighted activities
     highlightedActivities: te,
-    setHighlightedActivities: D,
+    setHighlightedActivities: C,
     // PiP state
-    pip: X,
+    pip: Q,
     openPip: Z,
     closePip: k,
     // entities state
@@ -197,35 +199,35 @@ const q = N(void 0), ye = ["feed", "subtasks", "details", "files"], H = (e) => t
     setFeedAnnotations: x,
     bundleMode: a,
     isGuest: i,
-    hasLicense: w,
-    onPowerFeature: S,
+    hasLicense: S,
+    onPowerFeature: g,
     ...c
   };
-  return /* @__PURE__ */ C(q.Provider, { value: ie, children: e });
-}, me = () => {
-  const e = A(q);
+  return /* @__PURE__ */ D(Y.Provider, { value: ie, children: e });
+}, ye = () => {
+  const e = A(Y);
   if (e === void 0)
     throw new Error("useDetailsPanel must be used within a DetailsPanelProvider");
   return e;
 }, b = "details/tabs-by-scope", Ne = (e, t) => {
-  const n = pe(b, {});
-  de(b, { ...n, [e]: t });
+  const n = de(b, {});
+  pe(b, { ...n, [e]: t });
 }, Ae = (e) => {
-  const { getOpenForScope: t, setPanelOpen: n, getTabForScope: s } = me(), [c, u] = Y(b, {}), a = c[e], i = H(a) ? a : s(e), o = p(
-    (w) => {
-      u((d) => ({ ...d, [e]: w }));
+  const { getOpenForScope: t, setPanelOpen: n, getTabForScope: s } = ye(), [c, u] = W(b, {}), a = c[e], i = q(a) ? a : s(e), o = d(
+    (S) => {
+      u((p) => ({ ...p, [e]: S }));
     },
     [e, u]
-  ), S = i === "feed";
+  ), g = i === "feed";
   return {
     isOpen: t(e),
-    setOpen: (w) => n(e, w),
+    setOpen: (S) => n(e, S),
     currentTab: i,
     setTab: o,
-    isFeed: S
+    isFeed: g
   };
-}, K = N(void 0), Be = ({ children: e, useNavigate: t }) => {
-  const [n, s] = g(!1), c = t(), i = {
+}, H = N(void 0), Be = ({ children: e, useNavigate: t }) => {
+  const [n, s] = w(!1), c = t(), i = {
     menuOpen: n,
     setMenuOpen: (o) => {
       s(o);
@@ -239,25 +241,25 @@ const q = N(void 0), ye = ["feed", "subtasks", "details", "files"], H = (e) => t
     },
     navigate: c
   };
-  return /* @__PURE__ */ C(K.Provider, { value: i, children: e });
+  return /* @__PURE__ */ D(H.Provider, { value: i, children: e });
 }, Fe = () => {
-  const e = A(K);
+  const e = A(H);
   if (e === void 0)
     throw new Error("useMenuContext must be used within a MenuProvider");
   return e;
 };
 export {
-  Ce as D,
+  De as D,
   Be as M,
   Le as U,
-  K as a,
+  H as a,
   Me as b,
-  me as c,
+  ye as c,
   Ae as d,
   we as e,
-  Y as f,
+  W as f,
   Re as r,
   Ne as s,
   Fe as u,
-  De as w
+  Ce as w
 };