@blocklet/labels 1.6.206 → 1.6.208

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"), require("@arcblock/did-connect/lib/Session")) : 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", "@arcblock/did-connect/lib/Session"], 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, global.Session));
-})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, CloseOutlineIcon, DoneIcon, chroma, Session) {
+  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("@arcblock/did-connect/lib/Session"), require("chroma-js"), require("@mui/icons-material/Close")) : 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", "@arcblock/did-connect/lib/Session", "chroma-js", "@mui/icons-material/Close"], 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.Session, global.chroma, global.CloseOutlineIcon));
+})(this, function(exports2, jsxRuntime, react, iconsMaterial, Box, styles, reactArborist, react$1, omit, Select, material, context, ahooks, unstatedNext, performantArrayToTree, Session, chroma, CloseOutlineIcon) {
   "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) => {
@@ -747,198 +747,6 @@ 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,
-    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;
-      })
-    ] });
-  }
   const useSessionContext = () => {
     var _a, _b;
     const ctx = react.useContext(Session.SessionContext) || {};
@@ -955,6 +763,39 @@ var __publicField = (obj, key, value) => {
       }
     };
   };
+  const useRecentLabels = () => {
+    const [recentLabels = [], setRecentLabels] = ahooks.useLocalStorageState("recent-labels", {
+      defaultValue: []
+    });
+    const addRecentLabel = (label) => {
+      if (recentLabels.includes(label)) {
+        return;
+      }
+      const newLabels = [label, ...recentLabels].slice(0, 10);
+      setRecentLabels(newLabels);
+    };
+    const addRecentLabels = (labels) => {
+      labels.forEach((x) => addRecentLabel(x));
+    };
+    return { recentLabels, addRecentLabel, addRecentLabels };
+  };
+  function LabelChip$1({ name, selected, ...rest }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      material.Chip,
+      {
+        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" }
+        },
+        ...rest
+      }
+    );
+  }
   function PopperComponent({
     disablePortal,
     anchorEl,
@@ -967,25 +808,17 @@ var __publicField = (obj, key, value) => {
         ...other,
         sx: (theme) => ({
           [`& .${material.autocompleteClasses.paper}`]: {
+            width: 360,
             boxShadow: "none",
             margin: 0,
             color: "inherit",
             fontSize: 13
           },
           [`& .${material.autocompleteClasses.listbox}`]: {
-            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
-            padding: 0,
+            bgcolor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+            padding: 1,
             [`& .${material.autocompleteClasses.option}`]: {
-              minHeight: "auto",
-              alignItems: "flex-start",
-              padding: 1,
-              borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
-              '&[aria-selected="true"]': {
-                backgroundColor: "transparent"
-              },
-              [`&.${material.autocompleteClasses.focused}, &.${material.autocompleteClasses.focused}[aria-selected="true"]`]: {
-                backgroundColor: theme.palette.action.hover
-              }
+              minHeight: "auto"
             }
           },
           [`&.${material.autocompleteClasses.popperDisablePortal}`]: {
@@ -998,7 +831,6 @@ var __publicField = (obj, key, value) => {
   function GithubLabelPicker({
     value = [],
     onChange,
-    title,
     noLabelsText,
     buttonSx,
     actions,
@@ -1009,9 +841,15 @@ var __publicField = (obj, key, value) => {
     disabled = false,
     enableAccessControl = true
   }) {
-    const { locale } = context.useLocaleContext();
+    const { t, locale } = context.useLocaleContext();
     const { isAdmin, hasAnyPassport } = useSessionContext();
-    const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
+    const {
+      flattenedLabels: labels,
+      getLabelsByIds,
+      loading,
+      createLabel,
+      getLabelName
+    } = LabelsContainer.useContainer();
     const [anchorEl, setAnchorEl] = react.useState(null);
     const [pendingValue, setPendingValue] = react.useState([]);
     const pendingOptions = react.useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
@@ -1024,7 +862,8 @@ var __publicField = (obj, key, value) => {
       const excludesSet = new Set(excludes);
       return labels.filter((x) => !excludesSet.has(x.data.id));
     }, [labels]);
-    const theme = material.useTheme();
+    const { recentLabels, addRecentLabels } = useRecentLabels();
+    const initialRecentLabels = react.useMemo(() => recentLabels, [anchorEl]);
     const handleClick = (event) => {
       if (disabled) {
         return;
@@ -1047,6 +886,16 @@ var __publicField = (obj, key, value) => {
       const { id: id2 } = await createLabel(inputValue);
       setPendingValue([...pendingValue, id2]);
     };
+    const handleChange = (newValue) => {
+      setPendingValue(newValue);
+      addRecentLabels(newValue);
+      if (!multiple) {
+        onChange == null ? void 0 : onChange(newValue.length ? [newValue[newValue.length - 1]] : []);
+        setAnchorEl(null);
+      } else if (updateImmediately) {
+        onChange(newValue);
+      }
+    };
     const open = Boolean(anchorEl);
     const id = open ? "github-label-picker" : void 0;
     if (loading) {
@@ -1069,7 +918,7 @@ var __publicField = (obj, key, value) => {
               "aria-describedby": id,
               className: "label-picker-trigger",
               sx: [
-                (t) => ({
+                () => ({
                   width: "100%",
                   fontSize: 13,
                   color: t.palette.mode === "light" ? "#586069" : "#8b949e",
@@ -1098,28 +947,18 @@ var __publicField = (obj, key, value) => {
           anchorEl,
           placement: "bottom-start",
           disablePortal: true,
-          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,
+          sx: (theme) => ({
+            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: 1,
+            width: 360,
+            overflow: "hidden",
+            zIndex: theme.zIndex.modal,
             fontSize: 13,
-            color: t.palette.mode === "light" ? "#24292e" : "#c9d1d9",
-            backgroundColor: t.palette.mode === "light" ? "#fff" : "#1c2128"
+            color: theme.palette.mode === "light" ? "#24292e" : "#c9d1d9",
+            backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { onClick: (e) => e.preventDefault(), children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx(
-              material.Box,
-              {
-                sx: {
-                  borderBottom: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
-                  padding: "8px 10px",
-                  fontWeight: 600
-                },
-                children: title
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               material.Autocomplete,
               {
@@ -1143,13 +982,7 @@ var __publicField = (obj, key, value) => {
                   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);
-                  } else if (updateImmediately) {
-                    onChange(newValue.map((x) => x.data.id));
-                  }
+                  handleChange(newValue.map((x) => x.data.id));
                 },
                 disableCloseOnSelect: true,
                 PopperComponent,
@@ -1163,74 +996,62 @@ var __publicField = (obj, key, value) => {
                   ];
                   const isPermitted = !enableAccessControl || isAdmin || hasAnyPassport(passportsToCheck);
                   if (!isPermitted) {
-                    props.onClick = () => {
-                    };
-                    if (!(value == null ? void 0 : value.includes(label.id))) {
-                      return null;
-                    }
+                    return null;
                   }
                   return /* @__PURE__ */ react.createElement(
                     material.Box,
                     {
                       component: "li",
                       ...props,
-                      key: option.data.id,
+                      key: label.id,
                       sx: {
-                        ...!isPermitted && { bgcolor: "grey.100", cursor: "not-allowed!important" }
+                        "&.MuiAutocomplete-option": {
+                          p: 0
+                        }
                       }
                     },
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      material.Box,
-                      {
-                        sx: {
-                          display: "flex",
-                          alignItems: "center",
-                          width: 1
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            material.Box,
-                            {
-                              component: DoneIcon,
-                              sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
-                              style: {
-                                visibility: selected ? "visible" : "hidden"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            material.Box,
-                            {
-                              sx: {
-                                flexGrow: 1,
-                                alignItems: "center",
-                                display: "flex"
-                              },
-                              children: /* @__PURE__ */ jsxRuntime.jsx(LabelChip, { label: option, disabled: disabled || !isPermitted })
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            material.Box,
-                            {
-                              component: CloseOutlineIcon,
-                              sx: { opacity: 0.6, width: 18, height: 18 },
-                              style: {
-                                visibility: selected ? "visible" : "hidden"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    )
+                    /* @__PURE__ */ jsxRuntime.jsx(LabelChip$1, { name: getLabelName(label.id), selected })
                   );
                 },
-                options: [...filteredLabels].sort((a, b) => {
-                  let ai = value.indexOf(a.data.id);
-                  ai = ai === -1 ? value.length + filteredLabels.indexOf(a) : ai;
-                  let bi = value.indexOf(b.data.id);
-                  bi = bi === -1 ? value.length + filteredLabels.indexOf(b) : bi;
-                  return ai - bi;
-                }),
+                groupBy: () => "x",
+                renderGroup: (params) => {
+                  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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) => {
+                        const selected = value == null ? void 0 : value.includes(x);
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          LabelChip$1,
+                          {
+                            name: getLabelName(x),
+                            selected,
+                            onClick: () => {
+                              handleChange(selected ? pendingValue.filter((y) => y !== x) : [...pendingValue, x]);
+                            }
+                          }
+                        );
+                      }) })
+                    ] }),
+                    /* @__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,
+                        {
+                          component: "ul",
+                          sx: {
+                            display: "flex",
+                            justifyContent: "flex-start",
+                            flexWrap: "wrap",
+                            gap: 0.5,
+                            p: 0
+                          },
+                          children: params.children
+                        }
+                      )
+                    ] })
+                  ] });
+                },
+                options: filteredLabels,
                 getOptionLabel: (option) => option.data.getName(locale),
                 renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
                   material.Box,
@@ -1240,20 +1061,20 @@ var __publicField = (obj, key, value) => {
                     inputProps: params.inputProps,
                     autoFocus: true,
                     placeholder: "Filter labels",
-                    sx: (t) => ({
+                    sx: (theme) => ({
                       padding: 1,
                       width: "100%",
-                      borderBottom: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                      bgcolor: "#fff",
                       "& input": {
-                        borderRadius: "4px",
-                        backgroundColor: t.palette.mode === "light" ? "#fff" : "#0d1117",
+                        borderRadius: 1,
+                        backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
                         padding: 1,
-                        transition: t.transitions.create(["border-color", "box-shadow"]),
-                        border: `1px solid ${t.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
+                        transition: theme.transitions.create(["border-color", "box-shadow"]),
+                        border: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
                         fontSize: 14,
                         "&:focus": {
-                          boxShadow: `0px 0px 0px 3px ${t.palette.mode === "light" ? material.alpha(t.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
-                          borderColor: t.palette.mode === "light" ? t.palette.primary.light : "#388bfd"
+                          boxShadow: `0px 0px 0px 3px ${theme.palette.mode === "light" ? material.alpha(theme.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
+                          borderColor: theme.palette.mode === "light" ? theme.palette.primary.light : "#388bfd"
                         }
                       }
                     })
@@ -1293,6 +1114,198 @@ 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,