@citygross/components 0.14.8 → 0.14.10

package/build/es/components/src/components/Button/SaveButton.js

@@ -4,16 +4,21 @@ import { BasePrimaryButton, Loading, LoadingContainer, LoadingSpinner, ButtonChi
 import { BodyText } from '@citygross/typography';
 
 var SaveButton = function (_a) {
-    var _b, _c;
-    var afterSaveText = _a.afterSaveText, ariaLabel = _a.ariaLabel, beforeSaveText = _a.beforeSaveText, _d = _a.childGap, childGap = _d === void 0 ? 4 : _d, _e = _a.color, color = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.secondary) !== null && _c !== void 0 ? _c : '' : _e, fullWidth = _a.fullWidth, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onAnimationComplete = _a.onAnimationComplete, onClick = _a.onClick, _f = _a.onSavedColor, onSavedColor = _f === void 0 ? 'alertGreen' : _f, saved = _a.saved, _g = _a.size, size = _g === void 0 ? 'large' : _g, xsSize = _a.xsSize;
+    var _b, _c, _d;
+    var afterSaveText = _a.afterSaveText, ariaLabel = _a.ariaLabel, beforeSaveText = _a.beforeSaveText, _e = _a.childGap, childGap = _e === void 0 ? 4 : _e, _f = _a.color, color = _f === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.secondary) !== null && _c !== void 0 ? _c : '' : _f, fullWidth = _a.fullWidth, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onAnimationComplete = _a.onAnimationComplete, onClick = _a.onClick, _g = _a.onSavedColor, onSavedColor = _g === void 0 ? 'alertGreen' : _g, saved = _a.saved, _h = _a.size, size = _h === void 0 ? 'large' : _h, xsSize = _a.xsSize;
     useEffect(function () {
         var _a;
+        var timeoutId;
         if (!loading && saved) {
-            setTimeout(function () {
+            timeoutId = setTimeout(function () {
                 onAnimationComplete();
             }, (_a = theme === null || theme === void 0 ? void 0 : theme.animations) === null || _a === void 0 ? void 0 : _a.saveButtonAnimationComplete);
         }
-    }, [saved]);
+        return function () {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [saved, loading, (_d = theme === null || theme === void 0 ? void 0 : theme.animations) === null || _d === void 0 ? void 0 : _d.saveButtonAnimationComplete]);
     return (React.createElement(BasePrimaryButton, { "aria-label": ariaLabel, color: saved ? onSavedColor : color, disabled: loading || isDisabled, fullWidth: fullWidth, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: saved ? function () { } : function (e) { return onClick(e); }, size: size },
         loading && (React.createElement(Loading, null,
             React.createElement(LoadingContainer, { xsSize: xsSize, size: size },

package/build/es/components/src/components/Button/SaveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SaveButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/FormElements/Switch/Switch.styles.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 
 var SwitchWrapper = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"], ["\n  width: 42px;\n  height: 22px;\n  min-width: 42px;\n  position: relative;\n"])));

package/build/es/components/src/components/MenuListDropdown/MenuListDropdown.js

@@ -3,14 +3,15 @@ import { DropdownContainer, DropdownHeader, DropdownChildContainer } from './Men
 
 var MenuListDropdown = function (_a) {
     var children = _a.children, dropdownHeader = _a.dropdownHeader, isOpen = _a.isOpen, onClick = _a.onClick;
+    var easing = [0.04, 0.62, 0.23, 0.98];
     var variants = {
         closed: {
             height: 0,
-            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+            transition: { duration: 0.3, ease: easing }
         },
         open: {
             height: 'auto',
-            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+            transition: { duration: 0.3, ease: easing }
         }
     };
     return (React.createElement(DropdownContainer, null,

package/build/es/components/src/components/MenuListDropdown/MenuListDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuListDropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MenuListDropdown.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/MenuListDropdown/MenuListDropdown.styles.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 var DropdownContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var DropdownHeader = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));

package/build/es/components/src/components/RippleContainer/RippleContainer.styles.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled, { keyframes } from 'styled-components';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 var slide = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% { left: -100% }\n  100% { left: 120% }\n"], ["\n  0% { left: -100% }\n  100% { left: 120% }\n"])));
 var RippleContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"])), function (props) { var _a; return props.color ? props.color : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, slide, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.rippleTransition; });

package/build/es/components/src/components/SideModal/SideModal.js

@@ -1,23 +1,21 @@
 import { __rest, __assign } from '../../../../_virtual/_tslib.js';
 import React, { forwardRef } from 'react';
-import { AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
-import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
 import { theme } from '@citygross/design-tokens';
+import { AnimatePresence } from 'motion/react';
+import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
 
 var SideModal = forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h, props = __rest(_a, ["background", "children", "isVisible", "maxHeight", "maxWidth", "onBackdropClick", "overlayBackground", "querySelector", "slideFrom", "width"]);
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
+        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { key: "side-modal-overlay", animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
                 if (e.target === e.currentTarget) {
                     onBackdropClick();
                 }
-            }, overlayBackground: overlayBackground, ref: ref, transition: {
-                type: 'just'
-            } },
-            React.createElement(SideModalContainer, __assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
+            }, overlayBackground: overlayBackground, ref: ref, transition: { duration: 0.3, ease: 'easeOut' } },
+            React.createElement(SideModalContainer, __assign({ animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { duration: 0.3, ease: 'easeOut' }, width: width }, props), children)))), document.querySelector(querySelector) || document.body)
         : null;
 });
 SideModal.displayName = 'SideModal';

package/build/es/components/src/components/SideModal/SideModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SideModal/SideModal.styles.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  ", ";\n  justify-content: center;\n  align-items: center;\n  overscroll-behavior: none;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    max-height: unset;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) {
     return props.maxHeight &&

package/build/es/components/src/components/SlideInOutContainer/SlideInOutContainer.styles.js

@@ -1,5 +1,5 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled from 'styled-components';
 
 var SideModalContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  ", "\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])), function (_a) {

package/build/es/utils/build/index.js

@@ -370,7 +370,15 @@ var useFixedModalScroll = function (active, querySelector) {
     React.useEffect(function () {
         var pos = window === null || window === void 0 ? void 0 : window.scrollY;
         var selector = querySelector || (document === null || document === void 0 ? void 0 : document.body);
-        if (active && selector) {
+        if (!selector)
+            return;
+        var savedStyles = {
+            top: selector.style.top,
+            overflowY: selector.style.overflowY,
+            position: selector.style.position,
+            scrollY: pos
+        };
+        if (active) {
             setPrevPosition(pos);
             selector.style.overflowY = 'scroll';
             selector.style.position = 'fixed';
@@ -384,6 +392,28 @@ var useFixedModalScroll = function (active, querySelector) {
                 window.scrollTo(0, prevPosition);
             }
         }
+        return function () {
+            if (selector) {
+                if (savedStyles.top) {
+                    selector.style.top = savedStyles.top;
+                }
+                else {
+                    selector.style.removeProperty('top');
+                }
+                if (savedStyles.overflowY) {
+                    selector.style.overflowY = savedStyles.overflowY;
+                }
+                else {
+                    selector.style.overflowY = 'auto';
+                }
+                if (savedStyles.position) {
+                    selector.style.position = savedStyles.position;
+                }
+                else {
+                    selector.style.position = 'relative';
+                }
+            }
+        };
     }, [active, querySelector]);
 };