@conduction/components 2.1.35 → 2.1.37

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 (16) hide show
  1. package/README.md +4 -0
  2. package/lib/components/card/cardHeader/CardHeader.d.ts +4 -0
  3. package/lib/components/card/cardHeader/CardHeader.js +14 -0
  4. package/lib/components/card/cardHeader/CardHeader.module.css +36 -0
  5. package/lib/components/card/cardWrapper/CardWrapper.d.ts +0 -1
  6. package/lib/components/card/index.d.ts +2 -1
  7. package/lib/components/card/index.js +2 -1
  8. package/lib/components/formFields/select/select.js +39 -3
  9. package/lib/components/formFields/select/select.module.css +10 -0
  10. package/package.json +1 -1
  11. package/src/components/card/cardHeader/CardHeader.module.css +36 -0
  12. package/src/components/card/cardHeader/CardHeader.tsx +20 -0
  13. package/src/components/card/cardWrapper/CardWrapper.tsx +0 -1
  14. package/src/components/card/index.tsx +13 -1
  15. package/src/components/formFields/select/select.module.css +10 -0
  16. package/src/components/formFields/select/select.tsx +44 -4
package/README.md CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  - **Version 2.1 (breaking changes from 2.0.x)**
6
6
 
7
+ - 2.1.37: Added more design-tokens to all select options.
8
+ - 2.1.36:
9
+ - Updated CardWrapper.
10
+ - Added CardHeader.
7
11
  - 2.1.35: Added CardWrapper.
8
12
  - 2.1.34: Refactor Den Haag textbox and textarea to Utrecht; add Single Select design tokens.
9
13
  - 2.1.33: Added optional placeholder to all select elements.
package/lib/components/card/cardHeader/CardHeader.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
3
+ export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
4
+ export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
package/lib/components/card/cardHeader/CardHeader.js ADDED
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./CardHeader.module.css";
3
+ export const CardHeader = (props) => {
4
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
5
+ return _jsx("div", { ..._props, children: props.children });
6
+ };
7
+ export const CardHeaderTitle = (props) => {
8
+ const _props = { ...props, className: `${props.className} ${styles.title}` };
9
+ return _jsx("div", { ..._props, children: props.children });
10
+ };
11
+ export const CardHeaderDate = (props) => {
12
+ const _props = { ...props, className: `${props.className} ${styles.date}` };
13
+ return _jsx("div", { ..._props, children: props.children });
14
+ };
package/lib/components/card/cardHeader/CardHeader.module.css ADDED
@@ -0,0 +1,36 @@
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ --conduction-card-header-date-color: #000000;
10
+ --conduction-card-header-date-font-size: 16px;
11
+ --conduction-card-header-date-font-weight: 100;
12
+ --conduction-card-header-date-margin-block-end: 8px;
13
+ }
14
+
15
+ .container {
16
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
17
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
18
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
19
+ }
20
+
21
+ .container:hover {
22
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
23
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
24
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
25
+ }
26
+
27
+ .title > * {
28
+ color: var(--conduction-card-header-title-color) !important;
29
+ }
30
+
31
+ .date {
32
+ color: var(--conduction-card-header-date-color);
33
+ font-size: var(--conduction-card-header-date-font-size);
34
+ font-weight: var(--conduction-card-header-date-font-weight);
35
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
36
+ }
package/lib/components/card/cardWrapper/CardWrapper.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import * as React from "react";
2
- import { HTMLAttributes } from "react";
3
2
  export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
package/lib/components/card/index.d.ts CHANGED
@@ -5,4 +5,5 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
9
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
package/lib/components/card/index.js CHANGED
@@ -5,4 +5,5 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
9
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
package/lib/components/formFields/select/select.js CHANGED
@@ -5,18 +5,54 @@ import ReactSelect from "react-select";
5
5
  import CreatableSelect from "react-select/creatable";
6
6
  import clsx from "clsx";
7
7
  import { ErrorMessage } from "../errorMessage/ErrorMessage";
8
+ const selectStyles = {
9
+ menuPortal: (base) => ({ ...base, zIndex: 100 }),
10
+ option: (base) => ({
11
+ ...base,
12
+ fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
13
+ backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
14
+ "&:hover": {
15
+ backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
16
+ color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
17
+ fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
18
+ },
19
+ }),
20
+ placeholder: (base) => ({
21
+ ...base,
22
+ fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
23
+ color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
24
+ }),
25
+ };
26
+ const selectMultiStyles = {
27
+ menuPortal: (base) => ({ ...base, zIndex: 100 }),
28
+ option: (base) => ({
29
+ ...base,
30
+ fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
31
+ backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
32
+ "&:hover": {
33
+ backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
34
+ color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
35
+ fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
36
+ },
37
+ }),
38
+ placeholder: (base) => ({
39
+ ...base,
40
+ fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
41
+ color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
42
+ }),
43
+ };
8
44
  export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
9
45
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
10
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
46
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
11
47
  } }));
12
48
  };
13
49
  export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
14
50
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
15
- return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
51
+ return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
16
52
  } }));
17
53
  };
18
54
  export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
19
55
  return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
20
- return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
56
+ return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
21
57
  } }));
22
58
  };
package/lib/components/formFields/select/select.module.css CHANGED
@@ -9,6 +9,16 @@
9
9
  --utrecht-textbox-invalid-border-color,
10
10
  var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
11
11
  );
12
+
13
+ --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
14
+ /* --conduction-input-select-list-option-background-color: unset; */
15
+
16
+ /* --conduction-input-select-list-option-hover-background-color: unset; */
17
+ /* --conduction-input-select-list-option-hover-color: unset; */
18
+ /* --conduction-input-select-list-option-font-family: unset; */
19
+
20
+ --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
21
+ --conduction-input-select-placeholder-color: #757575;
12
22
  }
13
23
 
14
24
  .select > div {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.1.35",
3
+ "version": "2.1.37",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/card/cardHeader/CardHeader.module.css ADDED
@@ -0,0 +1,36 @@
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ --conduction-card-header-date-color: #000000;
10
+ --conduction-card-header-date-font-size: 16px;
11
+ --conduction-card-header-date-font-weight: 100;
12
+ --conduction-card-header-date-margin-block-end: 8px;
13
+ }
14
+
15
+ .container {
16
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
17
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
18
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
19
+ }
20
+
21
+ .container:hover {
22
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
23
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
24
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
25
+ }
26
+
27
+ .title > * {
28
+ color: var(--conduction-card-header-title-color) !important;
29
+ }
30
+
31
+ .date {
32
+ color: var(--conduction-card-header-date-color);
33
+ font-size: var(--conduction-card-header-date-font-size);
34
+ font-weight: var(--conduction-card-header-date-font-weight);
35
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
36
+ }
package/src/components/card/cardHeader/CardHeader.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ import * as styles from "./CardHeader.module.css";
3
+
4
+ export const CardHeader = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
5
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
6
+
7
+ return <div {..._props}>{props.children}</div>;
8
+ };
9
+
10
+ export const CardHeaderTitle = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
11
+ const _props = { ...props, className: `${props.className} ${styles.title}` };
12
+
13
+ return <div {..._props}>{props.children}</div>;
14
+ };
15
+
16
+ export const CardHeaderDate = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
17
+ const _props = { ...props, className: `${props.className} ${styles.date}` };
18
+
19
+ return <div {..._props}>{props.children}</div>;
20
+ };
package/src/components/card/cardWrapper/CardWrapper.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as React from "react";
2
2
  import * as styles from "./CardWrapper.module.css";
3
- import { HTMLAttributes } from "react";
4
3
 
5
4
  export const CardWrapper = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
6
5
  const _props = { ...props, className: `${props.className} ${styles.container}` };
package/src/components/card/index.tsx CHANGED
@@ -5,5 +5,17 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
9
 
9
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
10
+ export {
11
+ DownloadCard,
12
+ HorizontalImageCard,
13
+ ImageAndDetailsCard,
14
+ RichContentCard,
15
+ DetailsCard,
16
+ InfoCard,
17
+ CardWrapper,
18
+ CardHeader,
19
+ CardHeaderTitle,
20
+ CardHeaderDate,
21
+ };
package/src/components/formFields/select/select.module.css CHANGED
@@ -9,6 +9,16 @@
9
9
  --utrecht-textbox-invalid-border-color,
10
10
  var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
11
11
  );
12
+
13
+ --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
14
+ /* --conduction-input-select-list-option-background-color: unset; */
15
+
16
+ /* --conduction-input-select-list-option-hover-background-color: unset; */
17
+ /* --conduction-input-select-list-option-hover-color: unset; */
18
+ /* --conduction-input-select-list-option-font-family: unset; */
19
+
20
+ --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
21
+ --conduction-input-select-placeholder-color: #757575;
12
22
  }
13
23
 
14
24
  .select > div {
package/src/components/formFields/select/select.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import * as styles from "./select.module.css";
3
3
  import { Control, Controller, FieldValues } from "react-hook-form";
4
- import ReactSelect, { MenuPlacement } from "react-select";
4
+ import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
5
5
  import CreatableSelect from "react-select/creatable";
6
6
  import { IReactHookFormProps } from "../types";
7
7
  import clsx from "clsx";
@@ -20,6 +20,46 @@ interface ISelectProps {
20
20
  placeholder?: string;
21
21
  }
22
22
 
23
+ const selectStyles: StylesConfig = {
24
+ menuPortal: (base) => ({ ...base, zIndex: 100 }),
25
+ option: (base) => ({
26
+ ...base,
27
+ fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
28
+ backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
29
+
30
+ "&:hover": {
31
+ backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
32
+ color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
33
+ fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
34
+ },
35
+ }),
36
+ placeholder: (base) => ({
37
+ ...base,
38
+ fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
39
+ color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
40
+ }),
41
+ };
42
+
43
+ const selectMultiStyles: StylesConfig = {
44
+ menuPortal: (base) => ({ ...base, zIndex: 100 }),
45
+ option: (base) => ({
46
+ ...base,
47
+ fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
48
+ backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
49
+
50
+ "&:hover": {
51
+ backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
52
+ color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
53
+ fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
54
+ },
55
+ }),
56
+ placeholder: (base) => ({
57
+ ...base,
58
+ fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
59
+ color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
60
+ }),
61
+ };
62
+
23
63
  export const SelectMultiple = ({
24
64
  id,
25
65
  name,
@@ -49,7 +89,7 @@ export const SelectMultiple = ({
49
89
  {...{ options, onChange, errors }}
50
90
  menuPortalTarget={document.body}
51
91
  menuPlacement={menuPlacement}
52
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
92
+ styles={selectStyles}
53
93
  placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
54
94
  />
55
95
  {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
@@ -90,7 +130,7 @@ export const SelectCreate = ({
90
130
  {...{ options, onChange, errors }}
91
131
  menuPortalTarget={document.body}
92
132
  menuPlacement={menuPlacement}
93
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
133
+ styles={selectStyles}
94
134
  />
95
135
  {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
96
136
  </>
@@ -129,7 +169,7 @@ export const SelectSingle = ({
129
169
  {...{ options, onChange, errors, isClearable }}
130
170
  menuPortalTarget={document.body}
131
171
  menuPlacement={menuPlacement}
132
- styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
172
+ styles={selectStyles}
133
173
  placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
134
174
  />
135
175
  {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}