@blocklet/labels 1.0.63

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2020 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/dist/components/label/context.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Label } from './types';
+interface LabelsProviderProps {
+    fetchLabels: () => Promise<Label[]>;
+    children: React.ReactNode;
+}
+interface LabelsContextValue {
+    labels: Label[];
+    loading: boolean;
+    updateLabels: () => void;
+    getLabelsById: (ids: string[]) => Label[];
+}
+export declare const useLabelsContext: () => LabelsContextValue;
+export declare const useLabelsUpdateOnDestroy: () => void;
+export declare function LabelsProvider({ fetchLabels, children }: LabelsProviderProps): JSX.Element;
+export {};

package/dist/components/label/index.d.ts

@@ -0,0 +1,7 @@
+export { default as LabelTree } from './label-tree';
+export { default as LabelPicker } from './label-picker';
+export { default as LabelManager } from './label-manager';
+export { default as Labels } from './labels';
+export { transformLabels } from './utils';
+export * from './context';
+export * from './types';

package/dist/components/label/label-delete-dialog.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Label } from './types';
+interface LabelDeleteDialogProps {
+    open: boolean;
+    onClose: () => void;
+    label: Label;
+    onSubmit: () => void;
+}
+export default function LabelDeleteDialog({ open, label, onSubmit, onClose, ...rest }: LabelDeleteDialogProps): JSX.Element;
+export {};

package/dist/components/label/label-form-dialog.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Label } from './types';
+interface LabelFormDialogProps {
+    open: boolean;
+    onClose: () => void;
+    initialLabel: Label | null;
+    onSubmit: (payload: Label) => void;
+}
+export default function LabelFormDialog({ open, initialLabel, onSubmit, onClose, ...rest }: LabelFormDialogProps): JSX.Element;
+export {};

package/dist/components/label/label-manager.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Label, LabelDto } from './types';
+interface API {
+    createLabel: (label: LabelDto) => Promise<void>;
+    updateLabel: (label: LabelDto) => Promise<void>;
+    deleteLabel: (id: string) => Promise<void>;
+}
+interface LabelManagerProps {
+    data: Label[];
+    api: API;
+}
+export default function LabelManager({ data, api, ...rest }: LabelManagerProps): JSX.Element;
+export {};

package/dist/components/label/label-picker.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GroupBase } from 'react-select';
+import { Label } from './types';
+interface LabelPickerProps {
+    data: Label[];
+    value: string[];
+    onChange: (labels: Label[]) => void;
+    compact?: boolean;
+    editable?: boolean;
+    addon?: any;
+}
+declare module 'react-select/dist/declarations/src/Select' {
+    interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+        data: Label[];
+    }
+}
+export default function LabelPicker({ data, value, editable, addon, onChange, compact, ...rest }: LabelPickerProps): JSX.Element;
+export {};

package/dist/components/label/label-tree.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/system';
+import { Label } from './types';
+interface SharedProps {
+    selectable?: boolean;
+    selected?: string[];
+    onSelect?: (id: string) => void;
+    renderItem?: (children: React.ReactElement, label: Label) => React.ReactElement;
+}
+export interface LabelTreeProps extends SharedProps {
+    data: Label[];
+    height?: number;
+    sx?: SxProps;
+    rowHeight?: number;
+}
+export default function LabelTree({ data, selectable, selected, onSelect, rowHeight, renderItem, sx, ...rest }: LabelTreeProps): JSX.Element;
+export {};

package/dist/components/label/labels.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/system';
+import { Label } from './types';
+interface LabelsProps {
+    labels: string[] | undefined | null;
+    editable?: boolean;
+    onChange?: (labels: Label[]) => void;
+    sx?: SxProps;
+}
+export default function Labels({ labels, editable, onChange, sx }: LabelsProps): JSX.Element | null;
+export {};

package/dist/components/label/types.d.ts

@@ -0,0 +1,15 @@
+export interface Label {
+    id: string;
+    name: string;
+    icon?: string;
+    color: string;
+    type?: 'system' | 'user-defined';
+    parent?: Label;
+    children?: Label[];
+}
+export interface LabelDto {
+    id: string;
+    name: string;
+    color: string;
+    parentId?: string;
+}

package/dist/components/label/utils.d.ts

@@ -0,0 +1,8 @@
+import { LabelDto, Label } from './types';
+export declare const flatten: <T extends {
+    children?: T[] | undefined;
+}>(data: T[]) => T[];
+export declare const copyTree: <T extends {
+    children?: T[] | undefined;
+}>(data: T[]) => T[];
+export declare const transformLabels: (labelDtos: LabelDto[]) => Label[];

package/dist/global.d.ts

@@ -0,0 +1,9 @@
+declare module '@arcblock/ux/*';
+declare module '@arcblock/did-connect/*';
+interface Window {
+  blocklet: {
+    appId: string;
+    prefix: string;
+    preferences: { [key: string]: any };
+  };
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/label';

package/dist/index.es.js

@@ -0,0 +1,872 @@
+import { createContext as V, useRef as N, useState as I, useCallback as B, useEffect as P, useMemo as z, useContext as W } from "react";
+import E from "@mui/icons-material/ExpandMore";
+import m from "@mui/material/Box";
+import { styled as j } from "@mui/material/styles";
+import { Tree as Z } from "react-arborist";
+import { Icon as $ } from "@iconify/react";
+import { jsx as t, jsxs as y, Fragment as T } from "react/jsx-runtime";
+import G from "lodash/omit";
+import U, { components as q } from "react-select";
+import Y from "@mui/material/Typography";
+import A from "@mui/material/Button";
+import O from "@mui/material/IconButton";
+import X from "@mui/icons-material/DeleteOutlineOutlined";
+import _ from "@mui/icons-material/EditOutlined";
+import ee from "@mui/icons-material/Add";
+import te from "react-use/lib/useSetState";
+import L from "@mui/material/TextField";
+import ne from "@mui/base/ClickAwayListener";
+import { GithubPicker as re } from "react-color";
+import F from "@arcblock/ux/lib/Dialog";
+import oe from "@mui/material/Alert";
+import ie from "@mui/icons-material/Edit";
+import le from "@mui/icons-material/LabelOutlined";
+import se from "@mui/material/ClickAwayListener";
+import ae from "@mui/material/Chip";
+const de = (e) => /* @__PURE__ */ t("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...e,
+  children: /* @__PURE__ */ t("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"
+  })
+}), ce = (e) => /* @__PURE__ */ t("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...e,
+  children: /* @__PURE__ */ t("path", {
+    fill: "currentColor",
+    d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"
+  })
+}), R = V({});
+function ue({
+  selectable: e = !1,
+  selected: n = [],
+  onSelect: i,
+  renderItem: l,
+  children: o
+}) {
+  const r = (h) => n.indexOf(h) !== -1, s = (h) => {
+    Array.from(new Set(n).add(h)), i == null || i(h);
+  }, a = z(
+    () => ({
+      selectable: e,
+      selected: n,
+      isSelected: r,
+      select: s,
+      renderItem: l
+    }),
+    [n]
+  );
+  return /* @__PURE__ */ t(R.Provider, {
+    value: a,
+    children: o
+  });
+}
+const he = (e) => {
+  var n;
+  return e.isLeaf || !((n = e.data.children) != null && n.length);
+};
+function pe({
+  node: e
+}) {
+  return he(e) ? /* @__PURE__ */ t("span", {}) : e.isOpen ? /* @__PURE__ */ t(E, {
+    style: {
+      fontSize: 20
+    }
+  }) : /* @__PURE__ */ t(E, {
+    style: {
+      fontSize: 20,
+      transform: "rotate(-90deg)"
+    }
+  });
+}
+function me({
+  node: e,
+  style: n,
+  dragHandle: i
+}) {
+  const {
+    selectable: l,
+    select: o,
+    isSelected: r,
+    renderItem: s
+  } = W(R), {
+    data: a
+  } = e, h = a.icon ? /* @__PURE__ */ t($, {
+    icon: a.icon,
+    style: {
+      fontSize: 18
+    }
+  }) : /* @__PURE__ */ t(de, {
+    style: {
+      fontSize: 18,
+      color: a.color || "#ddd"
+    }
+  }), u = (p) => {
+    p.stopPropagation(), e.isInternal && e.toggle();
+  }, g = (p) => {
+    p.stopPropagation(), l && o(e.id);
+  }, f = /* @__PURE__ */ y(T, {
+    children: [/* @__PURE__ */ y(m, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flex: 1
+      },
+      children: [/* @__PURE__ */ t(m, {
+        sx: {
+          display: "flex",
+          cursor: "pointer"
+        },
+        onClick: u,
+        children: /* @__PURE__ */ t(pe, {
+          node: e
+        })
+      }), /* @__PURE__ */ t(m, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          width: 22,
+          height: 22
+        },
+        children: h
+      }), /* @__PURE__ */ t(m, {
+        component: "span",
+        sx: {
+          color: "grey.700"
+        },
+        children: e.data.name
+      })]
+    }), l && r(e.id) && /* @__PURE__ */ t(ce, {})]
+  });
+  return /* @__PURE__ */ y(m, {
+    className: "label-tree-item",
+    style: n,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    },
+    ref: i,
+    onClick: g,
+    children: [!s && f, !!s && s(f, e.data)]
+  });
+}
+const fe = j(m)`
+  > div,
+  > div > div,
+  > div > div > div {
+    width: auto !important;
+  }
+  [role='treeitem'] {
+    display: flex;
+    align-items: stretch;
+  }
+  .label-tree-item {
+    width: 100%;
+  }
+`;
+function D({
+  data: e,
+  selectable: n,
+  selected: i = [],
+  onSelect: l,
+  rowHeight: o = 28,
+  renderItem: r,
+  sx: s,
+  ...a
+}) {
+  const h = N(), u = [...Array.isArray(s) ? s : [s]], [g, f] = I(0), p = B(() => {
+    var S, d;
+    f((((d = (S = h.current) == null ? void 0 : S.visibleNodes) == null ? void 0 : d.length) || 0) * o);
+  }, [o]);
+  return P(() => {
+    p();
+  }, [e, p]), /* @__PURE__ */ t(ue, {
+    selectable: n,
+    selected: i,
+    onSelect: l,
+    renderItem: r,
+    children: /* @__PURE__ */ t(fe, {
+      ...a,
+      sx: u,
+      children: /* @__PURE__ */ t(Z, {
+        data: e,
+        rowHeight: o,
+        height: g,
+        indent: 32,
+        ref: h,
+        onToggle: () => {
+          setTimeout(p);
+        },
+        children: me
+      })
+    })
+  });
+}
+const M = (e) => e.reduce((n, i) => {
+  var l;
+  return n.push(i), (l = i.children) != null && l.length && n.push(...M(i.children)), n;
+}, []), H = (e) => e.map((n) => {
+  var i;
+  return (i = n.children) != null && i.length && (n.children = H(n.children)), n;
+}), ge = (e) => {
+  const n = e.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}), i = e.map(({ parentId: o, ...r }) => ({ ...r, children: [] })), l = i.reduce((o, r) => ({ ...o, [r.id]: r }), {});
+  return i.forEach((o) => {
+    const r = n[o.id];
+    r.parent && l[r.parent] && (o.parent = l[r.parent]), r.children && (o.children = r.children.map((s) => l[s]));
+  }), i.filter((o) => !o.parent);
+}, xe = (e) => {
+  const {
+    options: n,
+    getValue: i,
+    selectProps: l,
+    selectOption: o
+  } = e, r = i(), s = (a) => {
+    const h = n.find((u) => u.data.id === a);
+    h && o(h);
+  };
+  return /* @__PURE__ */ y(T, {
+    children: [/* @__PURE__ */ t(q.MenuList, {
+      ...G(e, ["addon"]),
+      children: /* @__PURE__ */ t(m, {
+        sx: {
+          px: 2,
+          py: 1
+        },
+        children: /* @__PURE__ */ t(D, {
+          data: l.data,
+          selectable: !0,
+          onSelect: s,
+          selected: r.map((a) => a.data.id)
+        })
+      })
+    }), e.addon]
+  });
+}, ye = ({
+  children: e,
+  ...n
+}) => {
+  const [i, l] = e, o = Array.isArray(i) ? i.length : 0;
+  return /* @__PURE__ */ y(q.ValueContainer, {
+    ...n,
+    children: [/* @__PURE__ */ t(m, {
+      component: "span",
+      sx: {
+        fontSize: 13,
+        fontWeight: "bold"
+      },
+      children: o ? "Labels" : "Filter by labels"
+    }), !!o && /* @__PURE__ */ t(m, {
+      sx: {
+        display: "inline-flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 22,
+        height: 22,
+        ml: 1,
+        borderRadius: "100%",
+        fontSize: 12,
+        bgcolor: "grey.200"
+      },
+      children: o
+    }), l]
+  });
+}, Ce = {
+  control: (e) => ({
+    ...e,
+    minHeight: 31
+  }),
+  valueContainer: (e) => ({
+    ...e,
+    display: "flex"
+  }),
+  dropdownIndicator: (e) => ({
+    ...e,
+    padding: "0 4px"
+  }),
+  clearIndicator: (e) => ({
+    ...e,
+    padding: "4px"
+  })
+};
+function ve({
+  data: e,
+  value: n = [],
+  editable: i = !1,
+  addon: l,
+  onChange: o,
+  compact: r,
+  ...s
+}) {
+  const a = N(null), h = z(() => M(e).map((d) => ({
+    data: d,
+    label: d.name,
+    value: d.id
+  })), [e]), u = h.reduce((d, b) => ({
+    ...d,
+    [b.data.id]: b
+  }), {}), g = Array.isArray(n) ? n : [n], f = g.map((d) => u[d]), p = N({
+    prev: g.map((d) => u[d].data)
+  }), v = (d, b) => {
+    p.current.current = d.map((k) => k.data), ["clear", "remove-value"].includes(b.action) && a.current && setTimeout(() => {
+      var k;
+      return (k = a == null ? void 0 : a.current) == null ? void 0 : k.blur();
+    }, 1);
+  }, S = () => {
+    p.current.current && JSON.stringify(p.current.prev.map((b) => b.id)) !== JSON.stringify(p.current.current.map((b) => b.id)) && (o(p.current.current), p.current.prev = p.current.current);
+  };
+  return /* @__PURE__ */ t(m, {
+    ...s,
+    children: /* @__PURE__ */ t(U, {
+      ref: a,
+      defaultValue: f,
+      options: h,
+      onChange: v,
+      components: {
+        MenuList: (d) => /* @__PURE__ */ t(xe, {
+          ...d,
+          addon: l
+        }),
+        ...r && {
+          ValueContainer: ye
+        }
+      },
+      placeholder: "Select labels",
+      styles: {
+        ...r && Ce,
+        menu: (d) => ({
+          ...d,
+          ...i && {
+            paddingBottom: "36px"
+          },
+          zIndex: 99
+        }),
+        menuList: (d) => ({
+          ...d,
+          overflowY: "auto",
+          maxHeight: "264px"
+        })
+      },
+      theme: (d) => ({
+        ...d,
+        colors: {
+          ...d.colors,
+          primary25: "#ddd",
+          primary50: "#ddd",
+          primary: "#ddd"
+        }
+      }),
+      isSearchable: !1,
+      isMulti: !0,
+      closeMenuOnSelect: !1,
+      onMenuClose: S,
+      data: e
+    })
+  });
+}
+function be({
+  open: e,
+  initialLabel: n,
+  onSubmit: i,
+  onClose: l,
+  ...o
+}) {
+  const r = !(n != null && n.id), [s, a] = te({
+    name: (n == null ? void 0 : n.name) || "",
+    color: (n == null ? void 0 : n.color) || "#ddd",
+    slug: (n == null ? void 0 : n.id) || ""
+  }), h = (d) => /^#([0-9A-F]{3}){1,2}$/i.test(d), u = z(() => r ? s.name && s.color && s.slug && h(s.color) : s.name && s.color && h(s.color), [s, r]), [g, f] = I(!1), p = () => {
+    i({
+      ...n,
+      name: s.name,
+      color: s.color,
+      id: s.slug
+    });
+  }, v = (d) => {
+    a({
+      color: d.hex
+    }), setTimeout(() => f(!1));
+  }, S = (d) => {
+    a({
+      color: d.target.value
+    });
+  };
+  return /* @__PURE__ */ t(F, {
+    open: e,
+    showCloseButton: !0,
+    maxWidth: "lg",
+    title: r ? "Create label" : "Edit label",
+    actions: /* @__PURE__ */ y(T, {
+      children: [/* @__PURE__ */ t(A, {
+        color: "inherit",
+        variant: "contained",
+        size: "small",
+        onClick: l,
+        children: "Cancel"
+      }), /* @__PURE__ */ t(A, {
+        color: "primary",
+        variant: "contained",
+        size: "small",
+        onClick: p,
+        disabled: !u,
+        children: r ? "Create" : "Save Changes"
+      })]
+    }),
+    onClose: l,
+    ...o,
+    children: /* @__PURE__ */ y(m, {
+      width: 600,
+      minHeight: 280,
+      children: [/* @__PURE__ */ t(m, {
+        sx: {
+          position: "relative",
+          zIndex: 9999
+        },
+        children: /* @__PURE__ */ t(L, {
+          label: "Name",
+          value: s.name,
+          placeholder: "New label",
+          size: "small",
+          fullWidth: !0,
+          onChange: (d) => a({
+            name: d.target.value
+          })
+        })
+      }), /* @__PURE__ */ t(L, {
+        label: "Slug",
+        value: s.slug,
+        size: "small",
+        fullWidth: !0,
+        disabled: !r,
+        onChange: (d) => a({
+          slug: d.target.value
+        }),
+        sx: {
+          mt: 2
+        }
+      }), (n == null ? void 0 : n.parent) && /* @__PURE__ */ t(L, {
+        label: "Parent",
+        value: n.parent.name,
+        size: "small",
+        fullWidth: !0,
+        disabled: !0,
+        sx: {
+          mt: 2
+        }
+      }), /* @__PURE__ */ t(ne, {
+        onClickAway: () => f(!1),
+        children: /* @__PURE__ */ y(m, {
+          sx: {
+            position: "relative",
+            mt: 2
+          },
+          children: [/* @__PURE__ */ y(m, {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [/* @__PURE__ */ t(m, {
+              sx: {
+                width: 30,
+                height: 30,
+                bgcolor: s.color,
+                borderRadius: 1
+              },
+              onClick: () => f(!0)
+            }), /* @__PURE__ */ t(L, {
+              label: "",
+              value: s.color,
+              size: "small",
+              onChange: S,
+              inputProps: {
+                maxLength: 7
+              },
+              sx: {
+                width: 100,
+                ".MuiInputBase-root": {
+                  height: 32
+                }
+              }
+            })]
+          }), g && /* @__PURE__ */ t(m, {
+            sx: {
+              position: "absolute",
+              top: 48,
+              zIndex: 1
+            },
+            children: /* @__PURE__ */ t(re, {
+              color: s.color,
+              onChangeComplete: v
+            })
+          })]
+        })
+      })]
+    })
+  });
+}
+function we({
+  open: e,
+  label: n,
+  onSubmit: i,
+  onClose: l,
+  ...o
+}) {
+  return /* @__PURE__ */ t(F, {
+    open: e,
+    showCloseButton: !0,
+    maxWidth: "md",
+    title: "Delete",
+    actions: /* @__PURE__ */ y(T, {
+      children: [/* @__PURE__ */ t(A, {
+        color: "inherit",
+        variant: "contained",
+        size: "small",
+        onClick: l,
+        children: "Cancel"
+      }), /* @__PURE__ */ t(A, {
+        color: "primary",
+        variant: "contained",
+        size: "small",
+        onClick: i,
+        children: "Delete"
+      })]
+    }),
+    onClose: l,
+    ...o,
+    children: /* @__PURE__ */ y(m, {
+      width: 600,
+      minHeight: 280,
+      children: [/* @__PURE__ */ t(oe, {
+        severity: "info",
+        sx: {
+          mb: 2
+        },
+        children: "Are you sure you want to delete these labels ?"
+      }), /* @__PURE__ */ t(D, {
+        data: [n]
+      })]
+    })
+  });
+}
+const Se = j(D)`
+  .label-tree-item {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      border-top: 1px solid #ddd;
+    }
+  }
+  & [role='treeitem']:first-of-type > .label-tree-item {
+    &:before {
+      display: none;
+    }
+  }
+  [role='treeitem'] {
+    box-sizing: border-box;
+    padding: 0 16px;
+  }
+`;
+function Ge({
+  data: e,
+  api: n,
+  ...i
+}) {
+  const [l, o] = I(null), [r, s] = I(null), [a, h] = I(H(e)), u = z(() => M(a), [a]), g = z(() => {
+    const c = (x, w) => x.map((C) => (w && (C.parent = w), C.children && (C.children = c(C.children, C)), C));
+    return c(a);
+  }, [a]), f = (c) => {
+    var x, w;
+    c.parent ? (c.parent.children = (w = (x = c.parent) == null ? void 0 : x.children) == null ? void 0 : w.map((C) => C.id === c.id ? {
+      ...c
+    } : C), f(c.parent)) : h(a.map((C) => C.id === c.id ? {
+      ...c
+    } : C));
+  }, p = (c) => {
+    c.parent ? (c.parent.children = c.parent.children || [], c.parent.children.push(c), h([...a])) : h([...a, c]);
+  }, v = (c) => {
+    var x;
+    c.parent ? c.parent.children = (x = c.parent.children) == null ? void 0 : x.filter((w) => w.id !== c.id) : h(a.filter((w) => w.id !== c.id));
+  }, S = (c) => {
+    if (l)
+      return;
+    o({
+      id: "",
+      name: "New label",
+      parent: c,
+      color: "#dddddd"
+    });
+  }, d = (c) => {
+    l || o(c);
+  }, b = async (c) => {
+    if (!l)
+      return;
+    const {
+      parent: x,
+      children: w,
+      ...C
+    } = c;
+    l.id ? (await n.updateLabel({
+      ...C,
+      parentId: x == null ? void 0 : x.id
+    }), f(c)) : (await n.createLabel({
+      ...C,
+      parentId: x == null ? void 0 : x.id
+    }), p(c)), o(null);
+  }, k = async () => {
+    !r || (await n.deleteLabel(r.id), v(r), s(null));
+  }, J = (c, x) => /* @__PURE__ */ y(T, {
+    children: [c, /* @__PURE__ */ y(m, {
+      sx: {
+        display: "flex",
+        gap: 1,
+        flex: "0 0 auto"
+      },
+      children: [/* @__PURE__ */ t(O, {
+        color: "inherit",
+        size: "small",
+        sx: {
+          color: "grey.500"
+        },
+        onClick: () => S(x),
+        children: /* @__PURE__ */ t(ee, {
+          sx: {
+            fontSize: 20
+          }
+        })
+      }), /* @__PURE__ */ t(O, {
+        color: "inherit",
+        size: "small",
+        sx: {
+          color: "grey.500"
+        },
+        onClick: () => d(x),
+        children: /* @__PURE__ */ t(_, {
+          sx: {
+            fontSize: 18
+          }
+        })
+      }), /* @__PURE__ */ t(O, {
+        color: "inherit",
+        size: "small",
+        sx: {
+          color: "grey.500"
+        },
+        onClick: () => s(x),
+        children: /* @__PURE__ */ t(X, {
+          sx: {
+            fontSize: 20
+          }
+        })
+      })]
+    })]
+  });
+  return /* @__PURE__ */ y(m, {
+    ...i,
+    children: [/* @__PURE__ */ y(m, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      children: [/* @__PURE__ */ t(Y, {
+        component: "h2",
+        variant: "h6",
+        children: "Manage labels"
+      }), /* @__PURE__ */ t(A, {
+        color: "primary",
+        variant: "contained",
+        size: "small",
+        sx: {
+          textTransform: "none"
+        },
+        onClick: () => S(),
+        children: "New label"
+      })]
+    }), /* @__PURE__ */ y(m, {
+      sx: {
+        mt: 2,
+        border: 1,
+        borderColor: "grey.300",
+        borderRadius: 1,
+        overflow: "hidden"
+      },
+      children: [/* @__PURE__ */ y(m, {
+        sx: {
+          p: 2,
+          fontSize: 14,
+          fontWeight: "bold",
+          bgcolor: "grey.200"
+        },
+        children: [u.length, " labels"]
+      }), /* @__PURE__ */ t(m, {
+        sx: {
+          pt: 0.5
+        },
+        children: /* @__PURE__ */ t(Se, {
+          data: g,
+          selected: [],
+          renderItem: J,
+          rowHeight: 64
+        })
+      })]
+    }), /* @__PURE__ */ t(be, {
+      open: !!l,
+      onClose: () => o(null),
+      initialLabel: l,
+      onSubmit: b
+    }, l == null ? void 0 : l.id), /* @__PURE__ */ t(we, {
+      open: !!r,
+      onClose: () => s(null),
+      label: r,
+      onSubmit: k
+    }, r == null ? void 0 : r.id)]
+  });
+}
+const K = V({}), Q = () => W(K), Ue = () => {
+  const {
+    updateLabels: e
+  } = Q();
+  P(() => () => {
+    e();
+  }, []);
+};
+function Ye({
+  fetchLabels: e,
+  children: n
+}) {
+  const [i, l] = I({
+    loading: !0,
+    labels: [],
+    updateCounter: 1
+  });
+  P(() => {
+    (async () => {
+      try {
+        l((f) => ({
+          ...f,
+          loading: !0
+        }));
+        const g = await e();
+        l((f) => ({
+          ...f,
+          loading: !1,
+          labels: ge(g)
+        }));
+      } catch (g) {
+        console.error(g), l((f) => ({
+          ...f,
+          loading: !1,
+          labels: []
+        }));
+      }
+    })();
+  }, [i.updateCounter]);
+  const o = z(() => {
+    var g;
+    return (g = i.labels) != null && g.length ? M(i.labels).reduce((f, p) => ({
+      ...f,
+      [p.id]: p
+    }), {}) : {};
+  }, [i.labels]), r = B((u) => u.map((g) => o[g]), [o]), s = B((u) => (u == null ? void 0 : u.split(",")) || [], []), a = B((u = []) => {
+    if (!!(u != null && u.length))
+      return u.join(",");
+  }, []), h = z(() => ({
+    loading: i.loading,
+    labels: i.labels || [],
+    updateLabels: () => l((u) => ({
+      ...u,
+      updateCounter: ++i.updateCounter
+    })),
+    getLabelsById: r,
+    parseLabelIds: s,
+    stringifyLabelIds: a
+  }), [i, r, s, a]);
+  return /* @__PURE__ */ t(K.Provider, {
+    value: h,
+    children: n
+  });
+}
+function Xe({
+  labels: e,
+  editable: n,
+  onChange: i,
+  sx: l
+}) {
+  const o = !(e != null && e.length), {
+    labels: r,
+    loading: s,
+    getLabelsById: a
+  } = Q(), [h, u] = I(!1);
+  if (s || !n && o)
+    return null;
+  const g = (v) => {
+    i == null || i(v), setTimeout(() => {
+      u(!1);
+    }, 300);
+  };
+  if (h)
+    return /* @__PURE__ */ t(se, {
+      onClickAway: () => h && u(!1),
+      children: /* @__PURE__ */ t("div", {
+        children: /* @__PURE__ */ t(ve, {
+          data: r,
+          value: e || [],
+          onChange: g
+        })
+      })
+    });
+  const f = a(e || []), p = [{
+    display: "flex",
+    gap: 1,
+    alignItems: "center",
+    flexWrap: "wrap"
+  }, ...Array.isArray(l) ? l : [l]];
+  return /* @__PURE__ */ y(m, {
+    sx: p,
+    children: [f.map((v) => v ? /* @__PURE__ */ t(ae, {
+      label: v.name,
+      variant: "filled",
+      size: "small",
+      sx: {
+        borderRadius: 1
+      }
+    }, v.id) : null), n && !o && /* @__PURE__ */ t(O, {
+      color: "inherit",
+      size: "small",
+      onClick: () => u(!0),
+      sx: {
+        color: "grey.400"
+      },
+      children: /* @__PURE__ */ t(ie, {
+        sx: {
+          fontSize: 20
+        }
+      })
+    }), n && o && /* @__PURE__ */ t(A, {
+      color: "inherit",
+      variant: "outlined",
+      startIcon: /* @__PURE__ */ t(le, {}),
+      onClick: () => u(!0),
+      children: "Edit labels"
+    })]
+  });
+}
+export {
+  Ge as LabelManager,
+  ve as LabelPicker,
+  D as LabelTree,
+  Xe as Labels,
+  Ye as LabelsProvider,
+  ge as transformLabels,
+  Q as useLabelsContext,
+  Ue as useLabelsUpdateOnDestroy
+};

package/dist/index.umd.js

@@ -0,0 +1,34 @@
+(function(s,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("@mui/icons-material/ExpandMore"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("react/jsx-runtime"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/icons-material/DeleteOutlineOutlined"),require("@mui/icons-material/EditOutlined"),require("@mui/icons-material/Add"),require("react-use/lib/useSetState"),require("@mui/material/TextField"),require("@mui/base/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material/Alert"),require("@mui/icons-material/Edit"),require("@mui/icons-material/LabelOutlined"),require("@mui/material/ClickAwayListener"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","react","@mui/icons-material/ExpandMore","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","react/jsx-runtime","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/icons-material/DeleteOutlineOutlined","@mui/icons-material/EditOutlined","@mui/icons-material/Add","react-use/lib/useSetState","@mui/material/TextField","@mui/base/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material/Alert","@mui/icons-material/Edit","@mui/icons-material/LabelOutlined","@mui/material/ClickAwayListener","@mui/material/Chip"],f):(s=typeof globalThis<"u"?globalThis:s||self,f(s.DiscussKitComponents={},s.React,s.ExpandMoreIcon,s.Box,s.styles,s.reactArborist,s.react$1,s.jsxRuntime,s.omit,s.Select,s.Typography,s.Button,s.IconButton,s.DeleteOutlineOutlinedIcon,s.EditOutlinedIcon,s.AddIcon,s.useSetState,s.TextField,s.ClickAwayListener,s.reactColor,s.Dialog,s.Alert,s.EditIcon,s.LabelOutlinedIcon,s.ClickAwayListener$1,s.Chip))})(this,function(s,f,j,H,B,K,$,e,Q,T,J,U,Z,G,Y,X,R,ee,te,re,ne,le,ae,oe,ie,se){"use strict";const C=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},E=C(j),m=C(H),de=C(Q),ce=C(T),ue=C(J),k=C(U),A=C(Z),fe=C(G),he=C(Y),pe=C(X),me=C(R),q=C(ee),ye=C(te),D=C(ne),ge=C(le),xe=C(ae),Ce=C(oe),be=C(ie),ve=C(se),Se=t=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...t,children:e.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"})}),we=t=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...t,children:e.jsx("path",{fill:"currentColor",d:"m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"})}),P=f.createContext({});function Ie({selectable:t=!1,selected:r=[],onSelect:a,renderItem:o,children:l}){const n=p=>r.indexOf(p)!==-1,i=p=>{Array.from(new Set(r).add(p)),a==null||a(p)},d=f.useMemo(()=>({selectable:t,selected:r,isSelected:n,select:i,renderItem:o}),[r]);return e.jsx(P.Provider,{value:d,children:l})}const _e=t=>{var r;return t.isLeaf||!((r=t.data.children)!=null&&r.length)};function ke({node:t}){return _e(t)?e.jsx("span",{}):t.isOpen?e.jsx(E.default,{style:{fontSize:20}}):e.jsx(E.default,{style:{fontSize:20,transform:"rotate(-90deg)"}})}function Le({node:t,style:r,dragHandle:a}){const{selectable:o,select:l,isSelected:n,renderItem:i}=f.useContext(P),{data:d}=t,p=d.icon?e.jsx($.Icon,{icon:d.icon,style:{fontSize:18}}):e.jsx(Se,{style:{fontSize:18,color:d.color||"#ddd"}}),h=y=>{y.stopPropagation(),t.isInternal&&t.toggle()},x=y=>{y.stopPropagation(),o&&l(t.id)},g=e.jsxs(e.Fragment,{children:[e.jsxs(m.default,{sx:{display:"flex",alignItems:"center",flex:1},children:[e.jsx(m.default,{sx:{display:"flex",cursor:"pointer"},onClick:h,children:e.jsx(ke,{node:t})}),e.jsx(m.default,{sx:{display:"flex",alignItems:"center",width:22,height:22},children:p}),e.jsx(m.default,{component:"span",sx:{color:"grey.700"},children:t.data.name})]}),o&&n(t.id)&&e.jsx(we,{})]});return e.jsxs(m.default,{className:"label-tree-item",style:r,sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},ref:a,onClick:x,children:[!i&&g,!!i&&i(g,t.data)]})}const Ae=B.styled(m.default)`
+  > div,
+  > div > div,
+  > div > div > div {
+    width: auto !important;
+  }
+  [role='treeitem'] {
+    display: flex;
+    align-items: stretch;
+  }
+  .label-tree-item {
+    width: 100%;
+  }
+`;function z({data:t,selectable:r,selected:a=[],onSelect:o,rowHeight:l=28,renderItem:n,sx:i,...d}){const p=f.useRef(),h=[...Array.isArray(i)?i:[i]],[x,g]=f.useState(0),y=f.useCallback(()=>{var _,c;g((((c=(_=p.current)==null?void 0:_.visibleNodes)==null?void 0:c.length)||0)*l)},[l]);f.useEffect(()=>{y()},[t,y]);const S=()=>{setTimeout(y)};return e.jsx(Ie,{selectable:r,selected:a,onSelect:o,renderItem:n,children:e.jsx(Ae,{...d,sx:h,children:e.jsx(K.Tree,{data:t,rowHeight:l,height:x,indent:32,ref:p,onToggle:S,children:Le})})})}const O=t=>t.reduce((r,a)=>{var o;return r.push(a),(o=a.children)!=null&&o.length&&r.push(...O(a.children)),r},[]),F=t=>t.map(r=>{var a;return(a=r.children)!=null&&a.length&&(r.children=F(r.children)),r}),N=t=>{const r=t.reduce((l,n)=>(l[n.id]=l[n.id]||{},n.parentId&&(l[n.id].parent=n.parentId,l[n.parentId]=l[n.parentId]||{},l[n.parentId].children=l[n.parentId].children||[],l[n.parentId].children.push(n.id)),l),{}),a=t.map(({parentId:l,...n})=>({...n,children:[]})),o=a.reduce((l,n)=>({...l,[n.id]:n}),{});return a.forEach(l=>{const n=r[l.id];n.parent&&o[n.parent]&&(l.parent=o[n.parent]),n.children&&(l.children=n.children.map(i=>o[i]))}),a.filter(l=>!l.parent)},qe=t=>{const{options:r,getValue:a,selectProps:o,selectOption:l}=t,n=a(),i=d=>{const p=r.find(h=>h.data.id===d);p&&l(p)};return e.jsxs(e.Fragment,{children:[e.jsx(T.components.MenuList,{...de.default(t,["addon"]),children:e.jsx(m.default,{sx:{px:2,py:1},children:e.jsx(z,{data:o.data,selectable:!0,onSelect:i,selected:n.map(d=>d.data.id)})})}),t.addon]})},ze=({children:t,...r})=>{const[a,o]=t,l=Array.isArray(a)?a.length:0;return e.jsxs(T.components.ValueContainer,{...r,children:[e.jsx(m.default,{component:"span",sx:{fontSize:13,fontWeight:"bold"},children:l?"Labels":"Filter by labels"}),!!l&&e.jsx(m.default,{sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",width:22,height:22,ml:1,borderRadius:"100%",fontSize:12,bgcolor:"grey.200"},children:l}),o]})},Oe={control:t=>({...t,minHeight:31}),valueContainer:t=>({...t,display:"flex"}),dropdownIndicator:t=>({...t,padding:"0 4px"}),clearIndicator:t=>({...t,padding:"4px"})};function V({data:t,value:r=[],editable:a=!1,addon:o,onChange:l,compact:n,...i}){const d=f.useRef(null),p=f.useMemo(()=>O(t).map(c=>({data:c,label:c.name,value:c.id})),[t]),h=p.reduce((c,w)=>({...c,[w.data.id]:w}),{}),x=Array.isArray(r)?r:[r],g=x.map(c=>h[c]),y=f.useRef({prev:x.map(c=>h[c].data)}),S=(c,w)=>{y.current.current=c.map(L=>L.data),["clear","remove-value"].includes(w.action)&&d.current&&setTimeout(()=>{var L;return(L=d==null?void 0:d.current)==null?void 0:L.blur()},1)},_=()=>{y.current.current&&JSON.stringify(y.current.prev.map(w=>w.id))!==JSON.stringify(y.current.current.map(w=>w.id))&&(l(y.current.current),y.current.prev=y.current.current)};return e.jsx(m.default,{...i,children:e.jsx(ce.default,{ref:d,defaultValue:g,options:p,onChange:S,components:{MenuList:c=>e.jsx(qe,{...c,addon:o}),...n&&{ValueContainer:ze}},placeholder:"Select labels",styles:{...n&&Oe,menu:c=>({...c,...a&&{paddingBottom:"36px"},zIndex:99}),menuList:c=>({...c,overflowY:"auto",maxHeight:"264px"})},theme:c=>({...c,colors:{...c.colors,primary25:"#ddd",primary50:"#ddd",primary:"#ddd"}}),isSearchable:!1,isMulti:!0,closeMenuOnSelect:!1,onMenuClose:_,data:t})})}function Te({open:t,initialLabel:r,onSubmit:a,onClose:o,...l}){const n=!(r!=null&&r.id),[i,d]=me.default({name:(r==null?void 0:r.name)||"",color:(r==null?void 0:r.color)||"#ddd",slug:(r==null?void 0:r.id)||""}),p=c=>/^#([0-9A-F]{3}){1,2}$/i.test(c),h=f.useMemo(()=>n?i.name&&i.color&&i.slug&&p(i.color):i.name&&i.color&&p(i.color),[i,n]),[x,g]=f.useState(!1),y=()=>{a({...r,name:i.name,color:i.color,id:i.slug})},S=c=>{d({color:c.hex}),setTimeout(()=>g(!1))},_=c=>{d({color:c.target.value})};return e.jsx(D.default,{open:t,showCloseButton:!0,maxWidth:"lg",title:n?"Create label":"Edit label",actions:e.jsxs(e.Fragment,{children:[e.jsx(k.default,{color:"inherit",variant:"contained",size:"small",onClick:o,children:"Cancel"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",onClick:y,disabled:!h,children:n?"Create":"Save Changes"})]}),onClose:o,...l,children:e.jsxs(m.default,{width:600,minHeight:280,children:[e.jsx(m.default,{sx:{position:"relative",zIndex:9999},children:e.jsx(q.default,{label:"Name",value:i.name,placeholder:"New label",size:"small",fullWidth:!0,onChange:c=>d({name:c.target.value})})}),e.jsx(q.default,{label:"Slug",value:i.slug,size:"small",fullWidth:!0,disabled:!n,onChange:c=>d({slug:c.target.value}),sx:{mt:2}}),(r==null?void 0:r.parent)&&e.jsx(q.default,{label:"Parent",value:r.parent.name,size:"small",fullWidth:!0,disabled:!0,sx:{mt:2}}),e.jsx(ye.default,{onClickAway:()=>g(!1),children:e.jsxs(m.default,{sx:{position:"relative",mt:2},children:[e.jsxs(m.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(m.default,{sx:{width:30,height:30,bgcolor:i.color,borderRadius:1},onClick:()=>g(!0)}),e.jsx(q.default,{label:"",value:i.color,size:"small",onChange:_,inputProps:{maxLength:7},sx:{width:100,".MuiInputBase-root":{height:32}}})]}),x&&e.jsx(m.default,{sx:{position:"absolute",top:48,zIndex:1},children:e.jsx(re.GithubPicker,{color:i.color,onChangeComplete:S})})]})})]})})}function Me({open:t,label:r,onSubmit:a,onClose:o,...l}){return e.jsx(D.default,{open:t,showCloseButton:!0,maxWidth:"md",title:"Delete",actions:e.jsxs(e.Fragment,{children:[e.jsx(k.default,{color:"inherit",variant:"contained",size:"small",onClick:o,children:"Cancel"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",onClick:a,children:"Delete"})]}),onClose:o,...l,children:e.jsxs(m.default,{width:600,minHeight:280,children:[e.jsx(ge.default,{severity:"info",sx:{mb:2},children:"Are you sure you want to delete these labels ?"}),e.jsx(z,{data:[r]})]})})}const Be=B.styled(z)`
+  .label-tree-item {
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      border-top: 1px solid #ddd;
+    }
+  }
+  & [role='treeitem']:first-of-type > .label-tree-item {
+    &:before {
+      display: none;
+    }
+  }
+  [role='treeitem'] {
+    box-sizing: border-box;
+    padding: 0 16px;
+  }
+`;function Ee({data:t,api:r,...a}){const[o,l]=f.useState(null),[n,i]=f.useState(null),[d,p]=f.useState(F(t)),h=f.useMemo(()=>O(d),[d]),x=f.useMemo(()=>{const u=(b,I)=>b.map(v=>(I&&(v.parent=I),v.children&&(v.children=u(v.children,v)),v));return u(d)},[d]),g=u=>{var b,I;u.parent?(u.parent.children=(I=(b=u.parent)==null?void 0:b.children)==null?void 0:I.map(v=>v.id===u.id?{...u}:v),g(u.parent)):p(d.map(v=>v.id===u.id?{...u}:v))},y=u=>{u.parent?(u.parent.children=u.parent.children||[],u.parent.children.push(u),p([...d])):p([...d,u])},S=u=>{var b;u.parent?u.parent.children=(b=u.parent.children)==null?void 0:b.filter(I=>I.id!==u.id):p(d.filter(I=>I.id!==u.id))},_=u=>{if(o)return;l({id:"",name:"New label",parent:u,color:"#dddddd"})},c=u=>{o||l(u)},w=async u=>{if(!o)return;const{parent:b,children:I,...v}=u;o.id?(await r.updateLabel({...v,parentId:b==null?void 0:b.id}),g(u)):(await r.createLabel({...v,parentId:b==null?void 0:b.id}),y(u)),l(null)},L=async()=>{!n||(await r.deleteLabel(n.id),S(n),i(null))},Ne=(u,b)=>e.jsxs(e.Fragment,{children:[u,e.jsxs(m.default,{sx:{display:"flex",gap:1,flex:"0 0 auto"},children:[e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>_(b),children:e.jsx(pe.default,{sx:{fontSize:20}})}),e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>c(b),children:e.jsx(he.default,{sx:{fontSize:18}})}),e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>i(b),children:e.jsx(fe.default,{sx:{fontSize:20}})})]})]});return e.jsxs(m.default,{...a,children:[e.jsxs(m.default,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx(ue.default,{component:"h2",variant:"h6",children:"Manage labels"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",sx:{textTransform:"none"},onClick:()=>_(),children:"New label"})]}),e.jsxs(m.default,{sx:{mt:2,border:1,borderColor:"grey.300",borderRadius:1,overflow:"hidden"},children:[e.jsxs(m.default,{sx:{p:2,fontSize:14,fontWeight:"bold",bgcolor:"grey.200"},children:[h.length," labels"]}),e.jsx(m.default,{sx:{pt:.5},children:e.jsx(Be,{data:x,selected:[],renderItem:Ne,rowHeight:64})})]}),e.jsx(Te,{open:!!o,onClose:()=>l(null),initialLabel:o,onSubmit:w},o==null?void 0:o.id),e.jsx(Me,{open:!!n,onClose:()=>i(null),label:n,onSubmit:L},n==null?void 0:n.id)]})}const W=f.createContext({}),M=()=>f.useContext(W),De=()=>{const{updateLabels:t}=M();f.useEffect(()=>()=>{t()},[])};function Pe({fetchLabels:t,children:r}){const[a,o]=f.useState({loading:!0,labels:[],updateCounter:1});f.useEffect(()=>{(async()=>{try{o(g=>({...g,loading:!0}));const x=await t();o(g=>({...g,loading:!1,labels:N(x)}))}catch(x){console.error(x),o(g=>({...g,loading:!1,labels:[]}))}})()},[a.updateCounter]);const l=f.useMemo(()=>{var x;return(x=a.labels)!=null&&x.length?O(a.labels).reduce((g,y)=>({...g,[y.id]:y}),{}):{}},[a.labels]),n=f.useCallback(h=>h.map(x=>l[x]),[l]),i=f.useCallback(h=>(h==null?void 0:h.split(","))||[],[]),d=f.useCallback((h=[])=>{if(!!(h!=null&&h.length))return h.join(",")},[]),p=f.useMemo(()=>({loading:a.loading,labels:a.labels||[],updateLabels:()=>o(h=>({...h,updateCounter:++a.updateCounter})),getLabelsById:n,parseLabelIds:i,stringifyLabelIds:d}),[a,n,i,d]);return e.jsx(W.Provider,{value:p,children:r})}function Fe({labels:t,editable:r,onChange:a,sx:o}){const l=!(t!=null&&t.length),{labels:n,loading:i,getLabelsById:d}=M(),[p,h]=f.useState(!1);if(i||!r&&l)return null;const x=S=>{a==null||a(S),setTimeout(()=>{h(!1)},300)};if(p)return e.jsx(be.default,{onClickAway:()=>p&&h(!1),children:e.jsx("div",{children:e.jsx(V,{data:n,value:t||[],onChange:x})})});const g=d(t||[]),y=[{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},...Array.isArray(o)?o:[o]];return e.jsxs(m.default,{sx:y,children:[g.map(S=>S?e.jsx(ve.default,{label:S.name,variant:"filled",size:"small",sx:{borderRadius:1}},S.id):null),r&&!l&&e.jsx(A.default,{color:"inherit",size:"small",onClick:()=>h(!0),sx:{color:"grey.400"},children:e.jsx(xe.default,{sx:{fontSize:20}})}),r&&l&&e.jsx(k.default,{color:"inherit",variant:"outlined",startIcon:e.jsx(Ce.default,{}),onClick:()=>h(!0),children:"Edit labels"})]})}s.LabelManager=Ee,s.LabelPicker=V,s.LabelTree=z,s.Labels=Fe,s.LabelsProvider=Pe,s.transformLabels=N,s.useLabelsContext=M,s.useLabelsUpdateOnDestroy=De,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@blocklet/labels",
+  "version": "1.0.63",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "npm run storybook",
+    "build": "tsc && vite build",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "storybook": "start-storybook -p 6007",
+    "build-storybook": "build-storybook",
+    "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx --fix"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@iconify/react": "^4.0.1",
+    "react-arborist": "^2.2.0",
+    "react-color": "^2.19.3",
+    "react-select": "^5.6.0"
+  },
+  "peerDependencies": {
+    "@arcblock/ux": "^2.4.61",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/material": "^5.10.13",
+    "lodash": "^4.17.21",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "react-router-dom": "^6.4.0"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config-ts": "^0.2.3",
+    "@babel/core": "^7.20.2",
+    "@iconify-json/iconoir": "^1.1.14",
+    "@iconify-json/material-symbols": "^1.1.26",
+    "@iconify-json/mdi": "^1.1.36",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.5",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@svgr/core": "^6.5.1",
+    "@types/react": "^18.0.24",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "babel-loader": "^8.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.6.4",
+    "unplugin-icons": "^0.14.14",
+    "vite": "3.1.8",
+    "vite-plugin-dts": "^1.7.1",
+    "vite-plugin-libcss": "^1.0.5"
+  },
+  "resolutions": {
+    "react": "^18.2.0"
+  },
+  "gitHead": "3a664f181b9cbcae5b07d37861720c29e75b9ba5"
+}