@intility/bifrost-react-select 6.0.2 → 6.1.0

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.
package/CHANGELOG.md CHANGED
@@ -1,6 +1,23 @@
1
1
  # @intility/bifrost-react-select
2
2
 
3
- ## 6.0.2
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - fbe99c7: Added React Compiler.
8
+
9
+ The following components have been slightly refactored to follow the rules of react:
10
+ - `Accordion`
11
+ - `Ellipsis`
12
+ - `FloatingMessage`
13
+ - `Modal`
14
+ - `Nav`
15
+ - `Tabs`
16
+ - `useHotkey`
17
+
18
+ Please let us know if you encounter unexpected behavior.
19
+
20
+ ## 6.0.2 - 2025-10-06
4
21
 
5
22
  ### Patch Changes
6
23
 
package/dist/Select.js CHANGED
@@ -1,5 +1,7 @@
1
- /* eslint-disable @typescript-eslint/ban-ts-comment */ "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
2
+ "use client";
3
+
4
+ import { c as _c } from "react-compiler-runtime";
3
5
  import { forwardRef, useState } from "react";
4
6
  import ReactSelectDefaultExport, { components as originalComponents } from "react-select";
5
7
  import AsyncReactSelect from "react-select/async";
@@ -17,266 +19,462 @@ import ClearIndicator from "./overrides/ClearIndicator.internal.js";
17
19
  import CustomOption from "./overrides/CustomOption.internal.js";
18
20
  import LoadingIndicator from "./overrides/LoadingIndicator.internal.js";
19
21
  import Menu, { SelectRefCtx } from "./overrides/Menu.internal.js";
22
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
20
23
  const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
21
24
  export const selectStyles = {
22
- container: (provided)=>({
23
- ...provided,
24
- ".bf-label-description + &, .bf-label + &": {
25
- marginTop: "var(--bfs4)"
26
- }
27
- }),
28
- control: (provided, state)=>({
29
- ...provided,
30
- "&:hover": {
31
- borderColor: "var(--bfc-base-c-inverted)",
32
- // Change color of dropdown icon when hover on Select
33
- ".bf-select__dropdown-indicator": {
34
- color: "var(--bfc-base-c)"
35
- }
36
- },
37
- ".bf-select-small &": {
38
- minHeight: "var(--rem32)"
39
- },
40
- ".bf-select-alert &": {
41
- borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-alert)"
42
- },
43
- ".bf-select-alert &:hover": {
44
- borderColor: state.isFocused ? undefined : state.isDisabled ? "transparent" : "var(--bfc-alert-2)"
45
- },
46
- ".bf-fieldgroup &": {
47
- borderRadius: 0
48
- },
49
- ".bf-fieldgroup > :first-of-type &": {
50
- borderTopLeftRadius: "var(--bf-radius-s)",
51
- borderBottomLeftRadius: "var(--bf-radius-s)"
52
- },
53
- ".bf-fieldgroup > :last-child &": {
54
- borderTopRightRadius: "var(--bf-radius-s)",
55
- borderBottomRightRadius: "var(--bf-radius-s)"
56
- },
57
- backgroundColor: state.isDisabled ? "var(--bfc-base)" : "var(--bfc-base-3)",
58
- borderWidth: 1,
59
- borderStyle: "solid",
60
- borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "var(--bfc-base-c-dimmed)" : "var(--bfc-base-c-wcag)",
61
- boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
62
- borderRadius: "var(--bf-radius-s)",
63
- minHeight: "var(--rem40)",
64
- cursor: "text"
65
- }),
66
- indicatorSeparator: ()=>({
67
- display: "none"
68
- }),
69
- indicatorsContainer: (provided)=>({
70
- ...provided,
71
- ".bf-select-small &": {
72
- paddingBlock: "0.2187rem"
73
- },
74
- padding: "0.469rem 0",
75
- alignItems: "flex-start"
76
- }),
77
- clearIndicator: (provided)=>({
78
- ...provided,
79
- "&:hover": {
80
- color: "var(--bfc-base-c)"
81
- },
82
- color: "var(--bfc-base-c-2)",
83
- cursor: "pointer",
84
- padding: 4,
85
- margin: "1px 4px 0px 0px"
86
- }),
87
- dropdownIndicator: (provided, state)=>({
88
- ...provided,
89
- ".bf-select-small &": {
90
- marginRight: 4
91
- },
92
- color: state.isDisabled ? "var(--bfc-base-c-disabled)" : state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
93
- cursor: "pointer",
94
- padding: 4,
95
- marginRight: 8
96
- }),
97
- input: (provided)=>({
98
- ...provided,
99
- color: "var(--bfc-base-c)",
100
- fontFamily: "inherit",
101
- fontSize: "var(--bf-font-size-l)",
102
- margin: 0,
103
- padding: 0
104
- }),
105
- menu: (provided)=>({
106
- ...provided,
107
- position: "static",
108
- margin: 0,
109
- backgroundColor: "transparent",
110
- boxShadow: "none",
111
- borderRadius: "none"
112
- }),
113
- menuList: (provided)=>({
114
- ...provided,
115
- backgroundColor: "var(--bfc-base-3)",
116
- padding: 0,
117
- border: "1px solid var(--bfc-base-c-wcag)",
118
- borderRadius: "var(--bf-radius-s)"
119
- }),
120
- placeholder: (provided, state)=>({
121
- ...provided,
122
- color: state.isDisabled ? "var(--bfc-base-c-disabled)" : "var(--bfc-base-c-2)",
123
- fontSize: "var(--bf-font-size-l)"
124
- }),
125
- valueContainer: (provided)=>({
126
- ...provided,
127
- ".bf-select-small &": {
128
- padding: "0 8px"
129
- },
130
- padding: "var(--rem2) 12px"
131
- }),
132
- singleValue: (provided, state)=>({
133
- ...provided,
134
- color: state.selectProps.menuIsOpen ? "var(--bfc-base-c-2)" : state.isDisabled ? "var(--bfc-base-c-disabled)" : "var(--bfc-base-c)",
135
- fontSize: "var(--bf-font-size-l)"
136
- }),
137
- option: (provided, state)=>({
138
- ...provided,
139
- display: "flex",
140
- justifyContent: !state.isMulti ? "space-between" : "normal",
141
- alignItems: "baseline",
142
- padding: "7px 12px",
143
- backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : state.isFocused ? "var(--bfc-base)" : "var(--bfc-base-3)",
144
- color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
145
- "& .bf-select-selected-icon": {
146
- color: "var(--bfc-base-c)",
147
- marginLeft: 4
148
- },
149
- "&:hover": {
150
- backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base)",
151
- cursor: state.isDisabled ? "default" : "pointer"
152
- },
153
- fontSize: "var(--bf-font-size-l)",
154
- fontWeight: state.isSelected ? 600 : 400,
155
- wordBreak: "break-word",
156
- whiteSpace: "normal"
157
- }),
158
- multiValue: (provided, state)=>({
159
- ...provided,
160
- backgroundColor: "var(--bfc-base)",
161
- borderRadius: "var(--bf-radius-xs)",
162
- border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
163
- opacity: state.isDisabled ? 0.5 : 1,
164
- maxWidth: "calc(100% - 10px)"
165
- }),
166
- multiValueLabel: (provided)=>({
167
- ...provided,
168
- fontSize: "var(--bf-font-size-m)",
169
- padding: "1.5px 4px 1.5px 8px",
170
- color: "inherit"
171
- }),
172
- multiValueRemove: (provided, state)=>({
173
- ...provided,
174
- color: "var(--bfc-base-c-2)",
175
- paddingLeft: 5,
176
- paddingRight: 5,
177
- background: state.isFocused ? "var(--bfc-theme-2)" : undefined,
178
- "&:hover": {
179
- color: "var(--bfc-base-c)",
180
- cursor: "pointer",
181
- background: "var(--bfc-base-2)"
182
- },
183
- "&:active": {
184
- background: "var(--bfc-base-3)"
185
- },
186
- svg: {
187
- marginTop: 1
188
- }
189
- }),
190
- group: (provided)=>({
191
- ...provided,
192
- padding: "6px 0",
193
- "&:first-of-type": {
194
- marginTop: 4
195
- }
196
- }),
197
- groupHeading: (provided)=>({
198
- ...provided,
199
- textTransform: "capitalize",
200
- color: "var(--bfc-base-c-2)",
201
- fontSize: "var(--bf-font-size-s)",
202
- marginBottom: 2
203
- })
25
+ container: provided => ({
26
+ ...provided,
27
+ ".bf-label-description + &, .bf-label + &": {
28
+ marginTop: "var(--bfs4)" // add margin-top only when label or description is direct sibling with select
29
+ }
30
+ }),
31
+ control: (provided, state) => ({
32
+ ...provided,
33
+ "&:hover": {
34
+ borderColor: "var(--bfc-base-c-inverted)",
35
+ // Change color of dropdown icon when hover on Select
36
+ ".bf-select__dropdown-indicator": {
37
+ color: "var(--bfc-base-c)"
38
+ }
39
+ },
40
+ ".bf-select-small &": {
41
+ minHeight: "var(--rem32)"
42
+ },
43
+ ".bf-select-alert &": {
44
+ borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-alert)"
45
+ },
46
+ ".bf-select-alert &:hover": {
47
+ borderColor: state.isFocused ? undefined : state.isDisabled ? "transparent" : "var(--bfc-alert-2)"
48
+ },
49
+ ".bf-fieldgroup &": {
50
+ borderRadius: 0
51
+ },
52
+ ".bf-fieldgroup > :first-of-type &": {
53
+ borderTopLeftRadius: "var(--bf-radius-s)",
54
+ borderBottomLeftRadius: "var(--bf-radius-s)"
55
+ },
56
+ ".bf-fieldgroup > :last-child &": {
57
+ borderTopRightRadius: "var(--bf-radius-s)",
58
+ borderBottomRightRadius: "var(--bf-radius-s)"
59
+ },
60
+ backgroundColor: state.isDisabled ? "var(--bfc-base)" : "var(--bfc-base-3)",
61
+ borderWidth: 1,
62
+ borderStyle: "solid",
63
+ borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "var(--bfc-base-c-dimmed)" : "var(--bfc-base-c-wcag)",
64
+ boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
65
+ borderRadius: "var(--bf-radius-s)",
66
+ minHeight: "var(--rem40)",
67
+ cursor: "text"
68
+ }),
69
+ indicatorSeparator: () => ({
70
+ display: "none"
71
+ }),
72
+ indicatorsContainer: provided => ({
73
+ ...provided,
74
+ ".bf-select-small &": {
75
+ paddingBlock: "0.2187rem" // 3.5px
76
+ },
77
+ padding: "0.469rem 0",
78
+ // 7.5px
79
+ alignItems: "flex-start"
80
+ }),
81
+ clearIndicator: provided => ({
82
+ ...provided,
83
+ "&:hover": {
84
+ color: "var(--bfc-base-c)"
85
+ },
86
+ color: "var(--bfc-base-c-2)",
87
+ cursor: "pointer",
88
+ padding: 4,
89
+ margin: "1px 4px 0px 0px"
90
+ }),
91
+ dropdownIndicator: (provided, state) => ({
92
+ ...provided,
93
+ ".bf-select-small &": {
94
+ marginRight: 4
95
+ },
96
+ color: state.isDisabled ? "var(--bfc-base-c-disabled)" : state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
97
+ cursor: "pointer",
98
+ padding: 4,
99
+ marginRight: 8
100
+ }),
101
+ input: provided => ({
102
+ ...provided,
103
+ color: "var(--bfc-base-c)",
104
+ fontFamily: "inherit",
105
+ fontSize: "var(--bf-font-size-l)",
106
+ margin: 0,
107
+ padding: 0
108
+ }),
109
+ menu: provided => ({
110
+ ...provided,
111
+ position: "static",
112
+ margin: 0,
113
+ backgroundColor: "transparent",
114
+ boxShadow: "none",
115
+ borderRadius: "none"
116
+ }),
117
+ menuList: provided => ({
118
+ ...provided,
119
+ backgroundColor: "var(--bfc-base-3)",
120
+ padding: 0,
121
+ border: "1px solid var(--bfc-base-c-wcag)",
122
+ borderRadius: "var(--bf-radius-s)"
123
+ }),
124
+ placeholder: (provided, state) => ({
125
+ ...provided,
126
+ color: state.isDisabled ? "var(--bfc-base-c-disabled)" : "var(--bfc-base-c-2)",
127
+ fontSize: "var(--bf-font-size-l)"
128
+ }),
129
+ valueContainer: provided => ({
130
+ ...provided,
131
+ ".bf-select-small &": {
132
+ padding: "0 8px"
133
+ },
134
+ padding: "var(--rem2) 12px"
135
+ }),
136
+ singleValue: (provided, state) => ({
137
+ ...provided,
138
+ color: state.selectProps.menuIsOpen ? "var(--bfc-base-c-2)" : state.isDisabled ? "var(--bfc-base-c-disabled)" : "var(--bfc-base-c)",
139
+ fontSize: "var(--bf-font-size-l)"
140
+ }),
141
+ option: (provided, state) => ({
142
+ ...provided,
143
+ display: "flex",
144
+ justifyContent: !state.isMulti ? "space-between" : "normal",
145
+ alignItems: "baseline",
146
+ padding: "7px 12px",
147
+ backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : state.isFocused ? "var(--bfc-base)" : "var(--bfc-base-3)",
148
+ color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
149
+ "& .bf-select-selected-icon": {
150
+ color: "var(--bfc-base-c)",
151
+ marginLeft: 4
152
+ },
153
+ "&:hover": {
154
+ backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base)",
155
+ cursor: state.isDisabled ? "default" : "pointer"
156
+ },
157
+ fontSize: "var(--bf-font-size-l)",
158
+ fontWeight: state.isSelected ? 600 : 400,
159
+ wordBreak: "break-word",
160
+ whiteSpace: "normal"
161
+ }),
162
+ multiValue: (provided, state) => ({
163
+ ...provided,
164
+ backgroundColor: "var(--bfc-base)",
165
+ borderRadius: "var(--bf-radius-xs)",
166
+ border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
167
+ opacity: state.isDisabled ? 0.5 : 1,
168
+ maxWidth: "calc(100% - 10px)" // leave space for cursor
169
+ }),
170
+ multiValueLabel: provided => ({
171
+ ...provided,
172
+ fontSize: "var(--bf-font-size-m)",
173
+ padding: "1.5px 4px 1.5px 8px",
174
+ color: "inherit"
175
+ }),
176
+ multiValueRemove: (provided, state) => ({
177
+ ...provided,
178
+ color: "var(--bfc-base-c-2)",
179
+ paddingLeft: 5,
180
+ paddingRight: 5,
181
+ background: state.isFocused ? "var(--bfc-theme-2)" : undefined,
182
+ "&:hover": {
183
+ color: "var(--bfc-base-c)",
184
+ cursor: "pointer",
185
+ background: "var(--bfc-base-2)"
186
+ },
187
+ "&:active": {
188
+ background: "var(--bfc-base-3)"
189
+ },
190
+ svg: {
191
+ marginTop: 1
192
+ }
193
+ }),
194
+ group: provided => ({
195
+ ...provided,
196
+ padding: "6px 0",
197
+ "&:first-of-type": {
198
+ marginTop: 4
199
+ }
200
+ }),
201
+ groupHeading: provided => ({
202
+ ...provided,
203
+ textTransform: "capitalize",
204
+ color: "var(--bfc-base-c-2)",
205
+ fontSize: "var(--bf-font-size-s)",
206
+ marginBottom: 2
207
+ })
204
208
  };
205
209
  export const selectComponents = {
206
- ...originalComponents,
207
- DropdownIndicator,
208
- MenuList: CustomMenuList,
209
- // @ts-ignore
210
- Menu,
211
- ClearIndicator,
212
- Option: CustomOption,
213
- LoadingIndicator
210
+ ...originalComponents,
211
+ DropdownIndicator,
212
+ MenuList: CustomMenuList,
213
+ // @ts-ignore
214
+ Menu,
215
+ ClearIndicator,
216
+ Option: CustomOption,
217
+ LoadingIndicator
214
218
  };
215
219
  /**
216
220
  * Select HOC
217
- */ const SelectHOC = (Selector)=>{
218
- // @ts-ignore
219
- // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
220
- const GeneratedSelect = /*#__PURE__*/ forwardRef(({ label, hideLabel = false, isDisabled = false, state, feedback, required = false, description, requiredNoLabel = false, optional = false, inputId, className, style, loading = false, components, small = false, ...props }, ref)=>{
221
- const selectId = useUniqueId(inputId);
222
- const locale = useLocale();
223
- const [controlElement, setControlElement] = useState(null);
224
- return /*#__PURE__*/ _jsx(SelectRefCtx.Provider, {
225
- value: controlElement,
226
- children: /*#__PURE__*/ _jsxs("div", {
227
- className: classNames(className, "bf-select-container", "bf-open-sans", {
228
- "bf-select-disabled": isDisabled,
229
- "bf-select-alert": !isDisabled && state === "alert",
230
- "bf-select-small": small
231
- }),
232
- style: style,
233
- "data-testid": "bf-select-container",
234
- children: [
235
- !hideLabel && /*#__PURE__*/ _jsx(Label, {
236
- htmlFor: selectId,
237
- required: !isDisabled && required && !requiredNoLabel,
238
- optional: optional,
239
- disabled: isDisabled,
240
- children: label
241
- }),
242
- /*#__PURE__*/ _jsx(Description, {
243
- children: description
244
- }),
245
- /*#__PURE__*/ _jsx(Selector, {
246
- ref: (r)=>{
247
- setControlElement(r?.controlRef ?? null);
248
- if (typeof ref === "function") {
249
- ref(r);
250
- } else if (ref != null) {
251
- ref.current = r;
252
- }
253
- },
254
- inputId: selectId,
255
- placeholder: "",
256
- components: {
257
- ...selectComponents,
258
- ...components
259
- },
260
- styles: selectStyles,
261
- isDisabled: isDisabled,
262
- classNamePrefix: "bf-select",
263
- required: !isDisabled && (required || requiredNoLabel),
264
- "aria-label": label,
265
- hideSelectedOptions: false,
266
- closeMenuOnSelect: props.isMulti ? false : true,
267
- isLoading: loading ?? props.isLoading,
268
- loadingMessage: ()=>locale.loading + "...",
269
- ...props
270
- }),
271
- /*#__PURE__*/ _jsx(Feedback, {
272
- children: feedback
273
- })
274
- ]
275
- })
276
- });
277
- });
278
- return GeneratedSelect;
221
+ */
222
+ const SelectHOC = Selector => {
223
+ // @ts-ignore
224
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
225
+ const GeneratedSelect = /*#__PURE__*/forwardRef((t0, ref) => {
226
+ const $ = _c(61);
227
+ let className;
228
+ let components;
229
+ let description;
230
+ let feedback;
231
+ let inputId;
232
+ let label;
233
+ let props;
234
+ let state;
235
+ let style;
236
+ let t1;
237
+ let t2;
238
+ let t3;
239
+ let t4;
240
+ let t5;
241
+ let t6;
242
+ let t7;
243
+ if ($[0] !== t0) {
244
+ ({
245
+ label,
246
+ hideLabel: t1,
247
+ isDisabled: t2,
248
+ state,
249
+ feedback,
250
+ required: t3,
251
+ description,
252
+ requiredNoLabel: t4,
253
+ optional: t5,
254
+ inputId,
255
+ className,
256
+ style,
257
+ loading: t6,
258
+ components,
259
+ small: t7,
260
+ ...props
261
+ } = t0);
262
+ $[0] = t0;
263
+ $[1] = className;
264
+ $[2] = components;
265
+ $[3] = description;
266
+ $[4] = feedback;
267
+ $[5] = inputId;
268
+ $[6] = label;
269
+ $[7] = props;
270
+ $[8] = state;
271
+ $[9] = style;
272
+ $[10] = t1;
273
+ $[11] = t2;
274
+ $[12] = t3;
275
+ $[13] = t4;
276
+ $[14] = t5;
277
+ $[15] = t6;
278
+ $[16] = t7;
279
+ } else {
280
+ className = $[1];
281
+ components = $[2];
282
+ description = $[3];
283
+ feedback = $[4];
284
+ inputId = $[5];
285
+ label = $[6];
286
+ props = $[7];
287
+ state = $[8];
288
+ style = $[9];
289
+ t1 = $[10];
290
+ t2 = $[11];
291
+ t3 = $[12];
292
+ t4 = $[13];
293
+ t5 = $[14];
294
+ t6 = $[15];
295
+ t7 = $[16];
296
+ }
297
+ const hideLabel = t1 === undefined ? false : t1;
298
+ const isDisabled = t2 === undefined ? false : t2;
299
+ const required = t3 === undefined ? false : t3;
300
+ const requiredNoLabel = t4 === undefined ? false : t4;
301
+ const optional = t5 === undefined ? false : t5;
302
+ const loading = t6 === undefined ? false : t6;
303
+ const small = t7 === undefined ? false : t7;
304
+ const selectId = useUniqueId(inputId);
305
+ const locale = useLocale();
306
+ const [controlElement, setControlElement] = useState(null);
307
+ const t8 = !isDisabled && state === "alert";
308
+ let t9;
309
+ if ($[17] !== className || $[18] !== isDisabled || $[19] !== small || $[20] !== t8) {
310
+ t9 = classNames(className, "bf-select-container", "bf-open-sans", {
311
+ "bf-select-disabled": isDisabled,
312
+ "bf-select-alert": t8,
313
+ "bf-select-small": small
314
+ });
315
+ $[17] = className;
316
+ $[18] = isDisabled;
317
+ $[19] = small;
318
+ $[20] = t8;
319
+ $[21] = t9;
320
+ } else {
321
+ t9 = $[21];
322
+ }
323
+ let t10;
324
+ if ($[22] !== hideLabel || $[23] !== isDisabled || $[24] !== label || $[25] !== optional || $[26] !== required || $[27] !== requiredNoLabel || $[28] !== selectId) {
325
+ t10 = !hideLabel && /*#__PURE__*/_jsx(Label, {
326
+ htmlFor: selectId,
327
+ required: !isDisabled && required && !requiredNoLabel,
328
+ optional: optional,
329
+ disabled: isDisabled,
330
+ children: label
331
+ });
332
+ $[22] = hideLabel;
333
+ $[23] = isDisabled;
334
+ $[24] = label;
335
+ $[25] = optional;
336
+ $[26] = required;
337
+ $[27] = requiredNoLabel;
338
+ $[28] = selectId;
339
+ $[29] = t10;
340
+ } else {
341
+ t10 = $[29];
342
+ }
343
+ let t11;
344
+ if ($[30] !== description) {
345
+ t11 = /*#__PURE__*/_jsx(Description, {
346
+ children: description
347
+ });
348
+ $[30] = description;
349
+ $[31] = t11;
350
+ } else {
351
+ t11 = $[31];
352
+ }
353
+ let t12;
354
+ if ($[32] !== ref) {
355
+ t12 = r => {
356
+ setControlElement(r?.controlRef ?? null);
357
+ if (typeof ref === "function") {
358
+ ref(r);
359
+ } else {
360
+ if (ref != null) {
361
+ ref.current = r;
362
+ }
363
+ }
364
+ };
365
+ $[32] = ref;
366
+ $[33] = t12;
367
+ } else {
368
+ t12 = $[33];
369
+ }
370
+ let t13;
371
+ if ($[34] !== components) {
372
+ t13 = {
373
+ ...selectComponents,
374
+ ...components
375
+ };
376
+ $[34] = components;
377
+ $[35] = t13;
378
+ } else {
379
+ t13 = $[35];
380
+ }
381
+ const t14 = !isDisabled && (required || requiredNoLabel);
382
+ const t15 = props.isMulti ? false : true;
383
+ const t16 = loading ?? props.isLoading;
384
+ let t17;
385
+ if ($[36] !== locale.loading) {
386
+ t17 = () => locale.loading + "...";
387
+ $[36] = locale.loading;
388
+ $[37] = t17;
389
+ } else {
390
+ t17 = $[37];
391
+ }
392
+ let t18;
393
+ if ($[38] !== isDisabled || $[39] !== label || $[40] !== props || $[41] !== selectId || $[42] !== t12 || $[43] !== t13 || $[44] !== t14 || $[45] !== t15 || $[46] !== t16 || $[47] !== t17) {
394
+ t18 = /*#__PURE__*/_jsx(Selector, {
395
+ ref: t12,
396
+ inputId: selectId,
397
+ placeholder: "",
398
+ components: t13,
399
+ styles: selectStyles,
400
+ isDisabled: isDisabled,
401
+ classNamePrefix: "bf-select",
402
+ required: t14,
403
+ "aria-label": label,
404
+ hideSelectedOptions: false,
405
+ closeMenuOnSelect: t15,
406
+ isLoading: t16,
407
+ loadingMessage: t17,
408
+ ...props
409
+ });
410
+ $[38] = isDisabled;
411
+ $[39] = label;
412
+ $[40] = props;
413
+ $[41] = selectId;
414
+ $[42] = t12;
415
+ $[43] = t13;
416
+ $[44] = t14;
417
+ $[45] = t15;
418
+ $[46] = t16;
419
+ $[47] = t17;
420
+ $[48] = t18;
421
+ } else {
422
+ t18 = $[48];
423
+ }
424
+ let t19;
425
+ if ($[49] !== feedback) {
426
+ t19 = /*#__PURE__*/_jsx(Feedback, {
427
+ children: feedback
428
+ });
429
+ $[49] = feedback;
430
+ $[50] = t19;
431
+ } else {
432
+ t19 = $[50];
433
+ }
434
+ let t20;
435
+ if ($[51] !== style || $[52] !== t10 || $[53] !== t11 || $[54] !== t18 || $[55] !== t19 || $[56] !== t9) {
436
+ t20 = /*#__PURE__*/_jsxs("div", {
437
+ className: t9,
438
+ style: style,
439
+ "data-testid": "bf-select-container",
440
+ children: [t10, t11, t18, t19]
441
+ });
442
+ $[51] = style;
443
+ $[52] = t10;
444
+ $[53] = t11;
445
+ $[54] = t18;
446
+ $[55] = t19;
447
+ $[56] = t9;
448
+ $[57] = t20;
449
+ } else {
450
+ t20 = $[57];
451
+ }
452
+ let t21;
453
+ if ($[58] !== controlElement || $[59] !== t20) {
454
+ t21 = /*#__PURE__*/_jsx(SelectRefCtx.Provider, {
455
+ value: controlElement,
456
+ children: t20
457
+ });
458
+ $[58] = controlElement;
459
+ $[59] = t20;
460
+ $[60] = t21;
461
+ } else {
462
+ t21 = $[60];
463
+ }
464
+ return t21;
465
+ });
466
+ return GeneratedSelect;
279
467
  };
468
+
469
+ // this is somewhat useless on its own
470
+ // has to be combined with one of the Select's props
471
+
472
+ // Each select get its own type which uses the correctly imported props
473
+ // And calls the HOC
474
+ // The resulting component should be correctly typed
475
+
476
+ // Plain Select
477
+
280
478
  /**
281
479
  * Select component - dropdown list
282
480
  *
@@ -289,13 +487,23 @@ export const selectComponents = {
289
487
  * value={selected}
290
488
  * onChange={(item) => setSelected(item)}
291
489
  * />
292
- */ export const Select = SelectHOC(ReactSelect);
490
+ */
491
+ export const Select = SelectHOC(ReactSelect);
293
492
  Select.displayName = "Select";
493
+
494
+ // Async Select
495
+
294
496
  const AsyncSelect = SelectHOC(AsyncReactSelect);
295
497
  AsyncSelect.displayName = "AsyncSelect";
498
+
499
+ // Creatable Select
500
+
296
501
  const CreatableSelect = SelectHOC(CreatableReactSelect);
297
502
  CreatableSelect.displayName = "CreatableSelect";
503
+
504
+ // Async Creatable Select
505
+
298
506
  const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
299
507
  AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
300
508
  export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
301
- export default Select;
509
+ export default Select;
@@ -4,19 +4,10 @@ const width = 18;
4
4
  const height = 18;
5
5
  const aliases = [];
6
6
  const unicode = "";
7
- const svgPathData = [
8
- "M9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2ZM0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z",
9
- "M8 1C8 0.447715 8.44772 0 9 0C13.9706 0 18 4.02944 18 9C18 9.55229 17.5523 10 17 10C16.4477 10 16 9.55229 16 9C16 5.13401 12.866 2 9 2C8.44772 2 8 1.55228 8 1Z"
10
- ];
7
+ const svgPathData = ["M9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2ZM0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", "M8 1C8 0.447715 8.44772 0 9 0C13.9706 0 18 4.02944 18 9C18 9.55229 17.5523 10 17 10C16.4477 10 16 9.55229 16 9C16 5.13401 12.866 2 9 2C8.44772 2 8 1.55228 8 1Z"];
11
8
  const definition = {
12
- prefix,
13
- iconName,
14
- icon: [
15
- width,
16
- height,
17
- aliases,
18
- unicode,
19
- svgPathData
20
- ]
9
+ prefix,
10
+ iconName,
11
+ icon: [width, height, aliases, unicode, svgPathData]
21
12
  };
22
- export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases };
13
+ export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases };
@@ -1,14 +1,31 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { Icon } from "@intility/bifrost-react";
3
3
  import { components } from "react-select";
4
4
  import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
5
- const ClearIndicator = (props)=>{
6
- return /*#__PURE__*/ _jsx(components.ClearIndicator, {
7
- ...props,
8
- children: /*#__PURE__*/ _jsx(Icon, {
9
- widthAuto: true,
10
- icon: faXmark
11
- })
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const ClearIndicator = props => {
7
+ const $ = _c(3);
8
+ let t0;
9
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
10
+ t0 = /*#__PURE__*/_jsx(Icon, {
11
+ widthAuto: true,
12
+ icon: faXmark
13
+ });
14
+ $[0] = t0;
15
+ } else {
16
+ t0 = $[0];
17
+ }
18
+ let t1;
19
+ if ($[1] !== props) {
20
+ t1 = /*#__PURE__*/_jsx(components.ClearIndicator, {
21
+ ...props,
22
+ children: t0
12
23
  });
24
+ $[1] = props;
25
+ $[2] = t1;
26
+ } else {
27
+ t1 = $[2];
28
+ }
29
+ return t1;
13
30
  };
14
- export default ClearIndicator;
31
+ export default ClearIndicator;
@@ -1,11 +1,21 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { components } from "react-select";
3
- const CustomMenuList = (props)=>{
4
- return /*#__PURE__*/ _jsx(components.MenuList, {
5
- "data-testid": "bf-select-menulist",
6
- className: "bf-scrollbar-small",
7
- ...props,
8
- children: props.children
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ const CustomMenuList = props => {
5
+ const $ = _c(2);
6
+ let t0;
7
+ if ($[0] !== props) {
8
+ t0 = /*#__PURE__*/_jsx(components.MenuList, {
9
+ "data-testid": "bf-select-menulist",
10
+ className: "bf-scrollbar-small",
11
+ ...props,
12
+ children: props.children
9
13
  });
14
+ $[0] = props;
15
+ $[1] = t0;
16
+ } else {
17
+ t0 = $[1];
18
+ }
19
+ return t0;
10
20
  };
11
- export default CustomMenuList;
21
+ export default CustomMenuList;
@@ -1,28 +1,54 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { components } from "react-select";
3
3
  import { faSquare } from "@fortawesome/free-regular-svg-icons/faSquare";
4
4
  import { faCheckSquare } from "@fortawesome/free-solid-svg-icons/faCheckSquare";
5
5
  import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
6
6
  import { Icon } from "@intility/bifrost-react";
7
- const CustomOption = (props)=>{
8
- return /*#__PURE__*/ _jsxs(components.Option, {
9
- ...props,
10
- children: [
11
- props.isMulti && /*#__PURE__*/ _jsx("div", {
12
- children: /*#__PURE__*/ _jsx(Icon, {
13
- icon: props.isSelected ? faCheckSquare : faSquare,
14
- marginRight: true,
15
- color: props.isSelected ? "var(--bfc-theme)" : "var(--bfc-base-c-2)"
16
- })
17
- }),
18
- props.children,
19
- !props.isMulti && props.isSelected && /*#__PURE__*/ _jsx("div", {
20
- children: /*#__PURE__*/ _jsx(Icon, {
21
- icon: faCheck,
22
- className: "bf-select-selected-icon"
23
- })
24
- })
25
- ]
7
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
8
+ const CustomOption = props => {
9
+ const $ = _c(10);
10
+ let t0;
11
+ if ($[0] !== props.isMulti || $[1] !== props.isSelected) {
12
+ t0 = props.isMulti && /*#__PURE__*/_jsx("div", {
13
+ children: /*#__PURE__*/_jsx(Icon, {
14
+ icon: props.isSelected ? faCheckSquare : faSquare,
15
+ marginRight: true,
16
+ color: props.isSelected ? "var(--bfc-theme)" : "var(--bfc-base-c-2)"
17
+ })
18
+ });
19
+ $[0] = props.isMulti;
20
+ $[1] = props.isSelected;
21
+ $[2] = t0;
22
+ } else {
23
+ t0 = $[2];
24
+ }
25
+ let t1;
26
+ if ($[3] !== props.isMulti || $[4] !== props.isSelected) {
27
+ t1 = !props.isMulti && props.isSelected && /*#__PURE__*/_jsx("div", {
28
+ children: /*#__PURE__*/_jsx(Icon, {
29
+ icon: faCheck,
30
+ className: "bf-select-selected-icon"
31
+ })
32
+ });
33
+ $[3] = props.isMulti;
34
+ $[4] = props.isSelected;
35
+ $[5] = t1;
36
+ } else {
37
+ t1 = $[5];
38
+ }
39
+ let t2;
40
+ if ($[6] !== props || $[7] !== t0 || $[8] !== t1) {
41
+ t2 = /*#__PURE__*/_jsxs(components.Option, {
42
+ ...props,
43
+ children: [t0, props.children, t1]
26
44
  });
45
+ $[6] = props;
46
+ $[7] = t0;
47
+ $[8] = t1;
48
+ $[9] = t2;
49
+ } else {
50
+ t2 = $[9];
51
+ }
52
+ return t2;
27
53
  };
28
- export default CustomOption;
54
+ export default CustomOption;
@@ -1,14 +1,31 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { components } from "react-select";
3
3
  import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
4
4
  import { Icon } from "@intility/bifrost-react";
5
- const DropdownIndicator = (props)=>{
6
- return /*#__PURE__*/ _jsx(components.DropdownIndicator, {
7
- ...props,
8
- children: /*#__PURE__*/ _jsx(Icon, {
9
- widthAuto: true,
10
- icon: faCaretDown
11
- })
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const DropdownIndicator = props => {
7
+ const $ = _c(3);
8
+ let t0;
9
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
10
+ t0 = /*#__PURE__*/_jsx(Icon, {
11
+ widthAuto: true,
12
+ icon: faCaretDown
13
+ });
14
+ $[0] = t0;
15
+ } else {
16
+ t0 = $[0];
17
+ }
18
+ let t1;
19
+ if ($[1] !== props) {
20
+ t1 = /*#__PURE__*/_jsx(components.DropdownIndicator, {
21
+ ...props,
22
+ children: t0
12
23
  });
24
+ $[1] = props;
25
+ $[2] = t1;
26
+ } else {
27
+ t1 = $[2];
28
+ }
29
+ return t1;
13
30
  };
14
- export default DropdownIndicator;
31
+ export default DropdownIndicator;
@@ -1,10 +1,19 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { Icon } from "@intility/bifrost-react";
3
3
  import bfSpinner from "../assets/bfSpinner.js";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
4
5
  export default function LoadingIndicator() {
5
- return /*#__PURE__*/ _jsx(Icon, {
6
- icon: bfSpinner,
7
- spin: true,
8
- className: "bf-input-loading-icon"
6
+ const $ = _c(1);
7
+ let t0;
8
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
9
+ t0 = /*#__PURE__*/_jsx(Icon, {
10
+ icon: bfSpinner,
11
+ spin: true,
12
+ className: "bf-input-loading-icon"
9
13
  });
10
- }
14
+ $[0] = t0;
15
+ } else {
16
+ t0 = $[0];
17
+ }
18
+ return t0;
19
+ }
@@ -1,37 +1,92 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { c as _c } from "react-compiler-runtime";
2
2
  import { Dropdown } from "@intility/bifrost-react";
3
3
  import useResizeObserver from "@intility/bifrost-react/hooks/useResizeObserver";
4
4
  import { createContext, useContext, useRef } from "react";
5
5
  import { components } from "react-select";
6
- export const SelectRefCtx = /*#__PURE__*/ createContext(null);
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ export const SelectRefCtx = /*#__PURE__*/createContext(null);
7
8
  export default function Menu(props) {
8
- const { menuPlacement, menuPosition } = props;
9
- const controlElement = useContext(SelectRefCtx);
10
- // Keep width of dropdown in sync with select control
11
- const divRef = useRef(null);
12
- useResizeObserver(controlElement, (entry)=>{
13
- if (!divRef.current) return;
14
- divRef.current.style.width = entry.borderBoxSize[0].inlineSize + "px";
9
+ const $ = _c(14);
10
+ const {
11
+ menuPlacement,
12
+ menuPosition
13
+ } = props;
14
+ const controlElement = useContext(SelectRefCtx);
15
+ const divRef = useRef(null);
16
+ let t0;
17
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
18
+ t0 = entry => {
19
+ if (!divRef.current) {
20
+ return;
21
+ }
22
+ divRef.current.style.width = entry.borderBoxSize[0].inlineSize + "px";
23
+ };
24
+ $[0] = t0;
25
+ } else {
26
+ t0 = $[0];
27
+ }
28
+ useResizeObserver(controlElement, t0);
29
+ const t1 = menuPlacement === "auto" ? "bottom" : menuPlacement;
30
+ let t2;
31
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
32
+ t2 = [0, 4];
33
+ $[1] = t2;
34
+ } else {
35
+ t2 = $[1];
36
+ }
37
+ const t3 = controlElement?.offsetWidth;
38
+ let t4;
39
+ if ($[2] !== t3) {
40
+ t4 = {
41
+ width: t3
42
+ };
43
+ $[2] = t3;
44
+ $[3] = t4;
45
+ } else {
46
+ t4 = $[3];
47
+ }
48
+ let t5;
49
+ if ($[4] !== props) {
50
+ t5 = /*#__PURE__*/_jsx(components.Menu, {
51
+ ...props
52
+ });
53
+ $[4] = props;
54
+ $[5] = t5;
55
+ } else {
56
+ t5 = $[5];
57
+ }
58
+ let t6;
59
+ if ($[6] !== t4 || $[7] !== t5) {
60
+ t6 = /*#__PURE__*/_jsx("div", {
61
+ ref: divRef,
62
+ style: t4,
63
+ children: t5
15
64
  });
16
- return /*#__PURE__*/ _jsx(Dropdown, {
17
- unstyled: true,
18
- noArrow: true,
19
- visible: true,
20
- reference: controlElement,
21
- placement: menuPlacement === "auto" ? "bottom" : menuPlacement,
22
- strategy: menuPosition,
23
- offset: [
24
- 0,
25
- 4
26
- ],
27
- content: /*#__PURE__*/ _jsx("div", {
28
- ref: divRef,
29
- style: {
30
- width: controlElement?.offsetWidth
31
- },
32
- children: /*#__PURE__*/ _jsx(components.Menu, {
33
- ...props
34
- })
35
- })
65
+ $[6] = t4;
66
+ $[7] = t5;
67
+ $[8] = t6;
68
+ } else {
69
+ t6 = $[8];
70
+ }
71
+ let t7;
72
+ if ($[9] !== controlElement || $[10] !== menuPosition || $[11] !== t1 || $[12] !== t6) {
73
+ t7 = /*#__PURE__*/_jsx(Dropdown, {
74
+ unstyled: true,
75
+ noArrow: true,
76
+ visible: true,
77
+ reference: controlElement,
78
+ placement: t1,
79
+ strategy: menuPosition,
80
+ offset: t2,
81
+ content: t6
36
82
  });
37
- }
83
+ $[9] = controlElement;
84
+ $[10] = menuPosition;
85
+ $[11] = t1;
86
+ $[12] = t6;
87
+ $[13] = t7;
88
+ } else {
89
+ t7 = $[13];
90
+ }
91
+ return t7;
92
+ }
package/package.json CHANGED
@@ -1,18 +1,17 @@
1
1
  {
2
2
  "name": "@intility/bifrost-react-select",
3
- "version": "6.0.2",
3
+ "version": "6.1.0",
4
4
  "description": "React select component for Intility's design system, Bifrost.",
5
5
  "type": "module",
6
6
  "main": "dist/Select.js",
7
7
  "scripts": {
8
- "build": "run-p build:*",
9
- "build:module": "swc ./src -d dist --strip-leading-paths",
10
- "build:types": "tsc",
11
- "start": "run-p watch:*",
8
+ "build:module": "babel ./src -d dist --extensions .ts,.tsx,.js,.jsx --ignore '**/*.test.*,**/*.d.ts' --root-mode upward",
9
+ "build:types": "tsc --project tsconfig.build.json",
12
10
  "watch:module": "npm run build:module -- --watch",
13
11
  "watch:types": "npm run build:types -- --watch --preserveWatchOutput",
14
12
  "clean": "rimraf dist",
15
- "lint": "eslint ./src/**/*.{ts,tsx}"
13
+ "lint": "eslint \"./src/**/*.{ts,tsx}\"",
14
+ "typecheck": "tsc --noEmit"
16
15
  },
17
16
  "exports": {
18
17
  "./package.json": "./package.json",
@@ -44,12 +43,13 @@
44
43
  "react-dom": "^17 || ^18 || ^19"
45
44
  },
46
45
  "devDependencies": {
47
- "@intility/bifrost-react": "^6.4.2"
46
+ "@intility/bifrost-react": "^6.8.0"
48
47
  },
49
48
  "dependencies": {
50
49
  "@fortawesome/fontawesome-svg-core": "^7.1.0",
51
50
  "@fortawesome/free-solid-svg-icons": "^7.1.0",
52
51
  "classnames": "^2.2.6",
52
+ "react-compiler-runtime": "^1.0.0",
53
53
  "react-select": "^5.10.2"
54
54
  },
55
55
  "files": [