intelicoreact 1.5.41 → 1.6.0

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/ModalHOC.stories.js

@@ -0,0 +1,191 @@
+// @ts-nocheck
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Default: function() {
+        return Default;
+    },
+    EmptyContent: function() {
+        return EmptyContent;
+    },
+    LargeModal: function() {
+        return LargeModal;
+    },
+    NoEscapeKey: function() {
+        return NoEscapeKey;
+    },
+    SmallModal: function() {
+        return SmallModal;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _Dropdown = /*#__PURE__*/ _interop_require_default(require("../../FormElements/Dropdown/Dropdown"));
+const _Alert = /*#__PURE__*/ _interop_require_default(require("../Alert/Alert"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+const _Hint = /*#__PURE__*/ _interop_require_default(require("../Hint/Hint"));
+const _ModalHOC = /*#__PURE__*/ _interop_require_default(require("./ModalHOC"));
+require("../../../../../scss/main.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const meta = {
+    title: 'UI/Modal/ModalHOC',
+    component: _ModalHOC.default,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Modal component with customizable header, body, and footer sections'
+            }
+        }
+    },
+    argTypes: {
+        size: {
+            description: 'Modal size in pixels or "default"',
+            control: {
+                type: 'select',
+                options: [
+                    'default',
+                    290,
+                    420,
+                    870,
+                    770,
+                    950
+                ]
+            },
+            table: {
+                category: 'Appearance'
+            }
+        },
+        closeOnEsc: {
+            description: 'Enable closing modal with Escape key',
+            control: 'boolean',
+            table: {
+                category: 'Behavior',
+                defaultValue: {
+                    summary: ''
+                }
+            }
+        },
+        isOpen: {
+            description: 'Controls modal visibility',
+            control: 'boolean',
+            table: {
+                category: 'Behavior'
+            }
+        },
+        // Content
+        children: {
+            description: 'Modal content',
+            control: 'text',
+            table: {
+                category: 'Content'
+            }
+        },
+        zIndex: {
+            description: 'Modal stack order',
+            control: 'number',
+            table: {
+                category: 'Layout',
+                defaultValue: {
+                    summary: '100'
+                }
+            }
+        }
+    }
+};
+const _default = meta;
+const Template = ({ isShowEmptyContent = false, ...args })=>{
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const closeModal = ()=>setIsOpen(false);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                onClick: ()=>setIsOpen(true),
+                label: "Show modal",
+                variant: "primary"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...args,
+                isOpen: isOpen,
+                closeModal: closeModal,
+                children: !isShowEmptyContent && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: "modal__body",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
+                            children: "Modal Content"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.default, {
+                            message: "Info alert",
+                            variant: "info",
+                            className: "mb5"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dropdown.default, {
+                            entity: "example",
+                            value: "option1",
+                            placeholder: "Select an option",
+                            options: [
+                                {
+                                    label: 'Option 1',
+                                    value: 'option1'
+                                },
+                                {
+                                    label: 'Option 2',
+                                    value: 'option2'
+                                },
+                                {
+                                    label: 'Option 3',
+                                    value: 'option3'
+                                }
+                            ],
+                            className: "mb5"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Hint.default, {
+                            hint: "This is a helpful hint",
+                            side: "right",
+                            className: "mb5"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+const Default = Template.bind({});
+Default.args = {
+    submitHandler: ()=>console.log('Submit clicked')
+};
+const SmallModal = Template.bind({});
+SmallModal.args = {
+    ...Default.args,
+    size: 290
+};
+const LargeModal = Template.bind({});
+LargeModal.args = {
+    ...Default.args,
+    size: 950
+};
+const EmptyContent = Template.bind({});
+EmptyContent.args = {
+    ...Default.args,
+    isShowEmptyContent: true
+};
+const NoEscapeKey = Template.bind({});
+NoEscapeKey.args = {
+    ...Default.args,
+    closeOnEsc: false
+};

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

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userevent = /*#__PURE__*/ _interop_require_default(require("@testing-library/user-event"));
+const _ModalHOC = /*#__PURE__*/ _interop_require_default(require("./ModalHOC"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const defaultProps = {
+    isOpen: true,
+    closeModal: jest.fn(),
+    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        children: "Modal Content"
+    })
+};
+describe('modal', ()=>{
+    beforeEach(()=>{
+        jest.clearAllMocks();
+    });
+    describe('rendering', ()=>{
+        it('should not render when isOpen is false', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                isOpen: false
+            }));
+            expect(_react.screen.queryByTestId('modal')).not.toBeInTheDocument();
+        });
+        it('should render with default testId', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps
+            }));
+            expect(_react.screen.getByTestId('modal')).toBeInTheDocument();
+        });
+        it('should render with custom testId', ()=>{
+            const customTestId = 'custom-modal';
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                testId: customTestId
+            }));
+            expect(_react.screen.getByTestId(customTestId)).toBeInTheDocument();
+        });
+        it('should render children correctly', ()=>{
+            const childText = 'Test Content';
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                children: childText
+            }));
+            expect(_react.screen.getByText(childText)).toBeInTheDocument();
+        });
+        it('should apply custom className to modal', ()=>{
+            const customClass = 'custom-modal';
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                className: customClass
+            }));
+            const modalElement = _react.screen.getByRole('dialog');
+            expect(modalElement).toHaveClass(customClass, 'modal');
+        });
+        it('should apply custom size', ()=>{
+            const size = '500px';
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                size: size
+            }));
+            const modalElement = _react.screen.getByRole('dialog');
+            expect(modalElement).toHaveStyle({
+                width: size
+            });
+        });
+        it('should apply custom zIndex', ()=>{
+            const zIndex = 200;
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                zIndex: zIndex
+            }));
+            const modalBox = _react.screen.getByTestId('modal');
+            expect(modalBox).toHaveStyle({
+                zIndex
+            });
+        });
+    });
+    describe('accessibility', ()=>{
+        it('should have correct ARIA attributes', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps
+            }));
+            const dialog = _react.screen.getByRole('dialog');
+            expect(dialog).toHaveAttribute('aria-modal', 'true');
+            expect(dialog).toHaveAttribute('aria-labelledby', 'modal');
+            expect(dialog).toHaveAttribute('tabIndex', '-1');
+        });
+        it('should have correct structure with presentation roles', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps
+            }));
+            const modalBox = _react.screen.getByTestId('modal');
+            expect(modalBox).toHaveAttribute('role', 'presentation');
+            expect(modalBox).toHaveClass('modal-box');
+            const overlay = modalBox.querySelector('.modal-overlay');
+            expect(overlay).toHaveAttribute('role', 'presentation');
+            expect(overlay).toHaveAttribute('aria-hidden', 'true');
+        });
+    });
+    describe('interactions', ()=>{
+        it('should call closeModal when overlay is clicked', async ()=>{
+            const closeModal = jest.fn();
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                closeModal: closeModal
+            }));
+            const overlay = _react.screen.getByTestId('modal').querySelector('.modal-overlay');
+            await _userevent.default.click(overlay);
+            expect(closeModal).toHaveBeenCalledTimes(1);
+        });
+        it('should call closeModal on Escape key when closeOnEsc is true', ()=>{
+            const closeModal = jest.fn();
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                closeModal: closeModal,
+                closeOnEsc: true
+            }));
+            _react.fireEvent.keyDown(document, {
+                key: 'Escape',
+                code: 'Escape'
+            });
+            expect(closeModal).toHaveBeenCalledTimes(1);
+        });
+        it('should not call closeModal on Escape key when closeOnEsc is false', ()=>{
+            const closeModal = jest.fn();
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                closeModal: closeModal,
+                closeOnEsc: false
+            }));
+            _react.fireEvent.keyDown(document, {
+                key: 'Escape',
+                code: 'Escape'
+            });
+            expect(closeModal).not.toHaveBeenCalled();
+        });
+    });
+    describe('edge cases', ()=>{
+        it('should handle undefined closeModal', ()=>{
+            const consoleSpy = jest.spyOn(console, 'error').mockImplementation(()=>{});
+            // @ts-ignore
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                closeModal: undefined
+            }));
+            _react.fireEvent.keyDown(document, {
+                key: 'Escape'
+            });
+            expect(consoleSpy).not.toHaveBeenCalled();
+            consoleSpy.mockRestore();
+        });
+        it('should handle null children', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                children: null
+            }));
+            const dialog = _react.screen.getByRole('dialog');
+            expect(dialog).toBeEmptyDOMElement();
+        });
+        it('should handle empty children', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps,
+                children: undefined
+            }));
+            const dialog = _react.screen.getByRole('dialog');
+            expect(dialog).toBeEmptyDOMElement();
+        });
+        it('should use default zIndex when not provided', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_ModalHOC.default, {
+                ...defaultProps
+            }));
+            const modalBox = _react.screen.getByTestId('modal');
+            expect(modalBox).toHaveStyle({
+                zIndex: 100
+            });
+        });
+    });
+});

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/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ModalHOC: function() {
+        return _ModalHOC.default;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _Modal = /*#__PURE__*/ _interop_require_default(require("./Modal"));
+const _ModalHOC = /*#__PURE__*/ _interop_require_default(require("./ModalHOC"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _Modal.default;