@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/calendar/CalendarMonthYearPicker.tsx

@@ -1,164 +0,0 @@
-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'
-import { useCalendarLabels } from './labels'
-
-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 labels = useCalendarLabels()
-  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={`${labels.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={`${labels.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

@@ -1,24 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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'
-import { useCalendarLabels } from './labels'
-
-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 labels = useCalendarLabels()
-  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={labels.previousYears}
-          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={labels.nextYears}
-          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">
-          {`${labels.selectYear}, ${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

@@ -1,95 +0,0 @@
-@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-md));
-    @include border-bottom-start-radius(var(--border-radius-md));
-  }
-
-  .datepicker-date-in-range.datepicker-date-range-end {
-    @include border-top-end-radius(var(--border-radius-md));
-    @include border-bottom-end-radius(var(--border-radius-md));
-  }
-
-  .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-md) solid var(--border-subtle);
-  }
-
-  .datepicker-preset {
-    padding: var(--space-2xs) var(--space-xs);
-    color: var(--fg-main);
-    text-align: start;
-    white-space: nowrap;
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-    @include border-radius(var(--border-radius-md));
-  }
-
-  .datepicker-preset:hover {
-    background-color: var(--bg-hover);
-  }
-
-  .datepicker-preset:focus-visible {
-    outline: var(--border-width-xl) 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);
-  }
-}
-