@scalewing/react 1.39.0 → 1.40.0

package/dist/components/{date-field → calendar}/CalendarGrid.d.ts

@@ -13,7 +13,22 @@ export type CalendarGridProps = {
     onSelect: (value: string) => void;
     /** Days to tint as a span, such as the period a page shows. */
     range?: DateOnlyRange;
-    selected: string;
+    /**
+     * The selected day; `''` for none. A range instead selects every day in
+     * it (the grid is then multiselectable) and tints it as `range` does.
+     */
+    selected: string | DateOnlyRange;
+    /**
+     * The last day a press may pick when it is earlier than `max`, such as a
+     * range's longest end. Later days are `aria-disabled`; keys still reach
+     * them up to `max`, for orientation.
+     */
+    latest?: string;
+    /**
+     * Leave the neighbouring months' days blank, so months shown side by
+     * side hold each day once. By default they are shown, muted.
+     */
+    blankOutside?: boolean;
     titleId: string;
     today: string;
     weekStartsOn: WeekStart;
@@ -23,4 +38,4 @@ export type CalendarGridProps = {
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;
+export declare function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, latest, blankOutside, titleId, today, weekStartsOn, }: CalendarGridProps): import("react").JSX.Element;

package/dist/components/{date-field → calendar}/CalendarGrid.js

@@ -12,14 +12,22 @@ function rangeClassNames(place) {
         (place === 'end' || place === 'only') && 'sw-date-field-day-range-end',
     ];
 }
+function isSelectedDay(value, selected) {
+    return typeof selected === 'string'
+        ? value === selected
+        : dayInRange(value, selected) !== null;
+}
 /**
  * The month as a WAI-ARIA grid with one roving tab stop. Days outside
  * `[min, max]` stay focusable for orientation but are `aria-disabled`;
  * padding past the four-digit years is blank and inert.
  */
-export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, titleId, today, weekStartsOn, }) {
+export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate, onMoveFocus, onSelect, range, selected, latest, blankOutside = false, titleId, today, weekStartsOn, }) {
+    const pickMax = latest !== undefined && (max === undefined || latest < max) ? latest : max;
+    const tint = typeof selected === 'string' ? range : selected;
+    const unavailable = (value) => isOutsideDateRange(value, min, pickMax);
     function choose(value) {
-        if (!isOutsideDateRange(value, min, max))
+        if (!unavailable(value))
             onSelect(value);
     }
     function onKeyDown(event) {
@@ -35,7 +43,7 @@ export function CalendarGrid({ focusDate, locale, max, min, month, onFocusDate,
         event.preventDefault();
         onMoveFocus(target);
     }
-    return (_jsxs("table", { "aria-labelledby": titleId, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": isOutsideDateRange(cell.value, min, max) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": cell.value === selected, className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside', ...rangeClassNames(dayInRange(cell.value, range))), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
+    return (_jsxs("table", { "aria-labelledby": titleId, "aria-multiselectable": typeof selected === 'string' ? undefined : true, className: "sw-date-field-grid", onKeyDown: onKeyDown, role: "grid", children: [_jsx("thead", { children: _jsx("tr", { children: weekdayLabels(locale, weekStartsOn).map((weekday) => (_jsx("th", { abbr: weekday.long, scope: "col", children: weekday.short }, weekday.long))) }) }), _jsx("tbody", { children: monthGrid(month, weekStartsOn).map((row, rowIndex) => (_jsx("tr", { children: row.map((cell, column) => cell === null || (blankOutside && !cell.inMonth) ? (_jsx("td", { "aria-disabled": "true", className: "sw-date-field-day sw-date-field-day-outside", role: "gridcell" }, `blank-${column}`)) : (_jsx("td", { "aria-current": cell.value === today ? 'date' : undefined, "aria-disabled": unavailable(cell.value) || undefined, "aria-label": formatDateLabel(cell.value, locale), "aria-selected": isSelectedDay(cell.value, selected), className: cx('sw-date-field-day', !cell.inMonth && 'sw-date-field-day-outside', ...rangeClassNames(dayInRange(cell.value, tint))), "data-date": cell.value, onClick: () => choose(cell.value), onFocus: () => {
                             // A press on a neighboring month's day selects it; moving
                             // the grid first would pull the day out from under it.
                             if (cell.inMonth && cell.value !== focusDate)

package/dist/components/calendar/CalendarPopover.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type GridFocus } from './use-grid-focus.js';
+export type CalendarPopoverProps = {
+    /** The element the popover sits beside, such as the field or button. */
+    anchorRef: RefObject<HTMLElement | null>;
+    /** The button that toggles it; a press there is not a press outside. */
+    buttonRef: RefObject<HTMLElement | null>;
+    popoverRef: RefObject<HTMLDivElement | null>;
+    id: string;
+    /** Names the dialog by an element, or by `aria-label`. */
+    'aria-labelledby'?: string;
+    'aria-label'?: string;
+    /** `true` returns focus to the button: Escape does, a press outside does not. */
+    onClose: (restoreFocus: boolean) => void;
+    /** Follows focus in the grid when the popover itself holds it. */
+    focusHandlers?: GridFocus['focusHandlers'];
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * A calendar's popover: a modal dialog on the top layer beside its anchor,
+ * as the WAI-ARIA date picker dialog pattern asks. Escape closes it and
+ * returns focus; Tab stays inside; a press outside closes it.
+ */
+export declare function CalendarPopover({ anchorRef, buttonRef, popoverRef, id, 'aria-labelledby': labelledBy, 'aria-label': label, onClose, focusHandlers, className, children, }: CalendarPopoverProps): import("react").JSX.Element;

package/dist/components/calendar/CalendarPopover.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { useAnchoredPopover } from '../use-anchored-popover.js';
+import { wrapTab } from './wrap-tab.js';
+/**
+ * A calendar's popover: a modal dialog on the top layer beside its anchor,
+ * as the WAI-ARIA date picker dialog pattern asks. Escape closes it and
+ * returns focus; Tab stays inside; a press outside closes it.
+ */
+export function CalendarPopover({ anchorRef, buttonRef, popoverRef, id, 'aria-labelledby': labelledBy, 'aria-label': label, onClose, focusHandlers, className, children, }) {
+    useAnchoredPopover(popoverRef, anchorRef, buttonRef, () => onClose(false));
+    function onKeyDown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose(true);
+        }
+        else if (event.key === 'Tab')
+            wrapTab(event);
+    }
+    return (_jsx("div", { ...focusHandlers, "aria-label": label, "aria-labelledby": labelledBy, "aria-modal": "true", className: cx('sw-date-field-calendar', className), id: id, onKeyDown: onKeyDown, ref: popoverRef, role: "dialog", children: children }));
+}

package/dist/components/calendar/MonthStep.d.ts

@@ -0,0 +1,16 @@
+import { type CalendarMonth } from '../../calendar-month.js';
+export type MonthStepProps = {
+    /** The month the step leaves from: the first or the last month shown. */
+    month: CalendarMonth;
+    delta: 1 | -1;
+    label: string;
+    min?: string;
+    max?: string;
+    onMonthChange: (month: CalendarMonth) => void;
+};
+/**
+ * A calendar's previous or next month step. Past the four-digit years or
+ * outside `[min, max]` it is `aria-disabled`, so it keeps focus and its
+ * press does nothing.
+ */
+export declare function MonthStep({ delta, label, max, min, month, onMonthChange, }: MonthStepProps): import("react").JSX.Element;

package/dist/components/calendar/MonthStep.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { monthInRange, shiftMonth, } from '../../calendar-month.js';
+import { tabStop } from '../../tab-stop.js';
+import { DateFieldGlyph } from '../date-field/DateFieldGlyph.js';
+/**
+ * A calendar's previous or next month step. Past the four-digit years or
+ * outside `[min, max]` it is `aria-disabled`, so it keeps focus and its
+ * press does nothing.
+ */
+export function MonthStep({ delta, label, max, min, month, onMonthChange, }) {
+    const target = shiftMonth(month, delta);
+    const unavailable = target.year < 1 || target.year > 9999 || !monthInRange(target, min, max);
+    return (_jsx("button", { "aria-disabled": unavailable || undefined, "aria-label": label, className: "sw-date-field-step", onClick: () => {
+            if (!unavailable)
+                onMonthChange(target);
+        }, tabIndex: tabStop, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
+}

package/dist/components/calendar/use-grid-focus.d.ts

@@ -0,0 +1,18 @@
+import { type FocusEvent, type RefObject } from 'react';
+export type GridFocus = {
+    /** The next focus date takes DOM focus, as after a grid key. */
+    requestFocus: () => void;
+    /** Spread on the element holding the grids, to follow where focus is. */
+    focusHandlers: {
+        onBlur: () => void;
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+    };
+};
+/**
+ * Moves DOM focus to a calendar's focus date when asked (on mount when
+ * `focusOnMount`, and after a grid key) and while a day already holds
+ * focus, so a new value or new bounds never strand focus on a removed day.
+ * Header controls and presses change the date without taking focus from
+ * where it is. Shared by DateField's calendar and DateRangeButton.
+ */
+export declare function useGridFocus(containerRef: RefObject<HTMLElement | null>, focusDate: string, focusOnMount: boolean): GridFocus;

package/dist/components/calendar/use-grid-focus.js

@@ -0,0 +1,35 @@
+import { useLayoutEffect, useRef, } from 'react';
+/**
+ * Moves DOM focus to a calendar's focus date when asked (on mount when
+ * `focusOnMount`, and after a grid key) and while a day already holds
+ * focus, so a new value or new bounds never strand focus on a removed day.
+ * Header controls and presses change the date without taking focus from
+ * where it is. Shared by DateField's calendar and DateRangeButton.
+ */
+export function useGridFocus(containerRef, focusDate, focusOnMount) {
+    const focusGrid = useRef(focusOnMount);
+    // Whether a day holds DOM focus. Removing that day fires no blur, so this
+    // stays true when a new value or bounds move the grid out from under it.
+    const gridFocused = useRef(false);
+    useLayoutEffect(() => {
+        if (!focusGrid.current && !gridFocused.current)
+            return;
+        focusGrid.current = false;
+        containerRef.current
+            ?.querySelector(`[role="grid"] [data-date="${focusDate}"]`)
+            ?.focus({ preventScroll: true });
+    }, [containerRef, focusDate]);
+    return {
+        requestFocus: () => {
+            focusGrid.current = true;
+        },
+        focusHandlers: {
+            onBlur: () => {
+                gridFocused.current = false;
+            },
+            onFocus: (event) => {
+                gridFocused.current = event.target.closest('[role="grid"]') !== null;
+            },
+        },
+    };
+}

package/dist/components/calendar/wrap-tab.d.ts

@@ -0,0 +1,7 @@
+import { type KeyboardEvent } from 'react';
+/**
+ * Keeps Tab and Shift+Tab inside a calendar popover, as a modal dialog
+ * does: from the last stop to the first, and back. Shared by DateField's
+ * calendar and DateRangeButton's popover.
+ */
+export declare function wrapTab(event: KeyboardEvent<HTMLElement>): void;

package/dist/components/calendar/wrap-tab.js

@@ -0,0 +1,29 @@
+/** A calendar popover's tab stops: enabled buttons and a grid's roving day. */
+function isTabStop(node) {
+    if (node instanceof HTMLButtonElement)
+        return !node.disabled;
+    return node.getAttribute('tabindex') === '0';
+}
+/**
+ * Keeps Tab and Shift+Tab inside a calendar popover, as a modal dialog
+ * does: from the last stop to the first, and back. Shared by DateField's
+ * calendar and DateRangeButton's popover.
+ */
+export function wrapTab(event) {
+    // One universal selector keeps document order in every DOM implementation.
+    const items = [
+        ...event.currentTarget.querySelectorAll('*'),
+    ].filter(isTabStop);
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (!first || !last)
+        return;
+    if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}

package/dist/components/date-field/CalendarDialog.js

@@ -1,43 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState, } from 'react';
-import { monthOf, } from '../../calendar-month.js';
-import { clampDateOnly, daysInMonth, formatDateOnly, isOutsideDateRange, parseDateOnly, } from '../../date-only.js';
+import { useId, useRef, useState } from 'react';
+import { monthOf, sameDayIn } from '../../calendar-month.js';
+import { clampDateOnly, isOutsideDateRange, } from '../../date-only.js';
 import { Button } from '../Button.js';
-import { CalendarGrid } from './CalendarGrid.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
-import { useAnchoredPopover } from '../use-anchored-popover.js';
-/** The dialog's tab stops: enabled buttons and the grid's roving day. */
-function isTabStop(node) {
-    if (node instanceof HTMLButtonElement)
-        return !node.disabled;
-    return node.getAttribute('tabindex') === '0';
-}
-/** Keeps Tab and Shift+Tab inside the dialog, as a modal dialog does. */
-function wrapTab(event) {
-    // One universal selector keeps document order in every DOM implementation.
-    const items = [
-        ...event.currentTarget.querySelectorAll('*'),
-    ].filter(isTabStop);
-    const first = items[0];
-    const last = items[items.length - 1];
-    if (!first || !last)
-        return;
-    if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-    }
-    else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-    }
-}
-function sameDayIn(month, focused) {
-    const day = parseDateOnly(focused)?.day ?? 1;
-    return formatDateOnly({
-        ...month,
-        day: Math.min(day, daysInMonth(month.year, month.month)),
-    });
-}
+import { CalendarPopover } from '../calendar/CalendarPopover.js';
+import { useGridFocus } from '../calendar/use-grid-focus.js';
 /**
  * The calendar popover: a labelled modal dialog anchored under the field,
  * following the WAI-ARIA date picker dialog pattern. It opens on the
@@ -57,37 +26,10 @@ export function CalendarDialog({ anchorRef, buttonRef, id, labelId, labels, loca
     // Clamped on every render, so new bounds while open move it inside.
     const focusDate = clampDateOnly(rawFocusDate, min, max);
     const month = monthOf(focusDate);
-    // Opening and grid keys move DOM focus to the focus date; header controls
-    // and presses change the date without taking focus from where it is.
-    const focusGrid = useRef(true);
-    useAnchoredPopover(dialogRef, anchorRef, buttonRef, () => onClose(false));
-    // Whether a day holds DOM focus. Removing that day fires no blur, so this
-    // stays true when a new value or bounds move the grid out from under it.
-    const gridFocused = useRef(false);
-    useLayoutEffect(() => {
-        if (!focusGrid.current && !gridFocused.current)
-            return;
-        focusGrid.current = false;
-        dialogRef.current
-            ?.querySelector(`[role="grid"] [data-date="${focusDate}"]`)
-            ?.focus({ preventScroll: true });
-    }, [focusDate]);
-    function onKeyDown(event) {
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            onClose(true);
-        }
-        else if (event.key === 'Tab')
-            wrapTab(event);
-    }
+    const { requestFocus, focusHandlers } = useGridFocus(dialogRef, focusDate, true);
     const todayUnavailable = isOutsideDateRange(today, min, max);
-    return (_jsxs("div", { "aria-labelledby": labelId, "aria-modal": "true", className: "sw-date-field-calendar", id: id, onBlur: () => {
-            gridFocused.current = false;
-        }, onFocus: (event) => {
-            gridFocused.current = event.target.closest('[role="grid"]') !== null;
-        }, onKeyDown: onKeyDown, ref: dialogRef, role: "dialog", children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
-                    focusGrid.current = true;
+    return (_jsxs(CalendarPopover, { anchorRef: anchorRef, "aria-labelledby": labelId, buttonRef: buttonRef, focusHandlers: focusHandlers, id: id, onClose: onClose, popoverRef: dialogRef, children: [_jsx(CalendarHeader, { labels: labels, locale: locale, max: max, min: min, month: month, onMonthChange: (next) => setFocusDate(sameDayIn(next, focusDate)), titleId: titleId, todayYear: monthOf(today).year }), _jsx(CalendarGrid, { focusDate: focusDate, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                    requestFocus();
                     setFocusDate(next);
                 }, onSelect: onSelect, range: range, selected: value, titleId: titleId, today: today, weekStartsOn: weekStartsOn }), _jsxs("div", { className: "sw-date-field-footer", children: [required ? null : (_jsx(Button, { disabled: value === '', onPress: () => onSelect(''), size: "sm", variant: "ghost", children: labels.clear })), _jsx(Button, { disabled: todayUnavailable, onPress: () => onSelect(today), size: "sm", variant: "ghost", children: labels.today })] })] }));
 }

package/dist/components/date-field/CalendarHeader.js

@@ -1,18 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { monthNames, monthTitle } from '../../calendar-labels.js';
-import { monthInRange, monthsInRange, shiftMonth, } from '../../calendar-month.js';
+import { monthsInRange } from '../../calendar-month.js';
 import { calendarYearRange, yearsIn } from '../../calendar-years.js';
 import { Select } from '../Select.js';
-import { DateFieldGlyph } from './DateFieldGlyph.js';
-import { tabStop } from '../../tab-stop.js';
-function MonthStep({ delta, label, max, min, month, onMonthChange, }) {
-    const target = shiftMonth(month, delta);
-    const unavailable = target.year < 1 || target.year > 9999 || !monthInRange(target, min, max);
-    return (_jsx("button", { "aria-disabled": unavailable || undefined, "aria-label": label, className: "sw-date-field-step", onClick: () => {
-            if (!unavailable)
-                onMonthChange(target);
-        }, tabIndex: tabStop, type: "button", children: _jsx(DateFieldGlyph, { name: delta < 0 ? 'previous' : 'next' }) }));
-}
+import { MonthStep } from '../calendar/MonthStep.js';
 /**
  * Month stepping plus month and year selectors for jumping far, both cut to
  * `min` and `max`, over a visually hidden title that announces the shown

package/dist/components/date-range/DateRangePopover.d.ts

@@ -0,0 +1,7 @@
+import { type RangePanelProps } from './range-panel-props.js';
+/**
+ * DateRangeButton from `md` up: a popover beside the button with the
+ * presets, two months, the range being picked, Cancel and Apply. Escape
+ * and a press outside cancel.
+ */
+export declare function DateRangePopover(props: RangePanelProps): import("react").JSX.Element;

package/dist/components/date-range/DateRangePopover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button } from '../Button.js';
+import { CalendarPopover } from '../calendar/CalendarPopover.js';
+import { RangeMonths } from './RangeMonths.js';
+import { RangePresets } from './RangePresets.js';
+import { RangeSummary } from './RangeSummary.js';
+/**
+ * DateRangeButton from `md` up: a popover beside the button with the
+ * presets, two months, the range being picked, Cancel and Apply. Escape
+ * and a press outside cancel.
+ */
+export function DateRangePopover(props) {
+    const popoverRef = useRef(null);
+    const { labels, presets } = props;
+    return (_jsxs(CalendarPopover, { anchorRef: props.buttonRef, "aria-label": props.label, buttonRef: props.buttonRef, className: "sw-date-range-popover", id: props.id, onClose: props.onCancel, popoverRef: popoverRef, children: [_jsxs("div", { className: "sw-date-range-body", children: [presets.length > 0 ? (_jsx(RangePresets, { label: labels.presets, layout: "list", onChoose: props.onChoosePreset, presets: presets, pressedId: props.pressedPresetId })) : null, _jsx(RangeMonths, { count: 2, draft: props.draft, focusOnMount: true, labels: labels, latest: props.latest, locale: props.locale, max: props.max, min: props.min, onPress: props.onPress, today: props.today, weekStartsOn: props.weekStartsOn })] }), _jsxs("div", { className: "sw-date-range-footer", children: [_jsx(RangeSummary, { count: props.count, hint: labels.hint, line: props.line }), _jsxs("div", { className: "sw-date-range-actions", children: [_jsx(Button, { onPress: () => props.onCancel(true), size: "sm", variant: "neutral", children: labels.cancel }), _jsx(Button, { onPress: props.onApply, size: "sm", children: labels.apply })] })] })] }));
+}

package/dist/components/date-range/DateRangeSheet.d.ts

@@ -0,0 +1,7 @@
+import { type RangePanelProps } from './range-panel-props.js';
+/**
+ * DateRangeButton below `md`: a bottom sheet titled by its label, the
+ * range being picked under the title, the presets in a row, one month,
+ * and the hint over Cancel and Apply. Closing it any other way cancels.
+ */
+export declare function DateRangeSheet(props: RangePanelProps): import("react").JSX.Element;

package/dist/components/date-range/DateRangeSheet.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button.js';
+import { Dialog } from '../Dialog.js';
+import { RangeMonths } from './RangeMonths.js';
+import { RangePresets } from './RangePresets.js';
+import { RangeSummary } from './RangeSummary.js';
+/**
+ * DateRangeButton below `md`: a bottom sheet titled by its label, the
+ * range being picked under the title, the presets in a row, one month,
+ * and the hint over Cancel and Apply. Closing it any other way cancels.
+ */
+export function DateRangeSheet(props) {
+    const { labels, presets } = props;
+    return (_jsxs(Dialog, { className: "sw-date-range-sheet", closeLabel: labels.close, description: `${props.line} · ${props.count}`, footer: _jsxs("div", { className: "sw-date-range-sheet-footer", children: [_jsx("span", { className: "sw-date-range-hint", children: labels.hint }), _jsxs("div", { className: "sw-date-range-actions", children: [_jsx(Button, { onPress: () => props.onCancel(true), variant: "neutral", children: labels.cancel }), _jsx(Button, { onPress: props.onApply, children: labels.apply })] })] }), id: props.id, onClose: () => props.onCancel(true), open: true, sheetBelow: "md", title: props.label, children: [_jsx(RangeSummary, { count: props.count, line: props.line, visuallyHidden: true }), presets.length > 0 ? (_jsx(RangePresets, { label: labels.presets, layout: "row", onChoose: props.onChoosePreset, presets: presets, pressedId: props.pressedPresetId })) : null, _jsx(RangeMonths, { count: 1, draft: props.draft, focusOnMount: false, labels: labels, latest: props.latest, locale: props.locale, max: props.max, min: props.min, onPress: props.onPress, today: props.today, weekStartsOn: props.weekStartsOn })] }));
+}

package/dist/components/date-range/RangeMonths.d.ts

@@ -0,0 +1,28 @@
+import { type WeekStart } from '../../calendar-month.js';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type RangeMonthCount } from '../../date-range-view.js';
+export type RangeMonthsProps = {
+    count: RangeMonthCount;
+    draft: RangeDraft;
+    onPress: (day: string) => void;
+    /** The last day a press may pick (`max`, or `maxDays` from the start). */
+    latest: string | undefined;
+    min?: string;
+    max?: string;
+    locale: string;
+    today: string;
+    weekStartsOn: WeekStart;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+    };
+    /** Take DOM focus on the focus day when shown, as a popover does. */
+    focusOnMount: boolean;
+};
+/**
+ * One month, or two side by side, of the range being picked: each a
+ * labelled grid with one roving day across them, the previous step before
+ * the first month and the next step after the last. It opens on the
+ * range's end, and the months follow the focus day.
+ */
+export declare function RangeMonths({ count, draft, onPress, latest, min, max, locale, today, weekStartsOn, labels, focusOnMount, }: RangeMonthsProps): import("react").JSX.Element;

package/dist/components/date-range/RangeMonths.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { monthTitle } from '../../calendar-labels.js';
+import { firstOfMonth, lastOfMonth, monthsBetween, sameDayIn, shiftMonth, } from '../../calendar-month.js';
+import { firstShownMonth, shownMonths, } from '../../date-range-view.js';
+import { clampDateOnly } from '../../date-only.js';
+import { CalendarGrid } from '../calendar/CalendarGrid.js';
+import { MonthStep } from '../calendar/MonthStep.js';
+import { useGridFocus } from '../calendar/use-grid-focus.js';
+/** `focusDate` moved into the shown months, after a month step. */
+function keepInView(focusDate, first, count) {
+    const months = shownMonths(first, count);
+    const last = months[months.length - 1] ?? first;
+    if (focusDate < firstOfMonth(first))
+        return sameDayIn(first, focusDate);
+    if (focusDate > lastOfMonth(last))
+        return sameDayIn(last, focusDate);
+    return focusDate;
+}
+/**
+ * One month, or two side by side, of the range being picked: each a
+ * labelled grid with one roving day across them, the previous step before
+ * the first month and the next step after the last. It opens on the
+ * range's end, and the months follow the focus day.
+ */
+export function RangeMonths({ count, draft, onPress, latest, min, max, locale, today, weekStartsOn, labels, focusOnMount, }) {
+    const id = useId();
+    const containerRef = useRef(null);
+    const [rawFocusDate, setFocusDate] = useState(draft.range.end);
+    // Clamped on every render, so new bounds while open move it inside.
+    const focusDate = clampDateOnly(rawFocusDate, min, max);
+    const [first, setFirst] = useState(() => firstShownMonth(focusDate, count, undefined, min));
+    const shown = firstShownMonth(focusDate, count, first, min);
+    if (monthsBetween(first, shown) !== 0)
+        setFirst(shown);
+    const { requestFocus, focusHandlers } = useGridFocus(containerRef, focusDate, focusOnMount);
+    function stepBy(delta) {
+        const nextFirst = shiftMonth(shown, delta);
+        setFirst(nextFirst);
+        setFocusDate(clampDateOnly(keepInView(focusDate, nextFirst, count), min, max));
+    }
+    const months = shownMonths(shown, count);
+    return (_jsxs("div", { className: "sw-date-range-months", ref: containerRef, ...focusHandlers, children: [_jsx("div", { "aria-live": "polite", className: "sw-sr-only", children: months.map((month) => (_jsx("div", { children: monthTitle(month, locale) }, `${month.year}-${month.month}`))) }), months.map((month, index) => {
+                const titleId = `${id}-${index}`;
+                return (_jsxs("div", { className: "sw-date-range-month", children: [_jsxs("div", { className: "sw-date-range-month-header", children: [index === 0 ? (_jsx(MonthStep, { delta: -1, label: labels.previousMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(-1) })) : null, _jsx("div", { className: "sw-date-range-month-title", id: titleId, children: monthTitle(month, locale) }), index === months.length - 1 ? (_jsx(MonthStep, { delta: 1, label: labels.nextMonth, max: max, min: min, month: month, onMonthChange: () => stepBy(1) })) : null] }), _jsx(CalendarGrid, { blankOutside: true, focusDate: focusDate, latest: latest, locale: locale, max: max, min: min, month: month, onFocusDate: setFocusDate, onMoveFocus: (next) => {
+                                requestFocus();
+                                setFocusDate(next);
+                            }, onSelect: onPress, selected: draft.range, titleId: titleId, today: today, weekStartsOn: weekStartsOn })] }, titleId));
+            })] }));
+}

package/dist/components/date-range/RangePresets.d.ts

@@ -0,0 +1,16 @@
+import { type DateRangePreset } from '../../date-range-input.js';
+export type RangePresetsProps = {
+    presets: readonly DateRangePreset[];
+    /** Names the group, such as "Quick ranges". */
+    label: string;
+    /** The preset whose range is the one shown, if any. */
+    pressedId: string | undefined;
+    onChoose: (preset: DateRangePreset) => void;
+    /** `list` beside the months; `row` above one month, scrolling sideways. */
+    layout: 'list' | 'row';
+};
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export declare function RangePresets({ presets, label, pressedId, onChoose, layout, }: RangePresetsProps): import("react").JSX.Element;

package/dist/components/date-range/RangePresets.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../class-names.js';
+import { tabStop } from '../../tab-stop.js';
+/**
+ * DateRangeButton's presets: a named group of buttons, the one matching
+ * the range shown `aria-pressed`. A press applies its range at once.
+ */
+export function RangePresets({ presets, label, pressedId, onChoose, layout, }) {
+    return (_jsx("div", { "aria-label": label, className: cx('sw-date-range-presets', layout === 'row' && 'sw-date-range-presets-row'), role: "group", children: presets.map((preset) => (_jsx("button", { "aria-pressed": preset.id === pressedId, className: "sw-date-range-preset", onClick: () => onChoose(preset), tabIndex: tabStop, type: "button", children: preset.label }, preset.id))) }));
+}

package/dist/components/date-range/RangeSummary.d.ts

@@ -0,0 +1,15 @@
+export type RangeSummaryProps = {
+    /** The range being picked, with its weekdays. */
+    line: string;
+    /** Its length, such as "7 days". */
+    count: string;
+    /** How to pick, after the length; left out where the page shows it elsewhere. */
+    hint?: string;
+    /** Keep the words for assistive technology only, where the page shows them elsewhere. */
+    visuallyHidden?: boolean;
+};
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export declare function RangeSummary({ line, count, hint, visuallyHidden, }: RangeSummaryProps): import("react").JSX.Element;

package/dist/components/date-range/RangeSummary.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The range being picked, in a polite live region so each press is heard:
+ * the range on its own line, then its length and the hint.
+ */
+export function RangeSummary({ line, count, hint, visuallyHidden = false, }) {
+    const status = (_jsxs("div", { "aria-atomic": "true", className: "sw-date-range-status", role: "status", children: [_jsx("span", { className: "sw-date-range-line", children: line }), ' ', _jsx("span", { className: "sw-date-range-count", children: count })] }));
+    if (visuallyHidden)
+        return _jsx("div", { className: "sw-sr-only", children: status });
+    return (_jsxs("div", { className: "sw-date-range-summary", children: [status, hint === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "sw-date-range-separator", children: ' · ' }), _jsx("span", { className: "sw-date-range-hint", children: hint })] }))] }));
+}

package/dist/components/date-range/range-panel-props.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { type WeekStart } from '../../calendar-month.js';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateRangePreset } from '../../date-range-input.js';
+import { type DateRangeButtonLabels } from '../../date-range-labels.js';
+/** What both of DateRangeButton's presentations, popover and sheet, draw. */
+export type RangePanelProps = {
+    id: string;
+    /** Names the popover or titles the sheet. */
+    label: string;
+    labels: DateRangeButtonLabels;
+    draft: RangeDraft;
+    onPress: (day: string) => void;
+    presets: readonly DateRangePreset[];
+    pressedPresetId: string | undefined;
+    onChoosePreset: (preset: DateRangePreset) => void;
+    /** Applies the draft. */
+    onApply: () => void;
+    /** Keeps the value; `true` returns focus to the button. */
+    onCancel: (restoreFocus: boolean) => void;
+    latest: string | undefined;
+    min?: string;
+    max?: string;
+    locale: string;
+    today: string;
+    weekStartsOn: WeekStart;
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    /** The draft's words: the range with weekdays, and its length. */
+    line: string;
+    count: string;
+};

package/dist/components/date-range/range-panel-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/date-range/use-range-popup.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import { type RangeDraft } from '../../date-range-draft.js';
+import { type DateOnlyRange } from '../../date-only.js';
+export type RangePopup = {
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    id: string;
+    shown: boolean;
+    toggle: () => void;
+    draft: RangeDraft;
+    press: (day: string) => void;
+    /** Closes and gives `range` to `onChange` when it is a new range. */
+    apply: (range: DateOnlyRange) => void;
+    /** Closes and keeps the value; `true` returns focus to the button. */
+    cancel: (restoreFocus: boolean) => void;
+};
+/**
+ * DateRangeButton's open state and the range being picked. Opening starts
+ * from the value; a new value while open starts over from it. Disabling
+ * closes it for good.
+ */
+export declare function useRangePopup(value: DateOnlyRange, disabled: boolean, onChange: (value: DateOnlyRange) => void): RangePopup;