@wireapp/react-ui-kit 9.9.13 → 9.10.1

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 (9) hide show
  1. package/lib/Form/Select.d.ts +4 -3
  2. package/lib/Form/Select.d.ts.map +1 -1
  3. package/lib/Form/SelectComponents.d.ts +2 -1
  4. package/lib/Form/SelectComponents.d.ts.map +1 -1
  5. package/lib/Form/SelectComponents.js +11 -4
  6. package/lib/Form/SelectStyles.d.ts +17 -4
  7. package/lib/Form/SelectStyles.d.ts.map +1 -1
  8. package/lib/Form/SelectStyles.js +46 -26
  9. package/package.json +3 -3
package/lib/Form/Select.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { CSSObject } from '@emotion/react';
3
+ import { GroupBase } from 'react-select';
3
4
  import type { StateManagerProps } from 'react-select/dist/declarations/src/stateManager';
4
5
  export type Option = {
5
6
  value: string | number;
@@ -7,11 +8,11 @@ export type Option = {
7
8
  description?: string;
8
9
  isDisabled?: boolean;
9
10
  };
10
- interface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {
11
+ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>> extends StateManagerProps<Option, IsMulti, Group> {
11
12
  id: string;
12
13
  disabled?: boolean;
13
14
  dataUieName: string;
14
- options: Option[];
15
+ options: Option[] | Group[];
15
16
  wrapperCSS?: CSSObject;
16
17
  label?: string;
17
18
  helperText?: string;
@@ -20,6 +21,6 @@ interface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option,
20
21
  required?: boolean;
21
22
  isMulti?: IsMulti;
22
23
  }
23
- export declare const Select: <IsMulti extends boolean = false>({ id, label, error, helperText, disabled, dataUieName, options, isMulti, wrapperCSS, markInvalid, required, ...props }: SelectProps<IsMulti>) => import("@emotion/react/jsx-runtime").JSX.Element;
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;
24
25
  export {};
25
26
  //# 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;AAEnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,iDAAiD,CAAC;AAgBvF,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,CAAE,SAAQ,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC;IACvF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,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,qOAyElB,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;AAgBvF,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,iSAyElB,CAAC"}
package/lib/Form/SelectComponents.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps } from 'react-select';
1
+ import { ContainerProps, DropdownIndicatorProps, OptionProps, ValueContainerProps, IndicatorsContainerProps, MenuProps, GroupBase, OptionsOrGroups } from 'react-select';
2
2
  import { Option } from './Select';
3
3
  export declare const SelectContainer: (props: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
4
+ export declare const isGroup: (options: OptionsOrGroups<Option, GroupBase<Option>>) => options is GroupBase<Option>[];
4
5
  export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
5
6
  export declare const CustomOption: (dataUieName: string) => (props: OptionProps<Option>) => import("@emotion/react/jsx-runtime").JSX.Element;
6
7
  export declare const Menu: (dataUieName: string) => (props: MenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/lib/Form/SelectComponents.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAMhC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,YAAY,MAAM,CAAC,qDA+C/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,aAAa,SAAS,qDAc7D,CAAC;AAEF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,oBAAoB,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,yBAAyB,MAAM,CAAC,qDAW7F,CAAC"}
1
+ {"version":3,"file":"SelectComponents.d.ts","sourceRoot":"","sources":["../../src/Form/SelectComponents.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAEL,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,mBAAmB,EACnB,wBAAwB,EACxB,SAAS,EACT,SAAS,EACT,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAOhC,eAAO,MAAM,eAAe,UAAW,cAAc,qDAMpD,CAAC;AAEF,eAAO,MAAM,OAAO,YAAa,gBAAgB,MAAM,EAAE,UAAU,MAAM,CAAC,CAAC,mCAE1E,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,qDAS9D,CAAC;AAGF,eAAO,MAAM,YAAY,gBAAiB,MAAM,aAAa,YAAY,MAAM,CAAC,qDAsD/E,CAAC;AAGF,eAAO,MAAM,IAAI,gBAAiB,MAAM,aAAa,SAAS,qDAc7D,CAAC;AAEF,eAAO,MAAM,WAAW,qBAqBvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAA8B,oBAAoB,MAAM,CAAC,qDAInF,CAAC;AAEF,eAAO,MAAM,mBAAmB,+BAA8B,yBAAyB,MAAM,CAAC,qDAW7F,CAAC"}
package/lib/Form/SelectComponents.js CHANGED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.SelectContainer = void 0;
14
+ exports.IndicatorsContainer = exports.ValueContainer = exports.renderValue = exports.Menu = exports.CustomOption = exports.DropdownIndicator = exports.isGroup = exports.SelectContainer = void 0;
15
15
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
16
16
  /*
17
17
  * Wire
@@ -32,6 +32,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
32
32
  *
33
33
  */
34
34
  const react_select_1 = require("react-select");
35
+ const Icon_1 = require("../Icon");
35
36
  const ArrowDown_1 = require("../Icon/ArrowDown");
36
37
  const enums_1 = require("../types/enums");
37
38
  // SelectContainer
@@ -39,6 +40,10 @@ const SelectContainer = (props) => {
39
40
  return ((0, jsx_runtime_1.jsx)(react_select_1.components.SelectContainer, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)("div", { tabIndex: enums_1.TabIndex.FOCUSABLE, children: props.children }) })));
40
41
  };
41
42
  exports.SelectContainer = SelectContainer;
43
+ const isGroup = (options) => {
44
+ return options.length > 0 && 'options' in options[0];
45
+ };
46
+ exports.isGroup = isGroup;
42
47
  const DropdownIndicator = (props) => {
43
48
  const { menuIsOpen } = props.selectProps;
44
49
  return ((0, jsx_runtime_1.jsx)(react_select_1.components.DropdownIndicator, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(ArrowDown_1.ArrowDown, { css: Object.assign({}, (menuIsOpen ? { transform: 'rotateX(180deg)', marginTop: 2 } : { marginTop: 4 })) }) })));
@@ -48,17 +53,19 @@ exports.DropdownIndicator = DropdownIndicator;
48
53
  const CustomOption = (dataUieName) => (props) => {
49
54
  var _a;
50
55
  const { children, data, isMulti, isSelected, options } = props;
51
- return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Object.assign({}, (isMulti && {
56
+ return ((0, jsx_runtime_1.jsx)(react_select_1.components.Option, Object.assign({}, props, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Object.assign({}, ((isMulti || exports.isGroup) && {
52
57
  display: 'grid',
53
58
  gridTemplateAreas: `"checkbox label"
54
59
  ". description"`,
55
60
  gridTemplateColumns: '22px 1fr',
56
- columnGap: '10px',
61
+ columnGap: exports.isGroup ? '5px' : '10px',
57
62
  })) }, (dataUieName && {
58
63
  'data-uie-name': `option-${dataUieName}`,
59
64
  'data-uie-value': (_a = options.find(option => option.label === children)) === null || _a === void 0 ? void 0 : _a.value,
60
65
  'data-uie-selected': isSelected,
61
- }), { children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
66
+ }), { children: [isMulti && ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => null, css: { gridArea: 'checkbox', width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' } })), (0, exports.isGroup)(options) && (
67
+ //includes a checkmark character if it is selected and a group
68
+ (0, jsx_runtime_1.jsx)("div", { css: { width: 22, height: 22, cursor: 'pointer', placeSelf: 'center' }, children: isSelected ? (0, jsx_runtime_1.jsx)(Icon_1.CheckIcon, {}) : null })), (0, jsx_runtime_1.jsx)("div", { css: { gridArea: 'label', overflowWrap: 'break-word', overflow: 'hidden' }, children: children }), data && data.description && ((0, jsx_runtime_1.jsx)("p", { css: (theme) => ({
62
69
  marginBottom: 0,
63
70
  fontSize: theme.fontSizes.medium,
64
71
  color: isSelected ? theme.Select.focusedDescriptionColor : theme.Input.labelColor,
package/lib/Form/SelectStyles.d.ts CHANGED
@@ -4,11 +4,16 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
4
4
  display: string;
5
5
  };
6
6
  indicatorsContainer: (provided: any) => any;
7
- container: (_: any, { isDisabled, selectProps }: {
7
+ container: (_: any, { isDisabled, selectProps, options }: {
8
8
  isDisabled: any;
9
9
  selectProps: any;
10
+ options: any;
10
11
  }) => {
11
12
  '& > div': {
13
+ display: string;
14
+ position: string;
15
+ top: string;
16
+ } | {
12
17
  cursor: string;
13
18
  '&:focus:visible, active': {
14
19
  boxShadow: string;
@@ -936,7 +941,9 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
936
941
  ":visited"?: import("@emotion/serialize").CSSObject;
937
942
  };
938
943
  };
939
- control: () => {
944
+ control: (_provided: any, { options }: {
945
+ options: any;
946
+ }) => {
940
947
  display: string;
941
948
  alignItems: string;
942
949
  appearance: string;
@@ -945,13 +952,19 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
945
952
  minHeight: string;
946
953
  };
947
954
  dropdownIndicator: (provided: any, selectProps: any) => any;
948
- menu: (provided: any) => any;
955
+ group: (provided: any) => any;
956
+ groupHeading: (provided: any) => any;
957
+ menu: (provided: any, { options }: {
958
+ options: any;
959
+ }) => any;
949
960
  menuList: (provided: any) => any;
950
- option: (provided: any, { isMulti, isDisabled, isFocused, isSelected }: {
961
+ option: (provided: any, { isMulti, isDisabled, isFocused, isSelected, options, data }: {
951
962
  isMulti: any;
952
963
  isDisabled: any;
953
964
  isFocused: any;
954
965
  isSelected: any;
966
+ options: any;
967
+ data: any;
955
968
  }) => any;
956
969
  valueContainer: (provided: any) => any;
957
970
  singleValue: (provided: any, selectProps: any) => any;
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":"AAqBA,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,eAAO,MAAM,YAAY,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JvC,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,eAAO,MAAM,YAAY,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiMvC,CAAC"}
package/lib/Form/SelectStyles.js CHANGED
@@ -20,36 +20,43 @@
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
21
  exports.customStyles = void 0;
22
22
  const Input_1 = require("./Input");
23
+ const SelectComponents_1 = require("./SelectComponents");
23
24
  const customStyles = (theme, markInvalid = false) => ({
24
25
  indicatorSeparator: () => ({
25
26
  display: 'none',
26
27
  }),
27
28
  indicatorsContainer: provided => (Object.assign({}, provided)),
28
- container: (_, { isDisabled, selectProps }) => {
29
+ container: (_, { isDisabled, selectProps, options }) => {
29
30
  const { menuIsOpen } = selectProps;
30
31
  const isSelectDisabled = selectProps.isDisabled;
31
32
  return {
32
- '& > div': 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': {
33
- color: 'transparent',
34
- textShadow: '0 0 0 #000',
35
- }, position: 'relative' }), (isDisabled && {
36
- backgroundColor: theme.Input.backgroundColorDisabled,
37
- color: theme.Select.disabledColor,
38
- cursor: 'default',
39
- })), (markInvalid && {
40
- boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
41
- })), (menuIsOpen && {
42
- boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
43
- '&:hover': {
33
+ '& > div': (0, SelectComponents_1.isGroup)(options)
34
+ ? {
35
+ display: 'inline',
36
+ position: 'relative',
37
+ top: '-10px',
38
+ }
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': {
40
+ color: 'transparent',
41
+ 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 && {
44
49
  boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
45
- },
46
- })), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
47
- boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
48
- } }),
50
+ '&:hover': {
51
+ boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
52
+ },
53
+ })), { cursor: !isSelectDisabled && 'pointer', '&:focus:visible, active': {
54
+ boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
55
+ } }),
49
56
  };
50
57
  },
51
- control: () => ({
52
- display: 'flex',
58
+ control: (_provided, { options }) => ({
59
+ display: (0, SelectComponents_1.isGroup)(options) ? 'none' : 'flex',
53
60
  alignItems: 'center',
54
61
  appearance: 'none',
55
62
  padding: '0 8px 0 16px',
@@ -62,9 +69,13 @@ const customStyles = (theme, markInvalid = false) => ({
62
69
  fill: isSelectDisabled && theme.Input.placeholderColor,
63
70
  } });
64
71
  },
65
- menu: provided => (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' })),
72
+ group: provided => (Object.assign(Object.assign({}, provided), { paddingBottom: 0 })),
73
+ groupHeading: provided => (Object.assign(Object.assign({}, provided), { display: 'flex', color: theme.general.color, fontSize: '14px', marginBottom: '16px', paddingLeft: '16px', marginTop: '8px' })),
74
+ 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) && {
75
+ minWidth: '400px',
76
+ }))),
66
77
  menuList: provided => (Object.assign(Object.assign({}, provided), { borderRadius: 12, paddingBottom: 0, paddingTop: 0 })),
67
- option: (provided, { isMulti, isDisabled, isFocused, isSelected }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: theme.fontSizes.base, fontWeight: 400, lineHeight: '1.5rem' }), (isSelected &&
78
+ 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({}, provided), { backgroundColor: theme.Input.backgroundColor, color: theme.general.color, padding: '10px 18px', cursor: isDisabled ? 'not-allowed' : 'pointer', fontSize: theme.fontSizes.base, fontWeight: 400, lineHeight: '1.5rem' }), (isSelected &&
68
79
  !isDisabled &&
69
80
  !isMulti && {
70
81
  background: theme.general.primaryColor,
@@ -106,13 +117,22 @@ const customStyles = (theme, markInvalid = false) => ({
106
117
  } }, (isFocused && {
107
118
  backgroundColor: theme.Select.borderColor,
108
119
  color: theme.Select.disabledColor,
109
- })))), { '&:not(:last-of-type)': {
120
+ })))), ((0, SelectComponents_1.isGroup)(options) && {
121
+ 'div > svg': {
122
+ fill: theme.general.contrastColor,
123
+ },
124
+ })), (!(0, SelectComponents_1.isGroup)(options) && {
125
+ '&:not(:last-of-type)': {
110
126
  borderBottom: `1px solid ${theme.Select.borderColor}`,
111
- }, '&:first-of-type': {
127
+ },
128
+ })), (!(0, SelectComponents_1.isGroup)(options) && {
129
+ '&:first-of-type': {
112
130
  borderRadius: '12px 12px 0 0',
113
- }, '&:last-of-type': {
114
- borderRadius: '0 0 12px 12px',
115
- } })),
131
+ },
132
+ })), { '&:last-of-type': Object.assign(Object.assign({}, (!(0, SelectComponents_1.isGroup)(options) && { borderRadius: '0 0 12px 12px' })), ((0, SelectComponents_1.isGroup)(options) &&
133
+ !options[options.length - 1].options.includes(data) && {
134
+ borderBottom: `1px solid ${theme.Select.borderColor}`,
135
+ })) })),
116
136
  valueContainer: provided => (Object.assign(Object.assign({}, provided), { padding: 0, width: '100%', display: 'grid' })),
117
137
  singleValue: (provided, selectProps) => {
118
138
  const isSelectDisabled = selectProps.isDisabled;
package/package.json CHANGED
@@ -27,7 +27,7 @@
27
27
  "@swc/core": "^1.3.10",
28
28
  "@swc/jest": "^0.2.23",
29
29
  "@testing-library/jest-dom": "5.17.0",
30
- "@testing-library/react": "14.1.0",
30
+ "@testing-library/react": "14.1.2",
31
31
  "@testing-library/user-event": "14.5.1",
32
32
  "@types/jest": "^29.2.0",
33
33
  "@types/node": "^20.1.0",
@@ -70,6 +70,6 @@
70
70
  "test:watch": "jest --watch",
71
71
  "test:update": "jest --updateSnapshot"
72
72
  },
73
- "version": "9.9.13",
74
- "gitHead": "27dbdafb95eecf3c86b398f9144e1021d428622b"
73
+ "version": "9.10.1",
74
+ "gitHead": "7013cb299e2b41827ded167f8996c236719d7b72"
75
75
  }