@wireapp/react-ui-kit 9.17.7 → 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.
Files changed (7) hide show
  1. package/lib/Form/Select.d.ts +3 -1
  2. package/lib/Form/Select.d.ts.map +1 -1
  3. package/lib/Form/Select.js +7 -3
  4. package/lib/Form/SelectStyles.d.ts +33 -15
  5. package/lib/Form/SelectStyles.d.ts.map +1 -1
  6. package/lib/Form/SelectStyles.js +26 -19
  7. package/package.json +3 -3
package/lib/Form/Select.d.ts CHANGED
@@ -20,7 +20,9 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
20
20
  markInvalid?: boolean;
21
21
  required?: boolean;
22
22
  isMulti?: IsMulti;
23
+ isSearchable?: boolean;
24
+ overlayMenu?: boolean;
23
25
  }
24
- 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, ...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;
25
27
  export {};
26
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;CACnB;AAED,eAAO,MAAM,MAAM,iNAahB,YAAY,OAAO,EAAE,KAAK,CAAC,qDA8D7B,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,21 +23,25 @@ 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 } = _a, props = __rest(_a, ["id", "label", "error", "helperText", "disabled", "dataUieName", "options", "isMulti", "wrapperCSS", "markInvalid", "required"]);
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)(theme, markInvalid), components: {
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),
37
41
  Menu: (0, SelectComponents_1.Menu)(dataUieName),
38
42
  ValueContainer: SelectComponents_1.ValueContainer,
39
43
  IndicatorsContainer: SelectComponents_1.IndicatorsContainer,
40
- }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: false, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
44
+ }, tabIndex: enums_1.TabIndex.UNFOCUSABLE, isDisabled: disabled, hideSelectedOptions: false, isSearchable: isSearchable, isClearable: false, closeMenuOnSelect: !isMulti, isMulti: isMulti, options: options }, props)), !hasError && helperText && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
41
45
  fontSize: theme.fontSizes.small,
42
46
  fontWeight: 400,
43
47
  color: theme.Input.labelColor,
package/lib/Form/SelectStyles.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import { Theme } from '../Layout';
2
- export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
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
- padding: number;
28
- height: string;
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
package/lib/Form/SelectStyles.d.ts.map CHANGED
@@ -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,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyMvC,CAAC"}
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
- : Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Input_1.inputStyle)(theme, { disabled: isSelectDisabled, markInvalid })), { padding: 0, height: 'auto', minHeight: '48px', '&:-moz-focusring': {
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
- })), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
54
- boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
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: 12, paddingBottom: 0, paddingTop: 0, maxHeight: 'fit-content' })),
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: '12px 12px 0 0',
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 0 12px 12px' })), ((0, SelectComponents_1.isGroup)(options) &&
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
@@ -26,7 +26,7 @@
26
26
  "@hot-loader/react-dom": "17.0.2",
27
27
  "@swc/core": "^1.3.10",
28
28
  "@swc/jest": "^0.2.23",
29
- "@testing-library/jest-dom": "6.4.5",
29
+ "@testing-library/jest-dom": "6.4.6",
30
30
  "@testing-library/react": "16.0.0",
31
31
  "@testing-library/user-event": "14.5.2",
32
32
  "@types/jest": "^29.2.0",
@@ -70,6 +70,6 @@
70
70
  "test:watch": "jest --watch",
71
71
  "test:update": "jest --updateSnapshot"
72
72
  },
73
- "version": "9.17.7",
74
- "gitHead": "c7cca68fa7647ca639295a332a40fa9bfe027832"
73
+ "version": "9.17.9",
74
+ "gitHead": "0337d8fc17a5a20352faaa2d3dccfa2fc9c8e627"
75
75
  }