@chassis-ui/react 0.0.0-20260831090525

package/src/components/calendar/CalendarMonthYearPicker.tsx

@@ -0,0 +1,162 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import { useDateFormatter } from 'react-aria'
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate } from '@internationalized/date'
+
+import { CalendarMonthGrid } from './CalendarMonthGrid'
+import { CalendarYearGrid } from './CalendarYearGrid'
+import { setVisibleRangeStart } from '../../utils/setVisibleRangeStart'
+
+interface CalendarMonthYearPickerProps {
+  // The day grid, shown in the default 'days' view — owned by the caller (`Calendar` and
+  // `RangeCalendar` render genuinely different cells: single-date vs. range pill styling), so
+  // this only decides *whether* it's showing, never how it's built.
+  children: ReactNode
+  monthIndex?: number
+  monthStart: CalendarDate
+  // `null` when a global prev/next pair elsewhere is paging every visible month block at once
+  // (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see that
+  // component's own `arrows` prop. Only ever rendered in the 'days' view; the month/year views page
+  // themselves independently (`CalendarYearGrid`) or don't page at all (`CalendarMonthGrid`).
+  nextArrow?: ReactNode
+  // Reports this block's own view whenever it changes, so a parent rendering several blocks
+  // (`RangeCalendar` with `visibleMonths > 1`) can tell when one of them has switched to the
+  // year view — `CalendarYearGrid` owns its own prev/next pager in that view, which would
+  // otherwise sit right underneath the parent's global `.datepicker-controls` overlay.
+  onViewChange?: (view: 'days' | 'months' | 'years') => void
+  prevArrow?: ReactNode
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
+}
+
+// Header + body for one visible month block: the day grid by default, switching in place to a
+// month or year grid when the header's own month/year button is pressed (chassis-css's actual
+// `_datepicker.scss` design for this — `[data-vc="months"]`/`[data-vc="years"]`, swapped in for
+// `[data-vc="dates"]` — not a `<select>`, which is what this component used to render here. Native
+// `<select>` turned out to be the whole problem: picking a value forced a synchronous re-render
+// from inside the browser's own `change`-event dispatch, and in Safari that corrupted `usePress`'s
+// pointerup-vs-click target check for whatever the user clicked next — a page bug specific to
+// native form controls, not present here since a grid button is a plain, ordinary press.
+//
+// Shared by `Calendar` and `RangeCalendar` — `monthIndex` is the offset of this block's own
+// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`
+// land a pick correctly regardless of which visible block it came from.
+export const CalendarMonthYearPicker = ({
+  children,
+  monthIndex = 0,
+  monthStart,
+  nextArrow,
+  onViewChange,
+  prevArrow,
+  state
+}: CalendarMonthYearPickerProps) => {
+  const [view, setView] = useState<'days' | 'months' | 'years'>('days')
+  const containerRef = useRef<HTMLDivElement>(null)
+  // Skipped on mount — there's no prior view to restore focus from yet, and stealing focus
+  // as soon as the calendar renders would fight `autoFocus`/the caller's own focus management.
+  const isFirstRender = useRef(true)
+
+  const changeView = (next: 'days' | 'months' | 'years') => {
+    setView(next)
+    onViewChange?.(next)
+  }
+
+  // Switching `view` swaps in a whole new subtree, unmounting whatever was focused (the month/
+  // year trigger button, or the month/year grid button just picked) — React has no reason to move
+  // focus anywhere on its own, so without this it drops to `document.body`, breaking out of
+  // `FocusScope`'s containment in `DatePicker`/`DateRangePicker`'s popover entirely. Lands
+  // focus on the selected month/year button when entering the month/year view (falling back to
+  // the first option if nothing is selected on the currently visible page), or back onto the
+  // day grid's own roving-tabindex cell when returning to 'days'.
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
+    }
+
+    const container = containerRef.current
+    if (!container) return
+
+    const target =
+      view === 'days'
+        ? container.querySelector<HTMLElement>('.datepicker-date-btn[tabindex="0"]')
+        : (container.querySelector<HTMLElement>(
+            '.datepicker-months-month.selected, .datepicker-years-year.selected'
+          ) ??
+          container.querySelector<HTMLElement>('.datepicker-months-month, .datepicker-years-year'))
+
+    target?.focus()
+  }, [view])
+
+  const monthFormatter = useDateFormatter({
+    calendar: monthStart.calendar.identifier,
+    month: 'long',
+    timeZone: state.timeZone
+  })
+  const yearFormatter = useDateFormatter({
+    calendar: monthStart.calendar.identifier,
+    timeZone: state.timeZone,
+    year: 'numeric'
+  })
+
+  const commitAndReturn = (date: CalendarDate) => {
+    setVisibleRangeStart(state, date.subtract({ months: monthIndex }))
+    changeView('days')
+  }
+
+  return (
+    <div className="datepicker-column" ref={containerRef}>
+      {view === 'months' && (
+        <CalendarMonthGrid
+          announce={monthIndex === 0}
+          monthStart={monthStart}
+          onBack={() => changeView('days')}
+          onSelect={commitAndReturn}
+          state={state}
+        />
+      )}
+      {view === 'years' && (
+        <CalendarYearGrid
+          announce={monthIndex === 0}
+          monthStart={monthStart}
+          onBack={() => changeView('days')}
+          onSelect={commitAndReturn}
+          state={state}
+        />
+      )}
+      {view === 'days' && (
+        <>
+          <div className="datepicker-header">
+            {prevArrow}
+            <div className="datepicker-header-content">
+              <button
+                aria-label={`Month: ${monthFormatter.format(monthStart.toDate(state.timeZone))}`}
+                className="datepicker-month"
+                disabled={state.isDisabled}
+                onClick={() => changeView('months')}
+                type="button"
+              >
+                {monthFormatter.format(monthStart.toDate(state.timeZone))}
+              </button>
+              <button
+                aria-label={`Year: ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
+                className="datepicker-year"
+                disabled={state.isDisabled}
+                onClick={() => changeView('years')}
+                type="button"
+              >
+                {yearFormatter.format(monthStart.toDate(state.timeZone))}
+              </button>
+            </div>
+            {nextArrow}
+          </div>
+          {monthIndex === 0 && (
+            <span role="status" className="visually-hidden">
+              {`${monthFormatter.format(monthStart.toDate(state.timeZone))} ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
+            </span>
+          )}
+          {children}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/calendar/CalendarNavButton.tsx

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react'
+import { AriaButtonProps, useButton } from 'react-aria'
+
+interface CalendarNavButtonProps {
+  buttonProps: AriaButtonProps
+  direction: 'prev' | 'next'
+}
+
+// Shared prev/next arrow, used twice by both `Calendar` and `RangeCalendar` — `buttonProps`
+// comes from that caller's own `useCalendar`/`useRangeCalendar`, so this only owns the DOM ref and
+// the `useButton` wiring plus the arrow markup itself.
+export const CalendarNavButton = ({ buttonProps, direction }: CalendarNavButtonProps) => {
+  const ref = useRef<HTMLButtonElement>(null)
+  const { buttonProps: domButtonProps } = useButton(buttonProps, ref)
+
+  return (
+    <button
+      {...domButtonProps}
+      className={`datepicker-arrow datepicker-arrow-${direction}`}
+      ref={ref}
+      type="button"
+    ></button>
+  )
+}

package/src/components/calendar/CalendarWeekGrid.tsx

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react'
+import { useCalendarGrid } from 'react-aria'
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate } from '@internationalized/date'
+
+interface CalendarWeekGridProps {
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  renderCell: (date: CalendarDate, index: number, week: (CalendarDate | null)[]) => ReactNode
+  startDate?: CalendarDate
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
+}
+
+// Shared week-day header + date-rows grid, used by both `Calendar` and `RangeCalendar` —
+// `startDate` lets a range calendar anchor this to one of several visible months (see
+// `useCalendarGrid`'s own docs); omitted, it defaults to the calendar's own visible start. Only the
+// individual cell differs between the two callers (range selection needs start/end/in-between pill
+// state a single-date cell has no equivalent for), so cell rendering is left to `renderCell`.
+export const CalendarWeekGrid = ({
+  firstDayOfWeek,
+  renderCell,
+  startDate,
+  state
+}: CalendarWeekGridProps) => {
+  const { gridProps, headerProps, weekDays, weeksInMonth } = useCalendarGrid(
+    { firstDayOfWeek, startDate },
+    state
+  )
+
+  return (
+    <div {...gridProps} className="datepicker-content">
+      <div {...headerProps} className="datepicker-week" role="row">
+        {weekDays.map((day, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <span className="datepicker-week-day" key={index} role="columnheader">
+            {day}
+          </span>
+        ))}
+      </div>
+      <div className="datepicker-dates">
+        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {
+          const week = state.getDatesInWeek(weekIndex, startDate)
+          return (
+            <div className="datepicker-dates-row" key={weekIndex} role="row">
+              {week.map((date, i) =>
+                date ? (
+                  <React.Fragment key={date.toString()}>{renderCell(date, i, week)}</React.Fragment>
+                ) : (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div className="datepicker-date" key={i} role="gridcell" />
+                )
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/calendar/CalendarYearGrid.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import { useDateFormatter } from 'react-aria'
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate, toCalendarDate } from '@internationalized/date'
+
+import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
+
+interface CalendarYearGridProps {
+  // Whether to render the visually-hidden `aria-live` announcement of this view's current header
+  // (see `CalendarMonthYearPicker`'s own equivalent gate) — `false` for every visible month block
+  // but the first when `visibleMonths > 1`, so switching into this view (or paging within it)
+  // doesn't fire one simultaneous announcement per block.
+  announce?: boolean
+  monthStart: CalendarDate
+  onBack: () => void
+  onSelect: (date: CalendarDate) => void
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
+}
+
+const YEARS_PER_PAGE = 15
+
+// The year view of `CalendarMonthYearPicker` — a paged 3-column grid, `YEARS_PER_PAGE` years at a
+// time starting from the currently visible year. Unlike the month view, a year range doesn't fit
+// on one screen, so this owns its own prev/next paging (independent of the day grid's own
+// prev/next, which keep paging by month underneath whenever this view isn't showing).
+export const CalendarYearGrid = ({
+  announce = true,
+  monthStart,
+  onBack,
+  onSelect,
+  state
+}: CalendarYearGridProps) => {
+  const yearFormatter = useDateFormatter({
+    calendar: monthStart.calendar.identifier,
+    timeZone: state.timeZone,
+    year: 'numeric'
+  })
+  // Lazy initializer only — this view unmounts on every exit, so there's no case where `monthStart`
+  // changes while it's still mounted that this would need to react to.
+  const [pageStart, setPageStart] = useState(() => monthStart.year)
+
+  // `date` preserves `monthStart`'s own month/day, changing only the year — picking a year should
+  // land on the same month it started from, not reset to January (`yearStart`/`yearEnd` are the
+  // Jan 1–Dec 31 bounds used only for the disabled-range check below, kept separate so the actual
+  // selection target isn't affected by them).
+  const years = [...new Array(YEARS_PER_PAGE).keys()].map((i) => {
+    const date = monthStart.set({ year: pageStart + i })
+    const yearStart = date.set({ day: 1, month: 1 })
+    const yearEnd = yearStart.add({ years: 1 }).subtract({ days: 1 })
+    return {
+      date,
+      formatted: yearFormatter.format(date.toDate(state.timeZone)),
+      yearEnd,
+      yearStart
+    }
+  })
+  // `years` always has exactly `YEARS_PER_PAGE` (15) entries — a fixed, non-zero constant, never
+  // empty — so the first/last indices are always in range.
+  const firstYear = years[0]!
+  const lastYear = years[years.length - 1]!
+  const firstYearStart = firstYear.yearStart
+  const lastYearEnd = lastYear.yearEnd
+  const rangeLabel = `${firstYear.formatted} – ${lastYear.formatted}`
+
+  const isPrevDisabled =
+    state.isDisabled ||
+    (state.minValue != null &&
+      firstYearStart.subtract({ days: 1 }).compare(toCalendarDate(state.minValue)) < 0)
+  const isNextDisabled =
+    state.isDisabled ||
+    (state.maxValue != null &&
+      lastYearEnd.add({ days: 1 }).compare(toCalendarDate(state.maxValue)) > 0)
+
+  return (
+    <>
+      <div className="datepicker-header">
+        <button
+          aria-label="Previous years"
+          className="datepicker-arrow datepicker-arrow-prev"
+          disabled={isPrevDisabled}
+          onClick={() => setPageStart((start) => start - YEARS_PER_PAGE)}
+          type="button"
+        />
+        <div className="datepicker-header-content">
+          <button className="datepicker-year" onClick={onBack} type="button">
+            {rangeLabel}
+          </button>
+        </div>
+        <button
+          aria-label="Next years"
+          className="datepicker-arrow datepicker-arrow-next"
+          disabled={isNextDisabled}
+          onClick={() => setPageStart((start) => start + YEARS_PER_PAGE)}
+          type="button"
+        />
+      </div>
+      {announce && (
+        <span role="status" className="visually-hidden">
+          {`Select year, ${rangeLabel}`}
+        </span>
+      )}
+      <div className="datepicker-content">
+        <div aria-label={rangeLabel} className="datepicker-years" role="group">
+          {years.map((year) => {
+            const isSelected = year.date.year === monthStart.year
+            const isDisabled = isWholeUnitDisabled(state, year.yearStart, year.yearEnd)
+
+            return (
+              <button
+                aria-current={isSelected ? 'true' : undefined}
+                className={classNames('datepicker-years-year', { selected: isSelected })}
+                disabled={isDisabled}
+                key={year.date.year}
+                onClick={() => onSelect(year.date)}
+                type="button"
+              >
+                {year.formatted}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/calendar/RangeCalendar.scss

@@ -0,0 +1,95 @@
+@use "@chassis-ui/css/scss/config" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
+
+/*
+ * `RangeCalendar` reuses chassis-css's `.datepicker-*` classes as-is (see `Calendar.scss`).
+ * This file only covers the gaps: range-specific state (`.datepicker-date-in-range`,
+ * `-range-start`/`-end`) and the quick-select list beside the grid, which chassis-css
+ * doesn't style.
+ */
+
+@layer components {
+  .datepicker-date-in-range {
+    color: var(--day-range-fg-color);
+    background-color: var(--day-range-bg-color);
+  }
+
+  .datepicker-date-in-range > .datepicker-date-btn:hover {
+    background-color: unset;
+  }
+
+  .datepicker-date-in-range.datepicker-date-range-start {
+    @include border-top-start-radius(var(--border-radius-medium));
+    @include border-bottom-start-radius(var(--border-radius-medium));
+  }
+
+  .datepicker-date-in-range.datepicker-date-range-end {
+    @include border-top-end-radius(var(--border-radius-medium));
+    @include border-bottom-end-radius(var(--border-radius-medium));
+  }
+
+  .datepicker-date-btn:is(.datepicker-date-range-start, .datepicker-date-range-end),
+  .datepicker-date-btn:is(.datepicker-date-range-start, .datepicker-date-range-end):hover {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+
+  .datepicker-date-btn.datepicker-date-range-start:not(.datepicker-date-range-end) {
+    @include border-top-end-radius(0);
+    @include border-bottom-end-radius(0);
+  }
+
+  .datepicker-date-btn.datepicker-date-range-end:not(.datepicker-date-range-start) {
+    @include border-top-start-radius(0);
+    @include border-bottom-start-radius(0);
+  }
+
+  /* Wins the specificity tie with chassis-css's "today" rule for a range endpoint that's also
+     today (same approach as `Calendar.scss`'s selected+today override). */
+  .datepicker-date[aria-current="date"] > .datepicker-date-btn.datepicker-date-range-start,
+  .datepicker-date[aria-current="date"] > .datepicker-date-btn.datepicker-date-range-end {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+
+  /* Quick-select list beside the grid; no chassis-css equivalent, so fully custom. */
+  .datepicker-presets {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    padding-inline: 0 var(--padding-x);
+    margin: 0;
+    list-style: none;
+    border-inline-end: var(--border-width-medium) solid var(--border-subtle);
+  }
+
+  .datepicker-preset {
+    padding: var(--space-2xsmall) var(--space-xsmall);
+    color: var(--fg-main);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    @include border-radius(var(--border-radius-medium));
+  }
+
+  .datepicker-preset:hover {
+    background-color: var(--bg-hover);
+  }
+
+  .datepicker-preset:focus-visible {
+    outline: var(--border-width-xlarge) solid var(--primary);
+    outline-offset: -1px;
+  }
+
+  .datepicker-preset.selected {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+
+  .datepicker-preset.selected:hover {
+    background-color: var(--primary);
+  }
+}
+