@dreamcommerce/aurora 0.3.4-17 → 0.3.4-170

package/build/esm/src/components/modal/components/content.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import cssClasses from '../../../css/modal/main.module.less.js';
+
+var Content = function (_a) {
+    var children = _a.children;
+    return React.createElement("section", { className: cssClasses['modal-window__content'] }, children);
+};
+
+export default Content;
+//# sourceMappingURL=content.js.map

package/build/esm/src/components/modal/components/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../../../src/components/modal/components/content.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cssClasses from '@css/modal/main.module.less';\nimport { IContentProps } from '@components/modal/types';\n\nconst Content: FC<IContentProps> = ({ children }) => {\n    return <section className={cssClasses['modal-window__content']}>{children}</section>;\n};\n\nexport default Content;\n"],"names":[],"mappings":";;;IAIM,OAAO,GAAsB,UAAC,EAAY;QAAV,sBAAQ;IAC1C,OAAO,iCAAS,SAAS,EAAE,UAAU,CAAC,uBAAuB,CAAC,IAAG,QAAQ,CAAW,CAAC;AACzF;;;;"}

package/build/esm/src/components/modal/components/footer.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IFooterProps } from "../types";
+declare const Footer: FC<IFooterProps>;
+export default Footer;

package/build/esm/src/components/modal/components/footer.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import cssClasses from '../../../css/modal/main.module.less.js';
+
+var Footer = function (_a) {
+    var children = _a.children;
+    return React.createElement("footer", { className: cssClasses['modal-window__footer'] }, children);
+};
+
+export default Footer;
+//# sourceMappingURL=footer.js.map

package/build/esm/src/components/modal/components/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":["../../../../../../src/components/modal/components/footer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cssClasses from '@css/modal/main.module.less';\nimport { IFooterProps } from '@components/modal/types';\n\nconst Footer: FC<IFooterProps> = ({ children }) => {\n    return <footer className={cssClasses['modal-window__footer']}>{children}</footer>;\n};\n\nexport default Footer;\n"],"names":[],"mappings":";;;IAIM,MAAM,GAAqB,UAAC,EAAY;QAAV,sBAAQ;IACxC,OAAO,gCAAQ,SAAS,EAAE,UAAU,CAAC,sBAAsB,CAAC,IAAG,QAAQ,CAAU,CAAC;AACtF;;;;"}

package/build/esm/src/components/modal/components/header.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IHeaderProps } from "../types";
+declare const Header: FC<IHeaderProps>;
+export default Header;

package/build/esm/src/components/modal/components/header.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import cssClasses from '../../../css/modal/main.module.less.js';
+import IconClose from '../../../assets/icon_close.js';
+
+var Header = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, actions = _a.actions, closeAction = _a.closeAction;
+    return (React.createElement("header", { className: cssClasses['modal-window__header'] },
+        React.createElement("div", { className: cssClasses['modal-window__title'] },
+            React.createElement("h3", null, title)),
+        React.createElement("div", { className: cssClasses['modal-window__header-actions'] },
+            actions,
+            closeAction && React.createElement(IconClose, { onClick: closeAction, className: cssClasses['modal-window__close-icon'] }))));
+};
+
+export default Header;
+//# sourceMappingURL=header.js.map

package/build/esm/src/components/modal/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../../../src/components/modal/components/header.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cssClasses from '@css/modal/main.module.less';\nimport { IHeaderProps } from '@components/modal/types';\nimport IconClose from '@assets/icon_close';\n\nconst Header: FC<IHeaderProps> = ({ title = '', actions, closeAction }) => {\n    return (\n        <header className={cssClasses['modal-window__header']}>\n            <div className={cssClasses['modal-window__title']}>\n                <h3>{title}</h3>\n            </div>\n            <div className={cssClasses['modal-window__header-actions']}>\n                {actions}\n                {closeAction && <IconClose onClick={closeAction} className={cssClasses['modal-window__close-icon']} />}\n            </div>\n        </header>\n    );\n};\n\nexport default Header;\n"],"names":[],"mappings":";;;;IAKM,MAAM,GAAqB,UAAC,EAAoC;QAAlC,aAAU,EAAV,+BAAU,EAAE,oBAAO,EAAE,4BAAW;IAChE,QACI,gCAAQ,SAAS,EAAE,UAAU,CAAC,sBAAsB,CAAC;QACjD,6BAAK,SAAS,EAAE,UAAU,CAAC,qBAAqB,CAAC;YAC7C,gCAAK,KAAK,CAAM,CACd;QACN,6BAAK,SAAS,EAAE,UAAU,CAAC,8BAA8B,CAAC;YACrD,OAAO;YACP,WAAW,IAAI,oBAAC,SAAS,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,0BAA0B,CAAC,GAAI,CACpG,CACD,EACX;AACN;;;;"}

package/build/esm/src/components/modal/components/modal.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IModalProps } from "../types";
+declare const Modal: FC<IModalProps>;
+export default Modal;

package/build/esm/src/components/modal/components/modal.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cssClasses from '../../../css/modal/main.module.less.js';
+
+var Modal = function (_a) {
+    var children = _a.children, className = _a.className, modalRef = _a.modalRef;
+    return (React.createElement("div", { "data-test-id": "modal", ref: modalRef, className: cssClasses['modal-window'] + " " + cssClasses['modal-window_visible'] + " " + className },
+        React.createElement("div", { className: cssClasses['modal-window__body'] }, children)));
+};
+
+export default Modal;
+//# sourceMappingURL=modal.js.map

package/build/esm/src/components/modal/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../../../src/components/modal/components/modal.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { IModalProps } from '@components/modal/types';\nimport cssClasses from '@css/modal/main.module.less';\n\nconst Modal: FC<IModalProps> = ({ children, className, modalRef }) => {\n    return (\n        <div data-test-id=\"modal\" ref={modalRef} className={`${cssClasses['modal-window']} ${cssClasses['modal-window_visible']} ${className}`}>\n            <div className={cssClasses['modal-window__body']}>{children}</div>\n        </div>\n    );\n};\n\nexport default Modal;\n"],"names":[],"mappings":";;;IAIM,KAAK,GAAoB,UAAC,EAAiC;QAA/B,sBAAQ,EAAE,wBAAS,EAAE,sBAAQ;IAC3D,QACI,6CAAkB,OAAO,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAK,UAAU,CAAC,cAAc,CAAC,SAAI,UAAU,CAAC,sBAAsB,CAAC,SAAI,SAAW;QAClI,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,CAAC,IAAG,QAAQ,CAAO,CAChE,EACR;AACN;;;;"}

package/build/esm/src/components/modal/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_TRANSLATE_MOVE = 100;

package/build/esm/src/components/modal/constants.js

@@ -0,0 +1,4 @@
+var DEFAULT_TRANSLATE_MOVE = 100;
+
+export { DEFAULT_TRANSLATE_MOVE };
+//# sourceMappingURL=constants.js.map

package/build/esm/src/components/modal/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/modal/constants.ts"],"sourcesContent":["export const DEFAULT_TRANSLATE_MOVE = 100;\n"],"names":[],"mappings":"IAAa,sBAAsB,GAAG;;;;"}

package/build/esm/src/components/modal/context/modal_context.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface IModalContext {
+    isVisible: boolean;
+    setVisible: Dispatch<SetStateAction<boolean>>;
+    hideModal?(): void;
+}
+export declare const ModalContext: import("react").Context<IModalContext>;
+export declare const ModalContextProvider: import("react").Provider<IModalContext>;

package/build/esm/src/components/modal/context/modal_context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+var ModalContext = createContext({
+    isVisible: false,
+    setVisible: function () { },
+    hideModal: function () { }
+});
+var ModalContextProvider = ModalContext.Provider;
+
+export { ModalContext, ModalContextProvider };
+//# sourceMappingURL=modal_context.js.map

package/build/esm/src/components/modal/context/modal_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal_context.js","sources":["../../../../../../src/components/modal/context/modal_context.ts"],"sourcesContent":["import { createContext, Dispatch, SetStateAction } from 'react';\n\nexport interface IModalContext {\n    isVisible: boolean;\n    setVisible: Dispatch<SetStateAction<boolean>>;\n    hideModal?(): void;\n}\n\nexport const ModalContext = createContext<IModalContext>({\n    isVisible: false,\n    setVisible: () => {},\n    hideModal: () => {}\n});\n\nexport const ModalContextProvider = ModalContext.Provider;\n"],"names":[],"mappings":";;IAQa,YAAY,GAAG,aAAa,CAAgB;IACrD,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,eAAQ;IACpB,SAAS,EAAE,eAAQ;CACtB,EAAE;IAEU,oBAAoB,GAAG,YAAY,CAAC;;;;"}

package/build/esm/src/components/modal/hoc/absolute_modal/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IAbsoluteModalProps, IModalProps } from "../../types";
+declare const AbsoluteModal: FC<IAbsoluteModalProps & IModalProps>;
+export default AbsoluteModal;

package/build/esm/src/components/modal/hoc/absolute_modal/index.js

@@ -0,0 +1,60 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
+import { createUseStyles } from '../../../../../node_modules/react-jss/dist/react-jss.esm.js';
+import { createPortal } from 'react-dom';
+import cssClasses from '../../../../css/modal/main.module.less.js';
+import Modal from '../../components/modal.js';
+import { calculateAbsolutePosition, getTransformFromAnimationDirection } from '../../utilities.js';
+import { DEFAULT_TRANSLATE_MOVE } from '../../constants.js';
+
+var useStyles = createUseStyles({
+    modal: {
+        position: 'absolute',
+        visibility: function (_a) {
+            var isVisible = _a.isVisible;
+            return (isVisible ? 'visible' : 'hidden');
+        },
+        opacity: function (_a) {
+            var isVisible = _a.isVisible;
+            return +isVisible;
+        },
+        top: function (_a) {
+            var top = _a.top;
+            return top;
+        },
+        bottom: function (_a) {
+            var bottom = _a.bottom;
+            return bottom;
+        },
+        left: function (_a) {
+            var left = _a.left;
+            return left;
+        },
+        right: function (_a) {
+            var right = _a.right;
+            return right;
+        },
+        transform: getTransformFromAnimationDirection
+    }
+});
+var AbsoluteModal = function (_a) {
+    var vPosition = _a.vPosition, hPosition = _a.hPosition, _b = _a.offset, offset = _b === void 0 ? 0 : _b, transform = _a.transform, _c = _a.transformLength, transformLength = _c === void 0 ? DEFAULT_TRANSLATE_MOVE : _c, children = _a.children, animationDirection = _a.animationDirection, isVisible = _a.isVisible, rest = __rest(_a, ["vPosition", "hPosition", "offset", "transform", "transformLength", "children", "animationDirection", "isVisible"]);
+    var modalRef = useRef(null);
+    var _d = useState({}), position = _d[0], setPosition = _d[1];
+    var classes = useStyles(__assign(__assign({}, position), { isVisible: isVisible, transformLength: transformLength, transform: transform, animationDirection: animationDirection }));
+    useEffect(function () {
+        var _a, _b;
+        setPosition(calculateAbsolutePosition({
+            vPosition: vPosition,
+            hPosition: hPosition,
+            modalRect: (_b = (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a),
+            offset: offset,
+            transformLength: transformLength,
+            animationDirection: animationDirection
+        }));
+    }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible]);
+    return createPortal(React.createElement(Modal, __assign({ className: classes.modal + " " + (isVisible ? cssClasses['modal-window_visible'] : ''), modalRef: modalRef }, rest), children), document.body);
+};
+
+export default AbsoluteModal;
+//# sourceMappingURL=index.js.map

package/build/esm/src/components/modal/hoc/absolute_modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/modal/hoc/absolute_modal/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { createUseStyles } from 'react-jss';\nimport cssClasses from '@css/modal/main.module.less';\nimport { IAbsoluteModalProps, IModalProps, IPositionState } from '@components/modal/types';\nimport Modal from '@components/modal/components/modal';\nimport { calculateAbsolutePosition, getTransformFromAnimationDirection } from '@components/modal/utilities';\nimport { DEFAULT_TRANSLATE_MOVE } from '@components/modal/constants';\n\nconst useStyles = createUseStyles({\n    modal: {\n        position: 'absolute',\n        visibility: ({ isVisible }) => (isVisible ? 'visible' : 'hidden'),\n        opacity: ({ isVisible }) => +isVisible,\n        top: ({ top }) => top,\n        bottom: ({ bottom }) => bottom,\n        left: ({ left }) => left,\n        right: ({ right }) => right,\n        transform: getTransformFromAnimationDirection\n    }\n});\n\nconst AbsoluteModal: FC<IAbsoluteModalProps & IModalProps> = ({\n    vPosition,\n    hPosition,\n    offset = 0,\n    transform,\n    transformLength = DEFAULT_TRANSLATE_MOVE,\n    children,\n    animationDirection,\n    isVisible,\n    ...rest\n}) => {\n    const modalRef = useRef<HTMLDivElement>(null);\n    const [position, setPosition] = useState<IPositionState>({});\n    const classes = useStyles({ ...position, isVisible, transformLength, transform, animationDirection });\n\n    useEffect(() => {\n        setPosition(\n            calculateAbsolutePosition({\n                vPosition,\n                hPosition,\n                modalRect: modalRef?.current?.getBoundingClientRect?.(),\n                offset,\n                transformLength,\n                animationDirection\n            })\n        );\n    }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible]);\n\n    return createPortal(\n        <Modal className={`${classes.modal} ${isVisible ? cssClasses['modal-window_visible'] : ''}`} modalRef={modalRef} {...rest}>\n            {children}\n        </Modal>,\n        document.body\n    );\n};\n\nexport default AbsoluteModal;\n"],"names":[],"mappings":";;;;;;;;;AASA,IAAM,SAAS,GAAG,eAAe,CAAC;IAC9B,KAAK,EAAE;QACH,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,UAAC,EAAa;gBAAX,wBAAS;YAAO,QAAC,SAAS,GAAG,SAAS,GAAG,QAAQ;SAAC;QACjE,OAAO,EAAE,UAAC,EAAa;gBAAX,wBAAS;YAAO,OAAA,CAAC,SAAS;SAAA;QACtC,GAAG,EAAE,UAAC,EAAO;gBAAL,YAAG;YAAO,OAAA,GAAG;SAAA;QACrB,MAAM,EAAE,UAAC,EAAU;gBAAR,kBAAM;YAAO,OAAA,MAAM;SAAA;QAC9B,IAAI,EAAE,UAAC,EAAQ;gBAAN,cAAI;YAAO,OAAA,IAAI;SAAA;QACxB,KAAK,EAAE,UAAC,EAAS;gBAAP,gBAAK;YAAO,OAAA,KAAK;SAAA;QAC3B,SAAS,EAAE,kCAAkC;KAChD;CACJ,CAAC,CAAC;IAEG,aAAa,GAA0C,UAAC,EAU7D;IATG,IAAA,wBAAS,EACT,wBAAS,EACT,cAAU,EAAV,+BAAU,EACV,wBAAS,EACT,uBAAwC,EAAxC,6DAAwC,EACxC,sBAAQ,EACR,0CAAkB,EAClB,wBAAS,EACT,sIAAO;IAEP,IAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxC,IAAA,iBAAsD,EAArD,gBAAQ,EAAE,mBAA2C,CAAC;IAC7D,IAAM,OAAO,GAAG,SAAS,uBAAM,QAAQ,KAAE,SAAS,WAAA,EAAE,eAAe,iBAAA,EAAE,SAAS,WAAA,EAAE,kBAAkB,oBAAA,IAAG,CAAC;IAEtG,SAAS,CAAC;;QACN,WAAW,CACP,yBAAyB,CAAC;YACtB,SAAS,WAAA;YACT,SAAS,WAAA;YACT,SAAS,cAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,qBAAqB,kDAAI;YACvD,MAAM,QAAA;YACN,eAAe,iBAAA;YACf,kBAAkB,oBAAA;SACrB,CAAC,CACL,CAAC;KACL,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnF,OAAO,YAAY,CACf,oBAAC,KAAK,aAAC,SAAS,EAAK,OAAO,CAAC,KAAK,UAAI,SAAS,GAAG,UAAU,CAAC,sBAAsB,CAAC,GAAG,EAAE,CAAE,EAAE,QAAQ,EAAE,QAAQ,IAAM,IAAI,GACpH,QAAQ,CACL,EACR,QAAQ,CAAC,IAAI,CAChB,CAAC;AACN;;;;"}

package/build/esm/src/components/modal/hoc/modal_provider.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface ModalProviderProps {
+    defaultOpen?: boolean;
+}
+declare const ModalProvider: FC<ModalProviderProps>;
+export default ModalProvider;

package/build/esm/src/components/modal/hoc/modal_provider.js

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import { ModalContextProvider } from '../context/modal_context.js';
+
+var ModalProvider = function (_a) {
+    var _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, children = _a.children;
+    var _c = useState(defaultOpen), isVisible = _c[0], setVisible = _c[1];
+    var hideModal = function () { return setVisible(false); };
+    return React.createElement(ModalContextProvider, { value: { isVisible: isVisible, setVisible: setVisible, hideModal: hideModal } }, children);
+};
+
+export default ModalProvider;
+//# sourceMappingURL=modal_provider.js.map

package/build/esm/src/components/modal/hoc/modal_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal_provider.js","sources":["../../../../../../src/components/modal/hoc/modal_provider.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { ModalContextProvider } from '../context/modal_context';\n\nexport interface ModalProviderProps {\n    defaultOpen?: boolean;\n}\n\nconst ModalProvider: FC<ModalProviderProps> = ({ defaultOpen = false, children }) => {\n    const [isVisible, setVisible] = useState(defaultOpen);\n    const hideModal = () => setVisible(false);\n\n    return <ModalContextProvider value={{ isVisible, setVisible, hideModal }}>{children}</ModalContextProvider>;\n};\n\nexport default ModalProvider;\n"],"names":[],"mappings":";;;IAOM,aAAa,GAA2B,UAAC,EAAiC;QAA/B,mBAAmB,EAAnB,wCAAmB,EAAE,sBAAQ;IACpE,IAAA,0BAA+C,EAA9C,iBAAS,EAAE,kBAAmC,CAAC;IACtD,IAAM,SAAS,GAAG,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,CAAC;IAE1C,OAAO,oBAAC,oBAAoB,IAAC,KAAK,EAAE,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,IAAG,QAAQ,CAAwB,CAAC;AAChH;;;;"}

package/build/esm/src/components/modal/hoc/relative_modal/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IModalProps, IRelativeModalProps } from "../../types";
+declare const RelativeModal: FC<IRelativeModalProps & IModalProps>;
+export default RelativeModal;

package/build/esm/src/components/modal/hoc/relative_modal/index.js

@@ -0,0 +1,66 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
+import { createUseStyles } from '../../../../../node_modules/react-jss/dist/react-jss.esm.js';
+import { useResize } from '../../../../hooks/use_resize.js';
+import { createPortal } from 'react-dom';
+import cssClasses from '../../../../css/modal/main.module.less.js';
+import Modal from '../../components/modal.js';
+import { calculateRelativePosition, getTransformFromAnimationDirection } from '../../utilities.js';
+import { DEFAULT_TRANSLATE_MOVE } from '../../constants.js';
+
+var useStyles = createUseStyles({
+    modal: {
+        position: 'absolute',
+        visibility: function (_a) {
+            var isVisible = _a.isVisible;
+            return (isVisible ? 'visible' : 'hidden');
+        },
+        opacity: function (_a) {
+            var isVisible = _a.isVisible;
+            return +isVisible;
+        },
+        top: function (_a) {
+            var top = _a.top;
+            return top;
+        },
+        left: function (_a) {
+            var left = _a.left;
+            return left;
+        },
+        transform: getTransformFromAnimationDirection
+    }
+});
+var RelativeModal = function (_a) {
+    var position = _a.position, _b = _a.offset, offset = _b === void 0 ? 0 : _b, _c = _a.transformLength, transformLength = _c === void 0 ? DEFAULT_TRANSLATE_MOVE : _c, children = _a.children, animationDirection = _a.animationDirection, isVisible = _a.isVisible, relativeTo = _a.relativeTo, rest = __rest(_a, ["position", "offset", "transformLength", "children", "animationDirection", "isVisible", "relativeTo"]);
+    var modalRef = useRef(null);
+    var _d = useState({}), positioning = _d[0], setPosition = _d[1];
+    var classes = useStyles(__assign(__assign({}, positioning), { isVisible: isVisible, transformLength: transformLength, animationDirection: animationDirection }));
+    useEffect(function () {
+        var _a, _b;
+        setPosition(calculateRelativePosition({
+            position: position,
+            relativeRect: (_a = relativeTo === null || relativeTo === void 0 ? void 0 : relativeTo.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+            modalRect: (_b = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(),
+            offset: offset,
+            transformLength: transformLength,
+            animationDirection: animationDirection,
+            relativeTo: relativeTo
+        }));
+    }, [relativeTo, animationDirection, position, offset, transformLength, isVisible]);
+    useResize(function () {
+        var _a, _b;
+        setPosition(calculateRelativePosition({
+            position: position,
+            offset: offset,
+            transformLength: transformLength,
+            animationDirection: animationDirection,
+            relativeTo: relativeTo,
+            relativeRect: (_a = relativeTo === null || relativeTo === void 0 ? void 0 : relativeTo.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+            modalRect: (_b = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()
+        }));
+    }, 50);
+    return createPortal(React.createElement(Modal, __assign({ className: classes.modal + " " + (isVisible ? cssClasses['modal-window_visible'] : ''), modalRef: modalRef }, rest), children), document.body);
+};
+
+export default RelativeModal;
+//# sourceMappingURL=index.js.map

package/build/esm/src/components/modal/hoc/relative_modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/modal/hoc/relative_modal/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { createUseStyles } from 'react-jss';\nimport cssClasses from '@css/modal/main.module.less';\nimport { IModalProps, IPositionState, IRelativeModalProps } from '@components/modal/types';\nimport Modal from '@components/modal/components/modal';\nimport { calculateRelativePosition, getTransformFromAnimationDirection } from '@components/modal/utilities';\nimport { DEFAULT_TRANSLATE_MOVE } from '@components/modal/constants';\nimport { useResize } from '@hooks/use_resize';\n\nconst useStyles = createUseStyles({\n    modal: {\n        position: 'absolute',\n        visibility: ({ isVisible }) => (isVisible ? 'visible' : 'hidden'),\n        opacity: ({ isVisible }) => +isVisible,\n        top: ({ top }) => top,\n        left: ({ left }) => left,\n        transform: getTransformFromAnimationDirection\n    }\n});\n\nconst RelativeModal: FC<IRelativeModalProps & IModalProps> = ({\n    position,\n    offset = 0,\n    transformLength = DEFAULT_TRANSLATE_MOVE,\n    children,\n    animationDirection,\n    isVisible,\n    relativeTo,\n    ...rest\n}) => {\n    const modalRef = useRef<HTMLDivElement>(null);\n    const [positioning, setPosition] = useState<IPositionState>({});\n    const classes = useStyles({ ...positioning, isVisible, transformLength, animationDirection });\n\n    useEffect(() => {\n        setPosition(\n            calculateRelativePosition({\n                position,\n                relativeRect: relativeTo?.current?.getBoundingClientRect(),\n                modalRect: modalRef?.current?.getBoundingClientRect(),\n                offset,\n                transformLength,\n                animationDirection,\n                relativeTo\n            })\n        );\n    }, [relativeTo, animationDirection, position, offset, transformLength, isVisible]);\n\n    useResize(() => {\n        setPosition(\n            calculateRelativePosition({\n                position,\n                offset,\n                transformLength,\n                animationDirection,\n                relativeTo,\n                relativeRect: relativeTo?.current?.getBoundingClientRect(),\n                modalRect: modalRef?.current?.getBoundingClientRect()\n            })\n        );\n    }, 50);\n\n    return createPortal(\n        <Modal className={`${classes.modal} ${isVisible ? cssClasses['modal-window_visible'] : ''}`} modalRef={modalRef} {...rest}>\n            {children}\n        </Modal>,\n        document.body\n    );\n};\n\nexport default RelativeModal;\n"],"names":[],"mappings":";;;;;;;;;;AAUA,IAAM,SAAS,GAAG,eAAe,CAAC;IAC9B,KAAK,EAAE;QACH,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,UAAC,EAAa;gBAAX,wBAAS;YAAO,QAAC,SAAS,GAAG,SAAS,GAAG,QAAQ;SAAC;QACjE,OAAO,EAAE,UAAC,EAAa;gBAAX,wBAAS;YAAO,OAAA,CAAC,SAAS;SAAA;QACtC,GAAG,EAAE,UAAC,EAAO;gBAAL,YAAG;YAAO,OAAA,GAAG;SAAA;QACrB,IAAI,EAAE,UAAC,EAAQ;gBAAN,cAAI;YAAO,OAAA,IAAI;SAAA;QACxB,SAAS,EAAE,kCAAkC;KAChD;CACJ,CAAC,CAAC;IAEG,aAAa,GAA0C,UAAC,EAS7D;IARG,IAAA,sBAAQ,EACR,cAAU,EAAV,+BAAU,EACV,uBAAwC,EAAxC,6DAAwC,EACxC,sBAAQ,EACR,0CAAkB,EAClB,wBAAS,EACT,0BAAU,EACV,yHAAO;IAEP,IAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxC,IAAA,iBAAyD,EAAxD,mBAAW,EAAE,mBAA2C,CAAC;IAChE,IAAM,OAAO,GAAG,SAAS,uBAAM,WAAW,KAAE,SAAS,WAAA,EAAE,eAAe,iBAAA,EAAE,kBAAkB,oBAAA,IAAG,CAAC;IAE9F,SAAS,CAAC;;QACN,WAAW,CACP,yBAAyB,CAAC;YACtB,QAAQ,UAAA;YACR,YAAY,QAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,0CAAE,qBAAqB,EAAE;YAC1D,SAAS,QAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,qBAAqB,EAAE;YACrD,MAAM,QAAA;YACN,eAAe,iBAAA;YACf,kBAAkB,oBAAA;YAClB,UAAU,YAAA;SACb,CAAC,CACL,CAAC;KACL,EAAE,CAAC,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;IAEnF,SAAS,CAAC;;QACN,WAAW,CACP,yBAAyB,CAAC;YACtB,QAAQ,UAAA;YACR,MAAM,QAAA;YACN,eAAe,iBAAA;YACf,kBAAkB,oBAAA;YAClB,UAAU,YAAA;YACV,YAAY,QAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,0CAAE,qBAAqB,EAAE;YAC1D,SAAS,QAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,qBAAqB,EAAE;SACxD,CAAC,CACL,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CACf,oBAAC,KAAK,aAAC,SAAS,EAAK,OAAO,CAAC,KAAK,UAAI,SAAS,GAAG,UAAU,CAAC,sBAAsB,CAAC,GAAG,EAAE,CAAE,EAAE,QAAQ,EAAE,QAAQ,IAAM,IAAI,GACpH,QAAQ,CACL,EACR,QAAQ,CAAC,IAAI,CAChB,CAAC;AACN;;;;"}

package/build/esm/src/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IModalProps, IModalComposition } from "./types";
+declare const Modal: FC<IModalProps> & IModalComposition;
+export default Modal;

package/build/esm/src/components/modal/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cssClasses from '../../css/modal/main.module.less.js';
+import Content from './components/content.js';
+import Header from './components/header.js';
+import Footer from './components/footer.js';
+
+var Modal = function (_a) {
+    var children = _a.children, className = _a.className, modalRef = _a.modalRef;
+    return (React.createElement("div", { ref: modalRef, className: cssClasses['modal-window'] + " " + className },
+        React.createElement("div", { className: cssClasses['modal-window__body'] }, children)));
+};
+Modal.Header = Header;
+Modal.Content = Content;
+Modal.Footer = Footer;
+
+export default Modal;
+//# sourceMappingURL=index.js.map

package/build/esm/src/components/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport Content from './components/content';\nimport Header from './components/header';\nimport Footer from './components/footer';\nimport { IModalProps, IModalComposition } from '@components/modal/types';\nimport cssClasses from '@css/modal/main.module.less';\n\nconst Modal: FC<IModalProps> & IModalComposition = ({ children, className, modalRef }) => {\n    return (\n        <div ref={modalRef} className={`${cssClasses['modal-window']} ${className}`}>\n            <div className={cssClasses['modal-window__body']}>{children}</div>\n        </div>\n    );\n};\n\nModal.Header = Header;\nModal.Content = Content;\nModal.Footer = Footer;\n\nexport default Modal;\n"],"names":[],"mappings":";;;;;;IAOM,KAAK,GAAwC,UAAC,EAAiC;QAA/B,sBAAQ,EAAE,wBAAS,EAAE,sBAAQ;IAC/E,QACI,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAK,UAAU,CAAC,cAAc,CAAC,SAAI,SAAW;QACvE,6BAAK,SAAS,EAAE,UAAU,CAAC,oBAAoB,CAAC,IAAG,QAAQ,CAAO,CAChE,EACR;AACN,EAAE;AAEF,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;AACxB,KAAK,CAAC,MAAM,GAAG,MAAM;;;;"}

package/build/esm/src/components/modal/types.d.ts

@@ -0,0 +1,54 @@
+import { FC, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react';
+export interface IHeaderProps {
+    title?: string;
+    actions?: ReactElement | ReactNodeArray | ReactNode;
+    closeAction?: () => void;
+}
+export interface IContentProps {
+}
+export interface IFooterProps {
+}
+export interface IModalProps {
+    className?: string;
+    modalRef?: RefObject<HTMLDivElement>;
+}
+export interface IModalComposition {
+    Header: FC<IHeaderProps>;
+    Footer: FC<IFooterProps>;
+    Content: FC<IContentProps>;
+}
+export interface IAbsoluteModalProps {
+    vPosition?: 'top' | 'middle' | 'bottom';
+    hPosition?: 'left' | 'center' | 'right';
+    animationDirection?: 'bottomTop' | 'topBottom' | 'leftRight' | 'rightLeft';
+    isVisible?: boolean;
+    offset?: number;
+    transformLength?: number;
+    transform?({ isVisible }: {
+        isVisible?: boolean;
+    }): string;
+}
+export interface IRelativeModalProps {
+    position?: 'top' | 'left' | 'bottom' | 'right';
+    animationDirection?: 'bottomTop' | 'topBottom' | 'leftRight' | 'rightLeft';
+    isVisible?: boolean;
+    offset?: number;
+    relativeTo: RefObject<HTMLDivElement>;
+    transformLength?: number;
+    transform?({ isVisible }: {
+        isVisible?: boolean;
+    }): string;
+}
+export interface IPositionState {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+}
+export interface IAbsoluteCalculation extends IAbsoluteModalProps {
+    modalRect?: DOMRect;
+}
+export interface IRelativeCalculation extends IRelativeModalProps {
+    modalRect?: DOMRect;
+    relativeRect?: DOMRect;
+}

package/build/esm/src/components/modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAuE,OAAO,CAAC"}

package/build/esm/src/components/modal/utilities.d.ts

@@ -0,0 +1,56 @@
+import { IAbsoluteModalProps, IAbsoluteCalculation, IRelativeCalculation } from "./types";
+/**
+ * Function to get proper css style from props and state
+ * @param animationDirection, taken from props
+ * @param transformLength, taken from state
+ * @param isVisible, taken from state
+ * @param transform, taken from props if it is set then custom transform function is ran
+ * @return css string which is used in styling
+ */
+export declare const getTransformFromAnimationDirection: ({ animationDirection, transformLength, isVisible, transform }: IAbsoluteModalProps) => string;
+/**
+ * Function for relative to check if modal is still in viewport
+ * @param relativeRect, relative rectangle
+ * @param modalRect, modal rectangle
+ * @param offset
+ * @return object of available directions in booleans
+ */
+export declare const availablePositions: ({ relativeRect, modalRect, offset, }: {
+    relativeRect?: DOMRect | undefined;
+    modalRect?: DOMRect | undefined;
+    offset?: number | undefined;
+}) => {
+    isLeftPositionPossible: boolean;
+    isRightPositionPossible: boolean;
+    isBottomPositionPossible: boolean;
+    isTopPositionPossible: boolean;
+};
+/**
+ * Function to return left, top, bottom, right css values, which will be used to placed modal
+ * @param position, chosen position of modal
+ * @param transformLength, taken from previously calculated values
+ * @param modalRect, used to calculate available positions and position of modal
+ * @param offset,
+ * @param animationDirection, chosen animation by default "topBottom"
+ * @param relativeRect, used to calculate  available positions and position of modal
+ * @return based on animationPosition and availablePositions css values
+ */
+export declare const calculateRelativePosition: ({ position, modalRect, relativeRect, offset, transformLength, animationDirection, }: IRelativeCalculation) => {
+    top: number;
+    left: number;
+};
+/**
+ * @param vPosition, verticalPosition
+ * @param hPosition, horizontalPosition
+ * @param modalRect, used to calculate position
+ * @param offset = 0,
+ * @param transformLength, taken from previously calculated values
+ * @param animationDirection, chosen animation, by default "topBottom"
+ * direction is chosen based on vPosition and hPosition
+ */
+export declare const calculateAbsolutePosition: ({ vPosition, hPosition, modalRect, offset, transformLength, animationDirection, }: IAbsoluteCalculation) => {
+    top: number;
+    bottom: undefined;
+    left: number | undefined;
+    right: number | undefined;
+};