intelicoreact 1.5.40 → 1.6.0

package/dist/Atomic/UI/Modal/Modal.scss

@@ -1,23 +1,33 @@
-@import "../../../scss/_vars";
-@import "../../../scss/mixins";
-
-.modal-overlay {
-  position: fixed;
-  z-index: 4;
-  top: 0;
-  left: 0;
-
-  width: 100%;
-  height: 100%;
-
-  opacity: 0.5;
-  background-color: black;
-
-  transition: opacity 0.2s ease;
-}
+@use "../../../scss/_vars";
+@use "../../../scss/mixins";
 
 .modal {
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.5;
+  --modal-bg: #fff;
+  --modal-header-bg: #f7fafc;
+  --modal-body-bg: #f7fafc;
+  --modal-footer-bg: #f7fafc;
+  --modal-border-color: #e2e5ec;
+  --modal-title-color: vars.$color--primary;
+  --modal-title-font-size: 16px;
+  --modal-title-font-weight: 400;
+  --modal-width: 600px;
   --modal-min-height: 300px;
+  --modal-margin: 0 10px;
+  --modal-padding: 15px;
+  --modal-header-padding: 10px 15px;
+  --modal-footer-padding: 7.5px 15px;
+  --modal-border-radius: 6px;
+  --modal-inner-radius: 4px;
+  --modal-box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+  --modal-close-btn-size: 40px;
+  --modal-close-icon-size: 20px;
+  --modal-close-btn-color: #1e1e2d;
+  --modal-close-hover-bg: #e2e5ec;
+  --modal-primary-bg: #{vars.$color--primary};
+  --modal-primary-title-color: #ffffff;
+  --modal-primary-close-hover: #5162d4;
   --max-height: calc(100% - 30px);
 
   position: relative;
@@ -26,14 +36,14 @@
   display: flex;
   flex-direction: column;
 
-  width: 600px;
-  min-height: var(--modal-min-height);
-  max-height: var(--max-height);
-  margin: 0 10px;
+  width: var(--modal-width, 600px);
+  min-height: var(--modal-min-height, 300px);
+  max-height: var(--max-height, calc(100% - 30px));
+  margin: var(--modal-margin, 0 10px);
 
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0 20px 20px rgb(0 0 0 / 20%);
+  border-radius: var(--modal-border-radius, 6px);
+  background-color: var(--modal-bg, #fff);
+  box-shadow: var(--modal-box-shadow, 0 20px 20px rgb(0 0 0 / 20%));
 
   &__header {
     position: relative;
@@ -42,29 +52,29 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: 10px 15px;
+    padding: var(--modal-header-padding, 10px 15px);
 
-    border-bottom: 1px solid #e2e5ec;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    background-color: #f7fafc;
+    border-bottom: 1px solid var(--modal-border-color, #e2e5ec);
+    border-top-left-radius: var(--modal-inner-radius, 4px);
+    border-top-right-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-header-bg, #f7fafc);
 
     &-primary {
-      background-color: $color--primary;
+      background-color: var(--modal-primary-bg, #{vars.$color--primary});
 
       &-title {
-        font-size: 16px;
-        font-weight: 400;
+        font-size: var(--modal-title-font-size, 16px);
+        font-weight: var(--modal-title-font-weight, 400);
 
-        color: #ffffff;
+        color: var(--modal-primary-title-color, #ffffff);
       }
     }
 
     &-title {
-      font-size: 16px;
+      font-size: var(--modal-title-font-size, 16px);
       font-weight: normal;
 
-      color: $color--primary;
+      color: var(--modal-title-color, vars.$color--primary);
     }
   }
 
@@ -73,20 +83,23 @@
     flex-grow: 1;
 
     box-sizing: border-box;
-    padding: 15px;
+    padding: var(--modal-padding, 15px);
+
+    border-bottom-right-radius: var(--modal-inner-radius, 4px);
+    border-bottom-left-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-body-bg, #f7fafc);
 
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    background-color: #f7fafc;
+    @include mixins.custom-scroll2;
 
-    @include custom-scroll2;
     &:first-of-type {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      overflow-x: hidden;
+
+      border-top-left-radius: var(--modal-inner-radius, 4px);
+      border-top-right-radius: var(--modal-inner-radius, 4px);
     }
 
     &--no-footer {
-      padding: 15px;
+      padding: var(--modal-padding, 15px);
     }
   }
 
@@ -95,12 +108,12 @@
     justify-content: flex-end;
     align-items: center;
 
-    padding: 7.5px 15px;
+    padding: var(--modal-footer-padding, 7.5px 15px);
 
-    border-top: 1px solid #e2e5ec;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    background-color: #f7fafc;
+    border-top: 1px solid var(--modal-border-color, #e2e5ec);
+    border-bottom-right-radius: var(--modal-inner-radius, 4px);
+    border-bottom-left-radius: var(--modal-inner-radius, 4px);
+    background-color: var(--modal-footer-bg, #f7fafc);
 
     &_with-left-content {
       justify-content: space-between;
@@ -113,7 +126,7 @@
 
       width: calc(100% - 30px);
 
-      background-color: #ffff;
+      background-color: var(--modal-bg, #fff);
     }
   }
 
@@ -125,6 +138,21 @@
   }
 }
 
+.modal-overlay {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  opacity: var(--modal-overlay-opacity, 0.5);
+  background-color: var(--modal-overlay-bg, black);
+
+  transition: opacity 0.2s ease;
+}
+
 .modal__footer--noborder {
   border-top: none;
 }
@@ -144,7 +172,6 @@
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
@@ -172,43 +199,42 @@
   justify-content: center;
   align-items: center;
 
-  width: 40px;
+  width: var(--modal-close-btn-size, 40px);
   height: 100%;
 
   cursor: pointer;
 
-  color: #1e1e2d;
-  //background-color: inherit;
-  border-top-right-radius: 5px;
+  color: var(--modal-close-btn-color, #1e1e2d);
+  border-top-right-radius: var(--modal-inner-radius, 4px);
   background: transparent;
 
   &:hover {
-    background-color: #e2e5ec;
+    background-color: var(--modal-close-hover-bg, #e2e5ec);
   }
 
   &-primary {
-    color: #1e1e2d;
+    color: var(--modal-close-btn-color, #1e1e2d);
 
     &:hover {
       opacity: 1;
-      background-color: #5162d4;
+      background-color: var(--modal-primary-close-hover, #5162d4);
     }
   }
 
   &-merchant {
-    color: #1e1e2d;
+    color: var(--modal-close-btn-color, #1e1e2d);
 
     &:hover {
       opacity: 1;
-      background-color: #5162d4;
+      background-color: var(--modal-primary-close-hover, #5162d4);
     }
   }
 }
 
 .modal-close-icon {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
+  width: var(--modal-close-icon-size, 20px);
+  min-width: var(--modal-close-icon-size, 20px);
+  height: var(--modal-close-icon-size, 20px);
 }
 
 .modal-text-card {
@@ -258,7 +284,7 @@
 
         font-weight: 400;
 
-        border-right: 1px solid #e2e5ec;
+        border-right: 1px solid var(--modal-border-color, #e2e5ec);
       }
 
       th:first-child,
@@ -311,7 +337,7 @@
 }
 
 .confirm-modal {
-  border-radius: 4px;
+  border-radius: var(--modal-inner-radius, 4px);
 
   .modal {
     &__header-title {
@@ -326,7 +352,7 @@
     }
 
     &__footer {
-      background-color: #ffff;
+      background-color: var(--modal-bg, #fff);
     }
   }
 }

package/dist/Atomic/UI/Modal/Modal.stories.js

@@ -42,7 +42,7 @@ _export(exports, {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../../Atomic/FormElements/Dropdown/Dropdown"));
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("@/Atomic/FormElements/Dropdown/Dropdown"));
 const _react = require("react");
 const _Alert = /*#__PURE__*/ _interop_require_default(require("../Alert/Alert"));
 const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));

package/dist/Atomic/UI/Modal/ModalHOC.js

@@ -1,43 +1,97 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _useHandleKeyPress = _interopRequireDefault(require("../../../Functions/useKeyPress/useHandleKeyPress"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _useHandleKeyPress = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useKeyPress/useHandleKeyPress"));
 require("./Modal.scss");
-const Modal = _ref => {
-  let {
-    zIndex = 100,
-    isOpen,
-    closeModal,
-    children,
-    className,
-    size,
-    testId,
-    closeOnEsc = true
-  } = _ref;
-  if (!isOpen) return null;
-  (0, _useHandleKeyPress.default)({
-    escCallback: closeOnEsc && typeof closeModal === "function" ? () => closeModal?.() : null
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      zIndex
-    },
-    "data-testid": testId,
-    className: "modal-box j5"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "modal-overlay",
-    onClick: closeModal
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: size
-    },
-    className: (0, _classnames.default)(className, "modal")
-  }, children));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const Modal = ({ zIndex = 100, isOpen, closeModal, children, className, size, testId = 'modal', closeOnEsc = true })=>{
+    const modalRef = (0, _react.useRef)(null);
+    (0, _useHandleKeyPress.default)({
+        escCallback: closeOnEsc && typeof closeModal === 'function' ? ()=>closeModal === null || closeModal === void 0 ? void 0 : closeModal() : undefined
+    });
+    if (!isOpen) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            zIndex
+        },
+        "data-testid": testId,
+        className: "modal-box j5",
+        role: "presentation",
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "modal-overlay",
+                onClick: closeModal,
+                role: "presentation",
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                ref: modalRef,
+                style: {
+                    width: size
+                },
+                className: (0, _classnames.default)(className, 'modal'),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-labelledby": testId,
+                tabIndex: -1,
+                children: children
+            })
+        ]
+    });
 };
-var _default = exports.default = Modal;
+const _default = Modal;

package/dist/Atomic/UI/Modal/ModalMobile.scss

@@ -10,26 +10,40 @@
 
 @media only screen and (max-width: 768px) {
   .modal-mobile-container {
+    --modal-container-z-index: 100;
+    --modal-container-width: 100dvw;
+    --modal-container-height: 100dvh;
+    --modal-container-border-radius: 16px;
+    --modal-content-margin-top: 16px;
+    --modal-animation-duration: 0.4s;
+    --modal-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+
     position: relative;
-    z-index: 100;
+    z-index: var(--modal-container-z-index, 100);
 
     overflow-y: auto;
 
     box-sizing: border-box;
-    width: 100dvw;
-    height: 100dvh;
+    width: var(--modal-container-width, 100dvw);
+    height: var(--modal-container-height, 100dvh);
 
-    border-radius: 16px 16px 0 0;
+    border-radius: var(--modal-container-border-radius, 16px)
+      var(--modal-container-border-radius, 16px) 0 0;
 
     .modal {
+      --modal-header-footer-width: 100%;
+      --modal-header-top: 0;
+      --modal-footer-bottom: 0;
+
       max-width: 100vw;
       max-height: unset !important;
-      margin-top: 16px !important;
+      margin-top: var(--modal-content-margin-top, 16px) !important;
 
-      border-radius: 16px 16px 0 0;
+      border-radius: var(--modal-container-border-radius, 16px)
+        var(--modal-container-border-radius, 16px) 0 0;
 
       animation-name: slideup;
-      animation-duration: 0.4s;
+      animation-duration: var(--modal-animation-duration, 0.4s);
 
       &__header,
       &__footer {
@@ -37,7 +51,7 @@
         left: 0;
 
         box-sizing: border-box;
-        width: 100%;
+        width: var(--modal-header-footer-width, 100%);
 
         &--hidden {
           position: relative;
@@ -46,20 +60,18 @@
         &--sticky {
           position: sticky;
 
-          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.15);
+          box-shadow: var(--modal-shadow, 0px 0px 16px 0px rgba(0, 0, 0, 0.15));
         }
       }
 
       &__header {
-        top: 0;
+        top: var(--modal-header-top, 0);
       }
 
       &__footer {
-        border-radius: 0 !important;
-      }
+        bottom: var(--modal-footer-bottom, 0);
 
-      &__footer {
-        bottom: 0;
+        border-radius: 0 !important;
       }
     }
 

package/dist/Atomic/UI/Modal/partials/ModalFooter.js

@@ -1,21 +1,71 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-const ModalFooter = _ref => {
-  let {
-    className = "",
-    children,
-    wrapperRef
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef,
-    className: (0, _classnames.default)("modal__footer", className)
-  }, children);
-};
-var _default = exports.default = ModalFooter;
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ModalFooter = /*#__PURE__*/ (0, _react.memo)(({ className = '', children, wrapperRef, testId = 'modal-footer' })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("footer", {
+        "data-testid": testId,
+        ref: wrapperRef,
+        className: (0, _classnames.default)('modal__footer', className),
+        role: "contentinfo",
+        "aria-label": "Modal footer",
+        children: children
+    });
+});
+ModalFooter.displayName = 'ModalFooter';
+const _default = ModalFooter;