@blocklet/labels 1.5.147 → 1.5.149

package/dist/index.es.js

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

package/dist/index.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.5.147",
+  "version": "1.5.149",
   "files": [
     "dist"
   ],
@@ -28,6 +28,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@blocklet/translation-input": "1.5.149",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -75,5 +76,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "66b3d76d483e0887d338af824d94a0c2ec84018e"
+  "gitHead": "9b13303126c6633a7c668c524dd82f79f4704401"
 }

package/dist/components/label/translation-input.d.ts

@@ -1,10 +0,0 @@
-import type { TextFieldProps } from '@mui/material';
-import type { Translation } from './types';
-interface Props {
-    I18NProps: {
-        translation: Translation;
-        onChange: (translation: Translation) => void;
-    };
-}
-export default function TranslationInput({ I18NProps, ...rest }: TextFieldProps & Props): import("react/jsx-runtime").JSX.Element;
-export {};