@allxsmith/bestax-bulma 5.26.5 → 5.26.6

package/dist/index.esm.js

@@ -7689,7 +7689,8 @@ const noAnnouncementsYet = {
 // the accessibility tree. The declarations match the `extras-sr-only` mixin,
 // plus `clip-path`, which replaces the deprecated `clip`. The negative margin
 // pulls the 1px box back inside the page, so it doesn't add scrollable
-// overflow.
+// overflow. Exported for other live regions that must work without a
+// stylesheet, such as a range calendar's.
 const visuallyHidden = {
     position: 'absolute',
     width: '1px',
@@ -10140,7 +10141,11 @@ const Numberinput = forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
     const insideField = useInsideField();
-    const effectiveBare = bare ?? insideField;
+    // Bare controls join their parent's row, which a `.control` does not lay
+    // out. `useInsideControl()` is true anywhere below a `Control`, even past
+    // a `Field` nested in it, so there they keep their own row as well.
+    const insideControl = useInsideControl();
+    const effectiveBare = bare ?? (insideField && !insideControl);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const inputRef = useRef(null);
@@ -11482,6 +11487,9 @@ const DEFAULT_PICKER_LABELS = {
     chooseDate: 'Choose date',
     chooseMonth: 'Choose month',
     chooseYear: 'Choose year',
+    rangeStart: 'Start date',
+    rangeEnd: 'End date',
+    rangePreviewEnd: 'Choose as end date',
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
@@ -11634,6 +11642,43 @@ function isPeriodUnselectable(d, granularity, c) {
     }
     return true;
 }
+/**
+ * The most days {@link canCloseRange} walks between a range's ends, about
+ * eleven years. A span it would have to walk further is refused, so the check
+ * stays cheap enough to run on every pointer move over the calendar.
+ */
+const RANGE_WALK_LIMIT = 4000;
+/**
+ * Whether `end` can close a range that opens on `start`: it falls on `start`'s
+ * day or later, and, unless `allowDisabled`, no day between the two is one
+ * that `shouldDisableDate` or `unselectableDates` disables. Checking that
+ * walks the days between, so with either rule set and `allowDisabled` off,
+ * an `end` more than {@link RANGE_WALK_LIMIT} days after `start` is refused.
+ * The ends' own constraints, `min` and `max` among them, are the caller's to
+ * check. Bounds can't fall between two days inside them, so they are not
+ * walked.
+ */
+function canCloseRange(start, end, c, allowDisabled = false) {
+    const first = startOfDay(start);
+    const last = startOfDay(end).getTime();
+    if (last < first.getTime())
+        return false;
+    if (allowDisabled)
+        return true;
+    const blocks = {
+        shouldDisableDate: c.shouldDisableDate,
+        unselectableDates: c.unselectableDates,
+    };
+    if (!blocks.shouldDisableDate && !blocks.unselectableDates?.length) {
+        return true;
+    }
+    for (let d = addDays(first, 1), walked = 1; d.getTime() < last; d = addDays(d, 1), walked++) {
+        if (walked >= RANGE_WALK_LIMIT || isDayUnselectable(d, blocks)) {
+            return false;
+        }
+    }
+    return true;
+}
 function addDays(d, n) {
     const r = new Date(d);
     r.setDate(r.getDate() + n);
@@ -12094,6 +12139,28 @@ function nearestEnabled(i, disabled) {
     }
     return i;
 }
+/** The long, spoken form of a date in a range's announcement. */
+const LONG_DATE = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+/** A range's pending start: its start, when it has no end. */
+const pendingStartOf = (range) => range?.[0] && !range[1] ? startOfDay(range[0]) : null;
+/**
+ * The day grid's cells in rows of a week. A grid owns rows and rows own
+ * cells, so assistive technology can walk the grid, and the selection it
+ * reports, row by row.
+ */
+const inWeeks = (days, className) => {
+    const rows = [];
+    for (let i = 0; i < days.length; i += 7) {
+        rows.push(jsx("div", { role: "row", className: className, children: days.slice(i, i + 7) }, i));
+    }
+    return rows;
+};
+/** A date's time, or `null` for none, for comparing ranges by value. */
+const timeOf = (d) => d ? d.getTime() : null;
 /**
  * The year list's keyboard, as the selection surface and as navigation:
  * arrows move a year or a row, Home/End go to the list's ends. Returns the
@@ -12119,7 +12186,7 @@ function yearStep(key, focusedYear, years) {
             return null;
     }
 }
-const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minProp, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', }) => {
+const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minProp, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', range, onRangeSelect, allowDisabledInRange = false, }) => {
     const gridRef = useRef(null);
     const monthGridRef = useRef(null);
     const yearGridRef = useRef(null);
@@ -12176,6 +12243,80 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         const i = nearestEnabled(focusedDate.getDate() - 1, days.map(isDateUnselectable));
         return days[i];
     }, [cells, focusedDate, isDateUnselectable]);
+    // ----- Range mode -----
+    // Range props come only with the day grid.
+    const rangeMode = !!range;
+    const valuePending = pendingStartOf(range);
+    // The start of a range being picked, which nothing outside the calendar
+    // sees until its end is picked too. It starts as the range's own pending
+    // start, and starts there again whenever the range changes from outside.
+    const [anchor, setAnchor] = useState(valuePending);
+    const rangeKey = `${timeOf(range?.[0])}|${timeOf(range?.[1])}`;
+    const [anchorRangeKey, setAnchorRangeKey] = useState(rangeKey);
+    if (anchorRangeKey !== rangeKey) {
+        setAnchorRangeKey(rangeKey);
+        setAnchor(valuePending);
+    }
+    // The day under the pointer while a start is pending, which the preview
+    // runs to ahead of the focused day.
+    const [hoverDate, setHoverDate] = useState(null);
+    // Whether `day` can end a range that starts on `start`. The start is
+    // checked as well as the end: one the range brought, or one picked before
+    // the bounds or the disabled days changed, can rule itself out.
+    const canEndAt = useCallback((start, day) => !isDateUnselectable(start) &&
+        !isDateUnselectable(day) &&
+        canCloseRange(start, day, { shouldDisableDate, unselectableDates }, allowDisabledInRange), [
+        isDateUnselectable,
+        shouldDisableDate,
+        unselectableDates,
+        allowDisabledInRange,
+    ]);
+    // A pick in range mode: the end of the pending range when it can be one,
+    // and otherwise the start of a new one.
+    const pickRangeDay = useCallback((picked) => {
+        const day = startOfDay(picked);
+        // The pointer is on the picked day, which the focused day now is too.
+        setHoverDate(null);
+        if (anchor && canEndAt(anchor, day)) {
+            setAnchor(null);
+            onRangeSelect?.(anchor, day);
+        }
+        else {
+            setAnchor(day);
+        }
+    }, [anchor, canEndAt, onRangeSelect]);
+    // What the grid shows: while a start is pending, the range from it to the
+    // hovered or focused day, when that day can end it; otherwise the
+    // committed range.
+    let shownStart;
+    let shownEnd;
+    if (anchor) {
+        shownStart = anchor;
+        const previewEnd = startOfDay(hoverDate ?? focusedDate);
+        shownEnd = canEndAt(anchor, previewEnd) ? previewEnd : null;
+    }
+    else {
+        shownStart = range?.[0] ? startOfDay(range[0]) : null;
+        shownEnd = range?.[1] ? startOfDay(range[1]) : null;
+    }
+    const previewing = !!anchor;
+    // Ids for the words that name a range's ends and state the whole range.
+    const reactId = useId();
+    const rangeIdBase = id ?? `calendar-${reactId}`;
+    const rangeStartId = `${rangeIdBase}-range-start`;
+    const rangeEndId = `${rangeIdBase}-range-end`;
+    const rangePreviewEndId = `${rangeIdBase}-range-preview-end`;
+    const rangeSummaryId = `${rangeIdBase}-range-summary`;
+    // The selection in words: the pending start alone, or the committed ends.
+    const selectedEnd = previewing ? null : shownEnd;
+    const rangeSummary = [
+        shownStart &&
+            `${t.rangeStart}: ${formatDate(shownStart, LONG_DATE, locale)}`,
+        selectedEnd &&
+            `${t.rangeEnd}: ${formatDate(selectedEnd, LONG_DATE, locale)}`,
+    ]
+        .filter(Boolean)
+        .join(', ');
     // Whether the grid on show holds focus, or held it last before focus went
     // nowhere: the cell that had it left the page or became disabled. A blur
     // that takes focus out of the grid, to nowhere included, is the user
@@ -12213,6 +12354,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [min, max, isDateUnselectable, onFocusedDateChange]);
     const handleKeyDown = useCallback((e) => {
+        // A key takes the range preview back from the pointer.
+        setHoverDate(null);
         switch (e.key) {
             case 'ArrowLeft':
                 e.preventDefault();
@@ -12255,11 +12398,35 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
             case 'Enter':
             case ' ':
                 e.preventDefault();
-                if (!isDateUnselectable(focusedDate))
-                    onSelect(focusedDate);
+                if (isDateUnselectable(focusedDate))
+                    break;
+                if (rangeMode)
+                    pickRangeDay(focusedDate);
+                else
+                    onSelect?.(focusedDate);
+                break;
+            case 'Escape':
+                // A pending pick is taken back, and the key stops there so a
+                // popover around the calendar stays open. The range's own pending
+                // start is no pick, so Escape goes on to close the popover.
+                if (anchor && !(valuePending && isSameDay(anchor, valuePending))) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setAnchor(valuePending);
+                }
                 break;
         }
-    }, [focusedDate, firstDayOfWeek, isDateUnselectable, moveFocus, onSelect]);
+    }, [
+        focusedDate,
+        firstDayOfWeek,
+        isDateUnselectable,
+        moveFocus,
+        onSelect,
+        rangeMode,
+        pickRangeDay,
+        anchor,
+        valuePending,
+    ]);
     // The month grid's counterpart to `moveFocus`: step by `direction` months
     // until a month with a selectable day turns up, stopping at the min/max
     // months. The cap guards against a range with nothing selectable.
@@ -12282,7 +12449,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             if (!isMonthUnselectable(focusedDate)) {
-                onSelect(startOfMonth(focusedDate));
+                onSelect?.(startOfMonth(focusedDate));
             }
             return;
         }
@@ -12308,6 +12475,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     const dayNamesRowClass = usePrefixedClassNames('dateinput-day-names');
     const dayNameClass = usePrefixedClassNames('dateinput-day-name');
     const gridClass = usePrefixedClassNames('dateinput-grid');
+    const weekClass = usePrefixedClassNames('dateinput-week');
     const monthsGridClass = usePrefixedClassNames('dateinput-months-grid');
     const monthsRowClass = usePrefixedClassNames('dateinput-months-row');
     const yearsGridClass = usePrefixedClassNames('dateinput-years-grid');
@@ -12397,7 +12565,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     // pick and `onSelect` gets the year's first day.
     const handleYearPick = useCallback((year) => {
         onFocusedDateChange(clampDate(makeDate(year), min, max));
-        onSelect(makeDate(year));
+        onSelect?.(makeDate(year));
     }, [min, max, onFocusedDateChange, onSelect]);
     // Step through the listed years from `year` by `direction`, skipping
     // disabled ones, and focus the first selectable year found.
@@ -12518,32 +12686,69 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => {
                             setNavYear(null);
                             setView(v => (v === 'years' ? baseView : 'years'));
-                        }, children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
+                        }, children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, "aria-multiselectable": rangeMode || undefined, "aria-describedby": rangeMode ? rangeSummaryId : undefined, className: gridClass, onKeyDown: handleKeyDown, onMouseLeave: anchor ? () => setHoverDate(null) : undefined, ...gridFocusHandlers, children: inWeeks(cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
-                            const isSelected = !!value && isSameDay(value, cell.date);
+                            const time = cell.date.getTime();
+                            // Range mode. The range on show has its ends filled. Every day
+                            // of a committed range is selected, and of a preview only the
+                            // start.
+                            const isStart = time === timeOf(shownStart);
+                            const isEnd = time === timeOf(shownEnd);
+                            const inRange = !!shownStart &&
+                                !!shownEnd &&
+                                time > shownStart.getTime() &&
+                                time < shownEnd.getTime();
+                            // The day a pending range would end on, which isn't picked
+                            // yet, so its description says what picking it does.
+                            const isPreviewEnd = previewing && isEnd && !isStart;
+                            const isPreview = (previewing && inRange) || isPreviewEnd;
+                            const isFilled = rangeMode
+                                ? isStart || (isEnd && !previewing)
+                                : !!value && isSameDay(value, cell.date);
+                            const isSelected = isFilled || (rangeMode && !previewing && inRange);
+                            const describedBy = rangeMode
+                                ? [
+                                    isStart && rangeStartId,
+                                    isEnd && !previewing && rangeEndId,
+                                    isPreviewEnd && rangePreviewEndId,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') || undefined
+                                : undefined;
                             const isFocused = isSameDay(cell.date, tabStopDay);
                             const otherMonth = !cell.inCurrentMonth;
                             const cellClass = prefixedClassNames(classPrefix, 'dateinput-cell', {
-                                'is-selected': isSelected,
+                                'is-selected': isFilled,
+                                'is-range-start': isStart,
+                                'is-range-end': isEnd,
+                                'is-in-range': inRange,
+                                'is-preview': isPreview,
                                 'is-today': cell.isToday,
                                 'is-disabled': disabled,
                                 'is-other-month': otherMonth,
                             });
                             const display = !otherMonth || nearbyMonthDays;
-                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
+                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
                                     // Reached by Tab while the focused day is disabled, or
                                     // by pointer: keys move on from here. A nearby month's
                                     // day waits for its click, which turns the grid.
                                     if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
                                         onFocusedDateChange(cell.date);
                                     }
-                                }, onClick: () => {
+                                }, 
+                                // Mouseover rather than mouseenter: browsers send it to a
+                                // disabled day as well, where React holds mouseenter back,
+                                // so the preview leaves the last enabled day behind.
+                                onMouseOver: anchor ? () => setHoverDate(cell.date) : undefined, onClick: () => {
                                     if (disabled)
                                         return;
                                     onFocusedDateChange(cell.date);
-                                    onSelect(cell.date);
+                                    if (rangeMode)
+                                        pickRangeDay(cell.date);
+                                    else
+                                        onSelect?.(cell.date);
                                 }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        }), weekClass) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
                         const date = makeDate(focusedYear, month);
                         const disabled = disabledMonths[month];
                         const isSelected = !!value && isSameMonth(value, date);
@@ -12562,7 +12767,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                 }
                             }, onClick: () => {
                                 onFocusedDateChange(clampDate(date, min, max));
-                                onSelect(date);
+                                onSelect?.(date);
                             }, children: monthCellNames[month] }, month));
                     }) }, row[0]))) })), view === 'years' && (jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
                     const isFocused = year === tabStopYear;
@@ -12593,7 +12798,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                         }, onClick: () => isYearGranularity
                             ? handleYearPick(year)
                             : handleYearSelect(year), children: year }, year));
-                }) }))] }));
+                }) })), rangeMode && (jsxs(Fragment, { children: [jsx("span", { id: rangeStartId, hidden: true, children: t.rangeStart }), jsx("span", { id: rangeEndId, hidden: true, children: t.rangeEnd }), jsx("span", { id: rangePreviewEndId, hidden: true, children: t.rangePreviewEnd }), jsx("div", { id: rangeSummaryId, "aria-live": "polite", style: visuallyHidden, children: rangeSummary })] }))] }));
 };
 Calendar.displayName = 'Calendar';