@kubit-ui-web/react-components/dist/esm/components/calendar/calendarStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { ROLES } from '../../types/role/role';
// styles
import { CalendarSelectorStyled, CalendarStyled, TableStyled } from './calendar.styled';
import { Header } from './header/header';
import { List } from './list/list';
import { MonthSelector } from './selector/monthSelector/monthSelector';
import { Selector } from './selector/selector';
import { YearSelector } from './selector/yearSelector/yearSelector';
const CalendarStandAloneComponent = ({ dataTestId = 'calendar', maxDate = new Date(), customBackText = 'Back', ...props }, ref) => {
    const [showMonthSelector, setShowMonthSelector] = React.useState(false);
    const [showYearSelector, setShowYearSelector] = React.useState(false);
    const [showDaySelector, setShowDaySelector] = React.useState(true);
    const today = new Date();
    return (_jsxs(CalendarStyled, { ref: ref, "data-calendar": true, "data-testid": dataTestId, id: props.id, styles: props.styles, children: [_jsx(Selector, { configAccesibility: props.configAccesibility, configCalendar: props.configCalendar, currentDate: props.currentDate, customBackText: customBackText, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, setShowDaySelector: setShowDaySelector, setShowMonthSelector: setShowMonthSelector, setShowYearSelector: setShowYearSelector, showDaySelector: showDaySelector, showMonthSelector: showMonthSelector, showYearSelector: showYearSelector, styles: props.styles, onDaySelectorClick: props.onDaySelectorClick, onLeftIconClick: props.onLeftIconClick, onMonthSelectorClick: props.onMonthSelectorClick, onRightIconClick: props.onRightIconClick, onYearSelectorClick: props.onYearSelectorClick }), _jsxs(CalendarSelectorStyled, { children: [!showMonthSelector && !showYearSelector && showDaySelector && (_jsxs(TableStyled, { "aria-label": props.currentDate.toLocaleDateString(props.locale, {
                            timeZone: 'UTC',
                            month: 'long',
                            year: 'numeric',
                        }), role: ROLES.GRID, children: [_jsx(Header, { formatWeekDayOption: props.formatWeekDayOption, isSundayFirst: props.sundayFirst, styles: props.styles }), _jsx(List, { currentDate: props.currentDate, dataTestId: `${dataTestId}-item-list`, disabledDates: props.disabledDates, hasRange: props.hasRange, maxDate: maxDate, minDate: props.minDate, selectedDate: props.selectedDate, setSelectedDate: props.setSelectedDate, styles: props.styles?.daysList, sundayFirst: props.sundayFirst, onDayClick: props.onDayClick })] })), showMonthSelector && (_jsx(MonthSelector, { currentDate: props.currentDate, dataTestId: `${dataTestId}-month`, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, styles: props.styles, today: today, onMonthClick: props.onMonthClick })), showYearSelector && (_jsx(YearSelector, { currentDate: props.currentDate, dataTestId: `${dataTestId}-year`, maxDate: maxDate, minDate: props.minDate, setCurrentDate: props.setCurrentDate, styles: props.styles, today: today, onYearClick: props.onYearClick }))] })] }));
};
export const CalendarStandAlone = React.forwardRef(CalendarStandAloneComponent);
//# sourceMappingURL=calendarStandAlone.js.map