@blocklet/labels 1.5.99 → 1.5.100

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

@@ -7,6 +7,7 @@ interface LabelsProviderProps {
 interface LabelsContextValue {
     labels: Label[];
     localizedLabels: Label[];
+    flattenedLabels: Label[];
     loading: boolean;
     updateLabels: () => void;
     getLabelsById: (ids: string[]) => Label[];

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

@@ -6,6 +6,7 @@ interface LabelsProps {
     editable?: boolean;
     onChange?: (labels: Label[]) => void;
     sx?: SxProps;
+    renderLabel?: (label: Label) => JSX.Element;
 }
-export default function Labels({ labels, editable, onChange, sx }: LabelsProps): JSX.Element | null;
+export default function Labels({ labels, editable, onChange, sx, renderLabel }: LabelsProps): JSX.Element | null;
 export {};

package/dist/index.es.js

@@ -1,15 +1,15 @@
 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 R from "@mui/icons-material/ExpandMore";
-import h from "@mui/material/Box";
+import p from "@mui/material/Box";
 import { styled as J } from "@mui/material/styles";
 import { Tree as X } from "react-arborist";
 import { Icon as ee } from "@iconify/react";
-import { jsx as n, jsxs as v, Fragment as O } from "react/jsx-runtime";
+import { jsx as n, jsxs as C, Fragment as P } from "react/jsx-runtime";
 import te from "lodash/omit";
 import ne, { components as _ } from "react-select";
 import re from "@mui/material/Typography";
 import A from "@mui/material/Button";
-import B from "@mui/material/IconButton";
+import E from "@mui/material/IconButton";
 import oe from "@mui/icons-material/DeleteOutlineOutlined";
 import le from "@mui/icons-material/EditOutlined";
 import ie from "@mui/icons-material/Add";
@@ -17,7 +17,7 @@ import j from "@mui/material/TextField";
 import $ from "@mui/material/ClickAwayListener";
 import { GithubPicker as ae } from "react-color";
 import K from "@arcblock/ux/lib/Dialog";
-import { TextField as V, InputAdornment as se, IconButton as ce, Box as P } from "@mui/material";
+import { TextField as V, InputAdornment as se, IconButton as ce, Box as B } from "@mui/material";
 import de from "@mui/icons-material/Translate";
 import ue from "@mui/material/Popover";
 import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
@@ -48,24 +48,24 @@ function ye({
   selectable: e = !1,
   selected: t = [],
   onSelect: a,
-  renderItem: l,
-  children: o
+  renderItem: o,
+  children: l
 }) {
-  const r = (u) => t.indexOf(u) !== -1, i = (u) => {
-    Array.from(new Set(t).add(u)), a == null || a(u);
+  const r = (h) => t.indexOf(h) !== -1, i = (h) => {
+    Array.from(new Set(t).add(h)), a == null || a(h);
   }, s = T(
     () => ({
       selectable: e,
       selected: t,
       isSelected: r,
       select: i,
-      renderItem: l
+      renderItem: o
     }),
     [t]
   );
   return /* @__PURE__ */ n(Y.Provider, {
     value: s,
-    children: o
+    children: l
   });
 }
 const Ce = (e) => {
@@ -92,13 +92,13 @@ function be({
   dragHandle: a
 }) {
   const {
-    selectable: l,
-    select: o,
+    selectable: o,
+    select: l,
     isSelected: r,
     renderItem: i
   } = H(Y), {
     data: s
-  } = e, u = s.icon ? /* @__PURE__ */ n(ee, {
+  } = e, h = s.icon ? /* @__PURE__ */ n(ee, {
     icon: s.icon,
     style: {
       fontSize: 18
@@ -108,44 +108,44 @@ function be({
       fontSize: 18,
       color: s.color || "#ddd"
     }
-  }), m = (d) => {
+  }), g = (d) => {
     d.stopPropagation(), e.isInternal && e.toggle();
-  }, g = (d) => {
-    d.stopPropagation(), l && o(e.id);
-  }, x = /* @__PURE__ */ v(O, {
-    children: [/* @__PURE__ */ v(h, {
+  }, m = (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(h, {
+      children: [/* @__PURE__ */ n(p, {
         sx: {
           display: "flex",
           cursor: "pointer"
         },
-        onClick: m,
+        onClick: g,
         children: /* @__PURE__ */ n(ve, {
           node: e
         })
-      }), /* @__PURE__ */ n(h, {
+      }), /* @__PURE__ */ n(p, {
         sx: {
           display: "flex",
           alignItems: "center",
           width: 22,
           height: 22
         },
-        children: u
-      }), /* @__PURE__ */ n(h, {
+        children: h
+      }), /* @__PURE__ */ n(p, {
         component: "span",
         sx: {
           color: "grey.700"
         },
         children: e.data.name
       })]
-    }), l && r(e.id) && /* @__PURE__ */ n(xe, {})]
+    }), o && r(e.id) && /* @__PURE__ */ n(xe, {})]
   });
-  return /* @__PURE__ */ v(h, {
+  return /* @__PURE__ */ C(p, {
     className: "label-tree-item",
     style: t,
     sx: {
@@ -154,11 +154,11 @@ function be({
       justifyContent: "space-between"
     },
     ref: a,
-    onClick: g,
+    onClick: m,
     children: [!i && x, !!i && i(x, e.data)]
   });
 }
-const Se = J(h)`
+const Se = J(p)`
   > div,
   > div > div,
   > div > div > div {
@@ -176,32 +176,32 @@ function F({
   data: e,
   selectable: t,
   selected: a = [],
-  onSelect: l,
-  rowHeight: o = 28,
+  onSelect: o,
+  rowHeight: l = 28,
   renderItem: r,
   sx: i,
   ...s
 }) {
-  const u = D(), m = [...Array.isArray(i) ? i : [i]], [g, x] = z(0), d = k(() => {
-    var y, b;
-    x((((b = (y = u.current) == null ? void 0 : y.visibleNodes) == null ? void 0 : b.length) || 0) * o);
-  }, [o]);
+  const h = D(), g = [...Array.isArray(i) ? i : [i]], [m, 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);
+  }, [l]);
   return W(() => {
     d();
   }, [e, d]), /* @__PURE__ */ n(ye, {
     selectable: t,
     selected: a,
-    onSelect: l,
+    onSelect: o,
     renderItem: r,
     children: /* @__PURE__ */ n(Se, {
       ...s,
-      sx: m,
+      sx: g,
       children: /* @__PURE__ */ n(X, {
         data: e,
-        rowHeight: o,
-        height: g,
+        rowHeight: l,
+        height: m,
         indent: 32,
-        ref: u,
+        ref: h,
         onToggle: () => {
           setTimeout(d);
         },
@@ -210,9 +210,9 @@ function F({
     })
   });
 }
-const L = (e) => e.reduce((t, a) => {
-  var l;
-  return t.push(a), (l = a.children) != null && l.length && t.push(...L(a.children)), t;
+const O = (e) => e.reduce((t, a) => {
+  var o;
+  return t.push(a), (o = a.children) != null && o.length && t.push(...O(a.children)), t;
 }, []), Z = (e) => e.map((t) => {
   var a;
   return (a = t.children) != null && a.length && (t.children = Z(t.children)), t;
@@ -223,35 +223,35 @@ const L = (e) => e.reduce((t, a) => {
     return t;
   }
 }, Ie = (e) => {
-  const t = e.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}), a = e.map(({ parentId: o, translation: r, ...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), {}), a = e.map(({ parentId: l, translation: r, ...i }) => ({
     ...i,
     translation: we(r),
     children: []
-  })), l = a.reduce((o, r) => ({ ...o, [r.id]: r }), {});
-  return a.forEach((o) => {
-    const r = t[o.id];
-    r.parent && l[r.parent] && (o.parent = l[r.parent]), r.children && (o.children = r.children.map((i) => l[i]));
-  }), a.filter((o) => !o.parent);
+  })), o = a.reduce((l, r) => ({ ...l, [r.id]: r }), {});
+  return a.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);
 }, ze = (e) => {
   const {
     options: t,
     getValue: a,
-    selectProps: l,
-    selectOption: o
+    selectProps: o,
+    selectOption: l
   } = e, r = a(), i = (s) => {
-    const u = t.find((m) => m.data.id === s);
-    u && o(u);
+    const h = t.find((g) => g.data.id === s);
+    h && l(h);
   };
-  return /* @__PURE__ */ v(O, {
+  return /* @__PURE__ */ C(P, {
     children: [/* @__PURE__ */ n(_.MenuList, {
       ...te(e, ["addon"]),
-      children: /* @__PURE__ */ n(h, {
+      children: /* @__PURE__ */ n(p, {
         sx: {
           px: 2,
           py: 1
         },
         children: /* @__PURE__ */ n(F, {
-          data: l.data,
+          data: o.data,
           selectable: !0,
           onSelect: i,
           selected: r.map((s) => s.data.id)
@@ -263,17 +263,17 @@ const L = (e) => e.reduce((t, a) => {
   children: e,
   ...t
 }) => {
-  const [a, l] = e, o = Array.isArray(a) ? a.length : 0;
-  return /* @__PURE__ */ v(_.ValueContainer, {
+  const [a, o] = e, l = Array.isArray(a) ? a.length : 0;
+  return /* @__PURE__ */ C(_.ValueContainer, {
     ...t,
-    children: [/* @__PURE__ */ n(h, {
+    children: [/* @__PURE__ */ n(p, {
       component: "span",
       sx: {
         fontSize: 13,
         fontWeight: "bold"
       },
-      children: o ? "Labels" : "Filter by labels"
-    }), !!o && /* @__PURE__ */ n(h, {
+      children: l ? "Labels" : "Filter by labels"
+    }), !!l && /* @__PURE__ */ n(p, {
       sx: {
         display: "inline-flex",
         justifyContent: "center",
@@ -285,8 +285,8 @@ const L = (e) => e.reduce((t, a) => {
         fontSize: 12,
         bgcolor: "grey.200"
       },
-      children: o
-    }), l]
+      children: l
+    }), o]
   });
 }, ke = {
   control: (e) => ({
@@ -310,44 +310,44 @@ function Ae({
   data: e,
   value: t = [],
   editable: a = !1,
-  addon: l,
-  onChange: o,
+  addon: o,
+  onChange: l,
   compact: r,
   isMulti: i = !0,
   maxHeight: s = 264,
-  ...u
+  ...h
 }) {
-  const m = D(null), g = T(() => L(e).map((p) => ({
-    data: p,
-    label: p.name,
-    value: p.id
-  })), [e]), x = g.reduce((p, I) => ({
-    ...p,
+  const g = D(null), m = T(() => O(e).map((f) => ({
+    data: f,
+    label: f.name,
+    value: f.id
+  })), [e]), x = m.reduce((f, I) => ({
+    ...f,
     [I.data.id]: I
-  }), {}), d = Array.isArray(t) ? t : [t], f = d.map((p) => x[p]), y = D({
-    prev: d.map((p) => {
+  }), {}), d = Array.isArray(t) ? t : [t], b = d.map((f) => x[f]), u = D({
+    prev: d.map((f) => {
       var I;
-      return ((I = x[p]) == null ? void 0 : I.data) || "";
+      return ((I = x[f]) == null ? void 0 : I.data) || "";
     })
-  }), b = (p, I) => {
-    !i || !Array.isArray(p) ? o(p ? [p.data] : []) : y.current.current = p.map((c) => c.data), ["clear", "remove-value"].includes(I.action) && m.current && setTimeout(() => {
+  }), v = (f, I) => {
+    !i || !Array.isArray(f) ? l(f ? [f.data] : []) : u.current.current = f.map((c) => c.data), ["clear", "remove-value"].includes(I.action) && g.current && setTimeout(() => {
       var c;
-      return (c = m == null ? void 0 : m.current) == null ? void 0 : c.blur();
+      return (c = g == null ? void 0 : g.current) == null ? void 0 : c.blur();
     }, 1);
   }, M = () => {
-    y.current.current && JSON.stringify(y.current.prev.map((I) => I.id)) !== JSON.stringify(y.current.current.map((I) => I.id)) && (o(y.current.current), y.current.prev = y.current.current);
+    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);
   };
-  return /* @__PURE__ */ n(h, {
-    ...u,
+  return /* @__PURE__ */ n(p, {
+    ...h,
     children: /* @__PURE__ */ n(ne, {
-      ref: m,
-      defaultValue: f,
-      options: g,
-      onChange: b,
+      ref: g,
+      defaultValue: b,
+      options: m,
+      onChange: v,
       components: {
-        MenuList: (p) => /* @__PURE__ */ n(ze, {
-          ...p,
-          addon: l
+        MenuList: (f) => /* @__PURE__ */ n(ze, {
+          ...f,
+          addon: o
         }),
         ...r && {
           ValueContainer: Te
@@ -356,23 +356,23 @@ function Ae({
       placeholder: "Select labels",
       styles: {
         ...r && ke,
-        menu: (p) => ({
-          ...p,
+        menu: (f) => ({
+          ...f,
           ...a && {
             paddingBottom: "36px"
           },
           zIndex: 99
         }),
-        menuList: (p) => ({
-          ...p,
+        menuList: (f) => ({
+          ...f,
           overflowY: "auto",
           maxHeight: `${s}px`
         })
       },
-      theme: (p) => ({
-        ...p,
+      theme: (f) => ({
+        ...f,
         colors: {
-          ...p.colors,
+          ...f.colors,
           primary25: "#ddd",
           primary50: "#ddd",
           primary: "#ddd"
@@ -387,29 +387,29 @@ function Ae({
     })
   });
 }
-var E = function() {
-  return E = Object.assign || function(t) {
-    for (var a, l = 1, o = arguments.length; l < o; l++) {
-      a = arguments[l];
+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]);
     }
     return t;
-  }, E.apply(this, arguments);
+  }, L.apply(this, arguments);
 };
 function Ne(e, t) {
   var a = typeof Symbol == "function" && e[Symbol.iterator];
   if (!a)
     return e;
-  var l = a.call(e), o, r = [], i;
+  var o = a.call(e), l, r = [], i;
   try {
-    for (; (t === void 0 || t-- > 0) && !(o = l.next()).done; )
-      r.push(o.value);
+    for (; (t === void 0 || t-- > 0) && !(l = o.next()).done; )
+      r.push(l.value);
   } catch (s) {
     i = { error: s };
   } finally {
     try {
-      o && !o.done && (a = l.return) && a.call(l);
+      l && !l.done && (a = o.return) && a.call(o);
     } finally {
       if (i)
         throw i.error;
@@ -420,13 +420,13 @@ function Ne(e, t) {
 var Oe = function(e) {
   return typeof e == "function";
 }, Pe = function(e) {
-  var t = Ne(z(e), 2), a = t[0], l = t[1], o = k(function(r) {
-    l(function(i) {
+  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 ? E(E({}, i), s) : i;
+      return s ? L(L({}, i), s) : i;
     });
   }, []);
-  return [a, o];
+  return [a, l];
 };
 const Be = Pe;
 function Ee({
@@ -436,18 +436,18 @@ function Ee({
   const {
     languages: a
   } = Q(), {
-    translation: l,
-    onChange: o
-  } = e, [r, i] = z(null), s = (g) => {
-    const x = g.currentTarget.closest(".MuiInputBase-root");
+    translation: o,
+    onChange: l
+  } = e, [r, i] = z(null), s = (m) => {
+    const x = m.currentTarget.closest(".MuiInputBase-root");
     x && i(x);
-  }, u = () => {
+  }, h = () => {
     i(null);
-  }, m = a.filter((g) => g.code !== "en");
+  }, g = a.filter((m) => m.code !== "en");
   return /* @__PURE__ */ n(V, {
     ...t,
     InputProps: {
-      endAdornment: /* @__PURE__ */ v(se, {
+      endAdornment: /* @__PURE__ */ C(se, {
         position: "end",
         children: [/* @__PURE__ */ n(ce, {
           edge: "end",
@@ -456,7 +456,7 @@ function Ee({
         }), /* @__PURE__ */ n(ue, {
           open: !!r,
           anchorEl: r,
-          onClose: u,
+          onClose: h,
           transformOrigin: {
             vertical: "top",
             horizontal: "right"
@@ -477,14 +477,14 @@ function Ee({
           sx: {
             mt: 2
           },
-          children: /* @__PURE__ */ n(P, {
+          children: /* @__PURE__ */ n(B, {
             sx: {
               p: 2
             },
-            children: m.map(({
-              code: g,
+            children: g.map(({
+              code: m,
               name: x
-            }) => /* @__PURE__ */ v(P, {
+            }) => /* @__PURE__ */ C(B, {
               sx: {
                 display: "flex",
                 alignItems: "center",
@@ -493,28 +493,28 @@ function Ee({
                   mt: 1
                 }
               },
-              children: [/* @__PURE__ */ n(P, {
+              children: [/* @__PURE__ */ n(B, {
                 sx: {
                   flex: "0 0 120px"
                 },
                 children: x
-              }), /* @__PURE__ */ n(P, {
+              }), /* @__PURE__ */ n(B, {
                 sx: {
                   flex: 1
                 },
                 children: /* @__PURE__ */ n(V, {
-                  value: l[g] || "",
+                  value: o[m] || "",
                   size: "small",
                   sx: {
                     width: 1
                   },
-                  onChange: (d) => o({
-                    ...l,
-                    [g]: d.target.value
+                  onChange: (d) => l({
+                    ...o,
+                    [m]: d.target.value
                   })
                 })
               })]
-            }, g))
+            }, m))
           })
         })]
       })
@@ -525,15 +525,15 @@ function Le({
   open: e,
   initialLabel: t,
   onSubmit: a,
-  onClose: l,
-  ...o
+  onClose: o,
+  ...l
 }) {
   const r = !(t != null && t.id), [i, s] = 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) || {}
-  }), u = (b) => /^#([0-9A-F]{3}){1,2}$/i.test(b), m = T(() => r ? i.name && i.color && i.slug && u(i.color) : i.name && i.color && u(i.color), [i, r]), [g, x] = z(!1), d = () => {
+  }), 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]), [m, x] = z(!1), d = () => {
     a({
       ...t,
       name: i.name,
@@ -541,13 +541,13 @@ function Le({
       id: i.slug,
       translation: i.translation
     });
-  }, f = (b) => {
+  }, b = (v) => {
     s({
-      color: b.hex
+      color: v.hex
     }), setTimeout(() => x(!1));
-  }, y = (b) => {
+  }, u = (v) => {
     s({
-      color: b.target.value
+      color: v.target.value
     });
   };
   return /* @__PURE__ */ n(K, {
@@ -555,25 +555,25 @@ function Le({
     showCloseButton: !0,
     maxWidth: "lg",
     title: r ? "Create label" : "Edit label",
-    actions: /* @__PURE__ */ v(O, {
+    actions: /* @__PURE__ */ C(P, {
       children: [/* @__PURE__ */ n(A, {
         color: "inherit",
         variant: "contained",
         size: "small",
-        onClick: l,
+        onClick: o,
         children: "Cancel"
       }), /* @__PURE__ */ n(A, {
         color: "primary",
         variant: "contained",
         size: "small",
         onClick: d,
-        disabled: !m,
+        disabled: !g,
         children: r ? "Create" : "Save Changes"
       })]
     }),
-    onClose: l,
-    ...o,
-    children: /* @__PURE__ */ v(h, {
+    onClose: o,
+    ...l,
+    children: /* @__PURE__ */ C(p, {
       width: 600,
       minHeight: 280,
       children: [/* @__PURE__ */ n(Ee, {
@@ -582,13 +582,13 @@ function Le({
         placeholder: "New label",
         size: "small",
         fullWidth: !0,
-        onChange: (b) => s({
-          name: b.target.value
+        onChange: (v) => s({
+          name: v.target.value
         }),
         I18NProps: {
           translation: i.translation,
-          onChange: (b) => s({
-            translation: b
+          onChange: (v) => s({
+            translation: v
           })
         }
       }), /* @__PURE__ */ n(j, {
@@ -597,8 +597,8 @@ function Le({
         size: "small",
         fullWidth: !0,
         disabled: !r,
-        onChange: (b) => s({
-          slug: b.target.value
+        onChange: (v) => s({
+          slug: v.target.value
         }),
         sx: {
           mt: 2
@@ -614,18 +614,18 @@ function Le({
         }
       }), /* @__PURE__ */ n($, {
         onClickAway: () => x(!1),
-        children: /* @__PURE__ */ v(h, {
+        children: /* @__PURE__ */ C(p, {
           sx: {
             position: "relative",
             mt: 2
           },
-          children: [/* @__PURE__ */ v(h, {
+          children: [/* @__PURE__ */ C(p, {
             sx: {
               display: "flex",
               alignItems: "center",
               gap: 1
             },
-            children: [/* @__PURE__ */ n(h, {
+            children: [/* @__PURE__ */ n(p, {
               sx: {
                 width: 30,
                 height: 30,
@@ -637,7 +637,7 @@ function Le({
               label: "",
               value: i.color,
               size: "small",
-              onChange: y,
+              onChange: u,
               inputProps: {
                 maxLength: 7
               },
@@ -648,7 +648,7 @@ function Le({
                 }
               }
             })]
-          }), g && /* @__PURE__ */ n(h, {
+          }), m && /* @__PURE__ */ n(p, {
             sx: {
               position: "absolute",
               top: 48,
@@ -656,7 +656,7 @@ function Le({
             },
             children: /* @__PURE__ */ n(ae, {
               color: i.color,
-              onChangeComplete: f
+              onChangeComplete: b
             })
           })]
         })
@@ -668,20 +668,20 @@ function Me({
   open: e,
   label: t,
   onSubmit: a,
-  onClose: l,
-  ...o
+  onClose: o,
+  ...l
 }) {
   return /* @__PURE__ */ n(K, {
     open: e,
     showCloseButton: !0,
     maxWidth: "md",
     title: "Delete",
-    actions: /* @__PURE__ */ v(O, {
+    actions: /* @__PURE__ */ C(P, {
       children: [/* @__PURE__ */ n(A, {
         color: "inherit",
         variant: "contained",
         size: "small",
-        onClick: l,
+        onClick: o,
         children: "Cancel"
       }), /* @__PURE__ */ n(A, {
         color: "primary",
@@ -691,9 +691,9 @@ function Me({
         children: "Delete"
       })]
     }),
-    onClose: l,
-    ...o,
-    children: /* @__PURE__ */ v(h, {
+    onClose: o,
+    ...l,
+    children: /* @__PURE__ */ C(p, {
       width: 600,
       minHeight: 280,
       children: [/* @__PURE__ */ n(he, {
@@ -733,7 +733,7 @@ function De({
   locale: e,
   value: t
 }) {
-  return /* @__PURE__ */ v(h, {
+  return /* @__PURE__ */ C(p, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -745,14 +745,14 @@ function De({
       borderRadius: 2
     },
     className: "label-translation-tag",
-    children: [/* @__PURE__ */ n(h, {
+    children: [/* @__PURE__ */ n(p, {
       sx: {
         pr: 0.5,
         borderRight: 1,
         borderColor: "grey.400"
       },
       children: e
-    }), /* @__PURE__ */ n(h, {
+    }), /* @__PURE__ */ n(p, {
       sx: {
         pl: 0.5
       },
@@ -765,63 +765,63 @@ function ut({
   api: t,
   ...a
 }) {
-  const [l, o] = z(null), [r, i] = z(null), [s, u] = z(Z(e)), m = T(() => L(s), [s]), g = T(() => {
-    const c = (C, w) => C.map((S) => (w && (S.parent = w), S.children && (S.children = c(S.children, S)), S));
+  const [o, l] = z(null), [r, i] = z(null), [s, h] = z(Z(e)), g = T(() => O(s), [s]), m = 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 C, w;
-    c.parent ? (c.parent.children = (w = (C = c.parent) == null ? void 0 : C.children) == null ? void 0 : w.map((S) => S.id === c.id ? {
+    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)) : u(s.map((S) => S.id === c.id ? {
+    } : 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), u([...s])) : u([...s, c]);
-  }, f = (c) => {
-    var C;
-    c.parent ? c.parent.children = (C = c.parent.children) == null ? void 0 : C.filter((w) => w.id !== c.id) : u(s.filter((w) => w.id !== c.id));
-  }, y = (c) => {
-    if (l)
+    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) => {
+    if (o)
       return;
-    o({
+    l({
       id: "",
       name: "New label",
       parent: c,
       color: "#dddddd"
     });
-  }, b = (c) => {
-    l || o(c);
+  }, v = (c) => {
+    o || l(c);
   }, M = async (c) => {
-    if (!l)
+    if (!o)
       return;
     const {
-      parent: C,
+      parent: y,
       children: w,
       translation: S,
       ...N
     } = c;
-    l.id ? (await t.updateLabel({
+    o.id ? (await t.updateLabel({
       ...N,
       translation: JSON.stringify(S),
-      parentId: C == null ? void 0 : C.id
+      parentId: y == null ? void 0 : y.id
     }), x(c)) : (await t.createLabel({
       ...N,
       translation: JSON.stringify(S),
-      parentId: C == null ? void 0 : C.id
-    }), d(c)), o(null);
-  }, p = async () => {
-    !r || (await t.deleteLabel(r.id), f(r), i(null));
-  }, I = (c, C) => /* @__PURE__ */ v(O, {
-    children: [/* @__PURE__ */ v(h, {
+      parentId: y == null ? void 0 : y.id
+    }), d(c)), l(null);
+  }, f = 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(h, {
+      children: [/* @__PURE__ */ n(p, {
         children: c
-      }), C.translation && /* @__PURE__ */ n(h, {
+      }), y.translation && /* @__PURE__ */ n(p, {
         sx: {
           display: "flex",
           alignItems: "center",
@@ -829,53 +829,53 @@ function ut({
           ml: 2
         },
         className: "label-translation",
-        children: Object.keys(C.translation).map((w) => {
+        children: Object.keys(y.translation).map((w) => {
           var N;
-          const S = (N = C.translation) == null ? void 0 : N[w];
+          const S = (N = y.translation) == null ? void 0 : N[w];
           return S ? /* @__PURE__ */ n(De, {
             locale: w,
             value: S
           }, w) : null;
         })
       })]
-    }), /* @__PURE__ */ v(h, {
+    }), /* @__PURE__ */ C(p, {
       sx: {
         display: "flex",
         gap: 1,
         flex: "0 0 auto"
       },
       className: "label-action",
-      children: [/* @__PURE__ */ n(B, {
+      children: [/* @__PURE__ */ n(E, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => y(C),
+        onClick: () => u(y),
         children: /* @__PURE__ */ n(ie, {
           sx: {
             fontSize: 20
           }
         })
-      }), /* @__PURE__ */ n(B, {
+      }), /* @__PURE__ */ n(E, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => b(C),
+        onClick: () => v(y),
         children: /* @__PURE__ */ n(le, {
           sx: {
             fontSize: 18
           }
         })
-      }), /* @__PURE__ */ n(B, {
+      }), /* @__PURE__ */ n(E, {
         color: "inherit",
         size: "small",
         sx: {
           color: "grey.500"
         },
-        onClick: () => i(C),
+        onClick: () => i(y),
         children: /* @__PURE__ */ n(oe, {
           sx: {
             fontSize: 20
@@ -884,10 +884,10 @@ function ut({
       })]
     })]
   });
-  return /* @__PURE__ */ v(h, {
+  return /* @__PURE__ */ C(p, {
     ...a,
     className: "label-container",
-    children: [/* @__PURE__ */ v(h, {
+    children: [/* @__PURE__ */ C(p, {
       sx: {
         display: "flex",
         alignItems: "center",
@@ -904,10 +904,10 @@ function ut({
         sx: {
           textTransform: "none"
         },
-        onClick: () => y(),
+        onClick: () => u(),
         children: "New label"
       })]
-    }), /* @__PURE__ */ v(h, {
+    }), /* @__PURE__ */ C(p, {
       sx: {
         mt: 2,
         border: 1,
@@ -915,7 +915,7 @@ function ut({
         borderRadius: 1,
         overflow: "hidden"
       },
-      children: [/* @__PURE__ */ v(h, {
+      children: [/* @__PURE__ */ C(p, {
         sx: {
           p: 2,
           fontSize: 14,
@@ -923,28 +923,28 @@ function ut({
           bgcolor: "grey.200"
         },
         className: "label-header",
-        children: [m.length, " labels"]
-      }), /* @__PURE__ */ n(h, {
+        children: [g.length, " labels"]
+      }), /* @__PURE__ */ n(p, {
         sx: {
           pt: 0.5
         },
         children: /* @__PURE__ */ n(je, {
-          data: g,
+          data: m,
           selected: [],
           renderItem: I,
           rowHeight: 64
         })
       })]
     }), /* @__PURE__ */ n(Le, {
-      open: !!l,
-      onClose: () => o(null),
-      initialLabel: l,
+      open: !!o,
+      onClose: () => l(null),
+      initialLabel: o,
       onSubmit: M
-    }, l == null ? void 0 : l.id), /* @__PURE__ */ n(Me, {
+    }, o == null ? void 0 : o.id), /* @__PURE__ */ n(Me, {
       open: !!r,
       onClose: () => i(null),
       label: r,
-      onSubmit: p
+      onSubmit: f
     }, r == null ? void 0 : r.id)]
   });
 }
@@ -962,7 +962,7 @@ function pt({
 }) {
   const {
     locale: a
-  } = Q(), [l, o] = z({
+  } = Q(), [o, l] = z({
     loading: !0,
     labels: [],
     updateCounter: 1
@@ -970,52 +970,53 @@ function pt({
   W(() => {
     (async () => {
       try {
-        o((y) => ({
-          ...y,
+        l((u) => ({
+          ...u,
           loading: !0
         }));
-        const f = await e();
-        o((y) => ({
-          ...y,
+        const b = await e();
+        l((u) => ({
+          ...u,
           loading: !1,
-          labels: Ie(f)
+          labels: Ie(b)
         }));
-      } catch (f) {
-        console.error(f), o((y) => ({
-          ...y,
+      } catch (b) {
+        console.error(b), l((u) => ({
+          ...u,
           loading: !1,
           labels: []
         }));
       }
     })();
-  }, [l.updateCounter]);
+  }, [o.updateCounter]);
   const r = T(() => {
-    var f;
-    return (f = l.labels) != null && f.length ? L(l.labels).reduce((y, b) => ({
-      ...y,
-      [b.id]: b
+    var b;
+    return (b = o.labels) != null && b.length ? O(o.labels).reduce((u, v) => ({
+      ...u,
+      [v.id]: v
     }), {}) : {};
-  }, [l.labels]), i = k((d) => {
-    var f;
+  }, [o.labels]), i = k((d) => {
+    var b;
     return {
       ...d,
-      name: ((f = d.translation) == null ? void 0 : f[a]) || d.name
+      name: ((b = d.translation) == null ? void 0 : b[a]) || d.name
     };
-  }, [a]), s = k((d) => d.filter(Boolean).map((f) => r[f]).map(i), [r, i]), u = k((d) => (d == null ? void 0 : d.split(",")) || [], []), m = k((d = []) => {
+  }, [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(",");
-  }, []), g = T(() => l.labels.map(i), [l.labels, i]), x = T(() => ({
-    loading: l.loading,
-    labels: l.labels || [],
-    updateLabels: () => o((d) => ({
+  }, []), m = T(() => o.labels.map(i), [o.labels, i]), x = T(() => ({
+    loading: o.loading,
+    labels: o.labels || [],
+    updateLabels: () => l((d) => ({
       ...d,
-      updateCounter: ++l.updateCounter
+      updateCounter: ++o.updateCounter
     })),
     getLabelsById: s,
-    parseLabelIds: u,
-    stringifyLabelIds: m,
-    localizedLabels: g
-  }), [l, s, u, m, g]);
+    parseLabelIds: h,
+    stringifyLabelIds: g,
+    localizedLabels: m,
+    flattenedLabels: O(m || [])
+  }), [o, s, h, g, m]);
   return /* @__PURE__ */ n(G.Provider, {
     value: x,
     children: t
@@ -1025,47 +1026,48 @@ function mt({
   labels: e,
   editable: t,
   onChange: a,
-  sx: l
+  sx: o,
+  renderLabel: l
 }) {
-  const o = !(e != null && e.length), {
-    labels: r,
-    loading: i,
-    getLabelsById: s
-  } = U(), [u, m] = z(!1);
-  if (i || !t && o)
+  const r = !(e != null && e.length), {
+    labels: i,
+    loading: s,
+    getLabelsById: h
+  } = U(), [g, m] = z(!1);
+  if (s || !t && r)
     return null;
-  const g = (f) => {
-    a == null || a(f), setTimeout(() => {
+  const x = (u) => {
+    a == null || a(u), setTimeout(() => {
       m(!1);
     }, 300);
   };
-  if (u)
+  if (g)
     return /* @__PURE__ */ n($, {
-      onClickAway: () => u && m(!1),
+      onClickAway: () => g && m(!1),
       children: /* @__PURE__ */ n("div", {
         children: /* @__PURE__ */ n(Ae, {
-          data: r,
+          data: i,
           value: e || [],
-          onChange: g
+          onChange: x
         })
       })
     });
-  const x = s(e || []), d = [{
+  const d = h(e || []), b = [{
     display: "flex",
     gap: 1,
     alignItems: "center",
     flexWrap: "wrap"
-  }, ...Array.isArray(l) ? l : [l]];
-  return /* @__PURE__ */ v(h, {
-    sx: d,
-    children: [x.map((f) => f ? /* @__PURE__ */ n(fe, {
-      label: f.name,
+  }, ...Array.isArray(o) ? o : [o]];
+  return /* @__PURE__ */ C(p, {
+    sx: b,
+    children: [d.map((u) => u ? l ? l(u) : /* @__PURE__ */ n(fe, {
+      label: u.name,
       variant: "filled",
       size: "small",
       sx: {
         borderRadius: 1
       }
-    }, f.id) : null), t && !o && /* @__PURE__ */ n(B, {
+    }, u.id) : null), t && !r && /* @__PURE__ */ n(E, {
       color: "inherit",
       size: "small",
       onClick: () => m(!0),
@@ -1077,7 +1079,7 @@ function mt({
           fontSize: 20
         }
       })
-    }), t && o && /* @__PURE__ */ n(A, {
+    }), t && r && /* @__PURE__ */ n(A, {
       color: "inherit",
       variant: "outlined",
       startIcon: /* @__PURE__ */ n(me, {}),

package/dist/index.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.5.99",
+  "version": "1.5.100",
   "files": [
     "dist"
   ],
@@ -75,5 +75,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "cf432b7c3b28d229574bb1e4a6df131f1517b6bb"
+  "gitHead": "d065b10ea680de3e2ee1323eb87a62d0dae70bd4"
 }