@ynput/ayon-frontend-shared 0.4.7 → 0.6.0

package/dist/chunks/TableSettingsFallback.es.js

@@ -2,26 +2,26 @@ import { jsx as o, jsxs as e, Fragment as n } from "react/jsx-runtime";
 import { R as c, P as l } from "./ReviewablesSelector.es.js";
 import "react";
 import "@ynput/ayon-react-components";
-import { u as m } from "./useLocalStorage.es.js";
+import { a as m } from "./useLocalStorage.es.js";
 const P = ({
   requiredVersion: r,
   feature: t,
-  button: i,
-  children: a
+  button: a,
+  children: i
 }) => {
   const { setPowerpackDialog: s } = m();
   return r ? /* @__PURE__ */ o(c, { requiredVersion: r }) : /* @__PURE__ */ e(n, { children: [
-    !!i && /* @__PURE__ */ o(
+    !!a && /* @__PURE__ */ o(
       l,
       {
         style: { width: "100%" },
         icon: "add",
         variant: "filled",
-        ...i,
+        ...a,
         feature: t
       }
     ),
-    /* @__PURE__ */ o("div", { onClick: () => s(t), children: a })
+    /* @__PURE__ */ o("div", { onClick: () => s(t), children: i })
   ] });
 };
 export {

package/dist/chunks/ThumbnailSimple.es.js

@@ -1,63 +1,407 @@
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { Dialog as S, FormRow as m, InputDate as u, SaveButton as k, Icon as j } from "@ynput/ayon-react-components";
-import d from "styled-components";
-import { format as p, parse as h } from "date-fns";
-import "lodash";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { createPortal as te } from "react-dom";
+import { useMemo as b, createContext as ie, useState as _, useContext as ne, useEffect as oe } from "react";
+import { aQ as D } from "./searchTerms.es.js";
+import { bf as ae, C as se, bi as re, aE as ce, dd as le, aR as de, aL as ue, a_ as me, K as pe, bA as ye, bh as fe, bs as ge } from "./getUris.es.js";
 import "primereact/confirmdialog";
+import { union as ve, isEqual as he } from "lodash";
+import { e as xe } from "./expandRelativeDates.es.js";
+import { u as be } from "./DetailsPanelContext.es.js";
+import { U as we } from "./PlayableIcon.es.js";
+import y, { keyframes as Te } from "styled-components";
+import { Icon as P, Dialog as ke, FormRow as I, InputDate as j, SaveButton as Me } from "@ynput/ayon-react-components";
+import { a as _e } from "./EntityTooltip.es.js";
+import { format as L, parse as R } from "date-fns";
 import "react-toastify";
 import "uuid";
-import { g as E } from "./getThumbnailUrl.es.js";
-import "./searchTerms.es.js";
-const B = d.div`
+import { g as Ne } from "./getThumbnailUrl.es.js";
+const Ae = ({
+  entities: e,
+  filter: t,
+  backendFilter: i,
+  activityTypes: n,
+  projectName: r,
+  entityType: c
+}) => {
+  const o = b(
+    () => e.map((p) => ({ id: p.id, projectName: p.projectName, entityType: c })),
+    [e]
+  ).map((p) => p.id), a = !e.length || !t || !n || !r, f = {
+    entityIds: o,
+    projectName: r,
+    referenceTypes: ["origin", "mention", "relation"],
+    activityTypes: n,
+    activityFilter: i,
+    filter: t
+  };
+  let {
+    data: u,
+    isLoading: l,
+    isFetchingNextPage: h,
+    currentData: v,
+    fetchNextPage: w,
+    hasNextPage: x
+  } = ae(f, { skip: a });
+  const T = b(() => u?.pages ? u.pages.flatMap((p) => p.activities || []) : [], [u?.pages]), k = b(() => v?.pages ? v.pages.flatMap((p) => p.activities || []) : [], [v?.pages]), N = async () => {
+    if (!x) {
+      console.log("No more activities to load");
+      return;
+    }
+    return console.log("loading next page..."), await w();
+  }, A = b(() => {
+    if (!l) return !1;
+    const p = ve(
+      k?.flatMap((M) => M.entityId ? M.entityId : [])
+    );
+    return !he(p, o);
+  }, [k, o, l]);
+  return a && (l = !0), {
+    activitiesData: T,
+    isLoadingActivities: l,
+    isLoadingNew: A,
+    isLoadingNextPage: h,
+    hasNextPage: x,
+    loadNextPage: N
+  };
+}, Ee = new Set(Object.keys(se).filter((e) => e !== "activity")), Ce = {
+  has_attachments: "activity_data.files",
+  // not `entity_type`: on inbox rows that column is always 'user'
+  origin_type: "activity_data.origin.type"
+}, Fe = (e) => !!e && "key" in e, Ie = (e) => {
+  const t = Ce[e.key] ?? e.key;
+  if (e.key === "has_attachments")
+    return e.value ? { key: t, operator: "ne", value: [] } : null;
+  if (e.key === "in_review_session")
+    return e.value ? { key: "activity_data.entityList", operator: "notnull" } : null;
+  if (e.key === "category") {
+    const i = Array.isArray(e.value) ? e.value : [], n = i.includes("__none__"), r = i.filter((o) => o !== "__none__"), c = {
+      operator: "or",
+      conditions: [
+        { key: "activity_data.category", operator: "isnull" },
+        { key: "activity_data.category", operator: "eq", value: "" }
+      ]
+    }, d = {
+      key: "activity_data.category",
+      operator: "in",
+      value: r
+    };
+    return n && r.length ? { operator: "or", conditions: [c, d] } : n ? c : r.length ? d : null;
+  }
+  return e.key === "body" && e.operator === "like" && typeof e.value == "string" ? { ...e, key: t, value: `%${e.value}%` } : e.key === "author" ? {
+    operator: "or",
+    conditions: [
+      { ...e, key: "activity_data.author" },
+      { ...e, key: "activity_data.assignee" }
+    ]
+  } : { ...e, key: t };
+}, z = (e) => {
+  if (Fe(e))
+    return Ee.has(e.key) ? null : Ie(e);
+  const t = (e.conditions || []).map((i) => z(i)).filter((i) => i !== null);
+  return t.length === 0 ? null : { operator: e.operator || "and", conditions: t };
+}, je = (e) => {
+  if (!e || !e.conditions?.length) return null;
+  const t = xe(e), i = z(t);
+  return i || null;
+}, Le = (e) => {
+  const t = je(e);
+  if (t)
+    return JSON.stringify(t);
+}, pt = "__new__", U = ie(void 0), yt = ({ children: e, ...t }) => {
+  const { isGuest: i } = be(), { data: n = [] } = re({ projects: [t.projectName] }), { data: r = [] } = D.useGetTeamsQuery(
+    { projectName: t.projectName, showMembers: !0 },
+    { skip: !t.projectName }
+  ), c = b(
+    () => r.filter((m) => m.members?.some((ee) => ee.name === t.userName)).map((m) => m.name),
+    [r, t.userName]
+  ), [d, o] = _({
+    operator: "and",
+    conditions: []
+  }), [a, f] = _(""), u = t.feedFilter ?? d, l = t.setFeedFilter ?? o, [h, v] = _(null), [w, x] = _(null), [T, { isLoading: k }] = ce(), [N, { isLoading: A }] = le(), [p, { isLoading: M }] = de(), G = k || A || M, B = async (m) => await T(m).unwrap(), O = async (m) => await N(m).unwrap(), K = async (m) => await p(m).unwrap(), [q] = ue(), [Y] = me(), W = async (m) => await q(m).unwrap(), H = async (m) => await Y(m).unwrap(), C = pe(u), F = b(() => Le(u), [u]), J = Ae({
+    entities: t.entities,
+    filter: u,
+    backendFilter: F,
+    activityTypes: C,
+    projectName: t.projectName,
+    entityType: t.entityType
+  }), { data: V = {} } = ye(
+    {
+      suggestRequest: {
+        entityType: t.entityType,
+        entityId: t.entities[0]?.id
+      },
+      projectName: t.projectName
+    },
+    { skip: !h }
+  ), { data: X = [] } = fe({
+    projectName: t.projectName
+  }), { data: Z } = ge(
+    {
+      projectName: t.projectName,
+      entityIds: t.entities.map((m) => m.id)
+    },
+    { skip: !t.projectName || !t.entities.length }
+  );
+  return /* @__PURE__ */ s(
+    U.Provider,
+    {
+      value: {
+        ...t,
+        ...J,
+        mentionSuggestionsData: V,
+        categories: X,
+        checklistCount: Z,
+        users: n,
+        isUpdatingActivity: G,
+        userTeamNames: c,
+        refTooltip: w,
+        activityTypes: C,
+        feedFilter: u,
+        setFeedFilter: l,
+        backendFilter: F,
+        searchText: a,
+        setSearchText: f,
+        isGuest: i,
+        editingId: h,
+        setEditingId: v,
+        setRefTooltip: x,
+        // Query functions
+        createEntityActivity: B,
+        updateActivity: O,
+        deleteActivity: K,
+        createReaction: W,
+        deleteReaction: H
+      },
+      children: e
+    }
+  );
+}, E = () => {
+  const e = ne(U);
+  if (!e)
+    throw new Error("useFeedContext must be used within a FeedProvider");
+  return e;
+}, Re = () => {
+  const { refTooltip: e, setRefTooltip: t } = E();
+  return [e, (n) => {
+    n && n.id !== e?.id && t(n), n || t(null);
+  }];
+}, Se = y.span`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-large);
+
+  .thumbnail {
+    width: ${({ $size: e }) => e}px;
+    height: ${({ $size: e }) => e}px;
+
+    .icon {
+      font-size: ${({ $size: e }) => Math.round(e * 0.58)}px;
+    }
+  }
+
+  span {
+    white-space: nowrap;
+  }
+`, De = y.span`
+  display: flex;
+  flex-direction: column;
+
+  .label {
+    color: var(--md-sys-color-outline);
+    font-size: 0.85em;
+  }
+`, $ = ({ name: e, fullName: t, showSubtitle: i, size: n = 24 }) => /* @__PURE__ */ g(Se, { $size: n, children: [
+  /* @__PURE__ */ s(we, { name: e, size: n }),
+  i ? /* @__PURE__ */ g(De, { children: [
+    /* @__PURE__ */ s("span", { children: t || e }),
+    t && /* @__PURE__ */ s("span", { className: "label", children: e })
+  ] }) : /* @__PURE__ */ s("span", { children: t || e })
+] }), Pe = Te`
+    from {
+        opacity: 0.4;
+        scale: 0.9;
+    }
+    to {
+        opacity: 1;
+        scale: 1;
+    }
+`, Q = y.span`
+  display: flex;
+  padding: 8px;
+  gap: var(--base-gap-large);
+  z-index: 100;
+  align-items: center;
+
+  background-color: var(--md-sys-color-surface-container-high);
+  border-radius: var(--border-radius-m);
+
+  position: fixed;
+  transform: translate(-50%, calc(-100% - 4px));
+  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.2);
+  z-index: 9999;
+
+  .thumbnail {
+    width: 40px;
+    height: 40px;
+
+    .icon {
+      font-size: 24px;
+    }
+  }
+
+  animation: ${Pe} 50ms ease-out;
+  transform-origin: left bottom;
+`, ze = ({ name: e, label: t, pos: i }) => /* @__PURE__ */ s(Q, { style: { ...i }, children: /* @__PURE__ */ s($, { name: e || "", fullName: t, showSubtitle: !0, size: 32 }) }), Ue = y(Q)`
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 180px;
+`, $e = y.span`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-large);
+
+  .icon {
+    font-size: 20px;
+  }
+`, Qe = y.span`
+  display: flex;
+  flex-direction: column;
+
+  span {
+    white-space: nowrap;
+  }
+
+  .label {
+    color: var(--md-sys-color-outline);
+    font-size: 0.85em;
+  }
+`, Ge = y.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+`, Be = y.li`
+  display: flex;
+  align-items: center;
+`, Oe = y.span`
+  color: var(--md-sys-color-outline);
+  font-size: 0.85em;
+  padding-left: 32px;
+`, S = 5, Ke = ({ name: e, pos: t }) => {
+  const { projectName: i, users: n } = E(), { data: r = [] } = D.useGetTeamsQuery(
+    { projectName: i, showMembers: !0 },
+    { skip: !i || !e }
+  ), c = r.find((l) => l.name === e), d = c?.members ?? [], o = c?.memberCount ?? 0, a = d.slice(0, S), f = Math.max(0, o - S), u = new Map(n.map((l) => [l.name, l.attrib?.fullName || void 0]));
+  return /* @__PURE__ */ g(Ue, { style: { ...t }, children: [
+    /* @__PURE__ */ g($e, { children: [
+      /* @__PURE__ */ s(P, { icon: "group" }),
+      /* @__PURE__ */ g(Qe, { children: [
+        /* @__PURE__ */ s("span", { children: e }),
+        c && /* @__PURE__ */ g("span", { className: "label", children: [
+          o,
+          " ",
+          o === 1 ? "member" : "members"
+        ] })
+      ] })
+    ] }),
+    a.length > 0 && /* @__PURE__ */ g(Ge, { children: [
+      a.map((l) => /* @__PURE__ */ s(Be, { children: /* @__PURE__ */ s(
+        $,
+        {
+          name: l.name,
+          fullName: u.get(l.name),
+          size: 20
+        }
+      ) }, l.name)),
+      f > 0 && /* @__PURE__ */ g(Oe, { children: [
+        "+",
+        f,
+        " more"
+      ] })
+    ] })
+  ] });
+}, qe = ({ type: e, id: t, pos: i }) => {
+  const { projectInfo: n, projectName: r } = E();
+  return /* @__PURE__ */ s(
+    _e,
+    {
+      entityType: e,
+      entityId: t,
+      projectName: r,
+      projectInfo: n,
+      pos: i
+    }
+  );
+}, ft = () => {
+  const [e, t] = Re(), { type: i, label: n, name: r, pos: c, id: d } = e || {}, o = document.querySelector(".feed ul");
+  return oe(() => {
+    if (d) {
+      const a = (f) => {
+        const u = f.target, l = CSS.escape(`ref-${d.replaceAll(".", "-")}`), h = u?.closest(`#${l}`), v = u?.closest("[data-mention-value], .reference");
+        !h && !v && (t(null), document.removeEventListener("mouseover", a), o && o.removeEventListener("scroll", a));
+      };
+      return document.addEventListener("mouseover", a), o && o.addEventListener("scroll", a), () => {
+        document.removeEventListener("mouseover", a), o && o.removeEventListener("scroll", a);
+      };
+    }
+  }, [d, t, o]), d ? te(
+    i === "user" && c ? /* @__PURE__ */ s(ze, { name: r, label: n, pos: c }) : i === "team" && c ? /* @__PURE__ */ s(Ke, { name: r, pos: c }) : /* @__PURE__ */ s(qe, { type: i, label: n, name: r, pos: c, id: d }),
+    document.body
+  ) : null;
+}, Ye = y.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-`, G = ({
-  isOpen: l,
+`, gt = ({
+  isOpen: e,
   header: t,
-  startDate: o,
-  endDate: e,
+  startDate: i,
+  endDate: n,
   onStartDateChange: r,
-  onEndDateChange: s,
-  onApply: c,
-  onClose: a
-}) => /* @__PURE__ */ n(
-  S,
+  onEndDateChange: c,
+  onApply: d,
+  onClose: o
+}) => /* @__PURE__ */ s(
+  ke,
   {
-    isOpen: l,
-    onClose: a,
+    isOpen: e,
+    onClose: o,
     header: t,
     size: "sm",
     hideCancelButton: !0,
-    footer: /* @__PURE__ */ n(
-      k,
+    footer: /* @__PURE__ */ s(
+      Me,
       {
         label: "Confirm",
         icon: "check",
-        onClick: c,
-        active: !!o && !!e && e >= o
+        onClick: d,
+        active: !!i && !!n && n >= i
       }
     ),
-    children: /* @__PURE__ */ y(B, { children: [
-      /* @__PURE__ */ n(m, { label: "Start date", children: /* @__PURE__ */ n(
-        u,
+    children: /* @__PURE__ */ g(Ye, { children: [
+      /* @__PURE__ */ s(I, { label: "Start date", children: /* @__PURE__ */ s(
+        j,
         {
-          selected: o ? h(o, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
-          onChange: (i) => r(i ? p(i, "yyyy-MM-dd") : ""),
+          selected: i ? R(i, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
+          onChange: (a) => r(a ? L(a, "yyyy-MM-dd") : ""),
           autoFocus: !0
         }
       ) }),
-      /* @__PURE__ */ n(m, { label: "End date", children: /* @__PURE__ */ n(
-        u,
+      /* @__PURE__ */ s(I, { label: "End date", children: /* @__PURE__ */ s(
+        j,
         {
-          selected: e ? h(e, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
-          onChange: (i) => s(i ? p(i, "yyyy-MM-dd") : ""),
-          openToDate: o ? new Date(o) : void 0
+          selected: n ? R(n, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : void 0,
+          onChange: (a) => c(a ? L(a, "yyyy-MM-dd") : ""),
+          openToDate: i ? new Date(i) : void 0
         }
       ) })
     ] })
   }
-), z = d.div`
+), We = y.div`
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -79,7 +423,7 @@ const B = d.div`
     background-color: hsl(220 20% 8%);
     color: var(--md-sys-color-outline);
   }
-`, F = d.img`
+`, He = y.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -88,41 +432,46 @@ const B = d.div`
   display: block;
   position: absolute;
   inset: 0;
-`, H = ({
-  projectName: l,
+`, vt = ({
+  projectName: e,
   entityType: t,
-  entityId: o,
-  icon: e,
+  entityId: i,
+  icon: n,
   thumbnailHash: r,
-  isLoading: s,
-  className: c,
-  disabled: a,
-  src: i,
-  onLoad: g,
-  onError: f,
-  iconOnly: b,
-  ...v
+  isLoading: c,
+  className: d,
+  disabled: o,
+  src: a,
+  onLoad: f,
+  onError: u,
+  iconOnly: l,
+  ...h
 }) => {
-  const w = E({
-    projectName: l,
+  const v = Ne({
+    projectName: e,
     entityType: t,
-    entityId: o,
+    entityId: i,
     thumbnailHash: r ? String(r) : void 0
-  }), x = t === "project", M = ["product"].includes(t), C = x ? !!l : !!o;
-  return /* @__PURE__ */ y(z, { className: c + " thumbnail", ...v, children: [
-    !s && !a && /* @__PURE__ */ n(j, { icon: e || "image" }),
-    (t && !M && C || i) && !b && /* @__PURE__ */ n(
-      F,
+  }), w = t === "project", x = ["product"].includes(t), T = w ? !!e : !!i;
+  return /* @__PURE__ */ g(We, { className: d + " thumbnail", ...h, children: [
+    !c && !o && /* @__PURE__ */ s(P, { icon: n || "image" }),
+    (t && !x && T || a) && !l && /* @__PURE__ */ s(
+      He,
       {
-        alt: `Entity thumbnail ${o || l}`,
-        src: i || w || void 0,
-        onLoad: g,
-        onError: f
+        alt: `Entity thumbnail ${i || e}`,
+        src: a || v || void 0,
+        onLoad: f,
+        onError: u
       }
     )
   ] });
 };
 export {
-  G as C,
-  H as T
+  ft as A,
+  gt as C,
+  pt as F,
+  vt as T,
+  yt as a,
+  Re as b,
+  E as u
 };