@adaptabletools/adaptable/src/components/ui/calendar.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { DayPicker, getDefaultClassNames, useDayPicker, } from 'react-day-picker';
import { cn } from '../../lib/utils';
import { Button, buttonVariants } from './button';
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
const CalendarRoot = ({ className, rootRef, ...props }) => {
    return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
};
const CalendarChevron = ({ className, orientation, ...props }) => {
    if (orientation === 'left') {
        return _jsx(ChevronLeftIcon, { className: cn('twa:size-4', className), ...props });
    }
    if (orientation === 'right') {
        return _jsx(ChevronRightIcon, { className: cn('twa:size-4', className), ...props });
    }
    return _jsx(ChevronDownIcon, { className: cn('twa:size-4', className), ...props });
};
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', locale, formatters, components, ...props }) {
    const defaultClassNames = getDefaultClassNames();
    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('twa:group/calendar twa:bg-background twa:p-3 twa:[--cell-radius:var(--radius-md)] twa:[--cell-size:--spacing(8)] twa:in-data-[slot=card-content]:bg-transparent twa:in-data-[slot=popover-content]:bg-transparent', String.raw `twa:rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `twa:rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),
            ...formatters,
        }, classNames: {
            root: cn('twa:w-fit', defaultClassNames.root),
            months: cn('twa:relative twa:flex twa:flex-col twa:gap-4 twa:md:flex-row', defaultClassNames.months),
            month: cn('twa:flex twa:w-full twa:flex-col twa:gap-4', defaultClassNames.month),
            nav: cn('twa:absolute twa:inset-x-0 twa:top-0 twa:flex twa:w-full twa:items-center twa:justify-between twa:gap-1', defaultClassNames.nav),
            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'twa:size-(--cell-size) twa:p-0 twa:select-none twa:aria-disabled:opacity-50', defaultClassNames.button_previous),
            button_next: cn(buttonVariants({ variant: buttonVariant }), 'twa:size-(--cell-size) twa:p-0 twa:select-none twa:aria-disabled:opacity-50', defaultClassNames.button_next),
            month_caption: cn('twa:flex twa:h-(--cell-size) twa:w-full twa:items-center twa:justify-center twa:px-(--cell-size)', defaultClassNames.month_caption),
            dropdowns: cn('twa:flex twa:h-(--cell-size) twa:w-full twa:items-center twa:justify-center twa:gap-1.5 twa:text-sm twa:font-medium', defaultClassNames.dropdowns),
            dropdown_root: cn('twa:relative twa:rounded-standard', defaultClassNames.dropdown_root),
            dropdown: cn('twa:absolute twa:inset-0 twa:bg-popover twa:opacity-0', defaultClassNames.dropdown),
            caption_label: cn('twa:font-medium twa:select-none', captionLayout === 'label'
                ? 'twa:text-sm'
                : 'twa:flex twa:items-center twa:gap-1 twa:rounded-standard twa:text-sm twa:[&>svg]:size-3.5 twa:[&>svg]:text-muted-foreground', defaultClassNames.caption_label),
            table: 'twa:w-full twa:border-collapse',
            weekdays: cn('twa:flex', defaultClassNames.weekdays),
            weekday: cn('twa:flex-1 twa:rounded-standard twa:text-[0.8rem] twa:font-normal twa:text-muted-foreground twa:select-none', defaultClassNames.weekday),
            week: cn('twa:mt-2 twa:flex twa:w-full', defaultClassNames.week),
            week_number_header: cn('twa:w-(--cell-size) twa:select-none', defaultClassNames.week_number_header),
            week_number: cn('twa:text-[0.8rem] twa:text-muted-foreground twa:select-none', defaultClassNames.week_number),
            day: cn('twa:group/day twa:relative twa:aspect-square twa:h-full twa:w-full twa:rounded-standard twa:p-0 twa:text-center twa:select-none twa:[&:last-child[data-selected=true]_button]:rounded-r-standard', defaultClassNames.day),
            range_start: cn('twa:relative twa:isolate twa:z-0 twa:rounded-l-standard twa:bg-muted twa:after:absolute twa:after:inset-y-0 twa:after:right-0 twa:after:w-4 twa:after:bg-muted', defaultClassNames.range_start),
            range_middle: cn('twa:rounded-none', defaultClassNames.range_middle),
            range_end: cn('twa:relative twa:isolate twa:z-0 twa:rounded-r-standard twa:bg-muted twa:after:absolute twa:after:inset-y-0 twa:after:left-0 twa:after:w-4 twa:after:bg-muted', defaultClassNames.range_end),
            today: cn('twa:rounded-standard twa:bg-muted twa:text-foreground twa:data-[selected=true]:rounded-none', defaultClassNames.today),
            outside: cn('twa:text-muted-foreground twa:aria-selected:text-muted-foreground', defaultClassNames.outside),
            disabled: cn('twa:text-muted-foreground twa:opacity-50', defaultClassNames.disabled),
            hidden: cn('twa:invisible', defaultClassNames.hidden),
            ...classNames,
        }, components: {
            Root: CalendarRoot,
            Chevron: CalendarChevron,
            DayButton: CalendarDayButton,
            WeekNumber: CalendarWeekNumber,
            ...components,
        }, ...props }));
}
const CalendarWeekNumber = ({ children, ...props }) => {
    return (_jsx("td", { ...props, children: _jsx("div", { className: "twa:flex twa:size-(--cell-size) twa:items-center twa:justify-center twa:text-center", children: children }) }));
};
function CalendarDayButton({ className, day, modifiers, ...props }) {
    const dayPickerContext = useDayPicker();
    const locale = dayPickerContext.dayPickerProps.locale;
    const defaultClassNames = getDefaultClassNames();
    const ref = React.useRef(null);
    React.useEffect(() => {
        if (modifiers.focused) {
            const active = document.activeElement;
            const shouldFocus = !active ||
                active === document.body ||
                active === document.documentElement ||
                (active instanceof HTMLElement && active.hasAttribute('data-day'));
            if (shouldFocus) {
                ref.current?.focus();
            }
        }
    }, [modifiers.focused]);
    const selected = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
    React.useEffect(() => {
        if (selected) {
            const active = document.activeElement;
            const shouldFocus = !active ||
                active === document.body ||
                active === document.documentElement ||
                (active instanceof HTMLElement && active.hasAttribute('data-day'));
            if (shouldFocus) {
                ref.current?.focus();
            }
        }
    }, [selected]);
    return (_jsx(Button, { ...props, ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": selected, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('twa:relative twa:isolate twa:z-10 twa:flex twa:aspect-square twa:size-auto twa:w-full twa:min-w-(--cell-size) twa:flex-col twa:gap-1 twa:border-0 twa:leading-none twa:font-normal twa:group-data-[focused=true]/day:relative twa:group-data-[focused=true]/day:z-10 twa:group-data-[focused=true]/day:border-ring twa:group-data-[focused=true]/day:ring-[3px] twa:group-data-[focused=true]/day:ring-ring/50 twa:data-[range-end=true]:rounded-standard twa:data-[range-end=true]:rounded-r-standard twa:data-[range-end=true]:bg-primary twa:data-[range-end=true]:text-primary-foreground twa:data-[range-middle=true]:rounded-none twa:data-[range-middle=true]:bg-muted twa:data-[range-middle=true]:text-foreground twa:data-[range-start=true]:rounded-standard twa:data-[range-start=true]:rounded-l-standard twa:data-[range-start=true]:bg-primary twa:data-[range-start=true]:text-primary-foreground twa:data-[selected-single=true]:bg-accent twa:data-[selected-single=true]:text-accent-foreground twa:dark:hover:text-foreground twa:[&>span]:text-xs twa:[&>span]:opacity-70', defaultClassNames.day, className), children: props.children }));
}
export { Calendar };