@blocklet/labels 1.5.200 → 1.5.202

package/dist/index.umd.js

@@ -1,4 +1,90 @@
-(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)`
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(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("ahooks"), 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"), require("unstated-next"), require("performant-array-to-tree")) : 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", "ahooks", "@mui/material/TextField", "@mui/material/ClickAwayListener", "react-color", "@arcblock/ux/lib/Dialog", "@mui/material/Alert", "@mui/material", "@arcblock/ux/lib/Locale/context", "unstated-next", "performant-array-to-tree"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.BlockletLabels = {}, global.jsxRuntime, global.react, global.iconsMaterial, global.Box, global.styles, global.reactArborist, global.react$1, global.omit, global.Select, global.Typography, global.Button, global.IconButton, global.translationInput, global.ahooks, global.TextField, global.ClickAwayListener, global.reactColor, global.Dialog, global.Alert, global.material, global.context, global.unstatedNext, global.performantArrayToTree));
+})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, Typography, Button, IconButton, translationInput, ahooks, TextField, ClickAwayListener, reactColor, Dialog, Alert, material, context, unstatedNext, performantArrayToTree) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+  const materialSymbolsLabelRounded = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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" }) });
+  const materialSymbolsCheckSmall = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) });
+  const LabelTreeContext = react.createContext({});
+  function LabelTreeProvider({
+    selectable = false,
+    selected = [],
+    onSelect,
+    renderItem,
+    children
+  }) {
+    const isSelected = (id) => selected.indexOf(id) !== -1;
+    const select = (id) => {
+      Array.from(new Set(selected).add(id));
+      onSelect == null ? void 0 : onSelect(id);
+    };
+    const value = react.useMemo(
+      () => ({
+        selectable,
+        selected,
+        isSelected,
+        select,
+        renderItem
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [selected]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(LabelTreeContext.Provider, { value, children });
+  }
+  const isLeaf = (node) => {
+    var _a;
+    return node.isLeaf || !((_a = node.data.children) == null ? void 0 : _a.length);
+  };
+  function FolderArrow({ node }) {
+    if (isLeaf(node))
+      return /* @__PURE__ */ jsxRuntime.jsx("span", {});
+    return node.isOpen ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, { style: { fontSize: 20 } }) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExpandMore, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
+  }
+  function Node({ node, style, dragHandle }) {
+    const { selectable, select, isSelected, renderItem } = react.useContext(LabelTreeContext);
+    const { data } = node;
+    const icon = data.icon ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: data.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ jsxRuntime.jsx(materialSymbolsLabelRounded, { style: { fontSize: 18, color: data.color || "#ddd" } });
+    const handleToggle = (e) => {
+      e.stopPropagation();
+      if (node.isInternal) {
+        node.toggle();
+      }
+    };
+    const handleClick = (e) => {
+      e.stopPropagation();
+      if (selectable) {
+        select(node.id);
+      }
+    };
+    const children = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: handleToggle, children: /* @__PURE__ */ jsxRuntime.jsx(FolderArrow, { node }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.700" }, children: node.data.name })
+      ] }),
+      selectable && isSelected(node.id) && /* @__PURE__ */ jsxRuntime.jsx(materialSymbolsCheckSmall, {})
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Box,
+      {
+        className: "label-tree-item",
+        style,
+        sx: { display: "flex", alignItems: "center", justifyContent: "space-between" },
+        ref: dragHandle,
+        onClick: handleClick,
+        children: [
+          !renderItem && children,
+          !!renderItem && renderItem(children, node.data)
+        ]
+      }
+    );
+  }
+  const Root = styles.styled(Box)`
   > div,
   > div > div,
   > div > div > div {
@@ -11,7 +97,363 @@
   .label-tree-item {
     width: 100%;
   }
-`;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)`
+`;
+  function LabelTree({
+    data,
+    selectable,
+    selected = [],
+    onSelect,
+    rowHeight = 28,
+    renderItem,
+    sx,
+    ...rest
+  }) {
+    const tree = react.useRef();
+    const mergedSx = [...Array.isArray(sx) ? sx : [sx]];
+    const [height, setHeight] = react.useState(0);
+    const updateHeight = react.useCallback(() => {
+      var _a, _b;
+      setHeight((((_b = (_a = tree.current) == null ? void 0 : _a.visibleNodes) == null ? void 0 : _b.length) || 0) * rowHeight);
+    }, [rowHeight]);
+    react.useEffect(() => {
+      updateHeight();
+    }, [data, updateHeight]);
+    const handleToggle = () => {
+      setTimeout(updateHeight);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(LabelTreeProvider, { selectable, selected, onSelect, renderItem, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsxRuntime.jsx(reactArborist.Tree, { data, rowHeight, height, indent: 32, ref: tree, onToggle: handleToggle, children: Node }) }) });
+  }
+  const flatten = (data) => {
+    return data.reduce((acc, cur) => {
+      var _a;
+      acc.push(cur);
+      if ((_a = cur.children) == null ? void 0 : _a.length) {
+        acc.push(...flatten(cur.children));
+      }
+      return acc;
+    }, []);
+  };
+  const copyTree = (data) => {
+    return data.map((item) => {
+      var _a;
+      if ((_a = item.children) == null ? void 0 : _a.length) {
+        item.children = copyTree(item.children);
+      }
+      return item;
+    });
+  };
+  const safeParseJSON = (json, defaultValue = null) => {
+    try {
+      return JSON.parse(json);
+    } catch {
+      return defaultValue;
+    }
+  };
+  const transformLabels = (labelDtos) => {
+    const relations = labelDtos.reduce((acc, cur) => {
+      acc[cur.id] = acc[cur.id] || {};
+      if (cur.parentId) {
+        acc[cur.id].parent = cur.parentId;
+        acc[cur.parentId] = acc[cur.parentId] || {};
+        acc[cur.parentId].children = acc[cur.parentId].children || [];
+        acc[cur.parentId].children.push(cur.id);
+      }
+      return acc;
+    }, {});
+    const labels = labelDtos.map(({ parentId, translation, ...rest }) => ({
+      ...rest,
+      translation: safeParseJSON(translation),
+      children: []
+    }));
+    const labelsKeyById = labels.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+    labels.forEach((item) => {
+      const relation = relations[item.id];
+      if (relation.parent && labelsKeyById[relation.parent]) {
+        item.parent = labelsKeyById[relation.parent];
+      }
+      if (relation.children) {
+        item.children = relation.children.map((childId) => labelsKeyById[childId]);
+      }
+    });
+    return labels.filter((item) => !item.parent);
+  };
+  const LabelMenuList = (props) => {
+    const { options, getValue, selectProps, selectOption } = props;
+    const value = getValue();
+    const handleSelect = (id) => {
+      const option = options.find((item) => item.data.id === id);
+      if (option) {
+        selectOption(option);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...omit(props, ["addon"]), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        LabelTree,
+        {
+          data: selectProps.data,
+          selectable: true,
+          onSelect: handleSelect,
+          selected: value.map((item) => item.data.id)
+        }
+      ) }) }),
+      props.addon
+    ] });
+  };
+  const ValueContainer = ({ children, ...props }) => {
+    const [values, input] = children;
+    const count = Array.isArray(values) ? values.length : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Select.components.ValueContainer, { ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: count ? "Labels" : "Filter by labels" }),
+      !!count && /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          sx: {
+            display: "inline-flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: 22,
+            height: 22,
+            ml: 1,
+            borderRadius: "100%",
+            fontSize: 12,
+            bgcolor: "grey.200"
+          },
+          children: count
+        }
+      ),
+      input
+    ] });
+  };
+  const compactSelectStyles = {
+    control: (provided) => ({
+      ...provided,
+      minHeight: 31
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      display: "flex"
+    }),
+    dropdownIndicator: (provided) => ({
+      ...provided,
+      padding: "0 4px"
+    }),
+    clearIndicator: (provided) => ({
+      ...provided,
+      padding: "4px"
+    })
+  };
+  function LabelPicker({
+    data,
+    value = [],
+    editable = false,
+    addon,
+    onChange,
+    compact,
+    isMulti = true,
+    maxHeight = 264,
+    ...rest
+  }) {
+    const selectRef = react.useRef(null);
+    const options = react.useMemo(
+      () => flatten(data).map((item) => ({ data: item, label: item.name, value: item.id })),
+      [data]
+    );
+    const optionsKeyById = options.reduce(
+      (acc, cur) => ({ ...acc, [cur.data.id]: cur }),
+      {}
+    );
+    const valueArr = Array.isArray(value) ? value : [value];
+    const selectedOptions = valueArr.map((item) => optionsKeyById[item]);
+    const changes = react.useRef({
+      prev: valueArr.map((item) => {
+        var _a;
+        return ((_a = optionsKeyById[item]) == null ? void 0 : _a.data) || "";
+      })
+    });
+    const handleChange = (v, actionMeta) => {
+      if (!isMulti || !Array.isArray(v)) {
+        onChange(v ? [v.data] : []);
+      } else {
+        changes.current.current = v.map((item) => item.data);
+      }
+      if (["clear", "remove-value"].includes(actionMeta.action) && selectRef.current) {
+        setTimeout(() => {
+          var _a;
+          return (_a = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a.blur();
+        }, 1);
+      }
+    };
+    const handleMenuClose = () => {
+      if (changes.current.current) {
+        const changed = JSON.stringify(changes.current.prev.map((item) => item.id)) !== JSON.stringify(changes.current.current.map((item) => item.id));
+        if (changed) {
+          onChange(changes.current.current);
+          changes.current.prev = changes.current.current;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Select,
+      {
+        ref: selectRef,
+        defaultValue: selectedOptions,
+        options,
+        onChange: handleChange,
+        components: {
+          // @ts-ignore
+          MenuList: (props) => /* @__PURE__ */ jsxRuntime.jsx(LabelMenuList, { ...props, addon }),
+          // eslint-disable-line react/no-unstable-nested-components
+          ...compact && { ValueContainer }
+        },
+        placeholder: "Select labels",
+        styles: {
+          ...compact && compactSelectStyles,
+          menu: (css) => ({
+            ...css,
+            ...editable && { paddingBottom: "36px" },
+            zIndex: 99
+          }),
+          menuList: (css) => ({
+            ...css,
+            overflowY: "auto",
+            maxHeight: `${maxHeight}px`
+          })
+        },
+        theme: (_theme) => ({
+          ..._theme,
+          colors: {
+            ..._theme.colors,
+            primary25: "#ddd",
+            primary50: "#ddd",
+            primary: "#ddd"
+          }
+        }),
+        isSearchable: false,
+        isMulti,
+        closeMenuOnSelect: !isMulti,
+        onMenuClose: handleMenuClose,
+        isClearable: true,
+        data
+      }
+    ) });
+  }
+  function LabelFormDialog({ open, initialLabel, onSubmit, onClose, ...rest }) {
+    const isNew = !(initialLabel == null ? void 0 : initialLabel.id);
+    const [state, setState] = ahooks.useSetState({
+      name: (initialLabel == null ? void 0 : initialLabel.name) || "",
+      color: (initialLabel == null ? void 0 : initialLabel.color) || "#ddd",
+      slug: (initialLabel == null ? void 0 : initialLabel.id) || "",
+      translation: (initialLabel == null ? void 0 : initialLabel.translation) || {}
+    });
+    const isValidColor = (color) => /^#([0-9A-F]{3}){1,2}$/i.test(color);
+    const canSubmit = react.useMemo(() => {
+      if (isNew) {
+        return state.name && state.color && state.slug && isValidColor(state.color);
+      }
+      return state.name && state.color && isValidColor(state.color);
+    }, [state, isNew]);
+    const [colorPickerVisible, setColorPickerVisible] = react.useState(false);
+    const handleSubmit = () => {
+      onSubmit({ ...initialLabel, name: state.name, color: state.color, id: state.slug, translation: state.translation });
+    };
+    const handleColorChange = (color) => {
+      setState({ color: color.hex });
+      setTimeout(() => setColorPickerVisible(false));
+    };
+    const handleColorTextChange = (e) => {
+      setState({ color: e.target.value });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog,
+      {
+        open,
+        showCloseButton: true,
+        maxWidth: "lg",
+        title: isNew ? "Create label" : "Edit label",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: isNew ? "Create" : "Save Changes" })
+        ] }),
+        onClose,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { width: 600, minHeight: 320, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            translationInput.TranslationTextField,
+            {
+              label: "Name",
+              value: state.name,
+              placeholder: "New label",
+              size: "small",
+              fullWidth: true,
+              onChange: (e) => setState({ name: e.target.value }),
+              translationInputProps: {
+                value: state.translation,
+                onChange: (v) => setState({ translation: v })
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TextField,
+            {
+              label: "Slug",
+              value: state.slug,
+              size: "small",
+              fullWidth: true,
+              disabled: !isNew,
+              onChange: (e) => setState({ slug: e.target.value }),
+              sx: { mt: 2 }
+            }
+          ),
+          (initialLabel == null ? void 0 : initialLabel.parent) && /* @__PURE__ */ jsxRuntime.jsx(TextField, { label: "Parent", value: initialLabel.parent.name, size: "small", fullWidth: true, disabled: true, sx: { mt: 2 } }),
+          /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener, { onClickAway: () => setColorPickerVisible(false), children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { position: "relative", mt: 2 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Box,
+                {
+                  sx: { width: 30, height: 30, bgcolor: state.color, borderRadius: 1 },
+                  onClick: () => setColorPickerVisible(true)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TextField,
+                {
+                  label: "",
+                  value: state.color,
+                  size: "small",
+                  onChange: handleColorTextChange,
+                  inputProps: { maxLength: 7 },
+                  sx: { width: 100, ".MuiInputBase-root": { height: 32 } }
+                }
+              )
+            ] }),
+            colorPickerVisible && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactColor.GithubPicker, { color: state.color, onChangeComplete: handleColorChange }) })
+          ] }) })
+        ] })
+      }
+    );
+  }
+  function LabelDeleteDialog({ open, label, onSubmit, onClose, ...rest }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog,
+      {
+        open,
+        showCloseButton: true,
+        maxWidth: "md",
+        title: "Delete",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: onSubmit, children: "Delete" })
+        ] }),
+        onClose,
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { width: 600, minHeight: 280, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Alert, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(LabelTree, { data: [label] })
+        ] })
+      }
+    );
+  }
+  const StyledLabelTree = styles.styled(LabelTree)`
   .label-tree-item {
     &:before {
       content: '';
@@ -31,4 +473,460 @@
     box-sizing: border-box;
     padding: 0 16px;
   }
-`;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}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"})});
+`;
+  function LabelManager({ data, api, ...rest }) {
+    const [editingLabel, setEditingLabel] = react.useState(null);
+    const [deletingLabel, setDeletingLabel] = react.useState(null);
+    const [copy, setCopy] = react.useState(copyTree(data));
+    const flattened = react.useMemo(() => flatten(copy), [copy]);
+    const treeData = react.useMemo(() => {
+      const format = (nodes, parent) => {
+        return nodes.map((node) => {
+          if (parent) {
+            node.parent = parent;
+          }
+          if (node.children) {
+            node.children = format(node.children, node);
+          }
+          return node;
+        });
+      };
+      return format(copy);
+    }, [copy]);
+    const updateNode = (label) => {
+      var _a, _b;
+      if (!label.parent) {
+        setCopy(copy.map((item) => item.id === label.id ? { ...label } : item));
+      } else {
+        label.parent.children = (_b = (_a = label.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.map((item) => item.id === label.id ? { ...label } : item);
+        updateNode(label.parent);
+      }
+    };
+    const addNode = (label) => {
+      if (label.parent) {
+        label.parent.children = label.parent.children || [];
+        label.parent.children.push(label);
+        setCopy([...copy]);
+      } else {
+        setCopy([...copy, label]);
+      }
+    };
+    const deleteNode = (label) => {
+      var _a;
+      if (label.parent) {
+        label.parent.children = (_a = label.parent.children) == null ? void 0 : _a.filter((item) => item.id !== label.id);
+      } else {
+        setCopy(copy.filter((item) => item.id !== label.id));
+      }
+    };
+    const handleAdd = (parent) => {
+      if (editingLabel) {
+        return;
+      }
+      const newLabel = { id: "", name: "New label", parent, color: "#dddddd" };
+      setEditingLabel(newLabel);
+    };
+    const handleEdit = (label) => {
+      if (editingLabel) {
+        return;
+      }
+      setEditingLabel(label);
+    };
+    const handleSubmit = async (payload) => {
+      if (!editingLabel) {
+        return;
+      }
+      const { parent, children, translation, ...submitData } = payload;
+      if (!editingLabel.id) {
+        await api.createLabel({ ...submitData, translation: JSON.stringify(translation), parentId: parent == null ? void 0 : parent.id });
+        addNode(payload);
+      } else {
+        await api.updateLabel({ ...submitData, translation: JSON.stringify(translation), parentId: parent == null ? void 0 : parent.id });
+        updateNode(payload);
+      }
+      setEditingLabel(null);
+    };
+    const handleDelete = async () => {
+      if (!deletingLabel) {
+        return;
+      }
+      await api.deleteLabel(deletingLabel.id);
+      deleteNode(deletingLabel);
+      setDeletingLabel(null);
+    };
+    const renderItem = (children, label) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { children }),
+          label.translation && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(label.translation).map((key) => {
+            var _a;
+            const value = (_a = label.translation) == null ? void 0 : _a[key];
+            if (value) {
+              return /* @__PURE__ */ jsxRuntime.jsx(translationInput.TranslationTag, { locale: key, value }, key);
+            }
+            return null;
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleAdd(label), children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, { sx: { fontSize: 20 } }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleEdit(label), children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.EditOutlined, { sx: { fontSize: 18 } }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => setDeletingLabel(label), children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.DeleteOutlineOutlined, { sx: { fontSize: 20 } }) })
+        ] })
+      ] });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, className: "label-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { component: "h2", variant: "h6", children: "Manage labels" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            color: "primary",
+            variant: "contained",
+            size: "small",
+            sx: { textTransform: "none" },
+            onClick: () => handleAdd(),
+            children: "New label"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
+          flattened.length,
+          " labels"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { pt: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledLabelTree, { data: treeData, selected: [], renderItem, rowHeight: 64 }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LabelFormDialog,
+        {
+          open: !!editingLabel,
+          onClose: () => setEditingLabel(null),
+          initialLabel: editingLabel,
+          onSubmit: handleSubmit
+        },
+        editingLabel == null ? void 0 : editingLabel.id
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LabelDeleteDialog,
+        {
+          open: !!deletingLabel,
+          onClose: () => setDeletingLabel(null),
+          label: deletingLabel,
+          onSubmit: handleDelete
+        },
+        deletingLabel == null ? void 0 : deletingLabel.id
+      )
+    ] });
+  }
+  class TreeNode {
+    constructor({ data, parent, children }) {
+      __publicField(this, "data");
+      __publicField(this, "parent");
+      __publicField(this, "children");
+      this.data = data;
+      this.parent = parent;
+      this.children = children || [];
+    }
+    setParent(node) {
+      this.parent = node;
+    }
+    add(...nodes) {
+      this.children.push(...nodes);
+      nodes.forEach((node) => node.setParent(this));
+    }
+    isLeaf(node) {
+      var _a;
+      return !((_a = node.children) == null ? void 0 : _a.length);
+    }
+    getAllParents(includeSelf = true) {
+      const parents = [];
+      if (includeSelf) {
+        parents.unshift(this);
+      }
+      let { parent } = this;
+      while (parent) {
+        parents.unshift(parent);
+        parent = parent.parent;
+      }
+      return parents;
+    }
+    getAllSiblings() {
+      var _a;
+      const siblings = ((_a = this.parent) == null ? void 0 : _a.children.filter((node) => node !== this)) || [];
+      return siblings;
+    }
+    flatten(includeRoot) {
+      const nodes = [];
+      const traverse = (node) => {
+        nodes.push(node);
+        node.children.forEach(traverse);
+      };
+      traverse(this);
+      if (!includeRoot) {
+        nodes.shift();
+      }
+      return nodes;
+    }
+  }
+  class Label {
+    constructor(data) {
+      __publicField(this, "id");
+      __publicField(this, "name");
+      __publicField(this, "icon");
+      __publicField(this, "color");
+      __publicField(this, "translation");
+      this.id = data.id;
+      this.name = data.name;
+      this.icon = data.icon;
+      this.color = data.color;
+      this.translation = this._normalizeTranslation(data.translation);
+    }
+    _normalizeTranslation(translation) {
+      if (typeof translation === "object") {
+        return translation;
+      }
+      try {
+        return JSON.parse(translation);
+      } catch {
+        return {};
+      }
+    }
+    getName(locale) {
+      var _a;
+      if (!locale) {
+        return this.name;
+      }
+      return ((_a = this == null ? void 0 : this.translation) == null ? void 0 : _a[locale]) || (this == null ? void 0 : this.name);
+    }
+  }
+  class LabelTreeNode extends TreeNode {
+  }
+  const mapToTree = (items, parent) => {
+    return items.map((item) => {
+      const node = new LabelTreeNode({ data: new Label(item.data), parent });
+      const children = mapToTree(item.children || [], node);
+      node.add(...children);
+      return node;
+    });
+  };
+  const initLabelTree = (data) => {
+    const treeData = performantArrayToTree.arrayToTree(data);
+    const root = new LabelTreeNode({ data: {}, children: mapToTree(treeData) });
+    return root;
+  };
+  const createEmptyLabelTree = () => {
+    return new LabelTreeNode({ data: {}, children: [] });
+  };
+  const useLabels = ({ loading, data }) => {
+    const { locale } = context.useLocaleContext();
+    const state = ahooks.useReactive({
+      loading: true,
+      tree: createEmptyLabelTree(),
+      stats: []
+    });
+    react.useEffect(() => {
+      try {
+        if (data && !loading) {
+          const { labels, stats } = data;
+          const tree = initLabelTree(labels || []);
+          state.loading = false;
+          state.tree = tree;
+          state.stats = stats.sort((a, b) => b.count - a.count);
+        }
+      } catch (e) {
+        console.error(e);
+        state.loading = false;
+      }
+    }, [data, loading]);
+    const flattened = react.useMemo(() => state.tree.flatten(), [state.tree]);
+    const counts = react.useMemo(
+      () => state.stats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.count }), {}),
+      [state.stats]
+    );
+    const nodesKeyById = react.useMemo(() => {
+      return flattened.reduce((acc, cur) => ({ ...acc, [cur.data.id]: cur }), {});
+    }, [flattened]);
+    const popularLabels = react.useMemo(
+      () => state.stats.slice(0, 12).map((x) => nodesKeyById[x.id]),
+      [nodesKeyById, state.stats]
+    );
+    const getLabelsByIds = (ids) => {
+      return ids.map((id) => nodesKeyById[id]).filter(Boolean);
+    };
+    const getLabelName = (id) => {
+      var _a;
+      return (_a = nodesKeyById[id]) == null ? void 0 : _a.data.getName(locale);
+    };
+    const getRelatedLabels = (id) => {
+      const node = nodesKeyById[id];
+      if (!node) {
+        return [];
+      }
+      const siblings = node.getAllSiblings();
+      return siblings;
+    };
+    const getRecommended = (id) => {
+      const related = getRelatedLabels(id);
+      const set = /* @__PURE__ */ new Set([...related.map((x) => x.data.id), id]);
+      return [...related, ...popularLabels.filter((x) => !set.has(x.data.id))];
+    };
+    return { ...state, popularLabels, counts, getLabelsByIds, getLabelName, getRelatedLabels, getRecommended };
+  };
+  const LabelsContainer = unstatedNext.createContainer(useLabels);
+  const LabelsContext = react.createContext({});
+  const useLabelsContext = () => react.useContext(LabelsContext);
+  const useLabelsUpdateOnDestroy = () => {
+    const { updateLabels } = useLabelsContext();
+    react.useEffect(() => {
+      return () => {
+        updateLabels();
+      };
+    }, []);
+  };
+  function LabelsProvider({ fetchLabels, children }) {
+    const { locale } = context.useLocaleContext();
+    const [updateCounter, setUpdateCounter] = react.useState(1);
+    const { loading, data } = ahooks.useRequest(fetchLabels, {
+      refreshDeps: [updateCounter]
+    });
+    const labels = react.useMemo(() => transformLabels((data == null ? void 0 : data.labels) || []), [data]);
+    const labelsKeyById = react.useMemo(() => {
+      if (!(labels == null ? void 0 : labels.length)) {
+        return {};
+      }
+      const flattened = flatten(labels);
+      return flattened.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+    }, [labels]);
+    const localeTransformer = react.useCallback(
+      (label) => {
+        var _a;
+        return {
+          ...label,
+          name: ((_a = label.translation) == null ? void 0 : _a[locale]) || label.name
+        };
+      },
+      [locale]
+    );
+    const getLabelsById = react.useCallback(
+      (ids) => ids.filter(Boolean).map((item) => labelsKeyById[item]).map(localeTransformer),
+      [labelsKeyById, localeTransformer]
+    );
+    const getParents = react.useCallback((label) => {
+      let { parent } = label;
+      const parents = [];
+      while (parent) {
+        parents.unshift(parent);
+        parent = parent.parent;
+      }
+      return parents;
+    }, []);
+    const getFullLabelName = react.useCallback(
+      (label) => {
+        const parents = [...getParents(label), label].map(localeTransformer);
+        return parents.map((item) => item.name).join(" / ");
+      },
+      [localeTransformer, getParents]
+    );
+    const parseLabelIds = react.useCallback((labelIdsStr) => {
+      return (labelIdsStr == null ? void 0 : labelIdsStr.split(",")) || [];
+    }, []);
+    const stringifyLabelIds = react.useCallback((labelIds = []) => {
+      if (!(labelIds == null ? void 0 : labelIds.length)) {
+        return void 0;
+      }
+      return labelIds.join(",");
+    }, []);
+    const localizedLabels = react.useMemo(() => labels.map(localeTransformer), [labels, localeTransformer]);
+    const value = react.useMemo(() => {
+      return {
+        loading,
+        labels: labels || [],
+        updateLabels: () => setUpdateCounter((prev) => prev + 1),
+        getLabelsById,
+        parseLabelIds,
+        stringifyLabelIds,
+        localizedLabels,
+        flattenedLabels: flatten(localizedLabels || []),
+        getFullLabelName
+      };
+    }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
+    return /* @__PURE__ */ jsxRuntime.jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(LabelsContainer.Provider, { initialState: { loading, data }, children }) });
+  }
+  const getContrastTextColor = (bgcolor) => {
+    try {
+      const ratio = material.getContrastRatio(bgcolor, "#fff");
+      return ratio > 3.5 ? "#fff" : "#111";
+    } catch {
+      return "#111";
+    }
+  };
+  const getAlphaColor = (color, alpha) => {
+    try {
+      if (color) {
+        return material.alpha(color, alpha);
+      }
+    } catch {
+      return color;
+    }
+    return color;
+  };
+  function Labels({ labels, editable, onChange, sx, renderLabel }) {
+    const isEmpty = !(labels == null ? void 0 : labels.length);
+    const { labels: allLabels, loading, getLabelsById, getFullLabelName } = useLabelsContext();
+    const [editing, setEditing] = react.useState(false);
+    if (loading || !editable && isEmpty) {
+      return null;
+    }
+    const handleOnChange = (v) => {
+      onChange == null ? void 0 : onChange(v);
+      setTimeout(() => {
+        setEditing(false);
+      }, 300);
+    };
+    if (editing) {
+      return /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
+    }
+    const labelObjects = getLabelsById(labels || []).filter((x) => !x.id.startsWith("system:"));
+    const mergedSx = [
+      { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, children: [
+      labelObjects.map((item) => {
+        if (!item) {
+          return null;
+        }
+        if (renderLabel) {
+          return renderLabel(item);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          material.Chip,
+          {
+            label: getFullLabelName(item),
+            variant: "filled",
+            size: "small",
+            sx: {
+              height: 20,
+              borderRadius: 1,
+              fontSize: 12,
+              bgcolor: getAlphaColor(item.color, 0.8),
+              color: getContrastTextColor(item.color)
+            }
+          },
+          item.id
+        );
+      }),
+      editable && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Edit, { sx: { fontSize: 20 } }) }),
+      editable && isEmpty && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LabelOutlined, {}), onClick: () => setEditing(true), children: "Edit labels" })
+    ] });
+  }
+  exports2.LabelManager = LabelManager;
+  exports2.LabelPicker = LabelPicker;
+  exports2.LabelTree = LabelTree;
+  exports2.Labels = Labels;
+  exports2.LabelsContainer = LabelsContainer;
+  exports2.LabelsProvider = LabelsProvider;
+  exports2.useLabelsContext = useLabelsContext;
+  exports2.useLabelsUpdateOnDestroy = useLabelsUpdateOnDestroy;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});