@rescui/select 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39

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 (40) 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.js +121 -33
  7. package/lib/hooks/use-actual-size-from-css.js +46 -17
  8. package/lib/hooks/use-focus.js +54 -10
  9. package/lib/hooks/use-hover.js +54 -10
  10. package/lib/hooks/use-label-focus.js +45 -15
  11. package/lib/hooks/use-multi-handlers.js +114 -36
  12. package/lib/hooks/use-no-memo-getter.d.ts +5 -0
  13. package/lib/hooks/use-no-memo-getter.js +15 -0
  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.js +43 -16
  17. package/lib/hooks/use-safe-id.d.ts +3 -5
  18. package/lib/hooks/use-safe-id.js +7 -12
  19. package/lib/index.css +229 -189
  20. package/lib/multiselect.js +533 -158
  21. package/lib/native-select.js +412 -116
  22. package/lib/parts/form-trigger-wrapper.js +159 -39
  23. package/lib/parts/hidden-select.js +105 -29
  24. package/lib/parts/icons.js +164 -44
  25. package/lib/parts/list-box.js +294 -72
  26. package/lib/parts/multi-trigger.js +106 -43
  27. package/lib/parts/native-select-options-with-groups.js +154 -52
  28. package/lib/parts/popup-content.d.ts +2 -2
  29. package/lib/parts/popup-content.js +145 -45
  30. package/lib/public-api.p.css +5 -0
  31. package/lib/public-api.pcss +5 -0
  32. package/lib/select-basic.js +456 -136
  33. package/lib/select-searchable.js +435 -142
  34. package/lib/select.js +228 -56
  35. package/lib/styles/common.p.module.css.js +29 -29
  36. package/lib/styles/form-trigger.p.module.css.js +12 -12
  37. package/lib/styles/list-box.p.module.css.js +13 -13
  38. package/lib/types.d.ts +5 -0
  39. package/lib/utils/get-text-from-nodes.js +1 -1
  40. package/package.json +9 -8
@@ -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,45 +1,121 @@
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
- const HiddenSelect = _ref => {
5
- let {
5
+ const HiddenSelect = t0 => {
6
+ const $ = c(16);
7
+ const {
6
8
  name,
7
9
  options,
8
10
  value,
9
11
  isMultiple
10
- } = _ref;
11
- const selectProps = {
12
- name,
13
- 'aria-hidden': true,
14
- readOnly: true,
15
- tabIndex: -1
16
- };
12
+ } = t0;
13
+ let selectProps;
14
+
15
+ if ($[0] !== isMultiple || $[1] !== name || $[2] !== value) {
16
+ selectProps = {
17
+ name,
18
+ "aria-hidden": true,
19
+ readOnly: true,
20
+ tabIndex: -1
21
+ };
22
+
23
+ if (isMultiple) {
24
+ selectProps.multiple = true;
17
25
 
18
- if (isMultiple) {
19
- selectProps.multiple = true;
26
+ if (value && value.length !== 0) {
27
+ let t1;
20
28
 
21
- if (value && value.length !== 0) {
22
- selectProps.value = value.map(v => String(v.value));
29
+ if ($[4] !== value) {
30
+ t1 = value.map(_temp);
31
+ $[4] = value;
32
+ $[5] = t1;
33
+ } else {
34
+ t1 = $[5];
35
+ }
36
+
37
+ selectProps.value = t1;
38
+ }
39
+ } else {
40
+ if (value) {
41
+ const singleValue = value;
42
+ selectProps.value = singleValue.value;
43
+ }
23
44
  }
24
- } else if (value) {
25
- const singleValue = value;
26
- selectProps.value = singleValue.value;
45
+
46
+ $[0] = isMultiple;
47
+ $[1] = name;
48
+ $[2] = value;
49
+ $[3] = selectProps;
50
+ } else {
51
+ selectProps = $[3];
52
+ }
53
+
54
+ let t1;
55
+
56
+ if ($[6] !== isMultiple || $[7] !== options || $[8] !== value) {
57
+ const arrayValue = isMultiple ? value : [value];
58
+ t1 = Array.from(new Map((!value ? options : [...options, ...arrayValue]).map(_temp2)).values());
59
+ $[6] = isMultiple;
60
+ $[7] = options;
61
+ $[8] = value;
62
+ $[9] = t1;
63
+ } else {
64
+ t1 = $[9];
65
+ }
66
+
67
+ const allItems = t1;
68
+ let t2;
69
+
70
+ if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
71
+ t2 = /*#__PURE__*/React.createElement("option", {
72
+ value: "",
73
+ label: "\xA0"
74
+ }, "\xA0");
75
+ $[10] = t2;
76
+ } else {
77
+ t2 = $[10];
27
78
  }
28
79
 
29
- const arrayValue = isMultiple ? value : [value]; // merge options with value in case the provided value is not included in options
30
-
31
- const allItems = Array.from( // map will deduplicate options by values
32
- new Map((!value ? options : [...options, ...arrayValue]).map(item => [item.value, item])).values());
33
- return /*#__PURE__*/React.createElement("div", {
34
- className: styles.visuallyHidden
35
- }, /*#__PURE__*/React.createElement("select", { ...selectProps
36
- }, /*#__PURE__*/React.createElement("option", {
37
- value: "",
38
- label: '\u00A0'
39
- }, '\u00A0'), allItems.map(option => /*#__PURE__*/React.createElement("option", {
80
+ let t3;
81
+
82
+ if ($[11] !== allItems) {
83
+ t3 = allItems.map(_temp3);
84
+ $[11] = allItems;
85
+ $[12] = t3;
86
+ } else {
87
+ t3 = $[12];
88
+ }
89
+
90
+ let t4;
91
+
92
+ if ($[13] !== selectProps || $[14] !== t3) {
93
+ t4 = /*#__PURE__*/React.createElement("div", {
94
+ className: styles.visuallyHidden
95
+ }, /*#__PURE__*/React.createElement("select", selectProps, t2, t3));
96
+ $[13] = selectProps;
97
+ $[14] = t3;
98
+ $[15] = t4;
99
+ } else {
100
+ t4 = $[15];
101
+ }
102
+
103
+ return t4;
104
+ };
105
+
106
+ function _temp(v) {
107
+ return String(v.value);
108
+ }
109
+
110
+ function _temp2(item) {
111
+ return [item.value, item];
112
+ }
113
+
114
+ function _temp3(option) {
115
+ return /*#__PURE__*/React.createElement("option", {
40
116
  key: option.value,
41
117
  value: option.value
42
- }, option.label))));
43
- };
118
+ }, option.label);
119
+ }
44
120
 
45
121
  export { HiddenSelect };
@@ -1,3 +1,4 @@
1
+ import { c } from 'react-compiler-runtime';
1
2
  import React from 'react';
2
3
  import cn from 'classnames';
3
4
  import CloseOutlineIcon from '../_virtual/close-outline.js';
@@ -5,65 +6,184 @@ import LoadingOutlineIcon from '../_virtual/loading-outline.js';
5
6
  import DownOutlineIcon from '../_virtual/down-outline.js';
6
7
  import styles from '../styles/common.p.module.css.js';
7
8
 
8
- const ClearOrLoading = _ref => {
9
- let {
9
+ const ClearOrLoading = t0 => {
10
+ const $ = c(14);
11
+ const {
10
12
  isLoading,
11
13
  canHaveClearIcon,
12
14
  onClearClick,
13
15
  triggerId,
14
16
  className
15
- } = _ref;
17
+ } = t0;
16
18
 
17
19
  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
25
- });
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, {
41
- "data-render-all-sizes": true
42
- }));
20
+ let t1;
21
+
22
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
23
+ t1 = {
24
+ pointerEvents: "none"
25
+ };
26
+ $[0] = t1;
27
+ } else {
28
+ t1 = $[0];
29
+ }
30
+
31
+ let t2;
32
+
33
+ if ($[1] !== className) {
34
+ t2 = cn(className, styles.icon);
35
+ $[1] = className;
36
+ $[2] = t2;
37
+ } else {
38
+ t2 = $[2];
39
+ }
40
+
41
+ let t3;
42
+
43
+ if ($[3] !== t2) {
44
+ t3 = /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
45
+ style: t1,
46
+ className: t2,
47
+ "data-test": "loading-icon",
48
+ "data-render-all-sizes": true
49
+ });
50
+ $[3] = t2;
51
+ $[4] = t3;
52
+ } else {
53
+ t3 = $[4];
54
+ }
55
+
56
+ return t3;
43
57
  } else {
44
- return null;
58
+ if (canHaveClearIcon) {
59
+ let t1;
60
+
61
+ if ($[5] !== className) {
62
+ t1 = cn(className, styles.icon, styles.clearIcon);
63
+ $[5] = className;
64
+ $[6] = t1;
65
+ } else {
66
+ t1 = $[6];
67
+ }
68
+
69
+ let t2;
70
+
71
+ if ($[7] !== onClearClick) {
72
+ t2 = e => {
73
+ e.stopPropagation();
74
+ onClearClick();
75
+ };
76
+
77
+ $[7] = onClearClick;
78
+ $[8] = t2;
79
+ } else {
80
+ t2 = $[8];
81
+ }
82
+
83
+ let t3;
84
+
85
+ if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
86
+ t3 = /*#__PURE__*/React.createElement(CloseOutlineIcon, {
87
+ "data-render-all-sizes": true
88
+ });
89
+ $[9] = t3;
90
+ } else {
91
+ t3 = $[9];
92
+ }
93
+
94
+ let t4;
95
+
96
+ if ($[10] !== t1 || $[11] !== t2 || $[12] !== triggerId) {
97
+ t4 = /*#__PURE__*/React.createElement("button", {
98
+ type: "button",
99
+ className: t1,
100
+ "data-test": "clear-icon",
101
+ onClick: t2,
102
+ onPointerDown: _temp,
103
+ onMouseDown: _temp2,
104
+ onKeyDown: _temp3,
105
+ "aria-label": "Clear",
106
+ "aria-controls": triggerId
107
+ }, t3);
108
+ $[10] = t1;
109
+ $[11] = t2;
110
+ $[12] = triggerId;
111
+ $[13] = t4;
112
+ } else {
113
+ t4 = $[13];
114
+ }
115
+
116
+ return t4;
117
+ } else {
118
+ return null;
119
+ }
45
120
  }
46
121
  };
47
122
 
48
- const Icons = _ref2 => {
49
- let {
123
+ const Icons = t0 => {
124
+ const $ = c(8);
125
+ const {
50
126
  isLoading,
51
127
  canHaveClearIcon,
52
128
  onClear,
53
129
  triggerId
54
- } = _ref2;
55
- return /*#__PURE__*/React.createElement("div", {
56
- className: styles.iconsWrapper
57
- }, /*#__PURE__*/React.createElement(ClearOrLoading, {
58
- isLoading: isLoading,
59
- canHaveClearIcon: canHaveClearIcon,
60
- onClearClick: onClear,
61
- triggerId: triggerId
62
- }), /*#__PURE__*/React.createElement(DownOutlineIcon, {
63
- className: styles.toggle,
64
- "data-test": "toggle-icon",
65
- "data-render-all-sizes": true
66
- }));
130
+ } = t0;
131
+ let t1;
132
+
133
+ if ($[0] !== canHaveClearIcon || $[1] !== isLoading || $[2] !== onClear || $[3] !== triggerId) {
134
+ t1 = /*#__PURE__*/React.createElement(ClearOrLoading, {
135
+ isLoading: isLoading,
136
+ canHaveClearIcon: canHaveClearIcon,
137
+ onClearClick: onClear,
138
+ triggerId: triggerId
139
+ });
140
+ $[0] = canHaveClearIcon;
141
+ $[1] = isLoading;
142
+ $[2] = onClear;
143
+ $[3] = triggerId;
144
+ $[4] = t1;
145
+ } else {
146
+ t1 = $[4];
147
+ }
148
+
149
+ let t2;
150
+
151
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
152
+ t2 = /*#__PURE__*/React.createElement(DownOutlineIcon, {
153
+ className: styles.toggle,
154
+ "data-test": "toggle-icon",
155
+ "data-render-all-sizes": true
156
+ });
157
+ $[5] = t2;
158
+ } else {
159
+ t2 = $[5];
160
+ }
161
+
162
+ let t3;
163
+
164
+ if ($[6] !== t1) {
165
+ t3 = /*#__PURE__*/React.createElement("div", {
166
+ className: styles.iconsWrapper
167
+ }, t1, t2);
168
+ $[6] = t1;
169
+ $[7] = t3;
170
+ } else {
171
+ t3 = $[7];
172
+ }
173
+
174
+ return t3;
67
175
  };
68
176
 
177
+ function _temp(e_0) {
178
+ return e_0.stopPropagation();
179
+ }
180
+
181
+ function _temp2(e_1) {
182
+ return e_1.stopPropagation();
183
+ }
184
+
185
+ function _temp3(e_2) {
186
+ return e_2.stopPropagation();
187
+ }
188
+
69
189
  export { ClearOrLoading, Icons };