@blocklet/labels 1.5.136 → 1.5.137

package/dist/components/label/context.d.ts

@@ -11,6 +11,7 @@ interface LabelsContextValue {
     loading: boolean;
     updateLabels: () => void;
     getLabelsById: (ids: string[]) => Label[];
+    getFullLabelName: (label: Label) => string;
 }
 export declare const useLabelsContext: () => LabelsContextValue;
 export declare const useLabelsUpdateOnDestroy: () => void;

package/dist/index.es.js

@@ -1,83 +1,83 @@
-import { jsx as n, jsxs as C, Fragment as P } from "react/jsx-runtime";
-import { createContext as q, useRef as D, useState as z, useCallback as k, useEffect as W, useMemo as T, useContext as H } from "react";
+import { jsx as n, jsxs as b, Fragment as B } from "react/jsx-runtime";
+import { createContext as q, useRef as D, useState as N, useCallback as T, useEffect as F, useMemo as k, useContext as H } from "react";
 import { ExpandMore as R, Translate as X, Add as ee, EditOutlined as te, DeleteOutlineOutlined as ne, Edit as re, LabelOutlined as oe } from "@mui/icons-material";
-import p from "@mui/material/Box";
+import m from "@mui/material/Box";
 import { styled as J } from "@mui/material/styles";
 import { Tree as le } from "react-arborist";
-import { Icon as ie } from "@iconify/react";
-import ae from "lodash/omit";
+import { Icon as ae } from "@iconify/react";
+import ie from "lodash/omit";
 import se, { components as _ } from "react-select";
 import ce from "@mui/material/Typography";
 import A from "@mui/material/Button";
 import E from "@mui/material/IconButton";
-import j from "@mui/material/TextField";
+import M from "@mui/material/TextField";
 import $ from "@mui/material/ClickAwayListener";
 import { GithubPicker as de } from "react-color";
 import K from "@arcblock/ux/lib/Dialog";
-import { TextField as V, InputAdornment as ue, IconButton as he, Box as B } from "@mui/material";
+import { TextField as V, InputAdornment as ue, IconButton as he, Box as L } from "@mui/material";
 import pe from "@mui/material/Popover";
 import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
-import fe from "@mui/material/Alert";
-import me from "@mui/material/Chip";
+import me from "@mui/material/Alert";
+import fe from "@mui/material/Chip";
 const ge = (e) => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ n("path", { fill: "currentColor", d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z" }) }), xe = (e) => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ n("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) }), Y = q({});
 function ye({
   selectable: e = !1,
   selected: t = [],
-  onSelect: a,
+  onSelect: i,
   renderItem: o,
   children: l
 }) {
-  const r = (h) => t.indexOf(h) !== -1, i = (h) => {
-    Array.from(new Set(t).add(h)), a == null || a(h);
-  }, s = T(
+  const r = (h) => t.indexOf(h) !== -1, a = (h) => {
+    Array.from(new Set(t).add(h)), i == null || i(h);
+  }, d = k(
     () => ({
       selectable: e,
       selected: t,
       isSelected: r,
-      select: i,
+      select: a,
       renderItem: o
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t]
   );
-  return /* @__PURE__ */ n(Y.Provider, { value: s, children: l });
+  return /* @__PURE__ */ n(Y.Provider, { value: d, children: l });
 }
 const Ce = (e) => {
   var t;
   return e.isLeaf || !((t = e.data.children) != null && t.length);
 };
-function ve({ node: e }) {
+function be({ node: e }) {
   return Ce(e) ? /* @__PURE__ */ n("span", {}) : e.isOpen ? /* @__PURE__ */ n(R, { style: { fontSize: 20 } }) : /* @__PURE__ */ n(R, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
 }
-function be({ node: e, style: t, dragHandle: a }) {
-  const { selectable: o, select: l, isSelected: r, renderItem: i } = H(Y), { data: s } = e, h = s.icon ? /* @__PURE__ */ n(ie, { icon: s.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ n(ge, { style: { fontSize: 18, color: s.color || "#ddd" } }), g = (d) => {
-    d.stopPropagation(), e.isInternal && e.toggle();
-  }, f = (d) => {
-    d.stopPropagation(), o && l(e.id);
-  }, x = /* @__PURE__ */ C(P, { children: [
-    /* @__PURE__ */ C(p, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
-      /* @__PURE__ */ n(p, { sx: { display: "flex", cursor: "pointer" }, onClick: g, children: /* @__PURE__ */ n(ve, { node: e }) }),
-      /* @__PURE__ */ n(p, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: h }),
-      /* @__PURE__ */ n(p, { component: "span", sx: { color: "grey.700" }, children: e.data.name })
+function ve({ node: e, style: t, dragHandle: i }) {
+  const { selectable: o, select: l, isSelected: r, renderItem: a } = H(Y), { data: d } = e, h = d.icon ? /* @__PURE__ */ n(ae, { icon: d.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ n(ge, { style: { fontSize: 18, color: d.color || "#ddd" } }), x = (y) => {
+    y.stopPropagation(), e.isInternal && e.toggle();
+  }, g = (y) => {
+    y.stopPropagation(), o && l(e.id);
+  }, f = /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ b(m, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+      /* @__PURE__ */ n(m, { sx: { display: "flex", cursor: "pointer" }, onClick: x, children: /* @__PURE__ */ n(be, { node: e }) }),
+      /* @__PURE__ */ n(m, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: h }),
+      /* @__PURE__ */ n(m, { component: "span", sx: { color: "grey.700" }, children: e.data.name })
     ] }),
     o && r(e.id) && /* @__PURE__ */ n(xe, {})
   ] });
-  return /* @__PURE__ */ C(
-    p,
+  return /* @__PURE__ */ b(
+    m,
     {
       className: "label-tree-item",
       style: t,
       sx: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-      ref: a,
-      onClick: f,
+      ref: i,
+      onClick: g,
       children: [
-        !i && x,
-        !!i && i(x, e.data)
+        !a && f,
+        !!a && a(f, e.data)
       ]
     }
   );
 }
-const Se = J(p)`
+const Se = J(m)`
   > div,
   > div > div,
   > div > div > div {
@@ -91,32 +91,32 @@ const Se = J(p)`
     width: 100%;
   }
 `;
-function F({
+function W({
   data: e,
   selectable: t,
-  selected: a = [],
+  selected: i = [],
   onSelect: o,
   rowHeight: l = 28,
   renderItem: r,
-  sx: i,
-  ...s
+  sx: a,
+  ...d
 }) {
-  const h = D(), g = [...Array.isArray(i) ? i : [i]], [f, x] = z(0), d = k(() => {
-    var u, v;
-    x((((v = (u = h.current) == null ? void 0 : u.visibleNodes) == null ? void 0 : v.length) || 0) * l);
+  const h = D(), x = [...Array.isArray(a) ? a : [a]], [g, f] = N(0), y = T(() => {
+    var c, s;
+    f((((s = (c = h.current) == null ? void 0 : c.visibleNodes) == null ? void 0 : s.length) || 0) * l);
   }, [l]);
-  return W(() => {
-    d();
-  }, [e, d]), /* @__PURE__ */ n(ye, { selectable: t, selected: a, onSelect: o, renderItem: r, children: /* @__PURE__ */ n(Se, { ...s, sx: g, children: /* @__PURE__ */ n(le, { data: e, rowHeight: l, height: f, indent: 32, ref: h, onToggle: () => {
-    setTimeout(d);
-  }, children: be }) }) });
+  return F(() => {
+    y();
+  }, [e, y]), /* @__PURE__ */ n(ye, { selectable: t, selected: i, onSelect: o, renderItem: r, children: /* @__PURE__ */ n(Se, { ...d, sx: x, children: /* @__PURE__ */ n(le, { data: e, rowHeight: l, height: g, indent: 32, ref: h, onToggle: () => {
+    setTimeout(y);
+  }, children: ve }) }) });
 }
-const O = (e) => e.reduce((t, a) => {
+const P = (e) => e.reduce((t, i) => {
   var o;
-  return t.push(a), (o = a.children) != null && o.length && t.push(...O(a.children)), t;
+  return t.push(i), (o = i.children) != null && o.length && t.push(...P(i.children)), t;
 }, []), Z = (e) => e.map((t) => {
-  var a;
-  return (a = t.children) != null && a.length && (t.children = Z(t.children)), t;
+  var i;
+  return (i = t.children) != null && i.length && (t.children = Z(t.children)), t;
 }), we = (e, t = null) => {
   try {
     return JSON.parse(e);
@@ -124,38 +124,38 @@ const O = (e) => e.reduce((t, a) => {
     return t;
   }
 }, Ie = (e) => {
-  const t = e.reduce((l, r) => (l[r.id] = l[r.id] || {}, r.parentId && (l[r.id].parent = r.parentId, l[r.parentId] = l[r.parentId] || {}, l[r.parentId].children = l[r.parentId].children || [], l[r.parentId].children.push(r.id)), l), {}), a = e.map(({ parentId: l, translation: r, ...i }) => ({
-    ...i,
+  const t = e.reduce((l, r) => (l[r.id] = l[r.id] || {}, r.parentId && (l[r.id].parent = r.parentId, l[r.parentId] = l[r.parentId] || {}, l[r.parentId].children = l[r.parentId].children || [], l[r.parentId].children.push(r.id)), l), {}), i = e.map(({ parentId: l, translation: r, ...a }) => ({
+    ...a,
     translation: we(r),
     children: []
-  })), o = a.reduce((l, r) => ({ ...l, [r.id]: r }), {});
-  return a.forEach((l) => {
+  })), o = i.reduce((l, r) => ({ ...l, [r.id]: r }), {});
+  return i.forEach((l) => {
     const r = t[l.id];
-    r.parent && o[r.parent] && (l.parent = o[r.parent]), r.children && (l.children = r.children.map((i) => o[i]));
-  }), a.filter((l) => !l.parent);
+    r.parent && o[r.parent] && (l.parent = o[r.parent]), r.children && (l.children = r.children.map((a) => o[a]));
+  }), i.filter((l) => !l.parent);
 }, ze = (e) => {
-  const { options: t, getValue: a, selectProps: o, selectOption: l } = e, r = a(), i = (s) => {
-    const h = t.find((g) => g.data.id === s);
+  const { options: t, getValue: i, selectProps: o, selectOption: l } = e, r = i(), a = (d) => {
+    const h = t.find((x) => x.data.id === d);
     h && l(h);
   };
-  return /* @__PURE__ */ C(P, { children: [
-    /* @__PURE__ */ n(_.MenuList, { ...ae(e, ["addon"]), children: /* @__PURE__ */ n(p, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ n(
-      F,
+  return /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ n(_.MenuList, { ...ie(e, ["addon"]), children: /* @__PURE__ */ n(m, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ n(
+      W,
       {
         data: o.data,
         selectable: !0,
-        onSelect: i,
-        selected: r.map((s) => s.data.id)
+        onSelect: a,
+        selected: r.map((d) => d.data.id)
       }
     ) }) }),
     e.addon
   ] });
-}, Te = ({ children: e, ...t }) => {
-  const [a, o] = e, l = Array.isArray(a) ? a.length : 0;
-  return /* @__PURE__ */ C(_.ValueContainer, { ...t, children: [
-    /* @__PURE__ */ n(p, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: l ? "Labels" : "Filter by labels" }),
+}, Ne = ({ children: e, ...t }) => {
+  const [i, o] = e, l = Array.isArray(i) ? i.length : 0;
+  return /* @__PURE__ */ b(_.ValueContainer, { ...t, children: [
+    /* @__PURE__ */ n(m, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: l ? "Labels" : "Filter by labels" }),
     !!l && /* @__PURE__ */ n(
-      p,
+      m,
       {
         sx: {
           display: "inline-flex",
@@ -173,7 +173,7 @@ const O = (e) => e.reduce((t, a) => {
     ),
     o
   ] });
-}, ke = {
+}, Te = {
   control: (e) => ({
     ...e,
     minHeight: 31
@@ -191,107 +191,107 @@ const O = (e) => e.reduce((t, a) => {
     padding: "4px"
   })
 };
-function Ae({
+function ke({
   data: e,
   value: t = [],
-  editable: a = !1,
+  editable: i = !1,
   addon: o,
   onChange: l,
   compact: r,
-  isMulti: i = !0,
-  maxHeight: s = 264,
+  isMulti: a = !0,
+  maxHeight: d = 264,
   ...h
 }) {
-  const g = D(null), f = T(
-    () => O(e).map((m) => ({ data: m, label: m.name, value: m.id })),
+  const x = D(null), g = k(
+    () => P(e).map((p) => ({ data: p, label: p.name, value: p.id })),
     [e]
-  ), x = f.reduce(
-    (m, I) => ({ ...m, [I.data.id]: I }),
+  ), f = g.reduce(
+    (p, I) => ({ ...p, [I.data.id]: I }),
     {}
-  ), d = Array.isArray(t) ? t : [t], b = d.map((m) => x[m]), u = D({
-    prev: d.map((m) => {
+  ), y = Array.isArray(t) ? t : [t], z = y.map((p) => f[p]), c = D({
+    prev: y.map((p) => {
       var I;
-      return ((I = x[m]) == null ? void 0 : I.data) || "";
+      return ((I = f[p]) == null ? void 0 : I.data) || "";
     })
-  }), v = (m, I) => {
-    !i || !Array.isArray(m) ? l(m ? [m.data] : []) : u.current.current = m.map((c) => c.data), ["clear", "remove-value"].includes(I.action) && g.current && setTimeout(() => {
-      var c;
-      return (c = g == null ? void 0 : g.current) == null ? void 0 : c.blur();
+  }), s = (p, I) => {
+    !a || !Array.isArray(p) ? l(p ? [p.data] : []) : c.current.current = p.map((u) => u.data), ["clear", "remove-value"].includes(I.action) && x.current && setTimeout(() => {
+      var u;
+      return (u = x == null ? void 0 : x.current) == null ? void 0 : u.blur();
     }, 1);
-  }, M = () => {
-    u.current.current && JSON.stringify(u.current.prev.map((I) => I.id)) !== JSON.stringify(u.current.current.map((I) => I.id)) && (l(u.current.current), u.current.prev = u.current.current);
+  }, S = () => {
+    c.current.current && JSON.stringify(c.current.prev.map((I) => I.id)) !== JSON.stringify(c.current.current.map((I) => I.id)) && (l(c.current.current), c.current.prev = c.current.current);
   };
-  return /* @__PURE__ */ n(p, { ...h, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(m, { ...h, children: /* @__PURE__ */ n(
     se,
     {
-      ref: g,
-      defaultValue: b,
-      options: f,
-      onChange: v,
+      ref: x,
+      defaultValue: z,
+      options: g,
+      onChange: s,
       components: {
         // @ts-ignore
-        MenuList: (m) => /* @__PURE__ */ n(ze, { ...m, addon: o }),
+        MenuList: (p) => /* @__PURE__ */ n(ze, { ...p, addon: o }),
         // eslint-disable-line react/no-unstable-nested-components
-        ...r && { ValueContainer: Te }
+        ...r && { ValueContainer: Ne }
       },
       placeholder: "Select labels",
       styles: {
-        ...r && ke,
-        menu: (m) => ({
-          ...m,
-          ...a && { paddingBottom: "36px" },
+        ...r && Te,
+        menu: (p) => ({
+          ...p,
+          ...i && { paddingBottom: "36px" },
           zIndex: 99
         }),
-        menuList: (m) => ({
-          ...m,
+        menuList: (p) => ({
+          ...p,
           overflowY: "auto",
-          maxHeight: `${s}px`
+          maxHeight: `${d}px`
         })
       },
-      theme: (m) => ({
-        ...m,
+      theme: (p) => ({
+        ...p,
         colors: {
-          ...m.colors,
+          ...p.colors,
           primary25: "#ddd",
           primary50: "#ddd",
           primary: "#ddd"
         }
       }),
       isSearchable: !1,
-      isMulti: i,
-      closeMenuOnSelect: !i,
-      onMenuClose: M,
+      isMulti: a,
+      closeMenuOnSelect: !a,
+      onMenuClose: S,
       isClearable: !0,
       data: e
     }
   ) });
 }
-var L = function() {
-  return L = Object.assign || function(t) {
-    for (var a, o = 1, l = arguments.length; o < l; o++) {
-      a = arguments[o];
-      for (var r in a)
-        Object.prototype.hasOwnProperty.call(a, r) && (t[r] = a[r]);
+var j = function() {
+  return j = Object.assign || function(t) {
+    for (var i, o = 1, l = arguments.length; o < l; o++) {
+      i = arguments[o];
+      for (var r in i)
+        Object.prototype.hasOwnProperty.call(i, r) && (t[r] = i[r]);
     }
     return t;
-  }, L.apply(this, arguments);
+  }, j.apply(this, arguments);
 };
-function Ne(e, t) {
-  var a = typeof Symbol == "function" && e[Symbol.iterator];
-  if (!a)
+function Ae(e, t) {
+  var i = typeof Symbol == "function" && e[Symbol.iterator];
+  if (!i)
     return e;
-  var o = a.call(e), l, r = [], i;
+  var o = i.call(e), l, r = [], a;
   try {
     for (; (t === void 0 || t-- > 0) && !(l = o.next()).done; )
       r.push(l.value);
-  } catch (s) {
-    i = { error: s };
+  } catch (d) {
+    a = { error: d };
   } finally {
     try {
-      l && !l.done && (a = o.return) && a.call(o);
+      l && !l.done && (i = o.return) && i.call(o);
     } finally {
-      if (i)
-        throw i.error;
+      if (a)
+        throw a.error;
     }
   }
   return r;
@@ -299,29 +299,29 @@ function Ne(e, t) {
 var Oe = function(e) {
   return typeof e == "function";
 }, Pe = function(e) {
-  var t = Ne(z(e), 2), a = t[0], o = t[1], l = k(function(r) {
-    o(function(i) {
-      var s = Oe(r) ? r(i) : r;
-      return s ? L(L({}, i), s) : i;
+  var t = Ae(N(e), 2), i = t[0], o = t[1], l = T(function(r) {
+    o(function(a) {
+      var d = Oe(r) ? r(a) : r;
+      return d ? j(j({}, a), d) : a;
     });
   }, []);
-  return [a, l];
+  return [i, l];
 };
 const Be = Pe;
-function Ee({ I18NProps: e, ...t }) {
-  const { languages: a } = Q(), { translation: o, onChange: l } = e, [r, i] = z(null), s = (f) => {
-    const x = f.currentTarget.closest(".MuiInputBase-root");
-    x && i(x);
+function Le({ I18NProps: e, ...t }) {
+  const { languages: i } = Q(), { translation: o, onChange: l } = e, [r, a] = N(null), d = (g) => {
+    const f = g.currentTarget.closest(".MuiInputBase-root");
+    f && a(f);
   }, h = () => {
-    i(null);
-  }, g = a.filter((f) => f.code !== "en");
+    a(null);
+  }, x = i.filter((g) => g.code !== "en");
   return /* @__PURE__ */ n(
     V,
     {
       ...t,
       InputProps: {
-        endAdornment: /* @__PURE__ */ C(ue, { position: "end", children: [
-          /* @__PURE__ */ n(he, { edge: "end", onClick: s, children: /* @__PURE__ */ n(X, {}) }),
+        endAdornment: /* @__PURE__ */ b(ue, { position: "end", children: [
+          /* @__PURE__ */ n(he, { edge: "end", onClick: d, children: /* @__PURE__ */ n(X, {}) }),
           /* @__PURE__ */ n(
             pe,
             {
@@ -341,8 +341,8 @@ function Ee({ I18NProps: e, ...t }) {
               },
               elevation: 1,
               sx: { mt: 2 },
-              children: /* @__PURE__ */ n(B, { sx: { p: 2 }, children: g.map(({ code: f, name: x }) => /* @__PURE__ */ C(
-                B,
+              children: /* @__PURE__ */ n(L, { sx: { p: 2 }, children: x.map(({ code: g, name: f }) => /* @__PURE__ */ b(
+                L,
                 {
                   sx: {
                     display: "flex",
@@ -351,19 +351,19 @@ function Ee({ I18NProps: e, ...t }) {
                     "& + &": { mt: 1 }
                   },
                   children: [
-                    /* @__PURE__ */ n(B, { sx: { flex: "0 0 120px" }, children: x }),
-                    /* @__PURE__ */ n(B, { sx: { flex: 1 }, children: /* @__PURE__ */ n(
+                    /* @__PURE__ */ n(L, { sx: { flex: "0 0 120px" }, children: f }),
+                    /* @__PURE__ */ n(L, { sx: { flex: 1 }, children: /* @__PURE__ */ n(
                       V,
                       {
-                        value: o[f] || "",
+                        value: o[g] || "",
                         size: "small",
                         sx: { width: 1 },
-                        onChange: (d) => l({ ...o, [f]: d.target.value })
+                        onChange: (y) => l({ ...o, [g]: y.target.value })
                       }
                     ) })
                   ]
                 },
-                f
+                g
               )) })
             }
           )
@@ -372,18 +372,18 @@ function Ee({ I18NProps: e, ...t }) {
     }
   );
 }
-function Le({ open: e, initialLabel: t, onSubmit: a, onClose: o, ...l }) {
-  const r = !(t != null && t.id), [i, s] = Be({
+function Ee({ open: e, initialLabel: t, onSubmit: i, onClose: o, ...l }) {
+  const r = !(t != null && t.id), [a, d] = Be({
     name: (t == null ? void 0 : t.name) || "",
     color: (t == null ? void 0 : t.color) || "#ddd",
     slug: (t == null ? void 0 : t.id) || "",
     translation: (t == null ? void 0 : t.translation) || {}
-  }), h = (v) => /^#([0-9A-F]{3}){1,2}$/i.test(v), g = T(() => r ? i.name && i.color && i.slug && h(i.color) : i.name && i.color && h(i.color), [i, r]), [f, x] = z(!1), d = () => {
-    a({ ...t, name: i.name, color: i.color, id: i.slug, translation: i.translation });
-  }, b = (v) => {
-    s({ color: v.hex }), setTimeout(() => x(!1));
-  }, u = (v) => {
-    s({ color: v.target.value });
+  }), h = (s) => /^#([0-9A-F]{3}){1,2}$/i.test(s), x = k(() => r ? a.name && a.color && a.slug && h(a.color) : a.name && a.color && h(a.color), [a, r]), [g, f] = N(!1), y = () => {
+    i({ ...t, name: a.name, color: a.color, id: a.slug, translation: a.translation });
+  }, z = (s) => {
+    d({ color: s.hex }), setTimeout(() => f(!1));
+  }, c = (s) => {
+    d({ color: s.target.value });
   };
   return /* @__PURE__ */ n(
     K,
@@ -392,69 +392,69 @@ function Le({ open: e, initialLabel: t, onSubmit: a, onClose: o, ...l }) {
       showCloseButton: !0,
       maxWidth: "lg",
       title: r ? "Create label" : "Edit label",
-      actions: /* @__PURE__ */ C(P, { children: [
+      actions: /* @__PURE__ */ b(B, { children: [
         /* @__PURE__ */ n(A, { color: "inherit", variant: "contained", size: "small", onClick: o, children: "Cancel" }),
-        /* @__PURE__ */ n(A, { color: "primary", variant: "contained", size: "small", onClick: d, disabled: !g, children: r ? "Create" : "Save Changes" })
+        /* @__PURE__ */ n(A, { color: "primary", variant: "contained", size: "small", onClick: y, disabled: !x, children: r ? "Create" : "Save Changes" })
       ] }),
       onClose: o,
       ...l,
-      children: /* @__PURE__ */ C(p, { width: 600, minHeight: 280, children: [
+      children: /* @__PURE__ */ b(m, { width: 600, minHeight: 280, children: [
         /* @__PURE__ */ n(
-          Ee,
+          Le,
           {
             label: "Name",
-            value: i.name,
+            value: a.name,
             placeholder: "New label",
             size: "small",
             fullWidth: !0,
-            onChange: (v) => s({ name: v.target.value }),
+            onChange: (s) => d({ name: s.target.value }),
             I18NProps: {
-              translation: i.translation,
-              onChange: (v) => s({ translation: v })
+              translation: a.translation,
+              onChange: (s) => d({ translation: s })
             }
           }
         ),
         /* @__PURE__ */ n(
-          j,
+          M,
           {
             label: "Slug",
-            value: i.slug,
+            value: a.slug,
             size: "small",
             fullWidth: !0,
             disabled: !r,
-            onChange: (v) => s({ slug: v.target.value }),
+            onChange: (s) => d({ slug: s.target.value }),
             sx: { mt: 2 }
           }
         ),
-        (t == null ? void 0 : t.parent) && /* @__PURE__ */ n(j, { label: "Parent", value: t.parent.name, size: "small", fullWidth: !0, disabled: !0, sx: { mt: 2 } }),
-        /* @__PURE__ */ n($, { onClickAway: () => x(!1), children: /* @__PURE__ */ C(p, { sx: { position: "relative", mt: 2 }, children: [
-          /* @__PURE__ */ C(p, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        (t == null ? void 0 : t.parent) && /* @__PURE__ */ n(M, { label: "Parent", value: t.parent.name, size: "small", fullWidth: !0, disabled: !0, sx: { mt: 2 } }),
+        /* @__PURE__ */ n($, { onClickAway: () => f(!1), children: /* @__PURE__ */ b(m, { sx: { position: "relative", mt: 2 }, children: [
+          /* @__PURE__ */ b(m, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             /* @__PURE__ */ n(
-              p,
+              m,
               {
-                sx: { width: 30, height: 30, bgcolor: i.color, borderRadius: 1 },
-                onClick: () => x(!0)
+                sx: { width: 30, height: 30, bgcolor: a.color, borderRadius: 1 },
+                onClick: () => f(!0)
               }
             ),
             /* @__PURE__ */ n(
-              j,
+              M,
               {
                 label: "",
-                value: i.color,
+                value: a.color,
                 size: "small",
-                onChange: u,
+                onChange: c,
                 inputProps: { maxLength: 7 },
                 sx: { width: 100, ".MuiInputBase-root": { height: 32 } }
               }
             )
           ] }),
-          f && /* @__PURE__ */ n(p, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ n(de, { color: i.color, onChangeComplete: b }) })
+          g && /* @__PURE__ */ n(m, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ n(de, { color: a.color, onChangeComplete: z }) })
         ] }) })
       ] })
     }
   );
 }
-function Me({ open: e, label: t, onSubmit: a, onClose: o, ...l }) {
+function je({ open: e, label: t, onSubmit: i, onClose: o, ...l }) {
   return /* @__PURE__ */ n(
     K,
     {
@@ -462,20 +462,20 @@ function Me({ open: e, label: t, onSubmit: a, onClose: o, ...l }) {
       showCloseButton: !0,
       maxWidth: "md",
       title: "Delete",
-      actions: /* @__PURE__ */ C(P, { children: [
+      actions: /* @__PURE__ */ b(B, { children: [
         /* @__PURE__ */ n(A, { color: "inherit", variant: "contained", size: "small", onClick: o, children: "Cancel" }),
-        /* @__PURE__ */ n(A, { color: "primary", variant: "contained", size: "small", onClick: a, children: "Delete" })
+        /* @__PURE__ */ n(A, { color: "primary", variant: "contained", size: "small", onClick: i, children: "Delete" })
       ] }),
       onClose: o,
       ...l,
-      children: /* @__PURE__ */ C(p, { width: 600, minHeight: 280, children: [
-        /* @__PURE__ */ n(fe, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
-        /* @__PURE__ */ n(F, { data: [t] })
+      children: /* @__PURE__ */ b(m, { width: 600, minHeight: 280, children: [
+        /* @__PURE__ */ n(me, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
+        /* @__PURE__ */ n(W, { data: [t] })
       ] })
     }
   );
 }
-const je = J(F)`
+const Me = J(W)`
   .label-tree-item {
     &:before {
       content: '';
@@ -497,8 +497,8 @@ const je = J(F)`
   }
 `;
 function De({ locale: e, value: t }) {
-  return /* @__PURE__ */ C(
-    p,
+  return /* @__PURE__ */ b(
+    m,
     {
       sx: {
         display: "flex",
@@ -512,54 +512,54 @@ function De({ locale: e, value: t }) {
       },
       className: "label-translation-tag",
       children: [
-        /* @__PURE__ */ n(p, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: e }),
-        /* @__PURE__ */ n(p, { sx: { pl: 0.5 }, children: t })
+        /* @__PURE__ */ n(m, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: e }),
+        /* @__PURE__ */ n(m, { sx: { pl: 0.5 }, children: t })
       ]
     }
   );
 }
-function lt({ data: e, api: t, ...a }) {
-  const [o, l] = z(null), [r, i] = z(null), [s, h] = z(Z(e)), g = T(() => O(s), [s]), f = T(() => {
-    const c = (y, w) => y.map((S) => (w && (S.parent = w), S.children && (S.children = c(S.children, S)), S));
-    return c(s);
-  }, [s]), x = (c) => {
-    var y, w;
-    c.parent ? (c.parent.children = (w = (y = c.parent) == null ? void 0 : y.children) == null ? void 0 : w.map((S) => S.id === c.id ? { ...c } : S), x(c.parent)) : h(s.map((S) => S.id === c.id ? { ...c } : S));
-  }, d = (c) => {
-    c.parent ? (c.parent.children = c.parent.children || [], c.parent.children.push(c), h([...s])) : h([...s, c]);
-  }, b = (c) => {
-    var y;
-    c.parent ? c.parent.children = (y = c.parent.children) == null ? void 0 : y.filter((w) => w.id !== c.id) : h(s.filter((w) => w.id !== c.id));
-  }, u = (c) => {
+function lt({ data: e, api: t, ...i }) {
+  const [o, l] = N(null), [r, a] = N(null), [d, h] = N(Z(e)), x = k(() => P(d), [d]), g = k(() => {
+    const u = (C, w) => C.map((v) => (w && (v.parent = w), v.children && (v.children = u(v.children, v)), v));
+    return u(d);
+  }, [d]), f = (u) => {
+    var C, w;
+    u.parent ? (u.parent.children = (w = (C = u.parent) == null ? void 0 : C.children) == null ? void 0 : w.map((v) => v.id === u.id ? { ...u } : v), f(u.parent)) : h(d.map((v) => v.id === u.id ? { ...u } : v));
+  }, y = (u) => {
+    u.parent ? (u.parent.children = u.parent.children || [], u.parent.children.push(u), h([...d])) : h([...d, u]);
+  }, z = (u) => {
+    var C;
+    u.parent ? u.parent.children = (C = u.parent.children) == null ? void 0 : C.filter((w) => w.id !== u.id) : h(d.filter((w) => w.id !== u.id));
+  }, c = (u) => {
     if (o)
       return;
-    l({ id: "", name: "New label", parent: c, color: "#dddddd" });
-  }, v = (c) => {
-    o || l(c);
-  }, M = async (c) => {
+    l({ id: "", name: "New label", parent: u, color: "#dddddd" });
+  }, s = (u) => {
+    o || l(u);
+  }, S = async (u) => {
     if (!o)
       return;
-    const { parent: y, children: w, translation: S, ...N } = c;
-    o.id ? (await t.updateLabel({ ...N, translation: JSON.stringify(S), parentId: y == null ? void 0 : y.id }), x(c)) : (await t.createLabel({ ...N, translation: JSON.stringify(S), parentId: y == null ? void 0 : y.id }), d(c)), l(null);
-  }, m = async () => {
-    r && (await t.deleteLabel(r.id), b(r), i(null));
-  }, I = (c, y) => /* @__PURE__ */ C(P, { children: [
-    /* @__PURE__ */ C(p, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
-      /* @__PURE__ */ n(p, { children: c }),
-      y.translation && /* @__PURE__ */ n(p, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(y.translation).map((w) => {
-        var N;
-        const S = (N = y.translation) == null ? void 0 : N[w];
-        return S ? /* @__PURE__ */ n(De, { locale: w, value: S }, w) : null;
+    const { parent: C, children: w, translation: v, ...O } = u;
+    o.id ? (await t.updateLabel({ ...O, translation: JSON.stringify(v), parentId: C == null ? void 0 : C.id }), f(u)) : (await t.createLabel({ ...O, translation: JSON.stringify(v), parentId: C == null ? void 0 : C.id }), y(u)), l(null);
+  }, p = async () => {
+    r && (await t.deleteLabel(r.id), z(r), a(null));
+  }, I = (u, C) => /* @__PURE__ */ b(B, { children: [
+    /* @__PURE__ */ b(m, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
+      /* @__PURE__ */ n(m, { children: u }),
+      C.translation && /* @__PURE__ */ n(m, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(C.translation).map((w) => {
+        var O;
+        const v = (O = C.translation) == null ? void 0 : O[w];
+        return v ? /* @__PURE__ */ n(De, { locale: w, value: v }, w) : null;
       }) })
     ] }),
-    /* @__PURE__ */ C(p, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
-      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => u(y), children: /* @__PURE__ */ n(ee, { sx: { fontSize: 20 } }) }),
-      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => v(y), children: /* @__PURE__ */ n(te, { sx: { fontSize: 18 } }) }),
-      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => i(y), children: /* @__PURE__ */ n(ne, { sx: { fontSize: 20 } }) })
+    /* @__PURE__ */ b(m, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
+      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => c(C), children: /* @__PURE__ */ n(ee, { sx: { fontSize: 20 } }) }),
+      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => s(C), children: /* @__PURE__ */ n(te, { sx: { fontSize: 18 } }) }),
+      /* @__PURE__ */ n(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => a(C), children: /* @__PURE__ */ n(ne, { sx: { fontSize: 20 } }) })
     ] })
   ] });
-  return /* @__PURE__ */ C(p, { ...a, className: "label-container", children: [
-    /* @__PURE__ */ C(p, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+  return /* @__PURE__ */ b(m, { ...i, className: "label-container", children: [
+    /* @__PURE__ */ b(m, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
       /* @__PURE__ */ n(ce, { component: "h2", variant: "h6", children: "Manage labels" }),
       /* @__PURE__ */ n(
         A,
@@ -568,121 +568,140 @@ function lt({ data: e, api: t, ...a }) {
           variant: "contained",
           size: "small",
           sx: { textTransform: "none" },
-          onClick: () => u(),
+          onClick: () => c(),
           children: "New label"
         }
       )
     ] }),
-    /* @__PURE__ */ C(p, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
-      /* @__PURE__ */ C(p, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
-        g.length,
+    /* @__PURE__ */ b(m, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ b(m, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
+        x.length,
         " labels"
       ] }),
-      /* @__PURE__ */ n(p, { sx: { pt: 0.5 }, children: /* @__PURE__ */ n(je, { data: f, selected: [], renderItem: I, rowHeight: 64 }) })
+      /* @__PURE__ */ n(m, { sx: { pt: 0.5 }, children: /* @__PURE__ */ n(Me, { data: g, selected: [], renderItem: I, rowHeight: 64 }) })
     ] }),
     /* @__PURE__ */ n(
-      Le,
+      Ee,
       {
         open: !!o,
         onClose: () => l(null),
         initialLabel: o,
-        onSubmit: M
+        onSubmit: S
       },
       o == null ? void 0 : o.id
     ),
     /* @__PURE__ */ n(
-      Me,
+      je,
       {
         open: !!r,
-        onClose: () => i(null),
+        onClose: () => a(null),
         label: r,
-        onSubmit: m
+        onSubmit: p
       },
       r == null ? void 0 : r.id
     )
   ] });
 }
-const G = q({}), U = () => H(G), it = () => {
+const G = q({}), U = () => H(G), at = () => {
   const { updateLabels: e } = U();
-  W(() => () => {
+  F(() => () => {
     e();
   }, []);
 };
-function at({ fetchLabels: e, children: t }) {
-  const { locale: a } = Q(), [o, l] = z({
+function it({ fetchLabels: e, children: t }) {
+  const { locale: i } = Q(), [o, l] = N({
     loading: !0,
     labels: [],
     updateCounter: 1
   });
-  W(() => {
+  F(() => {
     (async () => {
       try {
-        l((u) => ({ ...u, loading: !0 }));
-        const b = await e();
-        l((u) => ({ ...u, loading: !1, labels: Ie(b) }));
-      } catch (b) {
-        console.error(b), l((u) => ({ ...u, loading: !1, labels: [] }));
+        l((S) => ({ ...S, loading: !0 }));
+        const s = await e();
+        l((S) => ({ ...S, loading: !1, labels: Ie(s) }));
+      } catch (s) {
+        console.error(s), l((S) => ({ ...S, loading: !1, labels: [] }));
       }
     })();
   }, [o.updateCounter]);
-  const r = T(() => {
-    var b;
-    return (b = o.labels) != null && b.length ? O(o.labels).reduce((u, v) => ({ ...u, [v.id]: v }), {}) : {};
-  }, [o.labels]), i = k(
-    (d) => {
-      var b;
+  const r = k(() => {
+    var s;
+    return (s = o.labels) != null && s.length ? P(o.labels).reduce((S, p) => ({ ...S, [p.id]: p }), {}) : {};
+  }, [o.labels]), a = T(
+    (c) => {
+      var s;
       return {
-        ...d,
-        name: ((b = d.translation) == null ? void 0 : b[a]) || d.name
+        ...c,
+        name: ((s = c.translation) == null ? void 0 : s[i]) || c.name
       };
     },
-    [a]
-  ), s = k(
-    (d) => d.filter(Boolean).map((b) => r[b]).map(i),
-    [r, i]
-  ), h = k((d) => (d == null ? void 0 : d.split(",")) || [], []), g = k((d = []) => {
-    if (d != null && d.length)
-      return d.join(",");
-  }, []), f = T(() => o.labels.map(i), [o.labels, i]), x = T(() => ({
+    [i]
+  ), d = T(
+    (c) => c.filter(Boolean).map((s) => r[s]).map(a),
+    [r, a]
+  ), h = T((c) => {
+    let { parent: s } = c;
+    const S = [];
+    for (; s; )
+      S.unshift(s), s = s.parent;
+    return S;
+  }, []), x = T(
+    (c) => [...h(c), c].map(a).map((S) => S.name).join(" / "),
+    [a, h]
+  ), g = T((c) => (c == null ? void 0 : c.split(",")) || [], []), f = T((c = []) => {
+    if (c != null && c.length)
+      return c.join(",");
+  }, []), y = k(() => o.labels.map(a), [o.labels, a]), z = k(() => ({
     loading: o.loading,
     labels: o.labels || [],
-    updateLabels: () => l((d) => ({ ...d, updateCounter: ++o.updateCounter })),
-    getLabelsById: s,
-    parseLabelIds: h,
-    stringifyLabelIds: g,
-    localizedLabels: f,
-    flattenedLabels: O(f || [])
-  }), [o, s, h, g, f]);
-  return /* @__PURE__ */ n(G.Provider, { value: x, children: t });
+    updateLabels: () => l((c) => ({ ...c, updateCounter: ++o.updateCounter })),
+    getLabelsById: d,
+    parseLabelIds: g,
+    stringifyLabelIds: f,
+    localizedLabels: y,
+    flattenedLabels: P(y || []),
+    getFullLabelName: x
+  }), [o, d, g, f, y, x]);
+  return /* @__PURE__ */ n(G.Provider, { value: z, children: t });
 }
-function st({ labels: e, editable: t, onChange: a, sx: o, renderLabel: l }) {
-  const r = !(e != null && e.length), { labels: i, loading: s, getLabelsById: h } = U(), [g, f] = z(!1);
-  if (s || !t && r)
+function st({ labels: e, editable: t, onChange: i, sx: o, renderLabel: l }) {
+  const r = !(e != null && e.length), { labels: a, loading: d, getLabelsById: h, getFullLabelName: x } = U(), [g, f] = N(!1);
+  if (d || !t && r)
     return null;
-  const x = (u) => {
-    a == null || a(u), setTimeout(() => {
+  const y = (s) => {
+    i == null || i(s), setTimeout(() => {
       f(!1);
     }, 300);
   };
   if (g)
-    return /* @__PURE__ */ n($, { onClickAway: () => g && f(!1), children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(Ae, { data: i, value: e || [], onChange: x }) }) });
-  const d = h(e || []), b = [
+    return /* @__PURE__ */ n($, { onClickAway: () => g && f(!1), children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(ke, { data: a, value: e || [], onChange: y }) }) });
+  const z = h(e || []), c = [
     { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
     ...Array.isArray(o) ? o : [o]
   ];
-  return /* @__PURE__ */ C(p, { sx: b, children: [
-    d.map((u) => u ? l ? l(u) : /* @__PURE__ */ n(me, { label: u.name, variant: "filled", size: "small", sx: { borderRadius: 1 } }, u.id) : null),
+  return /* @__PURE__ */ b(m, { sx: c, children: [
+    z.map((s) => s ? l ? l(s) : /* @__PURE__ */ n(
+      fe,
+      {
+        label: x(s),
+        variant: "filled",
+        size: "small",
+        sx: { borderRadius: 1, bgcolor: s.color }
+      },
+      s.id
+    ) : null),
     t && !r && /* @__PURE__ */ n(E, { color: "inherit", size: "small", onClick: () => f(!0), sx: { color: "grey.400" }, children: /* @__PURE__ */ n(re, { sx: { fontSize: 20 } }) }),
     t && r && /* @__PURE__ */ n(A, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ n(oe, {}), onClick: () => f(!0), children: "Edit labels" })
   ] });
 }
 export {
   lt as LabelManager,
-  Ae as LabelPicker,
-  F as LabelTree,
+  ke as LabelPicker,
+  W as LabelTree,
   st as Labels,
-  at as LabelsProvider,
+  it as LabelsProvider,
   Ie as transformLabels,
   U as useLabelsContext,
-  it as useLabelsUpdateOnDestroy
+  at as useLabelsUpdateOnDestroy
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@mui/icons-material"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mui/icons-material","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/material/TextField","@mui/material/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material","@mui/material/Popover","@arcblock/ux/lib/Locale/context","@mui/material/Alert","@mui/material/Chip"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.DiscussKitComponents={},u.jsxRuntime,u.React,u.iconsMaterial,u.Box,u.styles,u.reactArborist,u.react$1,u.omit,u.Select,u.Typography,u.Button,u.IconButton,u.TextField,u.ClickAwayListener,u.reactColor,u.Dialog,u.material,u.Popover,u.context,u.Alert,u.Chip))})(this,function(u,e,h,z,f,j,U,Y,Z,E,G,q,O,M,W,X,V,T,B,H,R,ee){"use strict";const re=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,children:e.jsx("path",{fill:"currentColor",d:"M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z"})}),te=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,children:e.jsx("path",{fill:"currentColor",d:"m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"})}),J=h.createContext({});function ne({selectable:r=!1,selected:t=[],onSelect:a,renderItem:s,children:l}){const n=g=>t.indexOf(g)!==-1,o=g=>{Array.from(new Set(t).add(g)),a==null||a(g)},i=h.useMemo(()=>({selectable:r,selected:t,isSelected:n,select:o,renderItem:s}),[t]);return e.jsx(J.Provider,{value:i,children:l})}const se=r=>{var t;return r.isLeaf||!((t=r.data.children)!=null&&t.length)};function le({node:r}){return se(r)?e.jsx("span",{}):r.isOpen?e.jsx(z.ExpandMore,{style:{fontSize:20}}):e.jsx(z.ExpandMore,{style:{fontSize:20,transform:"rotate(-90deg)"}})}function oe({node:r,style:t,dragHandle:a}){const{selectable:s,select:l,isSelected:n,renderItem:o}=h.useContext(J),{data:i}=r,g=i.icon?e.jsx(Y.Icon,{icon:i.icon,style:{fontSize:18}}):e.jsx(re,{style:{fontSize:18,color:i.color||"#ddd"}}),x=d=>{d.stopPropagation(),r.isInternal&&r.toggle()},y=d=>{d.stopPropagation(),s&&l(r.id)},C=e.jsxs(e.Fragment,{children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",flex:1},children:[e.jsx(f,{sx:{display:"flex",cursor:"pointer"},onClick:x,children:e.jsx(le,{node:r})}),e.jsx(f,{sx:{display:"flex",alignItems:"center",width:22,height:22},children:g}),e.jsx(f,{component:"span",sx:{color:"grey.700"},children:r.data.name})]}),s&&n(r.id)&&e.jsx(te,{})]});return e.jsxs(f,{className:"label-tree-item",style:t,sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},ref:a,onClick:y,children:[!o&&C,!!o&&o(C,r.data)]})}const ae=j.styled(f)`
+(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@mui/icons-material"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mui/icons-material","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/material/TextField","@mui/material/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material","@mui/material/Popover","@arcblock/ux/lib/Locale/context","@mui/material/Alert","@mui/material/Chip"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.DiscussKitComponents={},p.jsxRuntime,p.React,p.iconsMaterial,p.Box,p.styles,p.reactArborist,p.react$1,p.omit,p.Select,p.Typography,p.Button,p.IconButton,p.TextField,p.ClickAwayListener,p.reactColor,p.Dialog,p.material,p.Popover,p.context,p.Alert,p.Chip))})(this,function(p,e,h,T,f,j,U,Y,Z,M,G,A,O,F,W,X,V,q,B,H,R,ee){"use strict";const re=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,children:e.jsx("path",{fill:"currentColor",d:"M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z"})}),te=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,children:e.jsx("path",{fill:"currentColor",d:"m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"})}),J=h.createContext({});function ne({selectable:r=!1,selected:t=[],onSelect:a,renderItem:s,children:l}){const n=g=>t.indexOf(g)!==-1,o=g=>{Array.from(new Set(t).add(g)),a==null||a(g)},d=h.useMemo(()=>({selectable:r,selected:t,isSelected:n,select:o,renderItem:s}),[t]);return e.jsx(J.Provider,{value:d,children:l})}const se=r=>{var t;return r.isLeaf||!((t=r.data.children)!=null&&t.length)};function le({node:r}){return se(r)?e.jsx("span",{}):r.isOpen?e.jsx(T.ExpandMore,{style:{fontSize:20}}):e.jsx(T.ExpandMore,{style:{fontSize:20,transform:"rotate(-90deg)"}})}function oe({node:r,style:t,dragHandle:a}){const{selectable:s,select:l,isSelected:n,renderItem:o}=h.useContext(J),{data:d}=r,g=d.icon?e.jsx(Y.Icon,{icon:d.icon,style:{fontSize:18}}):e.jsx(re,{style:{fontSize:18,color:d.color||"#ddd"}}),x=b=>{b.stopPropagation(),r.isInternal&&r.toggle()},C=b=>{b.stopPropagation(),s&&l(r.id)},m=e.jsxs(e.Fragment,{children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",flex:1},children:[e.jsx(f,{sx:{display:"flex",cursor:"pointer"},onClick:x,children:e.jsx(le,{node:r})}),e.jsx(f,{sx:{display:"flex",alignItems:"center",width:22,height:22},children:g}),e.jsx(f,{component:"span",sx:{color:"grey.700"},children:r.data.name})]}),s&&n(r.id)&&e.jsx(te,{})]});return e.jsxs(f,{className:"label-tree-item",style:t,sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},ref:a,onClick:C,children:[!o&&m,!!o&&o(m,r.data)]})}const ae=j.styled(f)`
   > div,
   > div > div,
   > div > div > div {
@@ -11,7 +11,7 @@
   .label-tree-item {
     width: 100%;
   }
-`;function P({data:r,selectable:t,selected:a=[],onSelect:s,rowHeight:l=28,renderItem:n,sx:o,...i}){const g=h.useRef(),x=[...Array.isArray(o)?o:[o]],[y,C]=h.useState(0),d=h.useCallback(()=>{var p,S;C((((S=(p=g.current)==null?void 0:p.visibleNodes)==null?void 0:S.length)||0)*l)},[l]);h.useEffect(()=>{d()},[r,d]);const b=()=>{setTimeout(d)};return e.jsx(ne,{selectable:t,selected:a,onSelect:s,renderItem:n,children:e.jsx(ae,{...i,sx:x,children:e.jsx(U.Tree,{data:r,rowHeight:l,height:y,indent:32,ref:g,onToggle:b,children:oe})})})}const A=r=>r.reduce((t,a)=>{var s;return t.push(a),(s=a.children)!=null&&s.length&&t.push(...A(a.children)),t},[]),_=r=>r.map(t=>{var a;return(a=t.children)!=null&&a.length&&(t.children=_(t.children)),t}),ie=(r,t=null)=>{try{return JSON.parse(r)}catch{return t}},K=r=>{const t=r.reduce((l,n)=>(l[n.id]=l[n.id]||{},n.parentId&&(l[n.id].parent=n.parentId,l[n.parentId]=l[n.parentId]||{},l[n.parentId].children=l[n.parentId].children||[],l[n.parentId].children.push(n.id)),l),{}),a=r.map(({parentId:l,translation:n,...o})=>({...o,translation:ie(n),children:[]})),s=a.reduce((l,n)=>({...l,[n.id]:n}),{});return a.forEach(l=>{const n=t[l.id];n.parent&&s[n.parent]&&(l.parent=s[n.parent]),n.children&&(l.children=n.children.map(o=>s[o]))}),a.filter(l=>!l.parent)},ce=r=>{const{options:t,getValue:a,selectProps:s,selectOption:l}=r,n=a(),o=i=>{const g=t.find(x=>x.data.id===i);g&&l(g)};return e.jsxs(e.Fragment,{children:[e.jsx(E.components.MenuList,{...Z(r,["addon"]),children:e.jsx(f,{sx:{px:2,py:1},children:e.jsx(P,{data:s.data,selectable:!0,onSelect:o,selected:n.map(i=>i.data.id)})})}),r.addon]})},de=({children:r,...t})=>{const[a,s]=r,l=Array.isArray(a)?a.length:0;return e.jsxs(E.components.ValueContainer,{...t,children:[e.jsx(f,{component:"span",sx:{fontSize:13,fontWeight:"bold"},children:l?"Labels":"Filter by labels"}),!!l&&e.jsx(f,{sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",width:22,height:22,ml:1,borderRadius:"100%",fontSize:12,bgcolor:"grey.200"},children:l}),s]})},ue={control:r=>({...r,minHeight:31}),valueContainer:r=>({...r,display:"flex"}),dropdownIndicator:r=>({...r,padding:"0 4px"}),clearIndicator:r=>({...r,padding:"4px"})};function $({data:r,value:t=[],editable:a=!1,addon:s,onChange:l,compact:n,isMulti:o=!0,maxHeight:i=264,...g}){const x=h.useRef(null),y=h.useMemo(()=>A(r).map(m=>({data:m,label:m.name,value:m.id})),[r]),C=y.reduce((m,I)=>({...m,[I.data.id]:I}),{}),d=Array.isArray(t)?t:[t],b=d.map(m=>C[m]),p=h.useRef({prev:d.map(m=>{var I;return((I=C[m])==null?void 0:I.data)||""})}),S=(m,I)=>{!o||!Array.isArray(m)?l(m?[m.data]:[]):p.current.current=m.map(c=>c.data),["clear","remove-value"].includes(I.action)&&x.current&&setTimeout(()=>{var c;return(c=x==null?void 0:x.current)==null?void 0:c.blur()},1)},F=()=>{p.current.current&&JSON.stringify(p.current.prev.map(I=>I.id))!==JSON.stringify(p.current.current.map(I=>I.id))&&(l(p.current.current),p.current.prev=p.current.current)};return e.jsx(f,{...g,children:e.jsx(E,{ref:x,defaultValue:b,options:y,onChange:S,components:{MenuList:m=>e.jsx(ce,{...m,addon:s}),...n&&{ValueContainer:de}},placeholder:"Select labels",styles:{...n&&ue,menu:m=>({...m,...a&&{paddingBottom:"36px"},zIndex:99}),menuList:m=>({...m,overflowY:"auto",maxHeight:`${i}px`})},theme:m=>({...m,colors:{...m.colors,primary25:"#ddd",primary50:"#ddd",primary:"#ddd"}}),isSearchable:!1,isMulti:o,closeMenuOnSelect:!o,onMenuClose:F,isClearable:!0,data:r})})}var N=function(){return N=Object.assign||function(t){for(var a,s=1,l=arguments.length;s<l;s++){a=arguments[s];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},N.apply(this,arguments)};function he(r,t){var a=typeof Symbol=="function"&&r[Symbol.iterator];if(!a)return r;var s=a.call(r),l,n=[],o;try{for(;(t===void 0||t-- >0)&&!(l=s.next()).done;)n.push(l.value)}catch(i){o={error:i}}finally{try{l&&!l.done&&(a=s.return)&&a.call(s)}finally{if(o)throw o.error}}return n}typeof SuppressedError=="function"&&SuppressedError;var pe=function(r){return typeof r=="function"},fe=function(r){var t=he(h.useState(r),2),a=t[0],s=t[1],l=h.useCallback(function(n){s(function(o){var i=pe(n)?n(o):n;return i?N(N({},o),i):o})},[]);return[a,l]};const ge=fe;function ye({I18NProps:r,...t}){const{languages:a}=H.useLocaleContext(),{translation:s,onChange:l}=r,[n,o]=h.useState(null),i=y=>{const C=y.currentTarget.closest(".MuiInputBase-root");C&&o(C)},g=()=>{o(null)},x=a.filter(y=>y.code!=="en");return e.jsx(T.TextField,{...t,InputProps:{endAdornment:e.jsxs(T.InputAdornment,{position:"end",children:[e.jsx(T.IconButton,{edge:"end",onClick:i,children:e.jsx(z.Translate,{})}),e.jsx(B,{open:!!n,anchorEl:n,onClose:g,transformOrigin:{vertical:"top",horizontal:"right"},anchorOrigin:{vertical:"bottom",horizontal:"right"},PaperProps:{sx:{width:n==null?void 0:n.clientWidth,maxHeight:200,overflowY:"auto",bgcolor:"grey.50"}},elevation:1,sx:{mt:2},children:e.jsx(T.Box,{sx:{p:2},children:x.map(({code:y,name:C})=>e.jsxs(T.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between","& + &":{mt:1}},children:[e.jsx(T.Box,{sx:{flex:"0 0 120px"},children:C}),e.jsx(T.Box,{sx:{flex:1},children:e.jsx(T.TextField,{value:s[y]||"",size:"small",sx:{width:1},onChange:d=>l({...s,[y]:d.target.value})})})]},y))})})]})}})}function me({open:r,initialLabel:t,onSubmit:a,onClose:s,...l}){const n=!(t!=null&&t.id),[o,i]=ge({name:(t==null?void 0:t.name)||"",color:(t==null?void 0:t.color)||"#ddd",slug:(t==null?void 0:t.id)||"",translation:(t==null?void 0:t.translation)||{}}),g=S=>/^#([0-9A-F]{3}){1,2}$/i.test(S),x=h.useMemo(()=>n?o.name&&o.color&&o.slug&&g(o.color):o.name&&o.color&&g(o.color),[o,n]),[y,C]=h.useState(!1),d=()=>{a({...t,name:o.name,color:o.color,id:o.slug,translation:o.translation})},b=S=>{i({color:S.hex}),setTimeout(()=>C(!1))},p=S=>{i({color:S.target.value})};return e.jsx(V,{open:r,showCloseButton:!0,maxWidth:"lg",title:n?"Create label":"Edit label",actions:e.jsxs(e.Fragment,{children:[e.jsx(q,{color:"inherit",variant:"contained",size:"small",onClick:s,children:"Cancel"}),e.jsx(q,{color:"primary",variant:"contained",size:"small",onClick:d,disabled:!x,children:n?"Create":"Save Changes"})]}),onClose:s,...l,children:e.jsxs(f,{width:600,minHeight:280,children:[e.jsx(ye,{label:"Name",value:o.name,placeholder:"New label",size:"small",fullWidth:!0,onChange:S=>i({name:S.target.value}),I18NProps:{translation:o.translation,onChange:S=>i({translation:S})}}),e.jsx(M,{label:"Slug",value:o.slug,size:"small",fullWidth:!0,disabled:!n,onChange:S=>i({slug:S.target.value}),sx:{mt:2}}),(t==null?void 0:t.parent)&&e.jsx(M,{label:"Parent",value:t.parent.name,size:"small",fullWidth:!0,disabled:!0,sx:{mt:2}}),e.jsx(W,{onClickAway:()=>C(!1),children:e.jsxs(f,{sx:{position:"relative",mt:2},children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(f,{sx:{width:30,height:30,bgcolor:o.color,borderRadius:1},onClick:()=>C(!0)}),e.jsx(M,{label:"",value:o.color,size:"small",onChange:p,inputProps:{maxLength:7},sx:{width:100,".MuiInputBase-root":{height:32}}})]}),y&&e.jsx(f,{sx:{position:"absolute",top:48,zIndex:1},children:e.jsx(X.GithubPicker,{color:o.color,onChangeComplete:b})})]})})]})})}function xe({open:r,label:t,onSubmit:a,onClose:s,...l}){return e.jsx(V,{open:r,showCloseButton:!0,maxWidth:"md",title:"Delete",actions:e.jsxs(e.Fragment,{children:[e.jsx(q,{color:"inherit",variant:"contained",size:"small",onClick:s,children:"Cancel"}),e.jsx(q,{color:"primary",variant:"contained",size:"small",onClick:a,children:"Delete"})]}),onClose:s,...l,children:e.jsxs(f,{width:600,minHeight:280,children:[e.jsx(R,{severity:"info",sx:{mb:2},children:"Are you sure you want to delete these labels ?"}),e.jsx(P,{data:[t]})]})})}const Ce=j.styled(P)`
+`;function P({data:r,selectable:t,selected:a=[],onSelect:s,rowHeight:l=28,renderItem:n,sx:o,...d}){const g=h.useRef(),x=[...Array.isArray(o)?o:[o]],[C,m]=h.useState(0),b=h.useCallback(()=>{var c,i;m((((i=(c=g.current)==null?void 0:c.visibleNodes)==null?void 0:i.length)||0)*l)},[l]);h.useEffect(()=>{b()},[r,b]);const z=()=>{setTimeout(b)};return e.jsx(ne,{selectable:t,selected:a,onSelect:s,renderItem:n,children:e.jsx(ae,{...d,sx:x,children:e.jsx(U.Tree,{data:r,rowHeight:l,height:C,indent:32,ref:g,onToggle:z,children:oe})})})}const L=r=>r.reduce((t,a)=>{var s;return t.push(a),(s=a.children)!=null&&s.length&&t.push(...L(a.children)),t},[]),_=r=>r.map(t=>{var a;return(a=t.children)!=null&&a.length&&(t.children=_(t.children)),t}),ie=(r,t=null)=>{try{return JSON.parse(r)}catch{return t}},K=r=>{const t=r.reduce((l,n)=>(l[n.id]=l[n.id]||{},n.parentId&&(l[n.id].parent=n.parentId,l[n.parentId]=l[n.parentId]||{},l[n.parentId].children=l[n.parentId].children||[],l[n.parentId].children.push(n.id)),l),{}),a=r.map(({parentId:l,translation:n,...o})=>({...o,translation:ie(n),children:[]})),s=a.reduce((l,n)=>({...l,[n.id]:n}),{});return a.forEach(l=>{const n=t[l.id];n.parent&&s[n.parent]&&(l.parent=s[n.parent]),n.children&&(l.children=n.children.map(o=>s[o]))}),a.filter(l=>!l.parent)},ce=r=>{const{options:t,getValue:a,selectProps:s,selectOption:l}=r,n=a(),o=d=>{const g=t.find(x=>x.data.id===d);g&&l(g)};return e.jsxs(e.Fragment,{children:[e.jsx(M.components.MenuList,{...Z(r,["addon"]),children:e.jsx(f,{sx:{px:2,py:1},children:e.jsx(P,{data:s.data,selectable:!0,onSelect:o,selected:n.map(d=>d.data.id)})})}),r.addon]})},de=({children:r,...t})=>{const[a,s]=r,l=Array.isArray(a)?a.length:0;return e.jsxs(M.components.ValueContainer,{...t,children:[e.jsx(f,{component:"span",sx:{fontSize:13,fontWeight:"bold"},children:l?"Labels":"Filter by labels"}),!!l&&e.jsx(f,{sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",width:22,height:22,ml:1,borderRadius:"100%",fontSize:12,bgcolor:"grey.200"},children:l}),s]})},ue={control:r=>({...r,minHeight:31}),valueContainer:r=>({...r,display:"flex"}),dropdownIndicator:r=>({...r,padding:"0 4px"}),clearIndicator:r=>({...r,padding:"4px"})};function $({data:r,value:t=[],editable:a=!1,addon:s,onChange:l,compact:n,isMulti:o=!0,maxHeight:d=264,...g}){const x=h.useRef(null),C=h.useMemo(()=>L(r).map(y=>({data:y,label:y.name,value:y.id})),[r]),m=C.reduce((y,I)=>({...y,[I.data.id]:I}),{}),b=Array.isArray(t)?t:[t],z=b.map(y=>m[y]),c=h.useRef({prev:b.map(y=>{var I;return((I=m[y])==null?void 0:I.data)||""})}),i=(y,I)=>{!o||!Array.isArray(y)?l(y?[y.data]:[]):c.current.current=y.map(u=>u.data),["clear","remove-value"].includes(I.action)&&x.current&&setTimeout(()=>{var u;return(u=x==null?void 0:x.current)==null?void 0:u.blur()},1)},w=()=>{c.current.current&&JSON.stringify(c.current.prev.map(I=>I.id))!==JSON.stringify(c.current.current.map(I=>I.id))&&(l(c.current.current),c.current.prev=c.current.current)};return e.jsx(f,{...g,children:e.jsx(M,{ref:x,defaultValue:z,options:C,onChange:i,components:{MenuList:y=>e.jsx(ce,{...y,addon:s}),...n&&{ValueContainer:de}},placeholder:"Select labels",styles:{...n&&ue,menu:y=>({...y,...a&&{paddingBottom:"36px"},zIndex:99}),menuList:y=>({...y,overflowY:"auto",maxHeight:`${d}px`})},theme:y=>({...y,colors:{...y.colors,primary25:"#ddd",primary50:"#ddd",primary:"#ddd"}}),isSearchable:!1,isMulti:o,closeMenuOnSelect:!o,onMenuClose:w,isClearable:!0,data:r})})}var E=function(){return E=Object.assign||function(t){for(var a,s=1,l=arguments.length;s<l;s++){a=arguments[s];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},E.apply(this,arguments)};function he(r,t){var a=typeof Symbol=="function"&&r[Symbol.iterator];if(!a)return r;var s=a.call(r),l,n=[],o;try{for(;(t===void 0||t-- >0)&&!(l=s.next()).done;)n.push(l.value)}catch(d){o={error:d}}finally{try{l&&!l.done&&(a=s.return)&&a.call(s)}finally{if(o)throw o.error}}return n}typeof SuppressedError=="function"&&SuppressedError;var pe=function(r){return typeof r=="function"},fe=function(r){var t=he(h.useState(r),2),a=t[0],s=t[1],l=h.useCallback(function(n){s(function(o){var d=pe(n)?n(o):n;return d?E(E({},o),d):o})},[]);return[a,l]};const ge=fe;function ye({I18NProps:r,...t}){const{languages:a}=H.useLocaleContext(),{translation:s,onChange:l}=r,[n,o]=h.useState(null),d=C=>{const m=C.currentTarget.closest(".MuiInputBase-root");m&&o(m)},g=()=>{o(null)},x=a.filter(C=>C.code!=="en");return e.jsx(q.TextField,{...t,InputProps:{endAdornment:e.jsxs(q.InputAdornment,{position:"end",children:[e.jsx(q.IconButton,{edge:"end",onClick:d,children:e.jsx(T.Translate,{})}),e.jsx(B,{open:!!n,anchorEl:n,onClose:g,transformOrigin:{vertical:"top",horizontal:"right"},anchorOrigin:{vertical:"bottom",horizontal:"right"},PaperProps:{sx:{width:n==null?void 0:n.clientWidth,maxHeight:200,overflowY:"auto",bgcolor:"grey.50"}},elevation:1,sx:{mt:2},children:e.jsx(q.Box,{sx:{p:2},children:x.map(({code:C,name:m})=>e.jsxs(q.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between","& + &":{mt:1}},children:[e.jsx(q.Box,{sx:{flex:"0 0 120px"},children:m}),e.jsx(q.Box,{sx:{flex:1},children:e.jsx(q.TextField,{value:s[C]||"",size:"small",sx:{width:1},onChange:b=>l({...s,[C]:b.target.value})})})]},C))})})]})}})}function me({open:r,initialLabel:t,onSubmit:a,onClose:s,...l}){const n=!(t!=null&&t.id),[o,d]=ge({name:(t==null?void 0:t.name)||"",color:(t==null?void 0:t.color)||"#ddd",slug:(t==null?void 0:t.id)||"",translation:(t==null?void 0:t.translation)||{}}),g=i=>/^#([0-9A-F]{3}){1,2}$/i.test(i),x=h.useMemo(()=>n?o.name&&o.color&&o.slug&&g(o.color):o.name&&o.color&&g(o.color),[o,n]),[C,m]=h.useState(!1),b=()=>{a({...t,name:o.name,color:o.color,id:o.slug,translation:o.translation})},z=i=>{d({color:i.hex}),setTimeout(()=>m(!1))},c=i=>{d({color:i.target.value})};return e.jsx(V,{open:r,showCloseButton:!0,maxWidth:"lg",title:n?"Create label":"Edit label",actions:e.jsxs(e.Fragment,{children:[e.jsx(A,{color:"inherit",variant:"contained",size:"small",onClick:s,children:"Cancel"}),e.jsx(A,{color:"primary",variant:"contained",size:"small",onClick:b,disabled:!x,children:n?"Create":"Save Changes"})]}),onClose:s,...l,children:e.jsxs(f,{width:600,minHeight:280,children:[e.jsx(ye,{label:"Name",value:o.name,placeholder:"New label",size:"small",fullWidth:!0,onChange:i=>d({name:i.target.value}),I18NProps:{translation:o.translation,onChange:i=>d({translation:i})}}),e.jsx(F,{label:"Slug",value:o.slug,size:"small",fullWidth:!0,disabled:!n,onChange:i=>d({slug:i.target.value}),sx:{mt:2}}),(t==null?void 0:t.parent)&&e.jsx(F,{label:"Parent",value:t.parent.name,size:"small",fullWidth:!0,disabled:!0,sx:{mt:2}}),e.jsx(W,{onClickAway:()=>m(!1),children:e.jsxs(f,{sx:{position:"relative",mt:2},children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(f,{sx:{width:30,height:30,bgcolor:o.color,borderRadius:1},onClick:()=>m(!0)}),e.jsx(F,{label:"",value:o.color,size:"small",onChange:c,inputProps:{maxLength:7},sx:{width:100,".MuiInputBase-root":{height:32}}})]}),C&&e.jsx(f,{sx:{position:"absolute",top:48,zIndex:1},children:e.jsx(X.GithubPicker,{color:o.color,onChangeComplete:z})})]})})]})})}function Ce({open:r,label:t,onSubmit:a,onClose:s,...l}){return e.jsx(V,{open:r,showCloseButton:!0,maxWidth:"md",title:"Delete",actions:e.jsxs(e.Fragment,{children:[e.jsx(A,{color:"inherit",variant:"contained",size:"small",onClick:s,children:"Cancel"}),e.jsx(A,{color:"primary",variant:"contained",size:"small",onClick:a,children:"Delete"})]}),onClose:s,...l,children:e.jsxs(f,{width:600,minHeight:280,children:[e.jsx(R,{severity:"info",sx:{mb:2},children:"Are you sure you want to delete these labels ?"}),e.jsx(P,{data:[t]})]})})}const xe=j.styled(P)`
   .label-tree-item {
     &:before {
       content: '';
@@ -31,4 +31,4 @@
     box-sizing: border-box;
     padding: 0 16px;
   }
-`;function ve({locale:r,value:t}){return e.jsxs(f,{sx:{display:"flex",alignItems:"center",flex:"0 0 auto",px:1,py:.25,fontSize:12,bgcolor:"grey.300",borderRadius:2},className:"label-translation-tag",children:[e.jsx(f,{sx:{pr:.5,borderRight:1,borderColor:"grey.400"},children:r}),e.jsx(f,{sx:{pl:.5},children:t})]})}function be({data:r,api:t,...a}){const[s,l]=h.useState(null),[n,o]=h.useState(null),[i,g]=h.useState(_(r)),x=h.useMemo(()=>A(i),[i]),y=h.useMemo(()=>{const c=(v,k)=>v.map(w=>(k&&(w.parent=k),w.children&&(w.children=c(w.children,w)),w));return c(i)},[i]),C=c=>{var v,k;c.parent?(c.parent.children=(k=(v=c.parent)==null?void 0:v.children)==null?void 0:k.map(w=>w.id===c.id?{...c}:w),C(c.parent)):g(i.map(w=>w.id===c.id?{...c}:w))},d=c=>{c.parent?(c.parent.children=c.parent.children||[],c.parent.children.push(c),g([...i])):g([...i,c])},b=c=>{var v;c.parent?c.parent.children=(v=c.parent.children)==null?void 0:v.filter(k=>k.id!==c.id):g(i.filter(k=>k.id!==c.id))},p=c=>{if(s)return;l({id:"",name:"New label",parent:c,color:"#dddddd"})},S=c=>{s||l(c)},F=async c=>{if(!s)return;const{parent:v,children:k,translation:w,...L}=c;s.id?(await t.updateLabel({...L,translation:JSON.stringify(w),parentId:v==null?void 0:v.id}),C(c)):(await t.createLabel({...L,translation:JSON.stringify(w),parentId:v==null?void 0:v.id}),d(c)),l(null)},m=async()=>{n&&(await t.deleteLabel(n.id),b(n),o(null))},I=(c,v)=>e.jsxs(e.Fragment,{children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap"},className:"label-name",children:[e.jsx(f,{children:c}),v.translation&&e.jsx(f,{sx:{display:"flex",alignItems:"center",gap:.5,ml:2},className:"label-translation",children:Object.keys(v.translation).map(k=>{var L;const w=(L=v.translation)==null?void 0:L[k];return w?e.jsx(ve,{locale:k,value:w},k):null})})]}),e.jsxs(f,{sx:{display:"flex",gap:1,flex:"0 0 auto"},className:"label-action",children:[e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>p(v),children:e.jsx(z.Add,{sx:{fontSize:20}})}),e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>S(v),children:e.jsx(z.EditOutlined,{sx:{fontSize:18}})}),e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>o(v),children:e.jsx(z.DeleteOutlineOutlined,{sx:{fontSize:20}})})]})]});return e.jsxs(f,{...a,className:"label-container",children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx(G,{component:"h2",variant:"h6",children:"Manage labels"}),e.jsx(q,{color:"primary",variant:"contained",size:"small",sx:{textTransform:"none"},onClick:()=>p(),children:"New label"})]}),e.jsxs(f,{sx:{mt:2,border:1,borderColor:"grey.300",borderRadius:1,overflow:"hidden"},children:[e.jsxs(f,{sx:{p:2,fontSize:14,fontWeight:"bold",bgcolor:"grey.200"},className:"label-header",children:[x.length," labels"]}),e.jsx(f,{sx:{pt:.5},children:e.jsx(Ce,{data:y,selected:[],renderItem:I,rowHeight:64})})]}),e.jsx(me,{open:!!s,onClose:()=>l(null),initialLabel:s,onSubmit:F},s==null?void 0:s.id),e.jsx(xe,{open:!!n,onClose:()=>o(null),label:n,onSubmit:m},n==null?void 0:n.id)]})}const Q=h.createContext({}),D=()=>h.useContext(Q),Se=()=>{const{updateLabels:r}=D();h.useEffect(()=>()=>{r()},[])};function we({fetchLabels:r,children:t}){const{locale:a}=H.useLocaleContext(),[s,l]=h.useState({loading:!0,labels:[],updateCounter:1});h.useEffect(()=>{(async()=>{try{l(p=>({...p,loading:!0}));const b=await r();l(p=>({...p,loading:!1,labels:K(b)}))}catch(b){console.error(b),l(p=>({...p,loading:!1,labels:[]}))}})()},[s.updateCounter]);const n=h.useMemo(()=>{var b;return(b=s.labels)!=null&&b.length?A(s.labels).reduce((p,S)=>({...p,[S.id]:S}),{}):{}},[s.labels]),o=h.useCallback(d=>{var b;return{...d,name:((b=d.translation)==null?void 0:b[a])||d.name}},[a]),i=h.useCallback(d=>d.filter(Boolean).map(b=>n[b]).map(o),[n,o]),g=h.useCallback(d=>(d==null?void 0:d.split(","))||[],[]),x=h.useCallback((d=[])=>{if(d!=null&&d.length)return d.join(",")},[]),y=h.useMemo(()=>s.labels.map(o),[s.labels,o]),C=h.useMemo(()=>({loading:s.loading,labels:s.labels||[],updateLabels:()=>l(d=>({...d,updateCounter:++s.updateCounter})),getLabelsById:i,parseLabelIds:g,stringifyLabelIds:x,localizedLabels:y,flattenedLabels:A(y||[])}),[s,i,g,x,y]);return e.jsx(Q.Provider,{value:C,children:t})}function ke({labels:r,editable:t,onChange:a,sx:s,renderLabel:l}){const n=!(r!=null&&r.length),{labels:o,loading:i,getLabelsById:g}=D(),[x,y]=h.useState(!1);if(i||!t&&n)return null;const C=p=>{a==null||a(p),setTimeout(()=>{y(!1)},300)};if(x)return e.jsx(W,{onClickAway:()=>x&&y(!1),children:e.jsx("div",{children:e.jsx($,{data:o,value:r||[],onChange:C})})});const d=g(r||[]),b=[{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},...Array.isArray(s)?s:[s]];return e.jsxs(f,{sx:b,children:[d.map(p=>p?l?l(p):e.jsx(ee,{label:p.name,variant:"filled",size:"small",sx:{borderRadius:1}},p.id):null),t&&!n&&e.jsx(O,{color:"inherit",size:"small",onClick:()=>y(!0),sx:{color:"grey.400"},children:e.jsx(z.Edit,{sx:{fontSize:20}})}),t&&n&&e.jsx(q,{color:"inherit",variant:"outlined",startIcon:e.jsx(z.LabelOutlined,{}),onClick:()=>y(!0),children:"Edit labels"})]})}u.LabelManager=be,u.LabelPicker=$,u.LabelTree=P,u.Labels=ke,u.LabelsProvider=we,u.transformLabels=K,u.useLabelsContext=D,u.useLabelsUpdateOnDestroy=Se,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+`;function be({locale:r,value:t}){return e.jsxs(f,{sx:{display:"flex",alignItems:"center",flex:"0 0 auto",px:1,py:.25,fontSize:12,bgcolor:"grey.300",borderRadius:2},className:"label-translation-tag",children:[e.jsx(f,{sx:{pr:.5,borderRight:1,borderColor:"grey.400"},children:r}),e.jsx(f,{sx:{pl:.5},children:t})]})}function ve({data:r,api:t,...a}){const[s,l]=h.useState(null),[n,o]=h.useState(null),[d,g]=h.useState(_(r)),x=h.useMemo(()=>L(d),[d]),C=h.useMemo(()=>{const u=(v,k)=>v.map(S=>(k&&(S.parent=k),S.children&&(S.children=u(S.children,S)),S));return u(d)},[d]),m=u=>{var v,k;u.parent?(u.parent.children=(k=(v=u.parent)==null?void 0:v.children)==null?void 0:k.map(S=>S.id===u.id?{...u}:S),m(u.parent)):g(d.map(S=>S.id===u.id?{...u}:S))},b=u=>{u.parent?(u.parent.children=u.parent.children||[],u.parent.children.push(u),g([...d])):g([...d,u])},z=u=>{var v;u.parent?u.parent.children=(v=u.parent.children)==null?void 0:v.filter(k=>k.id!==u.id):g(d.filter(k=>k.id!==u.id))},c=u=>{if(s)return;l({id:"",name:"New label",parent:u,color:"#dddddd"})},i=u=>{s||l(u)},w=async u=>{if(!s)return;const{parent:v,children:k,translation:S,...N}=u;s.id?(await t.updateLabel({...N,translation:JSON.stringify(S),parentId:v==null?void 0:v.id}),m(u)):(await t.createLabel({...N,translation:JSON.stringify(S),parentId:v==null?void 0:v.id}),b(u)),l(null)},y=async()=>{n&&(await t.deleteLabel(n.id),z(n),o(null))},I=(u,v)=>e.jsxs(e.Fragment,{children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap"},className:"label-name",children:[e.jsx(f,{children:u}),v.translation&&e.jsx(f,{sx:{display:"flex",alignItems:"center",gap:.5,ml:2},className:"label-translation",children:Object.keys(v.translation).map(k=>{var N;const S=(N=v.translation)==null?void 0:N[k];return S?e.jsx(be,{locale:k,value:S},k):null})})]}),e.jsxs(f,{sx:{display:"flex",gap:1,flex:"0 0 auto"},className:"label-action",children:[e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>c(v),children:e.jsx(T.Add,{sx:{fontSize:20}})}),e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>i(v),children:e.jsx(T.EditOutlined,{sx:{fontSize:18}})}),e.jsx(O,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>o(v),children:e.jsx(T.DeleteOutlineOutlined,{sx:{fontSize:20}})})]})]});return e.jsxs(f,{...a,className:"label-container",children:[e.jsxs(f,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx(G,{component:"h2",variant:"h6",children:"Manage labels"}),e.jsx(A,{color:"primary",variant:"contained",size:"small",sx:{textTransform:"none"},onClick:()=>c(),children:"New label"})]}),e.jsxs(f,{sx:{mt:2,border:1,borderColor:"grey.300",borderRadius:1,overflow:"hidden"},children:[e.jsxs(f,{sx:{p:2,fontSize:14,fontWeight:"bold",bgcolor:"grey.200"},className:"label-header",children:[x.length," labels"]}),e.jsx(f,{sx:{pt:.5},children:e.jsx(xe,{data:C,selected:[],renderItem:I,rowHeight:64})})]}),e.jsx(me,{open:!!s,onClose:()=>l(null),initialLabel:s,onSubmit:w},s==null?void 0:s.id),e.jsx(Ce,{open:!!n,onClose:()=>o(null),label:n,onSubmit:y},n==null?void 0:n.id)]})}const Q=h.createContext({}),D=()=>h.useContext(Q),Se=()=>{const{updateLabels:r}=D();h.useEffect(()=>()=>{r()},[])};function we({fetchLabels:r,children:t}){const{locale:a}=H.useLocaleContext(),[s,l]=h.useState({loading:!0,labels:[],updateCounter:1});h.useEffect(()=>{(async()=>{try{l(w=>({...w,loading:!0}));const i=await r();l(w=>({...w,loading:!1,labels:K(i)}))}catch(i){console.error(i),l(w=>({...w,loading:!1,labels:[]}))}})()},[s.updateCounter]);const n=h.useMemo(()=>{var i;return(i=s.labels)!=null&&i.length?L(s.labels).reduce((w,y)=>({...w,[y.id]:y}),{}):{}},[s.labels]),o=h.useCallback(c=>{var i;return{...c,name:((i=c.translation)==null?void 0:i[a])||c.name}},[a]),d=h.useCallback(c=>c.filter(Boolean).map(i=>n[i]).map(o),[n,o]),g=h.useCallback(c=>{let{parent:i}=c;const w=[];for(;i;)w.unshift(i),i=i.parent;return w},[]),x=h.useCallback(c=>[...g(c),c].map(o).map(w=>w.name).join(" / "),[o,g]),C=h.useCallback(c=>(c==null?void 0:c.split(","))||[],[]),m=h.useCallback((c=[])=>{if(c!=null&&c.length)return c.join(",")},[]),b=h.useMemo(()=>s.labels.map(o),[s.labels,o]),z=h.useMemo(()=>({loading:s.loading,labels:s.labels||[],updateLabels:()=>l(c=>({...c,updateCounter:++s.updateCounter})),getLabelsById:d,parseLabelIds:C,stringifyLabelIds:m,localizedLabels:b,flattenedLabels:L(b||[]),getFullLabelName:x}),[s,d,C,m,b,x]);return e.jsx(Q.Provider,{value:z,children:t})}function ke({labels:r,editable:t,onChange:a,sx:s,renderLabel:l}){const n=!(r!=null&&r.length),{labels:o,loading:d,getLabelsById:g,getFullLabelName:x}=D(),[C,m]=h.useState(!1);if(d||!t&&n)return null;const b=i=>{a==null||a(i),setTimeout(()=>{m(!1)},300)};if(C)return e.jsx(W,{onClickAway:()=>C&&m(!1),children:e.jsx("div",{children:e.jsx($,{data:o,value:r||[],onChange:b})})});const z=g(r||[]),c=[{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},...Array.isArray(s)?s:[s]];return e.jsxs(f,{sx:c,children:[z.map(i=>i?l?l(i):e.jsx(ee,{label:x(i),variant:"filled",size:"small",sx:{borderRadius:1,bgcolor:i.color}},i.id):null),t&&!n&&e.jsx(O,{color:"inherit",size:"small",onClick:()=>m(!0),sx:{color:"grey.400"},children:e.jsx(T.Edit,{sx:{fontSize:20}})}),t&&n&&e.jsx(A,{color:"inherit",variant:"outlined",startIcon:e.jsx(T.LabelOutlined,{}),onClick:()=>m(!0),children:"Edit labels"})]})}p.LabelManager=ve,p.LabelPicker=$,p.LabelTree=P,p.Labels=ke,p.LabelsProvider=we,p.transformLabels=K,p.useLabelsContext=D,p.useLabelsUpdateOnDestroy=Se,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.5.136",
+  "version": "1.5.137",
   "files": [
     "dist"
   ],
@@ -75,5 +75,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "78e9a5da425502bb096e324dfc2875f983d47f57"
+  "gitHead": "c1950f9f3706d04527464b227da85c4fa6f1a450"
 }