@app-garage/modal - npm Package Compare versions

Comparing version 1.7.0 to 2.0.0

CHANGELOG.md

 # Change Log
 
+## 2.0.0
+
+### Major Changes
+
+- [`16df675`](https://github.com/electronic33/ag-ui-react/commit/16df67519a37197acfffd86dd504ea4dcb6dcf72) Thanks [@Levi1235](https://github.com/Levi1235)! - sdas
+
 ## 1.7.0
@@ -4,0 +10,0 @@

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import ScrollLock from 'react-scrolllock';
@@ -7,3 +7,4 @@ import classNames from 'classnames';
 import { Button } from '@app-garage/button';
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useHotkeys, useStopPropagation } from '@app-garage/utils';
 
@@ -36,27 +37,29 @@ /*! *****************************************************************************
 
-var ESC_KEYCODE = 27;
 var Modal = function (_a) {
-    var initialFocusRef = _a.initialFocusRef, ariaProps = _a.ariaProps, overlayClassName = _a.overlayClassName, modalClassName = _a.modalClassName, onClose = _a.onClose, children = _a.children, isOpen = _a.isOpen, _b = _a.withCloseButton, withCloseButton = _b === void 0 ? true : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c;
-    var handleKeydown = useCallback(function (event) {
-        if (event.keyCode === ESC_KEYCODE) {
-            onClose();
-        }
-    }, [onClose]);
-    useEffect(function () {
-        document.addEventListener('keydown', handleKeydown);
-        return function () {
-            document.removeEventListener('keydown', handleKeydown);
-        };
-    }, [handleKeydown]);
-    var stopPropagation = useCallback(function (event) {
-        event.stopPropagation();
-    }, []);
-    var modalVariants = { open: { opacity: 1, y: '0px' }, closed: { opacity: 0, y: '10px' } };
-    return (React.createElement(React.Fragment, null, ReactDOM.createPortal(React.createElement(FocusLock, { restoreFocus: true, initialFocusRef: initialFocusRef },
-        React.createElement(ScrollLock, null,
+    var initialFocusRef = _a.initialFocusRef, ariaProps = _a.ariaProps, overlayClassName = _a.overlayClassName, modalClassName = _a.modalClassName, onClose = _a.onClose, children = _a.children, isOpen = _a.isOpen, _b = _a.withCloseButton, withCloseButton = _b === void 0 ? true : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, overlayTransition = _a.overlayTransition, transition = _a.transition;
+    useHotkeys([['Escape', function () { return onClose(); }]]);
+    var stopPropagation = useStopPropagation();
+    var backdrop = {
+        visible: { opacity: 1 },
+        hidden: { opacity: 0 },
+    };
+    var modal = {
+        hidden: {
+            y: '-10px',
+            opacity: 0,
+        },
+        visible: {
+            y: '0',
+            opacity: 1,
+            transition: { delay: 0.3 },
+        },
+    };
+    return ReactDOM.createPortal(React.createElement(AnimatePresence, { exitBeforeEnter: true }, isOpen && (React.createElement(FocusLock, { isDisabled: !isOpen, restoreFocus: true, initialFocusRef: initialFocusRef },
+        React.createElement(ScrollLock, { isActive: isOpen },
             React.createElement(motion.div, __assign({}, ariaProps, { className: classNames('modal-overlay', overlayClassName), onClick: function () {
-                    if (closeOnOutsideClick)
+                    if (closeOnOutsideClick) {
                         onClose();
-                } }),
-                React.createElement(motion.div, { className: classNames('modal', modalClassName), onClick: stopPropagation, initial: "closed", animate: isOpen ? 'open' : 'closed', variants: modalVariants, transition: { type: 'spring', stiffness: 350, damping: 40 } }, children),
+                    }
+                }, initial: "hidden", animate: "visible", exit: "hidden", variants: backdrop, transition: overlayTransition }),
+                React.createElement(motion.div, { className: classNames('modal', modalClassName), onClick: stopPropagation, variants: modal, transition: transition }, children),
                 withCloseButton && (React.createElement(Button, { onClick: function () {
@@ -66,5 +69,5 @@ onClose();
                     React.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
-                        React.createElement("path", { d: "M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z" }))))))), document.body)));
+                        React.createElement("path", { d: "M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z" }))))))))), document.body);
 };
 
 export { Modal };

dist/index.js

@@ -12,2 +12,3 @@ 'use strict';
 var framerMotion = require('framer-motion');
+var utils = require('@app-garage/utils');
 
@@ -47,27 +48,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var ESC_KEYCODE = 27;
 var Modal = function (_a) {
-    var initialFocusRef = _a.initialFocusRef, ariaProps = _a.ariaProps, overlayClassName = _a.overlayClassName, modalClassName = _a.modalClassName, onClose = _a.onClose, children = _a.children, isOpen = _a.isOpen, _b = _a.withCloseButton, withCloseButton = _b === void 0 ? true : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c;
-    var handleKeydown = React.useCallback(function (event) {
-        if (event.keyCode === ESC_KEYCODE) {
-            onClose();
-        }
-    }, [onClose]);
-    React.useEffect(function () {
-        document.addEventListener('keydown', handleKeydown);
-        return function () {
-            document.removeEventListener('keydown', handleKeydown);
-        };
-    }, [handleKeydown]);
-    var stopPropagation = React.useCallback(function (event) {
-        event.stopPropagation();
-    }, []);
-    var modalVariants = { open: { opacity: 1, y: '0px' }, closed: { opacity: 0, y: '10px' } };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, ReactDOM__default['default'].createPortal(React__default['default'].createElement(focusTrap.FocusLock, { restoreFocus: true, initialFocusRef: initialFocusRef },
-        React__default['default'].createElement(ScrollLock__default['default'], null,
+    var initialFocusRef = _a.initialFocusRef, ariaProps = _a.ariaProps, overlayClassName = _a.overlayClassName, modalClassName = _a.modalClassName, onClose = _a.onClose, children = _a.children, isOpen = _a.isOpen, _b = _a.withCloseButton, withCloseButton = _b === void 0 ? true : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, overlayTransition = _a.overlayTransition, transition = _a.transition;
+    utils.useHotkeys([['Escape', function () { return onClose(); }]]);
+    var stopPropagation = utils.useStopPropagation();
+    var backdrop = {
+        visible: { opacity: 1 },
+        hidden: { opacity: 0 },
+    };
+    var modal = {
+        hidden: {
+            y: '-10px',
+            opacity: 0,
+        },
+        visible: {
+            y: '0',
+            opacity: 1,
+            transition: { delay: 0.3 },
+        },
+    };
+    return ReactDOM__default['default'].createPortal(React__default['default'].createElement(framerMotion.AnimatePresence, { exitBeforeEnter: true }, isOpen && (React__default['default'].createElement(focusTrap.FocusLock, { isDisabled: !isOpen, restoreFocus: true, initialFocusRef: initialFocusRef },
+        React__default['default'].createElement(ScrollLock__default['default'], { isActive: isOpen },
             React__default['default'].createElement(framerMotion.motion.div, __assign({}, ariaProps, { className: classNames__default['default']('modal-overlay', overlayClassName), onClick: function () {
-                    if (closeOnOutsideClick)
+                    if (closeOnOutsideClick) {
                         onClose();
-                } }),
-                React__default['default'].createElement(framerMotion.motion.div, { className: classNames__default['default']('modal', modalClassName), onClick: stopPropagation, initial: "closed", animate: isOpen ? 'open' : 'closed', variants: modalVariants, transition: { type: 'spring', stiffness: 350, damping: 40 } }, children),
+                    }
+                }, initial: "hidden", animate: "visible", exit: "hidden", variants: backdrop, transition: overlayTransition }),
+                React__default['default'].createElement(framerMotion.motion.div, { className: classNames__default['default']('modal', modalClassName), onClick: stopPropagation, variants: modal, transition: transition }, children),
                 withCloseButton && (React__default['default'].createElement(button.Button, { onClick: function () {
@@ -77,5 +80,5 @@ onClose();
                     React__default['default'].createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 512 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
-                        React__default['default'].createElement("path", { d: "M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z" }))))))), document.body)));
+                        React__default['default'].createElement("path", { d: "M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z" }))))))))), document.body);
 };
 
 exports.Modal = Modal;

dist/src/modal.d.ts

 import React from 'react';
+import { Transition } from 'framer-motion';
 export interface ModalProps {
@@ -12,4 +13,6 @@ isOpen: boolean;
     closeOnOutsideClick?: boolean;
+    overlayTransition?: Transition;
+    transition?: Transition;
 }
-export declare const Modal: ({ initialFocusRef, ariaProps, overlayClassName, modalClassName, onClose, children, isOpen, withCloseButton, closeOnOutsideClick, }: ModalProps) => React.ReactElement;
+export declare const Modal: ({ initialFocusRef, ariaProps, overlayClassName, modalClassName, onClose, children, isOpen, withCloseButton, closeOnOutsideClick, overlayTransition, transition, }: ModalProps) => React.ReactElement;
 //# sourceMappingURL=modal.d.ts.map

package.json

 {
   "name": "@app-garage/modal",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "author": "Matyas Furtos",
@@ -34,2 +34,3 @@ "license": "MIT",
     "@app-garage/focus-trap": "^1.2.0",
+    "@app-garage/utils": "^1.3.0",
     "classnames": "^2.3.1",
@@ -36,0 +37,0 @@ "framer-motion": "^4.1.17",

No alert changes

Improved metrics

Total package byte prevSize

15419

increased by3.77%

Lines of code

158

increased by6.04%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@app-garage/utils@^1.3.0

• + Added@app-garage/utils@1.5.0(transitive)

• + Added@mantine/hooks@3.4.3(transitive)

• + Addedlodash.debounce@4.0.8(transitive)