forstok-ui-lib 8.3.0 → 8.3.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.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +25 -25
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/select/all.tsx +11 -6
- package/src/components/select/asyncPaginate.tsx +10 -5
- package/src/components/select/index.tsx +12 -9
package/package.json
CHANGED
|
@@ -151,21 +151,26 @@ const SelectAllComponent = (props: TSelect) => {
|
|
|
151
151
|
letterSpacing: 'normal',
|
|
152
152
|
lineHeight: 'normal',
|
|
153
153
|
} as CSSObjectWithLabel),
|
|
154
|
-
option: (provided: CSSObject, state: { isSelected: any }) => ({
|
|
154
|
+
option: (provided: CSSObject, state: { isSelected: any, isDisabled: any, isFocused: any }) => ({
|
|
155
155
|
...provided,
|
|
156
156
|
width: '100%',
|
|
157
157
|
margin: '0 0 4px',
|
|
158
|
-
color: 'var(--pri-clr)',
|
|
159
158
|
borderRadius: 'var(--nav-rd)',
|
|
160
|
-
backgroundColor: state.isSelected ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
161
159
|
cursor: 'pointer',
|
|
162
160
|
overflowWrap: 'break-word',
|
|
163
161
|
wordBreak: 'break-all',
|
|
164
|
-
fontWeight: state.isSelected ? 500 : 'normal',
|
|
165
162
|
position: 'relative',
|
|
166
|
-
'
|
|
167
|
-
|
|
163
|
+
backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
164
|
+
'&:last-child': {
|
|
165
|
+
marginBottom: 0,
|
|
168
166
|
},
|
|
167
|
+
...(!state.isDisabled && {
|
|
168
|
+
color: 'var(--pri-clr)',
|
|
169
|
+
fontWeight: state.isSelected ? 500 : 'normal',
|
|
170
|
+
'&:hover': {
|
|
171
|
+
backgroundColor: 'var(--nav-clr-bg__hvr)',
|
|
172
|
+
},
|
|
173
|
+
}),
|
|
169
174
|
...(state.isSelected && {
|
|
170
175
|
paddingRight: '1.75em',
|
|
171
176
|
'&:after': {
|
|
@@ -184,17 +184,22 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
|
|
|
184
184
|
...provided,
|
|
185
185
|
width: '100%',
|
|
186
186
|
margin: '0 0 4px',
|
|
187
|
-
color: 'var(--pri-clr)',
|
|
188
187
|
borderRadius: 'var(--nav-rd)',
|
|
189
|
-
backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
190
188
|
cursor: 'pointer',
|
|
191
189
|
overflowWrap: 'break-word',
|
|
192
190
|
wordBreak: 'break-all',
|
|
193
|
-
fontWeight: state.isSelected ? 500 : 'normal',
|
|
194
191
|
position: 'relative',
|
|
195
|
-
'
|
|
196
|
-
|
|
192
|
+
backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
193
|
+
'&:last-child': {
|
|
194
|
+
marginBottom: 0,
|
|
197
195
|
},
|
|
196
|
+
...(!state.isDisabled && {
|
|
197
|
+
color: 'var(--pri-clr)',
|
|
198
|
+
fontWeight: state.isSelected ? 500 : 'normal',
|
|
199
|
+
'&:hover': {
|
|
200
|
+
backgroundColor: 'var(--nav-clr-bg__hvr)',
|
|
201
|
+
},
|
|
202
|
+
}),
|
|
198
203
|
...(state.isSelected && {
|
|
199
204
|
paddingRight: '1.75em',
|
|
200
205
|
'&:after': {
|
|
@@ -248,20 +248,23 @@ const SelectComponent = ({ type, isError=false, mode, customOption, customLabel,
|
|
|
248
248
|
} as CSSObjectWithLabel),
|
|
249
249
|
option: (provided: CSSObject, state: OptionProps<TOption, typeof isMulti>) => ({
|
|
250
250
|
...provided,
|
|
251
|
+
width: '100%',
|
|
252
|
+
margin: '0 0 4px',
|
|
253
|
+
borderRadius: 'var(--nav-rd)',
|
|
254
|
+
cursor: 'pointer',
|
|
255
|
+
overflowWrap: 'break-word',
|
|
256
|
+
wordBreak: 'break-all',
|
|
257
|
+
position: 'relative',
|
|
258
|
+
backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
259
|
+
'&:last-child': {
|
|
260
|
+
marginBottom: 0,
|
|
261
|
+
},
|
|
251
262
|
...(!state.isDisabled && {
|
|
252
|
-
width: '100%',
|
|
253
|
-
margin: '0 0 4px',
|
|
254
263
|
color: 'var(--pri-clr)',
|
|
255
|
-
borderRadius: 'var(--nav-rd)',
|
|
256
|
-
backgroundColor: state.isSelected || state.isFocused ? 'var(--nav-clr-bg__hvr)' : 'transparent',
|
|
257
|
-
cursor: 'pointer',
|
|
258
|
-
overflowWrap: 'break-word',
|
|
259
|
-
wordBreak: 'break-all',
|
|
260
264
|
fontWeight: state.isSelected ? 500 : 'normal',
|
|
261
|
-
position: 'relative',
|
|
262
265
|
'&:hover': {
|
|
263
266
|
backgroundColor: 'var(--nav-clr-bg__hvr)',
|
|
264
|
-
}
|
|
267
|
+
},
|
|
265
268
|
}),
|
|
266
269
|
...(state.isSelected && {
|
|
267
270
|
paddingRight: '1.75em',
|