@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/calendar/Calendar.scss

@@ -1,57 +0,0 @@
-@use "@chassis-ui/css/scss/config" as *;
-@use "@chassis-ui/css/scss/mixins" as *;
-
-/*
- * `Calendar` reuses chassis-css's `.datepicker-*` classes, so layout/arrows/header/today/disabled/
- * focus styling already comes from `@chassis-ui/css`. This file only covers the gaps: states
- * vanilla-calendar-pro exposes via `data-vc-date-*` (no react-aria equivalent, re-expressed as
- * `.datepicker-date-*` classes) and the month/year picker, which chassis-css styles via attribute
- * selectors this component doesn't have.
- */
-
-@layer components {
-  .datepicker-body {
-    position: relative;
-  }
-
-  .datepicker-months-month.selected,
-  .datepicker-years-year.selected {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-
-  .datepicker-months-month.selected:hover,
-  .datepicker-years-year.selected:hover {
-    background-color: var(--primary);
-  }
-
-  /* Leading/trailing days from the adjacent month */
-  .datepicker-date-outside > .datepicker-date-btn {
-    color: var(--day-disabled-fg-color);
-  }
-
-  /* Weekend, muted unless selected/unavailable/disabled takes priority. `:where()` keeps these
-     guards from adding specificity over chassis-css's "today" rule. */
-  .datepicker-date-weekend:where(:not(.datepicker-date-selected):not(.datepicker-date-unavailable)) > .datepicker-date-btn:where(:not([aria-disabled="true"])) {
-    color: var(--fg-subtle);
-  }
-
-  /* Unavailable (`isDateUnavailable`) — focusable and announced, unlike native disabled. */
-  .datepicker-date-unavailable:where(:not(.datepicker-date-selected)) > .datepicker-date-btn {
-    color: var(--day-disabled-fg-color);
-    text-decoration: line-through;
-  }
-
-  /* Selected (single-date only; `RangeCalendar.scss` handles start/end/in-range). */
-  .datepicker-date-selected > .datepicker-date-btn {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-
-  /* Extra `.datepicker-date` qualifier wins the specificity tie with chassis-css's "today" rule
-     when a date is both selected and today. */
-  .datepicker-date-selected.datepicker-date[aria-current="date"] > .datepicker-date-btn {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-}

package/src/components/calendar/Calendar.tsx

@@ -1,338 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useMemo, useRef, useState } from 'react'
-import classNames from 'classnames'
-import { AriaCalendarProps, mergeProps, useCalendar, useCalendarCell, useLocale } from 'react-aria'
-import { CalendarState as StatelyCalendarState, DateValue, useCalendarState } from 'react-stately'
-import {
-  CalendarDate,
-  createCalendar,
-  getLocalTimeZone,
-  isToday,
-  isWeekend,
-  today
-} from '@internationalized/date'
-
-import { useForkedRef } from '../../hooks'
-import { CalendarMonthBlock } from './CalendarMonthBlock'
-import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
-import { CalendarNavButton } from './CalendarNavButton'
-import { CalendarWeekGrid } from './CalendarWeekGrid'
-import { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'
-import './Calendar.scss'
-import { CalendarLabels, CalendarLabelsProvider } from './labels'
-
-interface CalendarBaseProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'defaultValue'
-> {
-  /**
-   * An accessible label for the calendar, used when there's no visible label. Required for
-   * standalone use — a calendar grid has no other accessible name of its own.
-   */
-  'aria-label'?: string
-  /**
-   * Identifies a visible label element for the calendar.
-   */
-  'aria-labelledby'?: string
-  /**
-   * Whether to automatically focus the calendar when it mounts.
-   */
-  autoFocus?: boolean
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Prevents the calendar from being focused or interacted with.
-   */
-  disabled?: boolean
-  /**
-   * The day that starts the week, overriding the default set by the active locale.
-   *
-   * @default 'mon'
-   */
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
-  /**
-   * Callback that is called for each date in the calendar. If it returns `true`, that date is
-   * shown but cannot be selected.
-   */
-  isDateUnavailable?: (date: DateValue) => boolean
-  /**
-   * Overrides for the handful of strings this component renders itself rather than getting from
-   * the active locale (the year view's paging arrows, its live-region announcements, and the
-   * month/year header buttons). Everything else — month and weekday names, the calendar system —
-   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
-   * defaults, so passing one key leaves the rest alone.
-   */
-  labels?: Partial<CalendarLabels>
-  /**
-   * The maximum allowed date that a user may select.
-   */
-  maxValue?: DateValue | null
-  /**
-   * The minimum allowed date that a user may select.
-   */
-  minValue?: DateValue | null
-  /**
-   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
-   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
-   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
-   */
-  unavailableDates?: string[]
-  /**
-   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
-   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is
-   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
-   * where the calendar is embedded.
-   *
-   * @default 1
-   */
-  visibleMonths?: number
-}
-
-export interface CalendarSingleProps extends CalendarBaseProps {
-  /**
-   * The initial selected date (uncontrolled).
-   */
-  defaultValue?: DateValue | null
-  /**
-   * Callback fired when the selected date changes. Unlike `DatePicker`'s `onChange` (whose
-   * segmented field can be cleared to `null`), a calendar selection is always a concrete date.
-   */
-  onChange?: (value: DateValue) => void
-  /**
-   * Whether a single date or multiple, independently toggled dates can be selected.
-   *
-   * @default 'single'
-   */
-  selectionMode?: 'single'
-  /**
-   * The selected date (controlled).
-   */
-  value?: DateValue | null
-}
-
-export interface CalendarMultipleProps extends CalendarBaseProps {
-  /**
-   * The initial selected dates (uncontrolled).
-   */
-  defaultValue?: DateValue[] | null
-  /**
-   * Callback fired when the set of selected dates changes.
-   */
-  onChange?: (value: DateValue[]) => void
-  /**
-   * Whether a single date or multiple, independently toggled dates can be selected.
-   *
-   * @default 'single'
-   */
-  selectionMode: 'multiple'
-  /**
-   * The selected dates (controlled).
-   */
-  value?: DateValue[] | null
-}
-
-export type CalendarProps = CalendarSingleProps | CalendarMultipleProps
-
-// Public, standalone calendar grid — also used internally by `DatePicker` to render the grid
-// inside its popover. Deliberately has no knowledge of dialog/popover semantics (role="dialog",
-// focus trapping, etc.) — that's the caller's concern, layered on via the `...rest` passthrough
-// below (see `DatePicker`, which merges its own `useDialog` output in this way).
-//
-// `selectionMode` is a discriminated union on the public props (single vs. multiple value/
-// onChange shapes), bridged onto one underlying `useCalendarState`/`useCalendar` call instantiated
-// over the union of both modes — react-stately/react-aria are natively selection-mode-aware at
-// that layer (including `useCalendarCell`'s `isSelected`), so no custom multi-select logic is
-// needed here, just narrow, provably-safe casts at the seam between the public union and the
-// single generic call (react-stately always reports/expects the value shape matching whichever
-// `selectionMode` was actually passed in).
-export const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwardedRef) => {
-  const {
-    autoFocus,
-    className,
-    defaultValue,
-    disabled,
-    firstDayOfWeek = 'mon',
-    isDateUnavailable,
-    labels,
-    maxValue,
-    minValue,
-    onChange,
-    selectionMode = 'single',
-    unavailableDates,
-    value,
-    visibleMonths = 1,
-    ...rest
-  } = props
-
-  const { locale } = useLocale()
-  const internalRef = useRef<HTMLDivElement>(null)
-  const ref = useForkedRef(internalRef, forwardedRef)
-  const combinedIsDateUnavailable = useMemo(
-    () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),
-    [unavailableDates, isDateUnavailable]
-  )
-  // Tracks each visible month block's own view, keyed by `monthIndex` — same reasoning as
-  // `RangeCalendar`'s identical state: needed only to know whether *any* block has switched
-  // away from the day grid, so the global `.datepicker-controls` overlay can hide itself rather
-  // than sit on top of `CalendarYearGrid`'s own pager.
-  const [monthViews, setMonthViews] = useState<Record<number, 'days' | 'months' | 'years'>>({})
-  const hasPickerView = Object.values(monthViews).some((view) => view !== 'days')
-
-  const handleChange = (next: DateValue | readonly DateValue[]) => {
-    if (selectionMode === 'multiple') {
-      ;(onChange as ((value: DateValue[]) => void) | undefined)?.(next as DateValue[])
-    } else {
-      ;(onChange as ((value: DateValue) => void) | undefined)?.(next as DateValue)
-    }
-  }
-  const normalizedValue = value as DateValue | readonly DateValue[] | null | undefined
-  const normalizedDefaultValue = defaultValue as DateValue | readonly DateValue[] | null | undefined
-  // react-stately's `useCalendarState` crashes computing the initial focused date for
-  // `selectionMode: 'multiple'` when the (controlled or default) value is a genuinely empty
-  // array — its own fallback-to-today logic only runs when the value is nullish, but an empty
-  // array is truthy, so it instead indexes the (nonexistent) first element and calls `.subtract`
-  // on the resulting `undefined`. Supplying `defaultFocusedValue` ourselves in exactly that case
-  // short-circuits react-stately's logic before it ever reaches the buggy branch, without
-  // affecting the normal "focus follows the selection" behavior whenever there is one.
-  const resolvedValue = normalizedValue !== undefined ? normalizedValue : normalizedDefaultValue
-  const defaultFocusedValue =
-    selectionMode === 'multiple' && Array.isArray(resolvedValue) && resolvedValue.length === 0
-      ? today(getLocalTimeZone())
-      : undefined
-
-  const state = useCalendarState<DateValue, 'single' | 'multiple'>({
-    autoFocus,
-    createCalendar,
-    defaultFocusedValue,
-    defaultValue: normalizedDefaultValue,
-    firstDayOfWeek,
-    isDateUnavailable: combinedIsDateUnavailable,
-    isDisabled: disabled,
-    locale,
-    maxValue,
-    minValue,
-    onChange: handleChange,
-    // Prev/next always slide the visible window by one month, regardless of `visibleMonths` —
-    // same reasoning as `RangeCalendar`'s identical setting (see that component's own comment).
-    pageBehavior: 'single',
-    selectionMode,
-    value: normalizedValue,
-    visibleDuration: { months: visibleMonths }
-  })
-
-  const ariaProps: AriaCalendarProps<DateValue, 'single' | 'multiple'> = {
-    'aria-label': rest['aria-label'],
-    'aria-labelledby': rest['aria-labelledby'],
-    autoFocus,
-    defaultFocusedValue,
-    defaultValue: normalizedDefaultValue,
-    isDateUnavailable: combinedIsDateUnavailable,
-    isDisabled: disabled,
-    maxValue,
-    minValue,
-    onChange: handleChange,
-    selectionMode,
-    value: normalizedValue
-  }
-
-  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(ariaProps, state)
-  const prevButton = <CalendarNavButton buttonProps={prevButtonProps} direction="prev" />
-  const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction="next" />
-
-  return (
-    <CalendarLabelsProvider labels={labels}>
-      <div
-        {...mergeProps(calendarProps, rest)}
-        className={classNames('datepicker', className)}
-        data-cx-inline="true"
-        ref={ref}
-      >
-        {visibleMonths === 1 ? (
-          <CalendarMonthYearPicker
-            monthStart={state.visibleRange.start}
-            nextArrow={nextButton}
-            prevArrow={prevButton}
-            state={state}
-          >
-            <CalendarWeekGrid
-              firstDayOfWeek={firstDayOfWeek}
-              renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
-              state={state}
-            />
-          </CalendarMonthYearPicker>
-        ) : (
-          <>
-            {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in
-              chassis-css, so this overlay needs no extra positioning wrapper of its own — unlike
-              `RangeCalendar`, which has a `presets` column sharing that root and so scopes its
-              own copy of this overlay to a nested `.datepicker-body` instead. */}
-            {!hasPickerView && (
-              <div className="datepicker-controls">
-                {prevButton}
-                {nextButton}
-              </div>
-            )}
-            <div className="datepicker-grid">
-              {[...new Array(visibleMonths).keys()].map((monthIndex) => (
-                <CalendarMonthBlock
-                  firstDayOfWeek={firstDayOfWeek}
-                  key={monthIndex}
-                  monthIndex={monthIndex}
-                  onViewChange={(view) =>
-                    setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))
-                  }
-                  renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
-                  state={state}
-                />
-              ))}
-            </div>
-          </>
-        )}
-      </div>
-    </CalendarLabelsProvider>
-  )
-})
-
-Calendar.displayName = 'Calendar'
-
-type CalendarState = StatelyCalendarState<'single' | 'multiple'>
-
-interface CalendarCellProps {
-  date: CalendarDate
-  locale: string
-  state: CalendarState
-}
-
-const CalendarCell = ({ date, locale, state }: CalendarCellProps) => {
-  const ref = useRef<HTMLButtonElement>(null)
-  const {
-    cellProps,
-    buttonProps,
-    isSelected,
-    isOutsideVisibleRange,
-    isDisabled,
-    isUnavailable,
-    formattedDate
-  } = useCalendarCell({ date }, state, ref)
-  const isCurrentDate = isToday(date, getLocalTimeZone())
-
-  return (
-    <div
-      {...cellProps}
-      aria-current={isCurrentDate ? 'date' : undefined}
-      className={classNames('datepicker-date', {
-        'datepicker-date-selected': isSelected,
-        'datepicker-date-today': isCurrentDate,
-        'datepicker-date-outside': isOutsideVisibleRange,
-        'datepicker-date-disabled': isDisabled,
-        'datepicker-date-unavailable': isUnavailable,
-        'datepicker-date-weekend': isWeekend(date, locale)
-      })}
-    >
-      <button {...buttonProps} type="button" className="datepicker-date-btn" ref={ref}>
-        {formattedDate}
-      </button>
-    </div>
-  )
-}

package/src/components/calendar/CalendarMonthBlock.tsx

@@ -1,57 +0,0 @@
-import React, { ReactNode } from 'react'
-import { CalendarState, RangeCalendarState } from 'react-stately'
-import { CalendarDate } from '@internationalized/date'
-
-import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
-import { CalendarWeekGrid } from './CalendarWeekGrid'
-
-interface CalendarMonthBlockProps {
-  // `null`/omitted 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.
-  arrows?: { next: ReactNode; prev: ReactNode } | null
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
-  monthIndex: number
-  onViewChange: (view: 'days' | 'months' | 'years') => void
-  // The individual cell differs between `Calendar` and `RangeCalendar` (range selection needs
-  // start/end/in-between pill state a single-date cell has no equivalent for), so cell rendering
-  // is left to the caller — same shape `CalendarWeekGrid` itself already expects.
-  renderCell: (date: CalendarDate, index: number, week: (CalendarDate | null)[]) => ReactNode
-  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
-}
-
-// One visible month within `visibleMonths` — shared by `Calendar` and `RangeCalendar`, which
-// otherwise duplicated this wiring near-verbatim. `monthIndex` is the offset of this block's own
-// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`
-// (inside `CalendarMonthYearPicker`) land a pick correctly regardless of which visible block it
-// came from.
-export const CalendarMonthBlock = ({
-  arrows,
-  firstDayOfWeek,
-  monthIndex,
-  onViewChange,
-  renderCell,
-  state
-}: CalendarMonthBlockProps) => {
-  const monthStart = state.visibleRange.start.add({ months: monthIndex })
-
-  return (
-    <>
-      <CalendarMonthYearPicker
-        monthIndex={monthIndex}
-        monthStart={monthStart}
-        nextArrow={arrows?.next}
-        onViewChange={onViewChange}
-        prevArrow={arrows?.prev}
-        state={state}
-      >
-        <CalendarWeekGrid
-          firstDayOfWeek={firstDayOfWeek}
-          renderCell={renderCell}
-          startDate={monthStart}
-          state={state}
-        />
-      </CalendarMonthYearPicker>
-    </>
-  )
-}

package/src/components/calendar/CalendarMonthGrid.tsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import { useDateFormatter } from 'react-aria'
-import { CalendarState, RangeCalendarState } from 'react-stately'
-import { CalendarDate } from '@internationalized/date'
-
-import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
-import { useCalendarLabels } from './labels'
-
-interface CalendarMonthGridProps {
-  // 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 doesn't fire one
-  // simultaneous announcement per block.
-  announce?: boolean
-  monthStart: CalendarDate
-  onBack: () => void
-  onSelect: (date: CalendarDate) => void
-  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
-}
-
-// The month view of `CalendarMonthYearPicker` — every month in `monthStart`'s own year, laid out
-// as a static 3-column grid (no paging; picking a different year is the year view's job).
-export const CalendarMonthGrid = ({
-  announce = true,
-  monthStart,
-  onBack,
-  onSelect,
-  state
-}: CalendarMonthGridProps) => {
-  const labels = useCalendarLabels()
-  const monthFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    month: 'short',
-    timeZone: state.timeZone
-  })
-  const yearFormatter = useDateFormatter({
-    calendar: monthStart.calendar.identifier,
-    timeZone: state.timeZone,
-    year: 'numeric'
-  })
-
-  const numMonths = monthStart.calendar.getMonthsInYear(monthStart)
-  const months = [...new Array(numMonths).keys()].map((i) => {
-    const date = monthStart.set({ day: 1, month: i + 1 })
-    return { date, formatted: monthFormatter.format(date.toDate(state.timeZone)) }
-  })
-
-  return (
-    <>
-      <div className="datepicker-header">
-        <div className="datepicker-header-content">
-          <button className="datepicker-month" onClick={onBack} type="button">
-            {yearFormatter.format(monthStart.toDate(state.timeZone))}
-          </button>
-        </div>
-      </div>
-      {announce && (
-        <span role="status" className="visually-hidden">
-          {`${labels.selectMonth}, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
-        </span>
-      )}
-      <div className="datepicker-content">
-        <div
-          aria-label={yearFormatter.format(monthStart.toDate(state.timeZone))}
-          className="datepicker-months"
-          role="group"
-        >
-          {months.map((month) => {
-            const isSelected = month.date.month === monthStart.month
-            const isDisabled = isWholeUnitDisabled(
-              state,
-              month.date,
-              month.date.add({ months: 1 }).subtract({ days: 1 })
-            )
-
-            return (
-              <button
-                aria-current={isSelected ? 'true' : undefined}
-                className={classNames('datepicker-months-month', { selected: isSelected })}
-                disabled={isDisabled}
-                key={month.date.month}
-                onClick={() => onSelect(month.date)}
-                type="button"
-              >
-                {month.formatted}
-              </button>
-            )
-          })}
-        </div>
-      </div>
-    </>
-  )
-}