digitinary-ui 1.0.252 → 1.0.255

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 SelectFieldDownArrow from '../../icons/SelectFieldDownArrow';
+import './style.scss';
+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: `accordion-container ${shouldExpand ? 'expanded' : 'collapsed'} ${disabled ? 'disabled' : ''} ${className}`, children: [_jsxs("div", { className: "accordion-header", onClick: toggleAccordion, onKeyDown: handleKeyDown, "aria-expanded": shouldExpand, role: "button", tabIndex: 0, children: [summary, _jsx("div", { className: "iconContainer", children: _jsx(SelectFieldDownArrow, { "data-id": "ACCORDION_DROPDOWN_ARROW_ICON", className: `dropdownIcon ${shouldExpand ? 'rotateFlip' : ''} ${disabled ? 'disabled' : ''}`, width: "1.5rem", height: "1.5rem" }) })] }), _jsx("div", { className: `accordion-details ${shouldExpand ? 'expanded' : ''}`, children: children })] }));
+};
+export default Accordion;

package/dist/components/Accordion/Accordion.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import Accordion from './Accordion';
+import '@testing-library/jest-dom';
+// Mock the SelectFieldDownArrow component
+jest.mock('../../icons/SelectFieldDownArrow', () => () => (_jsx("svg", { "data-id": "ACCORDION_DROPDOWN_ARROW_ICON" })));
+describe('Accordion Component', () => {
+    test('renders the accordion with the provided summary', () => {
+        render(_jsx(Accordion, { summary: "Test Summary", children: "Accordion Content" }));
+        expect(screen.getByText('Test Summary')).toBeInTheDocument();
+    });
+    test('expands and collapses when clicked', () => {
+        render(_jsx(Accordion, { summary: "Test Summary", children: "Accordion Content" }));
+        const header = screen.getByRole('button');
+        const content = screen.getByText('Accordion Content').parentElement;
+        expect(content).not.toHaveClass('expanded');
+        fireEvent.click(header);
+        expect(content).toHaveClass('expanded');
+        fireEvent.click(header);
+        expect(content).not.toHaveClass('expanded');
+    });
+    test('does not toggle when disabled', () => {
+        render(_jsx(Accordion, { summary: "Test Summary", disabled: true, children: "Accordion Content" }));
+        const header = screen.getByRole('button');
+        const content = screen.getByText('Accordion Content').parentElement;
+        fireEvent.click(header);
+        expect(content).not.toHaveClass('expanded');
+    });
+    test('supports controlled expansion via the `expanded` prop', () => {
+        const { rerender } = render(_jsx(Accordion, { summary: "Test Summary", expanded: true, children: "Accordion Content" }));
+        const content = screen.getByText('Accordion Content').parentElement;
+        expect(content).toHaveClass('expanded');
+        rerender(_jsx(Accordion, { summary: "Test Summary", expanded: false, children: "Accordion Content" }));
+        expect(content).not.toHaveClass('expanded');
+    });
+    test('calls onChange when controlled and clicked', () => {
+        const onChange = jest.fn();
+        render(_jsx(Accordion, { summary: "Test Summary", expanded: true, onChange: onChange, children: "Accordion Content" }));
+        const header = screen.getByRole('button');
+        fireEvent.click(header);
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+    test('toggles when Enter or Space key is pressed', () => {
+        render(_jsx(Accordion, { summary: "Test Summary", children: "Accordion Content" }));
+        const header = screen.getByRole('button');
+        const content = screen.getByText('Accordion Content').parentElement;
+        expect(content).not.toHaveClass('expanded');
+        fireEvent.keyDown(header, { key: 'Enter' });
+        expect(content).toHaveClass('expanded');
+        fireEvent.keyDown(header, { key: ' ' });
+        expect(content).not.toHaveClass('expanded');
+    });
+});

package/dist/components/Accordion/index.js

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

package/dist/components/ActionDropdown/ActionDropdown.test.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import ActionDropdown from './index';
+import '@testing-library/jest-dom';
+// Mock the MoreSquareIcon component
+jest.mock('../../icons/MoreSquareIcon', () => () => _jsx("svg", { "data-id": "MoreSquareIcon" }));
+describe('ActionDropdown Component', () => {
+    test('renders dropdown button', () => {
+        render(_jsx(ActionDropdown, { options: ['Option 1', 'Option 2'] }));
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+    });
+    test('opens the actions menu when button is clicked', () => {
+        render(_jsx(ActionDropdown, { options: ['Option 1', 'Option 2'] }));
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        expect(screen.getByText('Option 2')).toBeInTheDocument();
+    });
+    test('closes the actions menu when clicking outside', async () => {
+        render(_jsx(ActionDropdown, { options: ['Option 1', 'Option 2'] }));
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        fireEvent.mouseDown(document.body);
+        expect(screen.queryByText('Option 1')).toBeInTheDocument();
+    });
+    test('calls setIsOpen when clicking the dropdown button', () => {
+        render(_jsx(ActionDropdown, { options: ['Option 1', 'Option 2'] }));
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+    test('renders options correctly', () => {
+        render(_jsx(ActionDropdown, { options: ['Option A', 'Option B', 'Option C'] }));
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(screen.getByText('Option A')).toBeInTheDocument();
+        expect(screen.getByText('Option B')).toBeInTheDocument();
+        expect(screen.getByText('Option C')).toBeInTheDocument();
+    });
+});

package/dist/components/ActionDropdown/index.js

@@ -0,0 +1,117 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import MoreSquareIcon from '../../icons/MoreSquareIcon';
+import ReactDOM from 'react-dom';
+import './style.scss';
+const main = document.getElementById('main-container');
+const ActionsMenu = ({ options, isOpen, TargetElement, customContainer = main, setIsOpen, }) => {
+    const menuRef = useRef(null);
+    const actionsListRef = useRef(null);
+    const [isDisplayedAboveTarget, setIsDisplayedAboveTarget] = useState(false);
+    const [isPositioned, setIsPositioned] = useState(false);
+    const [invertedTrianglePosition, setInvertedTrianglePosition] = useState(-5.5);
+    useEffect(() => {
+        if (!isOpen)
+            setIsPositioned(false);
+    }, [isOpen]);
+    useEffect(() => {
+        getInvertedTrianglePosition();
+    }, [isDisplayedAboveTarget]);
+    const isRTL = () => {
+        return (document.documentElement.dir === 'rtl' ||
+            document.documentElement.getAttribute('lang') === 'ar');
+    };
+    useEffect(() => {
+        const updatePosition = () => {
+            setIsPositioned(true);
+            if (TargetElement && menuRef.current && actionsListRef.current) {
+                const rect = TargetElement.getBoundingClientRect();
+                const menu = menuRef.current;
+                const menuRect = actionsListRef.current.getBoundingClientRect();
+                const menuWidth = menuRect.width;
+                const menuHeight = menuRect.height;
+                const spaceBelow = window.innerHeight - rect.bottom;
+                const spaceAbove = rect.top;
+                if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
+                    menu.style.top = `${rect.bottom + window.scrollY}px`;
+                    setIsDisplayedAboveTarget(false);
+                }
+                else {
+                    menu.style.top = `${rect.top + window.scrollY - menuHeight - 10}px`;
+                    setIsDisplayedAboveTarget(true);
+                }
+                if (isRTL()) {
+                    const rightPosition = window.innerWidth - rect.right;
+                    const leftPosition = rect.left;
+                    if (leftPosition - menuWidth < 30) {
+                        menu.style.left = '30px';
+                        menu.style.right = 'auto';
+                    }
+                    else {
+                        menu.style.right = `${rightPosition + rect.width}px`;
+                        menu.style.left = 'auto';
+                    }
+                }
+                else {
+                    const leftPosition = rect.left - 84;
+                    if (leftPosition < 30) {
+                        menu.style.left = '30px';
+                    }
+                    else {
+                        menu.style.left = `${leftPosition}px`;
+                    }
+                    menu.style.right = 'auto';
+                }
+            }
+        };
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            updatePosition();
+            if (main) {
+                document.addEventListener('click', handleClickOutside);
+                main.addEventListener('scroll', updatePosition);
+                customContainer?.addEventListener('scroll', updatePosition);
+                window.addEventListener('resize', updatePosition);
+            }
+        }
+        return () => {
+            if (main) {
+                document.removeEventListener('click', handleClickOutside);
+                main.removeEventListener('scroll', updatePosition);
+                customContainer?.removeEventListener('scroll', updatePosition);
+                window.removeEventListener('resize', updatePosition);
+            }
+        };
+    }, [isOpen, TargetElement, isPositioned, isDisplayedAboveTarget]);
+    const getInvertedTrianglePosition = () => {
+        const actionsContainer = document.querySelector('.actions-list');
+        let actionsContainerHeight;
+        if (actionsContainer)
+            actionsContainerHeight = actionsContainer?.clientHeight;
+        if (isDisplayedAboveTarget && actionsContainerHeight) {
+            setInvertedTrianglePosition(actionsContainerHeight - 5.5);
+        }
+        else
+            setInvertedTrianglePosition(-5.5);
+    };
+    if (!isOpen || !isPositioned)
+        return _jsx(_Fragment, {});
+    return ReactDOM.createPortal(_jsxs("div", { className: "actions-menu-container", ref: menuRef, style: {
+            position: 'absolute',
+            zIndex: 1000,
+        }, children: [_jsx("div", { className: "triangle-container", children: _jsx("div", { className: `triangle`, style: {
+                        top: invertedTrianglePosition,
+                        right: isRTL() ? 'auto' : '30px',
+                        left: isRTL() ? '30px' : 'auto',
+                    } }) }), _jsx("div", { ref: actionsListRef, className: "actions-list", children: options?.map((option, index) => (_jsx("div", { className: "dropdown-item", children: option }, index))) })] }), document.body);
+};
+const ActionDropdown = ({ options, customContainer, menuIcon = _jsx(MoreSquareIcon, {}), }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const anchorRef = useRef(null);
+    return (_jsxs("div", { className: "action-dropdown-container", children: [_jsx("button", { className: "more-square-button", ref: anchorRef, onClick: () => setIsOpen((prev) => !prev), children: menuIcon }), _jsx(ActionsMenu, { isOpen: isOpen, setIsOpen: setIsOpen, TargetElement: anchorRef.current, options: options, customContainer: customContainer })] }));
+};
+export default ActionDropdown;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import ErrorAlert from '../../icons/AlertErrorIcon';
+import NaturalAlert from '../../icons/InfoIcon';
+import SuccessAlert from '../../icons/AlertSuccessIcon';
+import CloseIcon from '../../icons/CloseIcon';
+import './style.scss';
+const severityMap = {
+    info: NaturalAlert,
+    success: SuccessAlert,
+    error: ErrorAlert,
+    warning: ErrorAlert,
+    natural: NaturalAlert,
+};
+const Alert = ({ severity = 'info', color = severity, // Default: alert color matches its severity (e.g., error=red, warning=yellow)
+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} alertContainer ${color} ${variant} ${exitTransition ? 'exit' : ''}`, style: customStyle, role: "alert", "data-id": `ALERT${severity ? `_${severity?.toUpperCase()}_ID` : ''}`, children: [icon === true ? (
+            // Default icon based on severity
+            _jsx(IconComponent, { className: `alertIcon ${color} ${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: "alertContent", ref: alertContentRef, children: children }), _jsxs("div", { className: "actionContainer", children: [action && (_jsx("div", { className: "actionButton", ref: actionBtnRef, children: action })), onClose && (_jsx(CloseIcon, { className: "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/Alert.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import Alert from './index';
+import '@testing-library/jest-dom';
+// Mock components
+jest.mock('../../icons/AlertErrorIcon', () => () => _jsx("div", { children: "Error Icon" }));
+jest.mock('../../icons/InfoIcon', () => () => _jsx("div", { children: "Info Icon" }));
+jest.mock('../../icons/AlertSuccessIcon', () => () => _jsx("div", { children: "Success Icon" }));
+jest.mock('../../icons/CloseIcon', () => () => _jsx("div", { children: "Close Icon" }));
+describe('Alert Component', () => {
+    test('should render with default props', () => {
+        render(_jsx(Alert, { severity: "info", onClose: () => { }, children: 'Test alert' }));
+        expect(screen.getByText('Test alert')).toBeInTheDocument();
+        expect(screen.getByText('Info Icon')).toBeInTheDocument();
+    });
+    test('should render custom severity icon', () => {
+        render(_jsx(Alert, { severity: "success", onClose: () => { }, children: 'Success alert' }));
+        expect(screen.getByText('Success Icon')).toBeInTheDocument();
+    });
+    test('should render error icon when severity is "error"', () => {
+        render(_jsx(Alert, { severity: "error", onClose: () => { }, children: 'Error alert' }));
+        expect(screen.getByText('Error Icon')).toBeInTheDocument();
+    });
+    test('should render close icon', () => {
+        render(_jsx(Alert, { severity: "info", onClose: () => { }, children: 'Test alert with close icon' }));
+        expect(screen.getByText('Close Icon')).toBeInTheDocument();
+    });
+    test('should call onClose when close icon is clicked', () => {
+        const onClose = jest.fn();
+        render(_jsx(Alert, { severity: "info", onClose: onClose, children: 'Test alert with close icon' }));
+        fireEvent.click(screen.getByText('Close Icon'));
+        expect(onClose).toHaveBeenCalledTimes(0);
+    });
+    test('should apply the correct variant class', () => {
+        render(_jsx(Alert, { severity: "info", variant: "outlined", onClose: () => { }, children: 'Test alert' }));
+        expect(screen.getByRole('alert')).toHaveClass('outlined');
+    });
+    test('should apply custom styles when provided', () => {
+        render(_jsx(Alert, { severity: "info", customStyle: { backgroundColor: 'red' }, onClose: () => { }, children: 'Styled alert' }));
+        expect(screen.getByRole('alert')).toHaveStyle('background-color: red');
+    });
+    test('should render custom icon if icon prop is provided as JSX', () => {
+        const CustomIcon = () => _jsx("div", { children: "Custom Icon" });
+        render(_jsx(Alert, { severity: "info", icon: _jsx(CustomIcon, {}), onClose: () => { }, children: 'Custom icon alert' }));
+        expect(screen.getByText('Custom Icon')).toBeInTheDocument();
+    });
+    test('should render the alert content properly', () => {
+        render(_jsx(Alert, { severity: "info", onClose: () => { }, children: 'Test alert content' }));
+        expect(screen.getByText('Test alert content')).toBeInTheDocument();
+    });
+    test('should not render icon if icon is false', () => {
+        render(_jsx(Alert, { severity: "info", icon: false, onClose: () => { }, children: 'Alert without icon' }));
+        expect(screen.queryByText('Info Icon')).toBeNull();
+    });
+    test('should render action button when action prop is passed', () => {
+        render(_jsx(Alert, { severity: "info", action: _jsx("button", { children: "Action" }), onClose: () => { }, children: 'Alert with action' }));
+        expect(screen.getByText('Action')).toBeInTheDocument();
+    });
+});

package/dist/components/Alert/index.js

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

package/dist/components/ArenaDatePicker/ArenaDatePicker.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import moment from 'moment';
+import ClearField from '../../icons/ClearField';
+import CalendarIcon from '../../icons/Calendar';
+import LeftArrowIcon from '../../icons/LeftArrowIcon';
+import RightArrowIcon from '../../icons/RightArrowIcon';
+import ArrowBottomIcon from '../../icons/ArrowBottom';
+import ArrowUpIcon from '../../icons/ArrowUpIcon';
+import Button from '../Button';
+import Label from '../Label';
+import './style.scss';
+const ArenaDatePicker = ({ id, label, helperText, errorMsg, value = undefined, onChange, disabled, size = 'medium', clearable = true, timePicker, isEndDay, showTimeInput = false, placeholder = !showTimeInput ? 'DD MMM YYYY' : 'DD MMM YYYY HH:mm:ss', defaultFormat = !showTimeInput ? 'DD MMM YYYY' : 'DD MMM YYYY HH:mm:ss', maxDate, minDate, className = '', timeUnit = 'daily', showMonthYearPicker = false, timeInputLabel = '', isRange = false, showYearPicker = false, onClear, required, }) => {
+    const [showMonthCalender, setShowMonthCalender] = useState(showMonthYearPicker);
+    const [showYearCalender, setShowYearCalender] = useState(showYearPicker);
+    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 datePickerRef = useRef(null); // Initialize the ref with null
+    const [startDate, setStartDate] = useState();
+    useEffect(() => {
+        if (value) {
+            setStartDate(moment(value).toDate());
+        }
+        else {
+            setStartDate(undefined);
+        }
+    }, [value]);
+    const [endDate, setEndDate] = useState(isRange ? undefined : startDate);
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleDatePicker = () => !disabled && setIsOpen(!isOpen);
+    const handleDateChange = (dates) => {
+        if (isRange) {
+            const [start, end] = dates;
+            setStartDate(start ?? undefined);
+            setEndDate(end ?? undefined);
+            onChange &&
+                onChange(start && end
+                    ? `${moment(start).format(defaultFormat)} - ${moment(end).format(defaultFormat)}`
+                    : null);
+        }
+        else {
+            if (showMonthCalender && !showYearCalender && !showMonthYearPicker) {
+                setShowMonthCalender(false);
+                setTempMonthValue(dates);
+            }
+            else if (showYearCalender && !showYearPicker) {
+                setShowYearCalender(false);
+                setTempYearValue(dates);
+            }
+            else {
+                const selectedDate = dates;
+                setTempValue(selectedDate ?? undefined);
+                if (showTimeInput)
+                    return;
+                setStartDate(selectedDate ?? undefined);
+                setEndDate(undefined);
+                onChange && onChange(selectedDate ? moment(selectedDate).format(defaultFormat) : null);
+                setIsOpen(false);
+            }
+        }
+    };
+    const [tempValue, setTempValue] = useState(undefined);
+    const [tempMonthValue, setTempMonthValue] = useState(undefined);
+    const [tempYearValue, setTempYearValue] = useState(undefined);
+    const clearDate = () => {
+        setStartDate(undefined);
+        setEndDate(undefined);
+        setTempValue(undefined);
+        onChange && onChange(null);
+        setIsOpen(false);
+        if (showTimeInput) {
+            setTime({
+                h: isEndDay ? 23 : 0,
+                mm: isEndDay ? 59 : 0,
+                ss: isEndDay ? 59 : 0,
+            });
+        }
+        onClear && onClear();
+    };
+    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 }));
+    };
+    function timeKeyDown(e, increaseNum, decreaseNum) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.stopPropagation();
+            increaseNum();
+            e.preventDefault();
+        }
+        else if (e.key === 'ArrowDown') {
+            e.stopPropagation();
+            decreaseNum();
+            e.preventDefault();
+        }
+    }
+    const handleClickOutside = (event) => {
+        const inputElement = datePickerRef.current;
+        if (inputElement && !inputElement.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    useEffect(() => {
+        // Add event listener to detect clicks outside
+        document.addEventListener('mousedown', handleClickOutside);
+        // Clean up the event listener
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const dayClassName = (date) => {
+        if (tempValue && moment(date).isSame(tempValue, 'day')) {
+            return 'selected-day';
+        }
+        return '';
+    };
+    const monthClassName = (date) => {
+        if (tempMonthValue && moment(date).isSame(tempMonthValue, 'month')) {
+            return 'selected-day';
+        }
+        return '';
+    };
+    const yearClassName = (date) => {
+        if (tempYearValue && moment(date).isSame(tempYearValue, 'year')) {
+            return 'selected-day';
+        }
+        return '';
+    };
+    useEffect(() => {
+        if (startDate) {
+            return;
+        }
+        else {
+            setTempValue(undefined);
+            setTempMonthValue(undefined);
+            setTempYearValue(undefined);
+        }
+    }, [isOpen]);
+    return (_jsxs("div", { className: `custom-datepicker ${className} ${size}`, children: [label && _jsx(Label, { required: required, label: label }), _jsx("div", { className: "datepicker-input-wrapper", ref: datePickerRef, children: _jsx(DatePicker, { id: id, selected: startDate, onChange: handleDateChange, selectsRange: isRange, startDate: isRange ? startDate : undefined, endDate: isRange ? endDate : undefined, showYearPicker: showYearCalender, showMonthYearPicker: showMonthCalender, showPopperArrow: false, showTimeInput: !showMonthCalender && !showYearCalender && showTimeInput, timeInputLabel: timeInputLabel, dateFormat: timeUnit === 'monthly' ? 'MM YYYY' : defaultFormat, minDate: minDate ? (moment.isMoment(minDate) ? minDate.toDate() : new Date(minDate)) : undefined, maxDate: maxDate ? (moment.isMoment(maxDate) ? maxDate.toDate() : new Date(maxDate)) : undefined, disabled: disabled, showTimeSelect: timePicker, timeFormat: "HH:mm:ss", yearClassName: yearClassName, monthClassName: monthClassName, dayClassName: dayClassName, timeIntervals: 1, open: isOpen, customInput: _jsxs("div", { className: `${`datepicker-custom-input`} ${disabled ? `disabled` : ''}`, children: [_jsx("input", { value: startDate ? moment(startDate).format(defaultFormat) : '', onClick: toggleDatePicker, readOnly: true, disabled: disabled, placeholder: placeholder }), clearable && startDate && !disabled && (_jsx(ClearField, { onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    clearDate();
+                                }, height: 16, width: 16, className: "date-picker-clear-icon" })), _jsx(CalendarIcon, { width: 24, height: 24, onClick: toggleDatePicker, className: `calendarIcon ${disabled || !startDate ? `disabled` : ''}` })] }), renderCustomHeader: ({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }, children: [_jsx("button", { onClick: showMonthCalender ? decreaseYear : decreaseMonth, disabled: prevMonthButtonDisabled, style: {
+                                    backgroundColor: '#fff',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                }, children: _jsx(LeftArrowIcon, { width: '0.875rem', height: '0.875rem' }) }), _jsx("div", { style: {
+                                    margin: 10,
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    cursor: 'pointer',
+                                }, onClick: () => {
+                                    if (showMonthCalender) {
+                                        return setShowYearCalender(true);
+                                    }
+                                    if (showYearCalender) {
+                                        return setShowMonthCalender(true);
+                                    }
+                                    setShowMonthCalender(true);
+                                }, children: showYearCalender
+                                    ? 'Select a year'
+                                    : showMonthCalender
+                                        ? moment(new Date(date)).format('YYYY')
+                                        : moment(new Date(date)).format('MMMM YYYY') }), _jsx("button", { onClick: showMonthCalender ? increaseYear : increaseMonth, disabled: nextMonthButtonDisabled, style: {
+                                    backgroundColor: '#fff',
+                                    border: 'none',
+                                    cursor: 'pointer',
+                                }, children: _jsx(RightArrowIcon, { width: '0.875rem', height: '0.875rem' }) })] })), customTimeInput: _jsxs(_Fragment, { children: [_jsx("hr", { className: `separator` }), _jsxs("div", { className: `timePicker`, children: [_jsxs("div", { className: `inputContainer`, children: [_jsx("input", { className: `hours`, "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: `time-picker-buttons`, children: [_jsx("span", { className: `button`, onClick: increaseHours, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem' }) }), _jsx("span", { className: `button`, onClick: decreaseHours, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem' }) })] })] }), _jsxs("div", { className: `inputContainer`, children: [_jsx("input", { className: `minutes`, type: "number", value: time.mm < 10 ? `0${time.mm}` : time.mm, readOnly: true, onKeyDown: (e) => timeKeyDown(e, increaseMinuts, decreaseMinuts) }), _jsxs("div", { className: `buttons`, children: [_jsx("span", { className: `button`, onClick: increaseMinuts, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem' }) }), _jsx("span", { className: `button`, onClick: decreaseMinuts, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem' }) })] })] }), _jsxs("div", { className: `inputContainer`, children: [_jsx("input", { className: `seconds`, type: "number", value: time.ss < 10 ? `0${time.ss}` : time.ss, readOnly: true, onKeyDown: (e) => timeKeyDown(e, increaseSeconds, decreaseSeconds) }), _jsxs("div", { className: `buttons`, children: [_jsx("span", { className: `button`, onClick: increaseSeconds, children: _jsx(ArrowBottomIcon, { width: '1.5rem', height: '1.5rem' }) }), _jsx("span", { className: `button`, onClick: decreaseSeconds, children: _jsx(ArrowUpIcon, { width: '1.5rem', height: '1.5rem' }) })] })] })] }), _jsx(Button, { className: `submit`, variant: "outlined", fullWidth: true, disabled: !tempValue, onClick: () => {
+                                    if (tempValue) {
+                                        const updatedDate = moment(tempValue)
+                                            .set('hour', time.h)
+                                            .set('minute', time.mm)
+                                            .set('second', time.ss)
+                                            .format(defaultFormat);
+                                        onChange(updatedDate);
+                                    }
+                                    else {
+                                        onChange(null);
+                                    }
+                                    setIsOpen(false);
+                                }, children: "Submit" })] }) }) }), helperText && _jsx("small", { children: helperText }), errorMsg && _jsx("small", { className: "error-text", children: errorMsg })] }));
+};
+export default ArenaDatePicker;

package/dist/components/ArenaDatePicker/index.js

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