@intility/bifrost-react-select 0.0.0-ci-cache-20240515140408
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 +41 -0
- package/dist/Select.d.ts +98 -0
- package/dist/Select.js +250 -0
- package/dist/assets/bfSpinner.d.ts +10 -0
- package/dist/assets/bfSpinner.js +22 -0
- package/dist/overrides/ClearIndicator.internal.d.ts +2 -0
- package/dist/overrides/ClearIndicator.internal.js +13 -0
- package/dist/overrides/CustomInput.internal.d.ts +2 -0
- package/dist/overrides/CustomInput.internal.js +32 -0
- package/dist/overrides/CustomMenuList.internal.d.ts +2 -0
- package/dist/overrides/CustomMenuList.internal.js +11 -0
- package/dist/overrides/CustomOption.internal.d.ts +2 -0
- package/dist/overrides/CustomOption.internal.js +29 -0
- package/dist/overrides/DropdownIndicator.internal.d.ts +2 -0
- package/dist/overrides/DropdownIndicator.internal.js +13 -0
- package/dist/overrides/LoadingIndicator.internal.d.ts +1 -0
- package/dist/overrides/LoadingIndicator.internal.js +11 -0
- package/dist/overrides/index.d.ts +6 -0
- package/dist/overrides/index.js +6 -0
- package/package.json +56 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @intility/bifrost-react-select
|
|
2
|
+
|
|
3
|
+
## 0.0.0-ci-cache-20240515140408
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f5192357: added possibility to create snapshot releases of bifrost
|
|
8
|
+
- Updated dependencies [f5192357]
|
|
9
|
+
- @intility/bifrost-react@0.0.0-ci-cache-20240515140408
|
|
10
|
+
|
|
11
|
+
## 4.0.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 26deecde: Fix de-dupe issues by un-pinning `@intility/bifrost-react` version number and and moved to `devDependencies` and `peerDependencies`.
|
|
16
|
+
- Updated dependencies [79b9ab5d]
|
|
17
|
+
- @intility/bifrost-react@4.0.2
|
|
18
|
+
|
|
19
|
+
## 4.0.1
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- 611f82ca: Removed unnecessary files from npm package output.
|
|
24
|
+
- 63f4c54d: fix: Select menu background color is no longer transparent for grouped options.
|
|
25
|
+
- Updated dependencies [611f82ca]
|
|
26
|
+
- @intility/bifrost-react@4.0.1
|
|
27
|
+
|
|
28
|
+
## 4.0.0 (first release)
|
|
29
|
+
|
|
30
|
+
### Minor Changes
|
|
31
|
+
|
|
32
|
+
- 62b02461: Include JSDoc comments in typescript definition output
|
|
33
|
+
- 6b355639: New styling for inputs, now always outlined.
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- 217c8741: Named export for Select and DatePicker
|
|
38
|
+
- a903f282: Fix: export typescript types used in react components
|
|
39
|
+
- e410a910: New base color values for light mode #711
|
|
40
|
+
- 165904af: Use deep imports from @intility/bifrost-react
|
|
41
|
+
- fdc6caee: Fix: select dropdown background should no longer bleed outside border radius when opened
|
package/dist/Select.d.ts
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode, RefAttributes } from "react";
|
|
2
|
+
import { GroupBase, Props as ReactSelectProps, SelectInstance, components } from "react-select";
|
|
3
|
+
import { AsyncProps as AsyncSelectProps } from "react-select/async";
|
|
4
|
+
import { CreatableProps as CreatableSelectProps } from "react-select/creatable";
|
|
5
|
+
import { AsyncCreatableProps as AsyncCreatableSelectProps } from "react-select/async-creatable";
|
|
6
|
+
export declare const selectStyles: {
|
|
7
|
+
container: (provided: any) => any;
|
|
8
|
+
control: (provided: any, state: any) => any;
|
|
9
|
+
indicatorSeparator: () => {
|
|
10
|
+
display: string;
|
|
11
|
+
};
|
|
12
|
+
indicatorsContainer: (provided: any) => any;
|
|
13
|
+
clearIndicator: (provided: any) => any;
|
|
14
|
+
dropdownIndicator: (provided: any, state: any) => any;
|
|
15
|
+
input: (provided: any) => any;
|
|
16
|
+
menuPortal: (provided: any) => any;
|
|
17
|
+
menu: (provided: any) => any;
|
|
18
|
+
menuList: (provided: any) => any;
|
|
19
|
+
placeholder: (provided: any) => any;
|
|
20
|
+
singleValue: (provided: any, state: any) => any;
|
|
21
|
+
option: (provided: any, state: any) => any;
|
|
22
|
+
multiValue: (provided: any, state: any) => any;
|
|
23
|
+
multiValueLabel: (provided: any, state: any) => any;
|
|
24
|
+
multiValueRemove: (provided: any, state: any) => any;
|
|
25
|
+
group: (provided: any) => any;
|
|
26
|
+
groupHeading: (provided: any) => any;
|
|
27
|
+
};
|
|
28
|
+
export declare const selectComponents: Partial<typeof components>;
|
|
29
|
+
declare const selectStates: readonly ["default", "alert"];
|
|
30
|
+
export type SelectState = (typeof selectStates)[number];
|
|
31
|
+
export type SelectProps = {
|
|
32
|
+
/** Required label text */
|
|
33
|
+
label: ReactNode;
|
|
34
|
+
/** Hide label text, will add label prop as aria-label for screen readers */
|
|
35
|
+
hideLabel?: boolean;
|
|
36
|
+
/** Description text to show more information */
|
|
37
|
+
description?: ReactNode;
|
|
38
|
+
/** Available states: `default` and `alert` */
|
|
39
|
+
state?: SelectState;
|
|
40
|
+
/** Feedback text below the Select component */
|
|
41
|
+
feedback?: ReactNode;
|
|
42
|
+
/** Required prop indicating mandatory field */
|
|
43
|
+
required?: boolean;
|
|
44
|
+
/** Bool to mark Select component required, but hides the required label */
|
|
45
|
+
requiredNoLabel?: boolean;
|
|
46
|
+
/** Marks Select component as optional */
|
|
47
|
+
optional?: boolean;
|
|
48
|
+
/** Inline CSS styles */
|
|
49
|
+
style?: CSSProperties;
|
|
50
|
+
/** Displays a loading spinner */
|
|
51
|
+
loading?: boolean;
|
|
52
|
+
};
|
|
53
|
+
export type SelectType = {
|
|
54
|
+
<OptionType = {
|
|
55
|
+
label: string;
|
|
56
|
+
value: string;
|
|
57
|
+
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
|
|
58
|
+
displayName?: string;
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Select component - dropdown list
|
|
62
|
+
*/
|
|
63
|
+
export declare const Select: SelectType;
|
|
64
|
+
export type AsyncType = {
|
|
65
|
+
<OptionType = {
|
|
66
|
+
label: string;
|
|
67
|
+
value: string;
|
|
68
|
+
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
|
|
69
|
+
options: OptionType[];
|
|
70
|
+
label?: string;
|
|
71
|
+
}>(props: AsyncSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
|
|
72
|
+
displayName?: string;
|
|
73
|
+
};
|
|
74
|
+
declare const AsyncSelect: AsyncType;
|
|
75
|
+
export type CreatableType = {
|
|
76
|
+
<OptionType = {
|
|
77
|
+
label: string;
|
|
78
|
+
value: string;
|
|
79
|
+
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
|
|
80
|
+
options: OptionType[];
|
|
81
|
+
label?: string;
|
|
82
|
+
}>(props: CreatableSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
|
|
83
|
+
displayName?: string;
|
|
84
|
+
};
|
|
85
|
+
declare const CreatableSelect: CreatableType;
|
|
86
|
+
export type AsyncCreatableType = {
|
|
87
|
+
<OptionType = {
|
|
88
|
+
label: string;
|
|
89
|
+
value: string;
|
|
90
|
+
}, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = {
|
|
91
|
+
options: OptionType[];
|
|
92
|
+
label?: string;
|
|
93
|
+
}>(props: AsyncCreatableSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
|
|
94
|
+
displayName?: string;
|
|
95
|
+
};
|
|
96
|
+
declare const AsyncCreatableSelect: AsyncCreatableType;
|
|
97
|
+
export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
|
|
98
|
+
export default Select;
|
package/dist/Select.js
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */ "use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import ReactSelectDefaultExport from "react-select";
|
|
5
|
+
import AsyncReactSelect from "react-select/async";
|
|
6
|
+
import CreatableReactSelect from "react-select/creatable";
|
|
7
|
+
import AsyncCreatableReactSelect from "react-select/async-creatable";
|
|
8
|
+
import classNames from "classnames";
|
|
9
|
+
import Description from "@intility/bifrost-react/Description";
|
|
10
|
+
import Feedback from "@intility/bifrost-react/Feedback";
|
|
11
|
+
import Label from "@intility/bifrost-react/Label";
|
|
12
|
+
import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
|
|
13
|
+
import { DropdownIndicator, ClearIndicator, CustomInput, CustomMenuList, CustomOption, LoadingIndicator } from "./overrides/index.js";
|
|
14
|
+
const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
|
|
15
|
+
export const selectStyles = {
|
|
16
|
+
container: (provided)=>({
|
|
17
|
+
...provided,
|
|
18
|
+
".bf-label-description + &, .bf-label + &": {
|
|
19
|
+
marginTop: "var(--bfs4)"
|
|
20
|
+
}
|
|
21
|
+
}),
|
|
22
|
+
control: (provided, state)=>({
|
|
23
|
+
...provided,
|
|
24
|
+
"&:hover": {
|
|
25
|
+
borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
|
|
26
|
+
// Change color of dropdown icon when hover on Select
|
|
27
|
+
".bf-select__dropdown-indicator": {
|
|
28
|
+
color: "var(--bfc-theme-3)"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
|
|
32
|
+
borderWidth: "1px",
|
|
33
|
+
borderStyle: "solid",
|
|
34
|
+
borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
|
|
35
|
+
boxShadow: "none",
|
|
36
|
+
borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
|
|
37
|
+
minHeight: "var(--bfs40)",
|
|
38
|
+
cursor: "text"
|
|
39
|
+
}),
|
|
40
|
+
indicatorSeparator: ()=>({
|
|
41
|
+
display: "none"
|
|
42
|
+
}),
|
|
43
|
+
indicatorsContainer: (provided)=>({
|
|
44
|
+
...provided,
|
|
45
|
+
alignItems: "flex-start",
|
|
46
|
+
padding: "7.5px 0"
|
|
47
|
+
}),
|
|
48
|
+
clearIndicator: (provided)=>({
|
|
49
|
+
...provided,
|
|
50
|
+
"&:hover": {
|
|
51
|
+
color: "var(--bfc-base-c-1)"
|
|
52
|
+
},
|
|
53
|
+
color: "var(--bfc-base-c-2)",
|
|
54
|
+
cursor: "pointer",
|
|
55
|
+
padding: "var(--bfs4)",
|
|
56
|
+
margin: "1px var(--bfs4) 0px 0px"
|
|
57
|
+
}),
|
|
58
|
+
dropdownIndicator: (provided, state)=>({
|
|
59
|
+
...provided,
|
|
60
|
+
color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
|
|
61
|
+
cursor: "pointer",
|
|
62
|
+
padding: "var(--bfs4)",
|
|
63
|
+
marginRight: "var(--bfs8)"
|
|
64
|
+
}),
|
|
65
|
+
input: (provided)=>({
|
|
66
|
+
...provided,
|
|
67
|
+
color: "var(--bfc-base-c-1)",
|
|
68
|
+
fontFamily: "inherit",
|
|
69
|
+
fontSize: "var(--bf-font-size-l)"
|
|
70
|
+
}),
|
|
71
|
+
menuPortal: (provided)=>({
|
|
72
|
+
...provided,
|
|
73
|
+
zIndex: 9999
|
|
74
|
+
}),
|
|
75
|
+
menu: (provided)=>({
|
|
76
|
+
...provided,
|
|
77
|
+
backgroundColor: "transparent",
|
|
78
|
+
boxShadow: "none",
|
|
79
|
+
borderRadius: "none",
|
|
80
|
+
marginTop: 0,
|
|
81
|
+
zIndex: 3
|
|
82
|
+
}),
|
|
83
|
+
menuList: (provided)=>({
|
|
84
|
+
...provided,
|
|
85
|
+
backgroundColor: "var(--bfc-base-3)",
|
|
86
|
+
padding: 0,
|
|
87
|
+
border: "1px solid var(--bfc-theme-3)",
|
|
88
|
+
borderTop: "none",
|
|
89
|
+
borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
|
|
90
|
+
}),
|
|
91
|
+
placeholder: (provided)=>({
|
|
92
|
+
...provided,
|
|
93
|
+
color: "var(--bfc-base-c-2)",
|
|
94
|
+
fontSize: "var(--bf-font-size-l)"
|
|
95
|
+
}),
|
|
96
|
+
singleValue: (provided, state)=>({
|
|
97
|
+
...provided,
|
|
98
|
+
color: state.selectProps.menuIsOpen ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
|
|
99
|
+
fontSize: "var(--bf-font-size-l)"
|
|
100
|
+
}),
|
|
101
|
+
option: (provided, state)=>({
|
|
102
|
+
...provided,
|
|
103
|
+
display: "flex",
|
|
104
|
+
justifyContent: !state.isMulti ? "space-between" : "normal",
|
|
105
|
+
alignItems: "baseline",
|
|
106
|
+
padding: "7px 12px",
|
|
107
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : state.isFocused ? "var(--bfc-base-1)" : "var(--bfc-base-3)",
|
|
108
|
+
color: "var(--bfc-base-c)",
|
|
109
|
+
"& .bf-select-checkbox": {
|
|
110
|
+
marginRight: "var(--bfs8)",
|
|
111
|
+
color: "var(--bfc-theme)"
|
|
112
|
+
},
|
|
113
|
+
"& .bf-select-selected-icon": {
|
|
114
|
+
color: "var(--bfc-base-c-theme)",
|
|
115
|
+
marginLeft: "var(--bfs4)"
|
|
116
|
+
},
|
|
117
|
+
"&:hover": {
|
|
118
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
|
|
119
|
+
cursor: state.isDisabled ? "default" : "pointer"
|
|
120
|
+
},
|
|
121
|
+
fontSize: "var(--bf-font-size-l)",
|
|
122
|
+
fontWeight: state.isSelected ? 600 : 400,
|
|
123
|
+
wordBreak: "break-word",
|
|
124
|
+
whiteSpace: "normal"
|
|
125
|
+
}),
|
|
126
|
+
multiValue: (provided, state)=>({
|
|
127
|
+
...provided,
|
|
128
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-c-inverted-2)" : "var(--bfc-theme-c)",
|
|
129
|
+
borderRadius: "var(--bf-radius-xs)"
|
|
130
|
+
}),
|
|
131
|
+
multiValueLabel: (provided, state)=>({
|
|
132
|
+
...provided,
|
|
133
|
+
color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
|
|
134
|
+
fontSize: "var(--bf-font-size-m)"
|
|
135
|
+
}),
|
|
136
|
+
multiValueRemove: (provided, state)=>({
|
|
137
|
+
...provided,
|
|
138
|
+
color: state.isDisabled ? "var(--bfc-base-1)" : state.isFocused ? "var(--bfc-theme-c-base-3)" : "var(--bfc-theme-1)",
|
|
139
|
+
borderRadius: "unset",
|
|
140
|
+
borderTopRightRadius: "var(--bf-radius-xs)",
|
|
141
|
+
borderBottomRightRadius: "var(--bf-radius-xs)",
|
|
142
|
+
paddingLeft: "var(--bfs2)",
|
|
143
|
+
paddingRight: "var(--bfs2)",
|
|
144
|
+
marginLeft: "var(--bfs2)",
|
|
145
|
+
background: state.isFocused && "var(--bfc-theme-2)",
|
|
146
|
+
"&:hover": {
|
|
147
|
+
color: "var(--bfc-theme-c-base-3)",
|
|
148
|
+
cursor: "pointer",
|
|
149
|
+
background: "var(--bfc-theme)"
|
|
150
|
+
},
|
|
151
|
+
"&:active": {
|
|
152
|
+
background: "var(--bfc-theme-2)"
|
|
153
|
+
},
|
|
154
|
+
svg: {
|
|
155
|
+
marginTop: "1px"
|
|
156
|
+
}
|
|
157
|
+
}),
|
|
158
|
+
group: (provided)=>({
|
|
159
|
+
...provided,
|
|
160
|
+
padding: "var(--bfs6) 0",
|
|
161
|
+
"&:first-of-type": {
|
|
162
|
+
marginTop: "var(--bfs4)"
|
|
163
|
+
}
|
|
164
|
+
}),
|
|
165
|
+
groupHeading: (provided)=>({
|
|
166
|
+
...provided,
|
|
167
|
+
textTransform: "capitalize",
|
|
168
|
+
color: "var(--bfc-base-c-2)",
|
|
169
|
+
fontSize: "var(--bf-font-size-s)",
|
|
170
|
+
marginBottom: "var(--bfs2)"
|
|
171
|
+
})
|
|
172
|
+
};
|
|
173
|
+
export const selectComponents = {
|
|
174
|
+
DropdownIndicator,
|
|
175
|
+
Input: CustomInput,
|
|
176
|
+
MenuList: CustomMenuList,
|
|
177
|
+
ClearIndicator,
|
|
178
|
+
Option: CustomOption,
|
|
179
|
+
LoadingIndicator
|
|
180
|
+
};
|
|
181
|
+
const selectStates = [
|
|
182
|
+
"default",
|
|
183
|
+
"alert"
|
|
184
|
+
];
|
|
185
|
+
/**
|
|
186
|
+
* Select HOC
|
|
187
|
+
*/ const SelectHOC = (Selector)=>{
|
|
188
|
+
// @ts-ignore
|
|
189
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
|
|
190
|
+
const GeneratedSelect = /*#__PURE__*/ forwardRef(({ label, hideLabel = false, isDisabled = false, state, feedback, required = false, description, requiredNoLabel = false, optional = false, inputId, className, style, loading = false, components, ...props }, ref)=>{
|
|
191
|
+
const selectId = useUniqueId(inputId);
|
|
192
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
193
|
+
className: classNames(className, {
|
|
194
|
+
"bf-select-container": true
|
|
195
|
+
}, {
|
|
196
|
+
"bf-select-disabled": isDisabled
|
|
197
|
+
}, {
|
|
198
|
+
"bf-select-alert": !isDisabled && state === "alert"
|
|
199
|
+
}),
|
|
200
|
+
style: style,
|
|
201
|
+
"data-testid": "bf-select-container",
|
|
202
|
+
children: [
|
|
203
|
+
!hideLabel && /*#__PURE__*/ _jsx(Label, {
|
|
204
|
+
htmlFor: selectId,
|
|
205
|
+
required: !isDisabled && required && !requiredNoLabel,
|
|
206
|
+
optional: optional,
|
|
207
|
+
disabled: isDisabled,
|
|
208
|
+
children: label
|
|
209
|
+
}),
|
|
210
|
+
/*#__PURE__*/ _jsx(Description, {
|
|
211
|
+
children: description
|
|
212
|
+
}),
|
|
213
|
+
/*#__PURE__*/ _jsx(Selector, {
|
|
214
|
+
ref: ref,
|
|
215
|
+
inputId: selectId,
|
|
216
|
+
placeholder: "",
|
|
217
|
+
components: {
|
|
218
|
+
...selectComponents,
|
|
219
|
+
...components
|
|
220
|
+
},
|
|
221
|
+
styles: selectStyles,
|
|
222
|
+
isDisabled: isDisabled,
|
|
223
|
+
classNamePrefix: "bf-select",
|
|
224
|
+
required: !isDisabled && (required || requiredNoLabel),
|
|
225
|
+
"aria-label": label,
|
|
226
|
+
hideSelectedOptions: false,
|
|
227
|
+
closeMenuOnSelect: props.isMulti ? false : true,
|
|
228
|
+
isLoading: loading ?? props.isLoading,
|
|
229
|
+
...props
|
|
230
|
+
}),
|
|
231
|
+
/*#__PURE__*/ _jsx(Feedback, {
|
|
232
|
+
children: feedback
|
|
233
|
+
})
|
|
234
|
+
]
|
|
235
|
+
});
|
|
236
|
+
});
|
|
237
|
+
return GeneratedSelect;
|
|
238
|
+
};
|
|
239
|
+
/**
|
|
240
|
+
* Select component - dropdown list
|
|
241
|
+
*/ export const Select = SelectHOC(ReactSelect);
|
|
242
|
+
Select.displayName = "Select";
|
|
243
|
+
const AsyncSelect = SelectHOC(AsyncReactSelect);
|
|
244
|
+
AsyncSelect.displayName = "AsyncSelect";
|
|
245
|
+
const CreatableSelect = SelectHOC(CreatableReactSelect);
|
|
246
|
+
CreatableSelect.displayName = "CreatableSelect";
|
|
247
|
+
const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
|
|
248
|
+
AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
|
|
249
|
+
export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
|
|
250
|
+
export default Select;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IconDefinition, IconName, IconPathData, IconPrefix } from "@fortawesome/fontawesome-svg-core";
|
|
2
|
+
declare const prefix: IconPrefix;
|
|
3
|
+
declare const iconName: IconName;
|
|
4
|
+
declare const width = 18;
|
|
5
|
+
declare const height = 18;
|
|
6
|
+
declare const aliases: never[];
|
|
7
|
+
declare const unicode = "";
|
|
8
|
+
declare const svgPathData: IconPathData;
|
|
9
|
+
declare const definition: IconDefinition;
|
|
10
|
+
export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases, };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const prefix = "fac";
|
|
2
|
+
const iconName = "bf-spinner";
|
|
3
|
+
const width = 18;
|
|
4
|
+
const height = 18;
|
|
5
|
+
const aliases = [];
|
|
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
|
+
];
|
|
11
|
+
const definition = {
|
|
12
|
+
prefix,
|
|
13
|
+
iconName,
|
|
14
|
+
icon: [
|
|
15
|
+
width,
|
|
16
|
+
height,
|
|
17
|
+
aliases,
|
|
18
|
+
unicode,
|
|
19
|
+
svgPathData
|
|
20
|
+
]
|
|
21
|
+
};
|
|
22
|
+
export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Icon } from "@intility/bifrost-react";
|
|
3
|
+
import { components } from "react-select";
|
|
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
|
+
icon: faXmark
|
|
10
|
+
})
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
export default ClearIndicator;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { components } from "react-select";
|
|
3
|
+
const CustomInput = (props)=>{
|
|
4
|
+
const { required, value } = props.selectProps;
|
|
5
|
+
const updatedProps = {
|
|
6
|
+
...props,
|
|
7
|
+
autoComplete: "noAutocomplete"
|
|
8
|
+
};
|
|
9
|
+
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
10
|
+
children: [
|
|
11
|
+
/*#__PURE__*/ _jsx(components.Input, {
|
|
12
|
+
...updatedProps
|
|
13
|
+
}),
|
|
14
|
+
/*#__PURE__*/ _jsx("input", {
|
|
15
|
+
style: {
|
|
16
|
+
opacity: 0,
|
|
17
|
+
height: 0,
|
|
18
|
+
position: "absolute",
|
|
19
|
+
pointerEvents: "none"
|
|
20
|
+
},
|
|
21
|
+
onChange: (e)=>e.preventDefault(),
|
|
22
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
|
+
value: value?.label ?? "",
|
|
24
|
+
tabIndex: -1,
|
|
25
|
+
autoComplete: "noAutocomplete",
|
|
26
|
+
required: required,
|
|
27
|
+
"data-testid": "bf-select-input"
|
|
28
|
+
})
|
|
29
|
+
]
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
export default CustomInput;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
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
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
export default CustomMenuList;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { components } from "react-select";
|
|
3
|
+
import { faSquare } from "@fortawesome/free-regular-svg-icons/faSquare";
|
|
4
|
+
import { faCheckSquare } from "@fortawesome/free-solid-svg-icons/faCheckSquare";
|
|
5
|
+
import { faCheck } from "@fortawesome/free-solid-svg-icons/faCheck";
|
|
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
|
+
fixedWidth: true,
|
|
15
|
+
className: "bf-select-checkbox"
|
|
16
|
+
})
|
|
17
|
+
}),
|
|
18
|
+
props.children,
|
|
19
|
+
!props.isMulti && props.isSelected && /*#__PURE__*/ _jsx("div", {
|
|
20
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
21
|
+
icon: faCheck,
|
|
22
|
+
fixedWidth: true,
|
|
23
|
+
className: "bf-select-selected-icon"
|
|
24
|
+
})
|
|
25
|
+
})
|
|
26
|
+
]
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
export default CustomOption;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { components } from "react-select";
|
|
3
|
+
import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
|
|
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
|
+
icon: faCaretDown
|
|
10
|
+
})
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
export default DropdownIndicator;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function LoadingIndicator(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Icon } from "@intility/bifrost-react";
|
|
3
|
+
import bfSpinner from "../assets/bfSpinner.js";
|
|
4
|
+
export default function LoadingIndicator() {
|
|
5
|
+
return /*#__PURE__*/ _jsx(Icon, {
|
|
6
|
+
icon: bfSpinner,
|
|
7
|
+
spin: true,
|
|
8
|
+
fixedWidth: true,
|
|
9
|
+
className: "bf-input-loading-icon"
|
|
10
|
+
});
|
|
11
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ClearIndicator } from "./ClearIndicator.internal.js";
|
|
2
|
+
export { default as CustomInput } from "./CustomInput.internal.js";
|
|
3
|
+
export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
|
|
4
|
+
export { default as CustomMenuList } from "./CustomMenuList.internal.js";
|
|
5
|
+
export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
|
|
6
|
+
export { default as CustomOption } from "./CustomOption.internal.js";
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ClearIndicator } from "./ClearIndicator.internal.js";
|
|
2
|
+
export { default as CustomInput } from "./CustomInput.internal.js";
|
|
3
|
+
export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
|
|
4
|
+
export { default as CustomMenuList } from "./CustomMenuList.internal.js";
|
|
5
|
+
export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
|
|
6
|
+
export { default as CustomOption } from "./CustomOption.internal.js";
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@intility/bifrost-react-select",
|
|
3
|
+
"version": "0.0.0-ci-cache-20240515140408",
|
|
4
|
+
"description": "React select component for Intility's design system, Bifrost.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/Select.js",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "run-p build:*",
|
|
9
|
+
"build:module": "swc ./src -d dist",
|
|
10
|
+
"build:types": "tsc",
|
|
11
|
+
"start": "run-p watch:*",
|
|
12
|
+
"watch:module": "npm run build:module -- --watch",
|
|
13
|
+
"watch:types": "npm run build:types -- --watch --preserveWatchOutput",
|
|
14
|
+
"clean": "rimraf dist",
|
|
15
|
+
"lint": "eslint ./src/**/*.{ts,tsx}"
|
|
16
|
+
},
|
|
17
|
+
"exports": {
|
|
18
|
+
"./package.json": "./package.json",
|
|
19
|
+
".": "./dist/Select.js"
|
|
20
|
+
},
|
|
21
|
+
"homepage": "https://bifrost.intility.com",
|
|
22
|
+
"keywords": [
|
|
23
|
+
"react",
|
|
24
|
+
"typescript",
|
|
25
|
+
"intility",
|
|
26
|
+
"design system",
|
|
27
|
+
"bifrost",
|
|
28
|
+
"select"
|
|
29
|
+
],
|
|
30
|
+
"author": "Intility AS",
|
|
31
|
+
"license": "MIT",
|
|
32
|
+
"publishConfig": {
|
|
33
|
+
"registry": "https://registry.npmjs.org/",
|
|
34
|
+
"access": "public"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react-dom": ">=18.0.0",
|
|
38
|
+
"react": ">=18.0.0",
|
|
39
|
+
"@intility/bifrost-react": "0.0.0-ci-cache-20240515140408"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@intility/bifrost-react": "0.0.0-ci-cache-20240515140408"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
46
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
47
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
48
|
+
"classnames": "^2.2.6",
|
|
49
|
+
"react-select": "^5.7.7"
|
|
50
|
+
},
|
|
51
|
+
"files": [
|
|
52
|
+
"CHANGELOG.md",
|
|
53
|
+
"dist/**/*",
|
|
54
|
+
"!dist/**/*.test.*"
|
|
55
|
+
]
|
|
56
|
+
}
|