@kvdbil/components 12.0.0 → 12.0.1

package/cjs/components/Dialog/index.js

@@ -6,4 +6,4 @@
   justify-content: flex-end;
   gap: 1rem;
   overflow-x: hidden;
-`,s=({isOpen:f,title:c,children:h,actions:p,onClose:g,withPortal:y,withCloseIcon:m=!0})=>o.default.createElement(r.Modal,{onClose:g,withPortal:y,isOpen:f,withCloseIcon:m},typeof c=="string"?o.default.createElement(u,null,c):c,o.default.createElement("div",null,h),p&&o.default.createElement(d,null,p));exports.Dialog=s,exports.default=s;
+`,s=({isOpen:f,title:c,children:h,actions:p,onClose:g,withPortal:y,withCloseIcon:m=!0,...q})=>o.default.createElement(r.Modal,{onClose:g,withPortal:y,isOpen:f,withCloseIcon:m,...q},typeof c=="string"?o.default.createElement(u,null,c):c,o.default.createElement("div",null,h),p&&o.default.createElement(d,null,p));exports.Dialog=s,exports.default=s;

package/cjs/components/Modal/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(h){return h&&typeof h=="object"&&"default"in h?h:{default:h}}var a=o(e),d=o(i);const l=i.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom"),n=require("react-transition-group"),i=require("styled-components"),r=require("../Icons/Close.js");function o(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}var a=o(e),d=o(i);const l=i.css`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -74,4 +74,4 @@
   }
 `,f=i.createGlobalStyle`
   ${l}
-`,g=({children:h,isOpen:w,contentStyles:v,withPortal:E=!1,withCloseIcon:k=!0,onClose:x})=>{e.useEffect(()=>{const y=C=>{C.key==="Escape"&&w&&x()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[x,w]);const T=!(typeof window=="undefined"||!window.document||!window.document.createElement),b=a.default.createElement(n.CSSTransition,{in:w,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,null,a.default.createElement(c,{"data-testid":"background",onClick:x}),a.default.createElement(s,{style:v},k&&a.default.createElement(p,{onClick:x,"data-testid":"close"},a.default.createElement(r.default,null)),h),a.default.createElement(m,null))));return E&&T?t.createPortal(b,document.body):b};exports.Modal=g,exports.default=g;
+`,g=({children:x,isOpen:b,contentStyles:v,withPortal:E=!1,withCloseIcon:k=!0,onClose:h,...T})=>{e.useEffect(()=>{const y=q=>{q.key==="Escape"&&b&&h()};return window.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y)}},[h,b]);const C=!(typeof window=="undefined"||!window.document||!window.document.createElement),w=a.default.createElement(n.CSSTransition,{in:b,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},a.default.createElement(a.default.Fragment,null,a.default.createElement(f,null),a.default.createElement(u,{...T},a.default.createElement(c,{"data-testid":"background",onClick:h}),a.default.createElement(s,{style:v},k&&a.default.createElement(p,{onClick:h,"data-testid":"close"},a.default.createElement(r.default,null)),x),a.default.createElement(m,null))));return E&&C?t.createPortal(w,document.body):w};exports.Modal=g,exports.default=g;

package/esm/components/Dialog/index.js

@@ -1,9 +1,9 @@
-import e from"react";import r from"styled-components";import{Modal as d}from"../Modal/index.js";import p from"../../theme.js";import{TinyTitleBold as c}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const f=r(c)`
-  font-weight: ${p.typography.fontAlternativeRegularWeight};
+import e from"react";import r from"styled-components";import{Modal as p}from"../Modal/index.js";import c from"../../theme.js";import{TinyTitleBold as f}from"../../typography/Heading/index.js";import"react-dom";import"react-transition-group";import"../Icons/Close.js";import"../../shared/media-queries.js";const g=r(f)`
+  font-weight: ${c.typography.fontAlternativeRegularWeight};
   margin: 0;
-`,g=r.div`
+`,u=r.div`
   display: flex;
   justify-content: flex-end;
   gap: 1rem;
   overflow-x: hidden;
-`,n=({isOpen:i,title:t,children:l,actions:o,onClose:m,withPortal:a,withCloseIcon:s=!0})=>e.createElement(d,{onClose:m,withPortal:a,isOpen:i,withCloseIcon:s},typeof t=="string"?e.createElement(f,null,t):t,e.createElement("div",null,l),o&&e.createElement(g,null,o));export{n as Dialog,n as default};
+`,n=({isOpen:i,title:t,children:l,actions:o,onClose:m,withPortal:a,withCloseIcon:s=!0,...d})=>e.createElement(p,{onClose:m,withPortal:a,isOpen:i,withCloseIcon:s,...d},typeof t=="string"?e.createElement(g,null,t):t,e.createElement("div",null,l),o&&e.createElement(u,null,o));export{n as Dialog,n as default};

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";import{CSSTransition as x}from"react-transition-group";import n,{css as f,createGlobalStyle as a}from"styled-components";import b from"../Icons/Close.js";const d=f`
+import t,{useEffect as h}from"react";import{createPortal as x}from"react-dom";import{CSSTransition as f}from"react-transition-group";import n,{css as b,createGlobalStyle as a}from"styled-components";import y from"../Icons/Close.js";const d=b`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,7 +16,7 @@ import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";im
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,y=n.div`
+`,k=n.div`
   ${d}
   position: fixed;
   width: 100%;
@@ -24,13 +24,13 @@ import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";im
   top: 0;
   left: 0;
   z-index: 200;
-`,k=n.div`
+`,E=n.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,E=n.div`
+`,v=n.div`
   position: relative;
   max-width: 512px;
   padding: 1rem;
@@ -51,7 +51,7 @@ import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";im
     margin-right: auto;
     min-width: 355px;
   }
-`,v=n.div`
+`,T=n.div`
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -64,7 +64,7 @@ import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";im
     width: 1rem;
     height: 1rem;
   }
-`,T=a`
+`,C=a`
   body {
     overflow: hidden;
 
@@ -72,6 +72,6 @@ import t,{useEffect as w}from"react";import{createPortal as h}from"react-dom";im
         padding-right: 15px !important;
     `}
   }
-`,C=a`
+`,S=a`
   ${d}
-`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,withCloseIcon:u=!0,onClose:e})=>{w(()=>{const r=g=>{g.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const p=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(x,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(C,null),t.createElement(y,null,t.createElement(k,{"data-testid":"background",onClick:e}),t.createElement(E,{style:m},u&&t.createElement(v,{onClick:e,"data-testid":"close"},t.createElement(b,null)),s),t.createElement(T,null))));return l&&p?h(i,document.body):i};export{c as Modal,c as default};
+`,c=({children:s,isOpen:o,contentStyles:m,withPortal:l=!1,withCloseIcon:p=!0,onClose:e,...u})=>{h(()=>{const r=w=>{w.key==="Escape"&&o&&e()};return window.addEventListener("keydown",r),()=>{window.removeEventListener("keydown",r)}},[e,o]);const g=!!(typeof window!="undefined"&&window.document&&window.document.createElement),i=t.createElement(f,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition"},t.createElement(t.Fragment,null,t.createElement(S,null),t.createElement(k,{...u},t.createElement(E,{"data-testid":"background",onClick:e}),t.createElement(v,{style:m},p&&t.createElement(T,{onClick:e,"data-testid":"close"},t.createElement(y,null)),s),t.createElement(C,null))));return l&&g?x(i,document.body):i};export{c as Modal,c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Dialog/index.d.ts

@@ -8,5 +8,5 @@ export interface DialogProps {
     withCloseIcon?: boolean;
     onClose(): void;
 }
-export declare const Dialog: ({ isOpen, title, children, actions, onClose, withPortal, withCloseIcon, }: DialogProps) => JSX.Element;
+export declare const Dialog: ({ isOpen, title, children, actions, onClose, withPortal, withCloseIcon, ...props }: DialogProps) => JSX.Element;
 export default Dialog;

package/types/components/Modal/index.d.ts

@@ -8,5 +8,5 @@ export interface ModalProps {
     contentStyles?: {};
     withCloseIcon?: boolean;
 }
-export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, ...props }: ModalProps) => JSX.Element;
 export default Modal;