@blocklet/labels 1.6.205 → 1.6.207

package/dist/index.es.js

@@ -13,15 +13,14 @@ import { Tree } from "react-arborist";
 import { Icon } from "@iconify/react";
 import omit from "lodash/omit";
 import Select, { components } from "react-select";
-import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
+import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useReactive, useRequest, useSize, useDeepCompareLayoutEffect } from "ahooks";
+import { useReactive, useRequest, useLocalStorageState, useSize, useDeepCompareLayoutEffect } from "ahooks";
 import { createContainer } from "unstated-next";
 import { arrayToTree } from "performant-array-to-tree";
-import CloseOutlineIcon from "@mui/icons-material/Close";
-import DoneIcon from "@mui/icons-material/Done";
-import chroma from "chroma-js";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import chroma from "chroma-js";
+import CloseOutlineIcon from "@mui/icons-material/Close";
 const materialSymbolsLabelRounded = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z" }) });
 const materialSymbolsCheckSmall = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) });
 const LabelTreeContext = createContext({});
@@ -761,198 +760,6 @@ 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,
-  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;
-    })
-  ] });
-}
 const useSessionContext = () => {
   var _a, _b;
   const ctx = useContext(SessionContext) || {};
@@ -969,6 +776,39 @@ const useSessionContext = () => {
     }
   };
 };
+const useRecentLabels = () => {
+  const [recentLabels = [], setRecentLabels] = 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__ */ jsx(
+    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,
@@ -981,25 +821,17 @@ function PopperComponent({
       ...other,
       sx: (theme) => ({
         [`& .${autocompleteClasses.paper}`]: {
+          width: 360,
           boxShadow: "none",
           margin: 0,
           color: "inherit",
           fontSize: 13
         },
         [`& .${autocompleteClasses.listbox}`]: {
-          backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
-          padding: 0,
+          bgcolor: theme.palette.mode === "light" ? "#fff" : "#1c2128",
+          padding: 1,
           [`& .${autocompleteClasses.option}`]: {
-            minHeight: "auto",
-            alignItems: "flex-start",
-            padding: 1,
-            borderBottom: `1px solid  ${theme.palette.mode === "light" ? " #eaecef" : "#30363d"}`,
-            '&[aria-selected="true"]': {
-              backgroundColor: "transparent"
-            },
-            [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]: {
-              backgroundColor: theme.palette.action.hover
-            }
+            minHeight: "auto"
           }
         },
         [`&.${autocompleteClasses.popperDisablePortal}`]: {
@@ -1012,7 +844,6 @@ function PopperComponent({
 function GithubLabelPicker({
   value = [],
   onChange,
-  title,
   noLabelsText,
   buttonSx,
   actions,
@@ -1023,9 +854,15 @@ function GithubLabelPicker({
   disabled = false,
   enableAccessControl = true
 }) {
-  const { locale } = useLocaleContext();
+  const { t, locale } = 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] = useState(null);
   const [pendingValue, setPendingValue] = useState([]);
   const pendingOptions = useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
@@ -1038,7 +875,8 @@ function GithubLabelPicker({
     const excludesSet = new Set(excludes);
     return labels.filter((x) => !excludesSet.has(x.data.id));
   }, [labels]);
-  const theme = useTheme();
+  const { recentLabels, addRecentLabels } = useRecentLabels();
+  const initialRecentLabels = useMemo(() => recentLabels, [anchorEl]);
   const handleClick = (event) => {
     if (disabled) {
       return;
@@ -1061,6 +899,16 @@ function GithubLabelPicker({
     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) {
@@ -1083,7 +931,7 @@ function GithubLabelPicker({
             "aria-describedby": id,
             className: "label-picker-trigger",
             sx: [
-              (t) => ({
+              () => ({
                 width: "100%",
                 fontSize: 13,
                 color: t.palette.mode === "light" ? "#586069" : "#8b949e",
@@ -1112,28 +960,18 @@ function GithubLabelPicker({
         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__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box$1, { onClick: (e) => e.preventDefault(), children: [
-          title && /* @__PURE__ */ jsx(
-            Box$1,
-            {
-              sx: {
-                borderBottom: `1px solid ${theme.palette.mode === "light" ? "#eaecef" : "#30363d"}`,
-                padding: "8px 10px",
-                fontWeight: 600
-              },
-              children: title
-            }
-          ),
           /* @__PURE__ */ jsx(
             Autocomplete,
             {
@@ -1157,13 +995,7 @@ function GithubLabelPicker({
                 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,
@@ -1177,74 +1009,62 @@ function GithubLabelPicker({
                 ];
                 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__ */ createElement(
                   Box$1,
                   {
                     component: "li",
                     ...props,
-                    key: option.data.id,
+                    key: label.id,
                     sx: {
-                      ...!isPermitted && { bgcolor: "grey.100", cursor: "not-allowed!important" }
+                      "&.MuiAutocomplete-option": {
+                        p: 0
+                      }
                     }
                   },
-                  /* @__PURE__ */ jsxs(
-                    Box$1,
-                    {
-                      sx: {
-                        display: "flex",
-                        alignItems: "center",
-                        width: 1
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Box$1,
-                          {
-                            component: DoneIcon,
-                            sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
-                            style: {
-                              visibility: selected ? "visible" : "hidden"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Box$1,
-                          {
-                            sx: {
-                              flexGrow: 1,
-                              alignItems: "center",
-                              display: "flex"
-                            },
-                            children: /* @__PURE__ */ jsx(LabelChip, { label: option, disabled: disabled || !isPermitted })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Box$1,
-                          {
-                            component: CloseOutlineIcon,
-                            sx: { opacity: 0.6, width: 18, height: 18 },
-                            style: {
-                              visibility: selected ? "visible" : "hidden"
-                            }
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ 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__ */ jsxs(Fragment, { 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) => {
+                      const selected = value == null ? void 0 : value.includes(x);
+                      return /* @__PURE__ */ jsx(
+                        LabelChip$1,
+                        {
+                          name: getLabelName(x),
+                          selected,
+                          onClick: () => {
+                            handleChange(selected ? pendingValue.filter((y) => y !== x) : [...pendingValue, x]);
+                          }
+                        }
+                      );
+                    }) })
+                  ] }),
+                  /* @__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,
+                      {
+                        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__ */ jsx(
                 Box$1,
@@ -1254,20 +1074,20 @@ function GithubLabelPicker({
                   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" ? 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" ? alpha(theme.palette.primary.light, 0.4) : "rgb(12, 45, 107)"}`,
+                        borderColor: theme.palette.mode === "light" ? theme.palette.primary.light : "#388bfd"
                       }
                     }
                   })
@@ -1307,6 +1127,198 @@ 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,