@blocklet/labels 1.5.214 → 1.6.0

package/dist/index.es.js

@@ -6,27 +6,20 @@ var __publicField = (obj, key, value) => {
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext } from "react";
-import { ExpandMore, Add, EditOutlined, DeleteOutlineOutlined, Edit, LabelOutlined } from "@mui/icons-material";
+import { ExpandMore, Edit, LabelOutlined } from "@mui/icons-material";
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import { Tree } from "react-arborist";
 import { Icon } from "@iconify/react";
 import omit from "lodash/omit";
 import Select, { components } from "react-select";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
-import { TranslationTextField, TranslationTag } from "@blocklet/translation-input";
-import { useSetState, useReactive, useRequest } from "ahooks";
-import TextField from "@mui/material/TextField";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import { GithubPicker } from "react-color";
-import Dialog from "@arcblock/ux/lib/Dialog";
-import Alert from "@mui/material/Alert";
-import { ClickAwayListener as ClickAwayListener$1, Box as Box$1, Chip, IconButton as IconButton$1, Button as Button$1, getContrastRatio, alpha } from "@mui/material";
+import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useReactive, useRequest } from "ahooks";
 import { createContainer } from "unstated-next";
 import { arrayToTree } from "performant-array-to-tree";
+import CloseIcon from "@mui/icons-material/Close";
+import DoneIcon from "@mui/icons-material/Done";
 const materialSymbolsLabelRounded = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) });
 const LabelTreeContext = createContext({});
@@ -152,15 +145,6 @@ const flatten = (data) => {
     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);
@@ -356,287 +340,6 @@ function LabelPicker({
     }
   ) });
 }
-function LabelFormDialog({ open, initialLabel, onSubmit, onClose, ...rest }) {
-  const isNew = !(initialLabel == null ? void 0 : initialLabel.id);
-  const [state, setState] = 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 = 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] = 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__ */ jsx(
-    Dialog,
-    {
-      open,
-      showCloseButton: true,
-      maxWidth: "lg",
-      title: isNew ? "Create label" : "Edit label",
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: isNew ? "Create" : "Save Changes" })
-      ] }),
-      onClose,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(Box, { width: 600, minHeight: 320, children: [
-        /* @__PURE__ */ jsx(
-          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__ */ 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__ */ jsx(TextField, { label: "Parent", value: initialLabel.parent.name, size: "small", fullWidth: true, disabled: true, sx: { mt: 2 } }),
-        /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setColorPickerVisible(false), children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", mt: 2 }, children: [
-          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: { width: 30, height: 30, bgcolor: state.color, borderRadius: 1 },
-                onClick: () => setColorPickerVisible(true)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TextField,
-              {
-                label: "",
-                value: state.color,
-                size: "small",
-                onChange: handleColorTextChange,
-                inputProps: { maxLength: 7 },
-                sx: { width: 100, ".MuiInputBase-root": { height: 32 } }
-              }
-            )
-          ] }),
-          colorPickerVisible && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ jsx(GithubPicker, { color: state.color, onChangeComplete: handleColorChange }) })
-        ] }) })
-      ] })
-    }
-  );
-}
-function LabelDeleteDialog({ open, label, onSubmit, onClose, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      showCloseButton: true,
-      maxWidth: "md",
-      title: "Delete",
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: onSubmit, children: "Delete" })
-      ] }),
-      onClose,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(Box, { width: 600, minHeight: 280, children: [
-        /* @__PURE__ */ jsx(Alert, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
-        /* @__PURE__ */ jsx(LabelTree, { data: [label] })
-      ] })
-    }
-  );
-}
-const StyledLabelTree = 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] = useState(null);
-  const [deletingLabel, setDeletingLabel] = useState(null);
-  const [copy, setCopy] = useState(copyTree(data));
-  const flattened = useMemo(() => flatten(copy), [copy]);
-  const treeData = 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__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
-        /* @__PURE__ */ jsx(Box, { children }),
-        label.translation && /* @__PURE__ */ 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__ */ jsx(TranslationTag, { locale: key, value }, key);
-          }
-          return null;
-        }) })
-      ] }),
-      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
-        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleAdd(label), children: /* @__PURE__ */ jsx(Add, { sx: { fontSize: 20 } }) }),
-        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleEdit(label), children: /* @__PURE__ */ jsx(EditOutlined, { sx: { fontSize: 18 } }) }),
-        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => setDeletingLabel(label), children: /* @__PURE__ */ jsx(DeleteOutlineOutlined, { sx: { fontSize: 20 } }) })
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs(Box, { ...rest, className: "label-container", children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", children: "Manage labels" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          color: "primary",
-          variant: "contained",
-          size: "small",
-          sx: { textTransform: "none" },
-          onClick: () => handleAdd(),
-          children: "New label"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
-      /* @__PURE__ */ jsxs(Box, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
-        flattened.length,
-        " labels"
-      ] }),
-      /* @__PURE__ */ jsx(Box, { sx: { pt: 0.5 }, children: /* @__PURE__ */ jsx(StyledLabelTree, { data: treeData, selected: [], renderItem, rowHeight: 64 }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      LabelFormDialog,
-      {
-        open: !!editingLabel,
-        onClose: () => setEditingLabel(null),
-        initialLabel: editingLabel,
-        onSubmit: handleSubmit
-      },
-      editingLabel == null ? void 0 : editingLabel.id
-    ),
-    /* @__PURE__ */ 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");
@@ -653,6 +356,10 @@ class TreeNode {
     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);
@@ -686,6 +393,11 @@ class TreeNode {
     }
     return nodes;
   }
+  clone() {
+    const cloned = new TreeNode({ data: this.data });
+    cloned.add(...this.children);
+    return cloned;
+  }
 }
 class Label {
   constructor(data) {
@@ -697,7 +409,7 @@ class Label {
     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) {
@@ -719,7 +431,22 @@ class Label {
   }
 }
 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 });
@@ -730,13 +457,14 @@ const mapToTree = (items, parent) => {
 };
 const initLabelTree = (data) => {
   const treeData = 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 } = useLocaleContext();
   const state = useReactive({
     loading: true,
@@ -769,16 +497,19 @@ const useLabels = ({ loading, data }) => {
     () => 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 = 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();
@@ -787,9 +518,70 @@ const useLabels = ({ loading, data }) => {
   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 = createContainer(useLabels);
 const LabelsContext = createContext({});
@@ -802,7 +594,7 @@ const useLabelsUpdateOnDestroy = () => {
     };
   }, []);
 };
-function LabelsProvider({ fetchLabels, children }) {
+function LabelsProvider({ fetchLabels, createLabel, children }) {
   const { locale } = useLocaleContext();
   const [updateCounter, setUpdateCounter] = useState(1);
   const { loading, data } = useRequest(fetchLabels, {
@@ -869,9 +661,9 @@ function LabelsProvider({ fetchLabels, children }) {
       getFullLabelName
     };
   }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
-  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsx(LabelsContainer.Provider, { initialState: { loading, data }, children }) });
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsx(LabelsContainer.Provider, { initialState: { loading, data, createLabel }, children }) });
 }
-const getContrastTextColor = (bgcolor) => {
+const getContrastTextColor$1 = (bgcolor) => {
   try {
     const ratio = getContrastRatio(bgcolor, "#fff");
     return ratio > 3.5 ? "#fff" : "#111";
@@ -879,7 +671,7 @@ const getContrastTextColor = (bgcolor) => {
     return "#111";
   }
 };
-const getAlphaColor = (color, alpha$1) => {
+const getAlphaColor$1 = (color, alpha$1) => {
   try {
     if (color) {
       return alpha(color, alpha$1);
@@ -903,7 +695,7 @@ function Labels({ labels, editable, onChange, sx, renderLabel }) {
     }, 300);
   };
   if (editing) {
-    return /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
+    return /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
   }
   const labelObjects = getLabelsById(labels || []).filter((x) => !x.id.startsWith("system:"));
   const mergedSx = [
@@ -928,23 +720,542 @@ function Labels({ labels, editable, onChange, sx, renderLabel }) {
             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
       );
     }),
-    editable && !isEmpty && /* @__PURE__ */ jsx(IconButton$1, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Edit, { sx: { fontSize: 20 } }) }),
-    editable && isEmpty && /* @__PURE__ */ jsx(Button$1, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsx(LabelOutlined, {}), onClick: () => setEditing(true), children: "Edit labels" })
+    editable && !isEmpty && /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Edit, { sx: { fontSize: 20 } }) }),
+    editable && isEmpty && /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsx(LabelOutlined, {}), onClick: () => setEditing(true), children: "Edit labels" })
   ] });
 }
+const mdiTagPlusOutline = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ 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__ */ jsx(
+    Box$1,
+    {
+      ...other,
+      sx: (theme) => ({
+        [`& .${autocompleteClasses.paper}`]: {
+          boxShadow: "none",
+          margin: 0,
+          color: "inherit",
+          fontSize: 13
+        },
+        [`& .${autocompleteClasses.listbox}`]: {
+          backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+          padding: 0,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "auto",
+            alignItems: "flex-start",
+            padding: 1,
+            borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
+            '&[aria-selected="true"]': {
+              backgroundColor: "transparent"
+            },
+            [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
+              backgroundColor: theme.palette.action.hover
+            }
+          }
+        },
+        [`&.${autocompleteClasses.popperDisablePortal}`]: {
+          position: "relative"
+        }
+      })
+    }
+  );
+}
+function GithubLabelPicker({
+  value = [],
+  onChange,
+  title,
+  noLabelsText,
+  buttonSx,
+  actions,
+  trigger,
+  multiple = true
+}) {
+  const { locale } = useLocaleContext();
+  const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [pendingValue, setPendingValue] = useState([]);
+  const pendingOptions = useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
+  const [inputValue, setInputValue] = useState("");
+  const exists = useMemo(
+    () => labels.some((x) => x.data.getName(locale).toLowerCase() === inputValue.toLowerCase()),
+    [inputValue, labels, locale]
+  );
+  const theme = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        onClick: handleClick,
+        sx: {
+          display: "flex",
+          alignItems: "center"
+        },
+        children: trigger || /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            component: 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__ */ jsx(mdiTagPlusOutline, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        component: 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__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box$1, { children: [
+          title && /* @__PURE__ */ jsx(
+            Box$1,
+            {
+              sx: {
+                borderBottom: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                padding: "8px 10px",
+                fontWeight: 600
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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__ */ jsxs("li", { ...props, children: [
+                /* @__PURE__ */ jsx(
+                  Box$1,
+                  {
+                    component: DoneIcon,
+                    sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
+                    style: {
+                      visibility: selected ? "visible" : "hidden"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box$1,
+                  {
+                    component: "span",
+                    sx: {
+                      width: 14,
+                      height: 14,
+                      flexShrink: 0,
+                      borderRadius: "3px",
+                      mr: 1,
+                      mt: "2px"
+                    },
+                    style: { backgroundColor: option.data.color || "#ddd" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box$1,
+                  {
+                    sx: {
+                      flexGrow: 1,
+                      "& span": {
+                        color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
+                      }
+                    },
+                    children: option.data.getName(locale)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box$1,
+                  {
+                    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__ */ jsx(
+                Box$1,
+                {
+                  component: 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" ? alpha(t.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
+                        borderColor: t.palette.mode === "light" ? t.palette.primary.light : "#388bfd"
+                      }
+                    }
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box$1, { children: [
+            inputValue && !exists && /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                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__ */ jsxs("span", { children: [
+                  'Create new label "',
+                  inputValue,
+                  '"'
+                ] })
+              }
+            ),
+            actions
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+}
+function Tag(props) {
+  const { label, onDelete, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    Box$1,
+    {
+      ...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__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(CloseIcon, { onClick: onDelete })
+      ]
+    }
+  );
+}
+function PopperComponent(props) {
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...props,
+      sx: (theme) => ({
+        [`& .${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
+        },
+        [`& .${autocompleteClasses.listbox}`]: {
+          backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+          padding: 0,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "auto",
+            alignItems: "flex-start",
+            padding: 1,
+            borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
+            '&[aria-selected="true"]': {
+              backgroundColor: "transparent"
+            },
+            [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
+              backgroundColor: theme.palette.action.hover
+            }
+          }
+        },
+        [`&.${autocompleteClasses.popperDisablePortal}`]: {
+          position: "relative"
+        }
+      })
+    }
+  );
+}
+function LabelsInput({ value = [], onChange, ...rest }) {
+  const { locale } = useLocaleContext();
+  const { flattenedLabels: labels, getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs("li", { ...props, children: [
+        /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            component: DoneIcon,
+            sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
+            style: {
+              visibility: selected ? "visible" : "hidden"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            component: "span",
+            sx: {
+              width: 14,
+              height: 14,
+              flexShrink: 0,
+              borderRadius: "3px",
+              mr: 1,
+              mt: "2px"
+            },
+            style: { backgroundColor: option.data.color || "#ddd" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            sx: {
+              flexGrow: 1,
+              "& span": {
+                color: (theme) => theme.palette.mode === "light" ? "#586069" : "#8b949e"
+              }
+            },
+            children: option.data.getName(locale)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            component: CloseIcon,
+            sx: { opacity: 0.6, width: 18, height: 18 },
+            style: {
+              visibility: selected ? "visible" : "hidden"
+            }
+          }
+        )
+      ] }),
+      renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => /* @__PURE__ */ jsx(Tag, { label: option.data.getName(locale), ...getTagProps({ index }) })),
+      style: { minWidth: 300 },
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, placeholder: "Labels" }),
+      ...rest
+    }
+  );
+}
+const getContrastTextColor = (bgcolor) => {
+  try {
+    const ratio = getContrastRatio(bgcolor, "#fff");
+    return ratio > 3.5 ? "#fff" : "#111";
+  } catch {
+    return "#111";
+  }
+};
+const getAlphaColor = (color, alpha$1) => {
+  try {
+    if (color) {
+      return alpha(color, alpha$1);
+    }
+  } 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__ */ jsx(Box$1, { sx: mergedSx, children: labelNodes.map((item) => {
+    if (!item) {
+      return null;
+    }
+    if (renderLabel) {
+      return renderLabel(item);
+    }
+    return /* @__PURE__ */ jsx(
+      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
+    );
+  }) });
+}
 export {
-  LabelManager,
+  GithubLabelPicker,
   LabelPicker,
   LabelTree,
+  LabelTreeNode,
   Labels,
+  Labels2,
   LabelsContainer,
+  LabelsInput,
   LabelsProvider,
   useLabelsContext,
   useLabelsUpdateOnDestroy