@huksley/react-responsive-modal - npm Package Compare versions

Comparing version 6.3.2 to 6.3.3

dist/index.d.ts

 import React from 'react';
+export interface Config {
+    isStateful: boolean;
+}
+export declare function useForwardedRef<T>(forwardedRef: React.Ref<T>, config?: Config): React.MutableRefObject<T>;
 export interface ModalProps {
@@ -3,0 +7,0 @@ /**

dist/react-responsive-modal.cjs.development.js

@@ -12,3 +12,2 @@ 'use strict';
 var bodyScrollLock = require('body-scroll-lock');
-var useForwardedRef = _interopDefault(require('@bedrock-layout/use-forwarded-ref'));
 
@@ -274,2 +273,52 @@ function _extends() {
 
+function useStatefulRef(initialVal) {
+  if (initialVal === void 0) {
+    initialVal = null;
+  }
+
+  // eslint-disable-next-line prefer-const
+  var _React$useState = React__default.useState(initialVal),
+      cur = _React$useState[0],
+      setCur = _React$useState[1];
+
+  var _React$useRef = React__default.useRef({
+    current: cur
+  }),
+      ref = _React$useRef.current;
+
+  Object.defineProperty(ref, "current", {
+    get: function get() {
+      return cur;
+    },
+    set: function set(value) {
+      if (!Object.is(cur, value)) {
+        cur = value;
+        setCur(value);
+      }
+    }
+  });
+  return ref;
+}
+
+function useForwardedRef(forwardedRef, config) {
+  if (config === void 0) {
+    config = {
+      isStateful: true
+    };
+  }
+
+  var statefulRef = useStatefulRef(null);
+  var ref = React.useRef(null);
+  var innerRef = config.isStateful ? statefulRef : ref;
+  React__default.useEffect(function () {
+    if (!forwardedRef) return;
+
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
 var classes = {
@@ -474,2 +523,3 @@ root: 'react-responsive-modal-root',
 exports.default = Modal;
+exports.useForwardedRef = useForwardedRef;
 //# sourceMappingURL=react-responsive-modal.cjs.development.js.map

dist/react-responsive-modal.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),o=e(require("react-dom")),r=e(require("classnames")),l=require("body-scroll-lock"),a=e(require("@bedrock-layout/use-forwarded-ref"));function i(){return(i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var u=function(e){var n=e.classNames,o=e.styles,l=e.closeIcon,a=e.onClick;return t.createElement("button",{id:e.id,className:r(e.classes.closeButton,null==n?void 0:n.closeButton),style:null==o?void 0:o.closeButton,onClick:a,"data-testid":"close-button"},l||t.createElement("svg",{className:null==n?void 0:n.closeIcon,style:null==o?void 0:o.closeIcon,width:28,height:28,viewBox:"0 0 36 36","data-testid":"close-icon"},t.createElement("path",{d:"M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"})))},c="undefined"!=typeof window,d=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])'];function s(e){return null===e.offsetParent||"hidden"===getComputedStyle(e).visibility}function m(e){if("INPUT"!==e.tagName||"radio"!==e.type||!e.name)return!0;var n=(e.form||e.ownerDocument).querySelectorAll('input[type="radio"][name="'+e.name+'"]'),t=function(e,n){for(var t=0;t<e.length;t++)if(e[t].checked&&e[t].form===n)return e[t]}(n,e.form);return t===e||void 0===t&&n[0]===e}function v(e){for(var n=document.activeElement,t=e.querySelectorAll(d.join(",")),o=[],r=0;r<t.length;r++){var l=t[r];(n===l||!l.disabled&&f(l)>-1&&!s(l)&&m(l))&&o.push(l)}return o}function f(e){var n=parseInt(e.getAttribute("tabindex"),10);return isNaN(n)?function(e){return e.getAttribute("contentEditable")}(e)?0:e.tabIndex:n}var y=function(e){var t=e.container,o=e.initialFocusRef,r=n.useRef();return n.useEffect((function(){var e=function(e){null!=t&&t.current&&function(e,n){if(e&&"Tab"===e.key){if(!n||!n.contains)return process,!1;if(!n.contains(e.target))return!1;var t=v(n),o=t[0],r=t[t.length-1];e.shiftKey&&e.target===o?(r.focus(),e.preventDefault()):!e.shiftKey&&e.target===r&&(o.focus(),e.preventDefault())}}(e,t.current)};if(c&&document.addEventListener("keydown",e),c&&null!=t&&t.current){var n=function(){-1!==d.findIndex((function(e){var n;return null==(n=document.activeElement)?void 0:n.matches(e)}))&&(r.current=document.activeElement)};if(o)n(),requestAnimationFrame((function(){var e;null==(e=o.current)||e.focus()}));else{var l=v(t.current);l[0]&&(n(),l[0].focus())}}return function(){var n;c&&(document.removeEventListener("keydown",e),null==(n=r.current)||n.focus())}}),[t,o]),null},p=[],b={root:"react-responsive-modal-root",overlay:"react-responsive-modal-overlay",overlayAnimationIn:"react-responsive-modal-overlay-in",overlayAnimationOut:"react-responsive-modal-overlay-out",modalContainer:"react-responsive-modal-container",modalContainerCenter:"react-responsive-modal-containerCenter",modal:"react-responsive-modal-modal",modalAnimationIn:"react-responsive-modal-modal-in",modalAnimationOut:"react-responsive-modal-modal-out",closeButton:"react-responsive-modal-closeButton"},E=t.forwardRef((function(e,d){var s,m,v,f,E=e.open,h=e.center,C=e.blockScroll,I=void 0===C||C,A=e.closeOnEsc,g=void 0===A||A,k=e.closeOnOverlayClick,w=void 0===k||k,O=e.container,N=e.showCloseIcon,x=void 0===N||N,B=e.closeIconId,R=e.closeIcon,S=e.focusTrapped,q=void 0===S||S,L=e.initialFocusRef,D=void 0===L?void 0:L,j=e.animationDuration,M=void 0===j?300:j,P=e.classNames,F=e.styles,K=e.role,T=void 0===K?"dialog":K,G=e.ariaDescribedby,U=e.ariaLabelledby,_=e.containerId,z=e.modalId,H=e.onClose,J=e.onEscKeyDown,Q=e.onOverlayClick,V=e.onAnimationEnd,W=e.children,X=e.reserveScrollBarGap,Y=a(d),Z=n.useRef(null),$=n.useRef(null),ee=n.useRef(null);null===ee.current&&c&&(ee.current=document.createElement("div"));var ne=n.useState(!1),te=ne[0],oe=ne[1];!function(e,t){n.useEffect((function(){return t&&p.push(e),function(){var n;n=e,p=p.filter((function(e){return e!==n}))}}),[t,e])}(Z,E),function(e,t,o,r,a){var i=n.useRef(null);n.useEffect((function(){return t&&e.current&&r&&(i.current=e.current,l.disableBodyScroll(e.current,{reserveScrollBarGap:a})),function(){i.current&&(l.enableBodyScroll(i.current),i.current=null)}}),[t,o,e,r,a])}(Z,E,te,I,X);var re=function(e){27===e.keyCode&&p.length&&p[p.length-1]===Z&&(null==J||J(e),g&&H())};n.useEffect((function(){return function(){te&&(ee.current&&!O&&document.body.contains(ee.current)&&document.body.removeChild(ee.current),document.removeEventListener("keydown",re))}}),[te]),n.useEffect((function(){E&&!te&&(oe(!0),!ee.current||O||document.body.contains(ee.current)||document.body.appendChild(ee.current),document.addEventListener("keydown",re))}),[E]);var le=function(){$.current=!1},ae=O||ee.current,ie=E?null!=(s=null==P?void 0:P.overlayAnimationIn)?s:b.overlayAnimationIn:null!=(m=null==P?void 0:P.overlayAnimationOut)?m:b.overlayAnimationOut,ue=E?null!=(v=null==P?void 0:P.modalAnimationIn)?v:b.modalAnimationIn:null!=(f=null==P?void 0:P.modalAnimationOut)?f:b.modalAnimationOut;return te&&ae?o.createPortal(t.createElement("div",{className:r(b.root,null==P?void 0:P.root),style:null==F?void 0:F.root,"data-testid":"root"},t.createElement("div",{className:r(b.overlay,null==P?void 0:P.overlay),"data-testid":"overlay","aria-hidden":!0,style:i({animation:ie+" "+M+"ms"},null==F?void 0:F.overlay)}),t.createElement("div",{ref:Z,id:_,className:r(b.modalContainer,h&&b.modalContainerCenter,null==P?void 0:P.modalContainer),style:null==F?void 0:F.modalContainer,"data-testid":"modal-container",onClick:function(e){null===$.current&&($.current=!0),$.current?(null==Q||Q(e),w&&H(),$.current=null):$.current=null}},t.createElement("div",{ref:Y,className:r(b.modal,null==P?void 0:P.modal),style:i({animation:ue+" "+M+"ms"},null==F?void 0:F.modal),onMouseDown:le,onMouseUp:le,onClick:le,onAnimationEnd:function(){E||oe(!1),null==V||V()},id:z,role:T,"aria-modal":"true","aria-labelledby":U,"aria-describedby":G,"data-testid":"modal",tabIndex:-1},q&&t.createElement(y,{container:Y,initialFocusRef:D}),W,x&&t.createElement(u,{classes:b,classNames:P,styles:F,closeIcon:R,onClick:H,id:B})))),ae):null}));exports.Modal=E,exports.default=E;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),o=e(require("react-dom")),r=e(require("classnames")),l=require("body-scroll-lock");function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var i=function(e){var n=e.classNames,o=e.styles,l=e.closeIcon,a=e.onClick;return t.createElement("button",{id:e.id,className:r(e.classes.closeButton,null==n?void 0:n.closeButton),style:null==o?void 0:o.closeButton,onClick:a,"data-testid":"close-button"},l||t.createElement("svg",{className:null==n?void 0:n.closeIcon,style:null==o?void 0:o.closeIcon,width:28,height:28,viewBox:"0 0 36 36","data-testid":"close-icon"},t.createElement("path",{d:"M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"})))},u="undefined"!=typeof window,c=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])'];function d(e){return null===e.offsetParent||"hidden"===getComputedStyle(e).visibility}function s(e){if("INPUT"!==e.tagName||"radio"!==e.type||!e.name)return!0;var n=(e.form||e.ownerDocument).querySelectorAll('input[type="radio"][name="'+e.name+'"]'),t=function(e,n){for(var t=0;t<e.length;t++)if(e[t].checked&&e[t].form===n)return e[t]}(n,e.form);return t===e||void 0===t&&n[0]===e}function v(e){for(var n=document.activeElement,t=e.querySelectorAll(c.join(",")),o=[],r=0;r<t.length;r++){var l=t[r];(n===l||!l.disabled&&f(l)>-1&&!d(l)&&s(l))&&o.push(l)}return o}function f(e){var n=parseInt(e.getAttribute("tabindex"),10);return isNaN(n)?function(e){return e.getAttribute("contentEditable")}(e)?0:e.tabIndex:n}var m=function(e){var t=e.container,o=e.initialFocusRef,r=n.useRef();return n.useEffect((function(){var e=function(e){null!=t&&t.current&&function(e,n){if(e&&"Tab"===e.key){if(!n||!n.contains)return process,!1;if(!n.contains(e.target))return!1;var t=v(n),o=t[0],r=t[t.length-1];e.shiftKey&&e.target===o?(r.focus(),e.preventDefault()):!e.shiftKey&&e.target===r&&(o.focus(),e.preventDefault())}}(e,t.current)};if(u&&document.addEventListener("keydown",e),u&&null!=t&&t.current){var n=function(){-1!==c.findIndex((function(e){var n;return null==(n=document.activeElement)?void 0:n.matches(e)}))&&(r.current=document.activeElement)};if(o)n(),requestAnimationFrame((function(){var e;null==(e=o.current)||e.focus()}));else{var l=v(t.current);l[0]&&(n(),l[0].focus())}}return function(){var n;u&&(document.removeEventListener("keydown",e),null==(n=r.current)||n.focus())}}),[t,o]),null},y=[];function p(e,o){void 0===o&&(o={isStateful:!0});var r=function(e){void 0===e&&(e=null);var n=t.useState(e),o=n[0],r=n[1],l=t.useRef({current:o}).current;return Object.defineProperty(l,"current",{get:function(){return o},set:function(e){Object.is(o,e)||(o=e,r(e))}}),l}(null),l=n.useRef(null),a=o.isStateful?r:l;return t.useEffect((function(){e&&("function"==typeof e?e(a.current):e.current=a.current)})),a}var b={root:"react-responsive-modal-root",overlay:"react-responsive-modal-overlay",overlayAnimationIn:"react-responsive-modal-overlay-in",overlayAnimationOut:"react-responsive-modal-overlay-out",modalContainer:"react-responsive-modal-container",modalContainerCenter:"react-responsive-modal-containerCenter",modal:"react-responsive-modal-modal",modalAnimationIn:"react-responsive-modal-modal-in",modalAnimationOut:"react-responsive-modal-modal-out",closeButton:"react-responsive-modal-closeButton"},E=t.forwardRef((function(e,c){var d,s,v,f,E=e.open,h=e.center,C=e.blockScroll,I=void 0===C||C,A=e.closeOnEsc,g=void 0===A||A,k=e.closeOnOverlayClick,O=void 0===k||k,w=e.container,N=e.showCloseIcon,R=void 0===N||N,S=e.closeIconId,x=e.closeIcon,B=e.focusTrapped,L=void 0===B||B,j=e.initialFocusRef,q=void 0===j?void 0:j,D=e.animationDuration,P=void 0===D?300:D,F=e.classNames,M=e.styles,K=e.role,T=void 0===K?"dialog":K,G=e.ariaDescribedby,U=e.ariaLabelledby,_=e.containerId,z=e.modalId,H=e.onClose,J=e.onEscKeyDown,Q=e.onOverlayClick,V=e.onAnimationEnd,W=e.children,X=e.reserveScrollBarGap,Y=p(c),Z=n.useRef(null),$=n.useRef(null),ee=n.useRef(null);null===ee.current&&u&&(ee.current=document.createElement("div"));var ne=n.useState(!1),te=ne[0],oe=ne[1];!function(e,t){n.useEffect((function(){return t&&y.push(e),function(){var n;n=e,y=y.filter((function(e){return e!==n}))}}),[t,e])}(Z,E),function(e,t,o,r,a){var i=n.useRef(null);n.useEffect((function(){return t&&e.current&&r&&(i.current=e.current,l.disableBodyScroll(e.current,{reserveScrollBarGap:a})),function(){i.current&&(l.enableBodyScroll(i.current),i.current=null)}}),[t,o,e,r,a])}(Z,E,te,I,X);var re=function(e){27===e.keyCode&&y.length&&y[y.length-1]===Z&&(null==J||J(e),g&&H())};n.useEffect((function(){return function(){te&&(ee.current&&!w&&document.body.contains(ee.current)&&document.body.removeChild(ee.current),document.removeEventListener("keydown",re))}}),[te]),n.useEffect((function(){E&&!te&&(oe(!0),!ee.current||w||document.body.contains(ee.current)||document.body.appendChild(ee.current),document.addEventListener("keydown",re))}),[E]);var le=function(){$.current=!1},ae=w||ee.current,ie=E?null!=(d=null==F?void 0:F.overlayAnimationIn)?d:b.overlayAnimationIn:null!=(s=null==F?void 0:F.overlayAnimationOut)?s:b.overlayAnimationOut,ue=E?null!=(v=null==F?void 0:F.modalAnimationIn)?v:b.modalAnimationIn:null!=(f=null==F?void 0:F.modalAnimationOut)?f:b.modalAnimationOut;return te&&ae?o.createPortal(t.createElement("div",{className:r(b.root,null==F?void 0:F.root),style:null==M?void 0:M.root,"data-testid":"root"},t.createElement("div",{className:r(b.overlay,null==F?void 0:F.overlay),"data-testid":"overlay","aria-hidden":!0,style:a({animation:ie+" "+P+"ms"},null==M?void 0:M.overlay)}),t.createElement("div",{ref:Z,id:_,className:r(b.modalContainer,h&&b.modalContainerCenter,null==F?void 0:F.modalContainer),style:null==M?void 0:M.modalContainer,"data-testid":"modal-container",onClick:function(e){null===$.current&&($.current=!0),$.current?(null==Q||Q(e),O&&H(),$.current=null):$.current=null}},t.createElement("div",{ref:Y,className:r(b.modal,null==F?void 0:F.modal),style:a({animation:ue+" "+P+"ms"},null==M?void 0:M.modal),onMouseDown:le,onMouseUp:le,onClick:le,onAnimationEnd:function(){E||oe(!1),null==V||V()},id:z,role:T,"aria-modal":"true","aria-labelledby":U,"aria-describedby":G,"data-testid":"modal",tabIndex:-1},L&&t.createElement(m,{container:Y,initialFocusRef:q}),W,R&&t.createElement(i,{classes:b,classNames:F,styles:M,closeIcon:x,onClick:H,id:S})))),ae):null}));exports.Modal=E,exports.default=E,exports.useForwardedRef=p;
 //# sourceMappingURL=react-responsive-modal.cjs.production.min.js.map

dist/react-responsive-modal.esm.js

@@ -5,3 +5,2 @@ import React, { useRef, useEffect, useState } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import useForwardedRef from '@bedrock-layout/use-forwarded-ref';
 
@@ -267,2 +266,52 @@ function _extends() {
 
+function useStatefulRef(initialVal) {
+  if (initialVal === void 0) {
+    initialVal = null;
+  }
+
+  // eslint-disable-next-line prefer-const
+  var _React$useState = React.useState(initialVal),
+      cur = _React$useState[0],
+      setCur = _React$useState[1];
+
+  var _React$useRef = React.useRef({
+    current: cur
+  }),
+      ref = _React$useRef.current;
+
+  Object.defineProperty(ref, "current", {
+    get: function get() {
+      return cur;
+    },
+    set: function set(value) {
+      if (!Object.is(cur, value)) {
+        cur = value;
+        setCur(value);
+      }
+    }
+  });
+  return ref;
+}
+
+function useForwardedRef(forwardedRef, config) {
+  if (config === void 0) {
+    config = {
+      isStateful: true
+    };
+  }
+
+  var statefulRef = useStatefulRef(null);
+  var ref = useRef(null);
+  var innerRef = config.isStateful ? statefulRef : ref;
+  React.useEffect(function () {
+    if (!forwardedRef) return;
+
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
 var classes = {
@@ -466,3 +515,3 @@ root: 'react-responsive-modal-root',
 export default Modal;
-export { Modal };
+export { Modal, useForwardedRef };
 //# sourceMappingURL=react-responsive-modal.esm.js.map

package.json

 {
   "name": "@huksley/react-responsive-modal",
-  "version": "6.3.2",
+  "version": "6.3.3",
   "description": "A simple responsive and accessible react modal",
@@ -58,3 +58,2 @@ "license": "MIT",
   "dependencies": {
-    "@bedrock-layout/use-forwarded-ref": "^1.3.0",
     "body-scroll-lock": "^3.1.5",
@@ -61,0 +60,0 @@ "classnames": "^2.3.1"

No alert changes

Improved metrics

Total package byte prevSize

171853

increased by6.23%

Dependency count

4

decreased by-20%

Lines of code

1862

increased by7.51%

Dependency changes

• - Removed@bedrock-layout/use-forwarded-ref@^1.3.0

• - Removed@bedrock-layout/use-forwarded-ref@1.6.1(transitive)

• - Removed@bedrock-layout/use-stateful-ref@1.4.1(transitive)