@ynput/ayon-frontend-shared 0.4.6 → 0.5.0

package/dist/chunks/ColumnDropIndicator.es.js

@@ -1,146 +1,33 @@
-import { jsxs as m, jsx as s, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as C, createContext as M, useRef as S, useState as N, useEffect as P } from "react";
+import { createContext as I, forwardRef as S, useRef as _, useState as M, useEffect as R } from "react";
+import { jsxs as g, jsx as i, Fragment as y } from "react/jsx-runtime";
+import { Button as v, Icon as D } from "@ynput/ayon-react-components";
+import h from "clsx";
 import c from "styled-components";
-import g from "clsx";
-import { Icon as w, Button as y } from "@ynput/ayon-react-components";
-import { u as R } from "./MenuContext.es.js";
-import { d as z, c as D } from "./Menu.es.js";
+import { u as O } from "./MenuContext.es.js";
+import { M as P, a as z } from "./Menu.es.js";
 import "./MenuItem.es.js";
 import "./useLocalStorage.es.js";
 import "@module-federation/enhanced/runtime";
-import "/home/jakub/code/ynput/ayon-frontend/shared/node_modules/semver/semver.js";
-import { R as b, D as k } from "./realtimeUpdatesUtils.es.js";
+import "semver";
+import { R as C, D as w } from "./realtimeUpdatesUtils.es.js";
 import "lodash";
 import "primereact/confirmdialog";
 import "react-toastify";
-import { c as O } from "./copyToClipboard.es.js";
+import { c as A } from "./copyToClipboard.es.js";
 import "uuid";
 import "./searchTerms.es.js";
-import { createPortal as A } from "react-dom";
-import { useDndContext as E } from "@dnd-kit/core";
-const F = c.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;
-  }
-
-  /* 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);
-    }
-  }
-`, yo = C(
-  ({ variant: o = "info", message: t, icon: r, action: n, ...l }, a) => /* @__PURE__ */ m(
-    F,
-    {
-      ...l,
-      className: g("message", l.className, o),
-      ref: a,
-      children: [
-        /* @__PURE__ */ m("div", { className: "content", children: [
-          /* @__PURE__ */ s(w, { icon: r || B(o) }),
-          t
-        ] }),
-        n && /* @__PURE__ */ s(
-          y,
-          {
-            icon: n.icon,
-            onClick: (u) => {
-              u.stopPropagation(), n.callback();
-            },
-            children: n.label
-          }
-        )
-      ]
-    }
-  )
-), B = (o) => {
-  switch (o) {
-    case "info":
-      return "info";
-    case "warning":
-      return "warning";
-    case "error":
-      return "error";
-    case "success":
-      return "done_all";
-    default:
-      return "info";
-  }
-}, T = (o) => {
-  const t = o.getIsPinned(), r = o.id !== b && o.id !== k ? -30 : 0;
+import { createPortal as E } from "react-dom";
+import { useDndContext as N } from "@dnd-kit/core";
+const F = (t) => {
+  const o = t.getIsPinned(), n = t.id !== C && t.id !== w ? -30 : 0;
   return {
-    left: t === "left" ? `${o.getStart("left") + r}px` : void 0,
-    right: t === "right" ? `${o.getAfter("right")}px` : void 0,
-    position: t ? "sticky" : "relative",
-    width: o.getSize(),
-    zIndex: t ? 100 : 0
+    left: o === "left" ? `${t.getStart("left") + n}px` : void 0,
+    right: o === "right" ? `${t.getAfter("right")}px` : void 0,
+    position: o ? "sticky" : "relative",
+    width: t.getSize(),
+    zIndex: o ? 100 : 0
   };
-}, H = (o) => `calc(var(--col-${o}-size) * 1px)`, bo = M(void 0), xo = C(({ ...o }, t) => /* @__PURE__ */ m(
+}, B = (t) => `calc(var(--col-${t}-size) * 1px)`, ht = I(void 0), gt = S(({ ...t }, o) => /* @__PURE__ */ g(
   "svg",
   {
     width: "25",
@@ -148,10 +35,10 @@ const F = c.div`
     viewBox: "0 0 25 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...o,
-    ref: t,
+    ...t,
+    ref: o,
     children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M0.938178 10.6543C0.816721 5.48877 5.1207 1.23771 10.4975 1.11128C15.8743 0.98486 20.3734 5.02894 20.4948 10.1945C20.6163 15.36 16.3122 19.6111 10.9354 19.7376C9.75118 19.7654 8.61022 19.5914 7.5495 19.2479C7.33438 19.1783 7.0983 19.1794 6.88174 19.2638L5.242 19.9017C4.31715 20.2614 3.35776 19.4629 3.54364 18.4881L3.72118 17.557C3.78241 17.2359 3.67515 16.9129 3.45681 16.6832C1.94083 15.0885 0.992941 12.9834 0.938178 10.6543Z",
@@ -159,7 +46,7 @@ const F = c.div`
           strokeWidth: "1.5"
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M15.3853 4.70168C19.9873 4.59348 23.892 8.06066 23.9977 12.5556C24.0445 14.5475 23.3301 16.3832 22.121 17.8111C22.0428 17.9034 22.0185 18.0146 22.041 18.108L22.2908 19.1496C22.5495 20.2281 21.5204 21.1699 20.469 20.8169L18.8159 20.2617C18.7509 20.2398 18.6726 20.2401 18.5934 20.2693C17.7115 20.5946 16.7586 20.7823 15.764 20.8057C11.1621 20.9139 7.2573 17.4467 7.1516 12.9517C7.04592 8.45675 10.7834 4.80988 15.3853 4.70168Z",
@@ -168,7 +55,7 @@ const F = c.div`
           strokeWidth: "1.5"
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M20.1373 12.6133C19.942 15.1992 17.8037 17.2074 15.2107 17.2402L14.7621 17.2459",
@@ -179,7 +66,7 @@ const F = c.div`
       )
     ]
   }
-)), U = c(y)`
+)), T = c(v)`
   width: 24px;
   height: 24px;
   padding: 2px;
@@ -201,16 +88,16 @@ const F = c.div`
   &.selected {
     display: flex !important;
   }
-`, Co = ({ selected: o, style: t, ...r }) => /* @__PURE__ */ s(
-  U,
+`, xt = ({ selected: t, style: o, ...n }) => /* @__PURE__ */ i(
+  T,
   {
-    ...r,
-    selected: o,
-    className: g(r.className, "action", { selected: o }),
+    ...n,
+    selected: t,
+    className: h(n.className, "action", { selected: t }),
     variant: "text",
-    style: { ...t }
+    style: { ...o }
   }
-), V = c(y)`
+), H = c(v)`
   background-color: unset !important;
   z-index: 110;
   position: relative;
@@ -227,52 +114,52 @@ const F = c.div`
     background-color: var(--md-sys-color-surface-container-hover) !important;
   }
 
-  ${({ $isOpen: o }) => o && `
+  ${({ $isOpen: t }) => t && `
     background-color: var(--md-sys-color-surface-container-hover) !important;
   `}
-`, wo = ({ menuItems: o, menuId: t, className: r }) => {
-  const { toggleMenuOpen: n, menuOpen: l } = R(), a = S(null), u = l === t;
-  return o.length === 0 ? null : /* @__PURE__ */ m(x, { children: [
-    /* @__PURE__ */ s(
-      V,
+`, Ct = ({ menuItems: t, menuId: o, className: n }) => {
+  const { toggleMenuOpen: r, menuOpen: d } = O(), a = _(null), p = d === o;
+  return t.length === 0 ? null : /* @__PURE__ */ g(y, { children: [
+    /* @__PURE__ */ i(
+      H,
       {
         ref: a,
-        className: r,
-        onClick: (i) => {
-          i.stopPropagation(), n(t);
+        className: n,
+        onClick: (s) => {
+          s.stopPropagation(), r(o);
         },
-        onPointerDown: (i) => i.stopPropagation(),
+        onPointerDown: (s) => s.stopPropagation(),
         icon: "more_horiz",
-        $isOpen: u
+        $isOpen: p
       }
     ),
-    /* @__PURE__ */ s(
-      z,
+    /* @__PURE__ */ i(
+      P,
       {
         target: a.current,
-        id: t,
+        id: o,
         align: "left",
-        onClose: (i) => {
-          i.stopPropagation(), n(!1);
+        onClose: (s) => {
+          s.stopPropagation(), r(!1);
         },
-        children: /* @__PURE__ */ s(D, { menu: o, onClose: () => n(!1) })
+        children: /* @__PURE__ */ i(z, { menu: t, onClose: () => r(!1) })
       }
     )
   ] });
-}, W = c.tfoot`
+}, U = c.tfoot`
   display: grid !important;
   position: sticky;
   bottom: 0;
   z-index: 10;
   background-color: var(--md-sys-color-surface-container-lowest);
-`, $ = c.tr`
+`, W = c.tr`
   display: flex;
   background-color: var(--md-sys-color-surface-container-low);
 
   &.clickable {
     cursor: pointer;
   }
-`, j = c.td`
+`, $ = c.td`
   position: relative;
   box-shadow: inset 1px 1px 0 0 var(--md-sys-color-surface-container);
   background-color: var(--md-sys-color-surface-container-lowest);
@@ -296,7 +183,7 @@ const F = c.div`
     width: 24px !important;
     min-width: unset;
   }
-`, q = c.div`
+`, V = c.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -315,7 +202,7 @@ const F = c.div`
     font-weight: 600;
     color: var(--md-sys-color-on-surface);
   }
-`, L = c.div`
+`, b = c.div`
   width: calc(100% - 1px);
   height: calc(100% - 3px);
   margin-left: 1px;
@@ -324,135 +211,134 @@ const F = c.div`
     width: calc(100% - 3px);
     margin-left: 1px;
   }
-`, G = c(L)`
+`, j = c(b)`
   position: absolute;
   inset: 1px 0 2px 1px;
   width: auto;
   height: auto;
   margin: 0;
   pointer-events: none;
-`, ko = ({
-  columnVirtualizer: o,
-  table: t,
-  virtualPaddingLeft: r,
-  virtualPaddingRight: n,
-  renderCellContent: l,
+`, vt = ({
+  columnVirtualizer: t,
+  table: o,
+  virtualPaddingLeft: n,
+  virtualPaddingRight: r,
+  renderCellContent: d,
   onClick: a,
-  isLoading: u,
-  statsLoading: i,
-  error: d
+  isLoading: p,
+  statsLoading: s,
+  error: l
 }) => {
-  const f = [
-    ...t.getLeftVisibleLeafColumns(),
-    ...t.getCenterVisibleLeafColumns(),
-    ...t.getRightVisibleLeafColumns()
-  ], h = o.getVirtualItems(), v = d instanceof Error ? d.message : typeof d == "string" ? d : "";
-  return /* @__PURE__ */ s(W, { children: /* @__PURE__ */ m(
-    $,
+  const u = [
+    ...o.getLeftVisibleLeafColumns(),
+    ...o.getCenterVisibleLeafColumns(),
+    ...o.getRightVisibleLeafColumns()
+  ], f = t.getVirtualItems(), x = l instanceof Error ? l.message : typeof l == "string" ? l : "";
+  return /* @__PURE__ */ i(U, { children: /* @__PURE__ */ g(
+    W,
     {
-      className: g({ clickable: !!a }),
+      className: h({ clickable: !!a }),
       onClick: a,
       "data-tooltip": a ? "Power feature" : void 0,
       children: [
-        r ? /* @__PURE__ */ s("td", { style: { display: "flex", width: r } }) : null,
-        h.map((p) => {
-          const e = f[p.index];
+        n ? /* @__PURE__ */ i("td", { style: { display: "flex", width: n } }) : null,
+        f.map((m) => {
+          const e = u[m.index];
           if (!e) return null;
-          const I = e.id === k || e.id === b, _ = e.getIsPinned() === "left" && e.getIsLastColumn("left");
-          return /* @__PURE__ */ s(
-            j,
+          const k = e.id === w || e.id === C, L = e.getIsPinned() === "left" && e.getIsLastColumn("left");
+          return /* @__PURE__ */ i(
+            $,
             {
-              className: g(e.id, { "last-pinned-left": _ }),
-              style: { ...T(e), width: H(e.id) },
-              children: u ? /* @__PURE__ */ s(
-                L,
+              className: h(e.id, { "last-pinned-left": L }),
+              style: { ...F(e), width: B(e.id) },
+              children: p ? /* @__PURE__ */ i(
+                b,
                 {
-                  className: g("loading", "shimmer-dark", {
-                    selection: e.id === b
+                  className: h("loading", "shimmer-dark", {
+                    selection: e.id === C
                   })
                 }
-              ) : d ? e.id === "name" ? /* @__PURE__ */ m(q, { style: { color: "var(--md-sys-color-error)" }, children: [
+              ) : l ? e.id === "name" ? /* @__PURE__ */ g(V, { style: { color: "var(--md-sys-color-error)" }, children: [
                 "Error loading stats",
-                /* @__PURE__ */ s(
-                  w,
+                /* @__PURE__ */ i(
+                  D,
                   {
                     icon: "info",
                     style: { fontSize: 16, cursor: "help" },
-                    "data-tooltip": v,
+                    "data-tooltip": x,
                     "data-tooltip-as": "markdown"
                   }
                 ),
-                /* @__PURE__ */ s(
-                  y,
+                /* @__PURE__ */ i(
+                  v,
                   {
                     icon: "content_copy",
                     "data-tooltip": "Copy error message",
-                    onClick: () => O(v),
+                    onClick: () => A(x),
                     iconProps: { style: { fontSize: 16 } },
                     style: { padding: 2 },
                     variant: "text"
                   }
                 )
-              ] }) : null : !I && /* @__PURE__ */ m(x, { children: [
-                l?.(e.id),
-                i && /* @__PURE__ */ s(G, { className: g("loading", "shimmer-dark") })
+              ] }) : null : !k && /* @__PURE__ */ g(y, { children: [
+                d?.(e.id),
+                s && /* @__PURE__ */ i(j, { className: h("loading", "shimmer-dark") })
               ] })
             },
             e.id
           );
         }),
-        n ? /* @__PURE__ */ s("td", { style: { display: "flex", width: n } }) : null
+        r ? /* @__PURE__ */ i("td", { style: { display: "flex", width: r } }) : null
       ]
     }
   ) });
-}, Z = "th[data-column-id]", J = c.div`
+}, q = "th[data-column-id]", G = c.div`
   position: fixed;
   z-index: 2000;
   pointer-events: none;
   width: 2px;
   background-color: var(--md-sys-color-primary);
-`, K = (o, t) => {
-  const r = o.getBoundingClientRect(), n = o.closest("table")?.getBoundingClientRect() ?? r;
+`, Z = (t, o) => {
+  const n = t.getBoundingClientRect(), r = t.closest("table")?.getBoundingClientRect() ?? n;
   return {
-    left: t === "left" ? r.left - 1 : r.right - 1,
-    top: n.top,
-    height: n.height
+    left: o === "left" ? n.left - 1 : n.right - 1,
+    top: r.top,
+    height: r.height
   };
-}, Lo = () => {
-  const { active: o, over: t } = E(), r = o?.data?.current?.type === "column" ? String(o.id) : null, n = t ? String(t.id) : null, [l, a] = N(null);
-  return P(() => {
-    if (!r || !n || r === n) {
+}, yt = () => {
+  const { active: t, over: o } = N(), n = t?.data?.current?.type === "column" ? String(t.id) : null, r = o ? String(o.id) : null, [d, a] = M(null);
+  return R(() => {
+    if (!n || !r || n === r) {
       a(null);
       return;
     }
-    let u = 0;
-    const i = () => {
-      const d = Array.from(
-        document.querySelectorAll(Z)
-      ), f = d.find((h) => h.dataset.columnId === n);
-      if (f) {
-        const h = d.findIndex((e) => e.dataset.columnId === r), v = d.indexOf(f), p = K(f, h < v ? "right" : "left");
+    let p = 0;
+    const s = () => {
+      const l = Array.from(
+        document.querySelectorAll(q)
+      ), u = l.find((f) => f.dataset.columnId === r);
+      if (u) {
+        const f = l.findIndex((e) => e.dataset.columnId === n), x = l.indexOf(u), m = Z(u, f < x ? "right" : "left");
         a(
-          (e) => e && e.left === p.left && e.top === p.top && e.height === p.height ? e : p
+          (e) => e && e.left === m.left && e.top === m.top && e.height === m.height ? e : m
         );
       }
-      u = requestAnimationFrame(i);
+      p = requestAnimationFrame(s);
     };
-    return i(), () => cancelAnimationFrame(u);
-  }, [r, n]), l ? A(/* @__PURE__ */ s(J, { style: l }), document.body) : null;
+    return s(), () => cancelAnimationFrame(p);
+  }, [n, r]), d ? E(/* @__PURE__ */ i(G, { style: d }), document.body) : null;
 };
 export {
-  wo as C,
-  bo as F,
-  Co as H,
-  yo as I,
-  xo as S,
-  ko as T,
-  V as a,
-  T as b,
-  Lo as c,
-  J as d,
-  Z as e,
-  K as f,
-  H as g
+  Ct as C,
+  ht as F,
+  xt as H,
+  gt as S,
+  vt as T,
+  H as a,
+  F as b,
+  yt as c,
+  G as d,
+  q as e,
+  Z as f,
+  B as g
 };