@onewelcome/react-lib-components 2.1.0 → 2.2.0

package/dist/cjs/DataGrid/DataGridActions/DataGridColumnsToggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../Button/IconButton.cjs.js"),t=require("../../Form/Toggle/Toggle.cjs.js"),l=require("../../Icon/Icon.cjs.js"),o=require("../../Popover/Popover.cjs.js"),r=require("../../Typography/Typography.cjs.js"),n=require("../../src/util/helper.cjs.js"),c=require("./DataGridColumnsToggle.module.cjs.js"),s=require("react-dom");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(e);const i=d.default.forwardRef((({open:u,headers:i,titleLabel:m="Show columns",closeButtonTitle:f="Close show columns dialog",onClose:g,onToggleClicked:p,className:j,domRoot:h=document.body,...v},y)=>{const[T]=e.useState(n.generateID()),q=T+"_header",E=i.map((e=>d.default.createElement(t.Toggle,{key:e.name,name:e.name,checked:!e.hidden,onChange:()=>p(e.name)},e.headline)));return d.default.createElement(o.Popover,{...v,ref:y,className:`${c.default.popover} ${j}`,show:u,role:"dialog","aria-modal":"true","aria-labelledby":q},u&&s.createPortal(d.default.createElement("div",{className:c.default.backdrop,onClick:()=>g()}),h),u&&d.default.createElement(e.Fragment,null,d.default.createElement("div",{className:c.default.header},d.default.createElement(r.Typography,{id:q,className:c.default.title,tag:"span",variant:"h4"},m),d.default.createElement(a.IconButton,{onClick:g,className:`${c.default["close-btn"]}`,title:f},d.default.createElement(l.Icon,{icon:l.Icons.Times}))),d.default.createElement("div",{className:c.default.content},E)))}));exports.DataGridColumnsToggle=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../Button/IconButton.cjs.js"),t=require("../../Form/Toggle/Toggle.cjs.js"),l=require("../../Icon/Icon.cjs.js"),o=require("../../Popover/Popover.cjs.js"),r=require("../../Typography/Typography.cjs.js"),n=require("../../src/util/helper.cjs.js"),c=require("./DataGridColumnsToggle.module.cjs.js"),s=require("react-dom");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(e);const i=d.default.forwardRef((({open:u,headers:i,titleLabel:m="Show columns",closeButtonTitle:f="Close show columns dialog",onClose:g,onToggleClicked:p,className:j,domRoot:h=document.body,...v},y)=>{const[T]=e.useState(n.generateID()),b=T+"_header",q=i.map((e=>d.default.createElement(t.Toggle,{key:e.name,name:e.name,checked:!e.hidden,onChange:()=>p(e.name),label:e.headline})));return d.default.createElement(o.Popover,{...v,ref:y,className:`${c.default.popover} ${j}`,show:u,role:"dialog","aria-modal":"true","aria-labelledby":b},u&&s.createPortal(d.default.createElement("div",{className:c.default.backdrop,onClick:()=>g()}),h),u&&d.default.createElement(e.Fragment,null,d.default.createElement("div",{className:c.default.header},d.default.createElement(r.Typography,{id:b,className:c.default.title,tag:"span",variant:"h4"},m),d.default.createElement(a.IconButton,{onClick:g,className:`${c.default["close-btn"]}`,title:f},d.default.createElement(l.Icon,{icon:l.Icons.Times}))),d.default.createElement("div",{className:c.default.content},q)))}));exports.DataGridColumnsToggle=i;
 //# sourceMappingURL=DataGridColumnsToggle.cjs.js.map

package/dist/cjs/Form/Checkbox/Checkbox.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("../../Icon/Icon.cjs.js"),o=require("./Checkbox.module.cjs.js"),t=require("../../src/hooks/useFormSelector.cjs.js"),a=require("../FormSelectorWrapper/FormSelectorWrapper.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e);const l=e=>{var r;return null===(r=null==e?void 0:e.props)||void 0===r?void 0:r["data-toggle"]},s=c.default.forwardRef((({children:n,name:d,helperText:i,helperProps:p,indeterminate:u,parentErrorId:f,errorMessage:h,disabled:m,label:b,parentHelperId:k,className:x,error:I,checked:y=!1,formSelectorWrapperProps:E,onChange:j,...v},C)=>{const{errorId:g,identifier:w,describedBy:S}=t.useFormSelector({name:d,helperText:i,parentErrorId:f,errorMessage:h,error:I,parentHelperId:k});e.useEffect((()=>{if(!d)throw new Error("Please pass a 'name' prop to your <Checkbox> component.");if("object"==typeof n&&!l(n)&&void 0===u)throw new Error("If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.")}),[]);const q=[o.default.input,m?o.default.disabled:""];return c.default.createElement(a.FormSelectorWrapper,{...E,className:`${o.default["checkbox-wrapper"]} ${x||""}`,containerProps:{className:o.default["checkbox-container"]},helperText:i,helperProps:p,parentErrorId:f,errorId:g,errorMessage:h,error:I,disabled:m,identifier:w,nestedChildren:"object"==typeof n&&!l(n)&&c.default.createElement("ul",{className:o.default["checkbox-list"]},c.default.Children.map(n,(e=>c.default.createElement("li",null,c.default.createElement(s,{...e.props,parentHelperId:k,parentErrorId:f,error:I,disabled:e.props.disabled?e.props.disabled:m},e.props.children)))))},c.default.createElement("input",{...v,ref:C,disabled:m,className:`${o.default["native-input"]} ${I?o.default.error:""}`,checked:y,onChange:e=>{m||null==j||j(e)},"aria-invalid":I,"aria-checked":u?"mixed":y,"aria-describedby":S,id:`${w}-checkbox`,name:d,type:"checkbox"}),c.default.Children.toArray(n).filter(l),u&&c.default.createElement(r.Icon,{className:q.join(" "),icon:r.Icons.MinusSquare}),y&&!u&&c.default.createElement(r.Icon,{className:q.join(" "),icon:r.Icons.CheckmarkSquare}),!y&&!u&&c.default.createElement(r.Icon,{className:q.join(" "),icon:r.Icons.Square}),c.default.createElement("label",{htmlFor:`${w}-checkbox`},(()=>{if(b)return b;if(void 0===n)throw new Error("Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.");if("string"==typeof n||"object"==typeof n&&"span"===n.type)return n;throw new Error("If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.")})()))}));exports.Checkbox=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("../../Icon/Icon.cjs.js"),a=require("./Checkbox.module.cjs.js"),t=require("../../src/hooks/useFormSelector.cjs.js"),o=require("../FormSelectorWrapper/FormSelectorWrapper.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(e);const c=e=>{var r;return!!(null===(r=null==e?void 0:e.props)||void 0===r?void 0:r["data-toggle"])},d=n.default.forwardRef((({children:l,name:s,helperText:i,helperProps:p,indeterminate:u,parentErrorId:f,errorMessage:m,disabled:h,label:b,parentHelperId:I,className:k,error:x,checked:E=!1,formSelectorWrapperProps:j,onChange:v,...y},g)=>{const{errorId:C,identifier:S,describedBy:q}=t.useFormSelector({name:s,helperText:i,parentErrorId:f,errorMessage:m,error:x,parentHelperId:I});e.useEffect((()=>{if(!s)throw new Error("Please pass a 'name' prop to your <Checkbox> component.");if("object"==typeof l&&!c(l)&&void 0===u)throw new Error("If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.")}),[]);const N=[a.default.input,h?a.default.disabled:""];return n.default.createElement(o.FormSelectorWrapper,{...j,className:`${a.default["checkbox-wrapper"]} ${k||""}`,containerProps:{className:a.default["checkbox-container"]},helperText:i,helperProps:p,parentErrorId:f,errorId:C,errorMessage:m,error:x,disabled:h,identifier:S,nestedChildren:"object"==typeof l&&!c(l)&&n.default.createElement("ul",{className:a.default["checkbox-list"]},n.default.Children.map(l,(e=>n.default.createElement("li",null,n.default.createElement(d,{...e.props,parentHelperId:I,parentErrorId:f,error:x,disabled:e.props.disabled?e.props.disabled:h},e.props.children)))))},n.default.createElement("input",{...y,ref:g,disabled:h,className:`${a.default["native-input"]} ${x?a.default.error:""}`,checked:E,onChange:e=>{h||null==v||v(e)},"aria-invalid":x,"aria-checked":u?"mixed":E,"aria-describedby":q,id:`${S}-checkbox`,name:s,type:"checkbox"}),n.default.Children.toArray(l).filter(c),u&&n.default.createElement(r.Icon,{className:N.join(" "),icon:r.Icons.MinusSquare}),E&&!u&&n.default.createElement(r.Icon,{className:N.join(" "),icon:r.Icons.CheckmarkSquare}),!E&&!u&&n.default.createElement(r.Icon,{className:N.join(" "),icon:r.Icons.Square}),n.default.createElement("label",{htmlFor:`${S}-checkbox`},b||("string"==typeof l?l:void 0)))}));exports.Checkbox=d;
 //# sourceMappingURL=Checkbox.cjs.js.map

package/dist/cjs/Form/Toggle/Toggle.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../Checkbox/Checkbox.cjs.js"),l=require("./Toggle.module.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const d=r.default.forwardRef((({children:e,checked:t,disabled:d,helperProps:c,...s},o)=>r.default.createElement("div",{className:l.default["toggle-wrapper"]},r.default.createElement(a.Checkbox,{...s,ref:o,checked:t,className:l.default.checkbox,helperProps:{className:l.default["toggle-helper"],...c},disabled:d,label:e},r.default.createElement("span",{"data-toggle":!0,"aria-hidden":"true",className:`${l.default.toggle} ${t?l.default.checked:""} ${d?l.default.disabled:""} `})))));exports.Toggle=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../Checkbox/Checkbox.cjs.js"),l=require("./Toggle.module.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const d=r.default.forwardRef((({checked:e,disabled:t,helperProps:d,className:c,label:s,...u},o)=>{const f=[l.default["toggle-wrapper"]];return c&&f.push(c),r.default.createElement("div",{className:f.join(" ")},r.default.createElement(a.Checkbox,{...u,ref:o,checked:e,className:l.default.checkbox,helperProps:{className:l.default["toggle-helper"],...d},disabled:t,label:s},r.default.createElement("span",{"data-toggle":"true","aria-hidden":"true",className:`${l.default.toggle} ${e?l.default.checked:""} ${t?l.default.disabled:""} `})))}));exports.Toggle=d;
 //# sourceMappingURL=Toggle.cjs.js.map

package/dist/cjs/components/Form/Checkbox/Checkbox.d.ts

@@ -1,10 +1,9 @@
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ComponentPropsWithRef } from "react";
 import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import { Props as FormSelectorWrapperProps } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-    children: ReactNode;
-    label?: string;
+    label?: string | React.ReactElement;
     indeterminate?: boolean;
     helperProps?: FormHelperTextProps;
     formSelectorWrapperProps?: FormSelectorWrapperProps;

package/dist/cjs/components/Form/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef } from "react";
 import { Props as CheckboxProps } from "../Checkbox/Checkbox";
-export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
-    children: string;
+export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+    label?: string | React.ReactElement;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/DataGrid/DataGridActions/DataGridColumnsToggle.esm.js

@@ -1,2 +1,2 @@
-import e,{useState as o,Fragment as m}from"react";import{IconButton as t}from"../../Button/IconButton.esm.js";import{Toggle as a}from"../../Form/Toggle/Toggle.esm.js";import{Icon as r,Icons as l}from"../../Icon/Icon.esm.js";import{Popover as s}from"../../Popover/Popover.esm.js";import{Typography as n}from"../../Typography/Typography.esm.js";import{generateID as c}from"../../src/util/helper.esm.js";import i from"./DataGridColumnsToggle.module.esm.js";import{createPortal as d}from"react-dom";const p=e.forwardRef((({open:p,headers:g,titleLabel:h="Show columns",closeButtonTitle:f="Close show columns dialog",onClose:u,onToggleClicked:E,className:T,domRoot:j=document.body,...v},y)=>{const[C]=o(c()),N=C+"_header",b=g.map((o=>e.createElement(a,{key:o.name,name:o.name,checked:!o.hidden,onChange:()=>E(o.name)},o.headline)));return e.createElement(s,{...v,ref:y,className:`${i.popover} ${T}`,show:p,role:"dialog","aria-modal":"true","aria-labelledby":N},p&&d(e.createElement("div",{className:i.backdrop,onClick:()=>u()}),j),p&&e.createElement(m,null,e.createElement("div",{className:i.header},e.createElement(n,{id:N,className:i.title,tag:"span",variant:"h4"},h),e.createElement(t,{onClick:u,className:`${i["close-btn"]}`,title:f},e.createElement(r,{icon:l.Times}))),e.createElement("div",{className:i.content},b)))}));export{p as DataGridColumnsToggle};
+import e,{useState as o,Fragment as m}from"react";import{IconButton as t}from"../../Button/IconButton.esm.js";import{Toggle as a}from"../../Form/Toggle/Toggle.esm.js";import{Icon as r,Icons as l}from"../../Icon/Icon.esm.js";import{Popover as s}from"../../Popover/Popover.esm.js";import{Typography as n}from"../../Typography/Typography.esm.js";import{generateID as c}from"../../src/util/helper.esm.js";import i from"./DataGridColumnsToggle.module.esm.js";import{createPortal as d}from"react-dom";const p=e.forwardRef((({open:p,headers:g,titleLabel:h="Show columns",closeButtonTitle:f="Close show columns dialog",onClose:u,onToggleClicked:E,className:T,domRoot:b=document.body,...j},v)=>{const[y]=o(c()),C=y+"_header",N=g.map((o=>e.createElement(a,{key:o.name,name:o.name,checked:!o.hidden,onChange:()=>E(o.name),label:o.headline})));return e.createElement(s,{...j,ref:v,className:`${i.popover} ${T}`,show:p,role:"dialog","aria-modal":"true","aria-labelledby":C},p&&d(e.createElement("div",{className:i.backdrop,onClick:()=>u()}),b),p&&e.createElement(m,null,e.createElement("div",{className:i.header},e.createElement(n,{id:C,className:i.title,tag:"span",variant:"h4"},h),e.createElement(t,{onClick:u,className:`${i["close-btn"]}`,title:f},e.createElement(r,{icon:l.Times}))),e.createElement("div",{className:i.content},N)))}));export{p as DataGridColumnsToggle};
 //# sourceMappingURL=DataGridColumnsToggle.esm.js.map

package/dist/esm/Form/Checkbox/Checkbox.esm.js

@@ -1,2 +1,2 @@
-import e,{useEffect as r}from"react";import{Icon as o,Icons as a}from"../../Icon/Icon.esm.js";import t from"./Checkbox.module.esm.js";import{useFormSelector as n}from"../../src/hooks/useFormSelector.esm.js";import{FormSelectorWrapper as s}from"../FormSelectorWrapper/FormSelectorWrapper.esm.js";const c=e=>{var r;return null===(r=null==e?void 0:e.props)||void 0===r?void 0:r["data-toggle"]},i=e.forwardRef((({children:l,name:p,helperText:d,helperProps:m,indeterminate:h,parentErrorId:b,errorMessage:u,disabled:f,label:k,parentHelperId:x,className:E,error:y,checked:I=!1,formSelectorWrapperProps:g,onChange:C,...j},v)=>{const{errorId:w,identifier:N,describedBy:S}=n({name:p,helperText:d,parentErrorId:b,errorMessage:u,error:y,parentHelperId:x});r((()=>{if(!p)throw new Error("Please pass a 'name' prop to your <Checkbox> component.");if("object"==typeof l&&!c(l)&&void 0===h)throw new Error("If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.")}),[]);const P=[t.input,f?t.disabled:""];return e.createElement(s,{...g,className:`${t["checkbox-wrapper"]} ${E||""}`,containerProps:{className:t["checkbox-container"]},helperText:d,helperProps:m,parentErrorId:b,errorId:w,errorMessage:u,error:y,disabled:f,identifier:N,nestedChildren:"object"==typeof l&&!c(l)&&e.createElement("ul",{className:t["checkbox-list"]},e.Children.map(l,(r=>e.createElement("li",null,e.createElement(i,{...r.props,parentHelperId:x,parentErrorId:b,error:y,disabled:r.props.disabled?r.props.disabled:f},r.props.children)))))},e.createElement("input",{...j,ref:v,disabled:f,className:`${t["native-input"]} ${y?t.error:""}`,checked:I,onChange:e=>{f||null==C||C(e)},"aria-invalid":y,"aria-checked":h?"mixed":I,"aria-describedby":S,id:`${N}-checkbox`,name:p,type:"checkbox"}),e.Children.toArray(l).filter(c),h&&e.createElement(o,{className:P.join(" "),icon:a.MinusSquare}),I&&!h&&e.createElement(o,{className:P.join(" "),icon:a.CheckmarkSquare}),!I&&!h&&e.createElement(o,{className:P.join(" "),icon:a.Square}),e.createElement("label",{htmlFor:`${N}-checkbox`},(()=>{if(k)return k;if(void 0===l)throw new Error("Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.");if("string"==typeof l||"object"==typeof l&&"span"===l.type)return l;throw new Error("If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.")})()))}));export{i as Checkbox};
+import e,{useEffect as r}from"react";import{Icon as o,Icons as a}from"../../Icon/Icon.esm.js";import t from"./Checkbox.module.esm.js";import{useFormSelector as n}from"../../src/hooks/useFormSelector.esm.js";import{FormSelectorWrapper as s}from"../FormSelectorWrapper/FormSelectorWrapper.esm.js";const c=e=>{var r;return!!(null===(r=null==e?void 0:e.props)||void 0===r?void 0:r["data-toggle"])},i=e.forwardRef((({children:l,name:p,helperText:d,helperProps:m,indeterminate:h,parentErrorId:b,errorMessage:u,disabled:f,label:k,parentHelperId:E,className:x,error:I,checked:y=!1,formSelectorWrapperProps:g,onChange:v,...j},C)=>{const{errorId:N,identifier:S,describedBy:w}=n({name:p,helperText:d,parentErrorId:b,errorMessage:u,error:I,parentHelperId:E});r((()=>{if(!p)throw new Error("Please pass a 'name' prop to your <Checkbox> component.");if("object"==typeof l&&!c(l)&&void 0===h)throw new Error("If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.")}),[]);const $=[t.input,f?t.disabled:""];return e.createElement(s,{...g,className:`${t["checkbox-wrapper"]} ${x||""}`,containerProps:{className:t["checkbox-container"]},helperText:d,helperProps:m,parentErrorId:b,errorId:N,errorMessage:u,error:I,disabled:f,identifier:S,nestedChildren:"object"==typeof l&&!c(l)&&e.createElement("ul",{className:t["checkbox-list"]},e.Children.map(l,(r=>e.createElement("li",null,e.createElement(i,{...r.props,parentHelperId:E,parentErrorId:b,error:I,disabled:r.props.disabled?r.props.disabled:f},r.props.children)))))},e.createElement("input",{...j,ref:C,disabled:f,className:`${t["native-input"]} ${I?t.error:""}`,checked:y,onChange:e=>{f||null==v||v(e)},"aria-invalid":I,"aria-checked":h?"mixed":y,"aria-describedby":w,id:`${S}-checkbox`,name:p,type:"checkbox"}),e.Children.toArray(l).filter(c),h&&e.createElement(o,{className:$.join(" "),icon:a.MinusSquare}),y&&!h&&e.createElement(o,{className:$.join(" "),icon:a.CheckmarkSquare}),!y&&!h&&e.createElement(o,{className:$.join(" "),icon:a.Square}),e.createElement("label",{htmlFor:`${S}-checkbox`},k||("string"==typeof l?l:void 0)))}));export{i as Checkbox};
 //# sourceMappingURL=Checkbox.esm.js.map

package/dist/esm/Form/Toggle/Toggle.esm.js

@@ -1,2 +1,2 @@
-import e from"react";import{Checkbox as r}from"../Checkbox/Checkbox.esm.js";import a from"./Toggle.module.esm.js";const l=e.forwardRef((({children:l,checked:c,disabled:o,helperProps:s,...t},d)=>e.createElement("div",{className:a["toggle-wrapper"]},e.createElement(r,{...t,ref:d,checked:c,className:a.checkbox,helperProps:{className:a["toggle-helper"],...s},disabled:o,label:l},e.createElement("span",{"data-toggle":!0,"aria-hidden":"true",className:`${a.toggle} ${c?a.checked:""} ${o?a.disabled:""} `})))));export{l as Toggle};
+import e from"react";import{Checkbox as a}from"../Checkbox/Checkbox.esm.js";import r from"./Toggle.module.esm.js";const l=e.forwardRef((({checked:l,disabled:s,helperProps:o,className:c,label:t,...m},d)=>{const p=[r["toggle-wrapper"]];return c&&p.push(c),e.createElement("div",{className:p.join(" ")},e.createElement(a,{...m,ref:d,checked:l,className:r.checkbox,helperProps:{className:r["toggle-helper"],...o},disabled:s,label:t},e.createElement("span",{"data-toggle":"true","aria-hidden":"true",className:`${r.toggle} ${l?r.checked:""} ${s?r.disabled:""} `})))}));export{l as Toggle};
 //# sourceMappingURL=Toggle.esm.js.map

package/dist/esm/components/Form/Checkbox/Checkbox.d.ts

@@ -1,10 +1,9 @@
-import React, { ComponentPropsWithRef, ReactNode } from "react";
+import React, { ComponentPropsWithRef } from "react";
 import { Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import { Props as FormSelectorWrapperProps } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-    children: ReactNode;
-    label?: string;
+    label?: string | React.ReactElement;
     indeterminate?: boolean;
     helperProps?: FormHelperTextProps;
     formSelectorWrapperProps?: FormSelectorWrapperProps;

package/dist/esm/components/Form/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef } from "react";
 import { Props as CheckboxProps } from "../Checkbox/Checkbox";
-export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
-    children: string;
+export interface Props extends ComponentPropsWithRef<"input">, Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+    label?: string | React.ReactElement;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -58,9 +58,8 @@ const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, P
       name={item.name}
       checked={!item.hidden}
       onChange={() => onToggleClicked(item.name)}
-    >
-      {item.headline}
-    </Toggle>
+      label={item.headline}
+    />
   ));
 
   const handleBackdropClick = () => onClose();

package/src/components/Form/Checkbox/Checkbox.test.tsx

@@ -159,7 +159,7 @@ describe("Checkbox should have proper attributes", () => {
   it("should have a correctly linked label element", () => {
     const { checkbox, container } = createCheckbox(defaultParams => ({
       ...defaultParams,
-      children: "Label"
+      label: "Label"
     }));
 
     const id = checkbox.getAttribute("id");
@@ -168,6 +168,19 @@ describe("Checkbox should have proper attributes", () => {
     expect(label).toBeTruthy();
     expect(label).toHaveTextContent("Label");
   });
+
+  it("should have a react element as label", () => {
+    const { checkbox, container } = createCheckbox(defaultParams => ({
+      ...defaultParams,
+      label: <span>Label element</span>
+    }));
+
+    const id = checkbox.getAttribute("id");
+    const label = container.querySelector(`label[for=${id}]`);
+
+    expect(label).toBeTruthy();
+    expect(label).toHaveTextContent("Label element");
+  });
 });
 
 describe("Checkbox should be interactive", () => {
@@ -207,7 +220,6 @@ describe("missing attributes gets us errors", () => {
       // @ts-ignore: mandatory props (test for non-typescript react projects)
       createCheckbox(defaultParams => ({
         ...defaultParams,
-        name: "testing",
         children: <Checkbox name="test">Test</Checkbox>
       }));
     } catch (e: any) {
@@ -215,7 +227,7 @@ describe("missing attributes gets us errors", () => {
     }
 
     const expected =
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox.";
+      "If you have nested checkboxes you have to manage the indeterminate state by passing a boolean to the `indeterminate` prop.";
 
     expect(actual).toEqual(expected);
 
@@ -264,8 +276,7 @@ describe("missing attributes gets us errors", () => {
       actual = e.message;
     }
 
-    const expected =
-      "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component.";
+    const expected = "Please pass a 'name' prop to your <Checkbox> component.";
 
     expect(actual).toEqual(expected);
 

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -31,11 +31,10 @@ import {
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 
-const isToggle = (children: ReactNode) => (children as ReactElement)?.props?.["data-toggle"];
+const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
 export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
-  children: ReactNode;
-  label?: string;
+  label?: string | React.ReactElement;
   indeterminate?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
@@ -85,24 +84,13 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   }, []);
 
   const determineLabel = () => {
+    // this should be temporary, for backwards compatibility;
+    // once the components implementing checkboxes in microfrontends are updated, only label should be returned
     if (label) {
       return label;
-    } else if (children === undefined) {
-      throw new Error(
-        "Please make sure to pass either a string or more Checkbox components as a child of your Checkbox component."
-      );
-    }
-
-    if (
-      typeof children === "string" ||
-      (typeof children === "object" && (children as ReactElement).type === "span")
-    ) {
+    } else if (typeof children === "string") {
       return children;
     }
-
-    throw new Error(
-      "If you pass Checkboxes as a child component (to create nested checkbox tree) you need to pass a label to the parent checkbox."
-    );
   };
 
   const renderNestedCheckboxes = () => (

package/src/components/Form/Toggle/Toggle.test.tsx

@@ -17,10 +17,12 @@
 import React, { useRef, useEffect } from "react";
 import { Toggle, Props } from "./Toggle";
 import { render } from "@testing-library/react";
+import { Checkbox } from "../Checkbox/Checkbox";
 
 const defaultParams: Props = {
-  children: "label",
-  name: "example toggle"
+  children: "Helper text",
+  name: "example toggle",
+  label: "Label"
 };
 
 const createToggle = (params?: (defaultParams: Props) => Props) => {
@@ -28,11 +30,7 @@ const createToggle = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const queries = render(
-    <Toggle {...parameters} data-testid="toggle">
-      toggle content
-    </Toggle>
-  );
+  const queries = render(<Toggle {...parameters} data-testid="toggle"></Toggle>);
   const toggle = queries.getByTestId("toggle");
 
   return {
@@ -72,7 +70,11 @@ describe("ref should work", () => {
         }
       }, [ref]);
 
-      return <Toggle {...defaultParams} data-ref="testing" ref={ref} />;
+      return (
+        <Toggle {...defaultParams} data-ref="testing" ref={ref}>
+          test label
+        </Toggle>
+      );
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {

package/src/components/Form/Toggle/Toggle.tsx

@@ -20,33 +20,37 @@ import classes from "./Toggle.module.scss";
 
 export interface Props
   extends ComponentPropsWithRef<"input">,
-    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "children" | "label"> {
-  children: string;
+    Omit<CheckboxProps, "indeterminate" | "errorMessage" | "error" | "label"> {
+  label?: string | React.ReactElement;
 }
 
 const ToggleComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
-  { children, checked, disabled, helperProps, ...rest }: Props,
+  { checked, disabled, helperProps, className, label, ...rest }: Props,
   ref
-) => (
-  <div className={classes["toggle-wrapper"]}>
-    <Checkbox
-      {...rest}
-      ref={ref}
-      checked={checked}
-      className={classes["checkbox"]}
-      helperProps={{ className: classes["toggle-helper"], ...helperProps }}
-      disabled={disabled}
-      label={children}
-    >
-      <span
-        data-toggle
-        aria-hidden="true"
-        className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
-          disabled ? classes["disabled"] : ""
-        } `}
-      ></span>
-    </Checkbox>
-  </div>
-);
+) => {
+  const classNames = [classes["toggle-wrapper"]];
+  className && classNames.push(className);
+  return (
+    <div className={classNames.join(" ")}>
+      <Checkbox
+        {...rest}
+        ref={ref}
+        checked={checked}
+        className={classes["checkbox"]}
+        helperProps={{ className: classes["toggle-helper"], ...helperProps }}
+        disabled={disabled}
+        label={label}
+      >
+        <span
+          data-toggle="true"
+          aria-hidden="true"
+          className={`${classes["toggle"]} ${checked ? classes["checked"] : ""} ${
+            disabled ? classes["disabled"] : ""
+          } `}
+        ></span>
+      </Checkbox>
+    </div>
+  );
+};
 
 export const Toggle = React.forwardRef(ToggleComponent);