digitinary-ui 1.0.4 → 1.0.6

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import style from './accordion.module.scss';
+import SelectFieldDownArrow from '../../icons/SelectFieldDownArrow';
+const Accordion = ({ defaultExpanded = false, expanded, disabled = false, onChange, summary, children, className, }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const isControlled = expanded !== undefined;
+    const toggleAccordion = () => {
+        if (disabled)
+            return;
+        if (isControlled && onChange) {
+            onChange();
+        }
+        else {
+            setIsExpanded(!isExpanded);
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            toggleAccordion();
+        }
+    };
+    const shouldExpand = isControlled ? expanded && !disabled : isExpanded && !disabled;
+    return (_jsxs("div", { className: `${style.accordion} ${shouldExpand ? style.expanded : ''} ${disabled ? style.disabled : ''} ${className}`, children: [_jsxs("div", { className: style.summary, onClick: toggleAccordion, onKeyDown: handleKeyDown, "aria-expanded": shouldExpand, role: "button", tabIndex: 0, children: [summary, _jsx("div", { className: style.iconContainer, children: _jsx(SelectFieldDownArrow, { "data-id": "ACCORDION_DROPDOWN_ARROW_ICON", className: `${style.dropdownIcon} ${shouldExpand ? style.rotateFlip : ''} ${disabled ? style.disabled : ''}`, width: "1.5rem", height: "1.5rem" }) })] }), _jsx("div", { className: `${style.details} ${shouldExpand ? style.show : ''}`, children: children })] }));
+};
+export default Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+export { default } from './Accordion';

package/dist/components/Alert/Alert.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import style from './alert.module.scss';
+import ErrorAlert from '../../icons/AlertErrorIcon';
+import WarningAlert from '../../icons/AlertWarningIcon';
+import InfoAlert from '../../icons/AlertInfoIcon';
+import NaturalAlert from '../../icons/InfoIcon';
+import SuccessAlert from '../../icons/AlertSuccessIcon';
+import CloseIcon from '../../icons/CloseIcon';
+const severityMap = {
+    info: InfoAlert,
+    success: SuccessAlert,
+    error: ErrorAlert,
+    warning: WarningAlert,
+    natural: NaturalAlert,
+};
+const Alert = ({ severity = 'info', color = severity, variant = 'default', onClose, action, className, icon = true, // Default to true, showing the icon based on severity
+customStyle, children, }) => {
+    const IconComponent = severityMap[severity];
+    const [visible, setVisible] = useState(true);
+    const [exitTransition, setExitTransition] = useState(false);
+    const actionBtnRef = useRef(null);
+    const alertContentRef = useRef(null);
+    const handleClose = () => {
+        setExitTransition(true);
+        if (typeof onClose === 'function')
+            onClose();
+        setTimeout(() => {
+            setVisible(false);
+        }, 500);
+    };
+    useEffect(() => {
+        let offsetWidth = 0;
+        if (actionBtnRef.current) {
+            const actionBtnWidth = actionBtnRef.current.offsetWidth / 16;
+            offsetWidth += actionBtnWidth;
+        }
+        if (onClose) {
+            offsetWidth += 1.5;
+        }
+        if (actionBtnRef.current || onClose) {
+            offsetWidth += 1;
+        }
+        if (alertContentRef.current) {
+            alertContentRef.current.style.marginRight = `${offsetWidth}rem`;
+        }
+    }, []);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { className: `${className} ${style.alertContainer} ${style[color]} ${style[variant]} ${exitTransition ? style.exit : ''}`, style: customStyle, role: "alert", "data-id": `ALERT${severity ? `_${severity?.toUpperCase()}_ID` : ''}`, children: [icon === true ? (
+            // Default icon based on severity
+            _jsx(IconComponent, { className: `${style.alertIcon} ${style[color]} ${style[variant]}`, width: "1.25rem", height: "1.25rem", "data-id": "ALERT-ICON" })) : icon ? ( // Render custom icon if icon is JSX.Element
+            icon) : null, _jsx("div", { className: style.alertContent, ref: alertContentRef, children: children }), _jsxs("div", { className: style.actionContainer, children: [action && (_jsx("div", { className: style.actionButton, ref: actionBtnRef, children: action })), onClose && (_jsx(CloseIcon, { className: style.closeIcon, width: "1.25rem", height: "1.25rem", "data-id": "CLOSE-ICON", tabIndex: 0, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ')
+                                handleClose();
+                        }, onClick: handleClose, "aria-label": "Close alert" }))] })] }));
+};
+export default Alert;

package/dist/components/Alert/index.js

@@ -0,0 +1 @@
+export { default } from './Alert';

package/dist/components/Button/Button.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './button.module.scss';
+import LoaderIcon from '../../icons/LoaderIcon';
+import { Size } from '../../types';
+const Button = ({ children, className = '', variant = 'contained', color = 'primary', size = Size.Medium, type = 'button', disabled, loading, startIcon, endIcon, fullWidth, onKeyDown, onClick, active, ...props }) => {
+    return (_jsxs("button", { className: `${styles.customBtn} 
+        ${styles[variant]} 
+        ${styles[size]} 
+        ${styles[color]} 
+        ${disabled ? styles.disabled : ''} 
+        ${loading ? styles.loading : ''} 
+        ${active ? styles.active : ''} 
+        ${fullWidth ? styles.fullWidth : ''}
+        ${className || ''}`, disabled: disabled || loading, type: type, onKeyDown: onKeyDown, onClick: onClick, "data-id": `${String(children).toUpperCase().replaceAll(' ', '_')}_BUTTON_ID`, ...props, children: [_jsxs("div", { className: styles.btnContentWrapper, children: [startIcon && _jsx("div", { className: styles.startBtnIcon, children: startIcon }), _jsx("div", { className: styles.btnContent, children: children }), endIcon && _jsx("div", { className: styles.endBtnIcon, children: endIcon })] }), loading && (_jsx("div", { className: styles.btnLoaderContainer, children: _jsx("div", { className: styles.btnLoaderIconContainer, children: _jsx(LoaderIcon, { className: styles.btnLoaderIcon, width: '1.5rem', height: '1.5rem' }) }) }))] }));
+};
+Button.displayName = 'Button';
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

package/dist/components/Card/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './card.module.scss';
+const Card = ({ header, children, footer, className = '', rounded = true }) => {
+    return (_jsxs("div", { className: `${styles.cardContainer} ${className} ${rounded ? styles.roundedCorners : ''}`, children: [header && _jsx("section", { className: styles.cardHeader, children: header }), children && _jsx("section", { className: styles.cardBody, children: children }), _jsx("section", { className: styles.cardFooter, children: footer })] }));
+};
+export default Card;

package/dist/components/Card/index.js

@@ -0,0 +1 @@
+export { default } from './Card';

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckMark from '../../icons/CheckMark';
+import styles from './checkbox.module.scss';
+import { Position, Size } from '../../types';
+const Checkbox = ({ label, labelPlacement = Position.Start, handleCheckboxChange, className = '', checked = false, size = Size.Medium, disabled = false, }) => {
+    return (_jsx("div", { className: `${styles.checkBox} ${className}`, children: _jsx("div", { className: styles.checkBoxItemsContainer, children: _jsxs("div", { className: `${styles.checkBoxItemContainer} ${styles[labelPlacement]}`, onClick: !disabled ? handleCheckboxChange : undefined, tabIndex: 0, children: [_jsx("div", { className: `${styles.itemCheckbox} ${disabled ? styles.disabledCheckbox : checked ? styles.checked : ''}`, children: checked && (_jsx(CheckMark, { width: size === 'small' ? '1.5rem' : size === 'large' ? '1rem' : '0.875rem', height: size === 'small' ? '1.5rem' : size === 'large' ? '1rem' : '0.875rem' })) }), _jsx("label", { className: `${styles.checkBoxItemLabel} ${styles[size] || styles.medium} ${disabled ? styles.disabledLabel : ''}`, children: label })] }) }) }));
+};
+export default Checkbox;

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/dist/components/Chip/Chip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './chip.module.scss';
+import CloseIcon from '../../icons/CloseIcon';
+import { Size } from '../../types';
+const Chip = ({ className = '', color = 'primary', children, variant = 'filled', clickable, onClick, onDelete, size = Size.Small, id, }) => {
+    return (_jsxs("span", { className: `${styles.singleChip} ${styles[size]} ${variant === 'filled' ? styles[`chip-${color}`] : ''} ${className} ${clickable ? styles.clickable : ''}
+      ${variant === 'outlined'
+            ? styles[`outlinedChip-${color}`]
+            : clickable
+                ? styles[`clickable-${color}`]
+                : ''} `, onClick: onClick, children: [children, onDelete && (_jsx("div", { className: styles.deleteContainer, children: _jsx(CloseIcon, { onClick: (e) => {
+                        e.stopPropagation();
+                        if (id)
+                            onDelete(id);
+                    }, className: styles.chipCloseIcon, width: '0.875rem', height: '0.875rem', "data-id": "CHIPS_CLOSE_ICON" }) }))] }));
+};
+Chip.displayName = 'Chip';
+export default Chip;

package/dist/components/Chip/index.js

@@ -0,0 +1 @@
+export { default } from './Chip';

package/dist/components/Date/Date.js

@@ -0,0 +1,460 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import moment from 'moment';
+import Button from '../Button';
+import styles from './date.module.scss';
+import ClearField from '../../icons/ClearField';
+import CalendarIcon from '../../icons/Calendar';
+import ArrowUpIcon from '../../icons/ArrowUpIcon';
+import RightArrowIcon from '../../icons/RightArrowIcon';
+import ArrowBottomIcon from '../../icons/ArrowBottom';
+import LeftArrowIcon from '../../icons/LeftArrowIcon';
+const Date = ({ id, label, placeholder, helperText, errorMsg, value, onChange, disabledDay, selectedEndDate, success, disabled, size = 'medium', clearable = true, disablePastDays, timePicker, isEndDay, defaultFormat = !timePicker ? 'DD MMM YYYY' : 'DD MMM YYYY HH:mm:ss', required, acceptSameDay, setCheckDateOpened, maxDate, minDate, className = '', dataId, }) => {
+    const presentDate = moment().startOf('day');
+    const years = getYears();
+    const datepickerRef = useRef(null);
+    const [currentMonth, setCurrentMonth] = useState(moment());
+    const [showDatePicker, setShowDatePicker] = useState(false);
+    const [calendarView, setCalendarView] = useState('daily');
+    const currentDate = moment();
+    const [yearsObj, setYearsObj] = useState({
+        currentView: Math.floor(years.length / 12 - 1),
+        itemsPerView: 12,
+        allYears: years,
+    });
+    const [time, setTime] = useState({
+        h: isEndDay && !value ? 23 : value ? Number(moment(value).format('H')) : 0,
+        mm: isEndDay && !value ? 59 : value ? Number(moment(value).format('m')) : 0,
+        ss: isEndDay && !value ? 59 : value ? Number(moment(value).format('s')) : 0,
+    });
+    const [selectedDate, setSelectedDate] = useState(moment());
+    const weekdaysShort = moment.weekdaysShort();
+    const weeks = getWeeksArray(currentMonth);
+    const monthsShort = moment.monthsShort();
+    const startYears = (yearsObj.currentView - 1) * yearsObj.itemsPerView;
+    const endYears = startYears + yearsObj.itemsPerView;
+    const displayedYears = yearsObj.allYears.slice(startYears, endYears);
+    const totalYears = Math.ceil(yearsObj.allYears.length / yearsObj.itemsPerView);
+    const nextMonthRefs = useRef(null);
+    const prevMonthRefs = useRef(null);
+    const [isEndDateCorrect, setIsEndDateCorrect] = useState(true);
+    const [isStartDateCorrect, setIsStartDateCorrect] = useState(true);
+    function timeKeyDown(e, increaseNum, decreaseNum) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            submitDate();
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.stopPropagation();
+            increaseNum();
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.stopPropagation();
+            decreaseNum();
+            e.preventDefault();
+        }
+    }
+    function getYears() {
+        const years = [];
+        const pastYear = moment().subtract(100, 'years').year();
+        const futureYear = moment().add(30, 'years').year();
+        for (let year = pastYear; year <= futureYear; year++)
+            years.push(year);
+        return years;
+    }
+    function getWeeksArray(month) {
+        const firstDayOfMonth = moment(month).startOf('month');
+        const firstDayOfCalendar = moment(firstDayOfMonth).startOf('week');
+        const lastDayOfMonth = moment(month).endOf('month');
+        const numWeeks = lastDayOfMonth.diff(firstDayOfMonth, 'weeks') + 1;
+        const weeks = [];
+        for (let i = 0; i < numWeeks; i++) {
+            weeks.push(moment(firstDayOfCalendar).add(i, 'weeks'));
+        }
+        return weeks;
+    }
+    const increaseHours = () => {
+        if (time.h < 23)
+            setTime((prev) => ({ ...prev, h: prev.h + 1 }));
+        if (time.h === 23)
+            setTime((prev) => ({ ...prev, h: 0 }));
+    };
+    const decreaseHours = () => {
+        if (time.h > 0)
+            setTime((prev) => ({ ...prev, h: prev.h - 1 }));
+        if (time.h === 0)
+            setTime((prev) => ({ ...prev, h: 23 }));
+    };
+    const increaseMinuts = () => {
+        if (time.mm < 59)
+            setTime((prev) => ({ ...prev, mm: prev.mm + 1 }));
+        if (time.mm === 59)
+            setTime((prev) => ({ ...prev, mm: 0 }));
+    };
+    const decreaseMinuts = () => {
+        if (time.mm > 0)
+            setTime((prev) => ({ ...prev, mm: prev.mm - 1 }));
+        if (time.mm === 0)
+            setTime((prev) => ({ ...prev, mm: 59 }));
+    };
+    const increaseSeconds = () => {
+        if (time.ss < 59)
+            setTime((prev) => ({ ...prev, ss: prev.ss + 1 }));
+        if (time.ss === 59)
+            setTime((prev) => ({ ...prev, ss: 0 }));
+    };
+    const decreaseSeconds = () => {
+        if (time.ss > 0)
+            setTime((prev) => ({ ...prev, ss: prev.ss - 1 }));
+        if (time.ss === 0)
+            setTime((prev) => ({ ...prev, ss: 59 }));
+    };
+    const setTimeoutDisable = () => {
+        if (isEndDay) {
+            document.querySelectorAll(`.${styles.row} .${styles.dayUnit}`).forEach((cell) => {
+                const cellElement = cell;
+                if (disabledDay && moment(cellElement.dataset.val).isBefore(moment(disabledDay))) {
+                    cellElement?.classList.add(styles.dayOff);
+                    cellElement.disabled = true;
+                }
+                const endOfDay = moment(disabledDay).clone().endOf('day');
+                if (acceptSameDay) {
+                    if (disabledDay && moment(cellElement.dataset.val).isBefore(moment(disabledDay))) {
+                        cellElement?.classList.add(styles.dayOff);
+                        cellElement.disabled = true;
+                    }
+                }
+                else {
+                    if (moment(disabledDay).format(defaultFormat) === moment(endOfDay).format(defaultFormat)) {
+                        if (moment(cellElement.dataset.val).format('D') === moment(disabledDay).format('D')) {
+                            cellElement?.classList.add(styles.dayOff);
+                            cellElement.disabled = true;
+                        }
+                    }
+                }
+            });
+        }
+        else if (selectedEndDate) {
+            document.querySelectorAll(`.${styles.row} .${styles.dayUnit}`).forEach((cell) => {
+                const cellElement = cell;
+                if (moment(cellElement.dataset.val).isAfter(selectedEndDate)) {
+                    cellElement?.classList.add(styles.dayOff);
+                    cellElement.disabled = true;
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        setSelectedDate(value === null ? '' : value);
+    }, [value]);
+    useEffect(() => {
+        setCheckDateOpened && setCheckDateOpened(showDatePicker);
+    }, [showDatePicker]);
+    const checkDate = (endDate) => {
+        if (disabledDay &&
+            (endDate ?? value) &&
+            id === 'end' &&
+            !acceptSameDay &&
+            moment(disabledDay).isSameOrAfter(moment(endDate ?? value))) {
+            setIsEndDateCorrect(false);
+            return false;
+        }
+        else {
+            setIsEndDateCorrect(true);
+            return true;
+        }
+    };
+    const excludePastDate = (startDate) => {
+        const currentDate = moment().format('DD MMM YYYY HH:mm');
+        if ((startDate ?? disabledDay) &&
+            id === 'start' &&
+            moment(currentDate).isAfter(moment(startDate ?? disabledDay).format('DD MMM YYYY HH:mm'))) {
+            setIsStartDateCorrect(false);
+            return false;
+        }
+        else {
+            setIsStartDateCorrect(true);
+            return true;
+        }
+    };
+    useEffect(() => {
+        const presentDateElement = document.querySelector(`.${styles.row} .${styles.dayUnit} .${styles.present}`);
+        const presentDateHtml = presentDateElement;
+        const presentDate = presentDateHtml ? presentDateHtml.dataset.val : null;
+        document.querySelectorAll(`.${styles.row} .${styles.dayUnit}`).forEach((cell) => {
+            const cellElement = cell;
+            if (presentDate &&
+                moment(cellElement.dataset.val, 'D MMM YYYY').isSame(moment(presentDate), 'day')) {
+                cellElement.classList.add(`${styles.present}`);
+            }
+        });
+        setTimeout(() => {
+            document.querySelectorAll(`.${styles.row} .${styles.dayUnit}`).forEach((selected) => {
+                const dataVal = selected.getAttribute('data-val');
+                if (dataVal) {
+                    if (moment(dataVal).isSame(selectedDate, 'day')) {
+                        selected.classList.add(`${styles.active}`);
+                    }
+                    else {
+                        selected.classList.remove(`${styles.active}`);
+                    }
+                }
+            });
+            document
+                .querySelectorAll(`.${styles.present}.${styles.active}`)
+                .forEach((cell) => cell.classList.remove(styles.present));
+        }, 0);
+    }, [showDatePicker, currentMonth, selectedDate]);
+    const excludePastDay = () => {
+        document.querySelectorAll(`.${styles.row} .${styles.dayUnit}`).forEach((cell) => {
+            const cellElement = cell;
+            if (moment(cellElement.dataset.val) < presentDate) {
+                cellElement?.classList.add(styles.dayOff);
+                cellElement.disabled = true;
+            }
+        });
+    };
+    const handleMinDate = () => {
+        const datepickerFrom = document.getElementById('datepicker-from');
+        if (datepickerFrom) {
+            const dayUnits = datepickerFrom.querySelectorAll('[data-val]');
+            dayUnits.forEach((cell) => {
+                const dataVal = cell.getAttribute('data-val');
+                if (moment(dataVal).format('YYYY-MM-DD') < moment(minDate).format('YYYY-MM-DD')) {
+                    cell.classList.add(styles.dayOff);
+                    cell.disabled = true;
+                }
+            });
+        }
+    };
+    const handleMaxDate = () => {
+        const datepickerFrom = document.getElementById('datepicker-from');
+        if (datepickerFrom) {
+            const dayUnits = datepickerFrom.querySelectorAll('[data-val]');
+            dayUnits.forEach((cell) => {
+                const dataVal = cell.getAttribute('data-val');
+                if (moment(dataVal).format('YYYY-MM-DD') > moment(maxDate).format('YYYY-MM-DD')) {
+                    cell.classList.add(styles.dayOff);
+                    cell.disabled = true;
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        setTimeoutDisable();
+        if (disablePastDays) {
+            excludePastDay();
+        }
+        else if (maxDate) {
+            handleMaxDate();
+        }
+    }, [currentMonth, calendarView, showDatePicker, yearsObj]);
+    useEffect(() => {
+        if (minDate) {
+            handleMinDate();
+        }
+    }, [currentMonth, calendarView, showDatePicker, yearsObj]);
+    const handlePrev = () => {
+        switch (calendarView) {
+            case 'daily':
+                return setCurrentMonth(moment(currentMonth).subtract(1, 'month'));
+            case 'monthly':
+                return setCurrentMonth(moment(currentMonth).subtract(1, 'year'));
+            case 'yearly':
+                if (yearsObj.currentView) {
+                    return setYearsObj((prev) => ({
+                        ...prev,
+                        currentView: yearsObj.currentView - 1,
+                    }));
+                }
+                else {
+                    return null;
+                }
+            default:
+        }
+    };
+    const handleNext = () => {
+        switch (calendarView) {
+            case 'daily':
+                return setCurrentMonth(moment(currentMonth).add(1, 'month'));
+            case 'monthly':
+                return setCurrentMonth(moment(currentMonth).add(1, 'year'));
+            case 'yearly':
+                if (yearsObj.currentView < totalYears) {
+                    setYearsObj((prev) => ({
+                        ...prev,
+                        currentView: yearsObj.currentView + 1,
+                    }));
+                }
+                else {
+                    return null;
+                }
+            default:
+        }
+    };
+    const hidePicker = () => {
+        if (id === 'end' && moment(disabledDay).isSameOrAfter(moment(value))) {
+            setShowDatePicker(true);
+        }
+        else if (id === 'end' && moment(disabledDay).isBefore(moment(value))) {
+            setShowDatePicker(false);
+        }
+        setShowDatePicker(false);
+    };
+    const showCalendarView = (view) => setCalendarView(view);
+    const handleFocus = () => {
+        setShowDatePicker(!showDatePicker);
+        setDate(value === null ? '' : value);
+    };
+    const selectView = (month, year) => {
+        if (calendarView === 'monthly') {
+            setCalendarView('daily');
+            setCurrentMonth(moment().month(month).year(Number(year)));
+        }
+        if (calendarView === 'yearly') {
+            setCalendarView('monthly');
+            setCurrentMonth(moment().month(month).year(Number(month)));
+        }
+    };
+    const setDate = (day) => {
+        setSelectedDate(moment(day).format(defaultFormat));
+    };
+    const submitDate = (submittedDate) => {
+        const isCorrect = checkDate(moment(submittedDate)
+            .set({ hour: time.h, minute: time.mm, second: time.ss })
+            .format(defaultFormat));
+        const isEndDateTimeCorrect = excludePastDate(moment(submittedDate)
+            .set({ hour: time.h, minute: time.mm, second: time.ss })
+            .format(defaultFormat));
+        if (id === 'end' && !isCorrect)
+            return;
+        if (id === 'start' && !isEndDateTimeCorrect && disablePastDays)
+            return;
+        hidePicker();
+        onChange(moment(submittedDate)
+            .set({ hour: time.h, minute: time.mm, second: time.ss })
+            .format(defaultFormat));
+    };
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (datepickerRef.current &&
+                !datepickerRef.current.contains(event.target) &&
+                event.target &&
+                !(event.target.matches &&
+                    event.target.matches(`#${id ?? 'date-picker-id'}`))) {
+                hidePicker();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [datepickerRef]);
+    const clearTime = (id) => {
+        if (id === 'start') {
+            setTime({ h: 0, mm: 0, ss: 0 });
+        }
+        else if (id === 'end') {
+            setTime({ h: 23, mm: 59, ss: 59 });
+        }
+        else
+            return;
+    };
+    const [flipDropdown, setFlipDropdown] = useState(false);
+    const isInViewport = (element, timePicker) => {
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            const coordinationElement = document.elementFromPoint(rect.left + 50, rect.bottom - 30);
+            const foundLastItemInList = Array.from(element.children).find((child) => child === coordinationElement);
+            const isOverlapped = !foundLastItemInList ? 0 : 150;
+            return timePicker
+                ? rect.bottom + 373 - (window.innerHeight - isOverlapped) >= 0
+                : rect.bottom + 287 - window.innerHeight >= 0;
+        }
+        // Return false if the element is falsy
+        return false;
+    };
+    useEffect(() => {
+        if (showDatePicker && datepickerRef.current) {
+            setFlipDropdown(isInViewport(datepickerRef.current));
+        }
+        else
+            setFlipDropdown(false);
+    }, [datepickerRef, showDatePicker]);
+    return (_jsxs("div", { className: `${styles.dateContainer} ${className}`, children: [label && (_jsxs("label", { htmlFor: id, className: styles.dateLabel, "data-id": `${String(dataId ?? label)
+                    .toUpperCase()
+                    .replaceAll(' ', '_')}_FIELD_LABEL_ID`, children: [label, required && _jsx("span", { className: styles.star, children: "*" })] })), _jsxs("div", { className: styles.dateInputContainer, ref: datepickerRef, children: [_jsxs("div", { className: `${styles.inputIconsContainer} ${disabled ? styles.disabled : ''} ${styles[size]} ${errorMsg ? styles.error : ''} ${success ? styles.success : ''} ${!value ? styles.placeholder : ''}`, children: [_jsx("input", { id: id, className: `${styles.dateInput} ${disabled ? styles.disabled : ''}`, onChange: (e) => onChange(e.target.value), disabled: disabled, value: value ?? '', placeholder: placeholder, readOnly: true, "data-id": `${String(dataId ?? label)
+                                    ?.toUpperCase()
+                                    .replaceAll(' ', '_')}_FIELD_ID`, onClick: () => handleFocus(), onKeyDown: (e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        setShowDatePicker(!showDatePicker);
+                                    }
+                                }, autoComplete: "off" }), helperText && _jsx("span", { className: styles.dateHelper, children: helperText }), errorMsg && _jsx("span", { className: styles.dateError, children: errorMsg }), _jsxs("div", { className: `${styles.iconsContainer} ${disabled ? styles.disabled : ''}`, onClick: () => !disabled && handleFocus(), children: [clearable && value && !disabled && (_jsx(ClearField, { className: styles.clearIcon, width: '1rem', height: '1rem', onClick: (e) => {
+                                            e.stopPropagation();
+                                            onChange(null);
+                                            clearTime(id);
+                                            setShowDatePicker(false);
+                                        }, "data-id": 'CLEAR_ICON_ID' })), _jsx(CalendarIcon, { className: `${styles.calendarIcon} ${disabled ? styles.disabled : ''} ${value ? styles.activeContent : ''}`, width: 24, height: 24, onClick: (e) => {
+                                            !disabled && handleFocus();
+                                            e.stopPropagation();
+                                        }, "data-id": "CALENDER_ICON" })] })] }), showDatePicker && (_jsxs("div", { id: "datepicker-from", className: `${styles.datepicker} ${flipDropdown ? styles[`flip-${size}`] : ''}`, children: [_jsxs("div", { className: styles.datepickerCalendar, children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.headerDates, children: [_jsx("button", { type: "button", className: `${styles.monthChange} ${styles.goToPreviousMonth}`, ref: (ref) => (prevMonthRefs.current = ref), onKeyDown: (e) => {
+                                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                                handlePrev();
+                                                                e.preventDefault();
+                                                                e.stopPropagation();
+                                                            }
+                                                        }, onClick: (e) => {
+                                                            e.preventDefault();
+                                                            handlePrev();
+                                                        }, "data-id": "PREVIOUS_DAY", children: _jsx(LeftArrowIcon, { width: '0.875rem', height: '0.875rem' }) }), _jsxs("span", { className: `${styles.headerDates} ${styles.YearAndMonth}`, children: [calendarView === 'daily' && (_jsx("span", { 
+                                                                // className={styles.pickMonth}
+                                                                className: `${styles.pickMonth} ${moment(currentMonth).format('MMMM') === moment(currentDate).format('MMMM')
+                                                                    ? styles.active
+                                                                    : ''}`, "data-id": "PICK_MONTH", onClick: () => showCalendarView('monthly'), children: currentMonth.format('MMMM') })), (calendarView === 'monthly' || calendarView === 'daily') && (_jsx("span", { className: styles.pickYear, "data-id": "PICK_YEAR", onClick: () => showCalendarView('yearly'), children: currentMonth.format('YYYY') })), calendarView === 'yearly' && (_jsx("span", { className: styles.selectYear, children: "Select a Year" }))] }), _jsx("button", { type: "button", "data-id": "NEXT_DAY", className: `${styles.monthChange} ${styles.goToNextMonth}`, ref: (ref) => (nextMonthRefs.current = ref), onKeyDown: (e) => {
+                                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                                e.preventDefault();
+                                                                handleNext();
+                                                            }
+                                                        }, onClick: (e) => {
+                                                            handleNext();
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                        }, children: _jsx(RightArrowIcon, { width: '0.875rem', height: '0.875rem' }) })] }), _jsx("div", { className: styles.headerDaysRow, children: calendarView === 'daily' &&
+                                                    weekdaysShort?.map((day, idx) => (_jsx("span", { className: styles.dayName, children: day }, idx))) })] }), _jsxs("div", { className: styles.bodyDaysRow, children: [calendarView === 'daily' &&
+                                                weeks?.map((week) => {
+                                                    return (_jsx("div", { className: styles.row, children: Array.from({ length: 7 })?.map((_, i) => {
+                                                            const day = moment(week).add(i, 'days');
+                                                            const isCurrentMonth = day.isSame(currentMonth, 'month');
+                                                            const isToday = day.isSame(moment(), 'day');
+                                                            const className = isCurrentMonth
+                                                                ? `${styles.currentMonth} ${isToday ? styles.active : ''}`
+                                                                : styles.otherMonth;
+                                                            return (_jsx("button", { type: "button", "data-val": moment(day)
+                                                                    .set({ hour: time.h, minute: time.mm, second: time.ss })
+                                                                    .format(defaultFormat), "data-disabledday": moment(disabledDay, defaultFormat).format('D/M'), className: `${styles.dayUnit} ${className}
+                               ${day.isSame(moment(currentDate), 'day') ? styles.present : ''}`, onClick: (e) => {
+                                                                    e.preventDefault();
+                                                                    timePicker
+                                                                        ? setDate(day)
+                                                                        : submitDate(moment(day).format(defaultFormat));
+                                                                }, children: day.format('D') }, day.format(defaultFormat)));
+                                                        }) }, week.format(defaultFormat)));
+                                                }), calendarView === 'monthly' && (_jsx("div", { className: styles.bodyMonthsView, children: monthsShort?.map((month, index) => {
+                                                    return (_jsx("button", { type: "button", onClick: () => selectView(index, currentMonth.format('YYYY')), className: `${styles.month} ${index === moment(selectedDate).month() ? styles.active : ''}`, children: _jsx("span", { children: month }) }, month));
+                                                }) })), calendarView === 'yearly' && (_jsx("div", { className: styles.bodyYearsView, children: displayedYears?.map((year) => (_jsx("button", { type: "button", onClick: () => selectView(year), className: `${styles.year} ${year === moment(selectedDate).year() ? styles.active : ''}`, children: _jsx("span", { children: year }) }, year))) }))] })] }), timePicker && (_jsxs(_Fragment, { children: [_jsx("hr", { className: styles.separator }), _jsxs("div", { className: styles.timePicker, children: [_jsxs("div", { className: styles.inputContainer, children: [_jsx("input", { className: `${styles.hours} ${!isEndDateCorrect || (!isStartDateCorrect && disablePastDays)
+                                                            ? styles.errorInput
+                                                            : ''}`, "data-id": "HOURS_TIME_PICKER", type: "number", value: time.h < 10 ? `0${time.h}` : time.h, readOnly: true, onKeyDown: (e) => timeKeyDown(e, increaseHours, decreaseHours) }), _jsxs("div", { className: styles.buttons, children: [_jsx("span", { className: styles.button, onClick: increaseHours, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem', "data-id": "DOWN_ARROW_HOURS_TIME_PICKER" }) }), _jsx("span", { className: styles.button, onClick: decreaseHours, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem', "data-id": "UP_ARROW_HOURS_TIME_PICKER" }) })] })] }), _jsxs("div", { className: styles.inputContainer, children: [_jsx("input", { className: `${styles.minutes} ${!isEndDateCorrect || (!isStartDateCorrect && disablePastDays)
+                                                            ? styles.errorInput
+                                                            : ''}`, type: "number", "data-id": "MINUTED_TIME_PICKER", value: time.mm < 10 ? `0${time.mm}` : time.mm, readOnly: true, onKeyDown: (e) => timeKeyDown(e, increaseMinuts, decreaseMinuts) }), _jsxs("div", { className: styles.buttons, children: [_jsx("span", { className: styles.button, onClick: increaseMinuts, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem', "data-id": "DOWN_ARROW_MINUTED_TIME_PICKER" }) }), _jsx("span", { className: styles.button, onClick: decreaseMinuts, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem', "data-id": "UP_ARROW_MINUTED_TIME_PICKER" }) })] })] }), _jsxs("div", { className: styles.inputContainer, children: [_jsx("input", { className: `${styles.seconds} ${!isEndDateCorrect || (!isStartDateCorrect && disablePastDays)
+                                                            ? styles.errorInput
+                                                            : ''}`, type: "number", "data-id": "SECONDS_TIME_PICKER", value: time.ss < 10 ? `0${time.ss}` : time.ss, readOnly: true, onKeyDown: (e) => timeKeyDown(e, increaseSeconds, decreaseSeconds) }), _jsxs("div", { className: styles.buttons, children: [_jsx("span", { className: styles.button, onClick: increaseSeconds, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem', "data-id": "DOWN_ARROW_SECONDS_TIME_PICKER" }) }), _jsx("span", { className: styles.button, onClick: decreaseSeconds, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem', "data-id": "UP_ARROW_SECONDS_TIME_PICKER" }) })] })] }), !isEndDateCorrect || (!isStartDateCorrect && disablePastDays) ? (_jsx("span", { className: styles.errorTimeMessage, children: "Invalid Date" })) : null] }), _jsx(Button, { className: styles.submit, variant: "outlined", fullWidth: true, onClick: () => {
+                                            submitDate(selectedDate);
+                                        }, disabled: !selectedDate || selectedDate === 'Invalid date', onKeyDown: () => (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                submitDate(selectedDate);
+                                            }
+                                        }, children: "Submit" })] }))] }))] })] }));
+};
+export default Date;

package/dist/components/Date/index.js

@@ -0,0 +1 @@
+export { default } from './Date';