@blocklet/labels 2.1.184 → 2.1.186

package/dist/index.es.js

@@ -1035,8 +1035,8 @@ function GithubLabelPicker({
   const { isAdmin, hasAnyPassport } = useSessionContext();
   const { flattenedLabels: labels, getLabelsByIds, loading, createLabel } = LabelsContainer.useContainer();
   const [anchorEl, setAnchorEl] = useState(null);
-  const [pendingValue, setPendingValue] = useState([]);
-  const pendingOptions = useMemo(() => getLabelsByIds(pendingValue), [getLabelsByIds, pendingValue]);
+  const selectedLabelIds = value;
+  const selectedLabels = useMemo(() => getLabelsByIds(selectedLabelIds), [getLabelsByIds, selectedLabelIds]);
   const [inputValue, setInputValue] = useState("");
   const exists = useMemo(
     () => labels.some((x) => x.data.getName(locale).toLowerCase() === inputValue.toLowerCase()),
@@ -1053,12 +1053,11 @@ function GithubLabelPicker({
       return;
     }
     event.preventDefault();
-    setPendingValue(value);
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     if (!updateImmediately) {
-      onChange == null ? void 0 : onChange(pendingValue);
+      onChange == null ? void 0 : onChange(selectedLabelIds);
     }
     setInputValue("");
     if (anchorEl) {
@@ -1068,10 +1067,13 @@ function GithubLabelPicker({
   };
   const handleCreate = async () => {
     const { id: id2 } = await createLabel(inputValue);
-    setPendingValue([...pendingValue, id2]);
+    if (!multiple) {
+      onChange == null ? void 0 : onChange([id2]);
+    } else if (updateImmediately) {
+      onChange([...selectedLabelIds, id2]);
+    }
   };
-  const handleChange = (newValue) => {
-    setPendingValue(newValue);
+  const handleLabelSelectionChange = (newValue) => {
     if (!multiple) {
       onChange == null ? void 0 : onChange(newValue.length ? [newValue[newValue.length - 1]] : []);
       setAnchorEl(null);
@@ -1100,43 +1102,206 @@ function GithubLabelPicker({
   if (loading) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box$1,
+  function renderRecentLabels() {
+    const recentLabelNodes = getLabelsByIds(initialRecentLabels).filter(isLabelPermitted);
+    if (!(recentLabelNodes == null ? void 0 : recentLabelNodes.length)) {
+      return null;
+    }
+    return /* @__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.75, mb: 2 }, children: recentLabelNodes.map((x) => {
+        const labelId = x.data.id;
+        const selected = value == null ? void 0 : value.includes(labelId);
+        return /* @__PURE__ */ jsx(
+          LabelChip,
+          {
+            label: x,
+            fullName: false,
+            onClick: () => {
+              handleLabelSelectionChange(
+                selected ? selectedLabelIds.filter((y) => y !== labelId) : [...selectedLabelIds, labelId]
+              );
+            },
+            sx: {
+              height: 24,
+              lineHeight: "24px",
+              ".MuiChip-label": { maxHeight: 24 },
+              ...getSelectedSx(selected)
+            }
+          },
+          labelId
+        );
+      }) })
+    ] });
+  }
+  function renderGroup(params) {
+    return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(Box$1, { sx: { 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.75,
+            p: 0
+          },
+          children: params.children
+        }
+      )
+    ] });
+  }
+  function renderAutocomplete() {
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
       {
-        onClick: handleClick,
-        sx: {
-          display: "flex",
-          alignItems: "center"
+        open: true,
+        multiple: true,
+        inputValue,
+        onInputChange: (event, newInputValue, reason) => {
+          if (reason === "reset") {
+            return;
+          }
+          setInputValue(newInputValue);
+        },
+        onClose: (event, reason) => {
+          if (reason === "escape") {
+            handleClose();
+          }
+        },
+        value: selectedLabels,
+        onChange: (event, newValue, reason) => {
+          event.preventDefault();
+          if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+            return;
+          }
+          if (reason === "selectOption") {
+            addRecentLabel(newValue[newValue.length - 1].data.id);
+          }
+          handleLabelSelectionChange(newValue.map((x) => x.data.id));
+        },
+        disableCloseOnSelect: true,
+        PopperComponent,
+        renderTags: () => null,
+        noOptionsText: noLabelsText || "No labels",
+        renderOption: (props, option, { selected }) => {
+          const isPermitted = isLabelPermitted(option);
+          if (!isPermitted) {
+            return null;
+          }
+          const label = option.data;
+          return /* @__PURE__ */ createElement(Box$1, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: 0 } } }, /* @__PURE__ */ jsx(
+            LabelChip,
+            {
+              label: option,
+              sx: {
+                height: 24,
+                lineHeight: "24px",
+                ".MuiChip-label": { maxHeight: 24 },
+                ...getSelectedSx(selected)
+              },
+              fullName: false
+            }
+          ));
+        },
+        groupBy: () => "x",
+        renderGroup: (params) => {
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            renderRecentLabels(),
+            renderGroup(params)
+          ] }, params.key);
         },
-        children: trigger || /* @__PURE__ */ jsx(
+        options: filteredLabels,
+        getOptionLabel: (option) => option.data.getName(locale),
+        renderInput: (params) => /* @__PURE__ */ jsx(
           Box$1,
           {
-            component: ButtonBase,
-            disableRipple: true,
-            "aria-describedby": id,
-            className: "label-picker-trigger",
-            sx: [
-              (theme) => ({
-                width: "100%",
-                fontSize: 13,
-                color: theme.palette.mode === "light" ? "#586069" : "#8b949e",
-                fontWeight: 600,
-                "&:hover": {
-                  color: theme.palette.mode === "light" ? "primary.main" : "#58a6ff"
-                },
-                "& svg": {
-                  width: 22,
-                  height: 22
+            component: InputBase,
+            ref: params.InputProps.ref,
+            inputProps: params.inputProps,
+            autoFocus: true,
+            placeholder: "Filter labels",
+            sx: (theme) => ({
+              padding: 1,
+              width: "100%",
+              bgcolor: "#fff",
+              "& input": {
+                borderRadius: 1,
+                backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
+                padding: 1,
+                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 ${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"
                 }
-              }),
-              ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
-            ],
-            children: /* @__PURE__ */ jsx(mdiTagPlusOutline, {})
+              }
+            })
           }
         )
       }
-    ),
+    );
+  }
+  function renderActions() {
+    return /* @__PURE__ */ jsxs(Box$1, { children: [
+      isAdmin && inputValue && !exists && /* @__PURE__ */ jsx(
+        Box$1,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            width: "100%",
+            height: 36,
+            px: 2,
+            borderTop: "1px solid #eee",
+            fontSize: 14,
+            color: "grey.600",
+            cursor: "pointer",
+            textDecoration: "none"
+          },
+          onClick: handleCreate,
+          children: /* @__PURE__ */ jsxs("span", { children: [
+            'Create new label "',
+            inputValue,
+            '"'
+          ] })
+        }
+      ),
+      actions
+    ] });
+  }
+  const labelInput2 = trigger;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box$1, { onClick: handleClick, sx: { display: "flex", alignItems: "center" }, children: labelInput2 || /* @__PURE__ */ jsx(
+      Box$1,
+      {
+        component: ButtonBase,
+        disableRipple: true,
+        "aria-describedby": id,
+        className: "label-picker-trigger",
+        sx: [
+          (theme) => ({
+            width: "100%",
+            fontSize: 13,
+            color: theme.palette.mode === "light" ? "#586069" : "#8b949e",
+            fontWeight: 600,
+            "&:hover": {
+              color: theme.palette.mode === "light" ? "primary.main" : "#58a6ff"
+            },
+            "& svg": {
+              width: 22,
+              height: 22
+            }
+          }),
+          ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
+        ],
+        children: /* @__PURE__ */ jsx(mdiTagPlusOutline, {})
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       Box$1,
       {
@@ -1158,178 +1323,8 @@ function GithubLabelPicker({
           backgroundColor: theme.palette.mode === "light" ? "#fff" : "#1c2128"
         }),
         children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box$1, { onClick: (e) => e.preventDefault(), children: [
-          /* @__PURE__ */ jsx(
-            Autocomplete,
-            {
-              open: true,
-              multiple: true,
-              inputValue,
-              onInputChange: (event, newInputValue, reason) => {
-                if (reason === "reset") {
-                  return;
-                }
-                setInputValue(newInputValue);
-              },
-              onClose: (event, reason) => {
-                if (reason === "escape") {
-                  handleClose();
-                }
-              },
-              value: pendingOptions,
-              onChange: (event, newValue, reason) => {
-                event.preventDefault();
-                if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
-                  return;
-                }
-                if (reason === "selectOption") {
-                  addRecentLabel(newValue[newValue.length - 1].data.id);
-                }
-                handleChange(newValue.map((x) => x.data.id));
-              },
-              disableCloseOnSelect: true,
-              PopperComponent,
-              renderTags: () => null,
-              noOptionsText: noLabelsText || "No labels",
-              renderOption: (props, option, { selected }) => {
-                const isPermitted = isLabelPermitted(option);
-                if (!isPermitted) {
-                  return null;
-                }
-                const label = option.data;
-                return /* @__PURE__ */ createElement(
-                  Box$1,
-                  {
-                    component: "li",
-                    ...props,
-                    key: label.id,
-                    sx: {
-                      "&.MuiAutocomplete-option": {
-                        p: 0
-                      }
-                    }
-                  },
-                  /* @__PURE__ */ jsx(
-                    LabelChip,
-                    {
-                      label: option,
-                      sx: {
-                        height: 24,
-                        lineHeight: "24px",
-                        ".MuiChip-label": { maxHeight: 24 },
-                        ...getSelectedSx(selected)
-                      },
-                      fullName: false
-                    }
-                  )
-                );
-              },
-              groupBy: () => "x",
-              renderGroup: (params) => {
-                const recentLabelNodes = getLabelsByIds(initialRecentLabels).filter(isLabelPermitted);
-                return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-                  !!(recentLabelNodes == null ? void 0 : recentLabelNodes.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.75, mb: 2 }, children: recentLabelNodes.map((x) => {
-                      const labelId = x.data.id;
-                      const selected = value == null ? void 0 : value.includes(labelId);
-                      return /* @__PURE__ */ jsx(
-                        LabelChip,
-                        {
-                          label: x,
-                          fullName: false,
-                          onClick: () => {
-                            handleChange(
-                              selected ? pendingValue.filter((y) => y !== labelId) : [...pendingValue, labelId]
-                            );
-                          },
-                          sx: {
-                            height: 24,
-                            lineHeight: "24px",
-                            ".MuiChip-label": { maxHeight: 24 },
-                            ...getSelectedSx(selected)
-                          }
-                        },
-                        labelId
-                      );
-                    }) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("li", { children: [
-                    /* @__PURE__ */ jsx(Box$1, { sx: { 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.75,
-                          p: 0
-                        },
-                        children: params.children
-                      }
-                    )
-                  ] })
-                ] }, params.key);
-              },
-              options: filteredLabels,
-              getOptionLabel: (option) => option.data.getName(locale),
-              renderInput: (params) => /* @__PURE__ */ jsx(
-                Box$1,
-                {
-                  component: InputBase,
-                  ref: params.InputProps.ref,
-                  inputProps: params.inputProps,
-                  autoFocus: true,
-                  placeholder: "Filter labels",
-                  sx: (theme) => ({
-                    padding: 1,
-                    width: "100%",
-                    bgcolor: "#fff",
-                    "& input": {
-                      borderRadius: 1,
-                      backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
-                      padding: 1,
-                      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 ${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"
-                      }
-                    }
-                  })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(Box$1, { children: [
-            isAdmin && inputValue && !exists && /* @__PURE__ */ jsx(
-              Box$1,
-              {
-                sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 1,
-                  width: "100%",
-                  height: 36,
-                  px: 2,
-                  borderTop: "1px solid #eee",
-                  fontSize: 14,
-                  color: "grey.600",
-                  cursor: "pointer",
-                  textDecoration: "none"
-                },
-                onClick: handleCreate,
-                children: /* @__PURE__ */ jsxs("span", { children: [
-                  'Create new label "',
-                  inputValue,
-                  '"'
-                ] })
-              }
-            ),
-            actions
-          ] })
+          renderAutocomplete(),
+          renderActions()
         ] }) })
       }
     )

package/dist/index.umd.js

@@ -1022,8 +1022,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const { isAdmin, hasAnyPassport } = useSessionContext();
     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]);
+    const selectedLabelIds = value;
+    const selectedLabels = react.useMemo(() => getLabelsByIds(selectedLabelIds), [getLabelsByIds, selectedLabelIds]);
     const [inputValue, setInputValue] = react.useState("");
     const exists = react.useMemo(
       () => labels.some((x) => x.data.getName(locale).toLowerCase() === inputValue.toLowerCase()),
@@ -1040,12 +1040,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return;
       }
       event.preventDefault();
-      setPendingValue(value);
       setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
       if (!updateImmediately) {
-        onChange == null ? void 0 : onChange(pendingValue);
+        onChange == null ? void 0 : onChange(selectedLabelIds);
       }
       setInputValue("");
       if (anchorEl) {
@@ -1055,10 +1054,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     const handleCreate = async () => {
       const { id: id2 } = await createLabel(inputValue);
-      setPendingValue([...pendingValue, id2]);
+      if (!multiple) {
+        onChange == null ? void 0 : onChange([id2]);
+      } else if (updateImmediately) {
+        onChange([...selectedLabelIds, id2]);
+      }
     };
-    const handleChange = (newValue) => {
-      setPendingValue(newValue);
+    const handleLabelSelectionChange = (newValue) => {
       if (!multiple) {
         onChange == null ? void 0 : onChange(newValue.length ? [newValue[newValue.length - 1]] : []);
         setAnchorEl(null);
@@ -1087,43 +1089,206 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (loading) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        material.Box,
+    function renderRecentLabels() {
+      const recentLabelNodes = getLabelsByIds(initialRecentLabels).filter(isLabelPermitted);
+      if (!(recentLabelNodes == null ? void 0 : recentLabelNodes.length)) {
+        return null;
+      }
+      return /* @__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.75, mb: 2 }, children: recentLabelNodes.map((x) => {
+          const labelId = x.data.id;
+          const selected = value == null ? void 0 : value.includes(labelId);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            LabelChip,
+            {
+              label: x,
+              fullName: false,
+              onClick: () => {
+                handleLabelSelectionChange(
+                  selected ? selectedLabelIds.filter((y) => y !== labelId) : [...selectedLabelIds, labelId]
+                );
+              },
+              sx: {
+                height: 24,
+                lineHeight: "24px",
+                ".MuiChip-label": { maxHeight: 24 },
+                ...getSelectedSx(selected)
+              }
+            },
+            labelId
+          );
+        }) })
+      ] });
+    }
+    function renderGroup(params) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { 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.75,
+              p: 0
+            },
+            children: params.children
+          }
+        )
+      ] });
+    }
+    function renderAutocomplete() {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Autocomplete,
         {
-          onClick: handleClick,
-          sx: {
-            display: "flex",
-            alignItems: "center"
+          open: true,
+          multiple: true,
+          inputValue,
+          onInputChange: (event, newInputValue, reason) => {
+            if (reason === "reset") {
+              return;
+            }
+            setInputValue(newInputValue);
+          },
+          onClose: (event, reason) => {
+            if (reason === "escape") {
+              handleClose();
+            }
+          },
+          value: selectedLabels,
+          onChange: (event, newValue, reason) => {
+            event.preventDefault();
+            if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+              return;
+            }
+            if (reason === "selectOption") {
+              addRecentLabel(newValue[newValue.length - 1].data.id);
+            }
+            handleLabelSelectionChange(newValue.map((x) => x.data.id));
+          },
+          disableCloseOnSelect: true,
+          PopperComponent,
+          renderTags: () => null,
+          noOptionsText: noLabelsText || "No labels",
+          renderOption: (props, option, { selected }) => {
+            const isPermitted = isLabelPermitted(option);
+            if (!isPermitted) {
+              return null;
+            }
+            const label = option.data;
+            return /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: 0 } } }, /* @__PURE__ */ jsxRuntime.jsx(
+              LabelChip,
+              {
+                label: option,
+                sx: {
+                  height: 24,
+                  lineHeight: "24px",
+                  ".MuiChip-label": { maxHeight: 24 },
+                  ...getSelectedSx(selected)
+                },
+                fullName: false
+              }
+            ));
+          },
+          groupBy: () => "x",
+          renderGroup: (params) => {
+            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              renderRecentLabels(),
+              renderGroup(params)
+            ] }, params.key);
           },
-          children: trigger || /* @__PURE__ */ jsxRuntime.jsx(
+          options: filteredLabels,
+          getOptionLabel: (option) => option.data.getName(locale),
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
             material.Box,
             {
-              component: material.ButtonBase,
-              disableRipple: true,
-              "aria-describedby": id,
-              className: "label-picker-trigger",
-              sx: [
-                (theme) => ({
-                  width: "100%",
-                  fontSize: 13,
-                  color: theme.palette.mode === "light" ? "#586069" : "#8b949e",
-                  fontWeight: 600,
-                  "&:hover": {
-                    color: theme.palette.mode === "light" ? "primary.main" : "#58a6ff"
-                  },
-                  "& svg": {
-                    width: 22,
-                    height: 22
+              component: material.InputBase,
+              ref: params.InputProps.ref,
+              inputProps: params.inputProps,
+              autoFocus: true,
+              placeholder: "Filter labels",
+              sx: (theme) => ({
+                padding: 1,
+                width: "100%",
+                bgcolor: "#fff",
+                "& input": {
+                  borderRadius: 1,
+                  backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
+                  padding: 1,
+                  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 ${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"
                   }
-                }),
-                ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
-              ],
-              children: /* @__PURE__ */ jsxRuntime.jsx(mdiTagPlusOutline, {})
+                }
+              })
             }
           )
         }
-      ),
+      );
+    }
+    function renderActions() {
+      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+        isAdmin && inputValue && !exists && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              width: "100%",
+              height: 36,
+              px: 2,
+              borderTop: "1px solid #eee",
+              fontSize: 14,
+              color: "grey.600",
+              cursor: "pointer",
+              textDecoration: "none"
+            },
+            onClick: handleCreate,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              'Create new label "',
+              inputValue,
+              '"'
+            ] })
+          }
+        ),
+        actions
+      ] });
+    }
+    const labelInput2 = trigger;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { onClick: handleClick, sx: { display: "flex", alignItems: "center" }, children: labelInput2 || /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          component: material.ButtonBase,
+          disableRipple: true,
+          "aria-describedby": id,
+          className: "label-picker-trigger",
+          sx: [
+            (theme) => ({
+              width: "100%",
+              fontSize: 13,
+              color: theme.palette.mode === "light" ? "#586069" : "#8b949e",
+              fontWeight: 600,
+              "&:hover": {
+                color: theme.palette.mode === "light" ? "primary.main" : "#58a6ff"
+              },
+              "& svg": {
+                width: 22,
+                height: 22
+              }
+            }),
+            ...Array.isArray(buttonSx) ? buttonSx : [buttonSx]
+          ],
+          children: /* @__PURE__ */ jsxRuntime.jsx(mdiTagPlusOutline, {})
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         material.Box,
         {
@@ -1145,178 +1310,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             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: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              material.Autocomplete,
-              {
-                open: true,
-                multiple: true,
-                inputValue,
-                onInputChange: (event, newInputValue, reason) => {
-                  if (reason === "reset") {
-                    return;
-                  }
-                  setInputValue(newInputValue);
-                },
-                onClose: (event, reason) => {
-                  if (reason === "escape") {
-                    handleClose();
-                  }
-                },
-                value: pendingOptions,
-                onChange: (event, newValue, reason) => {
-                  event.preventDefault();
-                  if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
-                    return;
-                  }
-                  if (reason === "selectOption") {
-                    addRecentLabel(newValue[newValue.length - 1].data.id);
-                  }
-                  handleChange(newValue.map((x) => x.data.id));
-                },
-                disableCloseOnSelect: true,
-                PopperComponent,
-                renderTags: () => null,
-                noOptionsText: noLabelsText || "No labels",
-                renderOption: (props, option, { selected }) => {
-                  const isPermitted = isLabelPermitted(option);
-                  if (!isPermitted) {
-                    return null;
-                  }
-                  const label = option.data;
-                  return /* @__PURE__ */ react.createElement(
-                    material.Box,
-                    {
-                      component: "li",
-                      ...props,
-                      key: label.id,
-                      sx: {
-                        "&.MuiAutocomplete-option": {
-                          p: 0
-                        }
-                      }
-                    },
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      LabelChip,
-                      {
-                        label: option,
-                        sx: {
-                          height: 24,
-                          lineHeight: "24px",
-                          ".MuiChip-label": { maxHeight: 24 },
-                          ...getSelectedSx(selected)
-                        },
-                        fullName: false
-                      }
-                    )
-                  );
-                },
-                groupBy: () => "x",
-                renderGroup: (params) => {
-                  const recentLabelNodes = getLabelsByIds(initialRecentLabels).filter(isLabelPermitted);
-                  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-                    !!(recentLabelNodes == null ? void 0 : recentLabelNodes.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.75, mb: 2 }, children: recentLabelNodes.map((x) => {
-                        const labelId = x.data.id;
-                        const selected = value == null ? void 0 : value.includes(labelId);
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          LabelChip,
-                          {
-                            label: x,
-                            fullName: false,
-                            onClick: () => {
-                              handleChange(
-                                selected ? pendingValue.filter((y) => y !== labelId) : [...pendingValue, labelId]
-                              );
-                            },
-                            sx: {
-                              height: 24,
-                              lineHeight: "24px",
-                              ".MuiChip-label": { maxHeight: 24 },
-                              ...getSelectedSx(selected)
-                            }
-                          },
-                          labelId
-                        );
-                      }) })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { 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.75,
-                            p: 0
-                          },
-                          children: params.children
-                        }
-                      )
-                    ] })
-                  ] }, params.key);
-                },
-                options: filteredLabels,
-                getOptionLabel: (option) => option.data.getName(locale),
-                renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
-                  material.Box,
-                  {
-                    component: material.InputBase,
-                    ref: params.InputProps.ref,
-                    inputProps: params.inputProps,
-                    autoFocus: true,
-                    placeholder: "Filter labels",
-                    sx: (theme) => ({
-                      padding: 1,
-                      width: "100%",
-                      bgcolor: "#fff",
-                      "& input": {
-                        borderRadius: 1,
-                        backgroundColor: theme.palette.mode === "light" ? "#fff" : "#0d1117",
-                        padding: 1,
-                        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 ${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"
-                        }
-                      }
-                    })
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
-              isAdmin && inputValue && !exists && /* @__PURE__ */ jsxRuntime.jsx(
-                material.Box,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1,
-                    width: "100%",
-                    height: 36,
-                    px: 2,
-                    borderTop: "1px solid #eee",
-                    fontSize: 14,
-                    color: "grey.600",
-                    cursor: "pointer",
-                    textDecoration: "none"
-                  },
-                  onClick: handleCreate,
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                    'Create new label "',
-                    inputValue,
-                    '"'
-                  ] })
-                }
-              ),
-              actions
-            ] })
+            renderAutocomplete(),
+            renderActions()
           ] }) })
         }
       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/labels",
-  "version": "2.1.184",
+  "version": "2.1.186",
   "files": [
     "dist"
   ],
@@ -29,7 +29,7 @@
     "react-color": "^2.19.3",
     "react-select": "^5.8.1",
     "unstated-next": "^1.1.0",
-    "@blocklet/translation-input": "^2.1.184"
+    "@blocklet/translation-input": "^2.1.186"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",