@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

package/dist/shared/src/components/SearchFilter/useDateRangeFilter.es.js

@@ -1,108 +1,101 @@
-import { useState as b, useRef as v } from "react";
-import { CUSTOM_RANGE_ICON as R, detectRelativeDatePattern as F, CUSTOM_RANGE_ID as I } from "./filterDates.es.js";
-import { startOfDay as w, parse as g, endOfDay as E, format as d } from "date-fns";
-const H = () => {
-  const [c, p] = b(null), [M, u] = b(""), [S, m] = b(""), h = v(null), C = (s, l) => {
-    const n = l.find((r) => r.id === s);
-    if (n?.type === "datetime" && n.values?.length) {
-      const r = n.values[0];
-      if (r.id?.startsWith("custom-")) {
-        const i = r.id.replace("custom-", ""), t = i.indexOf("Z");
-        if (t > 0) {
-          const e = i.substring(0, t + 1), a = i.substring(t + 2);
-          if (e && a) {
-            u(
-              d(g(e, "yyyy-MM-dd'T'HH:mm:ss.SSSx", /* @__PURE__ */ new Date()), "yyyy-MM-dd")
-            ), m(
-              d(g(a, "yyyy-MM-dd'T'HH:mm:ss.SSSx", /* @__PURE__ */ new Date()), "yyyy-MM-dd")
-            ), p(s);
+import { useState as C } from "react";
+import { CUSTOM_RANGE_ICON as F, detectRelativeDatePattern as b, CUSTOM_RANGE_ID as D } from "./filterDates.es.js";
+import { startOfDay as v, parse as m, endOfDay as R, format as l } from "date-fns";
+const V = () => {
+  const [d, y] = C(null), [f, c] = C(""), [g, u] = C(""), p = (i, o) => {
+    const e = o.find((n) => n.id === i);
+    if (e?.type === "datetime" && e.values?.length) {
+      const n = e.values[0];
+      if (n.id?.startsWith("custom-")) {
+        const t = n.id.replace("custom-", ""), r = t.indexOf("Z");
+        if (r > 0) {
+          const s = t.substring(0, r + 1), a = t.substring(r + 2);
+          if (s && a) {
+            c(
+              l(m(s, "yyyy-MM-dd'T'HH:mm:ss.SSSx", /* @__PURE__ */ new Date()), "yyyy-MM-dd")
+            ), u(
+              l(m(a, "yyyy-MM-dd'T'HH:mm:ss.SSSx", /* @__PURE__ */ new Date()), "yyyy-MM-dd")
+            ), y(i);
             return;
           }
         }
       }
     }
-    p(s), u(""), m("");
-  }, O = (s, l) => {
-    if (h.current) return h.current;
-    const n = s.filter((i) => i.type === "datetime"), r = n.find((i) => !i.values?.length);
-    return r ? r.id : n.length ? n[n.length - 1].id : l.find((i) => i.type === "datetime")?.id ?? null;
+    y(i), c(""), u("");
+  }, I = (i, o) => {
+    const e = i.filter((t) => t.type === "datetime"), n = e.find((t) => !t.values?.length);
+    return n ? n.id : e.length ? e[e.length - 1].id : o.find((t) => t.type === "datetime")?.id ?? null;
   };
   return {
-    customRangeFilterId: c,
-    customStartDate: M,
-    customEndDate: S,
-    setCustomStartDate: u,
-    setCustomEndDate: m,
-    openCustomRangeForFilter: C,
-    wrapFilterChange: (s, l, n) => {
-      const r = s.find(
-        (t) => t.type === "datetime" && !l.some((e) => e.id === t.id)
-      );
-      r && (h.current = r.id);
-      const i = s.map((t) => t.type === "datetime" && t.values?.some((e) => e.id === I) ? { ...t, values: t.values.filter((e) => e.id !== I) } : t);
-      n(i);
+    customRangeFilterId: d,
+    customStartDate: f,
+    customEndDate: g,
+    setCustomStartDate: c,
+    setCustomEndDate: u,
+    openCustomRangeForFilter: p,
+    wrapFilterChange: (i, o, e) => {
+      const n = i.map((t) => t.type === "datetime" && t.values?.some((r) => r.id === D) ? { ...t, values: t.values.filter((r) => r.id !== D) } : t);
+      e(n);
     },
-    handleSearchBarClickCapture: (s, l) => {
-      const n = s.target;
-      if (n.closest(".remove") || n.closest(".button")) return;
-      const r = n.closest(".search-filter-item");
-      if (!r) return;
-      const t = r.querySelector(".label")?.textContent?.replace(/:$/, "").trim();
-      if (!t) return;
-      const e = l.find(
-        (o) => o.type === "datetime" && o.label === t && o.values?.length
+    handleSearchBarClickCapture: (i, o) => {
+      const e = i.target;
+      if (e.closest(".remove") || e.closest(".button")) return;
+      const n = e.closest(".search-filter-item");
+      if (!n) return;
+      const t = o.find(
+        (s) => s.id === n.id && s.type === "datetime" && s.values?.length
       );
-      if (!e) return;
-      const a = e.values?.[0];
-      if (!(a?.id === "noValue" || a?.id === "hasValue")) {
-        if (a?.id) {
-          const o = a.id.replace("custom-", ""), y = o.indexOf("Z");
-          if (y > 0) {
-            const D = o.substring(0, y + 1), f = o.substring(y + 2);
-            if (F(D, f)) return;
+      if (!t) return;
+      const r = t.values?.[0];
+      if (!(r?.id === "noValue" || r?.id === "hasValue")) {
+        if (r?.id) {
+          const s = r.id.replace("custom-", ""), a = s.indexOf("Z");
+          if (a > 0) {
+            const M = s.substring(0, a + 1), S = s.substring(a + 2);
+            if (b(M, S)) return;
           }
         }
-        s.stopPropagation(), C(e.id, l);
+        i.stopPropagation(), p(t.id, o);
       }
     },
-    handleDropdownItemClick: (s, l, n) => {
-      const r = s.target.closest("li");
-      if (!r) return !0;
-      if (r.querySelector(`span[icon="${R}"]`)) {
-        const i = O(l, n);
-        return i && C(i, l), !1;
+    handleDropdownItemClick: (i, o, e) => {
+      const n = i.target.closest("li");
+      if (!n) return !0;
+      if (n.querySelector(`span[icon="${F}"]`)) {
+        const t = n.getAttribute("data-parent") || I(o, e);
+        return t && p(t, o), !1;
       }
       return !0;
     },
-    handleCustomRangeApply: (s, l, n, r) => {
-      if (!c || !M || !S) return;
-      const i = c.split("__")[0], t = l.find((f) => f.id === i);
-      if (!t) return;
-      const e = w(g(M, "yyyy-MM-dd", /* @__PURE__ */ new Date())), a = E(g(S, "yyyy-MM-dd", /* @__PURE__ */ new Date()));
-      if (isNaN(e.getTime()) || isNaN(a.getTime()) || a < e) return;
-      const o = a.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "MMM d" : "MMM d, yyyy", y = {
-        id: `custom-${e.toISOString()}-${a.toISOString()}`,
-        label: `${d(e, "MMM d")} – ${d(a, o)}`,
+    handleCustomRangeApply: (i, o, e, n) => {
+      if (!d || !f || !g) return;
+      const t = d.split("__")[0], r = o.find((h) => h.id === t);
+      if (!r) return;
+      const s = v(m(f, "yyyy-MM-dd", /* @__PURE__ */ new Date())), a = R(m(g, "yyyy-MM-dd", /* @__PURE__ */ new Date()));
+      if (isNaN(s.getTime()) || isNaN(a.getTime()) || a < s) return;
+      const M = a.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "MMM d" : "MMM d, yyyy", S = {
+        id: `custom-${s.toISOString()}-${a.toISOString()}`,
+        label: `${l(s, "MMM d")} – ${l(a, M)}`,
         values: [
-          { id: e.toISOString(), label: d(e, "MMM d, yyyy") },
-          { id: a.toISOString(), label: d(a, "MMM d, yyyy") }
+          { id: s.toISOString(), label: l(s, "MMM d, yyyy") },
+          { id: a.toISOString(), label: l(a, "MMM d, yyyy") }
         ]
-      }, D = {
-        id: c,
+      }, O = {
+        id: d,
         type: "datetime",
-        label: t.label,
-        icon: t.icon,
-        values: [y],
+        label: r.label,
+        icon: r.icon,
+        values: [S],
         singleSelect: !0
       };
-      n([...s.filter((f) => f.id !== c), D]), p(null), u(""), m(""), r.current?.close();
+      e([...i.filter((h) => h.id !== d), O]), y(null), c(""), u(""), n.current?.close();
     },
     handleCustomRangeClose: () => {
-      p(null), u(""), m("");
+      y(null), c(""), u("");
     }
   };
 };
 export {
-  H as useDateRangeFilter
+  V as useDateRangeFilter
 };
 //# sourceMappingURL=useDateRangeFilter.es.js.map

package/dist/shared/src/components/SearchFilter/useDateRangeFilter.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateRangeFilter.es.js","sources":["../../../../../src/components/SearchFilter/useDateRangeFilter.ts"],"sourcesContent":["import { useRef, useState } from 'react'\nimport { Filter, SearchFilterRef } from '@ynput/ayon-react-components'\nimport { CUSTOM_RANGE_ID, CUSTOM_RANGE_ICON, detectRelativeDatePattern } from './filterDates'\nimport { startOfDay, endOfDay, format, parse } from 'date-fns'\n\nexport type DateRangeOption = {\n  id: string\n  label: string\n  type?: string\n  icon?: string | null\n}\n\nexport type UseDateRangeFilterReturn = {\n  // Dialog state\n  customRangeFilterId: string | null\n  customStartDate: string\n  customEndDate: string\n  setCustomStartDate: (v: string) => void\n  setCustomEndDate: (v: string) => void\n\n  /** Open the custom date range dialog for a given filter id. */\n  openCustomRangeForFilter: (filterId: string, localFilters: Filter[]) => void\n  /** Wrap around your own onChange: tracks new datetime filters and strips CUSTOM_RANGE_ID placeholders. */\n  wrapFilterChange: (\n    newFilters: Filter[],\n    localFilters: Filter[],\n    next: (cleaned: Filter[]) => void,\n  ) => void\n  /** Pass to pt.searchBar.onClickCapture to intercept datetime chip clicks. */\n  handleSearchBarClickCapture: (e: React.MouseEvent<HTMLDivElement>, localFilters: Filter[]) => void\n  /** Pass to pt.dropdown.pt.item.onClick to intercept \"Custom range…\" list item. */\n  handleDropdownItemClick: (\n    event: React.MouseEvent,\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ) => boolean\n  /** Call when the Dialog's Confirm button is clicked. */\n  handleCustomRangeApply: (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n    onCommit: (updatedFilters: Filter[]) => void,\n    searchFilterRef: React.RefObject<SearchFilterRef>,\n  ) => void\n  /** Call on Dialog close. */\n  handleCustomRangeClose: () => void\n}\n\n/**\n * Encapsulates all custom date-range picker logic shared between SearchFilter wrappers.\n *\n * Usage:\n *   const dateRange = useDateRangeFilter()\n *   // wire dateRange.wrapFilterChange into your onChange\n *   // wire dateRange.handleSearchBarClickCapture / handleDropdownItemClick into pt\n *   // render <CustomDateRangeDialog {...dateRange} options={options} onApply={...} />\n */\nexport const useDateRangeFilter = (): UseDateRangeFilterReturn => {\n  const [customRangeFilterId, setCustomRangeFilterId] = useState<string | null>(null)\n  const [customStartDate, setCustomStartDate] = useState('')\n  const [customEndDate, setCustomEndDate] = useState('')\n\n  // Tracks the most recently activated datetime filter id\n  const activeDatetimeFilterRef = useRef<string | null>(null)\n\n  const openCustomRangeForFilter = (filterId: string, localFilters: Filter[]) => {\n    const filter = localFilters.find((f) => f.id === filterId)\n    if (filter?.type === 'datetime' && filter.values?.length) {\n      const rangeValue = filter.values[0]\n      if (rangeValue.id?.startsWith('custom-')) {\n        const content = (rangeValue.id as string).replace('custom-', '')\n        const firstZ = content.indexOf('Z')\n        if (firstZ > 0) {\n          const startISO = content.substring(0, firstZ + 1)\n          const endISO = content.substring(firstZ + 2)\n          if (startISO && endISO) {\n            setCustomStartDate(\n              format(parse(startISO, \"yyyy-MM-dd'T'HH:mm:ss.SSSx\", new Date()), 'yyyy-MM-dd'),\n            )\n            setCustomEndDate(\n              format(parse(endISO, \"yyyy-MM-dd'T'HH:mm:ss.SSSx\", new Date()), 'yyyy-MM-dd'),\n            )\n            setCustomRangeFilterId(filterId)\n            return\n          }\n        }\n      }\n    }\n    setCustomRangeFilterId(filterId)\n    setCustomStartDate('')\n    setCustomEndDate('')\n  }\n\n  const findActiveDatetimeFilterId = (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ): string | null => {\n    if (activeDatetimeFilterRef.current) return activeDatetimeFilterRef.current\n    const datetimeFilters = localFilters.filter((f) => f.type === 'datetime')\n    const empty = datetimeFilters.find((f) => !f.values?.length)\n    if (empty) return empty.id\n    if (datetimeFilters.length) return datetimeFilters[datetimeFilters.length - 1].id\n    return options.find((o) => o.type === 'datetime')?.id ?? null\n  }\n\n  const wrapFilterChange = (\n    newFilters: Filter[],\n    localFilters: Filter[],\n    next: (cleaned: Filter[]) => void,\n  ) => {\n    // Track newly added datetime filters\n    const newDatetime = newFilters.find(\n      (f) => f.type === 'datetime' && !localFilters.some((lf) => lf.id === f.id),\n    )\n    if (newDatetime) activeDatetimeFilterRef.current = newDatetime.id\n\n    // Strip CUSTOM_RANGE_ID placeholder values that slip through, but keep empty\n    // datetime filters so SearchFilter can maintain its intermediate state\n    const cleaned = newFilters.map((f) => {\n      if (f.type === 'datetime' && f.values?.some((v) => v.id === CUSTOM_RANGE_ID)) {\n        return { ...f, values: f.values.filter((v) => v.id !== CUSTOM_RANGE_ID) }\n      }\n      return f\n    })\n    next(cleaned)\n  }\n\n  const handleSearchBarClickCapture = (\n    e: React.MouseEvent<HTMLDivElement>,\n    localFilters: Filter[],\n  ) => {\n    const target = e.target as HTMLElement\n    if (target.closest('.remove') || target.closest('.button')) return\n    const chipEl = target.closest('.search-filter-item')\n    if (!chipEl) return\n\n    const labelEl = chipEl.querySelector('.label')\n    const chipLabel = labelEl?.textContent?.replace(/:$/, '').trim()\n    if (!chipLabel) return\n\n    const datetimeFilter = localFilters.find(\n      (f) => f.type === 'datetime' && f.label === chipLabel && f.values?.length,\n    )\n    if (!datetimeFilter) return\n\n    // Relative dates (Today, This week, etc.) — let the dropdown open normally\n    const rangeValue = datetimeFilter.values?.[0]\n    // Nullness chips (No Value / Has Value) have no date range to edit\n    if (rangeValue?.id === 'noValue' || rangeValue?.id === 'hasValue') return\n    if (rangeValue?.id) {\n      const content = (rangeValue.id as string).replace('custom-', '')\n      const firstZ = content.indexOf('Z')\n      if (firstZ > 0) {\n        const startISO = content.substring(0, firstZ + 1)\n        const endISO = content.substring(firstZ + 2)\n        if (detectRelativeDatePattern(startISO, endISO)) return\n      }\n    }\n\n    e.stopPropagation()\n    openCustomRangeForFilter(datetimeFilter.id, localFilters)\n  }\n\n  const handleDropdownItemClick = (\n    event: React.MouseEvent,\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ): boolean => {\n    const listItem = (event.target as HTMLElement).closest('li')\n    if (!listItem) return true\n    if (listItem.querySelector(`span[icon=\"${CUSTOM_RANGE_ICON}\"]`)) {\n      const filterId = findActiveDatetimeFilterId(localFilters, options)\n      if (filterId) openCustomRangeForFilter(filterId, localFilters)\n      return false\n    }\n    return true\n  }\n\n  const handleCustomRangeApply = (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n    onCommit: (updatedFilters: Filter[]) => void,\n    searchFilterRef: React.RefObject<SearchFilterRef>,\n  ) => {\n    if (!customRangeFilterId || !customStartDate || !customEndDate) return\n    const baseId = customRangeFilterId.split('__')[0]\n    const filterOption = options.find((o) => o.id === baseId)\n    if (!filterOption) return\n\n    const start = startOfDay(parse(customStartDate, 'yyyy-MM-dd', new Date()))\n    const end = endOfDay(parse(customEndDate, 'yyyy-MM-dd', new Date()))\n    if (isNaN(start.getTime()) || isNaN(end.getTime()) || end < start) return\n\n    const endFmt = end.getFullYear() === new Date().getFullYear() ? 'MMM d' : 'MMM d, yyyy'\n    const dateValue = {\n      id: `custom-${start.toISOString()}-${end.toISOString()}`,\n      label: `${format(start, 'MMM d')} – ${format(end, endFmt)}`,\n      values: [\n        { id: start.toISOString(), label: format(start, 'MMM d, yyyy') },\n        { id: end.toISOString(), label: format(end, 'MMM d, yyyy') },\n      ],\n    }\n\n    const newFilter: Filter = {\n      id: customRangeFilterId,\n      type: 'datetime',\n      label: filterOption.label,\n      icon: filterOption.icon,\n      values: [dateValue],\n      singleSelect: true,\n    }\n\n    onCommit([...localFilters.filter((f) => f.id !== customRangeFilterId), newFilter])\n\n    setCustomRangeFilterId(null)\n    setCustomStartDate('')\n    setCustomEndDate('')\n    searchFilterRef.current?.close()\n  }\n\n  const handleCustomRangeClose = () => {\n    setCustomRangeFilterId(null)\n    setCustomStartDate('')\n    setCustomEndDate('')\n  }\n\n  return {\n    customRangeFilterId,\n    customStartDate,\n    customEndDate,\n    setCustomStartDate,\n    setCustomEndDate,\n    openCustomRangeForFilter,\n    wrapFilterChange,\n    handleSearchBarClickCapture,\n    handleDropdownItemClick,\n    handleCustomRangeApply,\n    handleCustomRangeClose,\n  }\n}\n"],"names":["useDateRangeFilter","customRangeFilterId","setCustomRangeFilterId","useState","customStartDate","setCustomStartDate","customEndDate","setCustomEndDate","activeDatetimeFilterRef","useRef","openCustomRangeForFilter","filterId","localFilters","filter","f","rangeValue","content","firstZ","startISO","endISO","format","parse","findActiveDatetimeFilterId","options","datetimeFilters","empty","o","newFilters","next","newDatetime","lf","cleaned","v","CUSTOM_RANGE_ID","e","target","chipEl","chipLabel","datetimeFilter","detectRelativeDatePattern","event","listItem","CUSTOM_RANGE_ICON","onCommit","searchFilterRef","baseId","filterOption","start","startOfDay","end","endOfDay","endFmt","dateValue","newFilter"],"mappings":"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"}
+{"version":3,"file":"useDateRangeFilter.es.js","sources":["../../../../../src/components/SearchFilter/useDateRangeFilter.ts"],"sourcesContent":["import { useState } from 'react'\nimport { Filter, SearchFilterRef } from '@ynput/ayon-react-components'\nimport { CUSTOM_RANGE_ID, CUSTOM_RANGE_ICON, detectRelativeDatePattern } from './filterDates'\nimport { startOfDay, endOfDay, format, parse } from 'date-fns'\n\nexport type DateRangeOption = {\n  id: string\n  label: string\n  type?: string\n  icon?: string | null\n}\n\nexport type UseDateRangeFilterReturn = {\n  // Dialog state\n  customRangeFilterId: string | null\n  customStartDate: string\n  customEndDate: string\n  setCustomStartDate: (v: string) => void\n  setCustomEndDate: (v: string) => void\n\n  /** Open the custom date range dialog for a given filter id. */\n  openCustomRangeForFilter: (filterId: string, localFilters: Filter[]) => void\n  /** Wrap around your own onChange: tracks new datetime filters and strips CUSTOM_RANGE_ID placeholders. */\n  wrapFilterChange: (\n    newFilters: Filter[],\n    localFilters: Filter[],\n    next: (cleaned: Filter[]) => void,\n  ) => void\n  /** Pass to pt.searchBar.onClickCapture to intercept datetime chip clicks. */\n  handleSearchBarClickCapture: (e: React.MouseEvent<HTMLDivElement>, localFilters: Filter[]) => void\n  /** Pass to pt.dropdown.pt.item.onClick to intercept \"Custom range…\" list item. */\n  handleDropdownItemClick: (\n    event: React.MouseEvent,\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ) => boolean\n  /** Call when the Dialog's Confirm button is clicked. */\n  handleCustomRangeApply: (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n    onCommit: (updatedFilters: Filter[]) => void,\n    searchFilterRef: React.RefObject<SearchFilterRef>,\n  ) => void\n  /** Call on Dialog close. */\n  handleCustomRangeClose: () => void\n}\n\n/**\n * Encapsulates all custom date-range picker logic shared between SearchFilter wrappers.\n *\n * Usage:\n *   const dateRange = useDateRangeFilter()\n *   // wire dateRange.wrapFilterChange into your onChange\n *   // wire dateRange.handleSearchBarClickCapture / handleDropdownItemClick into pt\n *   // render <CustomDateRangeDialog {...dateRange} options={options} onApply={...} />\n */\nexport const useDateRangeFilter = (): UseDateRangeFilterReturn => {\n  const [customRangeFilterId, setCustomRangeFilterId] = useState<string | null>(null)\n  const [customStartDate, setCustomStartDate] = useState('')\n  const [customEndDate, setCustomEndDate] = useState('')\n\n  const openCustomRangeForFilter = (filterId: string, localFilters: Filter[]) => {\n    const filter = localFilters.find((f) => f.id === filterId)\n    if (filter?.type === 'datetime' && filter.values?.length) {\n      const rangeValue = filter.values[0]\n      if (rangeValue.id?.startsWith('custom-')) {\n        const content = (rangeValue.id as string).replace('custom-', '')\n        const firstZ = content.indexOf('Z')\n        if (firstZ > 0) {\n          const startISO = content.substring(0, firstZ + 1)\n          const endISO = content.substring(firstZ + 2)\n          if (startISO && endISO) {\n            setCustomStartDate(\n              format(parse(startISO, \"yyyy-MM-dd'T'HH:mm:ss.SSSx\", new Date()), 'yyyy-MM-dd'),\n            )\n            setCustomEndDate(\n              format(parse(endISO, \"yyyy-MM-dd'T'HH:mm:ss.SSSx\", new Date()), 'yyyy-MM-dd'),\n            )\n            setCustomRangeFilterId(filterId)\n            return\n          }\n        }\n      }\n    }\n    setCustomRangeFilterId(filterId)\n    setCustomStartDate('')\n    setCustomEndDate('')\n  }\n\n  const findFallbackDatetimeFilterId = (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ): string | null => {\n    const datetimeFilters = localFilters.filter((f) => f.type === 'datetime')\n    const empty = datetimeFilters.find((f) => !f.values?.length)\n    if (empty) return empty.id\n    if (datetimeFilters.length) return datetimeFilters[datetimeFilters.length - 1].id\n    return options.find((o) => o.type === 'datetime')?.id ?? null\n  }\n\n  const wrapFilterChange = (\n    newFilters: Filter[],\n    _localFilters: Filter[],\n    next: (cleaned: Filter[]) => void,\n  ) => {\n    // Strip CUSTOM_RANGE_ID placeholder values that slip through, but keep empty\n    // datetime filters so SearchFilter can maintain its intermediate state\n    const cleaned = newFilters.map((f) => {\n      if (f.type === 'datetime' && f.values?.some((v) => v.id === CUSTOM_RANGE_ID)) {\n        return { ...f, values: f.values.filter((v) => v.id !== CUSTOM_RANGE_ID) }\n      }\n      return f\n    })\n    next(cleaned)\n  }\n\n  const handleSearchBarClickCapture = (\n    e: React.MouseEvent<HTMLDivElement>,\n    localFilters: Filter[],\n  ) => {\n    const target = e.target as HTMLElement\n    if (target.closest('.remove') || target.closest('.button')) return\n    const chipEl = target.closest('.search-filter-item')\n    if (!chipEl) return\n\n    const datetimeFilter = localFilters.find(\n      (f) => f.id === chipEl.id && f.type === 'datetime' && f.values?.length,\n    )\n    if (!datetimeFilter) return\n\n    // Relative dates (Today, This week, etc.) — let the dropdown open normally\n    const rangeValue = datetimeFilter.values?.[0]\n    // Nullness chips (No Value / Has Value) have no date range to edit\n    if (rangeValue?.id === 'noValue' || rangeValue?.id === 'hasValue') return\n    if (rangeValue?.id) {\n      const content = (rangeValue.id as string).replace('custom-', '')\n      const firstZ = content.indexOf('Z')\n      if (firstZ > 0) {\n        const startISO = content.substring(0, firstZ + 1)\n        const endISO = content.substring(firstZ + 2)\n        if (detectRelativeDatePattern(startISO, endISO)) return\n      }\n    }\n\n    e.stopPropagation()\n    openCustomRangeForFilter(datetimeFilter.id, localFilters)\n  }\n\n  const handleDropdownItemClick = (\n    event: React.MouseEvent,\n    localFilters: Filter[],\n    options: DateRangeOption[],\n  ): boolean => {\n    const listItem = (event.target as HTMLElement).closest('li')\n    if (!listItem) return true\n    if (listItem.querySelector(`span[icon=\"${CUSTOM_RANGE_ICON}\"]`)) {\n      // data-parent is the id of the filter whose values panel is open (add or edit)\n      const filterId =\n        listItem.getAttribute('data-parent') || findFallbackDatetimeFilterId(localFilters, options)\n      if (filterId) openCustomRangeForFilter(filterId, localFilters)\n      return false\n    }\n    return true\n  }\n\n  const handleCustomRangeApply = (\n    localFilters: Filter[],\n    options: DateRangeOption[],\n    onCommit: (updatedFilters: Filter[]) => void,\n    searchFilterRef: React.RefObject<SearchFilterRef>,\n  ) => {\n    if (!customRangeFilterId || !customStartDate || !customEndDate) return\n    const baseId = customRangeFilterId.split('__')[0]\n    const filterOption = options.find((o) => o.id === baseId)\n    if (!filterOption) return\n\n    const start = startOfDay(parse(customStartDate, 'yyyy-MM-dd', new Date()))\n    const end = endOfDay(parse(customEndDate, 'yyyy-MM-dd', new Date()))\n    if (isNaN(start.getTime()) || isNaN(end.getTime()) || end < start) return\n\n    const endFmt = end.getFullYear() === new Date().getFullYear() ? 'MMM d' : 'MMM d, yyyy'\n    const dateValue = {\n      id: `custom-${start.toISOString()}-${end.toISOString()}`,\n      label: `${format(start, 'MMM d')} – ${format(end, endFmt)}`,\n      values: [\n        { id: start.toISOString(), label: format(start, 'MMM d, yyyy') },\n        { id: end.toISOString(), label: format(end, 'MMM d, yyyy') },\n      ],\n    }\n\n    const newFilter: Filter = {\n      id: customRangeFilterId,\n      type: 'datetime',\n      label: filterOption.label,\n      icon: filterOption.icon,\n      values: [dateValue],\n      singleSelect: true,\n    }\n\n    onCommit([...localFilters.filter((f) => f.id !== customRangeFilterId), newFilter])\n\n    setCustomRangeFilterId(null)\n    setCustomStartDate('')\n    setCustomEndDate('')\n    searchFilterRef.current?.close()\n  }\n\n  const handleCustomRangeClose = () => {\n    setCustomRangeFilterId(null)\n    setCustomStartDate('')\n    setCustomEndDate('')\n  }\n\n  return {\n    customRangeFilterId,\n    customStartDate,\n    customEndDate,\n    setCustomStartDate,\n    setCustomEndDate,\n    openCustomRangeForFilter,\n    wrapFilterChange,\n    handleSearchBarClickCapture,\n    handleDropdownItemClick,\n    handleCustomRangeApply,\n    handleCustomRangeClose,\n  }\n}\n"],"names":["useDateRangeFilter","customRangeFilterId","setCustomRangeFilterId","useState","customStartDate","setCustomStartDate","customEndDate","setCustomEndDate","openCustomRangeForFilter","filterId","localFilters","filter","f","rangeValue","content","firstZ","startISO","endISO","format","parse","findFallbackDatetimeFilterId","options","datetimeFilters","empty","o","newFilters","_localFilters","next","cleaned","v","CUSTOM_RANGE_ID","e","target","chipEl","datetimeFilter","detectRelativeDatePattern","event","listItem","CUSTOM_RANGE_ICON","onCommit","searchFilterRef","baseId","filterOption","start","startOfDay","end","endOfDay","endFmt","dateValue","newFilter"],"mappings":"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"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js

@@ -1,34 +1,37 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("@ynput/ayon-react-components"),h=require("react"),n=require("styled-components"),R=require("../../context/SettingsPanelContext.cjs.js"),S=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("@ynput/ayon-react-components"),R=require("react"),o=require("styled-components"),S=require("../../context/SettingsPanelContext.cjs.js"),w=o.div`
   height: 100%;
+  /* fixed floor so the panel doesn't resize as its content changes */
+  min-width: 260px;
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
   border-radius: 4px;
   z-index: 10;
   display: flex;
   flex-direction: column;
-`,E=n.div`
+`,E=o.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
   height: 34px;
+  flex: 0 0 auto;
   padding: 0px 4px;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);
 
   h3 {
     margin-left: 4px;
     padding: 0;
     white-space: nowrap;
   }
-`,x=n(a.Button)`
+`,x=o(a.Button)`
   padding: 4px !important;
-`,w=n.h3`
+`,y=o.h3`
   margin: 0;
   flex: 1;
-`,y=n.div`
+`,P=o.div`
   padding: 8px;
   flex: 1;
   overflow-y: auto;
-`,d=n(a.Button)`
+`,d=o(a.Button)`
   width: 100%;
   justify-content: flex-start;
   margin-bottom: 8px;
@@ -46,5 +49,5 @@
   .arrow {
     color: var(--md-sys-color-outline);
   }
-`,P=({settings:o,order:l})=>{const{isPanelOpen:p,selectedSetting:i,closePanel:u,backToMainMenu:m,selectSetting:g}=R.useSettingsPanel(),j=()=>i&&o.find(t=>t.id===i)?.title||"Settings",f=l?o.toSorted((r,t)=>{const s=r.id?l.indexOf(r.id):-1,c=t.id?l.indexOf(t.id):-1;return s===-1&&c===-1?0:s===-1?1:c===-1?-1:s-c}):o,v=()=>i?o.find(t=>t.id===i)?.component:e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:f.map((t,s)=>t.title?e.jsxRuntimeExports.jsxs(d,{onClick:()=>g(t.id),variant:"text",className:"setting-option",children:[t.icon&&e.jsxRuntimeExports.jsx(a.Icon,{icon:t.icon}),e.jsxRuntimeExports.jsx("span",{className:"title",children:t.title}),!!t.preview?.toString()&&e.jsxRuntimeExports.jsx("span",{className:"preview",children:t.preview}),e.jsxRuntimeExports.jsx(a.Icon,{icon:"chevron_right",className:"arrow"})]},t.id):e.jsxRuntimeExports.jsx(h.Fragment,{children:t.component},t.id))});return e.jsxRuntimeExports.jsxs(S,{open:p,children:[e.jsxRuntimeExports.jsxs(E,{children:[i&&e.jsxRuntimeExports.jsx(x,{variant:"text",icon:"arrow_back",onClick:m}),e.jsxRuntimeExports.jsx(w,{children:j()}),e.jsxRuntimeExports.jsx(x,{variant:"text",icon:"close",onClick:u})]}),e.jsxRuntimeExports.jsx(y,{children:v()})]})};exports.SettingOption=d;exports.SettingsPanel=P;
+`,b=({settings:s,order:l})=>{const{isPanelOpen:p,selectedSetting:n,closePanel:u,backToMainMenu:m,selectSetting:g}=S.useSettingsPanel(),f=()=>n&&s.find(e=>e.id===n)?.title||"Settings",j=l?s.toSorted((i,e)=>{const r=i.id?l.indexOf(i.id):-1,c=e.id?l.indexOf(e.id):-1;return r===-1&&c===-1?0:r===-1?1:c===-1?-1:r-c}):s,h=s.find(i=>i.id===n),v=()=>n?s.find(e=>e.id===n)?.component:t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:j.map((e,r)=>e.title?t.jsxRuntimeExports.jsxs(d,{onClick:()=>g(e.id),variant:"text",className:"setting-option",children:[e.icon&&t.jsxRuntimeExports.jsx(a.Icon,{icon:e.icon}),t.jsxRuntimeExports.jsx("span",{className:"title",children:e.title}),!!e.preview?.toString()&&t.jsxRuntimeExports.jsx("span",{className:"preview",children:e.preview}),t.jsxRuntimeExports.jsx(a.Icon,{icon:"chevron_right",className:"arrow"})]},e.id):t.jsxRuntimeExports.jsx(R.Fragment,{children:e.component},e.id))});return t.jsxRuntimeExports.jsxs(w,{open:p,children:[t.jsxRuntimeExports.jsxs(E,{children:[n&&t.jsxRuntimeExports.jsx(x,{variant:"text",icon:"arrow_back",onClick:m}),t.jsxRuntimeExports.jsx(y,{children:f()}),h?.headerActions,t.jsxRuntimeExports.jsx(x,{variant:"text",icon:"close",onClick:u})]}),t.jsxRuntimeExports.jsx(P,{children:v()})]})};exports.SettingOption=d;exports.SettingsPanel=b;
 //# sourceMappingURL=SettingsPanel.cjs.js.map

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, Fragment, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport type { SettingField } from '@shared/context/SettingsPanelContext'\nimport { useSettingsPanel } from '@shared/context/SettingsPanelContext'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n    white-space: nowrap;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n  padding-left: var(--padding-m);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title?: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n  order?: string[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings, order }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const sortedSettings = order\n    ? settings.toSorted((a, b) => {\n        const aIndex = a.id ? order.indexOf(a.id) : -1\n        const bIndex = b.id ? order.indexOf(b.id) : -1\n        if (aIndex === -1 && bIndex === -1) return 0\n        if (aIndex === -1) return 1\n        if (bIndex === -1) return -1\n        return aIndex - bIndex\n      })\n    : settings\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {sortedSettings.map((setting, i) =>\n            setting.title ? (\n              <SettingOption\n                key={setting.id}\n                onClick={() => selectSetting(setting.id)}\n                variant=\"text\"\n                className=\"setting-option\"\n              >\n                {setting.icon && <Icon icon={setting.icon} />}\n                <span className=\"title\">{setting.title}</span>\n                {!!setting.preview?.toString() && (\n                  <span className=\"preview\">{setting.preview}</span>\n                )}\n                <Icon icon=\"chevron_right\" className=\"arrow\" />\n              </SettingOption>\n            ) : (\n              <Fragment key={setting.id}>{setting.component}</Fragment>\n            ),\n          )}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","order","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","s","sortedSettings","a","b","aIndex","bIndex","renderSettingContent","setting","i","jsxs","jsx","Icon","Fragment"],"mappings":"8RAOMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAerBE,EAAaF,EAAOG,QAAM;AAAA;AAAA,EAI1BC,EAAaJ,EAAO;AAAA;AAAA;AAAA,EAKpBK,EAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,EAMfM,EAAgBN,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiC7BI,EAAwC,CAAC,CAAE,SAAAC,EAAU,MAAAC,KAAY,CAC5E,KAAM,CAAE,YAAAC,EAAa,gBAAAC,EAAiB,WAAAC,EAAY,eAAAC,EAAgB,cAAAC,CAAA,EAChEC,mBAAA,EAEIC,EAAgB,IACfL,GACWH,EAAS,KAAMS,GAAMA,EAAE,KAAON,CAAe,GAC7C,OAAS,WAGrBO,EAAiBT,EACnBD,EAAS,SAAS,CAACW,EAAGC,IAAM,CAC1B,MAAMC,EAASF,EAAE,GAAKV,EAAM,QAAQU,EAAE,EAAE,EAAI,GACtCG,EAASF,EAAE,GAAKX,EAAM,QAAQW,EAAE,EAAE,EAAI,GAC5C,OAAIC,IAAW,IAAMC,IAAW,GAAW,EACvCD,IAAW,GAAW,EACtBC,IAAW,GAAW,GACnBD,EAASC,CAClB,CAAC,EACDd,EAEEe,EAAuB,IACtBZ,EA2BWH,EAAS,KAAMS,GAAMA,EAAE,KAAON,CAAe,GAC7C,gEAxBT,SAAAO,EAAe,IAAI,CAACM,EAASC,IAC5BD,EAAQ,MACNE,EAAAA,kBAAAA,KAACpB,EAAA,CAEC,QAAS,IAAMQ,EAAcU,EAAQ,EAAE,EACvC,QAAQ,OACR,UAAU,iBAET,SAAA,CAAAA,EAAQ,MAAQG,wBAACC,EAAAA,KAAA,CAAK,KAAMJ,EAAQ,KAAM,0BAC1C,OAAA,CAAK,UAAU,QAAS,SAAAA,EAAQ,MAAM,EACtC,CAAC,CAACA,EAAQ,SAAS,SAAA,GAClBG,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,UAAW,SAAAH,EAAQ,OAAA,CAAQ,EAE7CG,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CAAK,KAAK,gBAAgB,UAAU,OAAA,CAAQ,CAAA,CAAA,EAVxCJ,EAAQ,EAAA,0BAadK,EAAAA,SAAA,CAA2B,SAAAL,EAAQ,SAAA,EAArBA,EAAQ,EAAuB,CAAA,EAGpD,EAQN,OACEE,EAAAA,kBAAAA,KAAC3B,EAAA,CAAU,KAAMW,EACf,SAAA,CAAAgB,yBAACzB,EAAA,CACE,SAAA,CAAAU,2BACET,EAAA,CAAW,QAAQ,OAAO,KAAK,aAAa,QAASW,EAAgB,EAExEc,EAAAA,kBAAAA,IAACvB,EAAA,CAAY,SAAAY,EAAA,CAAc,CAAE,0BAC5Bd,EAAA,CAAW,QAAQ,OAAO,KAAK,QAAQ,QAASU,CAAA,CAAY,CAAA,EAC/D,EACAe,EAAAA,kBAAAA,IAACtB,EAAA,CAAc,SAAAkB,EAAA,CAAqB,CAAE,CAAA,EACxC,CAEJ"}
+{"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, Fragment, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport type { SettingField } from '@shared/context/SettingsPanelContext'\nimport { useSettingsPanel } from '@shared/context/SettingsPanelContext'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  /* fixed floor so the panel doesn't resize as its content changes */\n  min-width: 260px;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  flex: 0 0 auto;\n  padding: 0px 4px;\n  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n    white-space: nowrap;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n  padding-left: var(--padding-m);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title?: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n  headerActions?: ReactNode\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n  order?: string[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings, order }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const sortedSettings = order\n    ? settings.toSorted((a, b) => {\n        const aIndex = a.id ? order.indexOf(a.id) : -1\n        const bIndex = b.id ? order.indexOf(b.id) : -1\n        if (aIndex === -1 && bIndex === -1) return 0\n        if (aIndex === -1) return 1\n        if (bIndex === -1) return -1\n        return aIndex - bIndex\n      })\n    : settings\n\n  const selectedConfig = settings.find((s) => s.id === selectedSetting)\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {sortedSettings.map((setting, i) =>\n            setting.title ? (\n              <SettingOption\n                key={setting.id}\n                onClick={() => selectSetting(setting.id)}\n                variant=\"text\"\n                className=\"setting-option\"\n              >\n                {setting.icon && <Icon icon={setting.icon} />}\n                <span className=\"title\">{setting.title}</span>\n                {!!setting.preview?.toString() && (\n                  <span className=\"preview\">{setting.preview}</span>\n                )}\n                <Icon icon=\"chevron_right\" className=\"arrow\" />\n              </SettingOption>\n            ) : (\n              <Fragment key={setting.id}>{setting.component}</Fragment>\n            ),\n          )}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        {selectedConfig?.headerActions}\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","order","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","s","sortedSettings","a","b","aIndex","bIndex","selectedConfig","renderSettingContent","setting","i","jsxs","jsx","Icon","Fragment"],"mappings":"8RAOMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBrBE,EAAaF,EAAOG,QAAM;AAAA;AAAA,EAI1BC,EAAaJ,EAAO;AAAA;AAAA;AAAA,EAKpBK,EAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,EAMfM,EAAgBN,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkC7BI,EAAwC,CAAC,CAAE,SAAAC,EAAU,MAAAC,KAAY,CAC5E,KAAM,CAAE,YAAAC,EAAa,gBAAAC,EAAiB,WAAAC,EAAY,eAAAC,EAAgB,cAAAC,CAAA,EAChEC,mBAAA,EAEIC,EAAgB,IACfL,GACWH,EAAS,KAAMS,GAAMA,EAAE,KAAON,CAAe,GAC7C,OAAS,WAGrBO,EAAiBT,EACnBD,EAAS,SAAS,CAACW,EAAGC,IAAM,CAC1B,MAAMC,EAASF,EAAE,GAAKV,EAAM,QAAQU,EAAE,EAAE,EAAI,GACtCG,EAASF,EAAE,GAAKX,EAAM,QAAQW,EAAE,EAAE,EAAI,GAC5C,OAAIC,IAAW,IAAMC,IAAW,GAAW,EACvCD,IAAW,GAAW,EACtBC,IAAW,GAAW,GACnBD,EAASC,CAClB,CAAC,EACDd,EAEEe,EAAiBf,EAAS,KAAMS,GAAMA,EAAE,KAAON,CAAe,EAE9Da,EAAuB,IACtBb,EA2BWH,EAAS,KAAMS,GAAMA,EAAE,KAAON,CAAe,GAC7C,gEAxBT,SAAAO,EAAe,IAAI,CAACO,EAASC,IAC5BD,EAAQ,MACNE,EAAAA,kBAAAA,KAACrB,EAAA,CAEC,QAAS,IAAMQ,EAAcW,EAAQ,EAAE,EACvC,QAAQ,OACR,UAAU,iBAET,SAAA,CAAAA,EAAQ,MAAQG,wBAACC,EAAAA,KAAA,CAAK,KAAMJ,EAAQ,KAAM,0BAC1C,OAAA,CAAK,UAAU,QAAS,SAAAA,EAAQ,MAAM,EACtC,CAAC,CAACA,EAAQ,SAAS,SAAA,GAClBG,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,UAAW,SAAAH,EAAQ,OAAA,CAAQ,EAE7CG,EAAAA,kBAAAA,IAACC,EAAAA,KAAA,CAAK,KAAK,gBAAgB,UAAU,OAAA,CAAQ,CAAA,CAAA,EAVxCJ,EAAQ,EAAA,0BAadK,EAAAA,SAAA,CAA2B,SAAAL,EAAQ,SAAA,EAArBA,EAAQ,EAAuB,CAAA,EAGpD,EAQN,OACEE,EAAAA,kBAAAA,KAAC5B,EAAA,CAAU,KAAMW,EACf,SAAA,CAAAiB,yBAAC1B,EAAA,CACE,SAAA,CAAAU,2BACET,EAAA,CAAW,QAAQ,OAAO,KAAK,aAAa,QAASW,EAAgB,EAExEe,EAAAA,kBAAAA,IAACxB,EAAA,CAAY,SAAAY,EAAA,CAAc,CAAE,EAC5BO,GAAgB,sCAChBrB,EAAA,CAAW,QAAQ,OAAO,KAAK,QAAQ,QAASU,CAAA,CAAY,CAAA,EAC/D,EACAgB,EAAAA,kBAAAA,IAACvB,EAAA,CAAc,SAAAmB,EAAA,CAAqB,CAAE,CAAA,EACxC,CAEJ"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js

@@ -1,39 +1,42 @@
 import { j as n } from "../../../../_virtual/jsx-runtime.es.js";
 import { Button as p, Icon as d } from "@ynput/ayon-react-components";
-import { Fragment as j } from "react";
-import t from "styled-components";
-import { useSettingsPanel as w } from "../../context/SettingsPanelContext.es.js";
-const S = t.div`
+import { Fragment as w } from "react";
+import o from "styled-components";
+import { useSettingsPanel as S } from "../../context/SettingsPanelContext.es.js";
+const y = o.div`
   height: 100%;
+  /* fixed floor so the panel doesn't resize as its content changes */
+  min-width: 260px;
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
   border-radius: 4px;
   z-index: 10;
   display: flex;
   flex-direction: column;
-`, b = t.div`
+`, P = o.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
   height: 34px;
+  flex: 0 0 auto;
   padding: 0px 4px;
-  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);
 
   h3 {
     margin-left: 4px;
     padding: 0;
     white-space: nowrap;
   }
-`, c = t(p)`
+`, c = o(p)`
   padding: 4px !important;
-`, y = t.h3`
+`, b = o.h3`
   margin: 0;
   flex: 1;
-`, P = t.div`
+`, k = o.div`
   padding: 8px;
   flex: 1;
   overflow-y: auto;
-`, k = t(p)`
+`, C = o(p)`
   width: 100%;
   justify-content: flex-start;
   margin-bottom: 8px;
@@ -51,13 +54,13 @@ const S = t.div`
   .arrow {
     color: var(--md-sys-color-outline);
   }
-`, B = ({ settings: o, order: l }) => {
-  const { isPanelOpen: x, selectedSetting: i, closePanel: m, backToMainMenu: f, selectSetting: g } = w(), u = () => i && o.find((e) => e.id === i)?.title || "Settings", h = l ? o.toSorted((r, e) => {
-    const a = r.id ? l.indexOf(r.id) : -1, s = e.id ? l.indexOf(e.id) : -1;
-    return a === -1 && s === -1 ? 0 : a === -1 ? 1 : s === -1 ? -1 : a - s;
-  }) : o, v = () => i ? o.find((e) => e.id === i)?.component : /* @__PURE__ */ n.jsx(n.Fragment, { children: h.map(
+`, B = ({ settings: r, order: s }) => {
+  const { isPanelOpen: x, selectedSetting: t, closePanel: f, backToMainMenu: m, selectSetting: g } = S(), h = () => t && r.find((e) => e.id === t)?.title || "Settings", u = s ? r.toSorted((i, e) => {
+    const a = i.id ? s.indexOf(i.id) : -1, l = e.id ? s.indexOf(e.id) : -1;
+    return a === -1 && l === -1 ? 0 : a === -1 ? 1 : l === -1 ? -1 : a - l;
+  }) : r, v = r.find((i) => i.id === t), j = () => t ? r.find((e) => e.id === t)?.component : /* @__PURE__ */ n.jsx(n.Fragment, { children: u.map(
     (e, a) => e.title ? /* @__PURE__ */ n.jsxs(
-      k,
+      C,
       {
         onClick: () => g(e.id),
         variant: "text",
@@ -70,19 +73,20 @@ const S = t.div`
         ]
       },
       e.id
-    ) : /* @__PURE__ */ n.jsx(j, { children: e.component }, e.id)
+    ) : /* @__PURE__ */ n.jsx(w, { children: e.component }, e.id)
   ) });
-  return /* @__PURE__ */ n.jsxs(S, { open: x, children: [
-    /* @__PURE__ */ n.jsxs(b, { children: [
-      i && /* @__PURE__ */ n.jsx(c, { variant: "text", icon: "arrow_back", onClick: f }),
-      /* @__PURE__ */ n.jsx(y, { children: u() }),
-      /* @__PURE__ */ n.jsx(c, { variant: "text", icon: "close", onClick: m })
+  return /* @__PURE__ */ n.jsxs(y, { open: x, children: [
+    /* @__PURE__ */ n.jsxs(P, { children: [
+      t && /* @__PURE__ */ n.jsx(c, { variant: "text", icon: "arrow_back", onClick: m }),
+      /* @__PURE__ */ n.jsx(b, { children: h() }),
+      v?.headerActions,
+      /* @__PURE__ */ n.jsx(c, { variant: "text", icon: "close", onClick: f })
     ] }),
-    /* @__PURE__ */ n.jsx(P, { children: v() })
+    /* @__PURE__ */ n.jsx(k, { children: j() })
   ] });
 };
 export {
-  k as SettingOption,
+  C as SettingOption,
   B as SettingsPanel
 };
 //# sourceMappingURL=SettingsPanel.es.js.map

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, Fragment, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport type { SettingField } from '@shared/context/SettingsPanelContext'\nimport { useSettingsPanel } from '@shared/context/SettingsPanelContext'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n    white-space: nowrap;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n  padding-left: var(--padding-m);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title?: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n  order?: string[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings, order }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const sortedSettings = order\n    ? settings.toSorted((a, b) => {\n        const aIndex = a.id ? order.indexOf(a.id) : -1\n        const bIndex = b.id ? order.indexOf(b.id) : -1\n        if (aIndex === -1 && bIndex === -1) return 0\n        if (aIndex === -1) return 1\n        if (bIndex === -1) return -1\n        return aIndex - bIndex\n      })\n    : settings\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {sortedSettings.map((setting, i) =>\n            setting.title ? (\n              <SettingOption\n                key={setting.id}\n                onClick={() => selectSetting(setting.id)}\n                variant=\"text\"\n                className=\"setting-option\"\n              >\n                {setting.icon && <Icon icon={setting.icon} />}\n                <span className=\"title\">{setting.title}</span>\n                {!!setting.preview?.toString() && (\n                  <span className=\"preview\">{setting.preview}</span>\n                )}\n                <Icon icon=\"chevron_right\" className=\"arrow\" />\n              </SettingOption>\n            ) : (\n              <Fragment key={setting.id}>{setting.component}</Fragment>\n            ),\n          )}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","order","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","s","sortedSettings","a","b","aIndex","bIndex","renderSettingContent","setting","i","jsxs","jsx","Icon","Fragment"],"mappings":";;;;;AAOA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUnBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAerBE,IAAaF,EAAOG,CAAM;AAAA;AAAA,GAI1BC,IAAaJ,EAAO;AAAA;AAAA;AAAA,GAKpBK,IAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfM,IAAgBN,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiC7BI,IAAwC,CAAC,EAAE,UAAAC,GAAU,OAAAC,QAAY;AAC5E,QAAM,EAAE,aAAAC,GAAa,iBAAAC,GAAiB,YAAAC,GAAY,gBAAAC,GAAgB,eAAAC,EAAA,IAChEC,EAAA,GAEIC,IAAgB,MACfL,KACWH,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAON,CAAe,GAC7C,SAAS,YAGrBO,IAAiBT,IACnBD,EAAS,SAAS,CAACW,GAAGC,MAAM;AAC1B,UAAMC,IAASF,EAAE,KAAKV,EAAM,QAAQU,EAAE,EAAE,IAAI,IACtCG,IAASF,EAAE,KAAKX,EAAM,QAAQW,EAAE,EAAE,IAAI;AAC5C,WAAIC,MAAW,MAAMC,MAAW,KAAW,IACvCD,MAAW,KAAW,IACtBC,MAAW,KAAW,KACnBD,IAASC;AAAA,EAClB,CAAC,IACDd,GAEEe,IAAuB,MACtBZ,IA2BWH,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAON,CAAe,GAC7C,gDAxBT,UAAAO,EAAe;AAAA,IAAI,CAACM,GAASC,MAC5BD,EAAQ,QACNE,gBAAAA,EAAAA;AAAAA,MAACpB;AAAA,MAAA;AAAA,QAEC,SAAS,MAAMQ,EAAcU,EAAQ,EAAE;AAAA,QACvC,SAAQ;AAAA,QACR,WAAU;AAAA,QAET,UAAA;AAAA,UAAAA,EAAQ,QAAQG,gBAAAA,MAACC,GAAA,EAAK,MAAMJ,EAAQ,MAAM;AAAA,gCAC1C,QAAA,EAAK,WAAU,SAAS,UAAAA,EAAQ,OAAM;AAAA,UACtC,CAAC,CAACA,EAAQ,SAAS,SAAA,KAClBG,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAAH,EAAQ,QAAA,CAAQ;AAAA,UAE7CG,gBAAAA,EAAAA,IAACC,GAAA,EAAK,MAAK,iBAAgB,WAAU,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAVxCJ,EAAQ;AAAA,IAAA,0BAadK,GAAA,EAA2B,UAAAL,EAAQ,UAAA,GAArBA,EAAQ,EAAuB;AAAA,EAAA,GAGpD;AAQN,SACEE,gBAAAA,EAAAA,KAAC3B,GAAA,EAAU,MAAMW,GACf,UAAA;AAAA,IAAAgB,gBAAAA,OAACzB,GAAA,EACE,UAAA;AAAA,MAAAU,2BACET,GAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAASW,GAAgB;AAAA,MAExEc,gBAAAA,EAAAA,IAACvB,GAAA,EAAY,UAAAY,EAAA,EAAc,CAAE;AAAA,4BAC5Bd,GAAA,EAAW,SAAQ,QAAO,MAAK,SAAQ,SAASU,EAAA,CAAY;AAAA,IAAA,GAC/D;AAAA,IACAe,gBAAAA,EAAAA,IAACtB,GAAA,EAAc,UAAAkB,EAAA,EAAqB,CAAE;AAAA,EAAA,GACxC;AAEJ;"}
+{"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, Fragment, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport type { SettingField } from '@shared/context/SettingsPanelContext'\nimport { useSettingsPanel } from '@shared/context/SettingsPanelContext'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  /* fixed floor so the panel doesn't resize as its content changes */\n  min-width: 260px;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  flex: 0 0 auto;\n  padding: 0px 4px;\n  box-shadow: inset 0 -1px 0 var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n    white-space: nowrap;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n  padding-left: var(--padding-m);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title?: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n  headerActions?: ReactNode\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n  order?: string[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings, order }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const sortedSettings = order\n    ? settings.toSorted((a, b) => {\n        const aIndex = a.id ? order.indexOf(a.id) : -1\n        const bIndex = b.id ? order.indexOf(b.id) : -1\n        if (aIndex === -1 && bIndex === -1) return 0\n        if (aIndex === -1) return 1\n        if (bIndex === -1) return -1\n        return aIndex - bIndex\n      })\n    : settings\n\n  const selectedConfig = settings.find((s) => s.id === selectedSetting)\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {sortedSettings.map((setting, i) =>\n            setting.title ? (\n              <SettingOption\n                key={setting.id}\n                onClick={() => selectSetting(setting.id)}\n                variant=\"text\"\n                className=\"setting-option\"\n              >\n                {setting.icon && <Icon icon={setting.icon} />}\n                <span className=\"title\">{setting.title}</span>\n                {!!setting.preview?.toString() && (\n                  <span className=\"preview\">{setting.preview}</span>\n                )}\n                <Icon icon=\"chevron_right\" className=\"arrow\" />\n              </SettingOption>\n            ) : (\n              <Fragment key={setting.id}>{setting.component}</Fragment>\n            ),\n          )}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        {selectedConfig?.headerActions}\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","order","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","s","sortedSettings","a","b","aIndex","bIndex","selectedConfig","renderSettingContent","setting","i","jsxs","jsx","Icon","Fragment"],"mappings":";;;;;AAOA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBrBE,IAAaF,EAAOG,CAAM;AAAA;AAAA,GAI1BC,IAAaJ,EAAO;AAAA;AAAA;AAAA,GAKpBK,IAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfM,IAAgBN,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkC7BI,IAAwC,CAAC,EAAE,UAAAC,GAAU,OAAAC,QAAY;AAC5E,QAAM,EAAE,aAAAC,GAAa,iBAAAC,GAAiB,YAAAC,GAAY,gBAAAC,GAAgB,eAAAC,EAAA,IAChEC,EAAA,GAEIC,IAAgB,MACfL,KACWH,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAON,CAAe,GAC7C,SAAS,YAGrBO,IAAiBT,IACnBD,EAAS,SAAS,CAACW,GAAGC,MAAM;AAC1B,UAAMC,IAASF,EAAE,KAAKV,EAAM,QAAQU,EAAE,EAAE,IAAI,IACtCG,IAASF,EAAE,KAAKX,EAAM,QAAQW,EAAE,EAAE,IAAI;AAC5C,WAAIC,MAAW,MAAMC,MAAW,KAAW,IACvCD,MAAW,KAAW,IACtBC,MAAW,KAAW,KACnBD,IAASC;AAAA,EAClB,CAAC,IACDd,GAEEe,IAAiBf,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAON,CAAe,GAE9Da,IAAuB,MACtBb,IA2BWH,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAON,CAAe,GAC7C,gDAxBT,UAAAO,EAAe;AAAA,IAAI,CAACO,GAASC,MAC5BD,EAAQ,QACNE,gBAAAA,EAAAA;AAAAA,MAACrB;AAAA,MAAA;AAAA,QAEC,SAAS,MAAMQ,EAAcW,EAAQ,EAAE;AAAA,QACvC,SAAQ;AAAA,QACR,WAAU;AAAA,QAET,UAAA;AAAA,UAAAA,EAAQ,QAAQG,gBAAAA,MAACC,GAAA,EAAK,MAAMJ,EAAQ,MAAM;AAAA,gCAC1C,QAAA,EAAK,WAAU,SAAS,UAAAA,EAAQ,OAAM;AAAA,UACtC,CAAC,CAACA,EAAQ,SAAS,SAAA,KAClBG,gBAAAA,EAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAAH,EAAQ,QAAA,CAAQ;AAAA,UAE7CG,gBAAAA,EAAAA,IAACC,GAAA,EAAK,MAAK,iBAAgB,WAAU,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAVxCJ,EAAQ;AAAA,IAAA,0BAadK,GAAA,EAA2B,UAAAL,EAAQ,UAAA,GAArBA,EAAQ,EAAuB;AAAA,EAAA,GAGpD;AAQN,SACEE,gBAAAA,EAAAA,KAAC5B,GAAA,EAAU,MAAMW,GACf,UAAA;AAAA,IAAAiB,gBAAAA,OAAC1B,GAAA,EACE,UAAA;AAAA,MAAAU,2BACET,GAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAASW,GAAgB;AAAA,MAExEe,gBAAAA,EAAAA,IAACxB,GAAA,EAAY,UAAAY,EAAA,EAAc,CAAE;AAAA,MAC5BO,GAAgB;AAAA,4BAChBrB,GAAA,EAAW,SAAQ,QAAO,MAAK,SAAQ,SAASU,EAAA,CAAY;AAAA,IAAA,GAC/D;AAAA,IACAgB,gBAAAA,EAAAA,IAACvB,GAAA,EAAc,UAAAmB,EAAA,EAAqB,CAAE;AAAA,EAAA,GACxC;AAEJ;"}

package/dist/shared/src/components/SettingsPanel/SettingsPanelItemTemplate.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),n=require("@ynput/ayon-react-components"),c=require("clsx"),j=require("react"),s=require("styled-components"),f=s.li`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),c=require("clsx"),j=require("react"),r=require("styled-components"),f=r.li`
   display: flex;
   padding: 2px;
   padding-left: 8px;
@@ -16,6 +16,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  .label-path {
+    color: var(--md-sys-color-outline);
   }
 
   &.highlighted {
@@ -42,13 +47,19 @@
       background-color: unset;
     }
   }
-`,R=s.div`
+`,R=r.div`
   display: flex;
   gap: var(--base-gap-small);
   margin-left: auto;
-`,w=s(n.Button)`
-  background-color: unset;
-  padding: 4px;
+`,w=r(s.Button)`
+  && {
+    background-color: unset;
+    padding: 4px;
+
+    &:hover {
+      background-color: var(--md-sys-color-surface-container-highest-hover);
+    }
+  }
 
   &.active {
     .icon {
@@ -59,5 +70,5 @@
   &.active {
     opacity: 1;
   }
-`,k=j.forwardRef(({item:o,actions:i,startContent:l,endContent:d,isHighlighted:u,isDisabled:r,disableHover:p,className:g,...x},h)=>e.jsxRuntimeExports.jsxs(f,{className:c("setting-item",g,{highlighted:u,disabled:r,"no-hover":p}),...x,ref:h,children:[l,o.icon&&e.jsxRuntimeExports.jsx(n.Icon,{icon:o.icon}),e.jsxRuntimeExports.jsx("span",{className:"label",children:o.label}),e.jsxRuntimeExports.jsx(R,{className:"actions",children:i?.map(({icon:t,className:m,active:v,onClick:b,...a},y)=>e.jsxRuntimeExports.jsxs(w,{className:c("action",m,{active:v}),onClick:r?void 0:b,...a,children:[t&&e.jsxRuntimeExports.jsx(n.Icon,{icon:t}),a.children]},y))}),d]}));exports.SettingsPanelItemTemplate=k;
+`,k=j.forwardRef(({item:o,actions:i,startContent:l,endContent:d,isHighlighted:p,isDisabled:n,disableHover:u,className:h,...g},x)=>e.jsxRuntimeExports.jsxs(f,{className:c("setting-item",h,{highlighted:p,disabled:n,"no-hover":u}),...g,ref:x,children:[l,o.icon&&e.jsxRuntimeExports.jsx(s.Icon,{icon:o.icon}),e.jsxRuntimeExports.jsxs("span",{className:"label",children:[o.path&&e.jsxRuntimeExports.jsxs("span",{className:"label-path",children:[o.path," / "]}),o.label]}),e.jsxRuntimeExports.jsx(R,{className:"actions",children:i?.map(({icon:t,className:m,active:v,onClick:b,...a},y)=>e.jsxRuntimeExports.jsxs(w,{className:c("action",m,{active:v}),onClick:n?void 0:b,...a,children:[t&&e.jsxRuntimeExports.jsx(s.Icon,{icon:t}),a.children]},y))}),d]}));exports.SettingsPanelItemTemplate=k;
 //# sourceMappingURL=SettingsPanelItemTemplate.cjs.js.map

package/dist/shared/src/components/SettingsPanel/SettingsPanelItemTemplate.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanelItemTemplate.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanelItemTemplate.tsx"],"sourcesContent":["import { Button, ButtonProps, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst Item = styled.li`\n  display: flex;\n  padding: 2px;\n  padding-left: 8px;\n  height: 32px;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-gap-large);\n  cursor: pointer;\n  border-radius: 4px;\n  cursor: default;\n  user-select: none;\n  overflow: hidden;\n\n  .label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  &.no-hover:hover {\n    background-color: unset;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    user-select: none;\n    &:hover {\n      background-color: unset;\n    }\n  }\n`\n\nconst Actions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  margin-left: auto;\n`\n\nconst ActionButton = styled(Button)`\n  background-color: unset;\n  padding: 4px;\n\n  &.active {\n    .icon {\n      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 10;\n    }\n  }\n\n  &.active {\n    opacity: 1;\n  }\n`\n\ninterface Action extends ButtonProps {\n  active?: boolean\n  ['data-tooltip']?: string\n  ['data-shortcut']?: string\n}\n\nexport type SettingsPanelItem = {\n  value: string\n  label: string\n  icon?: string\n}\n\nexport interface SettingsPanelItemTemplateProps extends React.HTMLAttributes<HTMLLIElement> {\n  item: SettingsPanelItem\n  isHighlighted?: boolean\n  isDisabled?: boolean\n  disableHover?: boolean\n  startContent?: React.ReactNode\n  endContent?: React.ReactNode\n  actions?: Action[]\n}\n\nexport const SettingsPanelItemTemplate = forwardRef<HTMLLIElement, SettingsPanelItemTemplateProps>(\n  (\n    {\n      item,\n      actions,\n      startContent,\n      endContent,\n      isHighlighted,\n      isDisabled,\n      disableHover,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Item\n        className={clsx('setting-item', className, {\n          highlighted: isHighlighted,\n          disabled: isDisabled,\n          'no-hover': disableHover,\n        })}\n        {...props}\n        ref={ref}\n      >\n        {startContent}\n        {item.icon && <Icon icon={item.icon} />}\n        <span className=\"label\">{item.label}</span>\n        <Actions className=\"actions\">\n          {actions?.map(({ icon, className, active, onClick, ...action }, index) => (\n            <ActionButton\n              key={index}\n              className={clsx('action', className, { active })}\n              onClick={!isDisabled ? onClick : undefined}\n              {...action}\n            >\n              {icon && <Icon icon={icon} />}\n              {action.children}\n            </ActionButton>\n          ))}\n        </Actions>\n        {endContent}\n      </Item>\n    )\n  },\n)\n"],"names":["Item","styled","Actions","ActionButton","Button","SettingsPanelItemTemplate","forwardRef","item","actions","startContent","endContent","isHighlighted","isDisabled","disableHover","className","props","ref","jsxs","clsx","jsx","Icon","icon","active","onClick","action","index"],"mappings":"yPAKMA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8CdC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA,EAMjBE,EAAeF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqCrBC,EAA4BC,EAAAA,WACvC,CACE,CACE,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAELC,IAGEC,EAAAA,kBAAAA,KAACjB,EAAA,CACC,UAAWkB,EAAK,eAAgBJ,EAAW,CACzC,YAAaH,EACb,SAAUC,EACV,WAAYC,CAAA,CACb,EACA,GAAGE,EACJ,IAAAC,EAEC,SAAA,CAAAP,EACAF,EAAK,MAAQY,wBAACC,EAAAA,KAAA,CAAK,KAAMb,EAAK,KAAM,EACrCY,EAAAA,kBAAAA,IAAC,OAAA,CAAK,UAAU,QAAS,WAAK,MAAM,0BACnCjB,EAAA,CAAQ,UAAU,UAChB,SAAAM,GAAS,IAAI,CAAC,CAAE,KAAAa,EAAM,UAAAP,EAAW,OAAAQ,EAAQ,QAAAC,EAAS,GAAGC,CAAA,EAAUC,IAC9DR,EAAAA,kBAAAA,KAACd,EAAA,CAEC,UAAWe,EAAK,SAAUJ,EAAW,CAAE,OAAAQ,EAAQ,EAC/C,QAAUV,EAAuB,OAAVW,EACtB,GAAGC,EAEH,SAAA,CAAAH,GAAQF,EAAAA,kBAAAA,IAACC,QAAK,KAAAC,CAAA,CAAY,EAC1BG,EAAO,QAAA,CAAA,EANHC,CAAA,CAQR,EACH,EACCf,CAAA,CAAA,CAAA,CAIT"}
+{"version":3,"file":"SettingsPanelItemTemplate.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanelItemTemplate.tsx"],"sourcesContent":["import { Button, ButtonProps, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst Item = styled.li`\n  display: flex;\n  padding: 2px;\n  padding-left: 8px;\n  height: 32px;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-gap-large);\n  cursor: pointer;\n  border-radius: 4px;\n  cursor: default;\n  user-select: none;\n  overflow: hidden;\n\n  .label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n  }\n\n  .label-path {\n    color: var(--md-sys-color-outline);\n  }\n\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high);\n  }\n\n  &.no-hover:hover {\n    background-color: unset;\n  }\n\n  &.disabled {\n    opacity: 0.5;\n    user-select: none;\n    &:hover {\n      background-color: unset;\n    }\n  }\n`\n\nconst Actions = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n  margin-left: auto;\n`\n\nconst ActionButton = styled(Button)`\n  && {\n    background-color: unset;\n    padding: 4px;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n\n  &.active {\n    .icon {\n      font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 10;\n    }\n  }\n\n  &.active {\n    opacity: 1;\n  }\n`\n\ninterface Action extends ButtonProps {\n  active?: boolean\n  ['data-tooltip']?: string\n  ['data-shortcut']?: string\n}\n\nexport type SettingsPanelItem = {\n  value: string\n  label: string\n  icon?: string\n  path?: string\n}\n\nexport interface SettingsPanelItemTemplateProps extends React.HTMLAttributes<HTMLLIElement> {\n  item: SettingsPanelItem\n  isHighlighted?: boolean\n  isDisabled?: boolean\n  disableHover?: boolean\n  startContent?: React.ReactNode\n  endContent?: React.ReactNode\n  actions?: Action[]\n}\n\nexport const SettingsPanelItemTemplate = forwardRef<HTMLLIElement, SettingsPanelItemTemplateProps>(\n  (\n    {\n      item,\n      actions,\n      startContent,\n      endContent,\n      isHighlighted,\n      isDisabled,\n      disableHover,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Item\n        className={clsx('setting-item', className, {\n          highlighted: isHighlighted,\n          disabled: isDisabled,\n          'no-hover': disableHover,\n        })}\n        {...props}\n        ref={ref}\n      >\n        {startContent}\n        {item.icon && <Icon icon={item.icon} />}\n        <span className=\"label\">\n          {item.path && <span className=\"label-path\">{item.path} / </span>}\n          {item.label}\n        </span>\n        <Actions className=\"actions\">\n          {actions?.map(({ icon, className, active, onClick, ...action }, index) => (\n            <ActionButton\n              key={index}\n              className={clsx('action', className, { active })}\n              onClick={!isDisabled ? onClick : undefined}\n              {...action}\n            >\n              {icon && <Icon icon={icon} />}\n              {action.children}\n            </ActionButton>\n          ))}\n        </Actions>\n        {endContent}\n      </Item>\n    )\n  },\n)\n"],"names":["Item","styled","Actions","ActionButton","Button","SettingsPanelItemTemplate","forwardRef","item","actions","startContent","endContent","isHighlighted","isDisabled","disableHover","className","props","ref","jsxs","clsx","jsx","Icon","icon","active","onClick","action","index"],"mappings":"yPAKMA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmDdC,EAAUD,EAAO;AAAA;AAAA;AAAA;AAAA,EAMjBE,EAAeF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4CrBC,EAA4BC,EAAAA,WACvC,CACE,CACE,KAAAC,EACA,QAAAC,EACA,aAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAELC,IAGEC,EAAAA,kBAAAA,KAACjB,EAAA,CACC,UAAWkB,EAAK,eAAgBJ,EAAW,CACzC,YAAaH,EACb,SAAUC,EACV,WAAYC,CAAA,CACb,EACA,GAAGE,EACJ,IAAAC,EAEC,SAAA,CAAAP,EACAF,EAAK,MAAQY,wBAACC,EAAAA,KAAA,CAAK,KAAMb,EAAK,KAAM,EACrCU,EAAAA,kBAAAA,KAAC,OAAA,CAAK,UAAU,QACb,SAAA,CAAAV,EAAK,MAAQU,yBAAC,OAAA,CAAK,UAAU,aAAc,SAAA,CAAAV,EAAK,KAAK,KAAA,EAAG,EACxDA,EAAK,KAAA,EACR,0BACCL,EAAA,CAAQ,UAAU,UAChB,SAAAM,GAAS,IAAI,CAAC,CAAE,KAAAa,EAAM,UAAAP,EAAW,OAAAQ,EAAQ,QAAAC,EAAS,GAAGC,CAAA,EAAUC,IAC9DR,EAAAA,kBAAAA,KAACd,EAAA,CAEC,UAAWe,EAAK,SAAUJ,EAAW,CAAE,OAAAQ,EAAQ,EAC/C,QAAUV,EAAuB,OAAVW,EACtB,GAAGC,EAEH,SAAA,CAAAH,GAAQF,EAAAA,kBAAAA,IAACC,QAAK,KAAAC,CAAA,CAAY,EAC1BG,EAAO,QAAA,CAAA,EANHC,CAAA,CAQR,EACH,EACCf,CAAA,CAAA,CAAA,CAIT"}