digitinary-ui 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digitinary-ui",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Digitinary UI Library",
   "author": "Digitinary Company",
   "repository": {

package/dist/components/Accordion/Accordion.js

@@ -1,28 +0,0 @@
-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

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

package/dist/components/Alert/Alert.js

@@ -1,58 +0,0 @@
-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

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

package/dist/components/Button/Button.js

@@ -1,17 +0,0 @@
-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

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

package/dist/components/Card/Card.js

@@ -1,6 +0,0 @@
-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

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

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +0,0 @@
-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

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

package/dist/components/Chip/Chip.js

@@ -1,18 +0,0 @@
-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

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

package/dist/components/Date/Date.js

@@ -1,460 +0,0 @@
-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

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