@intility/bifrost-react-select 5.0.1 → 5.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 +18 -0
- package/dist/Select.d.ts +1 -0
- package/dist/Select.js +49 -12
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @intility/bifrost-react-select
|
|
2
2
|
|
|
3
|
+
## 5.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- c7e5540: Bump `react-select` dependency to `5.10.1`
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 30fd9d3: Fix: Avoid wrapping `<Select isMulti>` with a single long-worded option selected. #178
|
|
12
|
+
|
|
13
|
+
## 5.0.2
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 775ce3c: Fix: Include styling for `small` and `state="alert"` for `<Select>` css-in-js.
|
|
18
|
+
(This means we can now use main bifrost-bundle.css in a layer, and selects
|
|
19
|
+
should still be styled correctly) #117
|
|
20
|
+
|
|
3
21
|
## 5.0.1
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/dist/Select.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ export declare const selectStyles: {
|
|
|
17
17
|
menu: (provided: any) => any;
|
|
18
18
|
menuList: (provided: any) => any;
|
|
19
19
|
placeholder: (provided: any) => any;
|
|
20
|
+
valueContainer: (provided: any) => any;
|
|
20
21
|
singleValue: (provided: any, state: any) => any;
|
|
21
22
|
option: (provided: any, state: any) => any;
|
|
22
23
|
multiValue: (provided: any, state: any) => any;
|
package/dist/Select.js
CHANGED
|
@@ -34,13 +34,33 @@ export const selectStyles = {
|
|
|
34
34
|
color: "var(--bfc-base-c)"
|
|
35
35
|
}
|
|
36
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-child &": {
|
|
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
|
+
},
|
|
37
57
|
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
|
|
38
|
-
borderWidth:
|
|
58
|
+
borderWidth: 1,
|
|
39
59
|
borderStyle: "solid",
|
|
40
60
|
borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
|
|
41
61
|
boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
|
|
42
62
|
borderRadius: "var(--bf-radius-s)",
|
|
43
|
-
minHeight:
|
|
63
|
+
minHeight: "var(--rem40)",
|
|
44
64
|
cursor: "text"
|
|
45
65
|
}),
|
|
46
66
|
indicatorSeparator: ()=>({
|
|
@@ -48,6 +68,10 @@ export const selectStyles = {
|
|
|
48
68
|
}),
|
|
49
69
|
indicatorsContainer: (provided)=>({
|
|
50
70
|
...provided,
|
|
71
|
+
".bf-select-small &": {
|
|
72
|
+
paddingBlock: "0.2187rem"
|
|
73
|
+
},
|
|
74
|
+
padding: "0.469rem 0",
|
|
51
75
|
alignItems: "flex-start"
|
|
52
76
|
}),
|
|
53
77
|
clearIndicator: (provided)=>({
|
|
@@ -57,21 +81,26 @@ export const selectStyles = {
|
|
|
57
81
|
},
|
|
58
82
|
color: "var(--bfc-base-c-2)",
|
|
59
83
|
cursor: "pointer",
|
|
60
|
-
padding:
|
|
84
|
+
padding: 4,
|
|
61
85
|
margin: "1px 4px 0px 0px"
|
|
62
86
|
}),
|
|
63
87
|
dropdownIndicator: (provided, state)=>({
|
|
64
88
|
...provided,
|
|
89
|
+
".bf-select-small &": {
|
|
90
|
+
marginRight: 4
|
|
91
|
+
},
|
|
65
92
|
color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
|
|
66
93
|
cursor: "pointer",
|
|
67
|
-
padding:
|
|
94
|
+
padding: 4,
|
|
68
95
|
marginRight: 8
|
|
69
96
|
}),
|
|
70
97
|
input: (provided)=>({
|
|
71
98
|
...provided,
|
|
72
99
|
color: "var(--bfc-base-c)",
|
|
73
100
|
fontFamily: "inherit",
|
|
74
|
-
fontSize: "var(--bf-font-size-l)"
|
|
101
|
+
fontSize: "var(--bf-font-size-l)",
|
|
102
|
+
margin: 0,
|
|
103
|
+
padding: 0
|
|
75
104
|
}),
|
|
76
105
|
menuPortal: (provided)=>({
|
|
77
106
|
...provided,
|
|
@@ -96,6 +125,13 @@ export const selectStyles = {
|
|
|
96
125
|
color: "var(--bfc-base-c-2)",
|
|
97
126
|
fontSize: "var(--bf-font-size-l)"
|
|
98
127
|
}),
|
|
128
|
+
valueContainer: (provided)=>({
|
|
129
|
+
...provided,
|
|
130
|
+
".bf-select-small &": {
|
|
131
|
+
padding: "0 8px"
|
|
132
|
+
},
|
|
133
|
+
padding: "var(--rem2) 12px"
|
|
134
|
+
}),
|
|
99
135
|
singleValue: (provided, state)=>({
|
|
100
136
|
...provided,
|
|
101
137
|
color: state.selectProps.menuIsOpen || state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
|
|
@@ -111,7 +147,7 @@ export const selectStyles = {
|
|
|
111
147
|
color: state.isDisabled ? "var(--bfc-base-c-2)" : "var(--bfc-base-c)",
|
|
112
148
|
"& .bf-select-selected-icon": {
|
|
113
149
|
color: "var(--bfc-base-c)",
|
|
114
|
-
marginLeft:
|
|
150
|
+
marginLeft: 4
|
|
115
151
|
},
|
|
116
152
|
"&:hover": {
|
|
117
153
|
backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base)",
|
|
@@ -127,7 +163,8 @@ export const selectStyles = {
|
|
|
127
163
|
backgroundColor: "var(--bfc-base)",
|
|
128
164
|
borderRadius: "var(--bf-radius-xs)",
|
|
129
165
|
border: state.isDisabled ? "1px solid var(--bfc-base-c-disabled)" : "var(--bf-border)",
|
|
130
|
-
opacity: state.isDisabled ? 0.5 : 1
|
|
166
|
+
opacity: state.isDisabled ? 0.5 : 1,
|
|
167
|
+
maxWidth: "calc(100% - 10px)"
|
|
131
168
|
}),
|
|
132
169
|
multiValueLabel: (provided)=>({
|
|
133
170
|
...provided,
|
|
@@ -140,7 +177,7 @@ export const selectStyles = {
|
|
|
140
177
|
color: "var(--bfc-base-c-2)",
|
|
141
178
|
paddingLeft: 5,
|
|
142
179
|
paddingRight: 5,
|
|
143
|
-
background: state.isFocused
|
|
180
|
+
background: state.isFocused ? "var(--bfc-theme-2)" : undefined,
|
|
144
181
|
"&:hover": {
|
|
145
182
|
color: "var(--bfc-base-c)",
|
|
146
183
|
cursor: "pointer",
|
|
@@ -150,14 +187,14 @@ export const selectStyles = {
|
|
|
150
187
|
background: "var(--bfc-base-3)"
|
|
151
188
|
},
|
|
152
189
|
svg: {
|
|
153
|
-
marginTop:
|
|
190
|
+
marginTop: 1
|
|
154
191
|
}
|
|
155
192
|
}),
|
|
156
193
|
group: (provided)=>({
|
|
157
194
|
...provided,
|
|
158
|
-
padding: "
|
|
195
|
+
padding: "6px 0",
|
|
159
196
|
"&:first-of-type": {
|
|
160
|
-
marginTop:
|
|
197
|
+
marginTop: 4
|
|
161
198
|
}
|
|
162
199
|
}),
|
|
163
200
|
groupHeading: (provided)=>({
|
|
@@ -165,7 +202,7 @@ export const selectStyles = {
|
|
|
165
202
|
textTransform: "capitalize",
|
|
166
203
|
color: "var(--bfc-base-c-2)",
|
|
167
204
|
fontSize: "var(--bf-font-size-s)",
|
|
168
|
-
marginBottom:
|
|
205
|
+
marginBottom: 2
|
|
169
206
|
})
|
|
170
207
|
};
|
|
171
208
|
export const selectComponents = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intility/bifrost-react-select",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"description": "React select component for Intility's design system, Bifrost.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/Select.js",
|
|
@@ -44,14 +44,14 @@
|
|
|
44
44
|
"react-dom": ">=17.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@intility/bifrost-react": "^5.0
|
|
47
|
+
"@intility/bifrost-react": "^5.3.0"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
51
51
|
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
52
52
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
53
53
|
"classnames": "^2.2.6",
|
|
54
|
-
"react-select": "^5.
|
|
54
|
+
"react-select": "^5.10.1"
|
|
55
55
|
},
|
|
56
56
|
"files": [
|
|
57
57
|
"CHANGELOG.md",
|