@kvdbil/components 17.1.0 → 17.2.0

package/cjs/components/FocusTrap.js

@@ -1,4 +1,5 @@
 "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})=>{const c=r.useRef(null),s=r.useRef([]),o=r.useRef(null),i=r.useRef(null),l=r.useRef(!1);return r.useEffect((()=>{if(n)return void(l.current&&i.current&&i.current.focus());const e=c.current;if(!e)return;i.current=document.activeElement;const t=["a[href]","button:not([disabled])","textarea:not([disabled])","input:not([disabled])","select:not([disabled])",'[tabindex]:not([tabindex="-1"])'],r=()=>{s.current=Array.from(e.querySelectorAll(t.join(",")))},u=e=>{if("Tab"!==e.key)return;const t=s.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(),s.current.length>0&&s.current[0].focus(),e.addEventListener("keydown",u),o.current=new MutationObserver(r),o.current.observe(e,{childList:!0,subtree:!0}),l.current=!0,()=>{e.removeEventListener("keydown",u),o.current?.disconnect(),o.current=null}}),[n]),t.jsx(u,{ref:c,children:e})};
+`;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

@@ -77,4 +77,4 @@
   }
 `,b=r.createGlobalStyle`
   ${u}
-`,h=({children:r,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:u=!0,onClose:h,...w})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&h()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[h,a]);const f=!!(typeof window<"u"&&window.document&&window.document.createElement),y=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,{...w,children:[e.jsx(p,{"data-testid":"background",onClick:h}),e.jsx(s.FocusTrap,{pause:!a,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&&f?i.createPortal(y,document.body):y};exports.Modal=h,exports.default=h;
+`,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;

package/cjs/components/OffCanvas/index.js

@@ -7,4 +7,4 @@
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-`,m=({animationName:r="offCanvasAnimation",animationDuration:l=300,backgroundColor:d,backgroundOverlay:m,children:h,from:$="right",isOpen:g,onClickOutside:x,width:v="375px",withPortal:p,transitionProps:w})=>{const k=e.useRef(null);o.useOutsideClick(k,(()=>x?.())),e.useEffect((()=>{const n=n=>{"Escape"===n.key&&g&&x?.()};return g&&window.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n)}}),[x,g]),m&&!x&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const O=`${r}--${$}`,b=n.jsxs(n.Fragment,{children:[m&&n.jsx(i.default,{isOpen:g}),n.jsx(n.Fragment,{children:n.jsx(a.CSSTransition,{in:g,className:`${r} ${O}`,classNames:O,...u,...w,children:n.jsx(s.FocusTrap,{pause:!g,children:n.jsx(c,{ref:k,animationName:r,animationDuration:l,backgroundColor:d,from:$,width:v,role:"dialog","aria-modal":"true","aria-label":"Side panel",children:n.jsx(f,{className:`${r}-content`,children:h})})})})})]});return p?t.createPortal(b,document.body):b};exports.OffCanvas=m,exports.default=m;
+`,m=({animationName:r="offCanvasAnimation",animationDuration:l=300,backgroundColor:d,backgroundOverlay:m,children:h,from:$="right",isOpen:g,onClickOutside:x,width:p="375px",withPortal:v,transitionProps:w,focusTrapProps:k={}})=>{const O=e.useRef(null);o.useOutsideClick(O,(()=>x?.())),e.useEffect((()=>{const n=n=>{"Escape"===n.key&&g&&x?.()};return g&&window.addEventListener("keydown",n),()=>{window.removeEventListener("keydown",n)}}),[x,g]),m&&!x&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const b=`${r}--${$}`,j=n.jsxs(n.Fragment,{children:[m&&n.jsx(i.default,{isOpen:g}),n.jsx(n.Fragment,{children:n.jsx(a.CSSTransition,{in:g,className:`${r} ${b}`,classNames:b,...u,...w,children:n.jsx(s.FocusTrap,{pause:!g,...k,children:n.jsx(c,{ref:O,animationName:r,animationDuration:l,backgroundColor:d,from:$,width:p,role:"dialog","aria-modal":"true","aria-label":"Side panel",children:n.jsx(f,{className:`${r}-content`,children:h})})})})})]});return v?t.createPortal(j,document.body):j};exports.OffCanvas=m,exports.default=m;

package/esm/components/FocusTrap.js

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

package/esm/components/Modal/index.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as n,Fragment as f}from"react/jsx-runtime";import{useEffect as w}from"react";import{createPortal as b}from"react-dom";import{CSSTransition as y}from"react-transition-group";import e,{css as v,createGlobalStyle as d}from"styled-components";import k from"../../icons/components/CloseIcon.js";import{resetButtonStyle as T}from"../../utils/utils.js";import{FocusTrap as E}from"../FocusTrap.js";const s=v`
+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`
   .backgroundTransition-enter {
     opacity: 0;
   }
@@ -16,7 +16,7 @@ import{jsx as t,jsxs as n,Fragment as f}from"react/jsx-runtime";import{useEffect
     opacity: 0;
     transition: opacity 0.25s ease-in-out;
   }
-`,C=e.div`
+`,S=e.div`
   ${s}
   position: fixed;
   width: 100%;
@@ -24,7 +24,7 @@ import{jsx as t,jsxs as n,Fragment as f}from"react/jsx-runtime";import{useEffect
   top: 0;
   left: 0;
   z-index: 200;
-`,S=e.div`
+`,P=e.div`
   z-index: -1;
   position: absolute;
   width: 100%;
@@ -54,7 +54,7 @@ import{jsx as t,jsxs as n,Fragment as f}from"react/jsx-runtime";import{useEffect
     min-width: 355px;
   }
 `,j=e.button`
-  ${T}
+  ${E}
   display: flex;
   justify-self: flex-end;
 
@@ -77,6 +77,6 @@ import{jsx as t,jsxs as n,Fragment as f}from"react/jsx-runtime";import{useEffect
         padding-right: 15px !important;
     `}
   }
-`,O=d`
+`,F=d`
   ${s}
-`,l=({children:c,isOpen:i,contentStyles:p,withPortal:m=!1,withCloseIcon:u=!0,onClose:o,...g})=>{w(()=>{const a=x=>{x.key==="Escape"&&i&&o()};return i&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[o,i]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=t(y,{in:i,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:n(f,{children:[t(O,{}),n(C,{...g,children:[t(S,{"data-testid":"background",onClick:o}),t(E,{pause:!i,children:n($,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[u&&t(j,{onClick:o,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(k,{})}),c]})}),t(z,{})]})]})});return m&&h?b(r,document.body):r};export{l as Modal,l as default};
+`,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};

package/esm/components/OffCanvas/index.js

@@ -1,4 +1,4 @@
-import{jsxs as x,Fragment as u,jsx as n}from"react/jsx-runtime";import{useRef as k,useEffect as b}from"react";import{createPortal as O}from"react-dom";import h from"styled-components";import{CSSTransition as C}from"react-transition-group";import y from"./Overlay.js";import{useOutsideClick as E}from"./useClickOutside.js";import{FocusTrap as N}from"../FocusTrap.js";const P="offCanvasAnimation",S={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},D=h.div`
+import{jsxs as k,Fragment as u,jsx as n}from"react/jsx-runtime";import{useRef as b,useEffect as O}from"react";import{createPortal as C}from"react-dom";import h from"styled-components";import{CSSTransition as y}from"react-transition-group";import E from"./Overlay.js";import{useOutsideClick as N}from"./useClickOutside.js";import{FocusTrap as P}from"../FocusTrap.js";const D="offCanvasAnimation",S={timeout:{enter:300,exit:300},mountOnEnter:!0,unmountOnExit:!0},T=h.div`
   ${({animationName:t,animationDuration:s,width:e,from:o,backgroundColor:l,theme:i})=>`
     position: fixed;
     z-index: 1001;
@@ -54,4 +54,4 @@ import{jsxs as x,Fragment as u,jsx as n}from"react/jsx-runtime";import{useRef as
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-`,$=({animationName:t=P,animationDuration:s=300,backgroundColor:e,backgroundOverlay:o,children:l,from:i="right",isOpen:r,onClickOutside:a,width:g="375px",withPortal:p,transitionProps:v})=>{const m=k(null);E(m,()=>a?.()),b(()=>{const c=w=>{w.key==="Escape"&&r&&a?.()};return r&&window.addEventListener("keydown",c),()=>{window.removeEventListener("keydown",c)}},[a,r]),o&&!a&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const d=`${t}--${i}`,f=x(u,{children:[o&&n(y,{isOpen:r}),n(u,{children:n(C,{in:r,className:`${t} ${d}`,classNames:d,...S,...v,children:n(N,{pause:!r,children:n(D,{ref:m,animationName:t,animationDuration:s,backgroundColor:e,from:i,width:g,role:"dialog","aria-modal":"true","aria-label":"Side panel",children:n(j,{className:`${t}-content`,children:l})})})})})]});return p?O(f,document.body):f};export{$ as OffCanvas,$ as default};
+`,$=({animationName:t=D,animationDuration:s=300,backgroundColor:e,backgroundOverlay:o,children:l,from:i="right",isOpen:r,onClickOutside:a,width:p="375px",withPortal:g,transitionProps:v,focusTrapProps:w={}})=>{const m=b(null);N(m,()=>a?.()),O(()=>{const c=x=>{x.key==="Escape"&&r&&a?.()};return r&&window.addEventListener("keydown",c),()=>{window.removeEventListener("keydown",c)}},[a,r]),o&&!a&&console.error("Please provide a clickOutside handler when using backgroundOverlay option in OffCanvas component");const d=`${t}--${i}`,f=k(u,{children:[o&&n(E,{isOpen:r}),n(u,{children:n(y,{in:r,className:`${t} ${d}`,classNames:d,...S,...v,children:n(P,{pause:!r,...w,children:n(T,{ref:m,animationName:t,animationDuration:s,backgroundColor:e,from:i,width:p,role:"dialog","aria-modal":"true","aria-label":"Side panel",children:n(j,{className:`${t}-content`,children:l})})})})})]});return g?C(f,document.body):f};export{$ as OffCanvas,$ as default};

package/package.json

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

package/package.json.tmp

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

package/types/components/FocusTrap.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-interface FocusTrapProps {
+export interface FocusTrapProps {
     children: React.ReactNode;
     pause?: boolean;
+    autoFocusOnOpen?: 'firstElem' | 'firstInput' | 'none';
+    restoreFocusOnClose?: boolean;
 }
-export declare const FocusTrap: ({ children, pause }: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const FocusTrap: ({ children, pause, autoFocusOnOpen, restoreFocusOnClose, }: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { FocusTrapProps } from '../FocusTrap';
 export interface ModalProps {
     title?: string;
     children: ReactNode;
@@ -7,6 +8,7 @@ export interface ModalProps {
     onClose(): void;
     contentStyles?: object;
     withCloseIcon?: boolean;
+    focusTrapProps?: Omit<FocusTrapProps, 'children' | 'pause'>;
 }
-export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ children, isOpen, contentStyles, withPortal, withCloseIcon, onClose, focusTrapProps, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { FocusTrapProps } from '../FocusTrap';
 export type DIRECTION = 'left' | 'right';
 type TransitionProps = Partial<Pick<CSSTransitionProps, 'timeout' | 'classNames' | 'addEndListener' | 'appear' | 'mountOnEnter'>>;
 export interface OffCanvasProps {
@@ -14,6 +15,7 @@ export interface OffCanvasProps {
     width?: string;
     withPortal?: boolean;
     transitionProps?: TransitionProps;
+    focusTrapProps?: Omit<FocusTrapProps, 'children' | 'pause'>;
 }
-export declare const OffCanvas: ({ animationName, animationDuration, backgroundColor, backgroundOverlay, children, from, isOpen, onClickOutside, width, withPortal, transitionProps, }: OffCanvasProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OffCanvas: ({ animationName, animationDuration, backgroundColor, backgroundOverlay, children, from, isOpen, onClickOutside, width, withPortal, transitionProps, focusTrapProps, }: OffCanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default OffCanvas;