@tidbcloud/uikit 2.0.0-beta.111 → 2.0.0-beta.112

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 (4) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/primitive/Select/index.cjs +59 -151
  3. package/dist/primitive/Select/index.mjs +60 -152
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.112
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(select): enhance creatable select functionality ([#405](https://github.com/tidbcloud/tidbcloud-uikit/pull/405))
8
+
3
9
  ## 2.0.0-beta.111
4
10
 
5
11
  ### Patch Changes
package/dist/primitive/Select/index.cjs CHANGED
@@ -2,182 +2,90 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
- const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
6
5
  const Select$1 = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Select/Select.cjs");
7
6
  const MultiSelect$1 = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/MultiSelect/MultiSelect.cjs");
7
+ const useUncontrolled = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.cjs");
8
+ const getParsedComboboxData = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.cjs");
8
9
  const defaultGetCreateLabel = (query) => `+ Create ${query}`;
9
10
  const CREATE_VALUE_PREFIX = "$create:";
10
11
  const defaultGetCreateValue = (query) => `${CREATE_VALUE_PREFIX}${query}`;
11
- function Select(props) {
12
- const {
13
- creatable = false,
14
- getCreateLabel = defaultGetCreateLabel,
15
- searchable,
16
- onCreate,
17
- filter,
18
- onChange,
19
- ...rest
20
- } = props;
12
+ function useCreateableSelect(props) {
13
+ const { creatable = false, getCreateLabel = defaultGetCreateLabel, onCreate, searchable, ...rest } = props;
21
14
  if (creatable && typeof onCreate !== "function") {
22
15
  throw new Error("`onCreate` is required when `creatable` is true");
23
16
  }
24
- const [dropdownOpened, setDropdownOpened] = useUncontrolled.useUncontrolled({
25
- value: props.dropdownOpened,
26
- defaultValue: false,
27
- onChange: (value2) => {
28
- var _a, _b;
29
- if (value2) {
30
- (_a = props.onDropdownOpen) == null ? void 0 : _a.call(props);
31
- } else {
32
- (_b = props.onDropdownClose) == null ? void 0 : _b.call(props);
33
- }
34
- }
35
- });
36
- const close = React.useCallback(() => setDropdownOpened(false), []);
37
- const open = React.useCallback(() => setDropdownOpened(true), []);
38
17
  const [value, setValue] = useUncontrolled.useUncontrolled({
39
18
  value: props.value,
40
19
  onChange: props.onChange,
41
- defaultValue: ""
20
+ defaultValue: props.defaultValue
42
21
  });
43
22
  const [searchValue, setSearchValue] = useUncontrolled.useUncontrolled({
44
23
  value: props.searchValue,
45
24
  onChange: props.onSearchChange,
46
25
  defaultValue: ""
47
26
  });
48
- const defaultOptionsFilter = React.useCallback(({ options, search }) => {
49
- const splittedSearch = search.toLowerCase().trim().split(" ");
50
- const nextItems = options.filter((option) => {
51
- const words = option.label.toLowerCase().trim().split(" ");
52
- return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
53
- });
54
- if (nextItems.length === 0) {
55
- return [
56
- {
57
- label: getCreateLabel(search),
58
- value: defaultGetCreateValue(search)
59
- }
60
- ];
27
+ const parsedData = React.useMemo(() => {
28
+ const parsedData2 = getParsedComboboxData.getParsedComboboxData(props.data);
29
+ if (!creatable || !searchValue) {
30
+ return parsedData2;
61
31
  }
62
- return nextItems;
63
- }, []);
64
- const handleOptionSubmit = React.useCallback((value2) => {
65
- var _a, _b;
66
- if (creatable && value2.startsWith(CREATE_VALUE_PREFIX) && typeof onCreate === "function") {
67
- const createdItem = onCreate(value2.slice(CREATE_VALUE_PREFIX.length));
68
- if (createdItem) {
69
- setValue(createdItem.value, createdItem);
70
- setSearchValue("");
71
- close();
72
- (_a = props.onOptionSubmit) == null ? void 0 : _a.call(props, createdItem.value);
32
+ const placeholder = {
33
+ label: getCreateLabel(searchValue),
34
+ value: defaultGetCreateValue(searchValue)
35
+ };
36
+ if (parsedData2.findIndex((item) => {
37
+ if ("value" in item) {
38
+ return item.value === placeholder.value.slice(CREATE_VALUE_PREFIX.length);
73
39
  }
74
- } else {
75
- (_b = props.onOptionSubmit) == null ? void 0 : _b.call(props, value2);
76
- }
77
- }, []);
78
- return /* @__PURE__ */ jsxRuntime.jsx(
79
- Select$1.Select,
80
- {
81
- ...rest,
82
- value,
83
- onChange: setValue,
84
- searchable: searchable || creatable,
85
- searchValue,
86
- onSearchChange: setSearchValue,
87
- filter: creatable ? defaultOptionsFilter : filter,
88
- onOptionSubmit: handleOptionSubmit,
89
- dropdownOpened,
90
- onDropdownClose: close,
91
- onDropdownOpen: open
40
+ return false;
41
+ }) === -1) {
42
+ parsedData2.push(placeholder);
92
43
  }
93
- );
94
- }
95
- function MultiSelect(props) {
96
- const {
97
- creatable = false,
98
- getCreateLabel = defaultGetCreateLabel,
99
- searchable,
100
- onCreate,
101
- filter,
102
- onChange,
103
- ...rest
104
- } = props;
105
- if (creatable && typeof onCreate !== "function") {
106
- throw new Error("`onCreate` is required when `creatable` is true");
107
- }
108
- const [dropdownOpened, setDropdownOpened] = useUncontrolled.useUncontrolled({
109
- value: props.dropdownOpened,
110
- onChange: (value2) => {
44
+ return parsedData2;
45
+ }, [props.data, searchValue]);
46
+ const handleChange = React.useCallback(
47
+ (value2, option) => {
111
48
  var _a, _b;
112
- if (value2) {
113
- (_a = props.onDropdownOpen) == null ? void 0 : _a.call(props);
114
- } else {
115
- (_b = props.onDropdownClose) == null ? void 0 : _b.call(props);
116
- }
117
- },
118
- defaultValue: false
119
- });
120
- const close = React.useCallback(() => setDropdownOpened(false), []);
121
- const open = React.useCallback(() => setDropdownOpened(true), []);
122
- const [value, setValue] = useUncontrolled.useUncontrolled({
123
- value: props.value,
124
- onChange: props.onChange,
125
- defaultValue: []
126
- });
127
- const [searchValue, setSearchValue] = useUncontrolled.useUncontrolled({
128
- value: props.searchValue,
129
- onChange: props.onSearchChange,
130
- defaultValue: ""
131
- });
132
- const defaultOptionsFilter = React.useCallback(({ options, search }) => {
133
- const splittedSearch = search.toLowerCase().trim().split(" ");
134
- const nextItems = options.filter((option) => {
135
- const words = option.label.toLowerCase().trim().split(" ");
136
- return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
137
- });
138
- if (nextItems.length === 0) {
139
- return [
140
- {
141
- label: getCreateLabel(search),
142
- value: defaultGetCreateValue(search)
49
+ if (creatable) {
50
+ const isMultiSelect = Array.isArray(value2);
51
+ const values = Array.isArray(value2) ? value2 : [value2];
52
+ const clickedCreateItem = values.some((i) => typeof i === "string" && i.startsWith(CREATE_VALUE_PREFIX));
53
+ if (clickedCreateItem) {
54
+ const newItemValue = isMultiSelect ? values.find((i) => typeof i === "string" && i.startsWith(CREATE_VALUE_PREFIX)) : value2;
55
+ if (newItemValue) {
56
+ const createdItem = onCreate(newItemValue == null ? void 0 : newItemValue.slice(CREATE_VALUE_PREFIX.length));
57
+ if (createdItem) {
58
+ const nextValue = isMultiSelect ? [...values.filter((i) => !(i == null ? void 0 : i.startsWith(CREATE_VALUE_PREFIX))), createdItem.value] : createdItem.value;
59
+ setValue(nextValue);
60
+ setSearchValue("");
61
+ (_a = props.onChange) == null ? void 0 : _a.call(props, nextValue, option);
62
+ return;
63
+ }
64
+ }
143
65
  }
144
- ];
145
- }
146
- return nextItems;
147
- }, []);
148
- const handleOptionSubmit = React.useCallback(
149
- (val) => {
150
- var _a, _b;
151
- if (creatable && val.startsWith(CREATE_VALUE_PREFIX) && typeof onCreate === "function") {
152
- const createdItem = onCreate(val.slice(CREATE_VALUE_PREFIX.length));
153
- if (createdItem) {
154
- setValue([...value, createdItem.value]);
155
- setSearchValue("");
156
- close();
157
- (_a = props.onOptionSubmit) == null ? void 0 : _a.call(props, createdItem.value);
158
- }
159
- } else {
160
- (_b = props.onOptionSubmit) == null ? void 0 : _b.call(props, val);
161
66
  }
67
+ setValue(value2);
68
+ (_b = props.onChange) == null ? void 0 : _b.call(props, value2, option);
162
69
  },
163
- [value]
164
- );
165
- return /* @__PURE__ */ jsxRuntime.jsx(
166
- MultiSelect$1.MultiSelect,
167
- {
168
- ...rest,
169
- value,
170
- onChange: setValue,
171
- searchable: searchable || creatable,
172
- searchValue,
173
- onSearchChange: setSearchValue,
174
- filter: creatable ? defaultOptionsFilter : filter,
175
- onOptionSubmit: handleOptionSubmit,
176
- dropdownOpened,
177
- onDropdownClose: close,
178
- onDropdownOpen: open
179
- }
70
+ [searchValue, creatable]
180
71
  );
72
+ return {
73
+ ...rest,
74
+ data: parsedData,
75
+ value,
76
+ onChange: handleChange,
77
+ searchable: searchable || creatable,
78
+ searchValue,
79
+ onSearchChange: setSearchValue
80
+ };
81
+ }
82
+ function Select(props) {
83
+ const allProps = useCreateableSelect(props);
84
+ return /* @__PURE__ */ jsxRuntime.jsx(Select$1.Select, { ...allProps });
85
+ }
86
+ function MultiSelect(props) {
87
+ const allProps = useCreateableSelect(props);
88
+ return /* @__PURE__ */ jsxRuntime.jsx(MultiSelect$1.MultiSelect, { ...allProps });
181
89
  }
182
90
  exports.MultiSelect = MultiSelect;
183
91
  exports.Select = Select;
package/dist/primitive/Select/index.mjs CHANGED
@@ -1,181 +1,89 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { useCallback } from "react";
3
- import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
2
+ import { useMemo, useCallback } from "react";
4
3
  import { Select as Select$1 } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Select/Select.mjs";
5
4
  import { MultiSelect as MultiSelect$1 } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/MultiSelect/MultiSelect.mjs";
5
+ import { useUncontrolled } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.mjs";
6
+ import { getParsedComboboxData } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
6
7
  const defaultGetCreateLabel = (query) => `+ Create ${query}`;
7
8
  const CREATE_VALUE_PREFIX = "$create:";
8
9
  const defaultGetCreateValue = (query) => `${CREATE_VALUE_PREFIX}${query}`;
9
- function Select(props) {
10
- const {
11
- creatable = false,
12
- getCreateLabel = defaultGetCreateLabel,
13
- searchable,
14
- onCreate,
15
- filter,
16
- onChange,
17
- ...rest
18
- } = props;
10
+ function useCreateableSelect(props) {
11
+ const { creatable = false, getCreateLabel = defaultGetCreateLabel, onCreate, searchable, ...rest } = props;
19
12
  if (creatable && typeof onCreate !== "function") {
20
13
  throw new Error("`onCreate` is required when `creatable` is true");
21
14
  }
22
- const [dropdownOpened, setDropdownOpened] = useUncontrolled({
23
- value: props.dropdownOpened,
24
- defaultValue: false,
25
- onChange: (value2) => {
26
- var _a, _b;
27
- if (value2) {
28
- (_a = props.onDropdownOpen) == null ? void 0 : _a.call(props);
29
- } else {
30
- (_b = props.onDropdownClose) == null ? void 0 : _b.call(props);
31
- }
32
- }
33
- });
34
- const close = useCallback(() => setDropdownOpened(false), []);
35
- const open = useCallback(() => setDropdownOpened(true), []);
36
15
  const [value, setValue] = useUncontrolled({
37
16
  value: props.value,
38
17
  onChange: props.onChange,
39
- defaultValue: ""
18
+ defaultValue: props.defaultValue
40
19
  });
41
20
  const [searchValue, setSearchValue] = useUncontrolled({
42
21
  value: props.searchValue,
43
22
  onChange: props.onSearchChange,
44
23
  defaultValue: ""
45
24
  });
46
- const defaultOptionsFilter = useCallback(({ options, search }) => {
47
- const splittedSearch = search.toLowerCase().trim().split(" ");
48
- const nextItems = options.filter((option) => {
49
- const words = option.label.toLowerCase().trim().split(" ");
50
- return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
51
- });
52
- if (nextItems.length === 0) {
53
- return [
54
- {
55
- label: getCreateLabel(search),
56
- value: defaultGetCreateValue(search)
57
- }
58
- ];
25
+ const parsedData = useMemo(() => {
26
+ const parsedData2 = getParsedComboboxData(props.data);
27
+ if (!creatable || !searchValue) {
28
+ return parsedData2;
59
29
  }
60
- return nextItems;
61
- }, []);
62
- const handleOptionSubmit = useCallback((value2) => {
63
- var _a, _b;
64
- if (creatable && value2.startsWith(CREATE_VALUE_PREFIX) && typeof onCreate === "function") {
65
- const createdItem = onCreate(value2.slice(CREATE_VALUE_PREFIX.length));
66
- if (createdItem) {
67
- setValue(createdItem.value, createdItem);
68
- setSearchValue("");
69
- close();
70
- (_a = props.onOptionSubmit) == null ? void 0 : _a.call(props, createdItem.value);
30
+ const placeholder = {
31
+ label: getCreateLabel(searchValue),
32
+ value: defaultGetCreateValue(searchValue)
33
+ };
34
+ if (parsedData2.findIndex((item) => {
35
+ if ("value" in item) {
36
+ return item.value === placeholder.value.slice(CREATE_VALUE_PREFIX.length);
71
37
  }
72
- } else {
73
- (_b = props.onOptionSubmit) == null ? void 0 : _b.call(props, value2);
74
- }
75
- }, []);
76
- return /* @__PURE__ */ jsx(
77
- Select$1,
78
- {
79
- ...rest,
80
- value,
81
- onChange: setValue,
82
- searchable: searchable || creatable,
83
- searchValue,
84
- onSearchChange: setSearchValue,
85
- filter: creatable ? defaultOptionsFilter : filter,
86
- onOptionSubmit: handleOptionSubmit,
87
- dropdownOpened,
88
- onDropdownClose: close,
89
- onDropdownOpen: open
38
+ return false;
39
+ }) === -1) {
40
+ parsedData2.push(placeholder);
90
41
  }
91
- );
92
- }
93
- function MultiSelect(props) {
94
- const {
95
- creatable = false,
96
- getCreateLabel = defaultGetCreateLabel,
97
- searchable,
98
- onCreate,
99
- filter,
100
- onChange,
101
- ...rest
102
- } = props;
103
- if (creatable && typeof onCreate !== "function") {
104
- throw new Error("`onCreate` is required when `creatable` is true");
105
- }
106
- const [dropdownOpened, setDropdownOpened] = useUncontrolled({
107
- value: props.dropdownOpened,
108
- onChange: (value2) => {
42
+ return parsedData2;
43
+ }, [props.data, searchValue]);
44
+ const handleChange = useCallback(
45
+ (value2, option) => {
109
46
  var _a, _b;
110
- if (value2) {
111
- (_a = props.onDropdownOpen) == null ? void 0 : _a.call(props);
112
- } else {
113
- (_b = props.onDropdownClose) == null ? void 0 : _b.call(props);
114
- }
115
- },
116
- defaultValue: false
117
- });
118
- const close = useCallback(() => setDropdownOpened(false), []);
119
- const open = useCallback(() => setDropdownOpened(true), []);
120
- const [value, setValue] = useUncontrolled({
121
- value: props.value,
122
- onChange: props.onChange,
123
- defaultValue: []
124
- });
125
- const [searchValue, setSearchValue] = useUncontrolled({
126
- value: props.searchValue,
127
- onChange: props.onSearchChange,
128
- defaultValue: ""
129
- });
130
- const defaultOptionsFilter = useCallback(({ options, search }) => {
131
- const splittedSearch = search.toLowerCase().trim().split(" ");
132
- const nextItems = options.filter((option) => {
133
- const words = option.label.toLowerCase().trim().split(" ");
134
- return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
135
- });
136
- if (nextItems.length === 0) {
137
- return [
138
- {
139
- label: getCreateLabel(search),
140
- value: defaultGetCreateValue(search)
47
+ if (creatable) {
48
+ const isMultiSelect = Array.isArray(value2);
49
+ const values = Array.isArray(value2) ? value2 : [value2];
50
+ const clickedCreateItem = values.some((i) => typeof i === "string" && i.startsWith(CREATE_VALUE_PREFIX));
51
+ if (clickedCreateItem) {
52
+ const newItemValue = isMultiSelect ? values.find((i) => typeof i === "string" && i.startsWith(CREATE_VALUE_PREFIX)) : value2;
53
+ if (newItemValue) {
54
+ const createdItem = onCreate(newItemValue == null ? void 0 : newItemValue.slice(CREATE_VALUE_PREFIX.length));
55
+ if (createdItem) {
56
+ const nextValue = isMultiSelect ? [...values.filter((i) => !(i == null ? void 0 : i.startsWith(CREATE_VALUE_PREFIX))), createdItem.value] : createdItem.value;
57
+ setValue(nextValue);
58
+ setSearchValue("");
59
+ (_a = props.onChange) == null ? void 0 : _a.call(props, nextValue, option);
60
+ return;
61
+ }
62
+ }
141
63
  }
142
- ];
143
- }
144
- return nextItems;
145
- }, []);
146
- const handleOptionSubmit = useCallback(
147
- (val) => {
148
- var _a, _b;
149
- if (creatable && val.startsWith(CREATE_VALUE_PREFIX) && typeof onCreate === "function") {
150
- const createdItem = onCreate(val.slice(CREATE_VALUE_PREFIX.length));
151
- if (createdItem) {
152
- setValue([...value, createdItem.value]);
153
- setSearchValue("");
154
- close();
155
- (_a = props.onOptionSubmit) == null ? void 0 : _a.call(props, createdItem.value);
156
- }
157
- } else {
158
- (_b = props.onOptionSubmit) == null ? void 0 : _b.call(props, val);
159
64
  }
65
+ setValue(value2);
66
+ (_b = props.onChange) == null ? void 0 : _b.call(props, value2, option);
160
67
  },
161
- [value]
162
- );
163
- return /* @__PURE__ */ jsx(
164
- MultiSelect$1,
165
- {
166
- ...rest,
167
- value,
168
- onChange: setValue,
169
- searchable: searchable || creatable,
170
- searchValue,
171
- onSearchChange: setSearchValue,
172
- filter: creatable ? defaultOptionsFilter : filter,
173
- onOptionSubmit: handleOptionSubmit,
174
- dropdownOpened,
175
- onDropdownClose: close,
176
- onDropdownOpen: open
177
- }
68
+ [searchValue, creatable]
178
69
  );
70
+ return {
71
+ ...rest,
72
+ data: parsedData,
73
+ value,
74
+ onChange: handleChange,
75
+ searchable: searchable || creatable,
76
+ searchValue,
77
+ onSearchChange: setSearchValue
78
+ };
79
+ }
80
+ function Select(props) {
81
+ const allProps = useCreateableSelect(props);
82
+ return /* @__PURE__ */ jsx(Select$1, { ...allProps });
83
+ }
84
+ function MultiSelect(props) {
85
+ const allProps = useCreateableSelect(props);
86
+ return /* @__PURE__ */ jsx(MultiSelect$1, { ...allProps });
179
87
  }
180
88
  export {
181
89
  MultiSelect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.111",
3
+ "version": "2.0.0-beta.112",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",