@trafilea/afrodita-components 6.28.6 → 6.28.7

package/build/index.d.ts

@@ -2944,12 +2944,14 @@ declare type ModalProps = {
     onClickOverlayHandler?: () => void;
     children: React__default.ReactNode;
     width?: string;
+    initialTop?: string;
 };
 interface ContainerProps {
     maxFullScreen: boolean;
     opened?: boolean;
     padding?: string;
     width?: string;
+    initialTop?: string;
 }
 declare const Overlay: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;

package/build/index.esm.js

@@ -14811,28 +14811,28 @@ var visibleStyle = function (_a) {
         ? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n      "]))) : css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n      "])));
 };
 var transformStyle = function (_a) {
-    var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
+    var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
     return opened
-        ? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
+        ? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        transform: ", ";\n        top: ", ";\n      "], ["\n        transform: ", ";\n        top: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n        transform: ", ";\n        top: ", ";\n      "], ["\n        transform: ", ";\n        top: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
 };
-var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
+var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
     var width = _a.width;
     return width
         ? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : mediaQueries({
         minWidth: ['90%', 'var(--component-modal-minWidth)'],
     });
 }, visibleStyle, transformStyle);
-var Overlay = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"])), visibleStyle);
+var Overlay = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"])), visibleStyle);
 var Modal = function (_a) {
-    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width;
-    var _d = useModal(id), opened = _d.opened, close = _d.close;
+    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
+    var _e = useModal(id), opened = _e.opened, close = _e.close;
     var onDismiss = function () {
         if (!dismissable) {
             return;
         }
         close();
     };
-    return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$z, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
+    return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$z, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
                     onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
                     onDismiss();
                 } }, void 0)] }), void 0));

package/build/index.js

@@ -14837,28 +14837,28 @@ var visibleStyle = function (_a) {
         ? css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n        opacity: 1;\n        pointer-events: all;\n      "], ["\n        opacity: 1;\n        pointer-events: all;\n      "]))) : css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n        opacity: 0;\n        pointer-events: none;\n      "], ["\n        opacity: 0;\n        pointer-events: none;\n      "])));
 };
 var transformStyle = function (_a) {
-    var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
+    var opened = _a.opened, maxFullScreen = _a.maxFullScreen, initialTop = _a.initialTop;
     return opened
-        ? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
+        ? css(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n        transform: ", ";\n        top: ", ";\n      "], ["\n        transform: ", ";\n        top: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n        transform: ", ";\n        top: ", ";\n      "], ["\n        transform: ", ";\n        top: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
 };
-var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
+var Container$z = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
     var width = _a.width;
     return width
         ? css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : mediaQueries({
         minWidth: ['90%', 'var(--component-modal-minWidth)'],
     });
 }, visibleStyle, transformStyle);
-var Overlay = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"])), visibleStyle);
+var Overlay = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n  ", "\n"])), visibleStyle);
 var Modal = function (_a) {
-    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width;
-    var _d = useModal(id), opened = _d.opened, close = _d.close;
+    var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
+    var _e = useModal(id), opened = _e.opened, close = _e.close;
     var onDismiss = function () {
         if (!dismissable) {
             return;
         }
         close();
     };
-    return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$z, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
+    return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$z, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
                     onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
                     onDismiss();
                 } }, void 0)] }), void 0));

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "6.28.6",
+  "version": "6.28.7",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",