@kvdbil/components 17.2.1 → 17.2.3

package/cjs/components/FocusTrap.js

@@ -1,5 +1,4 @@
 "use strict";var e,t=require("react/jsx-runtime"),r=require("react"),n=require("styled-components");const u=((e=n)&&e.__esModule?e:{default:e}).default.div`
-  display: flex;
   width: 100%;
   height: 100%;
 `;exports.FocusTrap=({children:e,pause:n=!1,autoFocusOnOpen:s="firstElem",restoreFocusOnClose:c=!0})=>{const o=r.useRef(null),i=r.useRef([]),l=r.useRef(null),d=r.useRef(null),f=r.useRef(!1);return r.useEffect((()=>{if(n)return void(c&&f.current&&d.current&&d.current.focus());const e=o.current;if(!e)return;c&&(d.current=document.activeElement);const t=["a[href]","button:not([disabled])","textarea:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])",'[tabindex]:not([tabindex="-1"])'],r=()=>{i.current=Array.from(e.querySelectorAll(t.join(",")))},u=e=>{if("Tab"!==e.key)return;const t=i.current;if(0===t.length)return void e.preventDefault();const r=t[0],n=t[t.length-1],u=t.findIndex((e=>e===document.activeElement));e.preventDefault(),e.shiftKey?u<=0?n.focus():t[u-1].focus():-1===u||u===t.length-1?r.focus():t[u+1].focus()};return r(),"firstElem"===s&&i.current.length>0&&i.current[0].focus(),"firstInput"===s&&i.current.find((e=>"INPUT"===e.tagName))?.focus(),e.addEventListener("keydown",u),l.current=new MutationObserver(r),l.current.observe(e,{childList:!0,subtree:!0}),f.current=!0,()=>{e.removeEventListener("keydown",u),l.current?.disconnect(),l.current=null}}),[n,s,c]),t.jsx(u,{ref:o,children:e})};

package/cjs/components/Modal/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),o=require("react-transition-group"),r=require("styled-components"),n=require("../../icons/components/CloseIcon.js"),a=require("../../utils/utils.js"),s=require("../FocusTrap.js");var d,l=(d=r)&&d.__esModule?d:{default:d};const u=r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),o=require("react-transition-group"),n=require("styled-components"),r=require("../../icons/components/CloseIcon.js"),a=require("../../utils/utils.js"),s=require("../FocusTrap.js");var d,l=(d=n)&&d.__esModule?d:{default:d};const c=n.css`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,8 +16,8 @@
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,c=l.default.div`
-  ${u}
+`,u=l.default.div`
+  ${c}
   position: fixed;
   width: 100%;
   height: 100%;
@@ -25,14 +25,21 @@
   left: 0;
   z-index: 200;
 `,p=l.default.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,x=l.default.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,x=l.default.div`
+`,b=l.default.div`
   position: relative;
-  max-width: 512px;
+  overflow-y: auto;
+
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
@@ -41,19 +48,10 @@
     0px 9px 46px rgba(0, 0, 0, 0.09),
     0px 11px 15px rgba(0, 0, 0, 0.15);
 
-  overflow-y: hidden;
   margin: 1rem;
-  margin-top: 50vh;
-  transform: translate(0, -50%);
-  margin-left: 1rem;
-  margin-right: 1rem;
-
-  @media (min-width: 500px) {
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 355px;
-  }
-`,m=l.default.button`
+  width: 80vw;
+  max-width: 512px;
+`,w=l.default.button`
   ${a.resetButtonStyle}
   display: flex;
   justify-self: flex-end;
@@ -69,12 +67,12 @@
   svg {
     font-size: 1.5rem;
   }
-`,g=r.createGlobalStyle`
+`,g=n.createGlobalStyle`
   body {
     overflow: hidden;
 
     ${typeof window<"u"&&window.innerWidth>1024&&"\n        padding-right: 15px !important;\n    "}
   }
-`,b=r.createGlobalStyle`
-  ${u}
-`,h=({children:r,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:u=!0,onClose:h,focusTrapProps:w={},...f})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&h()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[h,a]);const y=!!(typeof window<"u"&&window.document&&window.document.createElement),v=e.jsx(o.CSSTransition,{in:a,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:e.jsxs(e.Fragment,{children:[e.jsx(b,{}),e.jsxs(c,{...f,children:[e.jsx(p,{"data-testid":"background",onClick:h}),e.jsx(s.FocusTrap,{pause:!a,...w,children:e.jsxs(x,{style:d,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[u&&e.jsx(m,{onClick:h,"data-testid":"close",type:"button","aria-label":"Close dialog",children:e.jsx(n.default,{})}),r]})}),e.jsx(g,{})]})]})});return l&&y?i.createPortal(v,document.body):v};exports.Modal=h,exports.default=h;
+`,h=n.createGlobalStyle`
+  ${c}
+`,y=({children:n,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:c=!0,onClose:y,focusTrapProps:f={},...m})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&y()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[y,a]);const v=!!(typeof window<"u"&&window.document&&window.document.createElement),j=e.jsx(o.CSSTransition,{in:a,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:e.jsxs(e.Fragment,{children:[e.jsx(h,{}),e.jsxs(u,{...m,children:[e.jsx(x,{"data-testid":"background",onClick:y}),e.jsx(s.FocusTrap,{pause:!a,...f,children:e.jsx(p,{children:e.jsxs(b,{style:d,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[c&&e.jsx(w,{onClick:y,"data-testid":"close",type:"button","aria-label":"Close dialog",children:e.jsx(r.default,{})}),n]})})}),e.jsx(g,{})]})]})});return l&&v?i.createPortal(j,document.body):j};exports.Modal=y,exports.default=y;

package/esm/components/FocusTrap.js

@@ -1,5 +1,4 @@
-import{jsx as x}from"react/jsx-runtime";import{useRef as o,useEffect as g}from"react";import w from"styled-components";const L=w.div`
-  display: flex;
+import{jsx as g}from"react/jsx-runtime";import{useRef as o,useEffect as x}from"react";import w from"styled-components";const L=w.div`
   width: 100%;
   height: 100%;
-`,O=({children:p,pause:f=!1,autoFocusOnOpen:s="firstElem",restoreFocusOnClose:i=!0})=>{const d=o(null),r=o([]),c=o(null),l=o(null),a=o(!1);return g(()=>{if(f){i&&a.current&&l.current&&l.current.focus();return}const n=d.current;if(!n)return;i&&(l.current=document.activeElement);const b=["a[href]","button:not([disabled])","textarea:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])",'[tabindex]:not([tabindex="-1"])'],m=()=>{r.current=Array.from(n.querySelectorAll(b.join(",")))},h=t=>{if(t.key!=="Tab")return;const e=r.current;if(e.length===0){t.preventDefault();return}const v=e[0],y=e[e.length-1],u=e.findIndex(E=>E===document.activeElement);t.preventDefault(),t.shiftKey?u<=0?y.focus():e[u-1].focus():u===-1||u===e.length-1?v.focus():e[u+1].focus()};return m(),s==="firstElem"&&r.current.length>0&&r.current[0].focus(),s==="firstInput"&&r.current.find(t=>t.tagName==="INPUT")?.focus(),n.addEventListener("keydown",h),c.current=new MutationObserver(m),c.current.observe(n,{childList:!0,subtree:!0}),a.current=!0,()=>{n.removeEventListener("keydown",h),c.current?.disconnect(),c.current=null}},[f,s,i]),x(L,{ref:d,children:p})};export{O as FocusTrap};
+`,O=({children:p,pause:f=!1,autoFocusOnOpen:s="firstElem",restoreFocusOnClose:i=!0})=>{const d=o(null),r=o([]),c=o(null),l=o(null),a=o(!1);return x(()=>{if(f){i&&a.current&&l.current&&l.current.focus();return}const n=d.current;if(!n)return;i&&(l.current=document.activeElement);const b=["a[href]","button:not([disabled])","textarea:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])",'[tabindex]:not([tabindex="-1"])'],m=()=>{r.current=Array.from(n.querySelectorAll(b.join(",")))},h=t=>{if(t.key!=="Tab")return;const e=r.current;if(e.length===0){t.preventDefault();return}const v=e[0],E=e[e.length-1],u=e.findIndex(y=>y===document.activeElement);t.preventDefault(),t.shiftKey?u<=0?E.focus():e[u-1].focus():u===-1||u===e.length-1?v.focus():e[u+1].focus()};return m(),s==="firstElem"&&r.current.length>0&&r.current[0].focus(),s==="firstInput"&&r.current.find(t=>t.tagName==="INPUT")?.focus(),n.addEventListener("keydown",h),c.current=new MutationObserver(m),c.current.observe(n,{childList:!0,subtree:!0}),a.current=!0,()=>{n.removeEventListener("keydown",h),c.current?.disconnect(),c.current=null}},[f,s,i]),g(L,{ref:d,children:p})};export{O as FocusTrap};

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect as b}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import e,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
+import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect as g}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import e,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -24,15 +24,22 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
   top: 0;
   left: 0;
   z-index: 200;
+`,j=e.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `,P=e.div`
   z-index: -1;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(34, 34, 34, 0.3);
-`,$=e.div`
+`,z=e.div`
   position: relative;
-  max-width: 512px;
+  overflow-y: auto;
+
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
@@ -41,19 +48,10 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
     0px 9px 46px rgba(0, 0, 0, 0.09),
     0px 11px 15px rgba(0, 0, 0, 0.15);
 
-  overflow-y: hidden;
   margin: 1rem;
-  margin-top: 50vh;
-  transform: translate(0, -50%);
-  margin-left: 1rem;
-  margin-right: 1rem;
-
-  @media (min-width: 500px) {
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 355px;
-  }
-`,j=e.button`
+  width: 80vw;
+  max-width: 512px;
+`,F=e.button`
   ${E}
   display: flex;
   justify-self: flex-end;
@@ -69,7 +67,7 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
   svg {
     font-size: 1.5rem;
   }
-`,z=d`
+`,O=d`
   body {
     overflow: hidden;
 
@@ -77,6 +75,6 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
         padding-right: 15px !important;
     `}
   }
-`,F=d`
+`,L=d`
   ${s}
-`,l=({children:c,isOpen:o,contentStyles:p,withPortal:m=!1,withCloseIcon:u=!0,onClose:i,focusTrapProps:g={},...f})=>{b(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),n=t(v,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:r(w,{children:[t(F,{}),r(S,{...f,children:[t(P,{"data-testid":"background",onClick:i}),t(C,{pause:!o,...g,children:r($,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[u&&t(j,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(T,{})}),c]})}),t(z,{})]})]})});return m&&h?y(n,document.body):n};export{l as Modal,l as default};
+`,c=({children:l,isOpen:o,contentStyles:p,withPortal:u=!1,withCloseIcon:m=!0,onClose:i,focusTrapProps:f={},...w})=>{g(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=t(v,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:n(b,{children:[t(L,{}),n(S,{...w,children:[t(P,{"data-testid":"background",onClick:i}),t(C,{pause:!o,...f,children:t(j,{children:n(z,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[m&&t(F,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(T,{})}),l]})})}),t(O,{})]})]})});return u&&h?y(r,document.body):r};export{c as Modal,c as default};

package/package.json

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

package/package.json.tmp

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