hrm_ui_lib 3.1.11 → 3.1.13

package/components/Modal/Modal.d.ts

@@ -1,8 +1,3 @@
 import { ReactElement } from 'react';
 import { TModalPropTypes } from './types';
-export declare const MOBILE_ANIMATION: (isFullScreen?: boolean) => {
-    [key: string]: {
-        [key: string]: string | number;
-    };
-};
-export declare const Modal: (props: TModalPropTypes) => ReactElement;
+export declare const Modal: ({ isOpen, onClose, className, size, closeOnOutsideClick, isMobileFullScreen, ...rest }: TModalPropTypes) => ReactElement | null;

package/components/Modal/Modal.js

@@ -12,59 +12,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import classnames from 'classnames';
-import { motion } from 'motion/react';
-import { AnimatePresenceWrapper } from '../../helperComponents/AnimatePresenceWrapper';
 import { useHideBodyScroll, useOnOutsideClick } from '../../hooks';
+import { useAnimation } from '../../hooks/useAnimation';
 import { ModalContent } from './ModalContent';
 import { useIsMobile } from '../../hooks/useGetIsMobile';
 import classNames from 'classnames';
-const DESKTOP_ANIMATION = {
-    initial: { opacity: 0.5, scale: 0.65 },
-    animate: { opacity: 1, scale: [0.95, 1] },
-    exit: {
-        opacity: 0,
-        scale: 0.7,
-        transition: {
-            duration: 0.2
-        }
-    },
-    transition: {
-        duration: 0.4,
-        type: 'spring',
-        damping: 55,
-        stiffness: 700
-    }
-};
-export const MOBILE_ANIMATION = (isFullScreen) => {
-    return {
-        initial: {
-            height: 0,
-            bottom: 0
-        },
-        animate: {
-            height: isFullScreen ? '100%' : 'auto',
-            bottom: 0
-        },
-        exit: {
-            height: 0,
-            bottom: 0
-        },
-        transition: {
-            duration: 0.3
-        }
-    };
-};
-export const Modal = (props) => {
-    const { isOpen, onClose, className = '', size = 'medium', closeOnOutsideClick = true, isMobileFullScreen } = props, rest = __rest(props, ["isOpen", "onClose", "className", "size", "closeOnOutsideClick", "isMobileFullScreen"]);
+import { useEscapeKey } from '../../hooks/useEscapeKey';
+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();
+    const { animationState, shouldRender } = useAnimation({
+        isOpen,
+        enterDuration: isMobile ? 0 : 400,
+        exitDuration: 200
+    });
     const [containerRef, setContainerRef] = useState(null);
     useOnOutsideClick(containerRef, onClose, closeOnOutsideClick && isOpen, useId());
     useHideBodyScroll(isOpen);
-    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: classnames('modal', `modal--${size}`, className), initial: {
-                opacity: 0
-            }, animate: {
-                opacity: 1
-            }, exit: { opacity: 0 }, transition: { duration: isMobile ? 0 : 0.4 }, children: _jsx(motion.div, Object.assign({ className: classNames('modal__container', {
-                    modal__container_fullScreen: isMobile && isMobileFullScreen
-                }), ref: setContainerRef }, (isMobile ? MOBILE_ANIMATION(isMobileFullScreen) : DESKTOP_ANIMATION), { children: _jsx(ModalContent, Object.assign({}, rest, { onClose: onClose })) })) })) : null }));
+    useEscapeKey(onClose, { enabled: isOpen });
+    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}`, {
+                modal__container_fullScreen: isMobile && isMobileFullScreen,
+                [`modal__container_fullScreen--${animationState}`]: isMobile && isMobileFullScreen
+            }), ref: setContainerRef, children: _jsx(ModalContent, Object.assign({}, rest, { onClose: onClose })) }) }));
 };

package/components/Modal/ModalConfirmation.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TModalConfirmationPropTypes } from './types';
-export declare const ModalConfirmation: (props: TModalConfirmationPropTypes) => ReactElement;
+export declare const ModalConfirmation: ({ isOpen, onClose, onSubmit, title, className, size, buttonProps, dataIdPrefix, closeOnOutsideClick, iconProps, subtitle }: TModalConfirmationPropTypes) => ReactElement | null;

package/components/Modal/ModalConfirmation.js

@@ -1,36 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
 import classnames from 'classnames';
-import { motion } from 'motion/react';
-import { AnimatePresenceWrapper } from '../../helperComponents/AnimatePresenceWrapper';
 import { useHideBodyScroll, useOnOutsideClick } from '../../hooks';
+import { useAnimation } from '../../hooks/useAnimation';
 import { Button } from '../Button';
 import { Text } from '../Text';
-const DESKTOP_ANIMATION = {
-    initial: { opacity: 0.5, scale: 0.65 },
-    animate: { opacity: 1, scale: [0.95, 1] },
-    exit: {
-        opacity: 0,
-        scale: 0.7,
-        transition: {
-            duration: 0.2
-        }
-    },
-    transition: {
-        duration: 0.4,
-        type: 'spring',
-        damping: 55,
-        stiffness: 700
-    }
-};
-export const ModalConfirmation = (props) => {
-    const { isOpen, onClose, onSubmit, title, className = '', size = 'small', buttonProps, dataIdPrefix, closeOnOutsideClick = true, iconProps, subtitle } = props;
+import { useEscapeKey } from '../../hooks/useEscapeKey';
+export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className = '', size = 'small', buttonProps, dataIdPrefix, closeOnOutsideClick = true, iconProps, subtitle }) => {
+    const { animationState, shouldRender } = useAnimation({
+        isOpen,
+        enterDuration: 400,
+        exitDuration: 200
+    });
     const [containerRef, setContainerRef] = useState(null);
     useOnOutsideClick(containerRef, onClose, closeOnOutsideClick && isOpen, useId());
     useHideBodyScroll(isOpen);
-    return (_jsx(AnimatePresenceWrapper, { children: isOpen ? (_jsx(motion.div, { className: classnames('modal modal--confirmation', `modal--${size}`, className), initial: {
-                opacity: 0
-            }, animate: {
-                opacity: 1
-            }, exit: { opacity: 0 }, transition: { duration: 0.4 }, children: _jsx("div", Object.assign({ className: "modal__container text-center", ref: setContainerRef }, DESKTOP_ANIMATION, { 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] }) })) })) : null }));
+    useEscapeKey(onClose, { enabled: isOpen });
+    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] }) }) }));
 };

package/components/Select/MultiSelect/MultiBase/MultiBase.js

@@ -8,8 +8,9 @@ import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE, ITEM_SIZE_MOBILE } from '..
 import classNames from 'classnames';
 import { noop } from '../../../../utils/helpers';
 export const MultiBase = (props) => {
-    const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth } = props;
+    const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth, applySelectedItems } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations || {};
+    const [navigationMode, setNavigationMode] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [isAllSelected, setAllSelected] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -20,28 +21,39 @@ export const MultiBase = (props) => {
             case 'ArrowDown':
                 e.preventDefault();
                 setActiveIndex((prev) => Math.min(prev + 1, filteredData.length - 1));
+                setNavigationMode(true);
                 break;
             case 'ArrowUp':
                 e.preventDefault();
                 setActiveIndex((prev) => Math.max(prev - 1, 0));
+                setNavigationMode(true);
+                break;
+            case ' ':
+                if (navigationMode && activeIndex !== null) {
+                    e.preventDefault();
+                    const item = filteredData[activeIndex];
+                    if (!item) {
+                        return;
+                    }
+                    const isSelected = checkIsSelected(item.value);
+                    if (isSelected) {
+                        onDeselect(item);
+                    }
+                    else {
+                        onItemSelect(item);
+                    }
+                }
                 break;
             case 'Enter':
                 e.preventDefault();
-                const item = filteredData[activeIndex];
-                if (!item) {
-                    return;
-                }
-                const isSelected = checkIsSelected(item.value);
-                if (isSelected) {
-                    onDeselect(item);
-                }
-                else {
-                    onItemSelect(item);
-                }
+                applySelectedItems();
                 break;
             case 'Escape':
                 closeDropdown();
                 break;
+            default:
+                // any typing key exits navigation mode
+                setNavigationMode(false);
         }
     };
     useEffect(() => {

package/components/Select/MultiSelect/MultiSelect.js

@@ -63,6 +63,6 @@ export const MultiSelect = forwardRef((props, _ref) => {
                 // @ts-ignore
                 , Object.assign({ 
                     // @ts-ignore
-                    options: options, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
+                    options: options, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen, applySelectedItems: applySelectedItems }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
 });
 MultiSelect.displayName = 'MultiSelect';

package/components/Select/types.d.ts

@@ -66,6 +66,7 @@ interface TMultiSelectCompProps extends IFormCompProps, TSelectBaseProps {
 }
 export interface TMultiSingleTabPropTypes extends TMultiSelectCompProps {
     options: TSelectOptions;
+    applySelectedItems: () => void;
 }
 export interface TMultiSelectGroupedProps extends TMultiSelectCompProps {
     options: TSelectGroupOptions;

package/hooks/useAnimation.d.ts

@@ -0,0 +1,12 @@
+export type AnimationState = 'entering' | 'entered' | 'exiting' | 'exited';
+interface UseAnimationOptions {
+    isOpen: boolean;
+    enterDuration?: number;
+    exitDuration?: number;
+    onExitComplete?: () => void;
+}
+export declare const useAnimation: ({ isOpen, enterDuration, exitDuration, onExitComplete }: UseAnimationOptions) => {
+    animationState: AnimationState;
+    shouldRender: boolean;
+};
+export {};

package/hooks/useAnimation.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+export const useAnimation = ({ isOpen, enterDuration = 400, exitDuration = 200, onExitComplete }) => {
+    const [animationState, setAnimationState] = useState(isOpen ? 'entered' : 'exited');
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    useEffect(() => {
+        if (isOpen) {
+            setShouldRender(true);
+            // Start entering animation
+            setAnimationState('entering');
+            // After a brief moment, mark as entered
+            const enterTimer = setTimeout(() => {
+                setAnimationState('entered');
+            }, 10);
+            return () => {
+                clearTimeout(enterTimer);
+            };
+        }
+        else {
+            // Start exit animation
+            setAnimationState('exiting');
+            // After exit duration, remove from DOM and call callback
+            const exitTimer = setTimeout(() => {
+                setAnimationState('exited');
+                setShouldRender(false);
+                onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+            }, exitDuration);
+            return () => {
+                clearTimeout(exitTimer);
+            };
+        }
+    }, [isOpen, exitDuration, onExitComplete]);
+    return { animationState, shouldRender };
+};

package/hooks/useEscapeKey.d.ts

@@ -0,0 +1,5 @@
+type UseEscapeKeyOptions = {
+    enabled?: boolean;
+};
+export declare function useEscapeKey(onEscape: () => void, { enabled }?: UseEscapeKeyOptions): void;
+export {};

package/hooks/useEscapeKey.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+export function useEscapeKey(onEscape, { enabled = true } = {}) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onEscape();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onEscape, enabled]);
+}

package/package.json

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