@ynput/ayon-frontend-shared 0.3.56 → 0.4.1

package/dist/shared/src/components/ProjectTableSettings/ColumnsSettings.es.js

@@ -1,17 +1,18 @@
-import { j as p } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as C, useRef as xi, useEffect as hi, useMemo as D } from "react";
+import { j as o } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as P, useRef as xi, useEffect as hi, useMemo as w } from "react";
 import K from "styled-components";
 import { Menu as $ } from "./TableSettings.styled.es.js";
 import { useColumnSettingsContext as Ci } from "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
-import bi from "./ColumnItem.es.js";
+import Si from "./ColumnItem.es.js";
 import B from "./SortableColumnItem.es.js";
-import { useSensors as Pi, useSensor as Si, PointerSensor as ji, DndContext as Oi, closestCenter as Di, DragOverlay as Hi } from "@dnd-kit/core";
+import { useSensors as Pi, useSensor as bi, PointerSensor as ji, DndContext as Oi, closestCenter as Di, DragOverlay as Hi } from "@dnd-kit/core";
 import { SortableContext as pi, verticalListSortingStrategy as mi, arrayMove as wi } from "@dnd-kit/sortable";
 import { toast as Ii } from "react-toastify";
-import "@ynput/ayon-react-components";
+import { InputSwitch as Ti } from "@ynput/ayon-react-components";
 import "../SearchFilter/filterDates.es.js";
 import "date-fns";
 import "short-uuid";
+import "../../containers/ProjectTreeTable/utils/columnIds.es.js";
 import "lodash";
 import "uuid";
 import "../../api/base/client.es.js";
@@ -198,28 +199,13 @@ import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
 import "../../containers/Feed/components/FeedSearchFilter.es.js";
 import "@tanstack/react-virtual";
 import "@tanstack/react-table";
-import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EnumCellValue.es.js";
-import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/MarkdownWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/LinksWidget.es.js";
-import "../LinksManager/LinksManager.styled.es.js";
-import "../../containers/ProjectTreeTable/context/ProjectTableContextInstance.es.js";
-import "../../containers/ProjectTreeTable/widgets/EmptyWidget.es.js";
-import "../../containers/ProjectTreeTable/widgets/ErrorWidget.es.js";
+import "../../containers/ProjectTreeTable/buildTreeTableColumns.es.js";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
-import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
-import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
-import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
 import "../../containers/ProjectTreeTable/components/HeaderActionButton.es.js";
+import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
+import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableContextInstance.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectDataContextInstance.es.js";
@@ -235,6 +221,22 @@ import "../../containers/NewEntity/components/NewEntityForm.es.js";
 import "../../containers/ProjectTreeTable/components/TableFooterRow.es.js";
 import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
 import "../../containers/ProjectTreeTable/context/DetailsPanelEntityContext.es.js";
+import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumCellValue.es.js";
+import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/MarkdownWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/LinksWidget.es.js";
+import "../LinksManager/LinksManager.styled.es.js";
+import "../../containers/ProjectTreeTable/widgets/EmptyWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ErrorWidget.es.js";
 import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../containers/DetailsPanel/components/DetailsPanelTabs/DetailsPanelTabs.styled.es.js";
 import "../../containers/DetailsPanel/components/DetailsPanelHeader/LinkedTaskRow.styled.es.js";
@@ -288,7 +290,7 @@ import "../ReviewableCard/ReviewableCard.es.js";
 import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
 import "../SearchFilter/CustomDateRangeDialog.es.js";
 import "../SettingsPanel/SettingsPanel.es.js";
-import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import { SettingsPanelItemTemplate as Vi } from "../SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../ShareOptionIcon/ShareOptionIcon.es.js";
 import "../SimpleFormDialog/SimpleFormDialog.es.js";
 import "../StyledLink/StyledLink.es.js";
@@ -305,155 +307,180 @@ import "../Menu/MenuItem.es.js";
 import "../ReviewablesSelector/ReviewablesSelector.es.js";
 import "../ColumnHeaderMenuUI.es.js";
 import { checkColumnVisibility as g } from "../../containers/ProjectTreeTable/utils/checkColumnVisibility.es.js";
-const Ti = ({
-  columns: b,
-  highlighted: f,
+const Sm = ({
+  icon: u,
+  label: a,
+  checked: m,
+  onChange: x,
+  disabled: n,
+  ...b
+}) => /* @__PURE__ */ o.jsx(
+  Vi,
+  {
+    item: { value: a, label: a, icon: u },
+    isDisabled: n,
+    style: { paddingRight: 8 },
+    disableHover: !0,
+    endContent: /* @__PURE__ */ o.jsx(
+      Ti,
+      {
+        checked: m,
+        disabled: n,
+        onChange: (l) => x(l.currentTarget.checked)
+      }
+    ),
+    ...b
+  }
+), Ai = ({
+  columns: u,
+  highlighted: a,
   columnVisibility: m,
-  updateColumnVisibility: H,
-  columnPinning: s,
-  updateColumnPinning: A,
-  columnOrder: d,
-  setColumnsConfig: P,
-  columnSizing: E,
-  groupBy: u,
-  sorting: L,
-  rowHeight: k,
-  defaultColumnVisibility: c
+  updateColumnVisibility: x,
+  columnPinning: n,
+  updateColumnPinning: b,
+  columnOrder: l,
+  setColumnsConfig: j,
+  columnSizing: k,
+  groupBy: h,
+  sorting: y,
+  rowHeight: E,
+  defaultColumnVisibility: f,
+  ...yi
 }) => {
-  const [Q, U] = C(null), [ni, X] = C(!1), [si, Y] = C(!1), [Z, _] = C(!1), [li, y] = C(!1), [ai, M] = C(!1), di = Pi(
-    Si(ji, {
+  const [Q, U] = P(null), [ni, X] = P(!1), [si, Y] = P(!1), [Z, _] = P(!1), [li, L] = P(!1), [ai, R] = P(!1), di = Pi(
+    bi(ji, {
       activationConstraint: {
         distance: 5
       }
     })
-  ), N = xi(null);
+  ), M = xi(null);
   hi(() => {
-    if (N.current && f) {
-      const i = N.current.querySelector(`#column-settings-${f}`);
+    if (M.current && a) {
+      const i = M.current.querySelector(`#column-settings-${a}`);
       i && i.scrollIntoView({
         behavior: "smooth",
         block: "center"
       });
     }
-  }, [f]);
-  const { visibleColumns: S, hiddenColumns: j, pinnedColumns: x } = D(() => {
-    const i = b.filter(
-      (r) => g(m, r.value, c)
-    ), t = b.filter(
-      (r) => !g(m, r.value, c)
-    ), o = i.filter((r) => s.left?.includes(r.value));
+  }, [a]);
+  const { visibleColumns: O, hiddenColumns: D, pinnedColumns: C } = w(() => {
+    const i = u.filter(
+      (e) => g(m, e.value, f)
+    ), t = u.filter(
+      (e) => !g(m, e.value, f)
+    ), r = i.filter((e) => n.left?.includes(e.value));
     return {
-      visibleColumns: i.filter((r) => !s.left?.includes(r.value)),
+      visibleColumns: i.filter((e) => !n.left?.includes(e.value)),
       hiddenColumns: t,
-      pinnedColumns: o
+      pinnedColumns: r
     };
-  }, [b, m, s, c]), w = D(() => {
-    const i = [...S];
-    return d.length > 0 && i.sort((t, o) => {
-      const l = d.indexOf(t.value), r = d.indexOf(o.value);
-      return l === -1 ? 1 : r === -1 ? -1 : l - r;
+  }, [u, m, n, f]), I = w(() => {
+    const i = [...O];
+    return l.length > 0 && i.sort((t, r) => {
+      const d = l.indexOf(t.value), e = l.indexOf(r.value);
+      return d === -1 ? 1 : e === -1 ? -1 : d - e;
     }), i;
-  }, [S, d]), I = D(() => {
-    const i = [...x];
-    return d.length > 0 && i.sort((t, o) => {
-      const l = d.indexOf(t.value), r = d.indexOf(o.value);
-      return l === -1 ? 1 : r === -1 ? -1 : l - r;
+  }, [O, l]), T = w(() => {
+    const i = [...C];
+    return l.length > 0 && i.sort((t, r) => {
+      const d = l.indexOf(t.value), e = l.indexOf(r.value);
+      return d === -1 ? 1 : e === -1 ? -1 : d - e;
     }), i;
-  }, [x, d]), ii = D(
-    () => w.map((i) => i.value),
-    [w]
-  ), ti = D(
+  }, [C, l]), ii = w(
     () => I.map((i) => i.value),
     [I]
-  ), R = (i) => {
-    const t = g(m, i, c), o = { ...m, [i]: !t };
-    console.log("Toggling visibility for", i, "to", !t), H(o);
+  ), ti = w(
+    () => T.map((i) => i.value),
+    [T]
+  ), N = (i) => {
+    const t = g(m, i, f), r = { ...m, [i]: !t };
+    console.log("Toggling visibility for", i, "to", !t), x(r);
   }, z = (i) => {
-    const t = { ...s }, o = { ...m };
-    t.left?.includes(i) ? t.left = t.left.filter((l) => l !== i) : (t.left = [...t.left || [], i], g(m, i, c) || (o[i] = !0, H(o))), A(t);
+    const t = { ...n }, r = { ...m };
+    t.left?.includes(i) ? t.left = t.left.filter((d) => d !== i) : (t.left = [...t.left || [], i], g(m, i, f) || (r[i] = !0, x(r))), b(t);
   }, ci = (i) => {
     const t = i.active.id;
-    U(t), _(s.left?.includes(t) || !1);
+    U(t), _(n.left?.includes(t) || !1);
   }, fi = (i) => {
-    const { active: t, over: o } = i;
-    if (o && t.id !== o.id) {
-      const l = g(
+    const { active: t, over: r } = i;
+    if (r && t.id !== r.id) {
+      const d = g(
         m,
         t.id,
-        c
-      ), r = g(
+        f
+      ), e = g(
         m,
-        o.id,
-        c
-      ), e = s.left?.includes(o.id) || !1, h = !r;
-      X(!l && r && !e), Y(r && e), M(h), y(r && !e);
+        r.id,
+        f
+      ), p = n.left?.includes(r.id) || !1, S = !e;
+      X(!d && e && !p), Y(e && p), R(S), L(e && !p);
     } else
-      y(!1), M(!1);
+      L(!1), R(!1);
   }, vi = (i) => {
-    X(!1), Y(!1), _(!1), y(!1), M(!1);
-    const { active: t, over: o } = i;
-    if (o && t.id !== o.id) {
-      const l = [...S, ...j, ...x].find(
-        (e) => e.value === t.id
-      ), r = [...S, ...j, ...x].find(
-        (e) => e.value === o.id
+    X(!1), Y(!1), _(!1), L(!1), R(!1);
+    const { active: t, over: r } = i;
+    if (r && t.id !== r.id) {
+      const d = [...O, ...D, ...C].find(
+        (p) => p.value === t.id
+      ), e = [...O, ...D, ...C].find(
+        (p) => p.value === r.id
       );
-      if (l && r) {
-        const e = t.id, h = o.id, F = g(
+      if (d && e) {
+        const p = t.id, S = r.id, F = g(
           m,
-          e,
-          c
+          p,
+          f
         ), q = g(
           m,
-          h,
-          c
-        ), T = s.left?.includes(e) || !1, V = s.left?.includes(h) || !1, gi = !q, n = {
+          S,
+          f
+        ), V = n.left?.includes(p) || !1, A = n.left?.includes(S) || !1, gi = !q, s = {
           columnVisibility: { ...m },
-          columnOrder: [...d],
-          columnPinning: { ...s },
-          columnSizing: { ...E },
-          groupBy: u,
-          sorting: L,
-          rowHeight: k
+          columnOrder: [...l],
+          columnPinning: { ...n },
+          columnSizing: { ...k },
+          groupBy: h,
+          sorting: y,
+          rowHeight: E
         };
         if (F && q) {
-          let a = [...n.columnPinning.left || []];
-          T !== V && (T && !V ? a = a.filter((W) => W !== e) : !T && V && (a = [...a, e]));
-          const v = [...ti, ...ii], oi = v.indexOf(e), ri = v.indexOf(h);
+          let c = [...s.columnPinning.left || []];
+          V !== A && (V && !A ? c = c.filter((W) => W !== p) : !V && A && (c = [...c, p]));
+          const v = [...ti, ...ii], oi = v.indexOf(p), ri = v.indexOf(S);
           if (oi === -1 || ri === -1) {
             console.error("Invalid column order state"), Ii.error("Invalid column order state");
             return;
           }
-          const ei = wi(v, oi, ri), ui = ei.filter((W) => a.includes(W));
-          n.columnOrder = ei, n.columnPinning = {
-            ...n.columnPinning,
+          const ei = wi(v, oi, ri), ui = ei.filter((W) => c.includes(W));
+          s.columnOrder = ei, s.columnPinning = {
+            ...s.columnPinning,
             left: ui
-          }, P(n);
+          }, j(s);
         } else if (!F && q) {
-          if (n.columnVisibility[e] = !0, V) {
-            const v = [...n.columnPinning.left || [], e];
-            n.columnPinning.left = v;
+          if (s.columnVisibility[p] = !0, A) {
+            const v = [...s.columnPinning.left || [], p];
+            s.columnPinning.left = v;
           }
-          const a = [...ti, ...ii];
-          if (!a.includes(e)) {
-            const v = a.indexOf(h);
-            a.splice(v, 0, e);
+          const c = [...ti, ...ii];
+          if (!c.includes(p)) {
+            const v = c.indexOf(S);
+            c.splice(v, 0, p);
           }
-          n.columnOrder = a, P(n);
+          s.columnOrder = c, j(s);
         } else if (F && gi) {
-          if (n.columnVisibility[e] = !1, T) {
-            const a = (n.columnPinning.left || []).filter(
-              (v) => v !== e
+          if (s.columnVisibility[p] = !1, V) {
+            const c = (s.columnPinning.left || []).filter(
+              (v) => v !== p
             );
-            n.columnPinning.left = a;
+            s.columnPinning.left = c;
           }
-          P(n);
+          j(s);
         }
       }
     }
     U(null);
-  }, O = Q ? [...S, ...j, ...x].find((i) => i.value === Q) : null;
-  return /* @__PURE__ */ p.jsx(
+  }, H = Q ? [...O, ...D, ...C].find((i) => i.value === Q) : null;
+  return /* @__PURE__ */ o.jsx(
     Oi,
     {
       sensors: di,
@@ -461,53 +488,53 @@ const Ti = ({
       onDragStart: ci,
       onDragOver: fi,
       onDragEnd: vi,
-      children: /* @__PURE__ */ p.jsxs(Vi, { children: [
-        x.length > 0 && /* @__PURE__ */ p.jsxs(G, { className: si && !Z ? "drop-target" : "", children: [
-          /* @__PURE__ */ p.jsx(J, { children: "Pinned Columns" }),
-          /* @__PURE__ */ p.jsx(
+      children: /* @__PURE__ */ o.jsxs(ki, { children: [
+        C.length > 0 && /* @__PURE__ */ o.jsxs(G, { className: si && !Z ? "drop-target" : "", children: [
+          /* @__PURE__ */ o.jsx(J, { children: "Pinned Columns" }),
+          /* @__PURE__ */ o.jsx(
             pi,
             {
-              items: I.map((i) => i.value),
+              items: T.map((i) => i.value),
               strategy: mi,
-              children: /* @__PURE__ */ p.jsx($, { children: I.map((i) => /* @__PURE__ */ p.jsx(
+              children: /* @__PURE__ */ o.jsx($, { children: T.map((i) => /* @__PURE__ */ o.jsx(
                 B,
                 {
                   id: i.value,
                   column: i,
                   isPinned: !0,
                   isHidden: !1,
-                  isDisabled: !!u && i.value === "name",
-                  isHighlighted: f === i.value,
+                  isDisabled: !!h && i.value === "name",
+                  isHighlighted: a === i.value,
                   onTogglePinning: z,
-                  onToggleVisibility: R
+                  onToggleVisibility: N
                 },
                 i.value
               )) })
             }
           )
         ] }),
-        /* @__PURE__ */ p.jsxs(
+        /* @__PURE__ */ o.jsxs(
           G,
           {
             className: ni || Z && li ? "drop-target" : "",
             children: [
-              /* @__PURE__ */ p.jsx(J, { children: "Visible Columns" }),
-              /* @__PURE__ */ p.jsx(
+              /* @__PURE__ */ o.jsx(J, { children: "Visible Columns" }),
+              /* @__PURE__ */ o.jsx(
                 pi,
                 {
-                  items: w.map((i) => i.value),
+                  items: I.map((i) => i.value),
                   strategy: mi,
-                  children: /* @__PURE__ */ p.jsx($, { children: w.map((i) => /* @__PURE__ */ p.jsx(
+                  children: /* @__PURE__ */ o.jsx($, { children: I.map((i) => /* @__PURE__ */ o.jsx(
                     B,
                     {
                       id: i.value,
                       column: i,
                       isPinned: !1,
                       isHidden: !1,
-                      isHighlighted: f === i.value,
-                      isDisabled: !!u && i.value === "name",
+                      isHighlighted: a === i.value,
+                      isDisabled: !!h && i.value === "name",
                       onTogglePinning: z,
-                      onToggleVisibility: R
+                      onToggleVisibility: N
                     },
                     i.value
                   )) })
@@ -516,41 +543,41 @@ const Ti = ({
             ]
           }
         ),
-        j.length > 0 && /* @__PURE__ */ p.jsxs(G, { className: ai ? "drop-target" : "", children: [
-          /* @__PURE__ */ p.jsx(J, { children: "Hidden Columns" }),
-          /* @__PURE__ */ p.jsx($, { ref: N, children: j.map((i) => /* @__PURE__ */ p.jsx(
+        D.length > 0 && /* @__PURE__ */ o.jsxs(G, { className: ai ? "drop-target" : "", children: [
+          /* @__PURE__ */ o.jsx(J, { children: "Hidden Columns" }),
+          /* @__PURE__ */ o.jsx($, { ref: M, children: D.map((i) => /* @__PURE__ */ o.jsx(
             B,
             {
               id: i.value,
               column: i,
-              isPinned: s.left?.includes(i.value) || !1,
+              isPinned: n.left?.includes(i.value) || !1,
               isHidden: !0,
-              isHighlighted: f === i.value,
-              isDisabled: !!u && i.value === "name",
+              isHighlighted: a === i.value,
+              isDisabled: !!h && i.value === "name",
               onTogglePinning: z,
-              onToggleVisibility: R
+              onToggleVisibility: N
             },
             i.value
           )) })
         ] }),
-        /* @__PURE__ */ p.jsx(Hi, { children: O && /* @__PURE__ */ p.jsx(
-          bi,
+        /* @__PURE__ */ o.jsx(Hi, { children: H && /* @__PURE__ */ o.jsx(
+          Si,
           {
-            column: O,
-            isPinned: s.left?.includes(O.value) || !1,
+            column: H,
+            isPinned: n.left?.includes(H.value) || !1,
             isHidden: !g(
               m,
-              O.value,
-              c
+              H.value,
+              f
             ),
-            isHighlighted: f === O.value,
+            isHighlighted: a === H.value,
             dragOverlay: !0
           }
         ) })
       ] })
     }
   );
-}, Vi = K.div`
+}, ki = K.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-large);
@@ -570,40 +597,41 @@ const Ti = ({
   font-weight: 500;
   color: var(--md-sys-color-outline);
   padding: 4px 0;
-`, gm = (b) => {
+`, Pm = (u) => {
   const {
-    columnVisibility: f,
+    columnVisibility: a,
     defaultColumnVisibility: m,
-    updateColumnVisibility: H,
-    columnPinning: s,
-    updateColumnPinning: A,
-    columnOrder: d,
-    setColumnsConfig: P,
-    columnSizing: E,
-    groupBy: u,
-    sorting: L,
-    rowHeight: k
+    updateColumnVisibility: x,
+    columnPinning: n,
+    updateColumnPinning: b,
+    columnOrder: l,
+    setColumnsConfig: j,
+    columnSizing: k,
+    groupBy: h,
+    sorting: y,
+    rowHeight: E
   } = Ci();
-  return /* @__PURE__ */ p.jsx(
-    Ti,
+  return /* @__PURE__ */ o.jsx(
+    Ai,
     {
-      ...b,
-      columnVisibility: f,
+      ...u,
+      columnVisibility: a,
       defaultColumnVisibility: m,
-      updateColumnVisibility: H,
-      columnPinning: s,
-      updateColumnPinning: A,
-      columnOrder: d,
-      setColumnsConfig: P,
-      columnSizing: E,
-      groupBy: u,
-      sorting: L,
-      rowHeight: k
+      updateColumnVisibility: x,
+      columnPinning: n,
+      updateColumnPinning: b,
+      columnOrder: l,
+      setColumnsConfig: j,
+      columnSizing: k,
+      groupBy: h,
+      sorting: y,
+      rowHeight: E
     }
   );
 };
 export {
-  Ti as ColumnsSettings,
-  gm as ColumnsSettingsWithContext
+  Ai as ColumnsSettings,
+  Pm as ColumnsSettingsWithContext,
+  Sm as SettingSwitch
 };
 //# sourceMappingURL=ColumnsSettings.es.js.map