@blocklet/labels 1.6.168 → 1.6.169

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.es.js +88 -52
  2. package/dist/index.umd.js +87 -51
  3. package/dist/label2/labels-input.d.ts +3 -0
  4. package/dist/label2/labels2.d.ts +4 -1
  5. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -13,7 +13,7 @@ import { Tree } from "react-arborist";
13
13
  import { Icon } from "@iconify/react";
14
14
  import omit from "lodash/omit";
15
15
  import Select, { components } from "react-select";
16
- import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, TextField } from "@mui/material";
16
+ import { ClickAwayListener, Box as Box$1, Chip, IconButton, Button, getContrastRatio, alpha, useTheme, ButtonBase, Popper, Autocomplete, InputBase, autocompleteClasses, darken, TextField } from "@mui/material";
17
17
  import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
18
18
  import { useReactive, useRequest } from "ahooks";
19
19
  import { createContainer } from "unstated-next";
@@ -944,50 +944,54 @@ function GithubLabelPicker({
944
944
  PopperComponent,
945
945
  renderTags: () => null,
946
946
  noOptionsText: noLabelsText || "No labels",
947
- renderOption: (props, option, { selected }) => /* @__PURE__ */ createElement("li", { ...props, key: option.data.id }, /* @__PURE__ */ jsx(
948
- Box$1,
949
- {
950
- component: DoneIcon,
951
- sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
952
- style: {
953
- visibility: selected ? "visible" : "hidden"
947
+ renderOption: (props, option, { selected }) => /* @__PURE__ */ createElement("li", { ...props, key: option.data.id }, /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
948
+ /* @__PURE__ */ jsx(
949
+ Box$1,
950
+ {
951
+ component: DoneIcon,
952
+ sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
953
+ style: {
954
+ visibility: selected ? "visible" : "hidden"
955
+ }
954
956
  }
955
- }
956
- ), /* @__PURE__ */ jsx(
957
- Box$1,
958
- {
959
- component: "span",
960
- sx: {
961
- width: 14,
962
- height: 14,
963
- flexShrink: 0,
964
- borderRadius: "3px",
965
- mr: 1,
966
- mt: "2px"
967
- },
968
- style: { backgroundColor: option.data.color || "#ddd" }
969
- }
970
- ), /* @__PURE__ */ jsx(
971
- Box$1,
972
- {
973
- sx: {
974
- flexGrow: 1,
975
- "& span": {
976
- color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
957
+ ),
958
+ /* @__PURE__ */ jsx(
959
+ Box$1,
960
+ {
961
+ component: "span",
962
+ sx: {
963
+ width: 14,
964
+ height: 14,
965
+ flexShrink: 0,
966
+ borderRadius: "3px",
967
+ mr: 1
968
+ },
969
+ style: { backgroundColor: option.data.color || "#ddd" }
970
+ }
971
+ ),
972
+ /* @__PURE__ */ jsx(
973
+ Box$1,
974
+ {
975
+ sx: {
976
+ flexGrow: 1,
977
+ "& span": {
978
+ color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
979
+ }
980
+ },
981
+ children: option.getFullName(locale)
982
+ }
983
+ ),
984
+ /* @__PURE__ */ jsx(
985
+ Box$1,
986
+ {
987
+ component: CloseIcon,
988
+ sx: { opacity: 0.6, width: 18, height: 18 },
989
+ style: {
990
+ visibility: selected ? "visible" : "hidden"
977
991
  }
978
- },
979
- children: option.getFullName(locale)
980
- }
981
- ), /* @__PURE__ */ jsx(
982
- Box$1,
983
- {
984
- component: CloseIcon,
985
- sx: { opacity: 0.6, width: 18, height: 18 },
986
- style: {
987
- visibility: selected ? "visible" : "hidden"
988
992
  }
989
- }
990
- )),
993
+ )
994
+ ] })),
991
995
  options: [...filteredLabels].sort((a, b) => {
992
996
  let ai = value.indexOf(a.data.id);
993
997
  ai = ai === -1 ? value.length + filteredLabels.indexOf(a) : ai;
@@ -1065,6 +1069,22 @@ const getContrastTextColor = (bgcolor) => {
1065
1069
  return "#111";
1066
1070
  }
1067
1071
  };
1072
+ const getTextColor = (bgcolor) => {
1073
+ try {
1074
+ const dark = darken(bgcolor, 0.5);
1075
+ const ratio = getContrastRatio(bgcolor, dark);
1076
+ return ratio > 2.4 ? dark : getContrastTextColor(bgcolor);
1077
+ } catch {
1078
+ return getContrastTextColor(bgcolor);
1079
+ }
1080
+ };
1081
+ const getBorderColor = (bgcolor) => {
1082
+ try {
1083
+ return darken(bgcolor, 0.05);
1084
+ } catch {
1085
+ return bgcolor;
1086
+ }
1087
+ };
1068
1088
  const getAlphaColor = (color, alpha$1) => {
1069
1089
  try {
1070
1090
  if (color) {
@@ -1075,21 +1095,37 @@ const getAlphaColor = (color, alpha$1) => {
1075
1095
  }
1076
1096
  return color;
1077
1097
  };
1078
- function LabelChip({ label }) {
1079
- const { getFullLabelName } = LabelsContainer.useContainer();
1098
+ function LabelChip({
1099
+ label,
1100
+ onDelete,
1101
+ sx,
1102
+ fullName = true
1103
+ }) {
1104
+ const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
1105
+ const mergedSx = [
1106
+ {
1107
+ height: 20,
1108
+ borderRadius: 0.5,
1109
+ fontSize: 12,
1110
+ fontWeight: "medium",
1111
+ bgcolor: getAlphaColor(label.data.color, 0.8),
1112
+ color: getTextColor(label.data.color),
1113
+ border: 1,
1114
+ borderColor: getBorderColor(label.data.color)
1115
+ },
1116
+ ...Array.isArray(sx) ? sx : [sx]
1117
+ ];
1080
1118
  return /* @__PURE__ */ jsx(
1081
1119
  Chip,
1082
1120
  {
1083
- label: getFullLabelName(label.data.id),
1121
+ label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
1084
1122
  variant: "filled",
1085
1123
  size: "small",
1086
- sx: {
1087
- height: 20,
1088
- borderRadius: 1,
1089
- fontSize: 12,
1090
- bgcolor: getAlphaColor(label.data.color, 0.8),
1091
- color: getContrastTextColor(label.data.color)
1092
- }
1124
+ ...onDelete && {
1125
+ onDelete,
1126
+ deleteIcon: /* @__PURE__ */ jsx(CloseIcon, {})
1127
+ },
1128
+ sx: mergedSx
1093
1129
  },
1094
1130
  label.data.id
1095
1131
  );
package/dist/index.umd.js CHANGED
@@ -932,50 +932,54 @@ var __publicField = (obj, key, value) => {
932
932
  PopperComponent,
933
933
  renderTags: () => null,
934
934
  noOptionsText: noLabelsText || "No labels",
935
- renderOption: (props, option, { selected }) => /* @__PURE__ */ react.createElement("li", { ...props, key: option.data.id }, /* @__PURE__ */ jsxRuntime.jsx(
936
- material.Box,
937
- {
938
- component: DoneIcon,
939
- sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
940
- style: {
941
- visibility: selected ? "visible" : "hidden"
935
+ renderOption: (props, option, { selected }) => /* @__PURE__ */ react.createElement("li", { ...props, key: option.data.id }, /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
936
+ /* @__PURE__ */ jsxRuntime.jsx(
937
+ material.Box,
938
+ {
939
+ component: DoneIcon,
940
+ sx: { width: 17, height: 17, mr: "5px", ml: "-2px" },
941
+ style: {
942
+ visibility: selected ? "visible" : "hidden"
943
+ }
942
944
  }
943
- }
944
- ), /* @__PURE__ */ jsxRuntime.jsx(
945
- material.Box,
946
- {
947
- component: "span",
948
- sx: {
949
- width: 14,
950
- height: 14,
951
- flexShrink: 0,
952
- borderRadius: "3px",
953
- mr: 1,
954
- mt: "2px"
955
- },
956
- style: { backgroundColor: option.data.color || "#ddd" }
957
- }
958
- ), /* @__PURE__ */ jsxRuntime.jsx(
959
- material.Box,
960
- {
961
- sx: {
962
- flexGrow: 1,
963
- "& span": {
964
- color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
945
+ ),
946
+ /* @__PURE__ */ jsxRuntime.jsx(
947
+ material.Box,
948
+ {
949
+ component: "span",
950
+ sx: {
951
+ width: 14,
952
+ height: 14,
953
+ flexShrink: 0,
954
+ borderRadius: "3px",
955
+ mr: 1
956
+ },
957
+ style: { backgroundColor: option.data.color || "#ddd" }
958
+ }
959
+ ),
960
+ /* @__PURE__ */ jsxRuntime.jsx(
961
+ material.Box,
962
+ {
963
+ sx: {
964
+ flexGrow: 1,
965
+ "& span": {
966
+ color: theme.palette.mode === "light" ? "#586069" : "#8b949e"
967
+ }
968
+ },
969
+ children: option.getFullName(locale)
970
+ }
971
+ ),
972
+ /* @__PURE__ */ jsxRuntime.jsx(
973
+ material.Box,
974
+ {
975
+ component: CloseIcon,
976
+ sx: { opacity: 0.6, width: 18, height: 18 },
977
+ style: {
978
+ visibility: selected ? "visible" : "hidden"
965
979
  }
966
- },
967
- children: option.getFullName(locale)
968
- }
969
- ), /* @__PURE__ */ jsxRuntime.jsx(
970
- material.Box,
971
- {
972
- component: CloseIcon,
973
- sx: { opacity: 0.6, width: 18, height: 18 },
974
- style: {
975
- visibility: selected ? "visible" : "hidden"
976
980
  }
977
- }
978
- )),
981
+ )
982
+ ] })),
979
983
  options: [...filteredLabels].sort((a, b) => {
980
984
  let ai = value.indexOf(a.data.id);
981
985
  ai = ai === -1 ? value.length + filteredLabels.indexOf(a) : ai;
@@ -1053,6 +1057,22 @@ var __publicField = (obj, key, value) => {
1053
1057
  return "#111";
1054
1058
  }
1055
1059
  };
1060
+ const getTextColor = (bgcolor) => {
1061
+ try {
1062
+ const dark = material.darken(bgcolor, 0.5);
1063
+ const ratio = material.getContrastRatio(bgcolor, dark);
1064
+ return ratio > 2.4 ? dark : getContrastTextColor(bgcolor);
1065
+ } catch {
1066
+ return getContrastTextColor(bgcolor);
1067
+ }
1068
+ };
1069
+ const getBorderColor = (bgcolor) => {
1070
+ try {
1071
+ return material.darken(bgcolor, 0.05);
1072
+ } catch {
1073
+ return bgcolor;
1074
+ }
1075
+ };
1056
1076
  const getAlphaColor = (color, alpha) => {
1057
1077
  try {
1058
1078
  if (color) {
@@ -1063,21 +1083,37 @@ var __publicField = (obj, key, value) => {
1063
1083
  }
1064
1084
  return color;
1065
1085
  };
1066
- function LabelChip({ label }) {
1067
- const { getFullLabelName } = LabelsContainer.useContainer();
1086
+ function LabelChip({
1087
+ label,
1088
+ onDelete,
1089
+ sx,
1090
+ fullName = true
1091
+ }) {
1092
+ const { getFullLabelName, getLabelName } = LabelsContainer.useContainer();
1093
+ const mergedSx = [
1094
+ {
1095
+ height: 20,
1096
+ borderRadius: 0.5,
1097
+ fontSize: 12,
1098
+ fontWeight: "medium",
1099
+ bgcolor: getAlphaColor(label.data.color, 0.8),
1100
+ color: getTextColor(label.data.color),
1101
+ border: 1,
1102
+ borderColor: getBorderColor(label.data.color)
1103
+ },
1104
+ ...Array.isArray(sx) ? sx : [sx]
1105
+ ];
1068
1106
  return /* @__PURE__ */ jsxRuntime.jsx(
1069
1107
  material.Chip,
1070
1108
  {
1071
- label: getFullLabelName(label.data.id),
1109
+ label: fullName ? getFullLabelName(label.data.id) : getLabelName(label.data.id),
1072
1110
  variant: "filled",
1073
1111
  size: "small",
1074
- sx: {
1075
- height: 20,
1076
- borderRadius: 1,
1077
- fontSize: 12,
1078
- bgcolor: getAlphaColor(label.data.color, 0.8),
1079
- color: getContrastTextColor(label.data.color)
1080
- }
1112
+ ...onDelete && {
1113
+ onDelete,
1114
+ deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
1115
+ },
1116
+ sx: mergedSx
1081
1117
  },
1082
1118
  label.data.id
1083
1119
  );
package/dist/label2/labels-input.d.ts CHANGED
@@ -5,4 +5,7 @@ export interface LabelsInputProps {
5
5
  onChange: (value: string[]) => void;
6
6
  LabelPickerProps?: Partial<GithubLabelPickerProps>;
7
7
  }
8
+ /**
9
+ * @deprecated, use `LabelsInput2` instead
10
+ */
8
11
  export declare function LabelsInput({ value, onChange, LabelPickerProps, sx, ...rest }: LabelsInputProps & Omit<TextFieldProps, 'onChange'>): import("react/jsx-runtime").JSX.Element | null;
package/dist/label2/labels2.d.ts CHANGED
@@ -8,8 +8,11 @@ interface LabelsProps {
8
8
  prepend?: React.ReactNode;
9
9
  displaySystemLabels?: boolean;
10
10
  }
11
- export declare function LabelChip({ label }: {
11
+ export declare function LabelChip({ label, onDelete, sx, fullName, }: {
12
12
  label: LabelTreeNode;
13
+ onDelete?: () => void;
14
+ sx?: SxProps;
15
+ fullName?: boolean;
13
16
  }): import("react/jsx-runtime").JSX.Element;
14
17
  export declare function Labels2({ labels, sx, renderLabel, prepend, displaySystemLabels }: LabelsProps): import("react/jsx-runtime").JSX.Element | null;
15
18
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/labels",
3
- "version": "1.6.168",
3
+ "version": "1.6.169",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -28,7 +28,7 @@
28
28
  "access": "public"
29
29
  },
30
30
  "dependencies": {
31
- "@blocklet/translation-input": "1.6.168",
31
+ "@blocklet/translation-input": "1.6.169",
32
32
  "@emotion/css": "^11.10.5",
33
33
  "@emotion/react": "^11.10.5",
34
34
  "@emotion/styled": "^11.10.5",
@@ -80,5 +80,5 @@
80
80
  "resolutions": {
81
81
  "react": "^18.2.0"
82
82
  },
83
- "gitHead": "c03fd59df1ee99a64da44385d23afb8c875055aa"
83
+ "gitHead": "7caa727540c6b01581cf21807affab650dbb0b60"
84
84
  }