forstok-ui-lib 8.5.29 → 8.6.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "forstok-ui-lib",
3
- "version": "8.5.29",
3
+ "version": "8.6.0",
4
4
  "description": "Forstok UI Components Library",
5
5
  "path": "dist",
6
6
  "main": "dist/index.js",
@@ -128,6 +128,9 @@ const SelectAllComponent = (props: TSelect) => {
128
128
  borderRadius: ".5rem",
129
129
  cursor: "pointer",
130
130
  minHeight: mode === "store" ? "30px" : "38px",
131
+ height: "100%",
132
+ maxHeight: "300px",
133
+ overflow: "hidden",
131
134
  borderWidth: isError ? "1px" : "0",
132
135
  boxShadow: state.isFocused
133
136
  ? "-.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset"
@@ -196,7 +199,9 @@ const SelectAllComponent = (props: TSelect) => {
196
199
  valueContainer: (provided: CSSObject) =>
197
200
  ({
198
201
  ...provided,
199
- height: "30px",
202
+ height: "100%",
203
+ maxHeight: "300px",
204
+ minHeight: "30px",
200
205
  overflow: "auto",
201
206
  paddingTop: "0",
202
207
  paddingBottom: "0",
@@ -148,7 +148,8 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
148
148
  width: "100%",
149
149
  borderRadius: ".5rem",
150
150
  minHeight: "1px",
151
- height: isMulti ? "auto" : mode === "small" ? "30px" : "32px",
151
+ height: isMulti ? "100%" : mode === "small" ? "30px" : "32px",
152
+ maxHeight: "300px",
152
153
  cursor: "pointer",
153
154
  borderWidth: isError ? "1px" : "0",
154
155
  boxShadow: state.isFocused
@@ -227,13 +228,18 @@ const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
227
228
  ({
228
229
  ...provided,
229
230
  minHeight: "1px",
230
- height:
231
- mode === "multi-select" ? "70px" : mode === "small" ? "30px" : "32px",
231
+ height: isMulti
232
+ ? "100%"
233
+ : mode === "multi-select"
234
+ ? "70px"
235
+ : mode === "small"
236
+ ? "30px"
237
+ : "32px",
232
238
  paddingTop: isMulti ? "4px" : "0",
233
239
  paddingBottom: isMulti ? "4px" : "0",
234
240
  paddingLeft: iconLeft ? "28px" : "8px",
235
241
  paddingRight: "2px",
236
- maxHeight: isMulti ? "60px" : "unset",
242
+ maxHeight: isMulti ? "300px" : "unset",
237
243
  overflow: isMulti ? "auto" : "initial",
238
244
  alignContent: isMulti ? "flex-start" : "initial",
239
245
  }) as CSSObjectWithLabel,
@@ -303,12 +303,18 @@ const SelectComponent = ({
303
303
  borderRadius: ".5rem",
304
304
  minHeight:
305
305
  mode === "multi" ? "50px" : mode === "picklist" ? "30px" : "1px",
306
- height:
307
- mode === "multi"
306
+ height: isMulti
307
+ ? "100%"
308
+ : mode === "multi"
308
309
  ? "auto"
309
310
  : (height ?? (mode === "orders" ? "90px" : "30px")),
310
- maxHeight:
311
- mode === "multi" ? "120px" : mode === "picklist" ? "46px" : "none",
311
+ maxHeight: isMulti
312
+ ? "300px"
313
+ : mode === "multi"
314
+ ? "120px"
315
+ : mode === "picklist"
316
+ ? "46px"
317
+ : "none",
312
318
  cursor: "pointer",
313
319
  borderWidth: isError ? "1px" : "0",
314
320
  boxShadow: state.isFocused
@@ -323,8 +329,9 @@ const SelectComponent = ({
323
329
  ? "#ffffff"
324
330
  : " var(--ck-clr-ln)",
325
331
  background: state.isFocused ? "rgba(247, 247, 247, 1)" : "#ffffff",
326
- overflow:
327
- mode === "multi"
332
+ overflow: isMulti
333
+ ? "hidden"
334
+ : mode === "multi"
328
335
  ? "auto"
329
336
  : mode === "picklist"
330
337
  ? "hidden"
@@ -391,12 +398,20 @@ const SelectComponent = ({
391
398
  valueContainer: (provided: CSSObject) =>
392
399
  ({
393
400
  ...provided,
394
- height: mode === "multi" ? "auto" : "30px",
395
- maxHeight:
396
- mode === "multi" ? "114px" : mode === "picklist" ? "46px" : "none",
401
+ height: isMulti ? "100%" : mode === "multi" ? "auto" : "30px",
402
+ maxHeight: isMulti
403
+ ? "300px"
404
+ : mode === "multi"
405
+ ? "114px"
406
+ : mode === "picklist"
407
+ ? "46px"
408
+ : "none",
397
409
  minHeight:
398
410
  mode === "multi" ? "44px" : mode === "picklist" ? "30px" : "1px",
399
- overflow: mode === "multi" || mode === "picklist" ? "auto" : "initial",
411
+ overflow:
412
+ isMulti || mode === "multi" || mode === "picklist"
413
+ ? "auto"
414
+ : "initial",
400
415
  paddingTop: "0",
401
416
  paddingBottom: "0",
402
417
  paddingRight: "2px",