@kvdbil/components 17.2.1 → 17.2.2

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

@@ -33,6 +33,9 @@
 `,x=l.default.div`
   position: relative;
   max-width: 512px;
+  max-height: 90vh;
+  overflow-y: auto;
+
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
@@ -41,10 +44,9 @@
     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%);
+  transform: translateY(-50%);
   margin-left: 1rem;
   margin-right: 1rem;
 
@@ -75,6 +77,6 @@
 
     ${typeof window<"u"&&window.innerWidth>1024&&"\n        padding-right: 15px !important;\n    "}
   }
-`,b=r.createGlobalStyle`
+`,h=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;
+`,b=({children:r,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:u=!0,onClose:b,focusTrapProps:w={},...f})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&b()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[b,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(h,{}),e.jsxs(c,{...f,children:[e.jsx(p,{"data-testid":"background",onClick:b}),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:b,"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=b,exports.default=b;

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

@@ -33,6 +33,9 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
 `,$=e.div`
   position: relative;
   max-width: 512px;
+  max-height: 90vh;
+  overflow-y: auto;
+
   padding: 1rem;
   background-color: white;
   border-radius: 3px;
@@ -41,10 +44,9 @@ 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%);
+  transform: translateY(-50%);
   margin-left: 1rem;
   margin-right: 1rem;
 
@@ -79,4 +81,4 @@ import{jsx as t,jsxs as r,Fragment as w}from"react/jsx-runtime";import{useEffect
   }
 `,F=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};
+`,l=({children:c,isOpen:o,contentStyles:p,withPortal:m=!1,withCloseIcon:u=!0,onClose:i,focusTrapProps:g={},...h})=>{b(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const f=!!(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,{...h,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&&f?y(n,document.body):n};export{l as Modal,l as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.2.1",
+  "version": "17.2.2",
   "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.2",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",