@rescui/select 0.18.4 → 0.19.1

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 (37) hide show
  1. package/lib/_virtual/check-outline.js +294 -63
  2. package/lib/_virtual/close-outline.js +294 -63
  3. package/lib/_virtual/down-outline.js +294 -63
  4. package/lib/_virtual/index.css.js +12 -12
  5. package/lib/_virtual/loading-outline.js +310 -79
  6. package/lib/hooks/use-a11y.d.ts +2 -2
  7. package/lib/hooks/use-a11y.js +124 -36
  8. package/lib/hooks/use-actual-size-from-css.d.ts +3 -4
  9. package/lib/hooks/use-actual-size-from-css.js +47 -18
  10. package/lib/hooks/use-focus.js +54 -10
  11. package/lib/hooks/use-hover.js +54 -10
  12. package/lib/hooks/use-label-focus.js +45 -15
  13. package/lib/hooks/use-multi-handlers.js +113 -38
  14. package/lib/hooks/use-options.d.ts +2 -1
  15. package/lib/hooks/use-options.js +92 -56
  16. package/lib/hooks/use-primary-contrast-css-var-transfer.d.ts +2 -3
  17. package/lib/hooks/use-primary-contrast-css-var-transfer.js +45 -15
  18. package/lib/index.css +194 -194
  19. package/lib/multiselect.js +527 -174
  20. package/lib/native-select.js +416 -118
  21. package/lib/parts/form-trigger-wrapper.js +159 -39
  22. package/lib/parts/hidden-select.js +105 -29
  23. package/lib/parts/icons.js +191 -49
  24. package/lib/parts/list-box.js +277 -74
  25. package/lib/parts/multi-trigger.d.ts +2 -2
  26. package/lib/parts/multi-trigger.js +125 -48
  27. package/lib/parts/native-select-options-with-groups.js +154 -52
  28. package/lib/parts/popup-content.d.ts +3 -3
  29. package/lib/parts/popup-content.js +146 -46
  30. package/lib/select-basic.js +456 -147
  31. package/lib/select-searchable.js +448 -155
  32. package/lib/select.js +228 -56
  33. package/lib/styles/common.p.module.css.js +29 -29
  34. package/lib/styles/form-trigger.p.module.css.js +12 -12
  35. package/lib/styles/list-box.p.module.css.js +13 -13
  36. package/lib/utils/get-text-from-nodes.js +1 -1
  37. package/package.json +13 -12
@@ -1,3 +1,5 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import { c } from 'react-compiler-runtime';
1
3
  import React from 'react';
2
4
  import cn from 'classnames';
3
5
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -13,46 +15,164 @@ const THEME_STYLES = {
13
15
  dark: styles.themeDark
14
16
  };
15
17
  const FormTriggerWrapper = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
16
- (_ref, ref) => {
17
- let {
18
- size,
19
- theme: themeFromProps,
20
- className,
21
- disabled,
22
- error,
23
- reserveErrorLine = false,
24
- errorMessageProps,
25
- label,
26
- labelProps,
27
- note,
28
- descriptionProps,
29
- children,
30
- boldLabel,
31
- ...restProps
32
- } = _ref;
18
+ (t0, ref) => {
19
+ const $ = c(43);
20
+ let boldLabel;
21
+ let children;
22
+ let className;
23
+ let descriptionProps;
24
+ let disabled;
25
+ let error;
26
+ let errorMessageProps;
27
+ let label;
28
+ let labelProps;
29
+ let note;
30
+ let restProps;
31
+ let size;
32
+ let t1;
33
+ let themeFromProps;
34
+
35
+ if ($[0] !== t0) {
36
+ ({
37
+ size,
38
+ theme: themeFromProps,
39
+ className,
40
+ disabled,
41
+ error,
42
+ reserveErrorLine: t1,
43
+ errorMessageProps,
44
+ label,
45
+ labelProps,
46
+ note,
47
+ descriptionProps,
48
+ children,
49
+ boldLabel,
50
+ ...restProps
51
+ } = t0);
52
+ $[0] = t0;
53
+ $[1] = boldLabel;
54
+ $[2] = children;
55
+ $[3] = className;
56
+ $[4] = descriptionProps;
57
+ $[5] = disabled;
58
+ $[6] = error;
59
+ $[7] = errorMessageProps;
60
+ $[8] = label;
61
+ $[9] = labelProps;
62
+ $[10] = note;
63
+ $[11] = restProps;
64
+ $[12] = size;
65
+ $[13] = t1;
66
+ $[14] = themeFromProps;
67
+ } else {
68
+ boldLabel = $[1];
69
+ children = $[2];
70
+ className = $[3];
71
+ descriptionProps = $[4];
72
+ disabled = $[5];
73
+ error = $[6];
74
+ errorMessageProps = $[7];
75
+ label = $[8];
76
+ labelProps = $[9];
77
+ note = $[10];
78
+ restProps = $[11];
79
+ size = $[12];
80
+ t1 = $[13];
81
+ themeFromProps = $[14];
82
+ }
83
+
84
+ const reserveErrorLine = t1 === undefined ? false : t1;
33
85
  const theme = useThemeWithUndefined(themeFromProps);
34
- const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
35
- return /*#__PURE__*/React.createElement("div", {
36
- className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme], Boolean(error) && styles.error, disabled && styles.disabled),
37
- ref: ref,
38
- "data-test": "select-wrapper",
39
- "data-rs-internal": 'select-form-trigger-wrapper',
40
- ...restProps
41
- }, label && /*#__PURE__*/React.createElement("div", {
42
- className: styles.label,
43
- "data-rs-internal": boldLabel ? 'select-form-trigger-wrapper__bold-label' : 'select-form-trigger-wrapper__label',
44
- ...labelProps
45
- }, label), children, hasFooter && /*#__PURE__*/React.createElement("div", {
46
- className: styles.footer
47
- }, /*#__PURE__*/React.createElement(ErrorMessage, {
48
- className: styles.errorMessage,
49
- reserveLine: reserveErrorLine,
50
- ...errorMessageProps
51
- }, error), note && /*#__PURE__*/React.createElement("div", {
52
- className: styles.note,
53
- "data-rs-internal": 'select-form-trigger-wrapper__note',
54
- ...descriptionProps
55
- }, note)));
86
+ let t2;
87
+
88
+ if ($[15] !== error || $[16] !== note || $[17] !== reserveErrorLine) {
89
+ t2 = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
90
+ $[15] = error;
91
+ $[16] = note;
92
+ $[17] = reserveErrorLine;
93
+ $[18] = t2;
94
+ } else {
95
+ t2 = $[18];
96
+ }
97
+
98
+ const hasFooter = t2;
99
+ const t3 = SIZE_STYLES[size];
100
+ const t4 = THEME_STYLES[theme];
101
+ const t5 = Boolean(error) && styles.error;
102
+ const t6 = disabled && styles.disabled;
103
+ let t7;
104
+
105
+ if ($[19] !== className || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t6) {
106
+ t7 = cn(className, styles.main, t3, t4, t5, t6);
107
+ $[19] = className;
108
+ $[20] = t3;
109
+ $[21] = t4;
110
+ $[22] = t5;
111
+ $[23] = t6;
112
+ $[24] = t7;
113
+ } else {
114
+ t7 = $[24];
115
+ }
116
+
117
+ let t8;
118
+
119
+ if ($[25] !== boldLabel || $[26] !== label || $[27] !== labelProps) {
120
+ t8 = label && /*#__PURE__*/React.createElement("div", _extends({
121
+ className: styles.label,
122
+ "data-rs-internal": boldLabel ? "select-form-trigger-wrapper__bold-label" : "select-form-trigger-wrapper__label"
123
+ }, labelProps), label);
124
+ $[25] = boldLabel;
125
+ $[26] = label;
126
+ $[27] = labelProps;
127
+ $[28] = t8;
128
+ } else {
129
+ t8 = $[28];
130
+ }
131
+
132
+ let t9;
133
+
134
+ if ($[29] !== descriptionProps || $[30] !== error || $[31] !== errorMessageProps || $[32] !== hasFooter || $[33] !== note || $[34] !== reserveErrorLine) {
135
+ t9 = hasFooter && /*#__PURE__*/React.createElement("div", {
136
+ className: styles.footer
137
+ }, /*#__PURE__*/React.createElement(ErrorMessage, _extends({
138
+ className: styles.errorMessage,
139
+ reserveLine: reserveErrorLine
140
+ }, errorMessageProps), error), note && /*#__PURE__*/React.createElement("div", _extends({
141
+ className: styles.note,
142
+ "data-rs-internal": "select-form-trigger-wrapper__note"
143
+ }, descriptionProps), note));
144
+ $[29] = descriptionProps;
145
+ $[30] = error;
146
+ $[31] = errorMessageProps;
147
+ $[32] = hasFooter;
148
+ $[33] = note;
149
+ $[34] = reserveErrorLine;
150
+ $[35] = t9;
151
+ } else {
152
+ t9 = $[35];
153
+ }
154
+
155
+ let t10;
156
+
157
+ if ($[36] !== children || $[37] !== ref || $[38] !== restProps || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
158
+ t10 = /*#__PURE__*/React.createElement("div", _extends({
159
+ className: t7,
160
+ ref: ref,
161
+ "data-test": "select-wrapper",
162
+ "data-rs-internal": "select-form-trigger-wrapper"
163
+ }, restProps), t8, children, t9);
164
+ $[36] = children;
165
+ $[37] = ref;
166
+ $[38] = restProps;
167
+ $[39] = t7;
168
+ $[40] = t8;
169
+ $[41] = t9;
170
+ $[42] = t10;
171
+ } else {
172
+ t10 = $[42];
173
+ }
174
+
175
+ return t10;
56
176
  });
57
177
  FormTriggerWrapper.displayName = 'FormTriggerWrapper';
58
178
  export { FormTriggerWrapper, FormTriggerWrapper as default };
@@ -1,47 +1,123 @@
1
+ import { c } from 'react-compiler-runtime';
1
2
  import React from 'react';
2
3
  import styles from '../styles/common.p.module.css.js';
3
4
 
4
5
  const shouldRenderOption = option => 'value' in option && String(option.value);
5
6
 
6
- const HiddenSelect = _ref => {
7
- let {
7
+ const HiddenSelect = t0 => {
8
+ const $ = c(16);
9
+ const {
8
10
  name,
9
11
  options,
10
12
  value,
11
13
  isMultiple
12
- } = _ref;
13
- const selectProps = {
14
- name,
15
- 'aria-hidden': true,
16
- readOnly: true,
17
- tabIndex: -1
18
- };
14
+ } = t0;
15
+ let selectProps;
16
+
17
+ if ($[0] !== isMultiple || $[1] !== name || $[2] !== value) {
18
+ selectProps = {
19
+ name,
20
+ "aria-hidden": true,
21
+ readOnly: true,
22
+ tabIndex: -1
23
+ };
24
+
25
+ if (isMultiple) {
26
+ selectProps.multiple = true;
19
27
 
20
- if (isMultiple) {
21
- selectProps.multiple = true;
28
+ if (value && value.length !== 0) {
29
+ let t1;
22
30
 
23
- if (value && value.length !== 0) {
24
- selectProps.value = value.map(v => String(v.value));
31
+ if ($[4] !== value) {
32
+ t1 = value.map(_temp);
33
+ $[4] = value;
34
+ $[5] = t1;
35
+ } else {
36
+ t1 = $[5];
37
+ }
38
+
39
+ selectProps.value = t1;
40
+ }
41
+ } else {
42
+ if (value) {
43
+ const singleValue = value;
44
+ selectProps.value = singleValue.value;
45
+ }
25
46
  }
26
- } else if (value) {
27
- const singleValue = value;
28
- selectProps.value = singleValue.value;
47
+
48
+ $[0] = isMultiple;
49
+ $[1] = name;
50
+ $[2] = value;
51
+ $[3] = selectProps;
52
+ } else {
53
+ selectProps = $[3];
54
+ }
55
+
56
+ let t1;
57
+
58
+ if ($[6] !== isMultiple || $[7] !== options || $[8] !== value) {
59
+ const arrayValue = isMultiple ? value : [value];
60
+ t1 = Array.from(new Map((!value ? options : [...options, ...arrayValue]).map(_temp2)).values()).filter(shouldRenderOption);
61
+ $[6] = isMultiple;
62
+ $[7] = options;
63
+ $[8] = value;
64
+ $[9] = t1;
65
+ } else {
66
+ t1 = $[9];
67
+ }
68
+
69
+ const allItems = t1;
70
+ let t2;
71
+
72
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
73
+ t2 = /*#__PURE__*/React.createElement("option", {
74
+ value: "",
75
+ label: "\xA0"
76
+ }, "\xA0");
77
+ $[10] = t2;
78
+ } else {
79
+ t2 = $[10];
29
80
  }
30
81
 
31
- const arrayValue = isMultiple ? value : [value]; // merge options with value in case the provided value is not included in options
32
-
33
- const allItems = Array.from( // map will deduplicate options by values
34
- new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values()).filter(shouldRenderOption);
35
- return /*#__PURE__*/React.createElement("div", {
36
- className: styles.visuallyHidden
37
- }, /*#__PURE__*/React.createElement("select", { ...selectProps
38
- }, /*#__PURE__*/React.createElement("option", {
39
- value: "",
40
- label: '\u00A0'
41
- }, '\u00A0'), allItems.map(option => /*#__PURE__*/React.createElement("option", {
82
+ let t3;
83
+
84
+ if ($[11] !== allItems) {
85
+ t3 = allItems.map(_temp3);
86
+ $[11] = allItems;
87
+ $[12] = t3;
88
+ } else {
89
+ t3 = $[12];
90
+ }
91
+
92
+ let t4;
93
+
94
+ if ($[13] !== selectProps || $[14] !== t3) {
95
+ t4 = /*#__PURE__*/React.createElement("div", {
96
+ className: styles.visuallyHidden
97
+ }, /*#__PURE__*/React.createElement("select", selectProps, t2, t3));
98
+ $[13] = selectProps;
99
+ $[14] = t3;
100
+ $[15] = t4;
101
+ } else {
102
+ t4 = $[15];
103
+ }
104
+
105
+ return t4;
106
+ };
107
+
108
+ function _temp(v) {
109
+ return String(v.value);
110
+ }
111
+
112
+ function _temp2(item) {
113
+ return [item.value, item];
114
+ }
115
+
116
+ function _temp3(option) {
117
+ return /*#__PURE__*/React.createElement("option", {
42
118
  key: option.value,
43
119
  value: option.value
44
- }, option.label))));
45
- };
120
+ }, option.label);
121
+ }
46
122
 
47
123
  export { HiddenSelect };
@@ -1,3 +1,5 @@
1
+ import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
2
+ import { c } from 'react-compiler-runtime';
1
3
  import React from 'react';
2
4
  import cn from 'classnames';
3
5
  import CloseOutlineIcon from '../_virtual/close-outline.js';
@@ -5,67 +7,207 @@ import LoadingOutlineIcon from '../_virtual/loading-outline.js';
5
7
  import DownOutlineIcon from '../_virtual/down-outline.js';
6
8
  import styles from '../styles/common.p.module.css.js';
7
9
 
8
- const ClearOrLoading = _ref => {
9
- let {
10
+ const ClearOrLoading = t0 => {
11
+ const $ = c(14);
12
+ const {
10
13
  isLoading,
11
14
  canHaveClearIcon,
12
15
  onClearClick,
13
16
  triggerId,
14
17
  className
15
- } = _ref;
18
+ } = t0;
16
19
 
17
20
  if (isLoading) {
18
- return /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
19
- style: {
20
- pointerEvents: 'none'
21
- },
22
- className: cn(className, styles.icon),
23
- "data-test": "loading-icon",
24
- "data-render-all-sizes": true
21
+ let t1;
22
+
23
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
24
+ t1 = {
25
+ pointerEvents: "none"
26
+ };
27
+ $[0] = t1;
28
+ } else {
29
+ t1 = $[0];
30
+ }
31
+
32
+ let t2;
33
+
34
+ if ($[1] !== className) {
35
+ t2 = cn(className, styles.icon);
36
+ $[1] = className;
37
+ $[2] = t2;
38
+ } else {
39
+ t2 = $[2];
40
+ }
41
+
42
+ let t3;
43
+
44
+ if ($[3] !== t2) {
45
+ t3 = /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
46
+ style: t1,
47
+ className: t2,
48
+ "data-test": "loading-icon",
49
+ "data-render-all-sizes": true
50
+ });
51
+ $[3] = t2;
52
+ $[4] = t3;
53
+ } else {
54
+ t3 = $[4];
55
+ }
56
+
57
+ return t3;
58
+ } else {
59
+ if (canHaveClearIcon) {
60
+ let t1;
61
+
62
+ if ($[5] !== className) {
63
+ t1 = cn(className, styles.icon, styles.clearIcon);
64
+ $[5] = className;
65
+ $[6] = t1;
66
+ } else {
67
+ t1 = $[6];
68
+ }
69
+
70
+ let t2;
71
+
72
+ if ($[7] !== onClearClick) {
73
+ t2 = e => {
74
+ e.stopPropagation();
75
+ onClearClick();
76
+ };
77
+
78
+ $[7] = onClearClick;
79
+ $[8] = t2;
80
+ } else {
81
+ t2 = $[8];
82
+ }
83
+
84
+ let t3;
85
+
86
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
87
+ t3 = /*#__PURE__*/React.createElement(CloseOutlineIcon, {
88
+ "data-render-all-sizes": true
89
+ });
90
+ $[9] = t3;
91
+ } else {
92
+ t3 = $[9];
93
+ }
94
+
95
+ let t4;
96
+
97
+ if ($[10] !== t1 || $[11] !== t2 || $[12] !== triggerId) {
98
+ t4 = /*#__PURE__*/React.createElement("button", {
99
+ type: "button",
100
+ className: t1,
101
+ "data-test": "clear-icon",
102
+ onClick: t2,
103
+ onPointerDown: _temp,
104
+ onMouseDown: _temp2,
105
+ onKeyDown: _temp3,
106
+ "aria-label": "Clear",
107
+ "aria-controls": triggerId
108
+ }, t3);
109
+ $[10] = t1;
110
+ $[11] = t2;
111
+ $[12] = triggerId;
112
+ $[13] = t4;
113
+ } else {
114
+ t4 = $[13];
115
+ }
116
+
117
+ return t4;
118
+ } else {
119
+ return null;
120
+ }
121
+ }
122
+ };
123
+
124
+ const Icons = t0 => {
125
+ const $ = c(15);
126
+ let canHaveClearIcon;
127
+ let isLoading;
128
+ let onClear;
129
+ let restProps;
130
+ let triggerId;
131
+
132
+ if ($[0] !== t0) {
133
+ ({
134
+ isLoading,
135
+ canHaveClearIcon,
136
+ onClear,
137
+ triggerId,
138
+ ...restProps
139
+ } = t0);
140
+ $[0] = t0;
141
+ $[1] = canHaveClearIcon;
142
+ $[2] = isLoading;
143
+ $[3] = onClear;
144
+ $[4] = restProps;
145
+ $[5] = triggerId;
146
+ } else {
147
+ canHaveClearIcon = $[1];
148
+ isLoading = $[2];
149
+ onClear = $[3];
150
+ restProps = $[4];
151
+ triggerId = $[5];
152
+ }
153
+
154
+ let t1;
155
+
156
+ if ($[6] !== canHaveClearIcon || $[7] !== isLoading || $[8] !== onClear || $[9] !== triggerId) {
157
+ t1 = /*#__PURE__*/React.createElement(ClearOrLoading, {
158
+ isLoading: isLoading,
159
+ canHaveClearIcon: canHaveClearIcon,
160
+ onClearClick: onClear,
161
+ triggerId: triggerId
25
162
  });
26
- } else if (canHaveClearIcon) {
27
- return /*#__PURE__*/React.createElement("button", {
28
- type: "button",
29
- className: cn(className, styles.icon, styles.clearIcon),
30
- "data-test": "clear-icon",
31
- onClick: e => {
32
- e.stopPropagation();
33
- onClearClick();
34
- },
35
- onPointerDown: e => e.stopPropagation(),
36
- onMouseDown: e => e.stopPropagation(),
37
- onKeyDown: e => e.stopPropagation(),
38
- "aria-label": "Clear",
39
- "aria-controls": triggerId
40
- }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
163
+ $[6] = canHaveClearIcon;
164
+ $[7] = isLoading;
165
+ $[8] = onClear;
166
+ $[9] = triggerId;
167
+ $[10] = t1;
168
+ } else {
169
+ t1 = $[10];
170
+ }
171
+
172
+ let t2;
173
+
174
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
175
+ t2 = /*#__PURE__*/React.createElement(DownOutlineIcon, {
176
+ className: styles.toggle,
177
+ "data-test": "toggle-icon",
41
178
  "data-render-all-sizes": true
42
- }));
179
+ });
180
+ $[11] = t2;
43
181
  } else {
44
- return null;
182
+ t2 = $[11];
45
183
  }
46
- };
47
184
 
48
- const Icons = _ref2 => {
49
- let {
50
- isLoading,
51
- canHaveClearIcon,
52
- onClear,
53
- triggerId,
54
- ...restProps
55
- } = _ref2;
56
- return /*#__PURE__*/React.createElement("div", {
57
- className: styles.iconsWrapper,
58
- ...restProps
59
- }, /*#__PURE__*/React.createElement(ClearOrLoading, {
60
- isLoading: isLoading,
61
- canHaveClearIcon: canHaveClearIcon,
62
- onClearClick: onClear,
63
- triggerId: triggerId
64
- }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
65
- className: styles.toggle,
66
- "data-test": "toggle-icon",
67
- "data-render-all-sizes": true
68
- }));
185
+ let t3;
186
+
187
+ if ($[12] !== restProps || $[13] !== t1) {
188
+ t3 = /*#__PURE__*/React.createElement("div", _extends({
189
+ className: styles.iconsWrapper
190
+ }, restProps), t1, t2);
191
+ $[12] = restProps;
192
+ $[13] = t1;
193
+ $[14] = t3;
194
+ } else {
195
+ t3 = $[14];
196
+ }
197
+
198
+ return t3;
69
199
  };
70
200
 
201
+ function _temp(e_0) {
202
+ return e_0.stopPropagation();
203
+ }
204
+
205
+ function _temp2(e_1) {
206
+ return e_1.stopPropagation();
207
+ }
208
+
209
+ function _temp3(e_2) {
210
+ return e_2.stopPropagation();
211
+ }
212
+
71
213
  export { ClearOrLoading, Icons };