@wireapp/react-ui-kit 9.17.8 → 9.17.9
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/lib/Form/Select.d.ts
CHANGED
|
@@ -21,7 +21,8 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
|
|
|
21
21
|
required?: boolean;
|
|
22
22
|
isMulti?: IsMulti;
|
|
23
23
|
isSearchable?: boolean;
|
|
24
|
+
overlayMenu?: boolean;
|
|
24
25
|
}
|
|
25
|
-
export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, isSearchable, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const Select: <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, isSearchable, overlayMenu, ...props }: SelectProps<IsMulti, Group>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
27
|
export {};
|
|
27
28
|
//# sourceMappingURL=Select.d.ts.map
|
package/lib/Form/Select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAiBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Form/Select.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAC,SAAS,EAAW,MAAM,gBAAgB,CAAC;AACnD,OAAoB,EAAC,SAAS,EAAe,MAAM,cAAc,CAAC;AAClE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAiBvF,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,UAAU,WAAW,CAAC,OAAO,SAAS,OAAO,EAAE,KAAK,SAAS,SAAS,CAAC,MAAM,CAAC,CAC5E,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC;IACjD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,4OAehB,YAAY,OAAO,EAAE,KAAK,CAAC,qDAoE7B,CAAC"}
|
package/lib/Form/Select.js
CHANGED
|
@@ -23,14 +23,18 @@ const SelectComponents_1 = require("./SelectComponents");
|
|
|
23
23
|
const SelectStyles_1 = require("./SelectStyles");
|
|
24
24
|
const enums_1 = require("../types/enums");
|
|
25
25
|
const Select = (_a) => {
|
|
26
|
-
var { id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, markInvalid = false, required = false, isSearchable = false } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required", "isSearchable"]);
|
|
26
|
+
var { id, label, error, helperText, disabled = false, dataUieName, options, isMulti, wrapperCSS = {}, markInvalid = false, required = false, isSearchable = false, overlayMenu = true } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required", "isSearchable", "overlayMenu"]);
|
|
27
27
|
const theme = (0, react_1.useTheme)();
|
|
28
28
|
const hasError = !!error;
|
|
29
29
|
return ((0, jsx_runtime_1.jsxs)("div", {
|
|
30
30
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
31
31
|
autoFocus: (0, SelectComponents_1.isGroup)(options), css: (theme) => (Object.assign({ marginBottom: markInvalid ? '2px' : '20px', width: '100%', '&:focus-within label': {
|
|
32
32
|
color: theme.general.primaryColor,
|
|
33
|
-
} }, wrapperCSS)), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)(
|
|
33
|
+
} }, wrapperCSS)), "data-uie-name": dataUieName, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, { htmlFor: id, markInvalid: markInvalid, isRequired: required, children: label })), (0, jsx_runtime_1.jsx)(react_select_1.default, Object.assign({ id: id, styles: (0, SelectStyles_1.customStyles)({
|
|
34
|
+
theme: theme,
|
|
35
|
+
markInvalid,
|
|
36
|
+
menuPosition: overlayMenu ? 'absolute' : 'relative',
|
|
37
|
+
}), components: {
|
|
34
38
|
SelectContainer: SelectComponents_1.SelectContainer,
|
|
35
39
|
DropdownIndicator: SelectComponents_1.DropdownIndicator,
|
|
36
40
|
Option: (0, SelectComponents_1.CustomOption)(dataUieName),
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { Theme } from '../Layout';
|
|
2
|
-
|
|
2
|
+
interface CustomStylesParams {
|
|
3
|
+
theme: Theme;
|
|
4
|
+
markInvalid?: boolean;
|
|
5
|
+
menuPosition?: 'absolute' | 'relative';
|
|
6
|
+
}
|
|
7
|
+
export declare const customStyles: ({ theme, markInvalid, menuPosition }: CustomStylesParams) => {
|
|
3
8
|
indicatorSeparator: () => {
|
|
4
9
|
display: string;
|
|
5
10
|
};
|
|
@@ -9,11 +14,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
9
14
|
selectProps: any;
|
|
10
15
|
options: any;
|
|
11
16
|
}) => {
|
|
12
|
-
'& > div': {
|
|
13
|
-
display: string;
|
|
14
|
-
position: string;
|
|
15
|
-
top: string;
|
|
16
|
-
} | {
|
|
17
|
+
'& > div > div[class$="-Control"]': {
|
|
17
18
|
cursor: string;
|
|
18
19
|
'&:focus:visible, active': {
|
|
19
20
|
boxShadow: string;
|
|
@@ -24,14 +25,8 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
24
25
|
};
|
|
25
26
|
backgroundColor: string;
|
|
26
27
|
color: string;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
minHeight: string;
|
|
30
|
-
'&:-moz-focusring': {
|
|
31
|
-
color: string;
|
|
32
|
-
textShadow: string;
|
|
33
|
-
};
|
|
34
|
-
position: string;
|
|
28
|
+
borderRadius: number;
|
|
29
|
+
minHeight: number;
|
|
35
30
|
accentColor?: string[] | import("csstype").Property.AccentColor | readonly import("csstype").Property.AccentColor[];
|
|
36
31
|
alignContent?: string[] | import("csstype").Property.AlignContent | readonly import("csstype").Property.AlignContent[];
|
|
37
32
|
alignItems?: string[] | import("csstype").Property.AlignItems | readonly import("csstype").Property.AlignItems[];
|
|
@@ -175,6 +170,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
175
170
|
gridTemplateColumns?: readonly (string | (string & {}))[] | import("csstype").Property.GridTemplateColumns<string | number> | NonNullable<import("csstype").Property.GridTemplateColumns<string | number>>[];
|
|
176
171
|
gridTemplateRows?: readonly (string | (string & {}))[] | import("csstype").Property.GridTemplateRows<string | number> | NonNullable<import("csstype").Property.GridTemplateRows<string | number>>[];
|
|
177
172
|
hangingPunctuation?: string[] | import("csstype").Property.HangingPunctuation | readonly import("csstype").Property.HangingPunctuation[];
|
|
173
|
+
height?: readonly (string | (string & {}))[] | import("csstype").Property.Height<string | number> | NonNullable<import("csstype").Property.Height<string | number>>[];
|
|
178
174
|
hyphenateCharacter?: string[] | import("csstype").Property.HyphenateCharacter | readonly import("csstype").Property.HyphenateCharacter[];
|
|
179
175
|
hyphens?: import("csstype").Property.Hyphens | NonNullable<import("csstype").Property.Hyphens>[] | readonly import("csstype").Property.Hyphens[];
|
|
180
176
|
imageOrientation?: string[] | import("csstype").Property.ImageOrientation | readonly import("csstype").Property.ImageOrientation[];
|
|
@@ -287,6 +283,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
287
283
|
perspectiveOrigin?: readonly (string | (string & {}))[] | import("csstype").Property.PerspectiveOrigin<string | number> | NonNullable<import("csstype").Property.PerspectiveOrigin<string | number>>[];
|
|
288
284
|
placeContent?: string[] | import("csstype").Property.PlaceContent | readonly import("csstype").Property.PlaceContent[];
|
|
289
285
|
pointerEvents?: import("csstype").Property.PointerEvents | NonNullable<import("csstype").Property.PointerEvents>[] | readonly import("csstype").Property.PointerEvents[];
|
|
286
|
+
position?: import("csstype").Property.Position | NonNullable<import("csstype").Property.Position>[] | readonly import("csstype").Property.Position[];
|
|
290
287
|
printColorAdjust?: import("csstype").Property.PrintColorAdjust | NonNullable<import("csstype").Property.PrintColorAdjust>[] | readonly import("csstype").Property.PrintColorAdjust[];
|
|
291
288
|
quotes?: string[] | import("csstype").Property.Quotes | readonly import("csstype").Property.Quotes[];
|
|
292
289
|
resize?: import("csstype").Property.Resize | NonNullable<import("csstype").Property.Resize>[] | readonly import("csstype").Property.Resize[];
|
|
@@ -398,7 +395,6 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
398
395
|
borderInlineEnd?: readonly (string | (string & {}))[] | import("csstype").Property.BorderInlineEnd<string | number> | NonNullable<import("csstype").Property.BorderInlineEnd<string | number>>[];
|
|
399
396
|
borderInlineStart?: readonly (string | (string & {}))[] | import("csstype").Property.BorderInlineStart<string | number> | NonNullable<import("csstype").Property.BorderInlineStart<string | number>>[];
|
|
400
397
|
borderLeft?: readonly (string | (string & {}))[] | import("csstype").Property.BorderLeft<string | number> | NonNullable<import("csstype").Property.BorderLeft<string | number>>[];
|
|
401
|
-
borderRadius?: readonly (string | (string & {}))[] | import("csstype").Property.BorderRadius<string | number> | NonNullable<import("csstype").Property.BorderRadius<string | number>>[];
|
|
402
398
|
borderRight?: readonly (string | (string & {}))[] | import("csstype").Property.BorderRight<string | number> | NonNullable<import("csstype").Property.BorderRight<string | number>>[];
|
|
403
399
|
borderStyle?: string[] | import("csstype").Property.BorderStyle | readonly import("csstype").Property.BorderStyle[];
|
|
404
400
|
borderTop?: readonly (string | (string & {}))[] | import("csstype").Property.BorderTop<string | number> | NonNullable<import("csstype").Property.BorderTop<string | number>>[];
|
|
@@ -424,6 +420,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
424
420
|
outline?: readonly (string | (string & {}))[] | import("csstype").Property.Outline<string | number> | NonNullable<import("csstype").Property.Outline<string | number>>[];
|
|
425
421
|
overflow?: string[] | import("csstype").Property.Overflow | readonly import("csstype").Property.Overflow[];
|
|
426
422
|
overscrollBehavior?: string[] | import("csstype").Property.OverscrollBehavior | readonly import("csstype").Property.OverscrollBehavior[];
|
|
423
|
+
padding?: readonly (string | (string & {}))[] | import("csstype").Property.Padding<string | number> | NonNullable<import("csstype").Property.Padding<string | number>>[];
|
|
427
424
|
placeItems?: string[] | import("csstype").Property.PlaceItems | readonly import("csstype").Property.PlaceItems[];
|
|
428
425
|
placeSelf?: string[] | import("csstype").Property.PlaceSelf | readonly import("csstype").Property.PlaceSelf[];
|
|
429
426
|
textDecoration?: readonly (string | (string & {}))[] | import("csstype").Property.TextDecoration<string | number> | NonNullable<import("csstype").Property.TextDecoration<string | number>>[];
|
|
@@ -940,6 +937,26 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
940
937
|
":valid"?: import("@emotion/serialize").CSSObject;
|
|
941
938
|
":visited"?: import("@emotion/serialize").CSSObject;
|
|
942
939
|
};
|
|
940
|
+
'& > div': {
|
|
941
|
+
display: string;
|
|
942
|
+
position: string;
|
|
943
|
+
top: string;
|
|
944
|
+
padding?: undefined;
|
|
945
|
+
height?: undefined;
|
|
946
|
+
minHeight?: undefined;
|
|
947
|
+
'&:-moz-focusring'?: undefined;
|
|
948
|
+
} | {
|
|
949
|
+
padding: number;
|
|
950
|
+
height: string;
|
|
951
|
+
minHeight: string;
|
|
952
|
+
'&:-moz-focusring': {
|
|
953
|
+
color: string;
|
|
954
|
+
textShadow: string;
|
|
955
|
+
};
|
|
956
|
+
position: string;
|
|
957
|
+
display?: undefined;
|
|
958
|
+
top?: undefined;
|
|
959
|
+
};
|
|
943
960
|
};
|
|
944
961
|
control: (_provided: any, { options }: {
|
|
945
962
|
options: any;
|
|
@@ -971,4 +988,5 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
|
|
|
971
988
|
valueContainer: (provided: any) => any;
|
|
972
989
|
singleValue: (provided: any, selectProps: any) => any;
|
|
973
990
|
};
|
|
991
|
+
export {};
|
|
974
992
|
//# sourceMappingURL=SelectStyles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectStyles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectStyles.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"SelectStyles.d.ts","sourceRoot":"","sources":["../../src/Form/SelectStyles.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;CACxC;AACD,eAAO,MAAM,YAAY,yCAA6D,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8MtG,CAAC"}
|
package/lib/Form/SelectStyles.js
CHANGED
|
@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
21
21
|
exports.customStyles = void 0;
|
|
22
22
|
const Input_1 = require("./Input");
|
|
23
23
|
const SelectComponents_1 = require("./SelectComponents");
|
|
24
|
-
const customStyles = (theme, markInvalid = false) => ({
|
|
24
|
+
const customStyles = ({ theme, markInvalid = false, menuPosition = 'absolute' }) => ({
|
|
25
25
|
indicatorSeparator: () => ({
|
|
26
26
|
display: 'none',
|
|
27
27
|
}),
|
|
@@ -30,29 +30,36 @@ const customStyles = (theme, markInvalid = false) => ({
|
|
|
30
30
|
const { menuIsOpen } = selectProps;
|
|
31
31
|
const isSelectDisabled = selectProps.isDisabled;
|
|
32
32
|
return {
|
|
33
|
+
'& > div > div[class$="-Control"]': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, { disabled: isSelectDisabled, markInvalid })), { borderRadius: 12, minHeight: 48 }), (isDisabled && {
|
|
34
|
+
backgroundColor: theme.Input.backgroundColorDisabled,
|
|
35
|
+
color: theme.Select.disabledColor,
|
|
36
|
+
cursor: 'default',
|
|
37
|
+
})), (markInvalid && {
|
|
38
|
+
boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
|
|
39
|
+
})), (menuIsOpen && {
|
|
40
|
+
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
|
|
41
|
+
'&:hover': {
|
|
42
|
+
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
|
|
43
|
+
},
|
|
44
|
+
})), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
|
|
45
|
+
boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
|
|
46
|
+
} }),
|
|
33
47
|
'& > div': (0, SelectComponents_1.isGroup)(options)
|
|
34
48
|
? {
|
|
35
49
|
display: 'inline',
|
|
36
50
|
position: 'relative',
|
|
37
51
|
top: '-10px',
|
|
38
52
|
}
|
|
39
|
-
:
|
|
53
|
+
: {
|
|
54
|
+
padding: 0,
|
|
55
|
+
height: 'auto',
|
|
56
|
+
minHeight: '48px',
|
|
57
|
+
'&:-moz-focusring': {
|
|
40
58
|
color: 'transparent',
|
|
41
59
|
textShadow: '0 0 0 #000',
|
|
42
|
-
}, position: 'relative' }), (isDisabled && {
|
|
43
|
-
backgroundColor: theme.Input.backgroundColorDisabled,
|
|
44
|
-
color: theme.Select.disabledColor,
|
|
45
|
-
cursor: 'default',
|
|
46
|
-
})), (markInvalid && {
|
|
47
|
-
boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
|
|
48
|
-
})), (menuIsOpen && {
|
|
49
|
-
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
|
|
50
|
-
'&:hover': {
|
|
51
|
-
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
|
|
52
60
|
},
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
} }),
|
|
61
|
+
position: 'relative',
|
|
62
|
+
},
|
|
56
63
|
};
|
|
57
64
|
},
|
|
58
65
|
control: (_provided, { options }) => (Object.assign({ display: 'flex', alignItems: 'center', appearance: 'none', padding: '0 8px 0 16px', height: 'auto', minHeight: '48px' }, ((0, SelectComponents_1.isGroup)(options) && {
|
|
@@ -67,10 +74,10 @@ const customStyles = (theme, markInvalid = false) => ({
|
|
|
67
74
|
},
|
|
68
75
|
group: provided => (Object.assign(Object.assign({}, provided), { padding: 0, backgroundColor: theme.Input.backgroundColor })),
|
|
69
76
|
groupHeading: provided => (Object.assign(Object.assign({}, provided), { display: 'flex', fontSize: theme.fontSizes.small, lineHeight: '14px', color: theme.Select.disabledColor, padding: '8px 16px 6px 16px' })),
|
|
70
|
-
menu: (provided, { options }) => (Object.assign(Object.assign(Object.assign({}, provided), { boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`, borderRadius: 12, marginBottom: 0, marginTop: 4, overflowY: 'overlay' }), ((0, SelectComponents_1.isGroup)(options) && {
|
|
77
|
+
menu: (provided, { options }) => (Object.assign(Object.assign(Object.assign({}, provided), { boxShadow: `0 0 0 1px ${theme.general.primaryColor}, 0 4px 11px hsl(0deg 0% 0% / 10%)`, borderRadius: 12, marginBottom: 0, marginTop: 4, overflowY: 'overlay', position: menuPosition }), ((0, SelectComponents_1.isGroup)(options) && {
|
|
71
78
|
minWidth: '400px',
|
|
72
79
|
}))),
|
|
73
|
-
menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius:
|
|
80
|
+
menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius: 0, paddingBottom: 0, paddingTop: 0, maxHeight: 400 })),
|
|
74
81
|
option: (provided, { isMulti, isDisabled, isFocused, isSelected, options, data }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: (0, SelectComponents_1.isGroup)(options) ? '6px 16px' : '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: theme.fontSizes.base, fontWeight: isSelected && (0, SelectComponents_1.isGroup)(options) ? 600 : 400, lineHeight: '1.5rem' }), (isSelected &&
|
|
75
82
|
!isDisabled &&
|
|
76
83
|
!isMulti && {
|
|
@@ -123,11 +130,11 @@ const customStyles = (theme, markInvalid = false) => ({
|
|
|
123
130
|
},
|
|
124
131
|
})), (!(0, SelectComponents_1.isGroup)(options) && {
|
|
125
132
|
'&:first-of-type': {
|
|
126
|
-
borderRadius: '
|
|
133
|
+
borderRadius: '0',
|
|
127
134
|
},
|
|
128
135
|
})), ((0, SelectComponents_1.isGroup)(options) && {
|
|
129
136
|
textAlign: 'left',
|
|
130
|
-
})), { '&:last-of-type': Object.assign(Object.assign({}, (!(0, SelectComponents_1.isGroup)(options) && { borderRadius: '0
|
|
137
|
+
})), { '&:last-of-type': Object.assign(Object.assign({}, (!(0, SelectComponents_1.isGroup)(options) && { borderRadius: '0' })), ((0, SelectComponents_1.isGroup)(options) &&
|
|
131
138
|
!options[options.length - 1].options.includes(data) && {
|
|
132
139
|
borderBottom: `1px solid ${theme.Select.borderColor}`,
|
|
133
140
|
})) })),
|
package/package.json
CHANGED