@citygross/components 0.7.159 → 0.7.160

package/build/@types/components/SideModal/SideModal.d.ts

@@ -9,5 +9,7 @@ export declare type TSideModal = {
     slideFrom?: 'left' | 'right';
     overlayBackground?: string;
     maxWidth?: string;
+    maxHeight?: string;
+    fullViewportHeight?: boolean;
 };
-export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: TSideModal) => React.ReactPortal | null;
+export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, maxHeight, children }: TSideModal) => React.ReactPortal | null;

package/build/@types/components/SideModal/SideModal.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 declare const _default: {
-    component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
+    component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, maxHeight, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
     title: string;
 };
 export default _default;

package/build/@types/components/SideModal/SideModal.styles.d.ts

@@ -3,6 +3,7 @@ declare type TSideModalContainer = {
     background?: string;
     slideFrom?: 'left' | 'right';
     maxWidth?: string;
+    maxHeight?: string;
 };
 declare type TSideMoodalOverlay = {
     overlayBackground: string;

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

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SideModal = function (_a) {
     var _b, _c;
-    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
+    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
     var ref = React.useRef(null);
     var domSafe = typeof document !== 'undefined';
     return domSafe
@@ -25,7 +25,7 @@ var SideModal = function (_a) {
             }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
-            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
         : null;
 };
 

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

@@ -11,10 +11,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var SideModalOverlay = styled__default["default"](framerMotion.motion.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) { return props.overlayBackground; }, 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 SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
-}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) {
+    return props.maxHeight &&
+        "\n    max-height: ".concat(props.maxHeight, ";\n  ");
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 exports.SideModalContainer = SideModalContainer;

package/build/cjs/components/src/components/SideModal/SideModal.styles.js.map

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

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

@@ -6,7 +6,7 @@ import { theme } from '@citygross/design-tokens';
 
 var SideModal = function (_a) {
     var _b, _c;
-    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
+    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
     var ref = useRef(null);
     var domSafe = typeof document !== 'undefined';
     return domSafe
@@ -17,7 +17,7 @@ var SideModal = function (_a) {
             }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
-            React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+            React.createElement(SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
         : null;
 };
 

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

@@ -3,10 +3,13 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 
 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  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) { return props.overlayBackground; }, 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 SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n  ", ";\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    max-height: unset;\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
-}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) {
+    return props.maxHeight &&
+        "\n    max-height: ".concat(props.maxHeight, ";\n  ");
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 export { SideModalContainer, SideModalOverlay };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.159",
+  "version": "0.7.160",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "c1a37d9d5da6fb0afe59c6ce5bd2d7900683519b"
+  "gitHead": "fcdf1d8bd7d7acb07d4bc8573e68b4027e1c214c"
 }