@conduction/components 2.0.29 → 2.0.30

package/README.md

@@ -4,6 +4,10 @@
 
 - **Version 2**
 
+  - 2.0.30:
+    - Selects now have an z-index.
+    - Checkboxes now automatically have an id wich is a camelCase of "checkbox" plus the label, "checkboxLabel".
+    - Removed styles warning on tag.
   - 2.0.29:
     - Added remove option to tags.
     - SelectSingle now removes selected option if filter deselect it.

package/lib/components/formFields/checkbox.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormControlLabel } from "@gemeente-denhaag/components-react";
-export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), ...{ label } }));
+export const InputCheckbox = ({ name, validation, register, label, defaultChecked, disabled, }) => (_jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", id: `checkbox${name}`, ...{ defaultChecked, disabled }, ...register(name, { ...validation }) }), ...{ label } }));

package/lib/components/formFields/select/select.js

@@ -6,16 +6,16 @@ import CreatableSelect from "react-select/creatable";
 import clsx from "clsx";
 export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
+            return (_jsx(ReactSelect, { className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
         } }));
 };
 export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(CreatableSelect, { placeholder: "Select existing or create new entries", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
+            return (_jsx(CreatableSelect, { placeholder: "Select existing or create new entries", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
         } }));
 };
 export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
     return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { value: value || "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable, defaultValue } }));
+            return (_jsx(ReactSelect, { value: value || "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable, defaultValue }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
         } }));
 };

package/lib/components/tag/Tag.js

@@ -3,4 +3,4 @@ import * as styles from "./Tag.module.css";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
-export const Tag = ({ label, icon, onClick, remove, layoutClassName }) => (_jsxs("div", { className: remove && styles.tagContainer, children: [_jsxs("div", { className: clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable, remove && styles.remove), ...{ onClick }, children: [icon && _jsx("span", { children: icon }), _jsx("span", { children: label })] }), remove && (_jsx("div", { className: clsx(styles.tag, styles.removeTag), onClick: remove, children: _jsx("span", { className: styles.removeIcon, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }) }))] }));
+export const Tag = ({ label, icon, onClick, remove, layoutClassName }) => (_jsxs("div", { className: remove && styles.tagContainer, children: [_jsxs("div", { className: clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable, remove && styles.remove), ...{ onClick }, children: [icon && _jsx("span", { children: icon }), _jsx("span", { children: label })] }), remove && (_jsx("div", { className: clsx(styles.tag, styles.removeTag), onClick: remove, children: _jsx("span", { children: _jsx(FontAwesomeIcon, { icon: faXmark }) }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/formFields/checkbox.tsx

@@ -17,7 +17,14 @@ export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
   disabled,
 }) => (
   <FormControlLabel
-    input={<input type="checkbox" {...{ defaultChecked, disabled }} {...register(name, { ...validation })} />}
+    input={
+      <input
+        type="checkbox"
+        id={`checkbox${name}`}
+        {...{ defaultChecked, disabled }}
+        {...register(name, { ...validation })}
+      />
+    }
     {...{ label }}
   />
 );

package/src/components/formFields/select/select.tsx

@@ -35,6 +35,8 @@ export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
             isMulti
             isDisabled={disabled}
             {...{ options, value, onChange, errors, defaultValue }}
+            menuPortalTarget={document.body}
+            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
           />
         );
       }}
@@ -63,6 +65,8 @@ export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
             isMulti
             isDisabled={disabled}
             {...{ options, value, onChange, errors, defaultValue }}
+            menuPortalTarget={document.body}
+            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
           />
         );
       }}
@@ -91,6 +95,8 @@ export const SelectSingle: React.FC<ISelectProps & IReactHookFormProps> = ({
             className={clsx(styles.select, errors[name] && styles.error)}
             isDisabled={disabled}
             {...{ options, onChange, errors, isClearable, defaultValue }}
+            menuPortalTarget={document.body}
+            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
           />
         );
       }}

package/src/components/tag/Tag.tsx

@@ -28,7 +28,7 @@ export const Tag: React.FC<TagProps> = ({ label, icon, onClick, remove, layoutCl
     </div>
     {remove && (
       <div className={clsx(styles.tag, styles.removeTag)} onClick={remove}>
-        <span className={styles.removeIcon}>
+        <span>
           <FontAwesomeIcon icon={faXmark} />
         </span>
       </div>