@blocklet/labels 1.6.239 → 1.6.241

package/dist/index.es.js

@@ -791,23 +791,198 @@ const useRecentLabels = () => {
   };
   return { recentLabels: validLabels, addRecentLabel };
 };
-function LabelChip$1({ name, selected, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    Chip,
+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,
+  renderName = (name) => name
+}) {
+  const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+  const mergedSx = [
     {
-      label: name,
-      variant: selected ? "filled" : "outlined",
-      color: "primary",
-      size: "small",
-      sx: {
-        fontWeight: "medium",
-        borderRadius: 0.75,
-        ...!selected && { bgcolor: "grey.50", borderColor: "grey.300", color: "text.secondary" }
+      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)"
+        }
       },
-      ...rest
-    }
+      ".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: renderName(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.type !== "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,
@@ -856,13 +1031,7 @@ function GithubLabelPicker({
 }) {
   const { t, locale } = useLocaleContext();
   const { isAdmin, hasAnyPassport } = useSessionContext();
-  const {
-    flattenedLabels: labels,
-    getLabelsByIds,
-    loading,
-    createLabel,
-    getLabelName
-  } = LabelsContainer.useContainer();
+  const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
   const [anchorEl, setAnchorEl] = useState(null);
   const [pendingValue, setPendingValue] = useState([]);
   const pendingOptions = useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
@@ -910,6 +1079,16 @@ function GithubLabelPicker({
   };
   const open = Boolean(anchorEl);
   const id = open ? "github-label-picker" : void 0;
+  const getSelectedSx = (selected) => {
+    if (selected) {
+      return {
+        bgcolor: (theme) => `${theme.palette.primary.main} !important`,
+        color: (theme) => `${theme.palette.primary.contrastText} !important`,
+        WebkitTextFillColor: (theme) => `${theme.palette.primary.contrastText} !important`
+      };
+    }
+    return void 0;
+  };
   if (loading) {
     return null;
   }
@@ -1025,7 +1204,19 @@ function GithubLabelPicker({
                       }
                     }
                   },
-                  /* @__PURE__ */ jsx(LabelChip$1, { name: getLabelName(label.id), selected })
+                  /* @__PURE__ */ jsx(
+                    LabelChip,
+                    {
+                      label: option,
+                      sx: {
+                        height: 24,
+                        lineHeight: "24px",
+                        ".MuiChip-label": { maxHeight: 24 },
+                        ...getSelectedSx(selected)
+                      },
+                      fullName: false
+                    }
+                  )
                 );
               },
               groupBy: () => "x",
@@ -1033,15 +1224,21 @@ function GithubLabelPicker({
                 return /* @__PURE__ */ jsxs(Fragment$1, { children: [
                   !!(initialRecentLabels == null ? void 0 : initialRecentLabels.length) && /* @__PURE__ */ jsxs("li", { children: [
                     /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.recently") }),
-                    /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: initialRecentLabels.map((x) => {
+                    /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75, mb: 2 }, children: initialRecentLabels.map((x) => {
                       const selected = value == null ? void 0 : value.includes(x);
                       return /* @__PURE__ */ jsx(
-                        LabelChip$1,
+                        LabelChip,
                         {
-                          name: getLabelName(x),
-                          selected,
+                          label: getLabelsByIds([x])[0],
+                          fullName: false,
                           onClick: () => {
                             handleChange(selected ? pendingValue.filter((y) => y !== x) : [...pendingValue, x]);
+                          },
+                          sx: {
+                            height: 24,
+                            lineHeight: "24px",
+                            ".MuiChip-label": { maxHeight: 24 },
+                            ...getSelectedSx(selected)
                           }
                         },
                         x
@@ -1049,7 +1246,7 @@ function GithubLabelPicker({
                     }) })
                   ] }),
                   /* @__PURE__ */ jsxs("li", { children: [
-                    /* @__PURE__ */ jsx(Box$1, { sx: { mt: 1, mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.title") }),
+                    /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.title") }),
                     /* @__PURE__ */ jsx(
                       Box$1,
                       {
@@ -1058,7 +1255,7 @@ function GithubLabelPicker({
                           display: "flex",
                           justifyContent: "flex-start",
                           flexWrap: "wrap",
-                          gap: 0.5,
+                          gap: 0.75,
                           p: 0
                         },
                         children: params.children
@@ -1130,198 +1327,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,
-  disabled = false,
-  renderName = (name) => name
-}) {
-  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: renderName(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.type !== "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

@@ -778,23 +778,198 @@ var __publicField = (obj, key, value) => {
     };
     return { recentLabels: validLabels, addRecentLabel };
   };
-  function LabelChip$1({ name, selected, ...rest }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      material.Chip,
+  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,
+    renderName = (name) => name
+  }) {
+    const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
+    const mergedSx = [
       {
-        label: name,
-        variant: selected ? "filled" : "outlined",
-        color: "primary",
-        size: "small",
-        sx: {
-          fontWeight: "medium",
-          borderRadius: 0.75,
-          ...!selected && { bgcolor: "grey.50", borderColor: "grey.300", color: "text.secondary" }
+        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)"
+          }
         },
-        ...rest
-      }
+        ".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: renderName(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.type !== "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,
@@ -843,13 +1018,7 @@ var __publicField = (obj, key, value) => {
   }) {
     const { t, locale } = context.useLocaleContext();
     const { isAdmin, hasAnyPassport } = useSessionContext();
-    const {
-      flattenedLabels: labels,
-      getLabelsByIds,
-      loading,
-      createLabel,
-      getLabelName
-    } = LabelsContainer.useContainer();
+    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]);
@@ -897,6 +1066,16 @@ var __publicField = (obj, key, value) => {
     };
     const open = Boolean(anchorEl);
     const id = open ? "github-label-picker" : void 0;
+    const getSelectedSx = (selected) => {
+      if (selected) {
+        return {
+          bgcolor: (theme) => `${theme.palette.primary.main} !important`,
+          color: (theme) => `${theme.palette.primary.contrastText} !important`,
+          WebkitTextFillColor: (theme) => `${theme.palette.primary.contrastText} !important`
+        };
+      }
+      return void 0;
+    };
     if (loading) {
       return null;
     }
@@ -1012,7 +1191,19 @@ var __publicField = (obj, key, value) => {
                         }
                       }
                     },
-                    /* @__PURE__ */ jsxRuntime.jsx(LabelChip$1, { name: getLabelName(label.id), selected })
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      LabelChip,
+                      {
+                        label: option,
+                        sx: {
+                          height: 24,
+                          lineHeight: "24px",
+                          ".MuiChip-label": { maxHeight: 24 },
+                          ...getSelectedSx(selected)
+                        },
+                        fullName: false
+                      }
+                    )
                   );
                 },
                 groupBy: () => "x",
@@ -1020,15 +1211,21 @@ var __publicField = (obj, key, value) => {
                   return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
                     !!(initialRecentLabels == null ? void 0 : initialRecentLabels.length) && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.recently") }),
-                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: initialRecentLabels.map((x) => {
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75, mb: 2 }, children: initialRecentLabels.map((x) => {
                         const selected = value == null ? void 0 : value.includes(x);
                         return /* @__PURE__ */ jsxRuntime.jsx(
-                          LabelChip$1,
+                          LabelChip,
                           {
-                            name: getLabelName(x),
-                            selected,
+                            label: getLabelsByIds([x])[0],
+                            fullName: false,
                             onClick: () => {
                               handleChange(selected ? pendingValue.filter((y) => y !== x) : [...pendingValue, x]);
+                            },
+                            sx: {
+                              height: 24,
+                              lineHeight: "24px",
+                              ".MuiChip-label": { maxHeight: 24 },
+                              ...getSelectedSx(selected)
                             }
                           },
                           x
@@ -1036,7 +1233,7 @@ var __publicField = (obj, key, value) => {
                       }) })
                     ] }),
                     /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1, mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.title") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.title") }),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         material.Box,
                         {
@@ -1045,7 +1242,7 @@ var __publicField = (obj, key, value) => {
                             display: "flex",
                             justifyContent: "flex-start",
                             flexWrap: "wrap",
-                            gap: 0.5,
+                            gap: 0.75,
                             p: 0
                           },
                           children: params.children
@@ -1117,198 +1314,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,
-    disabled = false,
-    renderName = (name) => name
-  }) {
-    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: renderName(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.type !== "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/labels2.d.ts

@@ -1,5 +1,5 @@
 import { LabelTreeNode } from './tree';
-import { SxProps } from '@mui/material';
+import { Theme, SxProps } from '@mui/material';
 
 export interface LabelsProps {
     labels: string[] | undefined | null;
@@ -13,7 +13,7 @@ export interface LabelsProps {
 export interface LabelChipProps {
     label: LabelTreeNode;
     onDelete?: (label: LabelTreeNode) => void;
-    sx?: SxProps;
+    sx?: SxProps<Theme>;
     fullName?: boolean;
     onClick?: (label: LabelTreeNode) => void;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "1.6.239",
+  "version": "1.6.241",
   "files": [
     "dist"
   ],
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@blocklet/translation-input": "1.6.239",
+    "@blocklet/translation-input": "1.6.241",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -83,5 +83,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "14c8c180f957d6b4574cefaaf60202b6afeb1a53"
+  "gitHead": "12f3e4ffaaa3856d2c71875efcb0268fad0d8a59"
 }