Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-clear-modal

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-clear-modal - npm Package Compare versions

Comparing version 1.0.9 to 2.0.0

2

dist/index.d.ts

@@ -16,4 +16,4 @@ import React, { HTMLAttributes, ReactNode } from 'react';

} & HTMLAttributes<HTMLDivElement>;
declare function ReactClearModal({ isOpen, onRequestClose, closeTimeout, preRender, contentProps, children, parentElement, disableFocusOnContent, disableCloseOnEsc, disableCloseOnBgClick, disableBodyScrollOnOpen, disableRenderInPortal, ...wrapperProps }: ReactClearModalProps): React.JSX.Element | null;
declare function ReactClearModal({ isOpen, onRequestClose, closeTimeout, preRender, contentProps, children, parentElement, disableFocusOnContent, disableCloseOnEsc, disableCloseOnBgClick, disableBodyScrollOnOpen, disableRenderInPortal, onClick, style, ...wrapperProps }: ReactClearModalProps): React.JSX.Element | null;
declare const _default: React.MemoExoticComponent<typeof ReactClearModal>;
export default _default;

2

dist/index.esm.js

@@ -1,1 +0,1 @@

import e,{memo as t,useState as r,useRef as n,useCallback as o,useEffect as i}from"react";import{createPortal as l}from"react-dom";function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(){return f=Object.assign?Object.assign.bind():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},f.apply(this,arguments)}function s(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function y(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,l,u=[],c=!0,a=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(u.push(n.value),u.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(a)throw o}}return u}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return b(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return b(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var d=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal"];function p(t){var u=t.isOpen,a=void 0!==u&&u,b=t.onRequestClose,p=t.closeTimeout,O=t.preRender,m=void 0!==O&&O,v=t.contentProps,g=void 0===v?{}:v,j=t.children,h=t.parentElement,w=t.disableFocusOnContent,P=t.disableCloseOnEsc,C=t.disableCloseOnBgClick,S=t.disableBodyScrollOnOpen,E=t.disableRenderInPortal,k=s(t,d),I=y(r(E),2),x=I[0],D=I[1],A=n(null),R=n(null),T=o((function(e){var t;k.onClick&&k.onClick(e),!b||C||e.target===R.current||null!==(t=R.current)&&void 0!==t&&t.contains(e.target)||b()}),[k,b,C]),B=o((function(e){g.onKeyDown&&g.onKeyDown(e),!b||P||"Escape"!==e.code&&27!==e.keyCode||b()}),[g,b,P]),q=o((function(){return a||m?e.createElement("div",f({},k,{style:c({alignItems:"center",bottom:0,display:a?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},k.style),onClick:T}),e.createElement("div",f({},g,{style:c({margin:"auto"},g.style),onKeyDown:B,tabIndex:-1,ref:R}),j)):null}),[j,g,B,T,a,k,m]);if(i((function(){return p&&b&&(A.current=setTimeout(b,p)),function(){clearTimeout(A.current)}}),[p,b]),i((function(){var e;a&&!w&&(null===(e=R.current)||void 0===e||e.focus())}),[a,w]),i((function(){var e=document.body.style.overflow;return a&&S&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[a,S]),i((function(){E||D(!0)}),[E]),x){if(E)return q();var K="string"==typeof h?h?document.querySelector(h):null:h;return l(q(),K||document.body)}return null}var O=t(p);export{O as default};
import e,{memo as n,useState as t,useRef as o,useCallback as r,useEffect as l}from"react";import{createPortal as i}from"react-dom";var c=function(){return c=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},c.apply(this,arguments)};var u=n((function(n){var u=n.isOpen,a=void 0!==u&&u,s=n.onRequestClose,d=n.closeTimeout,f=n.preRender,y=void 0!==f&&f,p=n.contentProps,v=void 0===p?{}:p,b=n.children,m=n.parentElement,O=n.disableFocusOnContent,C=n.disableCloseOnEsc,g=n.disableCloseOnBgClick,h=n.disableBodyScrollOnOpen,w=n.disableRenderInPortal,E=n.onClick,P=n.style,x=function(e,n){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&n.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)n.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(t[o[r]]=e[o[r]])}return t}(n,["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal","onClick","style"]),S=function(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var o,r,l=t.call(e),i=[];try{for(;(void 0===n||n-- >0)&&!(o=l.next()).done;)i.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(t=l.return)&&t.call(l)}finally{if(r)throw r.error}}return i}(t(w),2),j=S[0],k=S[1],R=o(null),I=o(null),B=r((function(e){var n;E&&E(e),!s||g||e.target===I.current||(null===(n=I.current)||void 0===n?void 0:n.contains(e.target))||s()}),[E,s,g]),T=r((function(e){v.onKeyDown&&v.onKeyDown(e),!s||C||"Escape"!==e.code&&27!==e.keyCode||s()}),[v,s,C]),q=r((function(){return a||y?e.createElement("div",c({},x,{style:c({alignItems:"center",bottom:0,display:a?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},P||{}),onClick:B}),e.createElement("div",c({},v,{style:c({margin:"auto"},v.style),onKeyDown:T,tabIndex:-1,ref:I}),b)):null}),[b,v,T,B,a,x,P,y]);if(l((function(){return d&&s&&(R.current=setTimeout(s,d)),function(){clearTimeout(R.current)}}),[d,s]),l((function(){var e;a&&!O&&(null===(e=I.current)||void 0===e||e.focus())}),[a,O]),l((function(){var e=document.body.style.overflow;return a&&h&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[a,h]),l((function(){w||k(!0)}),[w]),j){if(w)return q();var D="string"==typeof m?m?document.querySelector(m):null:m;return i(q(),D||document.body)}return null}));export{u as default};

2

dist/index.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactClearModal=t(e.React,e.ReactDOM)}(this,(function(e,t){"use strict";function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function n(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(){return l=Object.assign?Object.assign.bind():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},l.apply(this,arguments)}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,i,u=[],c=!0,a=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(u.push(n.value),u.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(a)throw o}}return u}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var a=["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal"];function f(r){var o=r.isOpen,c=void 0!==o&&o,f=r.onRequestClose,s=r.closeTimeout,d=r.preRender,y=void 0!==d&&d,b=r.contentProps,p=void 0===b?{}:b,m=r.children,O=r.parentElement,v=r.disableFocusOnContent,g=r.disableCloseOnEsc,j=r.disableCloseOnBgClick,h=r.disableBodyScrollOnOpen,w=r.disableRenderInPortal,C=i(r,a),P=u(e.useState(w),2),E=P[0],S=P[1],k=e.useRef(null),R=e.useRef(null),x=e.useCallback((function(e){var t;C.onClick&&C.onClick(e),!f||j||e.target===R.current||null!==(t=R.current)&&void 0!==t&&t.contains(e.target)||f()}),[C,f,j]),D=e.useCallback((function(e){p.onKeyDown&&p.onKeyDown(e),!f||g||"Escape"!==e.code&&27!==e.keyCode||f()}),[p,f,g]),I=e.useCallback((function(){return c||y?e.createElement("div",l({},C,{style:n({alignItems:"center",bottom:0,display:c?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},C.style),onClick:x}),e.createElement("div",l({},p,{style:n({margin:"auto"},p.style),onKeyDown:D,tabIndex:-1,ref:R}),m)):null}),[m,p,D,x,c,C,y]);if(e.useEffect((function(){return s&&f&&(k.current=setTimeout(f,s)),function(){clearTimeout(k.current)}}),[s,f]),e.useEffect((function(){var e;c&&!v&&(null===(e=R.current)||void 0===e||e.focus())}),[c,v]),e.useEffect((function(){var e=document.body.style.overflow;return c&&h&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[c,h]),e.useEffect((function(){w||S(!0)}),[w]),E){if(w)return I();var T="string"==typeof O?O?document.querySelector(O):null:O;return t.createPortal(I(),T||document.body)}return null}return e.memo(f)}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ReactClearModal=t(e.React,e.ReactDOM)}(this,(function(e,t){"use strict";var n=function(){return n=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},n.apply(this,arguments)};return e.memo((function(o){var r=o.isOpen,l=void 0!==r&&r,i=o.onRequestClose,c=o.closeTimeout,u=o.preRender,a=void 0!==u&&u,s=o.contentProps,f=void 0===s?{}:s,d=o.children,y=o.parentElement,p=o.disableFocusOnContent,b=o.disableCloseOnEsc,m=o.disableCloseOnBgClick,v=o.disableBodyScrollOnOpen,O=o.disableRenderInPortal,C=o.onClick,g=o.style,h=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n}(o,["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal","onClick","style"]),w=function(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,l=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=l.next()).done;)i.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=l.return)&&n.call(l)}finally{if(r)throw r.error}}return i}(e.useState(O),2),E=w[0],R=w[1],k=e.useRef(null),P=e.useRef(null),x=e.useCallback((function(e){var t;C&&C(e),!i||m||e.target===P.current||(null===(t=P.current)||void 0===t?void 0:t.contains(e.target))||i()}),[C,i,m]),S=e.useCallback((function(e){f.onKeyDown&&f.onKeyDown(e),!i||b||"Escape"!==e.code&&27!==e.keyCode||i()}),[f,i,b]),j=e.useCallback((function(){return l||a?e.createElement("div",n({},h,{style:n({alignItems:"center",bottom:0,display:l?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},g||{}),onClick:x}),e.createElement("div",n({},f,{style:n({margin:"auto"},f.style),onKeyDown:S,tabIndex:-1,ref:P}),d)):null}),[d,f,S,x,l,h,g,a]);if(e.useEffect((function(){return c&&i&&(k.current=setTimeout(i,c)),function(){clearTimeout(k.current)}}),[c,i]),e.useEffect((function(){var e;l&&!p&&(null===(e=P.current)||void 0===e||e.focus())}),[l,p]),e.useEffect((function(){var e=document.body.style.overflow;return l&&v&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[l,v]),e.useEffect((function(){O||R(!0)}),[O]),E){if(O)return j();var T="string"==typeof y?y?document.querySelector(y):null:y;return t.createPortal(j(),T||document.body)}return null}))}));

20

package.json
{
"name": "react-clear-modal",
"version": "1.0.9",
"version": "2.0.0",
"description": "Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js",

@@ -13,4 +13,3 @@ "files": [

"scripts": {
"build": "rm -rf dist && yarn lint && yarn generate-types && rollup -c",
"generate-types": "tsc --emitDeclarationOnly",
"build": "rm -rf dist && yarn lint && rollup -c",
"lint": "eslint . --ext .tsx",

@@ -44,9 +43,6 @@ "prepare": "husky install",

"devDependencies": {
"@babel/cli": "^7.17.10",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.4.1",
"@rollup/plugin-typescript": "^11.1.0",
"@types/react": "^18.0.8",

@@ -56,3 +52,2 @@ "@types/react-dom": "^18.0.3",

"@typescript-eslint/parser": "^5.21.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^8.33.0",

@@ -71,8 +66,5 @@ "eslint-config-airbnb": "^19.0.4",

"rollup": "^3.13.0",
"rollup-plugin-terser": "^7.0.2",
"tslib": "^2.5.0",
"typescript": "^5.0.2"
},
"dependencies": {
"core-js": "^3.27.2"
},
"peerDependencies": {

@@ -79,0 +71,0 @@ "@types/react": "^16.8 || ^17 || ^18",

2

README.md
# react-clear-modal
[![npm version](https://img.shields.io/npm/v/react-clear-modal)](https://www.npmjs.com/package/react-clear-modal)
[![minified + gzip](https://img.shields.io/bundlephobia/minzip/react-clear-modal/latest)](https://bundlephobia.com/package/react-clear-modal)
[![minified + gzip](https://img.shields.io/bundlephobia/minzip/react-clear-modal/latest)](https://bundlephobia.com/package/react-clear-modal@latest)
[![typescript](https://badgen.net/npm/types/react-clear-modal)](https://unpkg.com/react-clear-modal/dist/index.d.ts)

@@ -6,0 +6,0 @@ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vadymshymko/react-clear-modal/blob/master/LICENSE)

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc