@intility/bifrost-react-select 4.0.0-alpha.8 → 4.0.0-beta.2

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 (30) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/Select.d.ts +5 -5
  3. package/dist/Select.js +104 -101
  4. package/dist/assets/bfSpinner.d.ts +2 -2
  5. package/dist/assets/bfSpinner.js +5 -5
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/overrides/ClearIndicator.internal.js +3 -3
  9. package/dist/overrides/CustomInput.internal.js +5 -5
  10. package/dist/overrides/CustomMenuList.internal.js +1 -1
  11. package/dist/overrides/CustomOption.internal.js +5 -5
  12. package/dist/overrides/DropdownIndicator.internal.js +3 -3
  13. package/dist/overrides/LoadingIndicator.internal.js +2 -2
  14. package/dist/overrides/index.d.ts +6 -6
  15. package/dist/overrides/index.js +6 -6
  16. package/package.json +2 -2
  17. package/src/Select.test.tsx +94 -93
  18. package/src/Select.tsx +199 -201
  19. package/src/assets/bfSpinner.ts +15 -15
  20. package/src/index.ts +3 -2
  21. package/src/overrides/ClearIndicator.internal.tsx +7 -7
  22. package/src/overrides/CustomInput.internal.tsx +16 -14
  23. package/src/overrides/CustomMenuList.internal.tsx +7 -7
  24. package/src/overrides/CustomOption.internal.tsx +11 -11
  25. package/src/overrides/DropdownIndicator.internal.tsx +7 -7
  26. package/src/overrides/LoadingIndicator.internal.tsx +4 -4
  27. package/src/overrides/index.ts +6 -6
  28. package/tsconfig.json +1 -1
  29. package/vitest.config.ts +7 -7
  30. package/src/Select.md +0 -410
package/src/Select.tsx CHANGED
@@ -1,29 +1,27 @@
1
1
  /* eslint-disable @typescript-eslint/ban-ts-comment */
2
- 'use client'
2
+ "use client";
3
3
 
4
- import { CSSProperties, forwardRef, ReactNode, RefAttributes } from 'react'
4
+ import { CSSProperties, forwardRef, ReactNode, RefAttributes } from "react";
5
5
  import ReactSelectDefaultExport, {
6
6
  GroupBase,
7
7
  Props as ReactSelectProps,
8
8
  SelectInstance,
9
- components
10
- } from 'react-select'
9
+ components,
10
+ } from "react-select";
11
11
  import AsyncReactSelect, {
12
- AsyncProps as AsyncSelectProps
13
- } from 'react-select/async'
12
+ AsyncProps as AsyncSelectProps,
13
+ } from "react-select/async";
14
14
  import CreatableReactSelect, {
15
- CreatableProps as CreatableSelectProps
16
- } from 'react-select/creatable'
15
+ CreatableProps as CreatableSelectProps,
16
+ } from "react-select/creatable";
17
17
  import AsyncCreatableReactSelect, {
18
- AsyncCreatableProps as AsyncCreatableSelectProps
19
- } from 'react-select/async-creatable'
20
- import classNames from 'classnames'
21
- import {
22
- Description,
23
- Feedback,
24
- Label,
25
- useUniqueId
26
- } from '@intility/bifrost-react'
18
+ AsyncCreatableProps as AsyncCreatableSelectProps,
19
+ } from "react-select/async-creatable";
20
+ import classNames from "classnames";
21
+ import Description from "@intility/bifrost-react/Description";
22
+ import Feedback from "@intility/bifrost-react/Feedback";
23
+ import Label from "@intility/bifrost-react/Label";
24
+ import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
27
25
 
28
26
  import {
29
27
  DropdownIndicator,
@@ -31,197 +29,197 @@ import {
31
29
  CustomInput,
32
30
  CustomMenuList,
33
31
  CustomOption,
34
- LoadingIndicator
35
- } from './overrides'
32
+ LoadingIndicator,
33
+ } from "./overrides/index.js";
36
34
 
37
35
  const ReactSelect =
38
36
  (
39
37
  ReactSelectDefaultExport as unknown as {
40
- default: typeof ReactSelectDefaultExport
38
+ default: typeof ReactSelectDefaultExport;
41
39
  }
42
- ).default ?? ReactSelectDefaultExport
40
+ ).default ?? ReactSelectDefaultExport;
43
41
 
44
42
  export const selectStyles = {
45
- container: provided => ({
43
+ container: (provided) => ({
46
44
  ...provided,
47
- '.bf-label-description + &, .bf-label + &': {
48
- marginTop: 'var(--bfs4)' // add margin-top only when label or description is direct sibling with select
49
- }
45
+ ".bf-label-description + &, .bf-label + &": {
46
+ marginTop: "var(--bfs4)", // add margin-top only when label or description is direct sibling with select
47
+ },
50
48
  }),
51
49
  control: (provided, state) => ({
52
50
  ...provided,
53
- '&:hover': {
51
+ "&:hover": {
54
52
  borderBottomColor: state.isFocused
55
- ? 'var(--bfc-base-c-theme)'
56
- : 'var(--bfc-base-c-inverted-2)',
53
+ ? "var(--bfc-base-c-theme)"
54
+ : "var(--bfc-base-c-inverted-2)",
57
55
  // Change color of dropdown icon when hover on Select
58
- '.bf-select__dropdown-indicator': {
59
- color: 'var(--bfc-theme-3)'
60
- }
56
+ ".bf-select__dropdown-indicator": {
57
+ color: "var(--bfc-theme-3)",
58
+ },
61
59
  },
62
60
  backgroundColor: state.isDisabled
63
- ? 'var(--bfc-base-dimmed)'
64
- : 'var(--bfc-base-3)',
61
+ ? "var(--bfc-base-dimmed)"
62
+ : "var(--bfc-base-3)",
65
63
  border: 0,
66
- borderBottomWidth: '2px',
67
- borderBottomStyle: 'solid',
64
+ borderBottomWidth: "2px",
65
+ borderBottomStyle: "solid",
68
66
  borderBottomColor: state.isFocused
69
- ? 'var(--bfc-base-c-theme)'
67
+ ? "var(--bfc-base-c-theme)"
70
68
  : state.isDisabled
71
- ? 'transparent'
72
- : 'var(--bfc-base-c-wcag)',
73
- boxShadow: state.isFocused && '0 0 0 1px var(--bfc-theme-3)',
69
+ ? "transparent"
70
+ : "var(--bfc-base-c-wcag)",
71
+ boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
74
72
  borderRadius: state.selectProps.menuIsOpen
75
- ? ' var(--bfl-border-radius) var(--bfl-border-radius) 0 0'
76
- : 'var(--bfl-border-radius)',
77
- minHeight: 'var(--bfs40)',
78
- cursor: 'text'
73
+ ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
74
+ : "var(--bf-radius-xs)",
75
+ minHeight: "var(--bfs40)",
76
+ cursor: "text",
79
77
  }),
80
78
  indicatorSeparator: () => ({
81
- display: 'none'
79
+ display: "none",
82
80
  }),
83
- indicatorsContainer: provided => ({
81
+ indicatorsContainer: (provided) => ({
84
82
  ...provided,
85
- alignItems: 'flex-start',
86
- padding: '7.5px 0'
83
+ alignItems: "flex-start",
84
+ padding: "7.5px 0",
87
85
  }),
88
- clearIndicator: provided => ({
86
+ clearIndicator: (provided) => ({
89
87
  ...provided,
90
- '&:hover': {
91
- color: 'var(--bfc-base-c-1)'
88
+ "&:hover": {
89
+ color: "var(--bfc-base-c-1)",
92
90
  },
93
- color: 'var(--bfc-base-c-2)',
94
- cursor: 'pointer',
95
- padding: 'var(--bfs4)',
96
- margin: '1px var(--bfs4) 0px 0px'
91
+ color: "var(--bfc-base-c-2)",
92
+ cursor: "pointer",
93
+ padding: "var(--bfs4)",
94
+ margin: "1px var(--bfs4) 0px 0px",
97
95
  }),
98
96
  dropdownIndicator: (provided, state) => ({
99
97
  ...provided,
100
- color: state.isDisabled ? 'var(--bfc-base-c-2)' : 'var(--bfc-theme-1)',
101
- cursor: 'pointer',
102
- padding: 'var(--bfs4)',
103
- marginRight: 'var(--bfs8)'
98
+ color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
99
+ cursor: "pointer",
100
+ padding: "var(--bfs4)",
101
+ marginRight: "var(--bfs8)",
104
102
  }),
105
- input: provided => ({
103
+ input: (provided) => ({
106
104
  ...provided,
107
- color: 'var(--bfc-base-c-1)',
108
- fontFamily: 'inherit',
109
- fontSize: 'var(--bf-font-size-l)'
105
+ color: "var(--bfc-base-c-1)",
106
+ fontFamily: "inherit",
107
+ fontSize: "var(--bf-font-size-l)",
110
108
  }),
111
- menuPortal: provided => ({
109
+ menuPortal: (provided) => ({
112
110
  ...provided,
113
- zIndex: 9999
111
+ zIndex: 9999,
114
112
  }),
115
- menu: provided => ({
113
+ menu: (provided) => ({
116
114
  ...provided,
117
- backgroundColor: 'var(--bfc-base-3)',
118
- boxShadow: 'none',
119
- borderRadius: 'none',
115
+ backgroundColor: "var(--bfc-base-3)",
116
+ boxShadow: "none",
117
+ borderRadius: "none",
120
118
  marginTop: 0,
121
- zIndex: 3
119
+ zIndex: 3,
122
120
  }),
123
- menuList: provided => ({
121
+ menuList: (provided) => ({
124
122
  ...provided,
125
123
  padding: 0,
126
- boxShadow: '0 0 0 1px var(--bfc-theme-3)',
127
- borderRadius: '0 0 var(--bfl-border-radius) var(--bfl-border-radius)'
124
+ boxShadow: "0 0 0 1px var(--bfc-theme-3)",
125
+ borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
128
126
  }),
129
- placeholder: provided => ({
127
+ placeholder: (provided) => ({
130
128
  ...provided,
131
- color: 'var(--bfc-base-c-2)',
132
- fontSize: 'var(--bf-font-size-l)'
129
+ color: "var(--bfc-base-c-2)",
130
+ fontSize: "var(--bf-font-size-l)",
133
131
  }),
134
132
  singleValue: (provided, state) => ({
135
133
  ...provided,
136
134
  color: state.selectProps.menuIsOpen
137
- ? 'var(--bfc-base-c-2)'
138
- : 'var(--bfc-base-c)',
139
- fontSize: 'var(--bf-font-size-l)'
135
+ ? "var(--bfc-base-c-2)"
136
+ : "var(--bfc-base-c)",
137
+ fontSize: "var(--bf-font-size-l)",
140
138
  }),
141
139
  option: (provided, state) => ({
142
140
  ...provided,
143
- display: 'flex',
144
- justifyContent: !state.isMulti ? 'space-between' : 'normal',
145
- alignItems: 'baseline',
146
- padding: '7px 12px',
141
+ display: "flex",
142
+ justifyContent: !state.isMulti ? "space-between" : "normal",
143
+ alignItems: "baseline",
144
+ padding: "7px 12px",
147
145
  backgroundColor: state.isDisabled
148
- ? 'var(--bfc-base-dimmed)'
146
+ ? "var(--bfc-base-dimmed)"
149
147
  : state.isFocused
150
- ? 'var(--bfc-base-1)'
151
- : 'var(--bfc-base-3)',
152
- color: 'var(--bfc-base-c)',
153
- '& .bf-select-checkbox': {
154
- marginRight: 'var(--bfs8)',
155
- color: 'var(--bfc-theme)'
148
+ ? "var(--bfc-base-1)"
149
+ : "var(--bfc-base-3)",
150
+ color: "var(--bfc-base-c)",
151
+ "& .bf-select-checkbox": {
152
+ marginRight: "var(--bfs8)",
153
+ color: "var(--bfc-theme)",
156
154
  },
157
- '& .bf-select-selected-icon': {
158
- color: 'var(--bfc-base-c-theme)',
159
- marginLeft: 'var(--bfs4)'
155
+ "& .bf-select-selected-icon": {
156
+ color: "var(--bfc-base-c-theme)",
157
+ marginLeft: "var(--bfs4)",
160
158
  },
161
- '&:hover': {
159
+ "&:hover": {
162
160
  backgroundColor: state.isDisabled
163
- ? 'var(--bfc-base-dimmed)'
164
- : 'var(--bfc-base-1)',
165
- cursor: state.isDisabled ? 'default' : 'pointer'
161
+ ? "var(--bfc-base-dimmed)"
162
+ : "var(--bfc-base-1)",
163
+ cursor: state.isDisabled ? "default" : "pointer",
166
164
  },
167
- fontSize: 'var(--bf-font-size-l)',
165
+ fontSize: "var(--bf-font-size-l)",
168
166
  fontWeight: state.isSelected ? 600 : 400,
169
- wordBreak: 'break-word',
170
- whiteSpace: 'normal'
167
+ wordBreak: "break-word",
168
+ whiteSpace: "normal",
171
169
  }),
172
170
  multiValue: (provided, state) => ({
173
171
  ...provided,
174
172
  backgroundColor: state.isDisabled
175
- ? 'var(--bfc-base-c-inverted-2)'
176
- : 'var(--bfc-theme-c)',
177
- borderRadius: 'var(--bfl-border-radius)'
173
+ ? "var(--bfc-base-c-inverted-2)"
174
+ : "var(--bfc-theme-c)",
175
+ borderRadius: "var(--bf-radius-xs)",
178
176
  }),
179
177
  multiValueLabel: (provided, state) => ({
180
178
  ...provided,
181
- color: state.isDisabled ? 'var(--bfc-base-1)' : 'var(--bfc-base-c-theme)',
182
- fontSize: 'var(--bf-font-size-m)'
179
+ color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
180
+ fontSize: "var(--bf-font-size-m)",
183
181
  }),
184
182
  multiValueRemove: (provided, state) => ({
185
183
  ...provided,
186
184
  color: state.isDisabled
187
- ? 'var(--bfc-base-1)'
185
+ ? "var(--bfc-base-1)"
188
186
  : state.isFocused
189
- ? 'var(--bfc-theme-c-base-3)'
190
- : 'var(--bfc-theme-1)',
191
- borderRadius: 'unset',
192
- borderTopRightRadius: 'var(--bfl-border-radius)',
193
- borderBottomRightRadius: 'var(--bfl-border-radius)',
194
- paddingLeft: 'var(--bfs2)',
195
- paddingRight: 'var(--bfs2)',
196
- marginLeft: 'var(--bfs2)',
197
- background: state.isFocused && 'var(--bfc-theme-2)',
198
- '&:hover': {
199
- color: 'var(--bfc-theme-c-base-3)',
200
- cursor: 'pointer',
201
- background: 'var(--bfc-theme)'
187
+ ? "var(--bfc-theme-c-base-3)"
188
+ : "var(--bfc-theme-1)",
189
+ borderRadius: "unset",
190
+ borderTopRightRadius: "var(--bf-radius-xs)",
191
+ borderBottomRightRadius: "var(--bf-radius-xs)",
192
+ paddingLeft: "var(--bfs2)",
193
+ paddingRight: "var(--bfs2)",
194
+ marginLeft: "var(--bfs2)",
195
+ background: state.isFocused && "var(--bfc-theme-2)",
196
+ "&:hover": {
197
+ color: "var(--bfc-theme-c-base-3)",
198
+ cursor: "pointer",
199
+ background: "var(--bfc-theme)",
202
200
  },
203
- '&:active': {
204
- background: 'var(--bfc-theme-2)'
201
+ "&:active": {
202
+ background: "var(--bfc-theme-2)",
205
203
  },
206
204
  svg: {
207
- marginTop: '1px'
208
- }
205
+ marginTop: "1px",
206
+ },
209
207
  }),
210
- group: provided => ({
208
+ group: (provided) => ({
211
209
  ...provided,
212
- padding: 'var(--bfs6) 0',
213
- '&:first-of-type': {
214
- marginTop: 'var(--bfs4)'
215
- }
210
+ padding: "var(--bfs6) 0",
211
+ "&:first-of-type": {
212
+ marginTop: "var(--bfs4)",
213
+ },
216
214
  }),
217
- groupHeading: provided => ({
215
+ groupHeading: (provided) => ({
218
216
  ...provided,
219
- textTransform: 'capitalize',
220
- color: 'var(--bfc-base-c-2)',
221
- fontSize: 'var(--bf-font-size-s)',
222
- marginBottom: 'var(--bfs2)'
223
- })
224
- }
217
+ textTransform: "capitalize",
218
+ color: "var(--bfc-base-c-2)",
219
+ fontSize: "var(--bf-font-size-s)",
220
+ marginBottom: "var(--bfs2)",
221
+ }),
222
+ };
225
223
 
226
224
  export const selectComponents: Partial<typeof components> = {
227
225
  DropdownIndicator,
@@ -229,11 +227,11 @@ export const selectComponents: Partial<typeof components> = {
229
227
  MenuList: CustomMenuList,
230
228
  ClearIndicator,
231
229
  Option: CustomOption,
232
- LoadingIndicator
233
- }
230
+ LoadingIndicator,
231
+ };
234
232
 
235
- const selectStates = ['default', 'alert'] as const
236
- export type SelectState = (typeof selectStates)[number]
233
+ const selectStates = ["default", "alert"] as const;
234
+ export type SelectState = (typeof selectStates)[number];
237
235
 
238
236
  /**
239
237
  * Select HOC
@@ -260,20 +258,20 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
260
258
  components,
261
259
  ...props
262
260
  },
263
- ref
261
+ ref,
264
262
  ) => {
265
- const selectId = useUniqueId(inputId)
263
+ const selectId = useUniqueId(inputId);
266
264
 
267
265
  return (
268
266
  <div
269
267
  className={classNames(
270
268
  className,
271
- { 'bf-select-container': true },
272
- { 'bf-select-disabled': isDisabled },
273
- { 'bf-select-alert': !isDisabled && state === 'alert' }
269
+ { "bf-select-container": true },
270
+ { "bf-select-disabled": isDisabled },
271
+ { "bf-select-alert": !isDisabled && state === "alert" },
274
272
  )}
275
273
  style={style}
276
- data-testid='bf-select-container'
274
+ data-testid="bf-select-container"
277
275
  >
278
276
  {!hideLabel && (
279
277
  <Label
@@ -290,11 +288,11 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
290
288
  <Selector
291
289
  ref={ref}
292
290
  inputId={selectId}
293
- placeholder=''
291
+ placeholder=""
294
292
  components={{ ...selectComponents, ...components }}
295
293
  styles={selectStyles}
296
294
  isDisabled={isDisabled}
297
- classNamePrefix='bf-select'
295
+ classNamePrefix="bf-select"
298
296
  required={!isDisabled && (required || requiredNoLabel)}
299
297
  aria-label={label}
300
298
  hideSelectedOptions={false}
@@ -304,37 +302,37 @@ const SelectHOC = <Type, Selector>(Selector: Selector) => {
304
302
  />
305
303
  <Feedback>{feedback}</Feedback>
306
304
  </div>
307
- )
308
- }
309
- )
305
+ );
306
+ },
307
+ );
310
308
 
311
- return GeneratedSelect
312
- }
309
+ return GeneratedSelect;
310
+ };
313
311
 
314
312
  // this is somewhat useless on it's own
315
313
  // has to be combined with one of the Select's props
316
314
  export type SelectProps = {
317
315
  /** Required label text */
318
- label: ReactNode
316
+ label: ReactNode;
319
317
  /** Hide label text, will add label prop as aria-label for screen readers */
320
- hideLabel?: boolean
318
+ hideLabel?: boolean;
321
319
  /** Description text to show more information */
322
- description?: ReactNode
320
+ description?: ReactNode;
323
321
  /** Available states: `default` and `alert` */
324
- state?: SelectState
322
+ state?: SelectState;
325
323
  /** Feedback text below the Select component */
326
- feedback?: ReactNode
324
+ feedback?: ReactNode;
327
325
  /** Required prop indicating mandatory field */
328
- required?: boolean
326
+ required?: boolean;
329
327
  /** Bool to mark Select component required, but hides the required label */
330
- requiredNoLabel?: boolean
328
+ requiredNoLabel?: boolean;
331
329
  /** Marks Select component as optional */
332
- optional?: boolean
330
+ optional?: boolean;
333
331
  /** Inline CSS styles */
334
- style?: CSSProperties
332
+ style?: CSSProperties;
335
333
  /** Displays a loading spinner */
336
- loading?: boolean
337
- }
334
+ loading?: boolean;
335
+ };
338
336
 
339
337
  // Each select get its own type which uses the correctly imported props
340
338
  // And calls the HOC
@@ -345,22 +343,22 @@ export type SelectType = {
345
343
  <
346
344
  OptionType = { label: string; value: string },
347
345
  IsMulti extends boolean = false,
348
- Group extends GroupBase<OptionType> = GroupBase<OptionType>
346
+ Group extends GroupBase<OptionType> = GroupBase<OptionType>,
349
347
  >(
350
348
  props: ReactSelectProps<OptionType, IsMulti, Group> &
351
349
  RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
352
- SelectProps
353
- ): React.ReactElement | null
354
- displayName?: string
355
- }
350
+ SelectProps,
351
+ ): React.ReactElement | null;
352
+ displayName?: string;
353
+ };
356
354
 
357
355
  /**
358
356
  * Select component - dropdown list
359
357
  */
360
358
  const SelectComponent: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
361
- ReactSelect
362
- )
363
- SelectComponent.displayName = 'Select'
359
+ ReactSelect,
360
+ );
361
+ SelectComponent.displayName = "Select";
364
362
 
365
363
  // Async Select
366
364
  export type AsyncType = {
@@ -368,22 +366,22 @@ export type AsyncType = {
368
366
  OptionType = { label: string; value: string },
369
367
  IsMulti extends boolean = false,
370
368
  Group extends GroupBase<OptionType> = {
371
- options: OptionType[]
372
- label?: string
373
- }
369
+ options: OptionType[];
370
+ label?: string;
371
+ },
374
372
  >(
375
373
  props: AsyncSelectProps<OptionType, IsMulti, Group> &
376
374
  RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
377
- SelectProps
378
- ): React.ReactElement | null
379
- displayName?: string
380
- }
375
+ SelectProps,
376
+ ): React.ReactElement | null;
377
+ displayName?: string;
378
+ };
381
379
 
382
380
  const AsyncSelect = SelectHOC<AsyncType, typeof AsyncReactSelect>(
383
- AsyncReactSelect
384
- )
381
+ AsyncReactSelect,
382
+ );
385
383
 
386
- AsyncSelect.displayName = 'AsyncSelect'
384
+ AsyncSelect.displayName = "AsyncSelect";
387
385
 
388
386
  // Creatable Select
389
387
  export type CreatableType = {
@@ -391,22 +389,22 @@ export type CreatableType = {
391
389
  OptionType = { label: string; value: string },
392
390
  IsMulti extends boolean = false,
393
391
  Group extends GroupBase<OptionType> = {
394
- options: OptionType[]
395
- label?: string
396
- }
392
+ options: OptionType[];
393
+ label?: string;
394
+ },
397
395
  >(
398
396
  props: CreatableSelectProps<OptionType, IsMulti, Group> &
399
397
  RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
400
- SelectProps
401
- ): React.ReactElement | null
402
- displayName?: string
403
- }
398
+ SelectProps,
399
+ ): React.ReactElement | null;
400
+ displayName?: string;
401
+ };
404
402
 
405
403
  const CreatableSelect = SelectHOC<CreatableType, typeof CreatableReactSelect>(
406
- CreatableReactSelect
407
- )
404
+ CreatableReactSelect,
405
+ );
408
406
 
409
- CreatableSelect.displayName = 'CreatableSelect'
407
+ CreatableSelect.displayName = "CreatableSelect";
410
408
 
411
409
  // Async Creatable Select
412
410
  export type AsyncCreatableType = {
@@ -414,23 +412,23 @@ export type AsyncCreatableType = {
414
412
  OptionType = { label: string; value: string },
415
413
  IsMulti extends boolean = false,
416
414
  Group extends GroupBase<OptionType> = {
417
- options: OptionType[]
418
- label?: string
419
- }
415
+ options: OptionType[];
416
+ label?: string;
417
+ },
420
418
  >(
421
419
  props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> &
422
420
  RefAttributes<SelectInstance<OptionType, IsMulti, Group>> &
423
- SelectProps
424
- ): React.ReactElement | null
425
- displayName?: string
426
- }
421
+ SelectProps,
422
+ ): React.ReactElement | null;
423
+ displayName?: string;
424
+ };
427
425
 
428
426
  const AsyncCreatableSelect = SelectHOC<
429
427
  AsyncCreatableType,
430
428
  typeof AsyncCreatableReactSelect
431
- >(AsyncCreatableReactSelect)
429
+ >(AsyncCreatableReactSelect);
432
430
 
433
- AsyncCreatableSelect.displayName = 'AsyncCreatableSelect'
431
+ AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
434
432
 
435
- export { AsyncSelect, CreatableSelect, AsyncCreatableSelect }
436
- export default SelectComponent
433
+ export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
434
+ export default SelectComponent;
package/src/assets/bfSpinner.ts CHANGED
@@ -2,25 +2,25 @@ import {
2
2
  IconDefinition,
3
3
  IconName,
4
4
  IconPathData,
5
- IconPrefix
6
- } from '@fortawesome/fontawesome-svg-core'
5
+ IconPrefix,
6
+ } from "@fortawesome/fontawesome-svg-core";
7
7
 
8
- const prefix = 'fac' as IconPrefix
9
- const iconName = 'bf-spinner' as IconName
10
- const width = 18
11
- const height = 18
12
- const aliases = []
13
- const unicode = ''
8
+ const prefix = "fac" as IconPrefix;
9
+ const iconName = "bf-spinner" as IconName;
10
+ const width = 18;
11
+ const height = 18;
12
+ const aliases = [];
13
+ const unicode = "";
14
14
  const svgPathData: IconPathData = [
15
- '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',
16
- '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'
17
- ]
15
+ "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",
16
+ "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",
17
+ ];
18
18
 
19
19
  const definition: IconDefinition = {
20
20
  prefix,
21
21
  iconName,
22
- icon: [width, height, aliases, unicode, svgPathData]
23
- }
22
+ icon: [width, height, aliases, unicode, svgPathData],
23
+ };
24
24
 
25
25
  export {
26
26
  definition as default,
@@ -33,5 +33,5 @@ export {
33
33
  aliases as ligatures,
34
34
  unicode,
35
35
  svgPathData,
36
- aliases
37
- }
36
+ aliases,
37
+ };
package/src/index.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  export {
2
2
  default,
3
+ default as Select,
3
4
  AsyncSelect,
4
5
  CreatableSelect,
5
6
  AsyncCreatableSelect,
6
7
  selectStyles,
7
- selectComponents
8
- } from './Select'
8
+ selectComponents,
9
+ } from "./Select.js";