@intility/bifrost-react-select 4.0.0-alpha.7 → 4.0.0-beta.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 +23 -0
- package/dist/Select.d.ts +5 -5
- package/dist/Select.js +101 -101
- package/dist/assets/bfSpinner.d.ts +2 -2
- package/dist/assets/bfSpinner.js +5 -5
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/overrides/ClearIndicator.internal.js +3 -3
- package/dist/overrides/CustomInput.internal.js +5 -5
- package/dist/overrides/CustomMenuList.internal.js +1 -1
- package/dist/overrides/CustomOption.internal.js +5 -5
- package/dist/overrides/DropdownIndicator.internal.js +3 -3
- package/dist/overrides/LoadingIndicator.internal.js +2 -2
- package/dist/overrides/index.d.ts +6 -6
- package/dist/overrides/index.js +6 -6
- package/package.json +2 -2
- package/src/Select.test.tsx +93 -93
- package/src/Select.tsx +197 -197
- package/src/assets/bfSpinner.ts +15 -15
- package/src/index.ts +2 -2
- package/src/overrides/ClearIndicator.internal.tsx +7 -7
- package/src/overrides/CustomInput.internal.tsx +16 -14
- package/src/overrides/CustomMenuList.internal.tsx +7 -7
- package/src/overrides/CustomOption.internal.tsx +11 -11
- package/src/overrides/DropdownIndicator.internal.tsx +7 -7
- package/src/overrides/LoadingIndicator.internal.tsx +4 -4
- package/src/overrides/index.ts +6 -6
- package/vitest.config.ts +7 -7
- package/src/Select.md +0 -410
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @intility/bifrost-react-select
|
|
2
2
|
|
|
3
|
+
## 4.0.0-beta.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- 5c7ba5a4: split react-select and react-datepicker
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [3785f8d6]
|
|
12
|
+
- Updated dependencies [5c7ba5a4]
|
|
13
|
+
- Updated dependencies [5cb3ebac]
|
|
14
|
+
- Updated dependencies [d8bd3f72]
|
|
15
|
+
- Updated dependencies [df1f169d]
|
|
16
|
+
- Updated dependencies [727894c3]
|
|
17
|
+
- @intility/bifrost-react@4.0.0-beta.0
|
|
18
|
+
|
|
19
|
+
## 4.0.0-alpha.8
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
- @intility/bifrost-react@4.0.0-alpha.8
|
|
25
|
+
|
|
3
26
|
## 4.0.0-alpha.7
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/dist/Select.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { CSSProperties, ReactNode, RefAttributes } from
|
|
2
|
-
import { GroupBase, Props as ReactSelectProps, SelectInstance, components } from
|
|
3
|
-
import { AsyncProps as AsyncSelectProps } from
|
|
4
|
-
import { CreatableProps as CreatableSelectProps } from
|
|
5
|
-
import { AsyncCreatableProps as AsyncCreatableSelectProps } from
|
|
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
6
|
export declare const selectStyles: {
|
|
7
7
|
container: (provided: any) => any;
|
|
8
8
|
control: (provided: any, state: any) => any;
|
package/dist/Select.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
1
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */ "use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef } from
|
|
4
|
-
import ReactSelectDefaultExport from
|
|
5
|
-
import AsyncReactSelect from
|
|
6
|
-
import CreatableReactSelect from
|
|
7
|
-
import AsyncCreatableReactSelect from
|
|
8
|
-
import classNames from
|
|
9
|
-
import { Description, Feedback, Label, useUniqueId } from
|
|
10
|
-
import { DropdownIndicator, ClearIndicator, CustomInput, CustomMenuList, CustomOption, LoadingIndicator } from
|
|
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, Feedback, Label, useUniqueId } from "@intility/bifrost-react";
|
|
10
|
+
import { DropdownIndicator, ClearIndicator, CustomInput, CustomMenuList, CustomOption, LoadingIndicator } from "./overrides";
|
|
11
11
|
const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
|
|
12
12
|
export const selectStyles = {
|
|
13
13
|
container: (provided)=>({
|
|
14
14
|
...provided,
|
|
15
|
-
|
|
16
|
-
marginTop:
|
|
15
|
+
".bf-label-description + &, .bf-label + &": {
|
|
16
|
+
marginTop: "var(--bfs4)"
|
|
17
17
|
}
|
|
18
18
|
}),
|
|
19
19
|
control: (provided, state)=>({
|
|
20
20
|
...provided,
|
|
21
|
-
|
|
22
|
-
borderBottomColor: state.isFocused ?
|
|
21
|
+
"&:hover": {
|
|
22
|
+
borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : "var(--bfc-base-c-inverted-2)",
|
|
23
23
|
// Change color of dropdown icon when hover on Select
|
|
24
|
-
|
|
25
|
-
color:
|
|
24
|
+
".bf-select__dropdown-indicator": {
|
|
25
|
+
color: "var(--bfc-theme-3)"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
|
-
backgroundColor: state.isDisabled ?
|
|
28
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
|
|
29
29
|
border: 0,
|
|
30
|
-
borderBottomWidth:
|
|
31
|
-
borderBottomStyle:
|
|
32
|
-
borderBottomColor: state.isFocused ?
|
|
33
|
-
boxShadow: state.isFocused &&
|
|
34
|
-
borderRadius: state.selectProps.menuIsOpen ?
|
|
35
|
-
minHeight:
|
|
36
|
-
cursor:
|
|
30
|
+
borderBottomWidth: "2px",
|
|
31
|
+
borderBottomStyle: "solid",
|
|
32
|
+
borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
|
|
33
|
+
boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
|
|
34
|
+
borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
|
|
35
|
+
minHeight: "var(--bfs40)",
|
|
36
|
+
cursor: "text"
|
|
37
37
|
}),
|
|
38
38
|
indicatorSeparator: ()=>({
|
|
39
|
-
display:
|
|
39
|
+
display: "none"
|
|
40
40
|
}),
|
|
41
41
|
indicatorsContainer: (provided)=>({
|
|
42
42
|
...provided,
|
|
43
|
-
alignItems:
|
|
44
|
-
padding:
|
|
43
|
+
alignItems: "flex-start",
|
|
44
|
+
padding: "7.5px 0"
|
|
45
45
|
}),
|
|
46
46
|
clearIndicator: (provided)=>({
|
|
47
47
|
...provided,
|
|
48
|
-
|
|
49
|
-
color:
|
|
48
|
+
"&:hover": {
|
|
49
|
+
color: "var(--bfc-base-c-1)"
|
|
50
50
|
},
|
|
51
|
-
color:
|
|
52
|
-
cursor:
|
|
53
|
-
padding:
|
|
54
|
-
margin:
|
|
51
|
+
color: "var(--bfc-base-c-2)",
|
|
52
|
+
cursor: "pointer",
|
|
53
|
+
padding: "var(--bfs4)",
|
|
54
|
+
margin: "1px var(--bfs4) 0px 0px"
|
|
55
55
|
}),
|
|
56
56
|
dropdownIndicator: (provided, state)=>({
|
|
57
57
|
...provided,
|
|
58
|
-
color: state.isDisabled ?
|
|
59
|
-
cursor:
|
|
60
|
-
padding:
|
|
61
|
-
marginRight:
|
|
58
|
+
color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-theme-1)",
|
|
59
|
+
cursor: "pointer",
|
|
60
|
+
padding: "var(--bfs4)",
|
|
61
|
+
marginRight: "var(--bfs8)"
|
|
62
62
|
}),
|
|
63
63
|
input: (provided)=>({
|
|
64
64
|
...provided,
|
|
65
|
-
color:
|
|
66
|
-
fontFamily:
|
|
67
|
-
fontSize:
|
|
65
|
+
color: "var(--bfc-base-c-1)",
|
|
66
|
+
fontFamily: "inherit",
|
|
67
|
+
fontSize: "var(--bf-font-size-l)"
|
|
68
68
|
}),
|
|
69
69
|
menuPortal: (provided)=>({
|
|
70
70
|
...provided,
|
|
@@ -72,98 +72,98 @@ export const selectStyles = {
|
|
|
72
72
|
}),
|
|
73
73
|
menu: (provided)=>({
|
|
74
74
|
...provided,
|
|
75
|
-
backgroundColor:
|
|
76
|
-
boxShadow:
|
|
77
|
-
borderRadius:
|
|
75
|
+
backgroundColor: "var(--bfc-base-3)",
|
|
76
|
+
boxShadow: "none",
|
|
77
|
+
borderRadius: "none",
|
|
78
78
|
marginTop: 0,
|
|
79
79
|
zIndex: 3
|
|
80
80
|
}),
|
|
81
81
|
menuList: (provided)=>({
|
|
82
82
|
...provided,
|
|
83
83
|
padding: 0,
|
|
84
|
-
boxShadow:
|
|
85
|
-
borderRadius:
|
|
84
|
+
boxShadow: "0 0 0 1px var(--bfc-theme-3)",
|
|
85
|
+
borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
|
|
86
86
|
}),
|
|
87
87
|
placeholder: (provided)=>({
|
|
88
88
|
...provided,
|
|
89
|
-
color:
|
|
90
|
-
fontSize:
|
|
89
|
+
color: "var(--bfc-base-c-2)",
|
|
90
|
+
fontSize: "var(--bf-font-size-l)"
|
|
91
91
|
}),
|
|
92
92
|
singleValue: (provided, state)=>({
|
|
93
93
|
...provided,
|
|
94
|
-
color: state.selectProps.menuIsOpen ?
|
|
95
|
-
fontSize:
|
|
94
|
+
color: state.selectProps.menuIsOpen ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
|
|
95
|
+
fontSize: "var(--bf-font-size-l)"
|
|
96
96
|
}),
|
|
97
97
|
option: (provided, state)=>({
|
|
98
98
|
...provided,
|
|
99
|
-
display:
|
|
100
|
-
justifyContent: !state.isMulti ?
|
|
101
|
-
alignItems:
|
|
102
|
-
padding:
|
|
103
|
-
backgroundColor: state.isDisabled ?
|
|
104
|
-
color:
|
|
105
|
-
|
|
106
|
-
marginRight:
|
|
107
|
-
color:
|
|
99
|
+
display: "flex",
|
|
100
|
+
justifyContent: !state.isMulti ? "space-between" : "normal",
|
|
101
|
+
alignItems: "baseline",
|
|
102
|
+
padding: "7px 12px",
|
|
103
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : state.isFocused ? "var(--bfc-base-1)" : "var(--bfc-base-3)",
|
|
104
|
+
color: "var(--bfc-base-c)",
|
|
105
|
+
"& .bf-select-checkbox": {
|
|
106
|
+
marginRight: "var(--bfs8)",
|
|
107
|
+
color: "var(--bfc-theme)"
|
|
108
108
|
},
|
|
109
|
-
|
|
110
|
-
color:
|
|
111
|
-
marginLeft:
|
|
109
|
+
"& .bf-select-selected-icon": {
|
|
110
|
+
color: "var(--bfc-base-c-theme)",
|
|
111
|
+
marginLeft: "var(--bfs4)"
|
|
112
112
|
},
|
|
113
|
-
|
|
114
|
-
backgroundColor: state.isDisabled ?
|
|
115
|
-
cursor: state.isDisabled ?
|
|
113
|
+
"&:hover": {
|
|
114
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-1)",
|
|
115
|
+
cursor: state.isDisabled ? "default" : "pointer"
|
|
116
116
|
},
|
|
117
|
-
fontSize:
|
|
117
|
+
fontSize: "var(--bf-font-size-l)",
|
|
118
118
|
fontWeight: state.isSelected ? 600 : 400,
|
|
119
|
-
wordBreak:
|
|
120
|
-
whiteSpace:
|
|
119
|
+
wordBreak: "break-word",
|
|
120
|
+
whiteSpace: "normal"
|
|
121
121
|
}),
|
|
122
122
|
multiValue: (provided, state)=>({
|
|
123
123
|
...provided,
|
|
124
|
-
backgroundColor: state.isDisabled ?
|
|
125
|
-
borderRadius:
|
|
124
|
+
backgroundColor: state.isDisabled ? "var(--bfc-base-c-inverted-2)" : "var(--bfc-theme-c)",
|
|
125
|
+
borderRadius: "var(--bf-radius-xs)"
|
|
126
126
|
}),
|
|
127
127
|
multiValueLabel: (provided, state)=>({
|
|
128
128
|
...provided,
|
|
129
|
-
color: state.isDisabled ?
|
|
130
|
-
fontSize:
|
|
129
|
+
color: state.isDisabled ? "var(--bfc-base-1)" : "var(--bfc-base-c-theme)",
|
|
130
|
+
fontSize: "var(--bf-font-size-m)"
|
|
131
131
|
}),
|
|
132
132
|
multiValueRemove: (provided, state)=>({
|
|
133
133
|
...provided,
|
|
134
|
-
color: state.isDisabled ?
|
|
135
|
-
borderRadius:
|
|
136
|
-
borderTopRightRadius:
|
|
137
|
-
borderBottomRightRadius:
|
|
138
|
-
paddingLeft:
|
|
139
|
-
paddingRight:
|
|
140
|
-
marginLeft:
|
|
141
|
-
background: state.isFocused &&
|
|
142
|
-
|
|
143
|
-
color:
|
|
144
|
-
cursor:
|
|
145
|
-
background:
|
|
134
|
+
color: state.isDisabled ? "var(--bfc-base-1)" : state.isFocused ? "var(--bfc-theme-c-base-3)" : "var(--bfc-theme-1)",
|
|
135
|
+
borderRadius: "unset",
|
|
136
|
+
borderTopRightRadius: "var(--bf-radius-xs)",
|
|
137
|
+
borderBottomRightRadius: "var(--bf-radius-xs)",
|
|
138
|
+
paddingLeft: "var(--bfs2)",
|
|
139
|
+
paddingRight: "var(--bfs2)",
|
|
140
|
+
marginLeft: "var(--bfs2)",
|
|
141
|
+
background: state.isFocused && "var(--bfc-theme-2)",
|
|
142
|
+
"&:hover": {
|
|
143
|
+
color: "var(--bfc-theme-c-base-3)",
|
|
144
|
+
cursor: "pointer",
|
|
145
|
+
background: "var(--bfc-theme)"
|
|
146
146
|
},
|
|
147
|
-
|
|
148
|
-
background:
|
|
147
|
+
"&:active": {
|
|
148
|
+
background: "var(--bfc-theme-2)"
|
|
149
149
|
},
|
|
150
150
|
svg: {
|
|
151
|
-
marginTop:
|
|
151
|
+
marginTop: "1px"
|
|
152
152
|
}
|
|
153
153
|
}),
|
|
154
154
|
group: (provided)=>({
|
|
155
155
|
...provided,
|
|
156
|
-
padding:
|
|
157
|
-
|
|
158
|
-
marginTop:
|
|
156
|
+
padding: "var(--bfs6) 0",
|
|
157
|
+
"&:first-of-type": {
|
|
158
|
+
marginTop: "var(--bfs4)"
|
|
159
159
|
}
|
|
160
160
|
}),
|
|
161
161
|
groupHeading: (provided)=>({
|
|
162
162
|
...provided,
|
|
163
|
-
textTransform:
|
|
164
|
-
color:
|
|
165
|
-
fontSize:
|
|
166
|
-
marginBottom:
|
|
163
|
+
textTransform: "capitalize",
|
|
164
|
+
color: "var(--bfc-base-c-2)",
|
|
165
|
+
fontSize: "var(--bf-font-size-s)",
|
|
166
|
+
marginBottom: "var(--bfs2)"
|
|
167
167
|
})
|
|
168
168
|
};
|
|
169
169
|
export const selectComponents = {
|
|
@@ -175,8 +175,8 @@ export const selectComponents = {
|
|
|
175
175
|
LoadingIndicator
|
|
176
176
|
};
|
|
177
177
|
const selectStates = [
|
|
178
|
-
|
|
179
|
-
|
|
178
|
+
"default",
|
|
179
|
+
"alert"
|
|
180
180
|
];
|
|
181
181
|
/**
|
|
182
182
|
* Select HOC
|
|
@@ -187,11 +187,11 @@ const selectStates = [
|
|
|
187
187
|
const selectId = useUniqueId(inputId);
|
|
188
188
|
return /*#__PURE__*/ _jsxs("div", {
|
|
189
189
|
className: classNames(className, {
|
|
190
|
-
|
|
190
|
+
"bf-select-container": true
|
|
191
191
|
}, {
|
|
192
|
-
|
|
192
|
+
"bf-select-disabled": isDisabled
|
|
193
193
|
}, {
|
|
194
|
-
|
|
194
|
+
"bf-select-alert": !isDisabled && state === "alert"
|
|
195
195
|
}),
|
|
196
196
|
style: style,
|
|
197
197
|
"data-testid": "bf-select-container",
|
|
@@ -235,12 +235,12 @@ const selectStates = [
|
|
|
235
235
|
/**
|
|
236
236
|
* Select component - dropdown list
|
|
237
237
|
*/ const SelectComponent = SelectHOC(ReactSelect);
|
|
238
|
-
SelectComponent.displayName =
|
|
238
|
+
SelectComponent.displayName = "Select";
|
|
239
239
|
const AsyncSelect = SelectHOC(AsyncReactSelect);
|
|
240
|
-
AsyncSelect.displayName =
|
|
240
|
+
AsyncSelect.displayName = "AsyncSelect";
|
|
241
241
|
const CreatableSelect = SelectHOC(CreatableReactSelect);
|
|
242
|
-
CreatableSelect.displayName =
|
|
242
|
+
CreatableSelect.displayName = "CreatableSelect";
|
|
243
243
|
const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
|
|
244
|
-
AsyncCreatableSelect.displayName =
|
|
244
|
+
AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
|
|
245
245
|
export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
|
|
246
246
|
export default SelectComponent;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconDefinition, IconName, IconPathData, IconPrefix } from
|
|
1
|
+
import { IconDefinition, IconName, IconPathData, IconPrefix } from "@fortawesome/fontawesome-svg-core";
|
|
2
2
|
declare const prefix: IconPrefix;
|
|
3
3
|
declare const iconName: IconName;
|
|
4
4
|
declare const width = 18;
|
|
@@ -7,4 +7,4 @@ declare const aliases: never[];
|
|
|
7
7
|
declare const unicode = "";
|
|
8
8
|
declare const svgPathData: IconPathData;
|
|
9
9
|
declare const definition: IconDefinition;
|
|
10
|
-
export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases };
|
|
10
|
+
export { definition as default, definition as faIndeterminate, definition, prefix, iconName, width, height, aliases as ligatures, unicode, svgPathData, aliases, };
|
package/dist/assets/bfSpinner.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const prefix =
|
|
2
|
-
const iconName =
|
|
1
|
+
const prefix = "fac";
|
|
2
|
+
const iconName = "bf-spinner";
|
|
3
3
|
const width = 18;
|
|
4
4
|
const height = 18;
|
|
5
5
|
const aliases = [];
|
|
6
|
-
const unicode =
|
|
6
|
+
const unicode = "";
|
|
7
7
|
const svgPathData = [
|
|
8
|
-
|
|
9
|
-
|
|
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
10
|
];
|
|
11
11
|
const definition = {
|
|
12
12
|
prefix,
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents } from
|
|
1
|
+
export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents, } from "./Select";
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents } from
|
|
1
|
+
export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents } from "./Select";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Icon } from
|
|
3
|
-
import { components } from
|
|
4
|
-
import { faXmark } from
|
|
2
|
+
import { Icon } from "@intility/bifrost-react";
|
|
3
|
+
import { components } from "react-select";
|
|
4
|
+
import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
|
|
5
5
|
const ClearIndicator = (props)=>{
|
|
6
6
|
return /*#__PURE__*/ _jsx(components.ClearIndicator, {
|
|
7
7
|
...props,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { components } from
|
|
2
|
+
import { components } from "react-select";
|
|
3
3
|
const CustomInput = (props)=>{
|
|
4
4
|
const { required, value } = props.selectProps;
|
|
5
5
|
const updatedProps = {
|
|
6
6
|
...props,
|
|
7
|
-
autoComplete:
|
|
7
|
+
autoComplete: "noAutocomplete"
|
|
8
8
|
};
|
|
9
9
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
10
10
|
children: [
|
|
@@ -15,12 +15,12 @@ const CustomInput = (props)=>{
|
|
|
15
15
|
style: {
|
|
16
16
|
opacity: 0,
|
|
17
17
|
height: 0,
|
|
18
|
-
position:
|
|
19
|
-
pointerEvents:
|
|
18
|
+
position: "absolute",
|
|
19
|
+
pointerEvents: "none"
|
|
20
20
|
},
|
|
21
21
|
onChange: (e)=>e.preventDefault(),
|
|
22
22
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
23
|
-
value: value?.label ??
|
|
23
|
+
value: value?.label ?? "",
|
|
24
24
|
tabIndex: -1,
|
|
25
25
|
autoComplete: "noAutocomplete",
|
|
26
26
|
required: required,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { components } from
|
|
3
|
-
import { faSquare } from
|
|
4
|
-
import { faCheckSquare } from
|
|
5
|
-
import { faCheck } from
|
|
6
|
-
import { Icon } from
|
|
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
7
|
const CustomOption = (props)=>{
|
|
8
8
|
return /*#__PURE__*/ _jsxs(components.Option, {
|
|
9
9
|
...props,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { components } from
|
|
3
|
-
import { faCaretDown } from
|
|
4
|
-
import { Icon } from
|
|
2
|
+
import { components } from "react-select";
|
|
3
|
+
import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
|
|
4
|
+
import { Icon } from "@intility/bifrost-react";
|
|
5
5
|
const DropdownIndicator = (props)=>{
|
|
6
6
|
return /*#__PURE__*/ _jsx(components.DropdownIndicator, {
|
|
7
7
|
...props,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Icon } from
|
|
3
|
-
import bfSpinner from
|
|
2
|
+
import { Icon } from "@intility/bifrost-react";
|
|
3
|
+
import bfSpinner from "../assets/bfSpinner";
|
|
4
4
|
export default function LoadingIndicator() {
|
|
5
5
|
return /*#__PURE__*/ _jsx(Icon, {
|
|
6
6
|
icon: bfSpinner,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as ClearIndicator } from
|
|
2
|
-
export { default as CustomInput } from
|
|
3
|
-
export { default as LoadingIndicator } from
|
|
4
|
-
export { default as CustomMenuList } from
|
|
5
|
-
export { default as DropdownIndicator } from
|
|
6
|
-
export { default as CustomOption } from
|
|
1
|
+
export { default as ClearIndicator } from "./ClearIndicator.internal";
|
|
2
|
+
export { default as CustomInput } from "./CustomInput.internal";
|
|
3
|
+
export { default as LoadingIndicator } from "./LoadingIndicator.internal";
|
|
4
|
+
export { default as CustomMenuList } from "./CustomMenuList.internal";
|
|
5
|
+
export { default as DropdownIndicator } from "./DropdownIndicator.internal";
|
|
6
|
+
export { default as CustomOption } from "./CustomOption.internal";
|
package/dist/overrides/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as ClearIndicator } from
|
|
2
|
-
export { default as CustomInput } from
|
|
3
|
-
export { default as LoadingIndicator } from
|
|
4
|
-
export { default as CustomMenuList } from
|
|
5
|
-
export { default as DropdownIndicator } from
|
|
6
|
-
export { default as CustomOption } from
|
|
1
|
+
export { default as ClearIndicator } from "./ClearIndicator.internal";
|
|
2
|
+
export { default as CustomInput } from "./CustomInput.internal";
|
|
3
|
+
export { default as LoadingIndicator } from "./LoadingIndicator.internal";
|
|
4
|
+
export { default as CustomMenuList } from "./CustomMenuList.internal";
|
|
5
|
+
export { default as DropdownIndicator } from "./DropdownIndicator.internal";
|
|
6
|
+
export { default as CustomOption } from "./CustomOption.internal";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intility/bifrost-react-select",
|
|
3
|
-
"version": "4.0.0-
|
|
3
|
+
"version": "4.0.0-beta.0",
|
|
4
4
|
"description": "React select component for Intility's design system, Bifrost.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
41
41
|
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
42
42
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
43
|
-
"@intility/bifrost-react": "4.0.0-
|
|
43
|
+
"@intility/bifrost-react": "4.0.0-beta.0",
|
|
44
44
|
"classnames": "^2.2.6",
|
|
45
45
|
"react-select": "^5.7.7"
|
|
46
46
|
}
|