@blocklet/labels 1.5.214 → 1.6.0

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (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) {
+  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"), require("@arcblock/ux/lib/Locale/context"), require("ahooks"), require("unstated-next"), require("performant-array-to-tree"), require("@mui/icons-material/Close"), require("@mui/icons-material/Done")) : 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", "@arcblock/ux/lib/Locale/context", "ahooks", "unstated-next", "performant-array-to-tree", "@mui/icons-material/Close", "@mui/icons-material/Done"], 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.material, global.context, global.ahooks, global.unstatedNext, global.performantArrayToTree, global.CloseIcon, global.DoneIcon));
+})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseIcon, DoneIcon) {
   "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) => {
@@ -133,15 +133,6 @@ var __publicField = (obj, key, value) => {
       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);
@@ -337,287 +328,6 @@ var __publicField = (obj, key, value) => {
       }
     ) });
   }
-  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: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      border-top: 1px solid #ddd;
-    }
-  }
-  & [role='treeitem']:first-of-type > .label-tree-item {
-    &:before {
-      display: none;
-    }
-  }
-  [role='treeitem'] {
-    box-sizing: border-box;
-    padding: 0 16px;
-  }
-`;
-  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");
@@ -634,6 +344,10 @@ var __publicField = (obj, key, value) => {
       this.children.push(...nodes);
       nodes.forEach((node) => node.setParent(this));
     }
+    removeChild(node) {
+      this.children = this.children.filter((x) => x !== node);
+      node.setParent(void 0);
+    }
     isLeaf(node) {
       var _a;
       return !((_a = node.children) == null ? void 0 : _a.length);
@@ -667,6 +381,11 @@ var __publicField = (obj, key, value) => {
       }
       return nodes;
     }
+    clone() {
+      const cloned = new TreeNode({ data: this.data });
+      cloned.add(...this.children);
+      return cloned;
+    }
   }
   class Label {
     constructor(data) {
@@ -678,7 +397,7 @@ var __publicField = (obj, key, value) => {
       this.id = data.id;
       this.name = data.name;
       this.icon = data.icon;
-      this.color = data.color;
+      this.color = data.color || "#ddd";
       this.translation = this._normalizeTranslation(data.translation);
     }
     _normalizeTranslation(translation) {
@@ -700,7 +419,22 @@ var __publicField = (obj, key, value) => {
     }
   }
   class LabelTreeNode extends TreeNode {
+    getName(locale) {
+      return this.data.getName(locale);
+    }
+    isSystemLabel() {
+      return this.data.id.startsWith("system:");
+    }
+    getFullName(locale) {
+      const parents = this.getAllParents();
+      parents.shift();
+      if (locale) {
+        return parents.map((item) => item.getName(locale)).join(" / ");
+      }
+      return parents.map((item) => item.data.name).join(" / ");
+    }
   }
+  __publicField(LabelTreeNode, "Label", Label);
   const mapToTree = (items, parent) => {
     return items.map((item) => {
       const node = new LabelTreeNode({ data: new Label(item.data), parent });
@@ -711,13 +445,14 @@ var __publicField = (obj, key, value) => {
   };
   const initLabelTree = (data) => {
     const treeData = performantArrayToTree.arrayToTree(data);
-    const root = new LabelTreeNode({ data: {}, children: mapToTree(treeData) });
+    const root = new LabelTreeNode({ data: {} });
+    root.add(...mapToTree(treeData));
     return root;
   };
   const createEmptyLabelTree = () => {
     return new LabelTreeNode({ data: {}, children: [] });
   };
-  const useLabels = ({ loading, data }) => {
+  const useLabels = ({ loading, data, createLabel: createLabelAPI }) => {
     const { locale } = context.useLocaleContext();
     const state = ahooks.useReactive({
       loading: true,
@@ -750,16 +485,19 @@ var __publicField = (obj, key, value) => {
       () => 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 getLabelsByIds = react.useCallback(
+      (ids) => {
+        return ids.map((id) => nodesKeyById[id]).filter(Boolean);
+      },
+      [nodesKeyById]
+    );
     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) {
+      if (!node || node.parent === state.tree) {
         return [];
       }
       const siblings = node.getAllSiblings();
@@ -768,9 +506,70 @@ var __publicField = (obj, key, value) => {
     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 [...related, ...popularLabels.filter((x) => !set.has(x.data.id))].filter((x) => !!counts[x.data.id]);
+    };
+    const createLabel = async (name) => {
+      const saved = await createLabelAPI({ name });
+      const node = new LabelTreeNode({ data: new LabelTreeNode.Label(saved) });
+      state.tree.add(node);
+      state.tree = state.tree.clone();
+      return node.data;
+    };
+    const addLabelNode = (payload) => {
+      const parent = payload.parentId ? nodesKeyById[payload.parentId] : state.tree;
+      const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+      parent.add(node);
+      state.tree = state.tree.clone();
+    };
+    const updateLabelNode = (id, payload) => {
+      const existing = nodesKeyById[id];
+      if (existing && existing.parent) {
+        const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+        node.add(...existing.children);
+        if (existing.parent.data.id == payload.parentId) {
+          existing.parent.children = existing.parent.children.map((x) => {
+            if (x.data.id === id) {
+              node.setParent(existing.parent);
+              return node;
+            }
+            return x;
+          });
+        } else {
+          const parent = nodesKeyById[payload.parentId];
+          if (parent) {
+            existing.parent.children = existing.parent.children.filter((x) => x.data.id !== id);
+            parent.add(node);
+          }
+        }
+        state.tree = state.tree.clone();
+      }
+    };
+    const removeLabelNode = (id) => {
+      const node = nodesKeyById[id];
+      if (node == null ? void 0 : node.parent) {
+        node.parent.removeChild(node);
+        state.tree = state.tree.clone();
+      }
+    };
+    const getFullLabelName = (id) => {
+      var _a;
+      return ((_a = nodesKeyById[id]) == null ? void 0 : _a.getFullName(locale)) ?? id;
+    };
+    return {
+      ...state,
+      flattenedLabels: flattened,
+      popularLabels,
+      counts,
+      getLabelsByIds,
+      getLabelName,
+      getRelatedLabels,
+      getRecommended,
+      createLabel,
+      addLabelNode,
+      updateLabelNode,
+      removeLabelNode,
+      getFullLabelName
     };
-    return { ...state, popularLabels, counts, getLabelsByIds, getLabelName, getRelatedLabels, getRecommended };
   };
   const LabelsContainer = unstatedNext.createContainer(useLabels);
   const LabelsContext = react.createContext({});
@@ -783,7 +582,7 @@ var __publicField = (obj, key, value) => {
       };
     }, []);
   };
-  function LabelsProvider({ fetchLabels, children }) {
+  function LabelsProvider({ fetchLabels, createLabel, children }) {
     const { locale } = context.useLocaleContext();
     const [updateCounter, setUpdateCounter] = react.useState(1);
     const { loading, data } = ahooks.useRequest(fetchLabels, {
@@ -850,9 +649,9 @@ var __publicField = (obj, key, value) => {
         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 }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(LabelsContainer.Provider, { initialState: { loading, data, createLabel }, children }) });
   }
-  const getContrastTextColor = (bgcolor) => {
+  const getContrastTextColor$1 = (bgcolor) => {
     try {
       const ratio = material.getContrastRatio(bgcolor, "#fff");
       return ratio > 3.5 ? "#fff" : "#111";
@@ -860,7 +659,7 @@ var __publicField = (obj, key, value) => {
       return "#111";
     }
   };
-  const getAlphaColor = (color, alpha) => {
+  const getAlphaColor$1 = (color, alpha) => {
     try {
       if (color) {
         return material.alpha(color, alpha);
@@ -909,8 +708,8 @@ var __publicField = (obj, key, value) => {
               height: 20,
               borderRadius: 1,
               fontSize: 12,
-              bgcolor: getAlphaColor(item.color, 0.8),
-              color: getContrastTextColor(item.color)
+              bgcolor: getAlphaColor$1(item.color || "#ddd", 0.8),
+              color: getContrastTextColor$1(item.color || "#ddd")
             }
           },
           item.id
@@ -920,11 +719,530 @@ var __publicField = (obj, key, value) => {
       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;
+  const mdiTagPlusOutline = (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: "M6.5 5A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5m0 0A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5m14.91 6.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.42l.41.4a5.62 5.62 0 0 1 2.08-.74L4 11V4h7l9 9l-7 7l-1.08-1.08a5.57 5.57 0 0 1-.74 2.08l.41.41A2 2 0 0 0 13 22a2 2 0 0 0 1.41-.59l7-7A2 2 0 0 0 22 13a2 2 0 0 0-.59-1.42M6.5 5A1.5 1.5 0 1 0 8 6.5A1.5 1.5 0 0 0 6.5 5M10 19H7v3H5v-3H2v-2h3v-3h2v3h3Z" }) });
+  function PopperComponent$1({
+    disablePortal,
+    anchorEl,
+    open,
+    ...other
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Box,
+      {
+        ...other,
+        sx: (theme) => ({
+          [`& .${material.autocompleteClasses.paper}`]: {
+            boxShadow: "none",
+            margin: 0,
+            color: "inherit",
+            fontSize: 13
+          },
+          [`& .${material.autocompleteClasses.listbox}`]: {
+            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+            padding: 0,
+            [`& .${material.autocompleteClasses.option}`]: {
+              minHeight: "auto",
+              alignItems: "flex-start",
+              padding: 1,
+              borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
+              '&[aria-selected="true"]': {
+                backgroundColor: "transparent"
+              },
+              [`&.${material.autocompleteClasses.focused}, &.${material.autocompleteClasses.focused}[aria-selected="true"]`]: {
+                backgroundColor: theme.palette.action.hover
+              }
+            }
+          },
+          [`&.${material.autocompleteClasses.popperDisablePortal}`]: {
+            position: "relative"
+          }
+        })
+      }
+    );
+  }
+  function GithubLabelPicker({
+    value = [],
+    onChange,
+    title,
+    noLabelsText,
+    buttonSx,
+    actions,
+    trigger,
+    multiple = true
+  }) {
+    const { locale } = context.useLocaleContext();
+    const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
+    const [anchorEl, setAnchorEl] = react.useState(null);
+    const [pendingValue, setPendingValue] = react.useState([]);
+    const pendingOptions = react.useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
+    const [inputValue, setInputValue] = react.useState("");
+    const exists = react.useMemo(
+      () => labels.some((x) => x.data.getName(locale).toLowerCase() === inputValue.toLowerCase()),
+      [inputValue, labels, locale]
+    );
+    const theme = material.useTheme();
+    const handleClick = (event) => {
+      setPendingValue(value);
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      onChange == null ? void 0 : onChange(pendingValue);
+      setInputValue("");
+      if (anchorEl) {
+        anchorEl.focus();
+      }
+      setAnchorEl(null);
+    };
+    const handleCreate = async () => {
+      const { id: id2 } = await createLabel(inputValue);
+      setPendingValue([...pendingValue, id2]);
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? "github-label-picker" : void 0;
+    if (loading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          onClick: handleClick,
+          sx: {
+            display: "flex",
+            alignItems: "center"
+          },
+          children: trigger || /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: material.ButtonBase,
+              disableRipple: true,
+              "aria-describedby": id,
+              sx: [
+                (t) => ({
+                  width: "100%",
+                  fontSize: 13,
+                  color: t.palette.mode === "light" ? "#586069" : "#8b949e",
+                  fontWeight: 600,
+                  "&:hover": {
+                    color: t.palette.mode === "light" ? "primary.main" : "#58a6ff"
+                  },
+                  "& svg": {
+                    width: 22,
+                    height: 22
+                  }
+                }),
+                ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
+              ],
+              children: /* @__PURE__ */ jsxRuntime.jsx(mdiTagPlusOutline, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          component: material.Popper,
+          id,
+          open,
+          anchorEl,
+          placement: "bottom-start",
+          sx: (t) => ({
+            border: `1px solid ${t.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
+            boxShadow: `0 8px 24px ${t.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
+            borderRadius: "4px",
+            width: 300,
+            zIndex: t.zIndex.modal,
+            fontSize: 13,
+            color: t.palette.mode === "light" ? "#24292e" : "#c9d1d9",
+            backgroundColor: t.palette.mode === "light" ? "#fff" : "#1c2128"
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx(
+              material.Box,
+              {
+                sx: {
+                  borderBottom: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                  padding: "8px 10px",
+                  fontWeight: 600
+                },
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Autocomplete,
+              {
+                open: true,
+                multiple: true,
+                inputValue,
+                onInputChange: (event, newInputValue, reason) => {
+                  if (reason === "reset") {
+                    return;
+                  }
+                  setInputValue(newInputValue);
+                },
+                onClose: (event, reason) => {
+                  if (reason === "escape") {
+                    handleClose();
+                  }
+                },
+                value: pendingOptions,
+                onChange: (event, newValue, reason) => {
+                  if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+                    return;
+                  }
+                  setPendingValue(newValue.map((x) => x.data.id));
+                  if (!multiple) {
+                    onChange == null ? void 0 : onChange(newValue.length ? [newValue[newValue.length - 1].data.id] : []);
+                    setAnchorEl(null);
+                  }
+                },
+                disableCloseOnSelect: true,
+                PopperComponent: PopperComponent$1,
+                renderTags: () => null,
+                noOptionsText: noLabelsText || "No labels",
+                renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      component: DoneIcon,
+                      sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
+                      style: {
+                        visibility: selected ? "visible" : "hidden"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      component: "span",
+                      sx: {
+                        width: 14,
+                        height: 14,
+                        flexShrink: 0,
+                        borderRadius: "3px",
+                        mr: 1,
+                        mt: "2px"
+                      },
+                      style: { backgroundColor: option.data.color || "#ddd" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      sx: {
+                        flexGrow: 1,
+                        "& span": {
+                          color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
+                        }
+                      },
+                      children: option.data.getName(locale)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      component: CloseIcon,
+                      sx: { opacity: 0.6, width: 18, height: 18 },
+                      style: {
+                        visibility: selected ? "visible" : "hidden"
+                      }
+                    }
+                  )
+                ] }),
+                options: [...labels].sort((a, b) => {
+                  let ai = value.indexOf(a.data.id);
+                  ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
+                  let bi = value.indexOf(b.data.id);
+                  bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
+                  return ai - bi;
+                }),
+                getOptionLabel: (option) => option.data.getName(locale),
+                renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    component: material.InputBase,
+                    ref: params.InputProps.ref,
+                    inputProps: params.inputProps,
+                    autoFocus: true,
+                    placeholder: "Filter labels",
+                    sx: (t) => ({
+                      padding: 1,
+                      width: "100%",
+                      borderBottom: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                      "& input": {
+                        borderRadius: "4px",
+                        backgroundColor: t.palette.mode === "light" ? "#fff" : "#0d1117",
+                        padding: 1,
+                        transition: t.transitions.create(["border-color", "box-shadow"]),
+                        border: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                        fontSize: 14,
+                        "&:focus": {
+                          boxShadow: `0px 0px 0px 3px ${t.palette.mode === "light" ? material.alpha(t.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
+                          borderColor: t.palette.mode === "light" ? t.palette.primary.light : "#388bfd"
+                        }
+                      }
+                    })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+              inputValue && !exists && /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 1,
+                    width: "100%",
+                    height: 36,
+                    px: 2,
+                    borderTop: "1px solid #eee",
+                    fontSize: 14,
+                    color: "grey.600",
+                    cursor: "pointer",
+                    textDecoration: "none"
+                  },
+                  onClick: handleCreate,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    'Create new label "',
+                    inputValue,
+                    '"'
+                  ] })
+                }
+              ),
+              actions
+            ] })
+          ] }) })
+        }
+      )
+    ] });
+  }
+  function Tag(props) {
+    const { label, onDelete, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        ...rest,
+        sx: {
+          boxSizing: "content-box",
+          display: "flex",
+          alignItems: "center",
+          height: 24,
+          margin: "2px",
+          padding: "0 4px 0 10px",
+          border: (theme) => `1px solid ${theme.palette.mode === "dark" ? "#303030" : "#e8e8e8"}`,
+          overflow: "hidden",
+          lineHeight: "22px",
+          fontSize: 14,
+          color: "grey.800",
+          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#fafafa",
+          borderRadius: "2px",
+          outline: 0,
+          "&:focus": {
+            borderColor: (theme) => `${theme.palette.mode === "dark" ? "#177ddc" : "#40a9ff"}`,
+            bgcolor: (theme) => `${theme.palette.mode === "dark" ? "#003b57" : "#e6f7ff"}`
+          },
+          "& span": {
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis"
+          },
+          "& svg": {
+            ml: 0.5,
+            p: "4px",
+            fontSize: "12px",
+            color: "grey.500",
+            cursor: "pointer"
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { onClick: onDelete })
+        ]
+      }
+    );
+  }
+  function PopperComponent(props) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Popper,
+      {
+        ...props,
+        sx: (theme) => ({
+          [`& .${material.autocompleteClasses.paper}`]: {
+            border: `1px solid ${theme.palette.mode === "light" ? "#e1e4e8" : "#30363d"}`,
+            boxShadow: `0 8px 24px ${theme.palette.mode === "light" ? "rgba(149, 157, 165, 0.2)" : "rgb(1, 4, 9)"}`,
+            borderRadius: "4px",
+            color: "inherit",
+            fontSize: 13
+          },
+          [`& .${material.autocompleteClasses.listbox}`]: {
+            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+            padding: 0,
+            [`& .${material.autocompleteClasses.option}`]: {
+              minHeight: "auto",
+              alignItems: "flex-start",
+              padding: 1,
+              borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
+              '&[aria-selected="true"]': {
+                backgroundColor: "transparent"
+              },
+              [`&.${material.autocompleteClasses.focused}, &.${material.autocompleteClasses.focused}[aria-selected="true"]`]: {
+                backgroundColor: theme.palette.action.hover
+              }
+            }
+          },
+          [`&.${material.autocompleteClasses.popperDisablePortal}`]: {
+            position: "relative"
+          }
+        })
+      }
+    );
+  }
+  function LabelsInput({ value = [], onChange, ...rest }) {
+    const { locale } = context.useLocaleContext();
+    const { flattenedLabels: labels, getLabelsByIds, loading } = LabelsContainer.useContainer();
+    const valueOptions = react.useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+    if (loading) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Autocomplete,
+      {
+        multiple: true,
+        disableClearable: true,
+        forcePopupIcon: false,
+        size: "small",
+        PopperComponent,
+        value: valueOptions,
+        onChange: (event, newValue) => {
+          onChange(newValue.map((x) => x.data.id));
+        },
+        options: [...labels].sort((a, b) => {
+          let ai = value.indexOf(a.data.id);
+          ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
+          let bi = value.indexOf(b.data.id);
+          bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
+          return ai - bi;
+        }),
+        getOptionLabel: (option) => option.data.getName(locale),
+        renderOption: (props, option, { selected }) => /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: DoneIcon,
+              sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
+              style: {
+                visibility: selected ? "visible" : "hidden"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: "span",
+              sx: {
+                width: 14,
+                height: 14,
+                flexShrink: 0,
+                borderRadius: "3px",
+                mr: 1,
+                mt: "2px"
+              },
+              style: { backgroundColor: option.data.color || "#ddd" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                flexGrow: 1,
+                "& span": {
+                  color: (theme) => theme.palette.mode === "light" ? "#586069" : "#8b949e"
+                }
+              },
+              children: option.data.getName(locale)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              component: CloseIcon,
+              sx: { opacity: 0.6, width: 18, height: 18 },
+              style: {
+                visibility: selected ? "visible" : "hidden"
+              }
+            }
+          )
+        ] }),
+        renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(Tag, { label: option.data.getName(locale), ...getTagProps({ index }) })),
+        style: { minWidth: 300 },
+        renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...params, placeholder: "Labels" }),
+        ...rest
+      }
+    );
+  }
+  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 Labels2({ labels, sx, renderLabel }) {
+    const { getLabelsByIds, loading, getFullLabelName } = LabelsContainer.useContainer();
+    if (loading) {
+      return null;
+    }
+    const labelNodes = getLabelsByIds(labels || []).filter((x) => !x.data.id.startsWith("system:"));
+    const mergedSx = [
+      { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: mergedSx, children: labelNodes.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if (renderLabel) {
+        return renderLabel(item);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: getFullLabelName(item.data.id),
+          variant: "filled",
+          size: "small",
+          sx: {
+            height: 20,
+            borderRadius: 1,
+            fontSize: 12,
+            bgcolor: getAlphaColor(item.data.color, 0.8),
+            color: getContrastTextColor(item.data.color)
+          }
+        },
+        item.data.id
+      );
+    }) });
+  }
+  exports2.GithubLabelPicker = GithubLabelPicker;
   exports2.LabelPicker = LabelPicker;
   exports2.LabelTree = LabelTree;
+  exports2.LabelTreeNode = LabelTreeNode;
   exports2.Labels = Labels;
+  exports2.Labels2 = Labels2;
   exports2.LabelsContainer = LabelsContainer;
+  exports2.LabelsInput = LabelsInput;
   exports2.LabelsProvider = LabelsProvider;
   exports2.useLabelsContext = useLabelsContext;
   exports2.useLabelsUpdateOnDestroy = useLabelsUpdateOnDestroy;