@proprioo/salatim 25.0.1 → 26.1.0

package/lib/ui/src/modal/Modal.stories.js

@@ -27,113 +27,75 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const react_2 = require("@storybook/react");
 const Modal_1 = __importDefault(require("./Modal"));
-const Button = styled_components_1.default.button `
-  position: relative;
-  z-index: 2000;
-`;
+const BaseChildren = (react_1.default.createElement("p", null,
+    "Se ferme en appuyant sur ",
+    react_1.default.createElement("kbd", null, "esc")));
+const Icon = (react_1.default.createElement("svg", { viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M36 24.12V16.2L25.875 26.1L36 36V28.08C39.2224 28.08 42.3128 29.3316 44.5914 31.5595C46.87 33.7875 48.1501 36.8092 48.1501 39.96C48.1501 43.1107 46.87 46.1325 44.5914 48.3604C42.3128 50.5883 39.2224 51.84 36 51.84C32.7777 51.84 29.6873 50.5883 27.4087 48.3604C25.1301 46.1325 23.85 43.1107 23.85 39.96H19.8C19.8 44.161 21.5068 48.1899 24.5449 51.1605C27.583 54.1311 31.7035 55.8 36 55.8C40.2966 55.8 44.4171 54.1311 47.4552 51.1605C50.4933 48.1899 52.2001 44.161 52.2001 39.96C52.2001 35.7589 50.4933 31.73 47.4552 28.7594C44.4171 25.7888 40.2966 24.12 36 24.12Z", fill: "#2FBEEE" })));
 (0, react_2.storiesOf)('Modal', module)
     .addDecorator(story => {
     document.body.style.position = 'relative';
     return story();
 })
     .add('Modal', () => {
-    const { openModal, abortModal, closeModal, toggleLoader, createModal } = (0, Modal_1.default)({
+    const { closeModal, createModal, openModal, toggleLoader } = (0, Modal_1.default)({
         onAbort: () => console.log('abort'),
         onClose: () => console.log('close')
     });
-    const { openModal: openModal2, abortModal: abortModal2, createModal: createModal2 } = (0, Modal_1.default)();
+    const { createModal: createModal2, openModal: openModal2 } = (0, Modal_1.default)();
     return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("button", { onClick: openModal }, "Open"),
-            react_1.default.createElement("button", { onClick: openModal2 }, "Open 2"),
-            react_1.default.createElement("p", { style: { height: '400px' } }),
-            react_1.default.createElement("button", { onClick: openModal }, "Open"),
-            react_1.default.createElement("p", { style: { height: '400px' } }),
-            react_1.default.createElement("button", { onClick: openModal }, "Open"),
-            react_1.default.createElement("p", { style: { height: '400px' } }),
-            react_1.default.createElement("button", { onClick: openModal }, "Open"),
-            react_1.default.createElement(react_1.Fragment, null, createModal({
-                title: 'Titre de la modale',
-                text: 'Texte de la modale',
-                icon: (react_1.default.createElement("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M36 24.12V16.2L25.875 26.1L36 36V28.08C39.2224 28.08 42.3128 29.3316 44.5914 31.5595C46.87 33.7875 48.1501 36.8092 48.1501 39.96C48.1501 43.1107 46.87 46.1325 44.5914 48.3604C42.3128 50.5883 39.2224 51.84 36 51.84C32.7777 51.84 29.6873 50.5883 27.4087 48.3604C25.1301 46.1325 23.85 43.1107 23.85 39.96H19.8C19.8 44.161 21.5068 48.1899 24.5449 51.1605C27.583 54.1311 31.7035 55.8 36 55.8C40.2966 55.8 44.4171 54.1311 47.4552 51.1605C50.4933 48.1899 52.2001 44.161 52.2001 39.96C52.2001 35.7589 50.4933 31.73 47.4552 28.7594C44.4171 25.7888 40.2966 24.12 36 24.12Z", fill: "#2FBEEE" }))),
-                children: (react_1.default.createElement("div", null,
-                    react_1.default.createElement("p", null,
-                        "Se ferme en appuyant sur ",
-                        react_1.default.createElement("kbd", null, "esc")),
-                    react_1.default.createElement(Button, { onClick: toggleLoader }, "Toggle loader"),
-                    react_1.default.createElement(Button, { onClick: abortModal }, "Abort"),
-                    react_1.default.createElement(Button, { onClick: () => closeModal() }, "Close")))
-            })),
-            react_1.default.createElement(react_1.Fragment, null, createModal2({
-                title: 'Titre de la modale 2',
-                text: 'Texte de la modale 2',
-                icon: (react_1.default.createElement("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M36 24.12V16.2L25.875 26.1L36 36V28.08C39.2224 28.08 42.3128 29.3316 44.5914 31.5595C46.87 33.7875 48.1501 36.8092 48.1501 39.96C48.1501 43.1107 46.87 46.1325 44.5914 48.3604C42.3128 50.5883 39.2224 51.84 36 51.84C32.7777 51.84 29.6873 50.5883 27.4087 48.3604C25.1301 46.1325 23.85 43.1107 23.85 39.96H19.8C19.8 44.161 21.5068 48.1899 24.5449 51.1605C27.583 54.1311 31.7035 55.8 36 55.8C40.2966 55.8 44.4171 54.1311 47.4552 51.1605C50.4933 48.1899 52.2001 44.161 52.2001 39.96C52.2001 35.7589 50.4933 31.73 47.4552 28.7594C44.4171 25.7888 40.2966 24.12 36 24.12Z", fill: "#2FBEEE" }))),
-                children: (react_1.default.createElement("div", null,
-                    react_1.default.createElement("p", null,
-                        "Se ferme en appuyant sur ",
-                        react_1.default.createElement("kbd", null, "esc")),
-                    react_1.default.createElement("button", { onClick: abortModal2 }, "Abort")))
-            })))));
+        react_1.default.createElement("button", { onClick: openModal }, "Open"),
+        react_1.default.createElement("button", { onClick: openModal2 }, "Open 2"),
+        react_1.default.createElement(react_1.Fragment, null, createModal({
+            icon: Icon,
+            text: 'Texte de la modale',
+            title: 'Titre de la modale',
+            children: (react_1.default.createElement("div", null,
+                BaseChildren,
+                react_1.default.createElement("button", { style: { position: 'relative', zIndex: 100 }, onClick: toggleLoader }, "Toggle loader"),
+                react_1.default.createElement("button", { style: { position: 'relative', zIndex: 100 }, onClick: closeModal }, "Close modal")))
+        })),
+        react_1.default.createElement(react_1.Fragment, null, createModal2({
+            icon: Icon,
+            text: 'Texte de la modale 2',
+            title: 'Titre de la modale 2',
+            children: BaseChildren
+        }))));
 })
     .add('in full screen', () => {
-    const { openModal, abortModal, createModal } = (0, Modal_1.default)();
+    const { openModal, createModal } = (0, Modal_1.default)();
     return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("button", { onClick: openModal }, "Open"),
         createModal({
-            title: 'Titre de la modale',
-            text: 'Texte de la modale',
-            icon: (react_1.default.createElement("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                react_1.default.createElement("path", { d: "M36 24.12V16.2L25.875 26.1L36 36V28.08C39.2224 28.08 42.3128 29.3316 44.5914 31.5595C46.87 33.7875 48.1501 36.8092 48.1501 39.96C48.1501 43.1107 46.87 46.1325 44.5914 48.3604C42.3128 50.5883 39.2224 51.84 36 51.84C32.7777 51.84 29.6873 50.5883 27.4087 48.3604C25.1301 46.1325 23.85 43.1107 23.85 39.96H19.8C19.8 44.161 21.5068 48.1899 24.5449 51.1605C27.583 54.1311 31.7035 55.8 36 55.8C40.2966 55.8 44.4171 54.1311 47.4552 51.1605C50.4933 48.1899 52.2001 44.161 52.2001 39.96C52.2001 35.7589 50.4933 31.73 47.4552 28.7594C44.4171 25.7888 40.2966 24.12 36 24.12Z", fill: "#2FBEEE" }))),
+            icon: Icon,
             isFullScreen: true,
-            children: (react_1.default.createElement("div", null,
-                react_1.default.createElement("p", null,
-                    "Se ferme en appuyant sur ",
-                    react_1.default.createElement("kbd", null, "esc")),
-                react_1.default.createElement("button", { onClick: abortModal }, "Abort")))
-        }),
-        react_1.default.createElement("button", { onClick: openModal }, "Open")));
+            text: 'Texte de la modale',
+            title: 'Titre de la modale',
+            children: BaseChildren
+        })));
 })
     .add('without optional props', () => {
-    const { openModal, abortModal, createModal } = (0, Modal_1.default)();
+    const { openModal, createModal } = (0, Modal_1.default)();
     return (react_1.default.createElement(react_1.Fragment, null,
-        createModal({
-            children: (react_1.default.createElement("div", null,
-                react_1.default.createElement("p", null,
-                    "Se ferme en appuyant sur ",
-                    react_1.default.createElement("kbd", null, "esc")),
-                react_1.default.createElement("button", { onClick: abortModal }, "Abort")))
-        }),
-        react_1.default.createElement("button", { onClick: openModal }, "Open")));
+        react_1.default.createElement("button", { onClick: openModal }, "Open"),
+        createModal({ children: BaseChildren })));
 })
     .add('without padding', () => {
-    const { openModal, abortModal, createModal } = (0, Modal_1.default)();
+    const { openModal, createModal } = (0, Modal_1.default)();
     return (react_1.default.createElement(react_1.Fragment, null,
-        createModal({
-            noPadding: true,
-            children: (react_1.default.createElement("div", null,
-                react_1.default.createElement("p", null,
-                    "Se ferme en appuyant sur ",
-                    react_1.default.createElement("kbd", null, "esc")),
-                react_1.default.createElement("button", { onClick: abortModal }, "Abort")))
-        }),
-        react_1.default.createElement("button", { onClick: openModal }, "Open")));
+        react_1.default.createElement("button", { onClick: openModal }, "Open modal"),
+        createModal({ noPadding: true, children: BaseChildren })));
 })
     .add('is Alternative', () => {
-    const { openModal, abortModal, createModal } = (0, Modal_1.default)();
+    const { openModal, createModal } = (0, Modal_1.default)();
     return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("button", { onClick: openModal }, "Open modal"),
         createModal({
             isAlternative: true,
             title: 'is Alternative',
-            children: (react_1.default.createElement("div", null,
-                react_1.default.createElement("p", null,
-                    "Se ferme en appuyant sur ",
-                    react_1.default.createElement("kbd", null, "esc")),
-                react_1.default.createElement("button", { onClick: abortModal }, "Abort")))
-        }),
-        react_1.default.createElement("button", { onClick: openModal }, "Open")));
+            children: BaseChildren
+        })));
 });
 //# sourceMappingURL=Modal.stories.js.map

package/lib/ui/src/modal/Modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.stories.tsx"],"names":[],"mappings":"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"}

package/lib/ui/src/modal/Modal.styles.d.ts

@@ -1,6 +1,6 @@
-import { ModalProps } from './Modal';
-declare type LayoutProps = Pick<ModalProps, 'fade' | 'isFullScreen' | 'noPadding'>;
-export declare const CloseLayout: import("styled-components").StyledComponent<"div", any, {
+import { FadeEnum, ModalProps } from './Modal';
+declare type LayoutProps = Pick<ModalProps, 'isFullScreen' | 'noPadding'>;
+export declare const CloseLayout: import("styled-components").StyledComponent<"button", any, {
     hasTitle: boolean;
 }, never>;
 export declare const Layout: import("styled-components").StyledComponent<"div", any, LayoutProps, never>;
@@ -11,4 +11,7 @@ export declare const Title: import("styled-components").StyledComponent<"p", any
     isAlternative: boolean;
 }, never>;
 export declare const Text: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const BackgroundLayout: import("styled-components").StyledComponent<"div", any, {
+    fade: FadeEnum;
+}, never>;
 export {};

package/lib/ui/src/modal/Modal.styles.js

@@ -23,22 +23,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Title = exports.IconContainer = exports.Header = exports.MobileTitle = exports.Layout = exports.CloseLayout = void 0;
+exports.BackgroundLayout = exports.Text = exports.Title = exports.IconContainer = exports.Header = exports.MobileTitle = exports.Layout = exports.CloseLayout = void 0;
+const polished_1 = require("polished");
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../../utils");
 const Title_1 = require("../title/Title");
-const Modal_reducer_1 = require("./Modal.reducer");
-exports.CloseLayout = styled_components_1.default.div `
+const Modal_1 = require("./Modal");
+exports.CloseLayout = styled_components_1.default.button `
+  ${utils_1.resetCssButton};
   position: absolute;
-  top: ${(0, utils_1.convertPxToRem)(8)};
   right: ${(0, utils_1.convertPxToRem)(8)};
-  width: ${(0, utils_1.convertPxToRem)(32)};
-  z-index: 1;
+  top: ${(0, utils_1.convertPxToRem)(8)};
   height: ${(0, utils_1.convertPxToRem)(32)};
+  width: ${(0, utils_1.convertPxToRem)(32)};
 
   svg {
-    width: 100%;
     height: 100%;
+    width: 100%;
 
     path {
       fill: ${({ hasTitle }) => (hasTitle ? 'white' : utils_1.colors.dark.base40)};
@@ -56,8 +57,8 @@ exports.CloseLayout = styled_components_1.default.div `
   }
 
   @media (min-width: ${utils_1.breakpoints.small}px) {
-    top: ${(0, utils_1.convertPxToRem)(12)};
     right: ${(0, utils_1.convertPxToRem)(12)};
+    top: ${(0, utils_1.convertPxToRem)(12)};
 
     svg {
       path {
@@ -66,62 +67,22 @@ exports.CloseLayout = styled_components_1.default.div `
     }
   }
 `;
-const layoutFadeIn = (0, styled_components_1.keyframes) `
-0% {
-  opacity: 0;
-  transform: translate(-50%, -80%);
-}
-50% {
-  opacity: 1;
-}
-100% {
-  transform: translate(-50%, -50%);
-}
-`;
-const layoutFadeOut = (0, styled_components_1.keyframes) `
-0% {
-  opacity: 1;
-  transform: translate(-50%, -50%);
-}
-50% {
-  opacity: 0;
-}
-100% {
-  transform: translate(-50%, -100%);
-}
-`;
 exports.Layout = styled_components_1.default.div `
   position: fixed;
-  z-index: 1001;
-  top: 50%;
   left: 50%;
-  width: 100%;
+  top: 50%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   max-height: 100%;
+  width: 100%;
   overflow-y: auto;
   background: white;
   color: ${utils_1.colors.dark.base};
   box-shadow: ${utils_1.shadows.level5};
+  opacity: 1;
   cursor: auto;
   transform: translate(-50%, -50%);
-  opacity: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  ${({ fade }) => {
-    if (fade === Modal_reducer_1.ModalFade.IN) {
-        return (0, styled_components_1.css) `
-        animation: ${layoutFadeIn} 0.3s linear;
-      `;
-    }
-    else if (fade === Modal_reducer_1.ModalFade.OUT) {
-        return (0, styled_components_1.css) `
-        transform: translate(-50%, -100%);
-        opacity: 0;
-        animation: ${layoutFadeOut} 0.3s linear;
-      `;
-    }
-}}
 
   ${({ noPadding }) => !noPadding &&
     (0, styled_components_1.css) `
@@ -139,26 +100,20 @@ exports.Layout = styled_components_1.default.div `
     `}
 
   @media (min-width: ${utils_1.breakpoints.small}px) {
-    min-width: ${(0, utils_1.convertPxToRem)(640)};
-    max-height: 85%;
     height: auto;
+    max-height: 85%;
+    width: ${({ isFullScreen }) => (isFullScreen ? '95%' : '50%')};
+    min-width: ${(0, utils_1.convertPxToRem)(640)};
     border-radius: ${utils_1.radius.big};
-    ${({ isFullScreen }) => isFullScreen
-    ? (0, styled_components_1.css) `
-            width: 95%;
-          `
-    : (0, styled_components_1.css) `
-            width: 50%;
-          `}
   }
 `;
 exports.MobileTitle = styled_components_1.default.div `
   position: absolute;
-  top: 0;
   left: 0;
   right: 0;
-  background: ${utils_1.colors.green.base};
+  top: 0;
   padding: ${(0, utils_1.convertPxToRem)(16)} ${(0, utils_1.convertPxToRem)(8)};
+  background: ${utils_1.colors.green.base};
   color: white;
 
   @media (min-width: ${utils_1.breakpoints.small}px) {
@@ -166,10 +121,10 @@ exports.MobileTitle = styled_components_1.default.div `
   }
 `;
 exports.Header = styled_components_1.default.div `
-  margin-bottom: ${(0, utils_1.convertPxToRem)(8)};
   display: flex;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
+  margin-bottom: ${(0, utils_1.convertPxToRem)(8)};
   text-align: center;
 `;
 exports.IconContainer = styled_components_1.default.div `
@@ -177,12 +132,12 @@ exports.IconContainer = styled_components_1.default.div `
 
   @media (min-width: ${utils_1.breakpoints.small}px) {
     display: block;
-    width: ${(0, utils_1.convertPxToRem)(48)};
     height: ${(0, utils_1.convertPxToRem)(48)};
+    width: ${(0, utils_1.convertPxToRem)(48)};
 
     svg {
-      width: 100%;
       height: 100%;
+      width: 100%;
     }
   }
 `;
@@ -192,8 +147,8 @@ exports.Title = styled_components_1.default.p `
   @media (min-width: ${utils_1.breakpoints.small}px) {
     ${Title_1.titles.h6};
     display: block;
-    font-weight: bold;
     margin: 0;
+    font-weight: bold;
   }
 `;
 exports.Text = styled_components_1.default.p `
@@ -205,4 +160,75 @@ exports.Text = styled_components_1.default.p `
     text-align: left;
   }
 `;
+const backgroundFadeIn = (0, styled_components_1.keyframes) `
+  from {
+    background: ${(0, polished_1.transparentize)(1, utils_1.colors.dark.base)};
+  } to {
+    background: ${(0, polished_1.transparentize)(0.2, utils_1.colors.dark.base)};
+  }
+`;
+const backgroundFadeOut = (0, styled_components_1.keyframes) `
+  from {
+    background: ${(0, polished_1.transparentize)(0.2, utils_1.colors.dark.base)};
+  } to {
+    background: ${(0, polished_1.transparentize)(1, utils_1.colors.dark.base)};
+  }
+`;
+const layoutFadeIn = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -80%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -50%);
+  }
+
+`;
+const layoutFadeOut = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  50% {
+    opacity: 0;
+  }
+  
+  100% {
+    transform: translate(-50%, -100%);
+  }
+`;
+exports.BackgroundLayout = styled_components_1.default.div `
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  background: ${(0, polished_1.transparentize)(0.2, utils_1.colors.dark.base)};
+  cursor: pointer;
+
+  ${({ fade }) => fade === Modal_1.FadeEnum.IN
+    ? (0, styled_components_1.css) `
+          animation: ${backgroundFadeIn} 0.2s linear;
+
+          ${exports.Layout} {
+            animation: ${layoutFadeIn} 0.3s linear;
+          }
+        `
+    : (0, styled_components_1.css) `
+          background: ${(0, polished_1.transparentize)(1, utils_1.colors.dark.base)};
+          animation: ${backgroundFadeOut} 0.2s linear;
+
+          ${exports.Layout} {
+            opacity: 0;
+            transform: translate(-50%, -100%);
+            animation: ${layoutFadeOut} 0.3s linear;
+          }
+        `}
+`;
 //# sourceMappingURL=Modal.styles.js.map

package/lib/ui/src/modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.styles.ts"],"names":[],"mappings":"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"}

package/lib/ui/src/modal/Modal.test.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,57 +35,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_2 = require("@testing-library/react");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const Modal_1 = __importDefault(require("./Modal"));
-const MockModal = ({ onOpen, onClose }) => {
-    const { openModal, closeModal, createModal } = (0, Modal_1.default)({ onOpen, onClose });
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("button", { "data-test": "open", onClick: () => openModal() }, "onOpen"),
-        react_1.default.createElement("button", { "data-test": "close", onClick: () => closeModal() }, "onClose"),
+const mockOnOpen = jest.fn();
+const mockOnClose = jest.fn();
+const mockOnAbort = jest.fn();
+const MockModal = () => {
+    const { createModal, openModal } = (0, Modal_1.default)({
+        onAbort: mockOnAbort,
+        onClose: mockOnClose,
+        onOpen: mockOnOpen
+    });
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement("button", { "data-test": "open", onClick: openModal }),
         createModal({
-            title: 'test',
-            text: 'text',
             icon: react_1.default.createElement("span", null),
+            text: 'text',
+            title: 'test',
             children: react_1.default.createElement("div", { "data-test": "content" })
         })));
 };
-describe('Modal hook', () => {
-    afterEach(() => jest.resetAllMocks());
-    afterAll(() => jest.clearAllMocks());
-    it('should call onOpen', () => __awaiter(void 0, void 0, void 0, function* () {
-        const onOpen = jest.fn();
-        const onClose = jest.fn();
-        const onAbort = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MockModal, { onClose: onClose, onOpen: onOpen, onAbort: onAbort }));
-        expect(react_2.screen.queryByTestId('content"]')).not.toBeInTheDocument();
-        expect(react_2.screen.queryByTestId('modal-title"]')).not.toBeInTheDocument();
-        expect(react_2.screen.queryByTestId('modal-text"]')).not.toBeInTheDocument();
-        expect(react_2.screen.queryByTestId('modal-icon"]')).not.toBeInTheDocument();
+describe('useModal', () => {
+    it('should open modal', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MockModal, null));
+        expect(react_2.screen.queryByTestId('modal-icon')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByTestId('modal-title')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByTestId('modal-text')).not.toBeInTheDocument();
+        expect(react_2.screen.queryByTestId('content')).not.toBeInTheDocument();
         yield user_event_1.default.click(react_2.screen.getByTestId('open'));
-        expect(onOpen).toHaveBeenCalledTimes(1);
-        expect(react_2.screen.getByTestId('content')).toBeInTheDocument();
+        expect(mockOnOpen).toHaveBeenCalledTimes(1);
+        expect(react_2.screen.getByTestId('modal-icon')).toBeInTheDocument();
         expect(react_2.screen.getByTestId('modal-title')).toBeInTheDocument();
         expect(react_2.screen.getByTestId('modal-text')).toBeInTheDocument();
-        expect(react_2.screen.getByTestId('modal-icon')).toBeInTheDocument();
-    }));
-    it('should call onClose', () => __awaiter(void 0, void 0, void 0, function* () {
-        const onOpen = jest.fn();
-        const onClose = jest.fn();
-        const onAbort = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(MockModal, { onClose: onClose, onOpen: onOpen, onAbort: onAbort }));
-        yield user_event_1.default.click(react_2.screen.getByTestId('open'));
-        yield user_event_1.default.click(react_2.screen.getByTestId('close'));
-        // Close annimation
-        setTimeout(() => {
-            expect(onClose).toHaveBeenCalledTimes(1);
-            expect(onAbort).toHaveBeenCalledTimes(1);
-            expect(react_2.screen.queryByTestId('content')).not.toBeInTheDocument();
-            expect(react_2.screen.queryByTestId('modal-title')).not.toBeInTheDocument();
-            expect(react_2.screen.queryByTestId('modal-text')).not.toBeInTheDocument();
-            expect(react_2.screen.queryByTestId('modal-icon')).not.toBeInTheDocument();
-        }, 500);
+        expect(react_2.screen.getByTestId('content')).toBeInTheDocument();
     }));
 });
 //# sourceMappingURL=Modal.test.js.map

package/lib/ui/src/modal/Modal.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/modal/Modal.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,kDAAwD;AACxD,6EAAoD;AAEpD,oDAA+B;AAE/B,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAE9B,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAA,eAAQ,EAAC;QAC1C,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,WAAW;QACpB,MAAM,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,gBAAQ;QACP,uDAAkB,MAAM,EAAC,OAAO,EAAE,SAAS,GAAI;QAC9C,WAAW,CAAC;YACX,IAAI,EAAE,2CAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,oDAAe,SAAS,GAAG;SACtC,CAAC,CACO,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,mBAAmB,EAAE,GAAS,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,SAAS,OAAG,CAAC,CAAC;QAEtB,MAAM,CAAC,cAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACnE,MAAM,CAAC,cAAM,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACpE,MAAM,CAAC,cAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACnE,MAAM,CAAC,cAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAEhE,MAAM,oBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;QAElD,MAAM,CAAC,UAAU,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC9D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC5D,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/ui/src/nativeSelect/NativeSelect.test.js

@@ -6,23 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const NativeSelect_1 = __importDefault(require("./NativeSelect"));
+const mockOnChange = jest.fn();
+const mockOnClickOutside = jest.fn();
 const defaultProps = {
-    onChange: jest.fn(),
-    onClickOutside: jest.fn(),
+    onChange: mockOnChange,
+    onClickOutside: mockOnClickOutside,
     options: [
-        {
-            label: '1',
-            value: '1'
-        },
-        {
-            label: '2',
-            value: '2'
-        }
+        { label: '1', value: '1' },
+        { label: '2', value: '2' }
     ],
-    displayOption: {
-        label: '',
-        value: ''
-    },
+    displayOption: { label: '', value: '' },
     label: 'test'
 };
 describe('NativeSelect component', () => {

package/lib/ui/src/nativeSelect/NativeSelect.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/nativeSelect/NativeSelect.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,kDAAwD;AAExD,kEAAiE;AAEjE,MAAM,YAAY,GAAsB;IACtC,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE;IACnB,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE;IACzB,OAAO,EAAE;QACP;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,GAAG;SACX;QACD;YACE,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,GAAG;SACX;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,sBAAY,oBAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"NativeSelect.test.js","sourceRoot":"","sources":["../../../../packages/ui/src/nativeSelect/NativeSelect.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,kDAAwD;AAExD,kEAAiE;AAEjE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAC/B,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAErC,MAAM,YAAY,GAAsB;IACtC,QAAQ,EAAE,YAAY;IACtB,cAAc,EAAE,kBAAkB;IAClC,OAAO,EAAE;QACP,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;QAC1B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;KAC3B;IACD,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACvC,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,IAAA,cAAM,EAAC,8BAAC,sBAAY,oBAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}