@vuu-ui/vuu-ui-controls 2.1.18 → 2.1.19-beta.2

package/src/calendar/internal/CalendarNavigation.js

@@ -0,0 +1,185 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dropdown, Option, Tooltip, makePrefixer, useListControlContext } from "@salt-ds/core";
+import { ChevronLeftIcon, ChevronRightIcon } from "@salt-ds/icons";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { useCalendarContext } from "./CalendarContext.js";
+import { isSameMonth, isSameYear } from "@internationalized/date";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CalendarNavigation_0 from "./CalendarNavigation.css";
+import { formatDate, monthDiff, monthsForLocale } from "./utils.js";
+const withBaseName = makePrefixer("saltCalendarNavigation");
+function useCalendarNavigation() {
+    const { state: { visibleMonth, minDate, maxDate }, helpers: { setVisibleMonth, isDayVisible, isOutsideAllowedYears, isOutsideAllowedMonths } } = useCalendarContext();
+    const moveToNextMonth = (event)=>{
+        setVisibleMonth(event, visibleMonth.add({
+            months: 1
+        }));
+    };
+    const moveToPreviousMonth = (event)=>{
+        setVisibleMonth(event, visibleMonth.subtract({
+            months: 1
+        }));
+    };
+    const moveToMonth = (event, month)=>{
+        let newMonth = month;
+        if (!isOutsideAllowedYears(newMonth)) {
+            if (isOutsideAllowedMonths(newMonth)) {
+                const navigableMonths = monthsForLocale(visibleMonth).filter((n)=>!isOutsideAllowedMonths(n));
+                newMonth = navigableMonths.reduce((closestMonth, currentMonth)=>Math.abs(monthDiff(currentMonth, newMonth)) < Math.abs(monthDiff(closestMonth, newMonth)) ? currentMonth : closestMonth);
+            }
+            setVisibleMonth(event, newMonth);
+        }
+    };
+    const months = monthsForLocale(visibleMonth);
+    const years = [
+        -2,
+        -1,
+        0,
+        1,
+        2
+    ].map((delta)=>visibleMonth.add({
+            years: delta
+        })).filter((year)=>!isOutsideAllowedYears(year));
+    const selectedMonth = months.find((month)=>isSameMonth(month, visibleMonth));
+    const selectedYear = years.find((year)=>isSameYear(year, visibleMonth));
+    const canNavigatePrevious = !(minDate && isDayVisible(minDate));
+    const canNavigateNext = !(maxDate && isDayVisible(maxDate));
+    return {
+        moveToNextMonth,
+        moveToPreviousMonth,
+        moveToMonth,
+        visibleMonth,
+        months,
+        years,
+        canNavigateNext,
+        canNavigatePrevious,
+        selectedMonth,
+        selectedYear,
+        isOutsideAllowedMonths
+    };
+}
+const OptionWithTooltip = ({ value, children, disabled, tooltipContent })=>{
+    const { activeState, openState } = useListControlContext();
+    const open = activeState?.value === value;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        placement: "right",
+        open: open && openState,
+        disabled: !disabled,
+        content: tooltipContent,
+        enterDelay: 0,
+        leaveDelay: 0,
+        children: /*#__PURE__*/ jsx(Option, {
+            value: value,
+            disabled: disabled,
+            children: children
+        })
+    });
+};
+const CalendarNavigation_CalendarNavigation = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { className, MonthDropdownProps, YearDropdownProps, hideYearDropdown, borderedDropdown, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar-navigation",
+        css: CalendarNavigation_0,
+        window: targetWindow
+    });
+    const { moveToPreviousMonth, moveToNextMonth, moveToMonth, months, years, canNavigateNext, canNavigatePrevious, selectedMonth, selectedYear, isOutsideAllowedMonths } = useCalendarNavigation();
+    const handleNavigatePrevious = (event)=>{
+        moveToPreviousMonth(event);
+    };
+    const handleNavigateNext = (event)=>{
+        moveToNextMonth(event);
+    };
+    const handleMonthSelect = (event, month)=>{
+        moveToMonth(event, month[0]);
+    };
+    const handleYearSelect = (event, year)=>{
+        moveToMonth(event, year[0]);
+    };
+    const formatMonth = (date)=>date ? formatDate(date, {
+            month: hideYearDropdown ? "long" : "short"
+        }) : "";
+    const formatYear = (date)=>date ? formatDate(date, {
+            year: "numeric"
+        }) : "";
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(withBaseName(), {
+            [withBaseName("hideYearDropdown")]: hideYearDropdown
+        }, className),
+        ref: ref,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(Tooltip, {
+                placement: "top",
+                disabled: canNavigatePrevious,
+                content: "Past dates are out of range",
+                enterDelay: 0,
+                leaveDelay: 0,
+                children: /*#__PURE__*/ jsx(Button, {
+                    disabled: !canNavigatePrevious,
+                    variant: "secondary",
+                    onClick: handleNavigatePrevious,
+                    focusableWhenDisabled: true,
+                    children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
+                        "aria-label": "Previous Month"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: withBaseName("dropdowns"),
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        bordered: borderedDropdown,
+                        "aria-label": "Month Dropdown",
+                        selected: selectedMonth ? [
+                            selectedMonth
+                        ] : [],
+                        value: formatMonth(selectedMonth),
+                        onSelectionChange: handleMonthSelect,
+                        ...MonthDropdownProps,
+                        children: months.map((month)=>/*#__PURE__*/ jsx(OptionWithTooltip, {
+                                value: month,
+                                disabled: isOutsideAllowedMonths(month),
+                                tooltipContent: "This month is out of range",
+                                children: formatMonth(month)
+                            }, formatMonth(month)))
+                    }),
+                    !hideYearDropdown && /*#__PURE__*/ jsx(Dropdown, {
+                        "aria-label": "Year Dropdown",
+                        selected: selectedYear ? [
+                            selectedYear
+                        ] : [],
+                        value: formatYear(selectedYear),
+                        onSelectionChange: handleYearSelect,
+                        bordered: borderedDropdown,
+                        ...YearDropdownProps,
+                        children: years.map((year)=>/*#__PURE__*/ jsx(OptionWithTooltip, {
+                                value: year,
+                                tooltipContent: "This year is out of range",
+                                children: formatYear(year)
+                            }, formatYear(year)))
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Tooltip, {
+                placement: "top",
+                disabled: canNavigateNext,
+                content: "Future dates are out of range",
+                enterDelay: 0,
+                leaveDelay: 0,
+                children: /*#__PURE__*/ jsx(Button, {
+                    disabled: !canNavigateNext,
+                    variant: "secondary",
+                    onClick: handleNavigateNext,
+                    focusableWhenDisabled: true,
+                    children: /*#__PURE__*/ jsx(ChevronRightIcon, {
+                        "aria-label": "Next Month"
+                    })
+                })
+            })
+        ]
+    });
+});
+export { CalendarNavigation_CalendarNavigation as CalendarNavigation };

package/src/calendar/internal/CalendarWeekHeader.css.js

@@ -0,0 +1,23 @@
+const css = `
+.saltCalendarWeekHeader {
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
+  text-align: center;
+  height: var(--salt-size-base);
+  margin: var(--salt-size-border);
+  align-items: center;
+  display: grid;
+}
+
+.saltCalendarWeekHeader-dayOfWeek {
+  width: var(--salt-size-base);
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+}
+
+
+`;
+export default css;

package/src/calendar/internal/CalendarWeekHeader.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { makePrefixer } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+import { daysForLocale } from "./utils.js";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import CalendarWeekHeader_0 from "./CalendarWeekHeader.css";
+const withBaseName = makePrefixer("saltCalendarWeekHeader");
+const CalendarWeekHeader_CalendarWeekHeader = /*#__PURE__*/ forwardRef(function({ className, ...rest }, ref) {
+    const weekdaysShort = daysForLocale("narrow");
+    const weekdaysLong = daysForLocale("long");
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "salt-calendar",
+        css: CalendarWeekHeader_0,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsx("div", {
+        "data-testid": "CalendarWeekHeader",
+        className: clsx(withBaseName(), className),
+        ref: ref,
+        ...rest,
+        children: weekdaysShort.map((day, index)=>/*#__PURE__*/ jsx("small", {
+                "aria-hidden": true,
+                className: withBaseName("dayOfWeek"),
+                children: day
+            }, weekdaysLong[index]))
+    });
+});
+export { CalendarWeekHeader_CalendarWeekHeader as CalendarWeekHeader };

package/src/calendar/internal/useFocusManagement.js

@@ -0,0 +1,66 @@
+import { endOfWeek, startOfWeek } from "@internationalized/date";
+import { useCalendarContext } from "./CalendarContext.js";
+import { getCurrentLocale } from "./utils.js";
+function useFocusManagement({ date }) {
+    const { helpers: { setFocusedDate } } = useCalendarContext();
+    const handleClick = (event)=>{
+        setFocusedDate(event, date);
+    };
+    const handleKeyDown = (event)=>{
+        let newDate = date;
+        switch(event.key){
+            case "ArrowUp":
+                newDate = date.subtract({
+                    weeks: 1
+                });
+                break;
+            case "ArrowDown":
+                newDate = date.add({
+                    weeks: 1
+                });
+                break;
+            case "ArrowLeft":
+                newDate = date.subtract({
+                    days: 1
+                });
+                break;
+            case "ArrowRight":
+                newDate = date.add({
+                    days: 1
+                });
+                break;
+            case "Home":
+                newDate = startOfWeek(date, getCurrentLocale());
+                break;
+            case "End":
+                newDate = endOfWeek(date, getCurrentLocale());
+                break;
+            case "PageUp":
+                newDate = event.shiftKey ? date.subtract({
+                    years: 1
+                }) : date.subtract({
+                    months: 1
+                });
+                break;
+            case "PageDown":
+                newDate = event.shiftKey ? date.add({
+                    years: 1
+                }) : date.add({
+                    months: 1
+                });
+                break;
+            default:
+        }
+        if (0 !== newDate.compare(date)) event.preventDefault();
+        setFocusedDate(event, newDate);
+    };
+    const handleFocus = (event)=>{
+        setFocusedDate(event, date);
+    };
+    return {
+        handleClick,
+        handleKeyDown,
+        handleFocus
+    };
+}
+export { useFocusManagement };

package/src/calendar/internal/utils.js

@@ -0,0 +1,57 @@
+import { DateFormatter, createCalendar, getLocalTimeZone, isSameMonth, startOfMonth, startOfWeek, startOfYear, today } from "@internationalized/date";
+const localTimezone = getLocalTimeZone();
+function getCurrentLocale() {
+    return navigator.languages[0];
+}
+function getDateFormatter(options) {
+    return new DateFormatter(getCurrentLocale(), options);
+}
+function formatDate(date, options) {
+    const formatter = getDateFormatter(options);
+    return formatter.format(date.toDate(localTimezone));
+}
+function getCalender() {
+    const calendarIdentifier = getDateFormatter().resolvedOptions().calendar;
+    return createCalendar(calendarIdentifier);
+}
+function daysForLocale(weekday = "long") {
+    return [
+        ...Array(7).keys()
+    ].map((day)=>formatDate(startOfWeek(today(getLocalTimeZone()), getCurrentLocale()).add({
+            days: day
+        }), {
+            weekday
+        }));
+}
+function monthsForLocale(currentYear) {
+    const calendar = getCalender();
+    return [
+        ...Array(calendar.getMonthsInYear(currentYear)).keys()
+    ].map((month)=>startOfYear(currentYear).add({
+            months: month
+        }));
+}
+function mapDate(currentDate, currentMonth) {
+    return {
+        date: currentDate,
+        dateOfMonth: currentDate.month,
+        isCurrentMonth: isSameMonth(currentDate, currentMonth)
+    };
+}
+function generateVisibleDays(currentMonth) {
+    const totalDays = 42;
+    const currentLocale = getCurrentLocale();
+    const startDate = startOfWeek(startOfMonth(currentMonth), currentLocale);
+    return [
+        ...Array(totalDays).keys()
+    ].map((dayDelta)=>{
+        const day = startDate.add({
+            days: dayDelta
+        });
+        return mapDate(day, currentMonth);
+    });
+}
+function monthDiff(a, b) {
+    return b.month - a.month + 12 * (b.year - a.year);
+}
+export { daysForLocale, formatDate, generateVisibleDays, getCalender, getCurrentLocale, getDateFormatter, monthDiff, monthsForLocale };

package/src/calendar/useCalendar.js

@@ -0,0 +1,116 @@
+import { endOfMonth, endOfYear, getLocalTimeZone, isSameDay, isSameMonth, startOfMonth, startOfYear, today } from "@internationalized/date";
+import { useControlled } from "@salt-ds/core";
+import { useCallback, useEffect, useState } from "react";
+import { isRangeOrOffsetSelectionWithStartDate, useSelectionCalendar } from "./useSelection.js";
+const defaultIsDayUnselectable = ()=>false;
+const defaultIsDayHighlighted = ()=>false;
+const defaultIsDayDisabled = ()=>false;
+function useCalendar(props) {
+    const { selectedDate, defaultSelectedDate, visibleMonth: visibleMonthProp, hideYearDropdown, hideOutOfRangeDates, defaultVisibleMonth = today(getLocalTimeZone()), onSelectedDateChange, onVisibleMonthChange, isDayUnselectable = defaultIsDayUnselectable, isDayHighlighted = defaultIsDayHighlighted, isDayDisabled = defaultIsDayDisabled, minDate = hideYearDropdown ? startOfYear(today(getLocalTimeZone())) : void 0, maxDate = hideYearDropdown ? endOfYear(today(getLocalTimeZone())) : void 0, selectionVariant, onHoveredDateChange, hoveredDate } = props;
+    const [visibleMonth, setVisibleMonthState] = useControlled({
+        controlled: visibleMonthProp ? startOfMonth(visibleMonthProp) : void 0,
+        default: startOfMonth(defaultVisibleMonth),
+        name: "Calendar",
+        state: "visibleMonth"
+    });
+    const isOutsideAllowedDates = useCallback((date)=>null != minDate && date.compare(minDate) < 0 || null != maxDate && date.compare(maxDate) > 0, [
+        maxDate,
+        minDate
+    ]);
+    const isOutsideAllowedMonths = (date)=>null != minDate && endOfMonth(date).compare(minDate) < 0 || null != maxDate && startOfMonth(date).compare(maxDate) > 0;
+    const isOutsideAllowedYears = (date)=>null != minDate && endOfYear(date).compare(minDate) < 0 || null != maxDate && startOfYear(date).compare(maxDate) > 0;
+    const isDaySelectable = useCallback((date)=>!(date && (isDayUnselectable(date) || isDayDisabled(date) || isOutsideAllowedDates(date))), [
+        isDayUnselectable,
+        isDayDisabled,
+        isOutsideAllowedDates
+    ]);
+    const selectionManager = useSelectionCalendar({
+        defaultSelectedDate: defaultSelectedDate,
+        selectedDate,
+        onSelectedDateChange,
+        startDateOffset: "offset" === props.selectionVariant ? props.startDateOffset : (date)=>date,
+        endDateOffset: "offset" === props.selectionVariant ? props.endDateOffset : (date)=>date,
+        isDaySelectable,
+        selectionVariant,
+        onHoveredDateChange,
+        hoveredDate
+    });
+    const [calendarFocused, setCalendarFocused] = useState(false);
+    const isInVisibleMonth = (date)=>null != date && isSameMonth(date, visibleMonth);
+    const getInitialFocusedDate = ()=>{
+        const selectedDate = selectionManager.state.selectedDate;
+        if (("range" === selectionVariant || "offset" === selectionVariant) && isRangeOrOffsetSelectionWithStartDate(selectedDate)) {
+            if (isInVisibleMonth(selectedDate?.startDate)) return selectedDate.startDate;
+            if (isInVisibleMonth(selectedDate?.endDate)) return selectedDate.endDate;
+            if (selectedDate?.startDate && selectedDate?.endDate && visibleMonth.compare(selectedDate.startDate) < 0 && visibleMonth.compare(selectedDate.endDate) > 0) return startOfMonth(visibleMonth);
+        }
+        if ("multiselect" === selectionVariant && Array.isArray(selectedDate)) {
+            const selectionInMonth = selectedDate.filter((day)=>isInVisibleMonth(day)).sort((a, b)=>a.compare(b));
+            if (selectionInMonth.length > 0) return selectionInMonth[0];
+        }
+        if ("default" === selectionVariant && !isRangeOrOffsetSelectionWithStartDate(selectedDate) && !Array.isArray(selectedDate) && isInVisibleMonth(selectedDate)) return selectedDate;
+        if (isInVisibleMonth(today(getLocalTimeZone()))) return today(getLocalTimeZone());
+        return startOfMonth(visibleMonth);
+    };
+    const [focusedDate, setFocusedDateState] = useState(getInitialFocusedDate);
+    const isDayVisible = useCallback((date)=>{
+        const startInsideDays = startOfMonth(visibleMonth);
+        if (date.compare(startInsideDays) < 0) return false;
+        const endInsideDays = endOfMonth(visibleMonth);
+        return !(date.compare(endInsideDays) > 0);
+    }, [
+        visibleMonth
+    ]);
+    const setVisibleMonth = useCallback((event, newVisibleMonth)=>{
+        setVisibleMonthState(newVisibleMonth);
+        onVisibleMonthChange?.(event, newVisibleMonth);
+    }, [
+        onVisibleMonthChange,
+        setVisibleMonthState
+    ]);
+    const setFocusedDate = useCallback((event, date)=>{
+        if (isSameDay(date, focusedDate) || isOutsideAllowedDates(date)) return;
+        setFocusedDateState(date);
+        const shouldTransition = !isDayVisible(date) && isDaySelectable(date) && !isOutsideAllowedDates(date);
+        if (shouldTransition) setVisibleMonth(event, startOfMonth(date));
+    }, [
+        focusedDate,
+        isDaySelectable,
+        isDayVisible,
+        isOutsideAllowedDates,
+        setVisibleMonth
+    ]);
+    useEffect(()=>{
+        if (!isDayVisible(focusedDate)) setFocusedDateState(getInitialFocusedDate());
+    }, [
+        isDayVisible,
+        focusedDate,
+        visibleMonth
+    ]);
+    return {
+        state: {
+            visibleMonth,
+            focusedDate,
+            minDate,
+            maxDate,
+            selectionVariant,
+            hideOutOfRangeDates,
+            calendarFocused,
+            ...selectionManager.state
+        },
+        helpers: {
+            setVisibleMonth,
+            setFocusedDate,
+            setCalendarFocused,
+            isDayUnselectable,
+            isDayHighlighted,
+            isDayDisabled,
+            isDayVisible,
+            isOutsideAllowedDates,
+            isOutsideAllowedMonths,
+            isOutsideAllowedYears,
+            ...selectionManager.helpers
+        }
+    };
+}
+export { useCalendar };

package/src/calendar/useCalendarDay.js

@@ -0,0 +1,74 @@
+import { getLocalTimeZone, isSameDay, isSameMonth, isToday } from "@internationalized/date";
+import { useEffect } from "react";
+import { useCalendarContext } from "./internal/CalendarContext.js";
+import { useFocusManagement } from "./internal/useFocusManagement.js";
+import { useSelectionDay } from "./useSelection.js";
+function useCalendarDay({ date, month }, ref) {
+    const { state: { focusedDate, hideOutOfRangeDates, calendarFocused }, helpers: { isDayUnselectable, isDayHighlighted, isDayDisabled, isOutsideAllowedMonths } } = useCalendarContext();
+    const selectionManager = useSelectionDay({
+        date
+    });
+    const focusManager = useFocusManagement({
+        date
+    });
+    const handleClick = (event)=>{
+        selectionManager?.handleClick(event);
+        focusManager.handleClick(event);
+    };
+    const handleKeyDown = (event)=>{
+        focusManager.handleKeyDown(event);
+        selectionManager?.handleKeyDown(event);
+    };
+    const handleFocus = (event)=>{
+        focusManager.handleFocus(event);
+    };
+    const handleMouseOver = (event)=>{
+        selectionManager.handleMouseOver?.(event);
+    };
+    const eventHandlers = {
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onMouseOver: handleMouseOver
+    };
+    const outOfRange = !isSameMonth(date, month);
+    const focused = isSameDay(date, focusedDate) && calendarFocused && !outOfRange;
+    const tabIndex = isSameDay(date, focusedDate) && !outOfRange ? 0 : -1;
+    const today = isToday(date, getLocalTimeZone());
+    const unselectableReason = isDayUnselectable(date);
+    const highlightedReason = isDayHighlighted(date);
+    const disabled = isDayDisabled(date) || outOfRange && isOutsideAllowedMonths(date);
+    const unselectable = Boolean(unselectableReason);
+    const highlighted = Boolean(highlightedReason);
+    const hidden = hideOutOfRangeDates && outOfRange;
+    useEffect(()=>{
+        if (focused) ref.current?.focus({
+            preventScroll: true
+        });
+    }, [
+        ref,
+        focused
+    ]);
+    return {
+        status: {
+            outOfRange,
+            today,
+            unselectable,
+            focused,
+            hidden,
+            disabled,
+            highlighted,
+            ...selectionManager.status
+        },
+        dayProps: {
+            tabIndex,
+            "aria-current": today ? "date" : void 0,
+            "aria-hidden": hidden ? "true" : void 0,
+            ...eventHandlers,
+            ...selectionManager.dayProps
+        },
+        unselectableReason,
+        highlightedReason
+    };
+}
+export { useCalendarDay };