@citygross/components 0.8.22 → 0.8.24

package/build/cjs/components/src/components/Modal/Modal.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var ModalOverlay = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__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  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\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  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkOverlay; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var ModalOverlay = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__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  justify-content: center;\n  align-items: center;\n\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\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  justify-content: center;\n  align-items: center;\n\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkOverlay; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
 var ModalContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"], ["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"])), function (props) { return props.background && "background: ".concat(props.background); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) {
     var _a, _b;
     return props.maxWidth

package/build/cjs/utils/build/index.js

@@ -368,6 +368,28 @@ var useOutsideClick = function (ref, callback) {
     });
 };
 
+var useFixedModalScroll = function (active, querySelector) {
+    var _a = React.useState(0), prevPosition = _a[0], setPrevPosition = _a[1];
+    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) {
+            setPrevPosition(pos);
+            selector.style.overflowY = 'scroll';
+            selector.style.position = 'fixed';
+            selector.style.top = -pos + 'px';
+        }
+        else {
+            selector.style.removeProperty('top');
+            selector.style.overflowY = 'auto';
+            selector.style.position = 'relative';
+            if (prevPosition) {
+                window.scrollTo(0, prevPosition);
+            }
+        }
+    }, [active, querySelector]);
+};
+
 function comparisonTypes(type) {
     switch (type) {
         case 'KGM':
@@ -18734,6 +18756,7 @@ index.__exports.moment = moment;
 index.__exports.nameRegex = nameRegex;
 index.__exports.phoneRegex = phoneRegex;
 index.__exports.useDetectDevice = useDetectDevice;
+index.__exports.useFixedModalScroll = useFixedModalScroll;
 index.__exports.useOutsideClick = useOutsideClick;
 var useWindowSize_1 = index.__exports.useWindowSize = useWindowSize;
 index.__exports.validateInput = validateInput;