@app-garage/modal - npm Package Compare versions

Comparing version 1.6.0 to 1.7.0

CHANGELOG.md

 # Change Log
 
+## 1.7.0
+
+### Minor Changes
+
+- [`4f2eeff`](https://github.com/electronic33/ag-ui-react/commit/4f2eeff59d4e500b0b2e85628c63b5055988011d) Thanks [@Levi1235](https://github.com/Levi1235)! - ds
+
+### Patch Changes
+
+- Updated dependencies [[`4f2eeff`](https://github.com/electronic33/ag-ui-react/commit/4f2eeff59d4e500b0b2e85628c63b5055988011d)]:
+  - @app-garage/button@1.8.0
+
 ## 1.6.0
@@ -4,0 +15,0 @@

dist/index.es.js

 import React, { useCallback, useEffect } from 'react';
 import ScrollLock from 'react-scrolllock';
 import classNames from 'classnames';
-import { useTransition, animated } from 'react-spring';
 import ReactDOM from 'react-dom';
 import { FocusLock } from '@app-garage/focus-trap';
 import { Button } from '@app-garage/button';
+import { motion } from 'framer-motion';
 
@@ -43,7 +43,2 @@ /*! *****************************************************************************
     }, [onClose]);
-    var transitions = useTransition(isOpen, null, {
-        from: { opacity: 0, transform: 'translateY(10px)' },
-        enter: { opacity: 1, transform: 'translateY(0px)' },
-        leave: { opacity: 0, transform: 'translateY(10px)' },
-    });
     useEffect(function () {
@@ -58,22 +53,17 @@ document.addEventListener('keydown', handleKeydown);
     }, []);
-    return (React.createElement(React.Fragment, null, transitions.map(function (_a) {
-        var item = _a.item, key = _a.key, props = _a.props;
-        var isTransitioning = transitions.length > 1;
-        return (item &&
-            ReactDOM.createPortal(React.createElement(FocusLock, { restoreFocus: true, initialFocusRef: initialFocusRef },
-                React.createElement(ScrollLock, null,
-                    React.createElement(animated.div, __assign({ key: key }, ariaProps, { className: classNames('modal-overlay', overlayClassName), onClick: function () {
-                            if (!isTransitioning && closeOnOutsideClick)
-                                onClose();
-                        }, style: { opacity: props.opacity } }),
-                        React.createElement(animated.div, { className: classNames('modal', modalClassName), onClick: stopPropagation, style: { transform: props.transform } }, children),
-                        withCloseButton && (React.createElement(Button, { onClick: function () {
-                                if (!isTransitioning)
-                                    onClose();
-                            }, className: "modal-button" },
-                            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));
-    })));
+    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,
+            React.createElement(motion.div, __assign({}, ariaProps, { className: classNames('modal-overlay', overlayClassName), onClick: function () {
+                    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),
+                withCloseButton && (React.createElement(Button, { onClick: function () {
+                        onClose();
+                    }, className: "modal-button" },
+                    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)));
 };
 
 export { Modal };

dist/index.js

@@ -8,6 +8,6 @@ 'use strict';
 var classNames = require('classnames');
-var reactSpring = require('react-spring');
 var ReactDOM = require('react-dom');
 var focusTrap = require('@app-garage/focus-trap');
 var button = require('@app-garage/button');
+var framerMotion = require('framer-motion');
 
@@ -55,7 +55,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
     }, [onClose]);
-    var transitions = reactSpring.useTransition(isOpen, null, {
-        from: { opacity: 0, transform: 'translateY(10px)' },
-        enter: { opacity: 1, transform: 'translateY(0px)' },
-        leave: { opacity: 0, transform: 'translateY(10px)' },
-    });
     React.useEffect(function () {
@@ -70,22 +65,17 @@ document.addEventListener('keydown', handleKeydown);
     }, []);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null, transitions.map(function (_a) {
-        var item = _a.item, key = _a.key, props = _a.props;
-        var isTransitioning = transitions.length > 1;
-        return (item &&
-            ReactDOM__default['default'].createPortal(React__default['default'].createElement(focusTrap.FocusLock, { restoreFocus: true, initialFocusRef: initialFocusRef },
-                React__default['default'].createElement(ScrollLock__default['default'], null,
-                    React__default['default'].createElement(reactSpring.animated.div, __assign({ key: key }, ariaProps, { className: classNames__default['default']('modal-overlay', overlayClassName), onClick: function () {
-                            if (!isTransitioning && closeOnOutsideClick)
-                                onClose();
-                        }, style: { opacity: props.opacity } }),
-                        React__default['default'].createElement(reactSpring.animated.div, { className: classNames__default['default']('modal', modalClassName), onClick: stopPropagation, style: { transform: props.transform } }, children),
-                        withCloseButton && (React__default['default'].createElement(button.Button, { onClick: function () {
-                                if (!isTransitioning)
-                                    onClose();
-                            }, className: "modal-button" },
-                            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));
-    })));
+    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,
+            React__default['default'].createElement(framerMotion.motion.div, __assign({}, ariaProps, { className: classNames__default['default']('modal-overlay', overlayClassName), onClick: function () {
+                    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),
+                withCloseButton && (React__default['default'].createElement(button.Button, { onClick: function () {
+                        onClose();
+                    }, className: "modal-button" },
+                    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)));
 };
 
 exports.Modal = Modal;

package.json

 {
   "name": "@app-garage/modal",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "author": "Matyas Furtos",
@@ -32,9 +32,9 @@ "license": "MIT",
   "dependencies": {
-    "@app-garage/button": "^1.6.0",
+    "@app-garage/button": "^1.8.0",
     "@app-garage/focus-trap": "^1.2.0",
     "classnames": "^2.3.1",
+    "framer-motion": "^4.1.17",
     "react-dom": "17.0.2",
     "react-icons": "^4.2.0",
-    "react-scrolllock": "^5.0.1",
-    "react-spring": "^8.0.27"
+    "react-scrolllock": "^5.0.1"
   },
@@ -41,0 +41,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

14859

decreased by-3.73%

Lines of code

149

decreased by-11.31%

Dependency changes

• + Addedframer-motion@^4.1.17

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Addedframer-motion@4.1.17(transitive)

• + Addedframesync@5.3.0(transitive)

• + Addedhey-listen@1.0.8(transitive)

• + Addedpopmotion@9.3.6(transitive)

• + Addedstyle-value-types@4.1.4(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removedreact-spring@^8.0.27

• - Removed@babel/runtime@7.26.7(transitive)

• - Removedreact-spring@8.0.27(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@app-garage/button@^1.8.0