@blocklet/labels 2.4.35 → 2.4.37

package/dist/label2/github-label-picker.mjs

@@ -0,0 +1,372 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import {
+  Box,
+  Popper,
+  ClickAwayListener,
+  Autocomplete,
+  autocompleteClasses,
+  InputBase,
+  ButtonBase,
+  alpha
+} from "@mui/material";
+import TagPlusOutlineIcon from "virtual:icons/mdi/tag-plus-outline";
+import { Fragment as Fragment2, useMemo, useState } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LabelsContainer } from "./labels-context.mjs";
+import { useSessionContext } from "./session.mjs";
+import { LabelChip } from "./labels2.mjs";
+function PopperComponent({
+  disablePortal,
+  anchorEl,
+  open,
+  ...other
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...other,
+      sx: (theme) => ({
+        [`& .${autocompleteClasses.paper}`]: {
+          width: 360,
+          boxShadow: "none",
+          margin: 0,
+          color: "inherit",
+          fontSize: 13
+        },
+        [`& .${autocompleteClasses.listbox}`]: {
+          bgcolor: theme.palette.background.paper,
+          padding: 1,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "auto"
+          }
+        },
+        [`&.${autocompleteClasses.popperDisablePortal}`]: {
+          position: "relative"
+        }
+      })
+    }
+  );
+}
+export function GithubLabelPicker({
+  value = [],
+  onChange,
+  noLabelsText,
+  buttonSx,
+  actions,
+  trigger,
+  multiple = true,
+  updateImmediately = true,
+  excludes = [],
+  disabled = false,
+  enableAccessControl = true,
+  disablePortal
+}) {
+  const { t, locale } = useLocaleContext();
+  const { isAdmin, hasAnyPassport } = useSessionContext();
+  const {
+    flattenedLabels: labels,
+    getLabelsByIds,
+    loading,
+    createLabel,
+    recentLabels,
+    addRecentLabel
+  } = LabelsContainer.useContainer();
+  const [anchorEl, setAnchorEl] = useState(null);
+  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()),
+    [inputValue, labels, locale]
+  );
+  const filteredLabels = useMemo(() => {
+    const excludesSet = new Set(excludes);
+    return labels.filter((x) => !excludesSet.has(x.data.id));
+  }, [labels]);
+  const initialRecentLabels = useMemo(() => recentLabels, [anchorEl]);
+  const handleClick = (event) => {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    if (!updateImmediately) {
+      onChange?.(selectedLabelIds);
+    }
+    setInputValue("");
+    if (anchorEl) {
+      anchorEl.focus();
+    }
+    setAnchorEl(null);
+  };
+  const handleCreate = async () => {
+    const { id: id2 } = await createLabel(inputValue);
+    if (!multiple) {
+      onChange?.([id2]);
+    } else if (updateImmediately) {
+      onChange([...selectedLabelIds, id2]);
+    }
+  };
+  const handleLabelSelectionChange = (newValue) => {
+    if (!multiple) {
+      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;
+  const getSelectedSx = (selected) => {
+    if (selected) {
+      return {
+        bgcolor: (theme) => `${theme.palette.primary.main} !important`,
+        color: (theme) => `${theme.palette.primary.contrastText} !important`,
+        WebkitTextFillColor: (theme) => `${theme.palette.primary.contrastText} !important`
+      };
+    }
+    return void 0;
+  };
+  const isLabelPermitted = (node) => {
+    const label = node.data;
+    const passportsToCheck = [...label.passports || [], ...label.type === "system" ? ["admin", "owner"] : []];
+    const isPermitted = !enableAccessControl || isAdmin || hasAnyPassport(passportsToCheck);
+    return isPermitted;
+  };
+  if (loading) {
+    return null;
+  }
+  function renderRecentLabels() {
+    const recentLabelNodes = getLabelsByIds(initialRecentLabels).filter(isLabelPermitted);
+    if (!recentLabelNodes?.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx(Box, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.recently") }),
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75, mb: 2 }, children: recentLabelNodes.map((x) => {
+        const labelId = x.data.id;
+        const selected = 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, { sx: { mb: 0.5, fontSize: 12, fontWeight: "medium" }, children: t("label.title") }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "ul",
+          sx: {
+            display: "flex",
+            justifyContent: "flex-start",
+            flexWrap: "wrap",
+            gap: 0.75,
+            p: 0
+          },
+          children: params.children
+        }
+      )
+    ] });
+  }
+  function renderAutocomplete() {
+    return /* @__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: 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,
+        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, { component: "li", ...props, key: label.id, sx: { "&.MuiAutocomplete-option": { p: "0 !important" } } }, /* @__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(Fragment2, { children: [
+            renderRecentLabels(),
+            renderGroup(params)
+          ] }, params.key);
+        },
+        options: filteredLabels,
+        getOptionLabel: (option) => option.data.getName(locale),
+        renderInput: (params) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: InputBase,
+            ref: params.InputProps.ref,
+            inputProps: params.inputProps,
+            autoFocus: true,
+            placeholder: "Filter labels",
+            sx: (theme) => ({
+              padding: 1,
+              width: "100%",
+              bgcolor: "background.paper",
+              "& input": {
+                borderRadius: 1,
+                backgroundColor: "background.paper",
+                padding: 1,
+                transition: theme.transitions.create(["border-color", "box-shadow"]),
+                border: `1px solid ${theme.palette.divider}`,
+                fontSize: 14,
+                "&:focus": {
+                  boxShadow: `0px 0px 0px 3px ${alpha(theme.palette.primary.light, 0.4)}`,
+                  borderColor: theme.palette.primary.light
+                }
+              }
+            })
+          }
+        ),
+        slots: {
+          popper: PopperComponent
+        }
+      }
+    );
+  }
+  function renderActions() {
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      isAdmin && inputValue && !exists && /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            width: "100%",
+            height: 36,
+            px: 2,
+            borderTop: "1px solid",
+            borderColor: "divider",
+            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, { onClick: handleClick, sx: { display: "flex", alignItems: "center" }, children: labelInput2 || /* @__PURE__ */ jsx(
+      Box,
+      {
+        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(TagPlusOutlineIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: Popper,
+        id,
+        open,
+        anchorEl,
+        placement: "bottom-start",
+        disablePortal,
+        sx: (theme) => ({
+          border: `1px solid ${theme.palette.divider}`,
+          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: "text.secondary",
+          backgroundColor: "background.paper"
+        }),
+        children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(Box, { onClick: (e) => e.preventDefault(), children: [
+          renderAutocomplete(),
+          renderActions()
+        ] }) })
+      }
+    )
+  ] });
+}

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

@@ -1,24 +1,24 @@
 import { LabelTreeNode } from './tree';
-import { CreateLabel, LabelPayload, LabelsResponse } from '../types';
+import type { CreateLabel, LabelPayload, LabelsResponse } from '../types';
 interface InitialState {
     loading: boolean;
     data?: LabelsResponse;
     createLabel: CreateLabel;
 }
-export declare const LabelsContainer: import('unstated-next').Container<{
+export declare const LabelsContainer: import("unstated-next").Container<{
     flattenedLabels: LabelTreeNode[];
     popularLabels: LabelTreeNode[];
     counts: Record<string, number>;
     getLabelsByIds: (ids: string[]) => LabelTreeNode[];
     labelExists: (id: string) => true;
     getLabelName: (id: string) => string;
-    getRelatedLabels: (id: string) => import('./tree').TreeNode<{
+    getRelatedLabels: (id: string) => import("./tree").TreeNode<{
         id: string;
         name: string;
         desc?: string | undefined;
         image?: string | undefined;
         icon?: string | undefined;
-        type?: import('../types').LabelType;
+        type?: import("../types").LabelType;
         color: string;
         passports: string[];
         translation?: {
@@ -29,13 +29,13 @@ export declare const LabelsContainer: import('unstated-next').Container<{
         }): any;
         getName(locale: string): string;
     }>[];
-    getRecommended: (id?: string) => import('./tree').TreeNode<{
+    getRecommended: (id?: string) => import("./tree").TreeNode<{
         id: string;
         name: string;
         desc?: string | undefined;
         image?: string | undefined;
         icon?: string | undefined;
-        type?: import('../types').LabelType;
+        type?: import("../types").LabelType;
         color: string;
         passports: string[];
         translation?: {
@@ -52,7 +52,7 @@ export declare const LabelsContainer: import('unstated-next').Container<{
         desc?: string | undefined;
         image?: string | undefined;
         icon?: string | undefined;
-        type?: import('../types').LabelType;
+        type?: import("../types").LabelType;
         color: string;
         passports: string[];
         translation?: {
@@ -69,7 +69,7 @@ export declare const LabelsContainer: import('unstated-next').Container<{
     getFullLabelName: (id: string) => string;
     parseLabelsStr: (labelIdsStr: string) => string[];
     recentLabels: string[];
-    setRecentLabels: (this: unknown, value: import('ahooks/lib/createUseStorageState').SetState<string[]>) => void;
+    setRecentLabels: (this: unknown, value: import("ahooks/lib/createUseStorageState").SetState<string[]>) => void;
     addRecentLabel: (label?: string) => void;
     loading: boolean;
     tree: LabelTreeNode;

package/dist/label2/labels-context.mjs

@@ -0,0 +1,137 @@
+import { createContainer } from "unstated-next";
+import { useLocalStorageState, useReactive } from "ahooks";
+import { useCallback, useEffect, useMemo } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { LabelTreeNode, createEmptyLabelTree, initLabelTree } from "./tree.mjs";
+const useLabels = ({ loading, data, createLabel: createLabelAPI }) => {
+  const { locale } = useLocaleContext();
+  const state = useReactive({
+    loading: true,
+    tree: createEmptyLabelTree(),
+    stats: []
+  });
+  useEffect(() => {
+    try {
+      if (data && !loading) {
+        const { labels, stats } = data;
+        const tree = initLabelTree(labels || []);
+        state.loading = false;
+        state.tree = tree;
+        state.stats = stats.sort((a, b) => b.count - a.count);
+      }
+    } catch (e) {
+      console.error(e);
+      state.loading = false;
+    }
+  }, [data, loading]);
+  const flattened = useMemo(() => state.tree.flatten(), [state.tree]);
+  const counts = useMemo(
+    () => state.stats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.count }), {}),
+    [state.stats]
+  );
+  const nodesKeyById = useMemo(() => {
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.data.id]: cur }), {});
+  }, [flattened]);
+  const popularLabels = useMemo(
+    () => state.stats.slice(0, 12).map((x) => nodesKeyById[x.id]),
+    [nodesKeyById, state.stats]
+  );
+  const getLabelsByIds = useCallback(
+    (ids) => {
+      return ids.map((id) => nodesKeyById[id]).filter(Boolean);
+    },
+    [nodesKeyById]
+  );
+  const labelExists = useCallback((id) => !!nodesKeyById[id], [nodesKeyById]);
+  const getLabelName = (id) => {
+    return nodesKeyById[id]?.data.getName(locale);
+  };
+  const getRelatedLabels = (id) => {
+    const node = nodesKeyById[id];
+    if (!node || node.parent === state.tree) {
+      return [];
+    }
+    const siblings = node.getAllSiblings();
+    return siblings;
+  };
+  const getRecommended = (id) => {
+    const related = id ? getRelatedLabels(id) : [];
+    const set = new Set([...related.map((x) => x.data.id), id].filter(Boolean));
+    return [...related, ...popularLabels.filter((x) => !set.has(x.data.id))].filter((x) => !!counts[x.data.id]);
+  };
+  const createLabel = async (name) => {
+    const saved = await createLabelAPI({ name });
+    const node = new LabelTreeNode({ data: new LabelTreeNode.Label(saved) });
+    state.tree.add(node);
+    state.tree = state.tree.clone();
+    return node.data;
+  };
+  const addLabelNode = (payload) => {
+    const parent = payload.parentId ? nodesKeyById[payload.parentId] : state.tree;
+    const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+    parent.add(node);
+    state.tree = state.tree.clone();
+  };
+  const updateLabelNode = (id, payload) => {
+    const existing = nodesKeyById[id];
+    if (existing && existing.parent) {
+      const node = new LabelTreeNode({ data: new LabelTreeNode.Label(payload) });
+      node.add(...existing.children);
+      if (existing.parent.data.id == payload.parentId) {
+        existing.parent.children = existing.parent.children.map((x) => {
+          if (x.data.id === id) {
+            node.setParent(existing.parent);
+            return node;
+          }
+          return x;
+        });
+      } else {
+        const parent = nodesKeyById[payload.parentId];
+        if (parent) {
+          existing.parent.children = existing.parent.children.filter((x) => x.data.id !== id);
+          parent.add(node);
+        }
+      }
+      state.tree = state.tree.clone();
+    }
+  };
+  const removeLabelNode = (id) => {
+    const node = nodesKeyById[id];
+    if (node?.parent) {
+      node.parent.removeChild(node);
+      state.tree = state.tree.clone();
+    }
+  };
+  const getFullLabelName = (id) => {
+    return nodesKeyById[id]?.getFullName(locale) ?? id;
+  };
+  const parseLabelsStr = useCallback((labelIdsStr) => {
+    return labelIdsStr?.split(",").filter(Boolean) || [];
+  }, []);
+  const [recentLabels = [], setRecentLabels] = useLocalStorageState("recent-labels", { defaultValue: [] });
+  const addRecentLabel = (label) => {
+    if (!label || labelExists(label)) return;
+    setRecentLabels([label, ...recentLabels].slice(0, 10));
+  };
+  return {
+    ...state,
+    flattenedLabels: flattened,
+    popularLabels,
+    counts,
+    getLabelsByIds,
+    labelExists,
+    getLabelName,
+    getRelatedLabels,
+    getRecommended,
+    createLabel,
+    addLabelNode,
+    updateLabelNode,
+    removeLabelNode,
+    getFullLabelName,
+    parseLabelsStr,
+    recentLabels,
+    setRecentLabels,
+    addRecentLabel
+  };
+};
+export const LabelsContainer = createContainer(useLabels);

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
-import { GithubLabelPickerProps } from './github-label-picker';
+import { type GithubLabelPickerProps } from './github-label-picker';
 export interface LabelsInputProps {
     value: string[];
     onChange: (value: string[]) => void;
@@ -8,4 +9,4 @@ export interface LabelsInputProps {
 /**
  * @deprecated, use `LabelsInput2` instead
  */
-export declare function LabelsInput({ value, onChange, LabelPickerProps, sx, ...rest }: LabelsInputProps & Omit<TextFieldProps, 'onChange'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function LabelsInput({ value, onChange, LabelPickerProps, sx, ...rest }: LabelsInputProps & Omit<TextFieldProps, 'onChange'>): import("react").JSX.Element | null;

package/dist/label2/labels-input.mjs

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { TextField } from "@mui/material";
+import { useMemo } from "react";
+import { LabelsContainer } from "./labels-context.mjs";
+import { GithubLabelPicker } from "./github-label-picker.mjs";
+import { LabelChip } from "./labels2.mjs";
+export function LabelsInput({
+  value = [],
+  onChange,
+  LabelPickerProps,
+  sx,
+  ...rest
+}) {
+  const { getLabelsByIds, loading } = LabelsContainer.useContainer();
+  const valueOptions = useMemo(() => getLabelsByIds(value), [getLabelsByIds, value]);
+  const mergedSx = [
+    {
+      "& .MuiInputBase-root": { flexWrap: "wrap", gap: 0.5, py: 0.75 },
+      "& .MuiInputBase-input": { width: !value?.length ? "initial" : "20px", p: 0 }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const placeholder = !value?.length ? rest.placeholder || "Select labels" : "";
+  if (loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    GithubLabelPicker,
+    {
+      value,
+      onChange,
+      trigger: /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...rest,
+          placeholder,
+          fullWidth: true,
+          sx: mergedSx,
+          slotProps: {
+            input: {
+              autoComplete: "off",
+              ...rest.InputProps,
+              startAdornment: [
+                rest.InputProps?.startAdornment,
+                ...valueOptions.map((x, index) => /* @__PURE__ */ jsx(LabelChip, { label: x }, index))
+              ].filter(Boolean)
+            }
+          }
+        }
+      ),
+      ...LabelPickerProps
+    }
+  );
+}

package/dist/label2/labels2.d.ts

@@ -1,6 +1,6 @@
-import { Theme, SxProps } from '@mui/material';
-import { JSX } from 'react';
-import { LabelTreeNode } from './tree';
+import { type Theme, type SxProps } from '@mui/material';
+import { type JSX } from 'react';
+import type { LabelTreeNode } from './tree';
 export interface LabelsProps {
     labels: string[] | undefined | null;
     sx?: SxProps;
@@ -20,5 +20,5 @@ export interface LabelChipProps {
     disabled?: boolean;
     renderName?: (label: LabelTreeNode | string) => React.ReactNode | string;
 }
-export declare function LabelChip({ label, onDelete, sx, fullName, onClick, disabled, renderName, }: LabelChipProps): import("react/jsx-runtime").JSX.Element;
-export declare function Labels2({ compact, labels, sx, renderLabel, renderWhenEmpty, prepend, displaySystemLabels, onItemClick, }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function LabelChip({ label, onDelete, sx, fullName, onClick, disabled, renderName, }: LabelChipProps): JSX.Element;
+export declare function Labels2({ compact, labels, sx, renderLabel, renderWhenEmpty, prepend, displaySystemLabels, onItemClick, }: LabelsProps): JSX.Element | null;