@onewelcome/react-lib-components 3.0.1 → 4.0.0

package/dist/cjs/Notifications/BaseModal/BaseModal.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("react-dom"),l=require("../../src/hooks/useGetDomRoot.cjs.js"),d=require("./BaseModal.module.cjs.js"),o=require("./BaseModalContext.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const n="overflow",s=a=>{e.useEffect((()=>{a?document.body.style[n]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(n)}),[a])},i=r.default.forwardRef((({id:t,children:n,open:i,onClose:c,className:u="",containerProps:f,backdropProps:m,labelledby:v,describedby:b,disableEscapeKeyDown:y=!1,disableBackdrop:p=!1,forceContainerOpen:h=!1,zIndex:x,domRoot:E,...$},j)=>{var N,I,g;s(i);const k=e.useRef(null),{root:q}=l.useGetDomRoot(E,k);e.useEffect((()=>{var e;i&&(null===(e=k.current)||void 0===e||e.focus())}),[i]);return r.default.createElement("div",{ref:k},a.createPortal(r.default.createElement("div",{...$,ref:j,id:t,className:`${d.default.modal} ${i?d.default.visible:""} ${u}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=v?v:o.labelId(t),"aria-describedby":null!=b?b:o.descriptionId(t),"aria-hidden":!i,tabIndex:-1,"data-hidden":!i,onKeyDown:e=>{y||"Escape"!==e.key||(e.stopPropagation(),null==c||c())},style:{zIndex:x}},r.default.createElement("div",{...m,className:`${d.default.backdrop} ${null!==(N=null==m?void 0:m.className)&&void 0!==N?N:""}`,onClick:()=>!p&&c&&c()}),h?r.default.createElement("div",{...f,"aria-hidden":!i,"data-element":"dialog",hidden:!i,style:{zIndex:x&&x+1},className:`${d.default.container} ${null!==(I=null==f?void 0:f.className)&&void 0!==I?I:""}`},n):i&&r.default.createElement("div",{...f,"data-element":"dialog",style:{zIndex:x&&x+1},className:`${d.default.container} ${null!==(g=null==f?void 0:f.className)&&void 0!==g?g:""}`},n)),q))}));exports.BaseModal=i,exports.useSetBodyScroll=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("react-dom"),a=require("../../src/hooks/useGetDomRoot.cjs.js"),d=require("./BaseModal.module.cjs.js"),o=require("./BaseModalContext.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);const n="overflow",s=l=>{e.useEffect((()=>{l?document.body.style[n]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(n)}),[l])},i=r.default.forwardRef((({id:t,children:n,open:i,onClose:u,className:c="",containerProps:f,backdropProps:m,labelledby:v,describedby:p,disableEscapeKeyDown:b=!1,disableBackdrop:y=!1,forceContainerOpen:E=!1,zIndex:h,domRoot:x,...$},j)=>{var N,C,I;s(i);const g=e.useRef(null),{root:k}=a.useGetDomRoot(x,g);e.useEffect((()=>{var e;i&&(null===(e=g.current)||void 0===e||e.focus())}),[i]);const q=()=>r.default.Children.map(n,(e=>{var l;return r.default.isValidElement(e)?r.default.cloneElement(e,{onClose:null!==(l=e.props.onClose)&&void 0!==l?l:u}):e}));return r.default.createElement("div",{ref:g},l.createPortal(r.default.createElement("div",{...$,ref:j,id:t,className:`${d.default.modal} ${i?d.default.visible:""} ${c}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=v?v:o.labelId(t),"aria-describedby":null!=p?p:o.descriptionId(t),"aria-hidden":!i,tabIndex:-1,"data-hidden":!i,onKeyDown:e=>{b||"Escape"!==e.key||(e.stopPropagation(),null==u||u())},style:{zIndex:h}},r.default.createElement("div",{...m,className:`${d.default.backdrop} ${null!==(N=null==m?void 0:m.className)&&void 0!==N?N:""}`,onClick:()=>!y&&u&&u()}),E?r.default.createElement("div",{...f,"aria-hidden":!i,"data-element":"dialog",hidden:!i,style:{zIndex:h&&h+1},className:`${d.default.container} ${null!==(C=null==f?void 0:f.className)&&void 0!==C?C:""}`},q()):i&&r.default.createElement("div",{...f,"data-element":"dialog",style:{zIndex:h&&h+1},className:`${d.default.container} ${null!==(I=null==f?void 0:f.className)&&void 0!==I?I:""}`},q())),k))}));exports.BaseModal=i,exports.useSetBodyScroll=s;
 //# sourceMappingURL=BaseModal.cjs.js.map

package/dist/cjs/Notifications/BaseModal/BaseModalActions/BaseModalActions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./BaseModalActions.module.cjs.js"),a=require("../../../Button/Button.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e);const r=c.default.forwardRef((({children:l,onClose:r,cancelAction:n={label:void 0,disable:!1},className:u="",...o},s)=>{var d;const i=c.default.createRef()||s,f=e.useRef(null),v=e.useRef(null),m=c.default.createElement(a.Button,{key:"cancel",variant:"text",color:"default",onClick:r},null!==(d=null==n?void 0:n.label)&&void 0!==d?d:"Cancel");return c.default.createElement("div",{...o,ref:i,className:`${t.default.actions} ${u}`},!n.disable&&c.default.createElement("div",{className:t.default["cancel-action"],ref:f},m),c.default.createElement("div",{ref:v,className:t.default["primary-actions"]},l))}));exports.BaseModalActions=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./BaseModalActions.module.cjs.js"),a=require("../../../Button/Button.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e);const n=c.default.forwardRef((({children:l,cancelAction:n,cancelActionsClassName:r="",onClose:o,className:s="",...u},d)=>{const f=c.default.createRef()||d,i=e.useRef(null),m=e.useRef(null),v=c.default.createElement(a.Button,{variant:"text",color:"default",...null==n?void 0:n.cancelButtonProps,onClick:o},null==n?void 0:n.label);return c.default.createElement("div",{...u,ref:f,className:`${t.default.actions} ${s}`},n&&c.default.createElement("div",{className:`${t.default["cancel-action"]} ${r}`,ref:i},v),l&&c.default.createElement("div",{ref:m,className:t.default["primary-actions"]},l))}));exports.BaseModalActions=n;
 //# sourceMappingURL=BaseModalActions.cjs.js.map

package/dist/cjs/Notifications/Dialog/DialogActions/DialogActions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),l=require("../../BaseModal/BaseModalActions/BaseModalActions.cjs.js"),a=require("./DialogActions.module.cjs.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=o(e);const s=t.default.forwardRef((({children:e,cancelAction:o,onClose:s,...c},i)=>t.default.createElement(l.BaseModalActions,{...c,cancelAction:{label:null==o?void 0:o.label,disable:null==o?void 0:o.disable},onClose:s,ref:i,className:a.default.actions},e)));exports.DialogActions=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("../../BaseModal/BaseModalActions/BaseModalActions.cjs.js"),o=require("./DialogActions.module.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=t(e);const s=c.default.forwardRef((({children:e,cancelAction:t,onClose:s,...l},n)=>c.default.createElement(a.BaseModalActions,{...l,cancelAction:t,cancelActionsClassName:o.default["cancel-action"],onClose:s,ref:n,className:o.default.actions},e)));exports.DialogActions=s;
 //# sourceMappingURL=DialogActions.cjs.js.map

package/dist/cjs/Notifications/Dialog/DialogActions/DialogActions.module.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=".DialogActions_module_actions__e0b1287d *+*{margin-left:.5rem}";require("../../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.cjs.js").default(e,{}),exports.css=e,exports.default={actions:"DialogActions_module_actions__e0b1287d"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=".DialogActions_module_actions__3e00d0bf *+*{margin-left:.5rem}@media screen and (max-width:640px){.DialogActions_module_actions__3e00d0bf .DialogActions_module_cancelAction__3e00d0bf{align-items:flex-end;display:block;flex-direction:column;margin-bottom:.5rem;margin-left:0}.DialogActions_module_actions__3e00d0bf .DialogActions_module_cancelAction__3e00d0bf>*{width:100%}}";require("../../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.cjs.js").default(e,{}),exports.css=e,exports.default={actions:"DialogActions_module_actions__3e00d0bf","cancel-action":"DialogActions_module_cancelAction__3e00d0bf"};
 //# sourceMappingURL=DialogActions.module.cjs.js.map

package/dist/cjs/Wizard/WizardActions/WizardActions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../Button/Button.cjs.js"),n=require("../WizardStateProvider.cjs.js"),r=require("../wizardStateReducer.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e);exports.WizardActions=({actions:a})=>{const{state:{mode:o,steps:c,currentStepNo:i},dispatch:u}=e.useContext(n.WizardStateContext),d=((t,n,r)=>e.useMemo(((e,t)=>()=>e.findIndex(((e,n)=>n>t&&!e.disabled)))(r,n),[t,n,r]))(o,i,c),s=-1!==d,f=((t,n,r)=>e.useMemo(((e,t)=>()=>{const n=e.length-1-t,r=[...e].reverse().findIndex(((e,t)=>t>n&&!e.disabled));return r>0?e.length-1-r:-1})(r,n),[t,n,r]))(o,i,c),v=-1!==f,C=!s||"edit"===o,p=e=>{"forward"===e?s&&u(r.changeCurrentStepNo(d)):v&&u(r.changeCurrentStepNo(f))};return l.default.createElement(e.Fragment,null,!a.cancel.hide&&l.default.createElement(t.Button,{variant:"text",onClick:a.cancel.onClick,...a.cancel.cancelButtonProps},a.cancel.label),v&&l.default.createElement(t.Button,{variant:"outline",onClick:()=>{var e,t;null===(t=(e=a.previous).onClick)||void 0===t||t.call(e),p("backward")}},a.previous.label),s&&l.default.createElement(t.Button,{variant:"edit"===o?"outline":"fill",onClick:()=>{a.next.onClick(i)&&p("forward")}},a.next.label),C&&l.default.createElement(t.Button,{onClick:()=>{a.saveAndClose.onClick(i)}},a.saveAndClose.label))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../Button/Button.cjs.js"),r=require("../WizardStateProvider.cjs.js"),n=require("../wizardStateReducer.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e);exports.WizardActions=({actions:a})=>{const{state:{mode:o,steps:i,currentStepNo:u},dispatch:d}=e.useContext(r.WizardStateContext),s=((t,r,n)=>e.useMemo(((e,t)=>()=>e.findIndex(((e,r)=>r>t&&!e.disabled)))(n,r),[t,r,n]))(o,u,i),c=-1!==s,f=((t,r,n)=>e.useMemo(((e,t)=>()=>{const r=e.length-1-t,n=[...e].reverse().findIndex(((e,t)=>t>r&&!e.disabled));return n>0?e.length-1-n:-1})(n,r),[t,r,n]))(o,u,i),v=-1!==f,C=!c||"edit"===o,p=e=>{"forward"===e?c&&d(n.changeCurrentStepNo(s)):v&&d(n.changeCurrentStepNo(f))};return l.default.createElement(e.Fragment,null,v&&l.default.createElement(t.Button,{variant:"outline",onClick:()=>{var e,t;null===(t=(e=a.previous).onClick)||void 0===t||t.call(e),p("backward")}},a.previous.label),c&&l.default.createElement(t.Button,{variant:"edit"===o?"outline":"fill",onClick:()=>{a.next.onClick(u)&&p("forward")}},a.next.label),C&&l.default.createElement(t.Button,{onClick:()=>{a.saveAndClose.onClick(u)}},a.saveAndClose.label))};
 //# sourceMappingURL=WizardActions.cjs.js.map

package/dist/cjs/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.d.ts

@@ -1,11 +1,13 @@
 import React, { ComponentPropsWithRef } from "react";
+import { Props as ButtonProps } from "../../../Button/Button";
 export interface Props extends ComponentPropsWithRef<"div"> {
     children?: React.ReactNode;
-    onClose: () => void;
+    onClose?: () => void;
     cancelAction?: CancelAction;
+    cancelActionsClassName?: string;
 }
 export interface CancelAction {
-    label?: string;
-    disable?: boolean;
+    label: string;
+    cancelButtonProps?: ButtonProps;
 }
 export declare const BaseModalActions: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/src/components/Wizard/WizardActions/WizardActions.d.ts

@@ -2,12 +2,6 @@ import React from "react";
 import { Props as ButtonProps } from "../../Button/Button";
 export interface Props extends React.HTMLProps<HTMLDivElement> {
     actions: {
-        cancel: {
-            label?: string;
-            hide?: boolean;
-            onClick?: () => void;
-            cancelButtonProps?: ButtonProps;
-        };
         previous: {
             label: string;
             onClick: () => void;

package/dist/esm/Notifications/BaseModal/BaseModal.esm.js

@@ -1,2 +1,2 @@
-import e,{useRef as o,useEffect as a}from"react";import{createPortal as l}from"react-dom";import{useGetDomRoot as d}from"../../src/hooks/useGetDomRoot.esm.js";import r from"./BaseModal.module.esm.js";import{labelId as n,descriptionId as t}from"./BaseModalContext.esm.js";const i="overflow",s=e=>{a((()=>{e?document.body.style[i]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(i)}),[e])},m=e.forwardRef((({id:i,children:m,open:c,onClose:u,className:p="",containerProps:v,backdropProps:b,labelledby:y,describedby:f,disableEscapeKeyDown:h=!1,disableBackdrop:$=!1,forceContainerOpen:N=!1,zIndex:x,domRoot:E,...g},k)=>{var I,w,z;s(c);const C=o(null),{root:P}=d(E,C);a((()=>{var e;c&&(null===(e=C.current)||void 0===e||e.focus())}),[c]);return e.createElement("div",{ref:C},l(e.createElement("div",{...g,ref:k,id:i,className:`${r.modal} ${c?r.visible:""} ${p}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=y?y:n(i),"aria-describedby":null!=f?f:t(i),"aria-hidden":!c,tabIndex:-1,"data-hidden":!c,onKeyDown:e=>{h||"Escape"!==e.key||(e.stopPropagation(),null==u||u())},style:{zIndex:x}},e.createElement("div",{...b,className:`${r.backdrop} ${null!==(I=null==b?void 0:b.className)&&void 0!==I?I:""}`,onClick:()=>!$&&u&&u()}),N?e.createElement("div",{...v,"aria-hidden":!c,"data-element":"dialog",hidden:!c,style:{zIndex:x&&x+1},className:`${r.container} ${null!==(w=null==v?void 0:v.className)&&void 0!==w?w:""}`},m):c&&e.createElement("div",{...v,"data-element":"dialog",style:{zIndex:x&&x+1},className:`${r.container} ${null!==(z=null==v?void 0:v.className)&&void 0!==z?z:""}`},m)),P))}));export{m as BaseModal,s as useSetBodyScroll};
+import e,{useRef as o,useEffect as l}from"react";import{createPortal as a}from"react-dom";import{useGetDomRoot as d}from"../../src/hooks/useGetDomRoot.esm.js";import n from"./BaseModal.module.esm.js";import{labelId as r,descriptionId as t}from"./BaseModalContext.esm.js";const s="overflow",i=e=>{l((()=>{e?document.body.style[s]="hidden":0===document.querySelectorAll("[role=dialog][data-hidden=false]").length&&document.body.style.removeProperty(s)}),[e])},m=e.forwardRef((({id:s,children:m,open:c,onClose:u,className:p="",containerProps:v,backdropProps:b,labelledby:y,describedby:f,disableEscapeKeyDown:h=!1,disableBackdrop:E=!1,forceContainerOpen:$=!1,zIndex:N,domRoot:x,...C},g)=>{var k,I,w;i(c);const z=o(null),{root:P}=d(x,z);l((()=>{var e;c&&(null===(e=z.current)||void 0===e||e.focus())}),[c]);const j=()=>e.Children.map(m,(o=>{var l;return e.isValidElement(o)?e.cloneElement(o,{onClose:null!==(l=o.props.onClose)&&void 0!==l?l:u}):o}));return e.createElement("div",{ref:z},a(e.createElement("div",{...C,ref:g,id:s,className:`${n.modal} ${c?n.visible:""} ${p}`,role:"dialog","aria-modal":"true","aria-labelledby":null!=y?y:r(s),"aria-describedby":null!=f?f:t(s),"aria-hidden":!c,tabIndex:-1,"data-hidden":!c,onKeyDown:e=>{h||"Escape"!==e.key||(e.stopPropagation(),null==u||u())},style:{zIndex:N}},e.createElement("div",{...b,className:`${n.backdrop} ${null!==(k=null==b?void 0:b.className)&&void 0!==k?k:""}`,onClick:()=>!E&&u&&u()}),$?e.createElement("div",{...v,"aria-hidden":!c,"data-element":"dialog",hidden:!c,style:{zIndex:N&&N+1},className:`${n.container} ${null!==(I=null==v?void 0:v.className)&&void 0!==I?I:""}`},j()):c&&e.createElement("div",{...v,"data-element":"dialog",style:{zIndex:N&&N+1},className:`${n.container} ${null!==(w=null==v?void 0:v.className)&&void 0!==w?w:""}`},j())),P))}));export{m as BaseModal,i as useSetBodyScroll};
 //# sourceMappingURL=BaseModal.esm.js.map

package/dist/esm/Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js

@@ -1,2 +1,2 @@
-import e,{useRef as a}from"react";import l from"./BaseModalActions.module.esm.js";import{Button as t}from"../../../Button/Button.esm.js";const c=e.forwardRef((({children:c,onClose:o,cancelAction:n={label:void 0,disable:!1},className:r="",...s},i)=>{var m;const d=e.createRef()||i,f=a(null),u=a(null),v=e.createElement(t,{key:"cancel",variant:"text",color:"default",onClick:o},null!==(m=null==n?void 0:n.label)&&void 0!==m?m:"Cancel");return e.createElement("div",{...s,ref:d,className:`${l.actions} ${r}`},!n.disable&&e.createElement("div",{className:l["cancel-action"],ref:f},v),e.createElement("div",{ref:u,className:l["primary-actions"]},c))}));export{c as BaseModalActions};
+import e,{useRef as t}from"react";import a from"./BaseModalActions.module.esm.js";import{Button as l}from"../../../Button/Button.esm.js";const c=e.forwardRef((({children:c,cancelAction:o,cancelActionsClassName:n="",onClose:r,className:s="",...m},i)=>{const d=e.createRef()||i,f=t(null),u=t(null),p=e.createElement(l,{variant:"text",color:"default",...null==o?void 0:o.cancelButtonProps,onClick:r},null==o?void 0:o.label);return e.createElement("div",{...m,ref:d,className:`${a.actions} ${s}`},o&&e.createElement("div",{className:`${a["cancel-action"]} ${n}`,ref:f},p),c&&e.createElement("div",{ref:u,className:a["primary-actions"]},c))}));export{c as BaseModalActions};
 //# sourceMappingURL=BaseModalActions.esm.js.map

package/dist/esm/Notifications/Dialog/DialogActions/DialogActions.esm.js

@@ -1,2 +1,2 @@
-import o from"react";import{BaseModalActions as e}from"../../BaseModal/BaseModalActions/BaseModalActions.esm.js";import l from"./DialogActions.module.esm.js";const a=o.forwardRef((({children:a,cancelAction:s,onClose:c,...i},n)=>o.createElement(e,{...i,cancelAction:{label:null==s?void 0:s.label,disable:null==s?void 0:s.disable},onClose:c,ref:n,className:l.actions},a)));export{a as DialogActions};
+import o from"react";import{BaseModalActions as e}from"../../BaseModal/BaseModalActions/BaseModalActions.esm.js";import c from"./DialogActions.module.esm.js";const a=o.forwardRef((({children:a,cancelAction:s,onClose:n,...t},l)=>o.createElement(e,{...t,cancelAction:s,cancelActionsClassName:c["cancel-action"],onClose:n,ref:l,className:c.actions},a)));export{a as DialogActions};
 //# sourceMappingURL=DialogActions.esm.js.map

package/dist/esm/Notifications/Dialog/DialogActions/DialogActions.module.esm.js

@@ -1,2 +1,2 @@
-var containers=[],styleTags=[];const o = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var e=".DialogActions_module_actions__e0b1287d *+*{margin-left:.5rem}",s={actions:"DialogActions_module_actions__e0b1287d"};o(e,{});export{e as css,s as default};
+var containers=[],styleTags=[];const o = function(e,t){if(e&&"undefined"!=typeof document){var n,s=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var i=containers.indexOf(a);-1===i&&(i=containers.push(a)-1,styleTags[i]={}),n=styleTags[i]&&styleTags[i][s]?styleTags[i][s]:styleTags[i][s]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var i="prepend"===s?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}};var i=".DialogActions_module_actions__3e00d0bf *+*{margin-left:.5rem}@media screen and (max-width:640px){.DialogActions_module_actions__3e00d0bf .DialogActions_module_cancelAction__3e00d0bf{align-items:flex-end;display:block;flex-direction:column;margin-bottom:.5rem;margin-left:0}.DialogActions_module_actions__3e00d0bf .DialogActions_module_cancelAction__3e00d0bf>*{width:100%}}",e={actions:"DialogActions_module_actions__3e00d0bf","cancel-action":"DialogActions_module_cancelAction__3e00d0bf"};o(i,{});export{i as css,e as default};
 //# sourceMappingURL=DialogActions.module.esm.js.map

package/dist/esm/Wizard/WizardActions/WizardActions.esm.js

@@ -1,2 +1,2 @@
-import e,{useContext as t,Fragment as n,useMemo as l}from"react";import{Button as r}from"../../Button/Button.esm.js";import{WizardStateContext as a}from"../WizardStateProvider.esm.js";import{changeCurrentStepNo as o}from"../wizardStateReducer.esm.js";const c=({actions:c})=>{const{state:{mode:i,steps:s,currentStepNo:d},dispatch:m}=t(a),u=((e,t,n)=>l(((e,t)=>()=>e.findIndex(((e,n)=>n>t&&!e.disabled)))(n,t),[e,t,n]))(i,d,s),p=-1!==u,v=((e,t,n)=>l(((e,t)=>()=>{const n=e.length-1-t,l=[...e].reverse().findIndex(((e,t)=>t>n&&!e.disabled));return l>0?e.length-1-l:-1})(n,t),[e,t,n]))(i,d,s),C=-1!==v,f=!p||"edit"===i,k=e=>{"forward"===e?p&&m(o(u)):C&&m(o(v))};return e.createElement(n,null,!c.cancel.hide&&e.createElement(r,{variant:"text",onClick:c.cancel.onClick,...c.cancel.cancelButtonProps},c.cancel.label),C&&e.createElement(r,{variant:"outline",onClick:()=>{var e,t;null===(t=(e=c.previous).onClick)||void 0===t||t.call(e),k("backward")}},c.previous.label),p&&e.createElement(r,{variant:"edit"===i?"outline":"fill",onClick:()=>{c.next.onClick(d)&&k("forward")}},c.next.label),f&&e.createElement(r,{onClick:()=>{c.saveAndClose.onClick(d)}},c.saveAndClose.label))};export{c as WizardActions};
+import e,{useContext as t,Fragment as r,useMemo as n}from"react";import{Button as o}from"../../Button/Button.esm.js";import{WizardStateContext as l}from"../WizardStateProvider.esm.js";import{changeCurrentStepNo as a}from"../wizardStateReducer.esm.js";const i=({actions:i})=>{const{state:{mode:s,steps:d,currentStepNo:c},dispatch:m}=t(l),u=((e,t,r)=>n(((e,t)=>()=>e.findIndex(((e,r)=>r>t&&!e.disabled)))(r,t),[e,t,r]))(s,c,d),p=-1!==u,v=((e,t,r)=>n(((e,t)=>()=>{const r=e.length-1-t,n=[...e].reverse().findIndex(((e,t)=>t>r&&!e.disabled));return n>0?e.length-1-n:-1})(r,t),[e,t,r]))(s,c,d),f=-1!==v,C=!p||"edit"===s,k=e=>{"forward"===e?p&&m(a(u)):f&&m(a(v))};return e.createElement(r,null,f&&e.createElement(o,{variant:"outline",onClick:()=>{var e,t;null===(t=(e=i.previous).onClick)||void 0===t||t.call(e),k("backward")}},i.previous.label),p&&e.createElement(o,{variant:"edit"===s?"outline":"fill",onClick:()=>{i.next.onClick(c)&&k("forward")}},i.next.label),C&&e.createElement(o,{onClick:()=>{i.saveAndClose.onClick(c)}},i.saveAndClose.label))};export{i as WizardActions};
 //# sourceMappingURL=WizardActions.esm.js.map

package/dist/esm/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.d.ts

@@ -1,11 +1,13 @@
 import React, { ComponentPropsWithRef } from "react";
+import { Props as ButtonProps } from "../../../Button/Button";
 export interface Props extends ComponentPropsWithRef<"div"> {
     children?: React.ReactNode;
-    onClose: () => void;
+    onClose?: () => void;
     cancelAction?: CancelAction;
+    cancelActionsClassName?: string;
 }
 export interface CancelAction {
-    label?: string;
-    disable?: boolean;
+    label: string;
+    cancelButtonProps?: ButtonProps;
 }
 export declare const BaseModalActions: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/Wizard/WizardActions/WizardActions.d.ts

@@ -2,12 +2,6 @@ import React from "react";
 import { Props as ButtonProps } from "../../Button/Button";
 export interface Props extends React.HTMLProps<HTMLDivElement> {
     actions: {
-        cancel: {
-            label?: string;
-            hide?: boolean;
-            onClick?: () => void;
-            cancelButtonProps?: ButtonProps;
-        };
         previous: {
             label: string;
             onClick: () => void;

package/package.json

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

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -14,7 +14,13 @@
  *    limitations under the License.
  */
 
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useRef } from "react";
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  useEffect,
+  useRef,
+  ReactElement
+} from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
@@ -101,6 +107,16 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 
   const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
 
+  const renderChildren = () =>
+    React.Children.map(children, child => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child as ReactElement, {
+          onClose: child.props.onClose ?? onClose
+        });
+      }
+      return child;
+    });
+
   return (
     <div ref={wrappingDivRef}>
       {createPortal(
@@ -133,7 +149,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
               style={{ zIndex: zIndex && zIndex + 1 }}
               className={`${classes["container"]} ${containerProps?.className ?? ""}`}
             >
-              {children}
+              {renderChildren()}
             </div>
           ) : (
             open && (
@@ -143,7 +159,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
                 style={{ zIndex: zIndex && zIndex + 1 }}
                 className={`${classes["container"]} ${containerProps?.className ?? ""}`}
               >
-                {children}
+                {renderChildren()}
               </div>
             )
           )}

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.test.tsx

@@ -23,9 +23,7 @@ describe("BaseModalActions", () => {
     const children = "Content";
     const classNames = ["class1", "class2"];
     const { container } = render(
-      <BaseModalActions onClose={jest.fn()} className={classNames.join(" ")}>
-        {children}
-      </BaseModalActions>
+      <BaseModalActions className={classNames.join(" ")}>{children}</BaseModalActions>
     );
 
     const dialogActionsContainer = container.children[0];
@@ -33,34 +31,21 @@ describe("BaseModalActions", () => {
     expect(dialogActionsContainer).toHaveTextContent(children);
   });
 
-  it("Should render the default cancel action if we don't pass it", () => {
-    const { container } = render(<BaseModalActions onClose={jest.fn()} />);
+  it("Shouldn't render cancel button if we don't pass label", () => {
+    const { container } = render(<BaseModalActions />);
     const dialogActionsContainer = container.children[0];
     expect(dialogActionsContainer).toHaveClass("actions");
-    expect(dialogActionsContainer).toHaveTextContent("Cancel");
+    expect(dialogActionsContainer).not.toHaveTextContent("Cancel");
   });
 
-  it("should render a cancel action with a custom label", () => {
-    const cancelAction = { label: "Close", disable: false };
-    const { container } = render(
-      <BaseModalActions onClose={jest.fn()} cancelAction={cancelAction} />
-    );
+  it("Should render a cancel button with a `Close` label", () => {
+    const cancelAction = { label: "Close" };
+    const { container } = render(<BaseModalActions cancelAction={cancelAction} />);
 
     const dialogActionsContainer = container.children[0];
     expect(dialogActionsContainer).toHaveClass("actions");
     expect(dialogActionsContainer).toHaveTextContent(cancelAction.label);
   });
-
-  it("Shouldn't render a label because of disabled cancel action", () => {
-    const cancelAction = { label: "Close", disable: true };
-    const { container } = render(
-      <BaseModalActions onClose={jest.fn()} cancelAction={cancelAction} />
-    );
-
-    const dialogActionsContainer = container.children[0];
-    expect(dialogActionsContainer).toHaveClass("actions");
-    expect(dialogActionsContainer).not.toHaveTextContent(cancelAction.label);
-  });
 });
 describe("ref should work", () => {
   it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -16,49 +16,49 @@
 
 import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useRef } from "react";
 import classes from "./BaseModalActions.module.scss";
-import { Button } from "../../../Button/Button";
+import { Button, Props as ButtonProps } from "../../../Button/Button";
 
 export interface Props extends ComponentPropsWithRef<"div"> {
   children?: React.ReactNode;
-  onClose: () => void;
+  onClose?: () => void;
   cancelAction?: CancelAction;
+  cancelActionsClassName?: string;
 }
 
 export interface CancelAction {
-  label?: string;
-  disable?: boolean;
+  label: string;
+  cancelButtonProps?: ButtonProps;
 }
 
 const BaseModalActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    children,
-    onClose,
-    cancelAction = { label: undefined, disable: false },
-    className = "",
-    ...rest
-  }: Props,
+  { children, cancelAction, cancelActionsClassName = "", onClose, className = "", ...rest }: Props,
   ref
 ) => {
   const innerRef = (React.createRef() as React.RefObject<HTMLDivElement>) || ref;
   const cancelButtonRef = useRef<HTMLDivElement>(null);
   const primaryActionsRef = useRef<HTMLDivElement>(null);
 
-  const CancelButton = (
-    <Button key="cancel" variant="text" color="default" onClick={onClose}>
-      {cancelAction?.label ?? "Cancel"}
+  const cancelButton = (
+    <Button variant="text" color="default" {...cancelAction?.cancelButtonProps} onClick={onClose}>
+      {cancelAction?.label}
     </Button>
   );
 
   return (
     <div {...rest} ref={innerRef} className={`${classes["actions"]} ${className}`}>
-      {!cancelAction.disable && (
-        <div className={classes["cancel-action"]} ref={cancelButtonRef}>
-          {CancelButton}
+      {cancelAction && (
+        <div
+          className={`${classes["cancel-action"]} ${cancelActionsClassName}`}
+          ref={cancelButtonRef}
+        >
+          {cancelButton}
+        </div>
+      )}
+      {children && (
+        <div ref={primaryActionsRef} className={classes["primary-actions"]}>
+          {children}
         </div>
       )}
-      <div ref={primaryActionsRef} className={classes["primary-actions"]}>
-        {children}
-      </div>
     </div>
   );
 };

package/src/components/Notifications/Dialog/Dialog.test.tsx

@@ -29,8 +29,7 @@ const initParams: Props = {
     onClick: jest.fn()
   },
   cancelAction: {
-    label: "Cancel",
-    disable: false
+    label: "Cancel"
   },
   secondaryAction: {
     label: "Cancel",

package/src/components/Notifications/Dialog/DialogActions/DialogActions.module.scss

@@ -18,4 +18,18 @@
   & * + * {
     margin-left: 0.5rem;
   }
+
+  @media screen and (max-width: 640px) {
+    .cancel-action {
+      display: block;
+      flex-direction: column;
+      align-items: flex-end;
+      margin-left: 0;
+      margin-bottom: 0.5rem;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
 }

package/src/components/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -33,7 +33,8 @@ const DialogActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
   return (
     <BaseModalActions
       {...rest}
-      cancelAction={{ label: cancelAction?.label, disable: cancelAction?.disable }}
+      cancelAction={cancelAction}
+      cancelActionsClassName={classes["cancel-action"]}
       onClose={onClose}
       ref={ref}
       className={classes["actions"]}

package/src/components/Wizard/Wizard.test.tsx

@@ -56,10 +56,6 @@ const initWizardStepsProps = {
 
 const initWizardActionsProps: WizardActionProps = {
   actions: {
-    cancel: {
-      label: "Cancel",
-      onClick: jest.fn()
-    },
     next: {
       label: "Next",
       onClick: jest.fn()
@@ -102,9 +98,6 @@ const getStepButtons = (container: HTMLElement) =>
 
 const getActionsButtons = (container: HTMLElement) => {
   const actionsContainer = getByTestId(container, "wizard-actions");
-  const cancel = queryByRole(actionsContainer, "button", {
-    name: initWizardActionsProps.actions.cancel.label
-  });
   const next = queryByRole(actionsContainer, "button", {
     name: initWizardActionsProps.actions.next.label
   });
@@ -114,13 +107,13 @@ const getActionsButtons = (container: HTMLElement) => {
   const save = queryByRole(actionsContainer, "button", {
     name: initWizardActionsProps.actions.saveAndClose.label
   });
-  return { cancel, next, prev, save };
+  return { next, prev, save };
 };
 
 describe("Wizard", () => {
   it("renders without crashing", () => {
     const { container } = renderWizard();
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
     const stepButtons = getStepButtons(container);
     const wizardContent = getWizardContent(container);
 
@@ -130,7 +123,6 @@ describe("Wizard", () => {
     expect(getByText(stepButtons[2], "3")).toBeDefined();
     expect(getByText(stepButtons[3], "4")).toBeDefined();
     expect(wizardContent).toHaveTextContent("Step 1");
-    expect(cancel).toBeDefined();
     expect(next).toBeDefined();
     expect(prev).toBeNull();
     expect(save).toBeNull();
@@ -151,15 +143,13 @@ describe("Wizard", () => {
     await findByText(wizardContent, "Step 2");
     next && (await userEvent.click(next));
     await findByText(wizardContent, "Step 4");
-    const { save, prev, cancel } = getActionsButtons(container);
+    const { save, prev } = getActionsButtons(container);
     save && (await userEvent.click(save));
     expect(initWizardActionsProps.actions.saveAndClose.onClick).toBeCalledWith(3);
     prev && (await userEvent.click(prev));
     await findByText(wizardContent, "Step 2");
     prev && (await userEvent.click(prev));
     await findByText(wizardContent, "Step 1");
-    cancel && (await userEvent.click(cancel));
-    expect(initWizardActionsProps.actions.cancel.onClick).toBeCalledTimes(1);
   });
 
   it("should not be able to click over whole wizard via steps buttons in add mode", async () => {

package/src/components/Wizard/WizardActions/WizardActions.test.tsx

@@ -43,10 +43,6 @@ const initWizardState: WizardStateType = {
 
 const initParams: Props = {
   actions: {
-    cancel: {
-      label: "Cancel",
-      onClick: jest.fn()
-    },
     next: {
       label: "Next",
       onClick: jest.fn()
@@ -89,36 +85,32 @@ const renderWizardActions = (initReducerState?: WizardStateType, props?: Props)
 };
 
 const getActionsButtons = (container: HTMLElement) => {
-  const cancel = queryByRole(container, "button", { name: initParams.actions.cancel.label });
   const next = queryByRole(container, "button", { name: initParams.actions.next.label });
   const prev = queryByRole(container, "button", { name: initParams.actions.previous.label });
   const save = queryByRole(container, "button", { name: initParams.actions.saveAndClose.label });
-  return { cancel, next, prev, save };
+  return { next, prev, save };
 };
 
 describe("WizardActions", () => {
   it("renders without crashing", async () => {
     const { container, dispatch } = renderWizardActions();
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
     (
       initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
     ).mockReturnValueOnce(true);
 
-    expect(cancel).toBeDefined();
-    cancel && (await userEvent.click(cancel));
     expect(next).toBeDefined();
     next && (await userEvent.click(next));
     expect(prev).toBeNull();
     expect(save).toBeNull();
 
-    expect(initParams.actions.cancel.onClick).toBeCalledTimes(1);
     expect(initParams.actions.next.onClick).toHaveBeenCalledWith(0);
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(1));
   });
 
   it("should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)", async () => {
     const { container, dispatch } = renderWizardActions({ ...initWizardState, currentStepNo: 1 });
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
     (
       initParams.actions.next.onClick as jest.MockedFunction<typeof initParams.actions.next.onClick>
     ).mockReturnValueOnce(true);
@@ -133,15 +125,13 @@ describe("WizardActions", () => {
     expect(initParams.actions.next.onClick).toHaveBeenCalledWith(1);
     expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
 
-    expect(cancel).toBeDefined();
     expect(save).toBeNull();
   });
 
   it("should render save button but not next button when current step is the last step", async () => {
     const { container } = renderWizardActions({ ...initWizardState, currentStepNo: 3 });
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
 
-    expect(cancel).toBeDefined();
     expect(prev).toBeDefined();
     expect(next).toBeNull();
     expect(save).toBeDefined();
@@ -161,9 +151,8 @@ describe("WizardActions", () => {
       steps: steps,
       currentStepNo: 0
     });
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
 
-    expect(cancel).toBeDefined();
     expect(prev).toBeNull();
     expect(next).toBeNull();
     expect(save).toBeDefined();
@@ -174,9 +163,8 @@ describe("WizardActions", () => {
 
   it("should show save button on middle step when mode is `edit`", async () => {
     const { container } = renderWizardActions({ ...initWizardState, mode: "edit" });
-    const { cancel, prev, next, save } = getActionsButtons(container);
+    const { prev, next, save } = getActionsButtons(container);
 
-    expect(cancel).toBeDefined();
     expect(prev).toBeNull();
     expect(next).toBeDefined();
     expect(save).toBeDefined();

package/src/components/Wizard/WizardActions/WizardActions.tsx

@@ -23,12 +23,6 @@ import { changeCurrentStepNo } from "../wizardStateReducer";
 
 export interface Props extends React.HTMLProps<HTMLDivElement> {
   actions: {
-    cancel: {
-      label?: string;
-      hide?: boolean;
-      onClick?: () => void;
-      cancelButtonProps?: ButtonProps;
-    };
     previous: {
       label: string;
       onClick: () => void;
@@ -101,15 +95,6 @@ export const WizardActions = ({ actions }: Props) => {
 
   return (
     <Fragment>
-      {!actions.cancel.hide && (
-        <Button
-          variant="text"
-          onClick={actions.cancel.onClick}
-          {...actions.cancel.cancelButtonProps}
-        >
-          {actions.cancel.label}
-        </Button>
-      )}
       {hasPreviousStep && (
         <Button variant="outline" onClick={onPreviousWrapper}>
           {actions.previous.label}