hrm_ui_lib 3.1.91 → 3.1.93

package/components/Modal/Modal.js

@@ -18,6 +18,7 @@ import { ModalContent } from './ModalContent';
 import { useIsMobile } from '../../hooks/useGetIsMobile';
 import classNames from 'classnames';
 import { useEscapeKey } from '../../hooks/useEscapeKey';
+import { createPortal } from 'react-dom';
 export const Modal = (_a) => {
     var { isOpen, onClose, className = '', size = 'medium', closeOnOutsideClick = true, isMobileFullScreen } = _a, rest = __rest(_a, ["isOpen", "onClose", "className", "size", "closeOnOutsideClick", "isMobileFullScreen"]);
     const isMobile = useIsMobile();
@@ -33,8 +34,8 @@ export const Modal = (_a) => {
     if (!shouldRender) {
         return null;
     }
-    return (_jsx("div", { className: classnames('modal', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classNames('modal__container', `modal__container--${animationState}`, {
+    return createPortal(_jsx("div", { className: classnames('modal', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classNames('modal__container', `modal__container--${animationState}`, {
                 modal__container_fullScreen: isMobile && isMobileFullScreen,
                 [`modal__container_fullScreen--${animationState}`]: isMobile && isMobileFullScreen
-            }), ref: setContainerRef, children: _jsx(ModalContent, Object.assign({}, rest, { onClose: onClose })) }) }));
+            }), ref: setContainerRef, children: _jsx(ModalContent, Object.assign({}, rest, { onClose: onClose })) }) }), document.body);
 };

package/components/Modal/ModalConfirmation.js

@@ -6,6 +6,7 @@ import { useAnimation } from '../../hooks/useAnimation';
 import { Button } from '../Button';
 import { Text } from '../Text';
 import { useEscapeKey } from '../../hooks/useEscapeKey';
+import { createPortal } from 'react-dom';
 export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className = '', size = 'small', buttonProps, dataIdPrefix, closeOnOutsideClick = true, iconProps, subtitle }) => {
     const { animationState, shouldRender } = useAnimation({
         isOpen,
@@ -19,5 +20,5 @@ export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className
     if (!shouldRender) {
         return null;
     }
-    return (_jsx("div", { className: classnames('modal modal--confirmation', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classnames('modal__container', 'text-center', `modal__container--${animationState}`), ref: setContainerRef, children: _jsxs("div", { className: 'modal__content', children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx("div", { className: "modal__icon mb-32", children: _jsx(iconProps.Component, { size: 'xlarge' }) })) : null, title ? (_jsx(Text, { weight: "bolder", lineHeight: "large", size: "large", dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title })) : null, subtitle ? _jsx(Text, { className: 'mt-12', children: subtitle }) : null, buttonProps ? (_jsxs("div", { className: "modal__footer mt-32", children: [_jsx(Button, Object.assign({ type: "secondary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {}))), _jsx(Button, Object.assign({ type: "danger", className: 'modal__footer__btn', onClick: onSubmit, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }) }) }));
+    return createPortal(_jsx("div", { className: classnames('modal modal--confirmation', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classnames('modal__container', 'text-center', `modal__container--${animationState}`), ref: setContainerRef, children: _jsxs("div", { className: 'modal__content', children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx("div", { className: "modal__icon mb-32", children: _jsx(iconProps.Component, { size: 'xlarge' }) })) : null, title ? (_jsx(Text, { weight: "bolder", lineHeight: "large", size: "large", dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title })) : null, subtitle ? _jsx(Text, { className: 'mt-12', children: subtitle }) : null, buttonProps ? (_jsxs("div", { className: "modal__footer mt-32", children: [_jsx(Button, Object.assign({ type: "secondary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {}))), _jsx(Button, Object.assign({ type: "danger", className: 'modal__footer__btn', onClick: onSubmit, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }) }) }), document.body);
 };

package/components/Select/Select/SelectMobile/MobileTopContent.js

@@ -13,11 +13,10 @@ export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSear
         setSearchValue('');
     };
     useEffect(() => {
-        console.log(isOpen);
-        if (isOpen && inputRef && inputRef.current) {
+        if (inputRef && inputRef.current) {
             inputRef.current.focus();
         }
-    }, [inputRef.current, isOpen]);
+    }, [inputRef.current]);
     return (_jsxs("div", { className: "flexbox mobile_top_content", children: [_jsx(IconChevronLeft, { onClick: onBack, size: "large" }), withSearch && (_jsx(Input, { currentValue: searchValue, handleChange: onSearch, className: "ml-8", size: "small", ref: inputRef, rightIconProps: {
                     Component: searchValue ? IconDismissFilled : IconSearchFilled,
                     size: searchValue ? 'xsmall' : 'small',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.1.91",
+  "version": "3.1.93",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",