react-hooks-use-modal - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/index.js

@@ -1,1 +0,1 @@
-var e=require("deepmerge"),t=require("react"),r=require("react-dom"),n=require("body-scroll-lock"),l=require("focus-trap");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e),c=o(t),i={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},u=function(e){return c.default.createElement("div",{style:i},e.children)},d={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},s=function(){return c.default.createElement("div",{style:d})},f=function(e){return c.default.createElement(t.Fragment,null,e.children)};function p(){return p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},p.apply(this,arguments)}var v=function(e){var o=e.children,a=e.isOpen,i=e.close,u=e.elementId,d=void 0===u?"root":u,s=e.title,f=e.description,v=e.preventScroll,m=e.focusTrapOptions,h=e.components,b=t.useRef(null);return function(e,r,n){t.useEffect(function(){if(r&&null!==e.current){var t=l.createFocusTrap(e.current,p({fallbackFocus:e.current},n));return t.activate(),setTimeout(function(){document.activeElement===e.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){t.deactivate()}}},[n,r,e])}(b,a,p({onDeactivate:i,clickOutsideDeactivates:!0},m)),function(e,r,l){t.useEffect(function(){if(null!==e.current)return l?(r?n.disableBodyScroll(e.current,{reserveScrollBarGap:!0}):n.enableBodyScroll(e.current),function(){n.clearAllBodyScrollLocks()}):void 0},[r,l,e])}(b,a,v),!1===a?null:r.createPortal(c.default.createElement(h.Wrapper,null,c.default.createElement(h.Overlay,null),c.default.createElement("div",{ref:b,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},c.default.createElement(h.Modal,{title:s,description:f,close:i},o))),document.getElementById(d))},m=t.createContext({}),h=["children"];exports.ModalProvider=function(e){var t=e.children,r=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(l[r]=e[r]);return l}(e,h);return c.default.createElement(m.Provider,{value:r},t)},exports.useModal=function(e,r){var n,l,o;void 0===e&&(e="root"),void 0===r&&(r={});var i=a.default(t.useContext(m),r),d=i.preventScroll,p=void 0!==d&&d,h=i.focusTrapOptions,b=void 0===h?{}:h,y=i.components,g=void 0===y?{}:y,O=t.useState(!1),E=O[0],k=O[1],x=t.useCallback(function(){k(!0)},[k]),w=t.useCallback(function(){k(!1)},[k]),S=null!=(n=g.Wrapper)?n:u,I=null!=(l=g.Overlay)?l:s,C=null!=(o=g.Modal)?o:f;return[t.useCallback(function(t){return c.default.createElement(v,{isOpen:E,close:w,elementId:e,title:t.title,description:t.description,preventScroll:p,focusTrapOptions:b,components:{Modal:C,Overlay:I,Wrapper:S}},t.children)},[C,I,S,w,e,b,E,p]),x,w,E]};
+var e=require("react"),t=require("react-dom"),n=require("body-scroll-lock"),r=require("focus-trap");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),a={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},c=function(e){return o.default.createElement("div",{style:a},e.children)},i={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},u=function(){return o.default.createElement("div",{style:i})},s=function(t){return o.default.createElement(e.Fragment,null,t.children)};function f(){return f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},f.apply(this,arguments)}var d=function(l){var a=l.children,c=l.isOpen,i=l.close,u=l.elementId,s=void 0===u?"root":u,d=l.title,p=l.description,v=l.preventScroll,m=l.focusTrapOptions,h=l.components,b=e.useRef(null);return function(t,n,l){e.useEffect(function(){if(n&&null!==t.current){var e=r.createFocusTrap(t.current,f({fallbackFocus:t.current},l));return e.activate(),setTimeout(function(){document.activeElement===t.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){e.deactivate()}}},[l,n,t])}(b,c,e.useMemo(function(){return f({onDeactivate:i,clickOutsideDeactivates:!0},m)},[i,m])),function(t,r,l){e.useEffect(function(){if(null!==t.current)return l?(r?n.disableBodyScroll(t.current,{reserveScrollBarGap:!0}):n.enableBodyScroll(t.current),function(){n.clearAllBodyScrollLocks()}):void 0},[r,l,t])}(b,c,v),!1===c?null:t.createPortal(o.default.createElement(h.Wrapper,null,o.default.createElement(h.Overlay,null),o.default.createElement("div",{ref:b,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},o.default.createElement(h.Modal,{title:d,description:p,close:i},a))),document.getElementById(s))},p=e.createContext({}),v=["children"],m={preventScroll:!1,focusTrapOptions:{},components:{}};exports.ModalProvider=function(e){var t=e.children,n=function(e,t){if(null==e)return{};var n,r,l={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(l[n]=e[n]);return l}(e,v);return o.default.createElement(p.Provider,{value:n},t)},exports.useModal=function(t,n){var r,l,a;void 0===t&&(t="root");var i=e.useContext(p),f=e.useMemo(function(){return Object.assign({},m,i,n)},[i,n]),v=f.preventScroll,h=f.focusTrapOptions,b=f.components,y=e.useState(!1),O=y[0],g=y[1],E=e.useCallback(function(){g(!0)},[g]),k=e.useCallback(function(){g(!1)},[g]),x=null!=(r=b.Wrapper)?r:c,S=null!=(l=b.Overlay)?l:u,w=null!=(a=b.Modal)?a:s;return[e.useCallback(function(e){return o.default.createElement(d,{isOpen:O,close:k,elementId:t,title:e.title,description:e.description,preventScroll:v,focusTrapOptions:h,components:{Modal:w,Overlay:S,Wrapper:x}},e.children)},[w,S,x,k,t,h,O,v]),E,k,O]};

dist/index.modern.js

@@ -1,1 +0,1 @@
-import e from"deepmerge";import t,{Fragment as n,useEffect as r,useRef as o,createContext as i,useContext as l,useState as c,useCallback as a}from"react";import{createPortal as u}from"react-dom";import{disableBodyScroll as s,enableBodyScroll as d,clearAllBodyScrollLocks as f}from"body-scroll-lock";import{createFocusTrap as p}from"focus-trap";var m={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},v=function(e){return t.createElement("div",{style:m},e.children)},h={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},g=function(){return t.createElement("div",{style:h})},y=function(e){return t.createElement(n,null,e.children)};function O(){return O=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},O.apply(this,arguments)}var b=function(e){var n=e.children,i=e.isOpen,l=e.close,c=e.elementId,a=void 0===c?"root":c,m=e.title,v=e.description,h=e.preventScroll,g=e.focusTrapOptions,y=e.components,b=o(null);return function(e,t,n){r(function(){if(t&&null!==e.current){var r=p(e.current,O({fallbackFocus:e.current},n));return r.activate(),setTimeout(function(){document.activeElement===e.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){r.deactivate()}}},[n,t,e])}(b,i,O({onDeactivate:l,clickOutsideDeactivates:!0},g)),function(e,t,n){r(function(){if(null!==e.current)return n?(t?s(e.current,{reserveScrollBarGap:!0}):d(e.current),function(){f()}):void 0},[t,n,e])}(b,i,h),!1===i?null:u(t.createElement(y.Wrapper,null,t.createElement(y.Overlay,null),t.createElement("div",{ref:b,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},t.createElement(y.Modal,{title:m,description:v,close:l},n))),document.getElementById(a))},E=i({}),w=["children"],I=function(e){var n=e.children,r=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}(e,w);return t.createElement(E.Provider,{value:r},n)},x=function(n,r){var o,i,u;void 0===n&&(n="root"),void 0===r&&(r={});var s=e(l(E),r),d=s.preventScroll,f=void 0!==d&&d,p=s.focusTrapOptions,m=void 0===p?{}:p,h=s.components,O=void 0===h?{}:h,w=c(!1),I=w[0],x=w[1],k=a(function(){x(!0)},[x]),S=a(function(){x(!1)},[x]),T=null!=(o=O.Wrapper)?o:v,j=null!=(i=O.Overlay)?i:g,W=null!=(u=O.Modal)?u:y;return[a(function(e){return t.createElement(b,{isOpen:I,close:S,elementId:n,title:e.title,description:e.description,preventScroll:f,focusTrapOptions:m,components:{Modal:W,Overlay:j,Wrapper:T}},e.children)},[W,j,T,S,n,m,I,f]),k,S,I]};export{I as ModalProvider,x as useModal};
+import e,{Fragment as t,useEffect as n,useRef as r,useMemo as o,createContext as l,useContext as i,useState as c,useCallback as a}from"react";import{createPortal as u}from"react-dom";import{disableBodyScroll as s,enableBodyScroll as f,clearAllBodyScrollLocks as p}from"body-scroll-lock";import{createFocusTrap as d}from"focus-trap";var m={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},v=function(t){return e.createElement("div",{style:m},t.children)},h={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},O=function(){return e.createElement("div",{style:h})},b=function(n){return e.createElement(t,null,n.children)};function g(){return g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},g.apply(this,arguments)}var y=function(t){var l=t.children,i=t.isOpen,c=t.close,a=t.elementId,m=void 0===a?"root":a,v=t.title,h=t.description,O=t.preventScroll,b=t.focusTrapOptions,y=t.components,E=r(null);return function(e,t,r){n(function(){if(t&&null!==e.current){var n=d(e.current,g({fallbackFocus:e.current},r));return n.activate(),setTimeout(function(){document.activeElement===e.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){n.deactivate()}}},[r,t,e])}(E,i,o(function(){return g({onDeactivate:c,clickOutsideDeactivates:!0},b)},[c,b])),function(e,t,r){n(function(){if(null!==e.current)return r?(t?s(e.current,{reserveScrollBarGap:!0}):f(e.current),function(){p()}):void 0},[t,r,e])}(E,i,O),!1===i?null:u(e.createElement(y.Wrapper,null,e.createElement(y.Overlay,null),e.createElement("div",{ref:E,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},e.createElement(y.Modal,{title:v,description:h,close:c},l))),document.getElementById(m))},E=l({}),w=["children"],I=function(t){var n=t.children,r=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(o[n]=e[n]);return o}(t,w);return e.createElement(E.Provider,{value:r},n)},x={preventScroll:!1,focusTrapOptions:{},components:{}},k=function(t,n){var r,l,u;void 0===t&&(t="root");var s=i(E),f=o(function(){return Object.assign({},x,s,n)},[s,n]),p=f.preventScroll,d=f.focusTrapOptions,m=f.components,h=c(!1),g=h[0],w=h[1],I=a(function(){w(!0)},[w]),k=a(function(){w(!1)},[w]),S=null!=(r=m.Wrapper)?r:v,T=null!=(l=m.Overlay)?l:O,j=null!=(u=m.Modal)?u:b;return[a(function(n){return e.createElement(y,{isOpen:g,close:k,elementId:t,title:n.title,description:n.description,preventScroll:p,focusTrapOptions:d,components:{Modal:j,Overlay:T,Wrapper:S}},n.children)},[j,T,S,k,t,d,g,p]),I,k,g]};export{I as ModalProvider,k as useModal};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("deepmerge"),require("react"),require("react-dom"),require("body-scroll-lock"),require("focus-trap")):"function"==typeof define&&define.amd?define(["exports","deepmerge","react","react-dom","body-scroll-lock","focus-trap"],t):t((e||self).reactHooksUseModal={},e.deepmerge,e.react,e.reactDom,e.bodyScrollLock,e.focusTrap)}(this,function(e,t,n,r,o,l){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(t),i=a(n),u={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},d=function(e){return i.default.createElement("div",{style:u},e.children)},s={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},f=function(){return i.default.createElement("div",{style:s})},p=function(e){return i.default.createElement(n.Fragment,null,e.children)};function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}var v=function(e){var t=e.children,a=e.isOpen,c=e.close,u=e.elementId,d=void 0===u?"root":u,s=e.title,f=e.description,p=e.preventScroll,v=e.focusTrapOptions,h=e.components,b=n.useRef(null);return function(e,t,r){n.useEffect(function(){if(t&&null!==e.current){var n=l.createFocusTrap(e.current,m({fallbackFocus:e.current},r));return n.activate(),setTimeout(function(){document.activeElement===e.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){n.deactivate()}}},[r,t,e])}(b,a,m({onDeactivate:c,clickOutsideDeactivates:!0},v)),function(e,t,r){n.useEffect(function(){if(null!==e.current)return r?(t?o.disableBodyScroll(e.current,{reserveScrollBarGap:!0}):o.enableBodyScroll(e.current),function(){o.clearAllBodyScrollLocks()}):void 0},[t,r,e])}(b,a,p),!1===a?null:r.createPortal(i.default.createElement(h.Wrapper,null,i.default.createElement(h.Overlay,null),i.default.createElement("div",{ref:b,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},i.default.createElement(h.Modal,{title:s,description:f,close:c},t))),document.getElementById(d))},h=n.createContext({}),b=["children"];e.ModalProvider=function(e){var t=e.children,n=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(o[n]=e[n]);return o}(e,b);return i.default.createElement(h.Provider,{value:n},t)},e.useModal=function(e,t){var r,o,l;void 0===e&&(e="root"),void 0===t&&(t={});var a=c.default(n.useContext(h),t),u=a.preventScroll,s=void 0!==u&&u,m=a.focusTrapOptions,b=void 0===m?{}:m,y=a.components,g=void 0===y?{}:y,O=n.useState(!1),k=O[0],E=O[1],x=n.useCallback(function(){E(!0)},[E]),S=n.useCallback(function(){E(!1)},[E]),w=null!=(r=g.Wrapper)?r:d,T=null!=(o=g.Overlay)?o:f,I=null!=(l=g.Modal)?l:p;return[n.useCallback(function(t){return i.default.createElement(v,{isOpen:k,close:S,elementId:e,title:t.title,description:t.description,preventScroll:s,focusTrapOptions:b,components:{Modal:I,Overlay:T,Wrapper:w}},t.children)},[I,T,w,S,e,b,k,s]),x,S,k]}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("body-scroll-lock"),require("focus-trap")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","body-scroll-lock","focus-trap"],t):t((e||self).reactHooksUseModal={},e.react,e.reactDom,e.bodyScrollLock,e.focusTrap)}(this,function(e,t,n,r,o){function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(t),a={position:"fixed",top:0,left:0,bottom:0,right:0,display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},i=function(e){return c.default.createElement("div",{style:a},e.children)},u={position:"fixed",top:0,left:0,bottom:0,right:0,backgroundColor:"rgba(0, 0, 0, 0.5)"},s=function(){return c.default.createElement("div",{style:u})},f=function(e){return c.default.createElement(t.Fragment,null,e.children)};function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(this,arguments)}var p=function(e){var l=e.children,a=e.isOpen,i=e.close,u=e.elementId,s=void 0===u?"root":u,f=e.title,p=e.description,m=e.preventScroll,v=e.focusTrapOptions,b=e.components,h=t.useRef(null);return function(e,n,r){t.useEffect(function(){if(n&&null!==e.current){var t=o.createFocusTrap(e.current,d({fallbackFocus:e.current},r));return t.activate(),setTimeout(function(){document.activeElement===e.current&&console.warn("[react-hooks-use-modal]: Since there were no focusable elements in the modal, the initial focus was on the containing element.\n  WAI-ARIA 1.1 states that there should be at least one focusable element in the modal.\n  https://www.w3.org/TR/wai-aria-1.1/#dialog")},100),function(){t.deactivate()}}},[r,n,e])}(h,a,t.useMemo(function(){return d({onDeactivate:i,clickOutsideDeactivates:!0},v)},[i,v])),function(e,n,o){t.useEffect(function(){if(null!==e.current)return o?(n?r.disableBodyScroll(e.current,{reserveScrollBarGap:!0}):r.enableBodyScroll(e.current),function(){r.clearAllBodyScrollLocks()}):void 0},[n,o,e])}(h,a,m),!1===a?null:n.createPortal(c.default.createElement(b.Wrapper,null,c.default.createElement(b.Overlay,null),c.default.createElement("div",{ref:h,role:"dialog","aria-modal":"true",tabIndex:-1,style:{position:"relative"}},c.default.createElement(b.Modal,{title:f,description:p,close:i},l))),document.getElementById(s))},m=t.createContext({}),v=["children"],b={preventScroll:!1,focusTrapOptions:{},components:{}};e.ModalProvider=function(e){var t=e.children,n=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)t.indexOf(n=l[r])>=0||(o[n]=e[n]);return o}(e,v);return c.default.createElement(m.Provider,{value:n},t)},e.useModal=function(e,n){var r,o,l;void 0===e&&(e="root");var a=t.useContext(m),u=t.useMemo(function(){return Object.assign({},b,a,n)},[a,n]),d=u.preventScroll,v=u.focusTrapOptions,h=u.components,y=t.useState(!1),g=y[0],O=y[1],k=t.useCallback(function(){O(!0)},[O]),E=t.useCallback(function(){O(!1)},[O]),x=null!=(r=h.Wrapper)?r:i,S=null!=(o=h.Overlay)?o:s,T=null!=(l=h.Modal)?l:f;return[t.useCallback(function(t){return c.default.createElement(p,{isOpen:g,close:E,elementId:e,title:t.title,description:t.description,preventScroll:d,focusTrapOptions:v,components:{Modal:T,Overlay:S,Wrapper:x}},t.children)},[T,S,x,E,e,v,g,d]),k,E,g]}});

package.json

 {
   "name": "react-hooks-use-modal",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "author": "shibe97",
@@ -21,3 +21,2 @@ "description": "A react hook which can open the modal with react-portal",
     "body-scroll-lock": "^3.1.5",
-    "deepmerge": "^4.2.2",
     "focus-trap": "^7.0.0"
@@ -24,0 +23,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

20138

increased by0.38%

Dependency count

4

decreased by-20%

Lines of code

139

increased by0.72%

Dependency changes

• - Removeddeepmerge@^4.2.2

• - Removeddeepmerge@4.3.1(transitive)