@blocklet/labels 1.6.178 → 1.6.180

package/dist/index.es.js

@@ -18,7 +18,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useReactive, useRequest, useSize, useDeepCompareLayoutEffect } from "ahooks";
 import { createContainer } from "unstated-next";
 import { arrayToTree } from "performant-array-to-tree";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseOutlineIcon from "@mui/icons-material/Close";
 import DoneIcon from "@mui/icons-material/Done";
 import chroma from "chroma-js";
 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" }) });
@@ -586,6 +586,9 @@ const useLabels = ({ loading, data, createLabel: createLabelAPI }) => {
     var _a;
     return ((_a = nodesKeyById[id]) == null ? void 0 : _a.getFullName(locale)) ?? id;
   };
+  const parseLabelsStr = useCallback((labelIdsStr) => {
+    return (labelIdsStr == null ? void 0 : labelIdsStr.split(",").filter(Boolean)) || [];
+  }, []);
   return {
     ...state,
     flattenedLabels: flattened,
@@ -600,7 +603,8 @@ const useLabels = ({ loading, data, createLabel: createLabelAPI }) => {
     addLabelNode,
     updateLabelNode,
     removeLabelNode,
-    getFullLabelName
+    getFullLabelName,
+    parseLabelsStr
   };
 };
 const LabelsContainer = createContainer(useLabels);
@@ -752,6 +756,197 @@ function Labels({ labels, editable, onChange, sx, renderLabel }) {
   ] });
 }
 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" }) });
+const getTextColor = (color) => {
+  return chroma(color).hex();
+};
+const getBorderColor = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return chroma(color).darken(3).hex();
+  }
+  return chroma(color).brighten(0.5).alpha(0.25).hex();
+};
+const getBackgroundColor = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return chroma(color).darken(2.5).hex();
+  }
+  return chroma(color).brighten(2.5).alpha(0.25).hex();
+};
+const getFilterStyle = (color) => {
+  if (chroma(color).luminance() > 0.5) {
+    return "brightness(0.85) contrast(1.2)";
+  }
+  return "brightness(0.85) contrast(1.2)";
+};
+function LabelChip({
+  label,
+  onDelete,
+  sx,
+  fullName = true,
+  onClick,
+  disabled = false
+}) {
+  const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+  const mergedSx = [
+    {
+      height: 20,
+      borderRadius: 0.5,
+      fontSize: 12,
+      fontWeight: 500,
+      color: `${getTextColor(label.data.color)} !important`,
+      bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+      transition: "filter 0.2s",
+      borderColor: `${getBorderColor(label.data.color)} !important`,
+      // -webkit-text-fill-color
+      WebkitTextFillColor: `${getTextColor(label.data.color)} !important`,
+      ".MuiChip-deleteIcon": {
+        color: `${getTextColor(label.data.color)} !important`,
+        cursor: "pointer",
+        transition: "transform 0.3s",
+        "&:hover": {
+          transform: "rotate(90deg)"
+        }
+      },
+      ".MuiChip-label": {
+        px: 0.5,
+        maxHeight: 20
+      },
+      ...onClick && {
+        cursor: "pointer",
+        "&:hover": {
+          filter: getFilterStyle(label.data.color)
+        }
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const hasDelete = !disabled && !!onDelete;
+  const hasOnClick = !disabled && !!onClick;
+  return (
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
+        variant: "outlined",
+        size: "small",
+        ...hasDelete && {
+          onDelete: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onDelete(label);
+          },
+          deleteIcon: /* @__PURE__ */ jsx(CloseOutlineIcon, {})
+        },
+        ...hasOnClick && {
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(label);
+          }
+        },
+        sx: mergedSx
+      },
+      label.data.id
+    )
+  );
+}
+function Labels2({
+  compact = true,
+  labels,
+  sx,
+  renderLabel,
+  prepend,
+  displaySystemLabels = true,
+  onItemClick
+}) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const labelsWrapperRef = useRef(null);
+  const [overflowIndex, setOverflowIndex] = useState(99999);
+  let labelNodes = getLabelsByIds(labels || []);
+  const size = useSize(labelsWrapperRef);
+  useDeepCompareLayoutEffect(() => {
+    if (compact) {
+      if (labelsWrapperRef.current) {
+        const { right } = labelsWrapperRef.current.getBoundingClientRect();
+        const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
+        if ((labelElements == null ? void 0 : labelElements.length) > 0) {
+          Array.from(labelElements).some((x, i) => {
+            const rect = x.getBoundingClientRect();
+            if (rect.right > right - 36) {
+              setOverflowIndex(i);
+              return true;
+            }
+            return false;
+          });
+        }
+      }
+    } else {
+      setOverflowIndex(99999);
+    }
+  }, [size, compact]);
+  if (loading) {
+    return null;
+  }
+  if (!displaySystemLabels) {
+    labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
+  }
+  const mergedSx = [
+    {
+      display: "flex",
+      gap: 1,
+      width: "100%",
+      alignItems: "center",
+      overflow: "hidden",
+      flexWrap: compact ? "no-wrap" : "wrap"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, ref: labelsWrapperRef, children: [
+    prepend,
+    labelNodes.map((item, index) => {
+      if (!item) {
+        return null;
+      }
+      const visible = index < overflowIndex;
+      let extra = null;
+      if (index === overflowIndex) {
+        extra = /* @__PURE__ */ jsx(
+          Box$1,
+          {
+            sx: {
+              display: "inline-flex",
+              ...compact && { height: 20, lineHeight: "20px" },
+              color: "text.secondary",
+              fontWeight: "bold",
+              fontSize: 14
+            },
+            children: `+${labelNodes.length - overflowIndex}`
+          },
+          "overflow-label"
+        );
+      }
+      let labelChip = /* @__PURE__ */ jsx(
+        LabelChip,
+        {
+          label: item,
+          onClick: onItemClick,
+          sx: {
+            visibility: visible ? "visible" : "hidden",
+            pointerEvents: visible ? "auto" : "none"
+          }
+        },
+        item.data.id
+      );
+      if (renderLabel) {
+        labelChip = renderLabel(item, labelChip);
+      }
+      if (extra) {
+        return [extra, labelChip];
+      }
+      return labelChip;
+    })
+  ] });
+}
 function PopperComponent({
   disablePortal,
   anchorEl,
@@ -802,7 +997,8 @@ function GithubLabelPicker({
   trigger,
   multiple = true,
   updateImmediately = true,
-  excludes = []
+  excludes = [],
+  disabled = false
 }) {
   const { locale } = useLocaleContext();
   const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
@@ -820,6 +1016,9 @@ function GithubLabelPicker({
   }, [labels]);
   const theme = useTheme();
   const handleClick = (event) => {
+    if (disabled) {
+      return;
+    }
     event.preventDefault();
     setPendingValue(value);
     setAnchorEl(event.currentTarget);
@@ -961,8 +1160,8 @@ function GithubLabelPicker({
                   {
                     component: "span",
                     sx: {
-                      width: 14,
-                      height: 14,
+                      width: 16,
+                      height: 16,
                       flexShrink: 0,
                       borderRadius: "3px",
                       mr: 1
@@ -975,17 +1174,16 @@ function GithubLabelPicker({
                   {
                     sx: {
                       flexGrow: 1,
-                      "& span": {
-                        color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
-                      }
+                      alignItems: "center",
+                      display: "flex"
                     },
-                    children: option.getFullName(locale)
+                    children: /* @__PURE__ */ jsx(LabelChip, { label: option, disabled })
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   Box$1,
                   {
-                    component: CloseIcon,
+                    component: CloseOutlineIcon,
                     sx: { opacity: 0.6, width: 18, height: 18 },
                     style: {
                       visibility: selected ? "visible" : "hidden"
@@ -1062,184 +1260,6 @@ function GithubLabelPicker({
     )
   ] });
 }
-const getTextColor = (color) => {
-  return chroma(color).hex();
-};
-const getBorderColor = (color) => {
-  if (chroma(color).luminance() > 0.5) {
-    return chroma(color).darken(3).hex();
-  }
-  return chroma(color).brighten(0.5).alpha(0.25).hex();
-};
-const getBackgroundColor = (color) => {
-  if (chroma(color).luminance() > 0.5) {
-    return chroma(color).darken(2.5).hex();
-  }
-  return chroma(color).brighten(2.5).alpha(0.25).hex();
-};
-const getFilterStyle = (color) => {
-  if (chroma(color).luminance() > 0.5) {
-    return "brightness(0.85) contrast(1.2)";
-  }
-  return "brightness(0.85) contrast(1.2)";
-};
-function LabelChip({
-  label,
-  onDelete,
-  sx,
-  fullName = true,
-  onClick
-}) {
-  const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
-  const mergedSx = [
-    {
-      height: 20,
-      borderRadius: 0.5,
-      fontSize: 12,
-      fontWeight: 500,
-      color: `${getTextColor(label.data.color)} !important`,
-      bgcolor: `${getBackgroundColor(label.data.color)} !important`,
-      transition: "filter 0.2s",
-      borderColor: `${getBorderColor(label.data.color)} !important`,
-      ".MuiChip-label": {
-        p: 0.5
-      },
-      span: {},
-      ...onClick && {
-        cursor: "pointer",
-        "&:hover": {
-          filter: getFilterStyle(label.data.color)
-        }
-      }
-    },
-    ...Array.isArray(sx) ? sx : [sx]
-  ];
-  return (
-    // @ts-ignore
-    /* @__PURE__ */ jsx(
-      Chip,
-      {
-        label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
-        variant: "outlined",
-        size: "small",
-        ...onDelete && {
-          onDelete: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onDelete(label);
-          },
-          deleteIcon: /* @__PURE__ */ jsx(CloseIcon, {})
-        },
-        ...onClick && {
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onClick(label);
-          }
-        },
-        sx: mergedSx
-      },
-      label.data.id
-    )
-  );
-}
-function Labels2({
-  compact = true,
-  labels,
-  sx,
-  renderLabel,
-  prepend,
-  displaySystemLabels = true,
-  onItemClick
-}) {
-  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
-  const labelsWrapperRef = useRef(null);
-  const [overflowIndex, setOverflowIndex] = useState(99999);
-  let labelNodes = getLabelsByIds(labels || []);
-  const size = useSize(labelsWrapperRef);
-  useDeepCompareLayoutEffect(() => {
-    if (compact) {
-      if (labelsWrapperRef.current) {
-        const { right } = labelsWrapperRef.current.getBoundingClientRect();
-        const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
-        if ((labelElements == null ? void 0 : labelElements.length) > 0) {
-          Array.from(labelElements).some((x, i) => {
-            const rect = x.getBoundingClientRect();
-            if (rect.right > right - 36) {
-              setOverflowIndex(i);
-              return true;
-            }
-            return false;
-          });
-        }
-      }
-    } else {
-      setOverflowIndex(99999);
-    }
-  }, [size, compact]);
-  if (loading) {
-    return null;
-  }
-  if (!displaySystemLabels) {
-    labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
-  }
-  const mergedSx = [
-    {
-      display: "flex",
-      gap: 1,
-      width: "100%",
-      alignItems: "center",
-      overflow: "hidden",
-      flexWrap: compact ? "no-wrap" : "wrap"
-    },
-    ...Array.isArray(sx) ? sx : [sx]
-  ];
-  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, ref: labelsWrapperRef, children: [
-    prepend,
-    labelNodes.map((item, index) => {
-      if (!item) {
-        return null;
-      }
-      const visible = index < overflowIndex;
-      let extra = null;
-      if (index === overflowIndex) {
-        extra = /* @__PURE__ */ jsx(
-          Box$1,
-          {
-            sx: {
-              display: "inline-flex",
-              ...compact && { height: 20, lineHeight: "20px" },
-              color: "text.secondary",
-              fontWeight: "bold",
-              fontSize: 14
-            },
-            children: `+${labelNodes.length - overflowIndex}`
-          },
-          "overflow-label"
-        );
-      }
-      let labelChip = /* @__PURE__ */ jsx(
-        LabelChip,
-        {
-          label: item,
-          onClick: onItemClick,
-          sx: {
-            visibility: visible ? "visible" : "hidden",
-            pointerEvents: visible ? "auto" : "none"
-          }
-        },
-        item.data.id
-      );
-      if (renderLabel) {
-        labelChip = renderLabel(item, labelChip);
-      }
-      if (extra) {
-        return [extra, labelChip];
-      }
-      return labelChip;
-    })
-  ] });
-}
 function LabelsInput({
   value = [],
   onChange,

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"), 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"), require("chroma-js")) : 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", "chroma-js"], 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, global.chroma));
-})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseIcon, DoneIcon, chroma) {
+  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"), require("chroma-js")) : 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", "chroma-js"], 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.CloseOutlineIcon, global.DoneIcon, global.chroma));
+})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseOutlineIcon, DoneIcon, chroma) {
   "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) => {
@@ -573,6 +573,9 @@ var __publicField = (obj, key, value) => {
       var _a;
       return ((_a = nodesKeyById[id]) == null ? void 0 : _a.getFullName(locale)) ?? id;
     };
+    const parseLabelsStr = react.useCallback((labelIdsStr) => {
+      return (labelIdsStr == null ? void 0 : labelIdsStr.split(",").filter(Boolean)) || [];
+    }, []);
     return {
       ...state,
       flattenedLabels: flattened,
@@ -587,7 +590,8 @@ var __publicField = (obj, key, value) => {
       addLabelNode,
       updateLabelNode,
       removeLabelNode,
-      getFullLabelName
+      getFullLabelName,
+      parseLabelsStr
     };
   };
   const LabelsContainer = unstatedNext.createContainer(useLabels);
@@ -739,6 +743,197 @@ var __publicField = (obj, key, value) => {
     ] });
   }
   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" }) });
+  const getTextColor = (color) => {
+    return chroma(color).hex();
+  };
+  const getBorderColor = (color) => {
+    if (chroma(color).luminance() > 0.5) {
+      return chroma(color).darken(3).hex();
+    }
+    return chroma(color).brighten(0.5).alpha(0.25).hex();
+  };
+  const getBackgroundColor = (color) => {
+    if (chroma(color).luminance() > 0.5) {
+      return chroma(color).darken(2.5).hex();
+    }
+    return chroma(color).brighten(2.5).alpha(0.25).hex();
+  };
+  const getFilterStyle = (color) => {
+    if (chroma(color).luminance() > 0.5) {
+      return "brightness(0.85) contrast(1.2)";
+    }
+    return "brightness(0.85) contrast(1.2)";
+  };
+  function LabelChip({
+    label,
+    onDelete,
+    sx,
+    fullName = true,
+    onClick,
+    disabled = false
+  }) {
+    const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+    const mergedSx = [
+      {
+        height: 20,
+        borderRadius: 0.5,
+        fontSize: 12,
+        fontWeight: 500,
+        color: `${getTextColor(label.data.color)} !important`,
+        bgcolor: `${getBackgroundColor(label.data.color)} !important`,
+        transition: "filter 0.2s",
+        borderColor: `${getBorderColor(label.data.color)} !important`,
+        // -webkit-text-fill-color
+        WebkitTextFillColor: `${getTextColor(label.data.color)} !important`,
+        ".MuiChip-deleteIcon": {
+          color: `${getTextColor(label.data.color)} !important`,
+          cursor: "pointer",
+          transition: "transform 0.3s",
+          "&:hover": {
+            transform: "rotate(90deg)"
+          }
+        },
+        ".MuiChip-label": {
+          px: 0.5,
+          maxHeight: 20
+        },
+        ...onClick && {
+          cursor: "pointer",
+          "&:hover": {
+            filter: getFilterStyle(label.data.color)
+          }
+        }
+      },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    const hasDelete = !disabled && !!onDelete;
+    const hasOnClick = !disabled && !!onClick;
+    return (
+      // @ts-ignore
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
+          variant: "outlined",
+          size: "small",
+          ...hasDelete && {
+            onDelete: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onDelete(label);
+            },
+            deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseOutlineIcon, {})
+          },
+          ...hasOnClick && {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClick(label);
+            }
+          },
+          sx: mergedSx
+        },
+        label.data.id
+      )
+    );
+  }
+  function Labels2({
+    compact = true,
+    labels,
+    sx,
+    renderLabel,
+    prepend,
+    displaySystemLabels = true,
+    onItemClick
+  }) {
+    const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+    const labelsWrapperRef = react.useRef(null);
+    const [overflowIndex, setOverflowIndex] = react.useState(99999);
+    let labelNodes = getLabelsByIds(labels || []);
+    const size = ahooks.useSize(labelsWrapperRef);
+    ahooks.useDeepCompareLayoutEffect(() => {
+      if (compact) {
+        if (labelsWrapperRef.current) {
+          const { right } = labelsWrapperRef.current.getBoundingClientRect();
+          const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
+          if ((labelElements == null ? void 0 : labelElements.length) > 0) {
+            Array.from(labelElements).some((x, i) => {
+              const rect = x.getBoundingClientRect();
+              if (rect.right > right - 36) {
+                setOverflowIndex(i);
+                return true;
+              }
+              return false;
+            });
+          }
+        }
+      } else {
+        setOverflowIndex(99999);
+      }
+    }, [size, compact]);
+    if (loading) {
+      return null;
+    }
+    if (!displaySystemLabels) {
+      labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
+    }
+    const mergedSx = [
+      {
+        display: "flex",
+        gap: 1,
+        width: "100%",
+        alignItems: "center",
+        overflow: "hidden",
+        flexWrap: compact ? "no-wrap" : "wrap"
+      },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, ref: labelsWrapperRef, children: [
+      prepend,
+      labelNodes.map((item, index) => {
+        if (!item) {
+          return null;
+        }
+        const visible = index < overflowIndex;
+        let extra = null;
+        if (index === overflowIndex) {
+          extra = /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              sx: {
+                display: "inline-flex",
+                ...compact && { height: 20, lineHeight: "20px" },
+                color: "text.secondary",
+                fontWeight: "bold",
+                fontSize: 14
+              },
+              children: `+${labelNodes.length - overflowIndex}`
+            },
+            "overflow-label"
+          );
+        }
+        let labelChip = /* @__PURE__ */ jsxRuntime.jsx(
+          LabelChip,
+          {
+            label: item,
+            onClick: onItemClick,
+            sx: {
+              visibility: visible ? "visible" : "hidden",
+              pointerEvents: visible ? "auto" : "none"
+            }
+          },
+          item.data.id
+        );
+        if (renderLabel) {
+          labelChip = renderLabel(item, labelChip);
+        }
+        if (extra) {
+          return [extra, labelChip];
+        }
+        return labelChip;
+      })
+    ] });
+  }
   function PopperComponent({
     disablePortal,
     anchorEl,
@@ -789,7 +984,8 @@ var __publicField = (obj, key, value) => {
     trigger,
     multiple = true,
     updateImmediately = true,
-    excludes = []
+    excludes = [],
+    disabled = false
   }) {
     const { locale } = context.useLocaleContext();
     const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
@@ -807,6 +1003,9 @@ var __publicField = (obj, key, value) => {
     }, [labels]);
     const theme = material.useTheme();
     const handleClick = (event) => {
+      if (disabled) {
+        return;
+      }
       event.preventDefault();
       setPendingValue(value);
       setAnchorEl(event.currentTarget);
@@ -948,8 +1147,8 @@ var __publicField = (obj, key, value) => {
                     {
                       component: "span",
                       sx: {
-                        width: 14,
-                        height: 14,
+                        width: 16,
+                        height: 16,
                         flexShrink: 0,
                         borderRadius: "3px",
                         mr: 1
@@ -962,17 +1161,16 @@ var __publicField = (obj, key, value) => {
                     {
                       sx: {
                         flexGrow: 1,
-                        "& span": {
-                          color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
-                        }
+                        alignItems: "center",
+                        display: "flex"
                       },
-                      children: option.getFullName(locale)
+                      children: /* @__PURE__ */ jsxRuntime.jsx(LabelChip, { label: option, disabled })
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     material.Box,
                     {
-                      component: CloseIcon,
+                      component: CloseOutlineIcon,
                       sx: { opacity: 0.6, width: 18, height: 18 },
                       style: {
                         visibility: selected ? "visible" : "hidden"
@@ -1049,184 +1247,6 @@ var __publicField = (obj, key, value) => {
       )
     ] });
   }
-  const getTextColor = (color) => {
-    return chroma(color).hex();
-  };
-  const getBorderColor = (color) => {
-    if (chroma(color).luminance() > 0.5) {
-      return chroma(color).darken(3).hex();
-    }
-    return chroma(color).brighten(0.5).alpha(0.25).hex();
-  };
-  const getBackgroundColor = (color) => {
-    if (chroma(color).luminance() > 0.5) {
-      return chroma(color).darken(2.5).hex();
-    }
-    return chroma(color).brighten(2.5).alpha(0.25).hex();
-  };
-  const getFilterStyle = (color) => {
-    if (chroma(color).luminance() > 0.5) {
-      return "brightness(0.85) contrast(1.2)";
-    }
-    return "brightness(0.85) contrast(1.2)";
-  };
-  function LabelChip({
-    label,
-    onDelete,
-    sx,
-    fullName = true,
-    onClick
-  }) {
-    const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
-    const mergedSx = [
-      {
-        height: 20,
-        borderRadius: 0.5,
-        fontSize: 12,
-        fontWeight: 500,
-        color: `${getTextColor(label.data.color)} !important`,
-        bgcolor: `${getBackgroundColor(label.data.color)} !important`,
-        transition: "filter 0.2s",
-        borderColor: `${getBorderColor(label.data.color)} !important`,
-        ".MuiChip-label": {
-          p: 0.5
-        },
-        span: {},
-        ...onClick && {
-          cursor: "pointer",
-          "&:hover": {
-            filter: getFilterStyle(label.data.color)
-          }
-        }
-      },
-      ...Array.isArray(sx) ? sx : [sx]
-    ];
-    return (
-      // @ts-ignore
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Chip,
-        {
-          label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
-          variant: "outlined",
-          size: "small",
-          ...onDelete && {
-            onDelete: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onDelete(label);
-            },
-            deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
-          },
-          ...onClick && {
-            onClick: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onClick(label);
-            }
-          },
-          sx: mergedSx
-        },
-        label.data.id
-      )
-    );
-  }
-  function Labels2({
-    compact = true,
-    labels,
-    sx,
-    renderLabel,
-    prepend,
-    displaySystemLabels = true,
-    onItemClick
-  }) {
-    const { getLabelsByIds, loading } = LabelsContainer.useContainer();
-    const labelsWrapperRef = react.useRef(null);
-    const [overflowIndex, setOverflowIndex] = react.useState(99999);
-    let labelNodes = getLabelsByIds(labels || []);
-    const size = ahooks.useSize(labelsWrapperRef);
-    ahooks.useDeepCompareLayoutEffect(() => {
-      if (compact) {
-        if (labelsWrapperRef.current) {
-          const { right } = labelsWrapperRef.current.getBoundingClientRect();
-          const labelElements = labelsWrapperRef.current.querySelectorAll(".MuiChip-root");
-          if ((labelElements == null ? void 0 : labelElements.length) > 0) {
-            Array.from(labelElements).some((x, i) => {
-              const rect = x.getBoundingClientRect();
-              if (rect.right > right - 36) {
-                setOverflowIndex(i);
-                return true;
-              }
-              return false;
-            });
-          }
-        }
-      } else {
-        setOverflowIndex(99999);
-      }
-    }, [size, compact]);
-    if (loading) {
-      return null;
-    }
-    if (!displaySystemLabels) {
-      labelNodes = labelNodes.filter((x) => !x.data.id.startsWith("system:"));
-    }
-    const mergedSx = [
-      {
-        display: "flex",
-        gap: 1,
-        width: "100%",
-        alignItems: "center",
-        overflow: "hidden",
-        flexWrap: compact ? "no-wrap" : "wrap"
-      },
-      ...Array.isArray(sx) ? sx : [sx]
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, ref: labelsWrapperRef, children: [
-      prepend,
-      labelNodes.map((item, index) => {
-        if (!item) {
-          return null;
-        }
-        const visible = index < overflowIndex;
-        let extra = null;
-        if (index === overflowIndex) {
-          extra = /* @__PURE__ */ jsxRuntime.jsx(
-            material.Box,
-            {
-              sx: {
-                display: "inline-flex",
-                ...compact && { height: 20, lineHeight: "20px" },
-                color: "text.secondary",
-                fontWeight: "bold",
-                fontSize: 14
-              },
-              children: `+${labelNodes.length - overflowIndex}`
-            },
-            "overflow-label"
-          );
-        }
-        let labelChip = /* @__PURE__ */ jsxRuntime.jsx(
-          LabelChip,
-          {
-            label: item,
-            onClick: onItemClick,
-            sx: {
-              visibility: visible ? "visible" : "hidden",
-              pointerEvents: visible ? "auto" : "none"
-            }
-          },
-          item.data.id
-        );
-        if (renderLabel) {
-          labelChip = renderLabel(item, labelChip);
-        }
-        if (extra) {
-          return [extra, labelChip];
-        }
-        return labelChip;
-      })
-    ] });
-  }
   function LabelsInput({
     value = [],
     onChange,

package/dist/label2/github-label-picker.d.ts

@@ -11,5 +11,6 @@ export interface GithubLabelPickerProps {
     multiple?: boolean;
     updateImmediately?: boolean;
     excludes?: string[];
+    disabled?: boolean;
 }
-export declare function GithubLabelPicker({ value, onChange, title, noLabelsText, buttonSx, actions, trigger, multiple, updateImmediately, excludes, }: GithubLabelPickerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function GithubLabelPicker({ value, onChange, title, noLabelsText, buttonSx, actions, trigger, multiple, updateImmediately, excludes, disabled, }: GithubLabelPickerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/label2/labels-context.d.ts

@@ -55,6 +55,7 @@ export declare const LabelsContainer: import("unstated-next").Container<{
     updateLabelNode: (id: string, payload: LabelPayload) => void;
     removeLabelNode: (id: string) => void;
     getFullLabelName: (id: string) => string;
+    parseLabelsStr: (labelIdsStr: string) => string[];
     loading: boolean;
     tree: LabelTreeNode;
     stats: {

package/dist/label2/labels2.d.ts

@@ -10,12 +10,13 @@ interface LabelsProps {
     onItemClick?: (label: LabelTreeNode) => void;
     compact?: boolean;
 }
-export declare function LabelChip({ label, onDelete, sx, fullName, onClick, }: {
+export declare function LabelChip({ label, onDelete, sx, fullName, onClick, disabled, }: {
     label: LabelTreeNode;
     onDelete?: (label: LabelTreeNode) => void;
     sx?: SxProps;
     fullName?: boolean;
     onClick?: (label: LabelTreeNode) => void;
+    disabled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function Labels2({ compact, labels, sx, renderLabel, prepend, displaySystemLabels, onItemClick, }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.6.178",
+  "version": "1.6.180",
   "files": [
     "dist"
   ],
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocklet/translation-input": "1.6.178",
+    "@blocklet/translation-input": "1.6.180",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -82,5 +82,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "48e04a03997f3131441515fe23863ed721b99366"
+  "gitHead": "87889daed2a12027c6d43c52ca59c1bdbacc764c"
 }