@cdx-ui/components 0.2.5 → 0.3.0

package/src/components/Calendar/CalendarYearPickerGrid.tsx

@@ -1,27 +1,32 @@
-import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { forwardRef, useCallback, useMemo, useState, type ComponentRef } from 'react';
 import { Pressable, Text, View, type ViewProps } from 'react-native';
 import {
   formatMonthId,
   formatSelectYear,
+  parseDateId,
   parseMonthId,
   resolveDateComponentLabels,
   type DateComponentLabels,
+  type DateId,
   type MonthId,
 } from '@cdx-ui/formatters';
 import { cn } from '@cdx-ui/utils';
+import { CalendarYearList, getYearRange } from './CalendarYearList';
 import type { CalendarNavigationView } from './CalendarMonthHeader';
+import { getFlashCalendarGridHeight } from './flashCalendarAdapter';
 import {
   calendarPillCellTextVariants,
   calendarPillCellVariants,
-  calendarYearPickerGridVariants,
+  calendarYearPickerListVariants,
 } from './styles';
 
-const YEAR_RANGE_BEFORE = 9;
-const YEAR_RANGE_AFTER = 11;
-
 export interface CalendarYearPickerGridProps extends ViewProps {
   monthId: MonthId;
   onMonthIdChange: (monthId: MonthId) => void;
+  /** Earliest selectable date; its year is the first year listed. */
+  minValue?: DateId;
+  /** Latest selectable date; its year is the last year listed. */
+  maxValue?: DateId;
   disabled?: boolean;
   onViewChange: (view: CalendarNavigationView) => void;
   labels?: Partial<DateComponentLabels>;
@@ -35,6 +40,8 @@ export const CalendarYearPickerGrid = forwardRef<
     {
       monthId,
       onMonthIdChange,
+      minValue,
+      maxValue,
       disabled = false,
       onViewChange,
       labels: labelsProp,
@@ -45,54 +52,74 @@ export const CalendarYearPickerGrid = forwardRef<
     ref,
   ) => {
     const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const [todayYear] = useState(() => new Date().getFullYear());
     const parts = parseMonthId(monthId);
-    const currentYear = parts?.year ?? new Date().getFullYear();
+    const currentYear = parts?.year ?? todayYear;
     const currentMonth = parts?.month ?? 1;
+    const minParts = minValue ? parseDateId(minValue) : null;
+    const maxParts = maxValue ? parseDateId(maxValue) : null;
+    const minYear = minParts?.year;
+    const minMonth = minParts?.month;
+    const maxYear = maxParts?.year;
+    const maxMonth = maxParts?.month;
 
-    const years = useMemo(
-      () =>
-        Array.from(
-          { length: YEAR_RANGE_BEFORE + YEAR_RANGE_AFTER + 1 },
-          (_, i) => currentYear - YEAR_RANGE_BEFORE + i,
-        ),
-      [currentYear],
-    );
+    const { first, last } = getYearRange(minYear, maxYear, currentYear, todayYear);
+
+    // Matches the day grid so switching views does not change the Calendar's height.
+    const height = getFlashCalendarGridHeight(monthId);
 
     const selectYear = useCallback(
       (year: number) => {
         if (disabled) {
           return;
         }
-        onMonthIdChange(formatMonthId({ year, month: currentMonth }));
+        let month = currentMonth;
+        if (minYear === year && minMonth !== undefined) {
+          month = Math.max(month, minMonth);
+        }
+        if (maxYear === year && maxMonth !== undefined) {
+          month = Math.min(month, maxMonth);
+        }
+        onMonthIdChange(formatMonthId({ year, month }));
         onViewChange('month');
       },
-      [currentMonth, disabled, onMonthIdChange, onViewChange],
+      [currentMonth, disabled, maxMonth, maxYear, minMonth, minYear, onMonthIdChange, onViewChange],
+    );
+
+    const renderYear = useCallback(
+      (year: number) => {
+        const selected = year === currentYear;
+        return (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityState={{ selected, disabled }}
+            accessibilityLabel={formatSelectYear(labels, year)}
+            disabled={disabled}
+            onPress={() => selectYear(year)}
+            className={calendarPillCellVariants({ selected, disabled })}
+          >
+            <Text className={calendarPillCellTextVariants({ selected })}>{String(year)}</Text>
+          </Pressable>
+        );
+      },
+      [currentYear, disabled, labels, selectYear],
     );
 
     return (
       <View
         ref={ref}
-        className={cn(calendarYearPickerGridVariants(), className)}
+        className={cn(calendarYearPickerListVariants(), className)}
         style={style}
         accessibilityRole="none"
         {...props}
       >
-        {years.map((year) => {
-          const selected = year === currentYear;
-          return (
-            <Pressable
-              key={year}
-              accessibilityRole="button"
-              accessibilityState={{ selected, disabled }}
-              accessibilityLabel={formatSelectYear(labels, year)}
-              disabled={disabled}
-              onPress={() => selectYear(year)}
-              className={calendarPillCellVariants({ selected, disabled })}
-            >
-              <Text className={calendarPillCellTextVariants({ selected })}>{String(year)}</Text>
-            </Pressable>
-          );
-        })}
+        <CalendarYearList
+          first={first}
+          last={last}
+          selectedYear={currentYear}
+          height={height}
+          renderYear={renderYear}
+        />
       </View>
     );
   },

package/src/components/Calendar/flashCalendarAdapter.ts

@@ -6,6 +6,9 @@ import { formatDateId, parseMonthId, type DateId, type MonthId } from '@cdx-ui/f
 const DAY_SIZE = 36;
 const DAY_RADIUS = DAY_SIZE / 2;
 
+/** Bottom padding the theme adds under the weekday header row (`rowWeek.container`). */
+const WEEK_HEADER_PADDING_BOTTOM = 4;
+
 const CALENDAR_COLOR_VARS = [
   '--color-surface-action-strong',
   '--color-content-action-on-strong',
@@ -159,7 +162,7 @@ export function useFlashCalendarTheme(selectedDateId?: DateId): CalendarTheme {
       },
       rowWeek: {
         container: {
-          paddingBottom: 4,
+          paddingBottom: WEEK_HEADER_PADDING_BOTTOM,
         },
       },
       itemWeekName: {
@@ -249,7 +252,7 @@ export function useFlashCalendarRangeTheme(range?: {
       },
       rowWeek: {
         container: {
-          paddingBottom: 4,
+          paddingBottom: WEEK_HEADER_PADDING_BOTTOM,
         },
       },
       itemWeekName: {
@@ -348,6 +351,28 @@ export const FLASH_CALENDAR_RANGE_DAY_SPACING = 0;
 
 export const FLASH_CALENDAR_DAY_HEIGHT = DAY_SIZE;
 
+export const FLASH_CALENDAR_WEEK_HEADER_HEIGHT = 28;
+
+export const FLASH_CALENDAR_ROW_VERTICAL_SPACING = 4;
+
+/**
+ * Rendered height of the Flash Calendar month grid for `monthId`, derived from the same layout
+ * values passed to Flash Calendar (zero-height month row, weekday header, one row per week with
+ * Sunday as the first day). Lets the year view match the day view without measuring.
+ */
+export function getFlashCalendarGridHeight(monthId: MonthId): number {
+  const parts = parseMonthId(monthId);
+  const firstWeekday = parts ? new Date(parts.year, parts.month - 1, 1).getDay() : 0;
+  const daysInMonth = parts ? new Date(parts.year, parts.month, 0).getDate() : 31;
+  const weekCount = Math.ceil((firstWeekday + daysInMonth) / 7);
+  return (
+    FLASH_CALENDAR_WEEK_HEADER_HEIGHT +
+    WEEK_HEADER_PADDING_BOTTOM +
+    weekCount * FLASH_CALENDAR_DAY_HEIGHT +
+    (weekCount + 1) * FLASH_CALENDAR_ROW_VERTICAL_SPACING
+  );
+}
+
 export function formatFlashCalendarWeekdayShort(date: Date, locale: string): string {
   return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
 }

package/src/components/Calendar/index.tsx

@@ -15,6 +15,8 @@ import { CalendarMonthHeader } from './CalendarMonthHeader';
 import { CalendarYearPickerGrid } from './CalendarYearPickerGrid';
 import {
   FLASH_CALENDAR_DAY_HEIGHT,
+  FLASH_CALENDAR_ROW_VERTICAL_SPACING,
+  FLASH_CALENDAR_WEEK_HEADER_HEIGHT,
   formatFlashCalendarWeekdayShort,
   getMonthDateIds,
   toCalendarDateId,
@@ -143,8 +145,8 @@ const CalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }
         calendarDisabledDateIds={unavailableDateIds}
         calendarMonthHeaderHeight={0}
         calendarDayHeight={FLASH_CALENDAR_DAY_HEIGHT}
-        calendarWeekHeaderHeight={28}
-        calendarRowVerticalSpacing={4}
+        calendarWeekHeaderHeight={FLASH_CALENDAR_WEEK_HEADER_HEIGHT}
+        calendarRowVerticalSpacing={FLASH_CALENDAR_ROW_VERTICAL_SPACING}
         calendarRowHorizontalSpacing={4}
         getCalendarMonthFormat={() => ''}
         getCalendarWeekDayFormat={formatWeekday}
@@ -158,12 +160,15 @@ const CalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }
 CalendarGrid.displayName = 'Calendar.Grid';
 
 const CalendarYearPicker = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
-  const { monthId, onMonthIdChange, disabled, setView, labels } = useCalendarContext();
+  const { monthId, onMonthIdChange, minValue, maxValue, disabled, setView, labels } =
+    useCalendarContext();
   return (
     <CalendarYearPickerGrid
       ref={ref}
       monthId={monthId}
       onMonthIdChange={onMonthIdChange}
+      minValue={minValue}
+      maxValue={maxValue}
       disabled={disabled}
       onViewChange={setView}
       labels={labels}

package/src/components/Calendar/styles.ts

@@ -31,12 +31,28 @@ export const calendarMonthHeaderIconVariants = cva('size-5 shrink-0', {
   defaultVariants: { isYearView: false },
 });
 
-export const calendarMonthHeaderNavVariants = cva('flex-row items-center gap-1');
+export const calendarMonthHeaderNavVariants = cva('flex-row items-center gap-1', {
+  variants: {
+    hidden: {
+      true: 'opacity-0',
+      false: '',
+    },
+  },
+  defaultVariants: { hidden: false },
+});
 
 export const calendarYearPickerGridVariants = cva(
   'flex-row flex-wrap justify-between gap-y-2 px-1 py-1',
 );
 
+export const calendarYearPickerListVariants = cva('w-full');
+
+export const calendarYearPickerListContentVariants = cva('px-1');
+
+export const calendarYearPickerRowVariants = cva('flex-row items-center justify-between');
+
+export const calendarYearPickerPlaceholderVariants = cva('w-[31%]');
+
 export const calendarPillCellVariants = cva(
   'my-0.5 w-[31%] items-center justify-center rounded-[var(--border-radius-round)] py-2.5',
   {

package/src/components/MonthCalendar/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useMemo, type ReactNode } from 'react';
+import { forwardRef, useCallback, useState, type ReactNode } from 'react';
 import { Pressable, Text, View, type ViewProps } from 'react-native';
 import {
   dataAttributes,
@@ -21,6 +21,7 @@ import { cn } from '@cdx-ui/utils';
 import { ChevronLeft, ChevronRight, KeyboardArrowDown } from '@cdx-ui/icons';
 import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
+import { CalendarYearList, getYearRange, YEAR_ROW_HEIGHT } from '../Calendar/CalendarYearList';
 import {
   calendarMonthHeaderIconVariants,
   calendarMonthHeaderLabelVariants,
@@ -31,8 +32,16 @@ import {
   calendarPillCellVariants,
   calendarRootVariants,
   calendarYearPickerGridVariants,
+  calendarYearPickerListVariants,
 } from '../Calendar/styles';
 
+// The month grid's four rows of pill cells, so the year view matches its height.
+const MONTH_GRID_HEIGHT = 4 * YEAR_ROW_HEIGHT;
+
+function renderYearCell(year: number) {
+  return <MonthCalendarYearCell year={year} />;
+}
+
 export interface MonthCalendarProps
   extends Omit<MonthCalendarRootProps, 'children'>, Omit<ViewProps, 'children'> {
   className?: string;
@@ -109,28 +118,35 @@ const MonthCalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...
         />
       </Pressable>
 
-      {!isYearView ? (
-        <View className={calendarMonthHeaderNavVariants()}>
-          <IconButton
-            as={ChevronLeft}
-            variant="ghost"
-            color="neutral"
-            size="small"
-            accessibilityLabel={labels.previousYear}
-            isDisabled={disabled}
-            onPress={() => shiftYear(-1)}
-          />
-          <IconButton
-            as={ChevronRight}
-            variant="ghost"
-            color="neutral"
-            size="small"
-            accessibilityLabel={labels.nextYear}
-            isDisabled={disabled}
-            onPress={() => shiftYear(1)}
-          />
-        </View>
-      ) : null}
+      {/* Stays mounted in the year view so the header keeps its height and the label does not move. */}
+      <View
+        className={calendarMonthHeaderNavVariants({ hidden: isYearView })}
+        pointerEvents={isYearView ? 'none' : 'auto'}
+        accessibilityElementsHidden={isYearView}
+        importantForAccessibility={isYearView ? 'no-hide-descendants' : 'auto'}
+        {...(isYearView ? { 'aria-hidden': true } : {})}
+      >
+        <IconButton
+          as={ChevronLeft}
+          variant="ghost"
+          color="neutral"
+          size="small"
+          accessibilityLabel={labels.previousYear}
+          isDisabled={disabled || isYearView}
+          focusable={!isYearView}
+          onPress={() => shiftYear(-1)}
+        />
+        <IconButton
+          as={ChevronRight}
+          variant="ghost"
+          color="neutral"
+          size="small"
+          accessibilityLabel={labels.nextYear}
+          isDisabled={disabled || isYearView}
+          focusable={!isYearView}
+          onPress={() => shiftYear(1)}
+        />
+      </View>
     </View>
   );
 });
@@ -138,25 +154,31 @@ const MonthCalendarHeader = forwardRef<View, ViewProps>(({ className, style, ...
 MonthCalendarHeader.displayName = 'MonthCalendar.Header';
 
 const MonthCalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...props }, ref) => {
-  const { view, visibleYear } = useMonthCalendarContext();
-
-  const years = useMemo(
-    () => Array.from({ length: 12 }, (_, i) => visibleYear - 5 + i),
-    [visibleYear],
-  );
+  const { view, visibleYear, minValue, maxValue } = useMonthCalendarContext();
+  const [todayYear] = useState(() => new Date().getFullYear());
 
   if (view === 'year') {
+    const { first, last } = getYearRange(
+      minValue ? parseMonthId(minValue)?.year : undefined,
+      maxValue ? parseMonthId(maxValue)?.year : undefined,
+      visibleYear,
+      todayYear,
+    );
     return (
       <View
         ref={ref}
-        className={cn(calendarYearPickerGridVariants(), className)}
+        className={cn(calendarYearPickerListVariants(), className)}
         style={style}
         accessibilityRole="none"
         {...props}
       >
-        {years.map((year) => (
-          <MonthCalendarYearCell key={year} year={year} />
-        ))}
+        <CalendarYearList
+          first={first}
+          last={last}
+          selectedYear={visibleYear}
+          height={MONTH_GRID_HEIGHT}
+          renderYear={renderYearCell}
+        />
       </View>
     );
   }

package/src/components/RangeCalendar/index.tsx

@@ -14,6 +14,8 @@ import { CalendarYearPickerGrid } from '../Calendar/CalendarYearPickerGrid';
 import {
   FLASH_CALENDAR_DAY_HEIGHT,
   FLASH_CALENDAR_RANGE_DAY_SPACING,
+  FLASH_CALENDAR_ROW_VERTICAL_SPACING,
+  FLASH_CALENDAR_WEEK_HEADER_HEIGHT,
   formatFlashCalendarWeekdayShort,
   toCalendarDateId,
   useFlashCalendarRangeTheme,
@@ -78,12 +80,15 @@ RangeCalendarHeader.displayName = 'RangeCalendar.Header';
 
 const RangeCalendarYearPicker = forwardRef<View, ViewProps>(
   ({ className, style, ...props }, ref) => {
-    const { monthId, onMonthIdChange, disabled, setView, labels } = useRangeCalendarContext();
+    const { monthId, onMonthIdChange, minValue, maxValue, disabled, setView, labels } =
+      useRangeCalendarContext();
     return (
       <CalendarYearPickerGrid
         ref={ref}
         monthId={monthId}
         onMonthIdChange={onMonthIdChange}
+        minValue={minValue}
+        maxValue={maxValue}
         disabled={disabled}
         onViewChange={setView}
         labels={labels}
@@ -137,8 +142,8 @@ const RangeCalendarGrid = forwardRef<View, ViewProps>(({ className, style, ...pr
         calendarMaxDateId={maxValue}
         calendarMonthHeaderHeight={0}
         calendarDayHeight={FLASH_CALENDAR_DAY_HEIGHT}
-        calendarWeekHeaderHeight={28}
-        calendarRowVerticalSpacing={4}
+        calendarWeekHeaderHeight={FLASH_CALENDAR_WEEK_HEADER_HEIGHT}
+        calendarRowVerticalSpacing={FLASH_CALENDAR_ROW_VERTICAL_SPACING}
         calendarRowHorizontalSpacing={FLASH_CALENDAR_RANGE_DAY_SPACING}
         getCalendarMonthFormat={() => ''}
         getCalendarWeekDayFormat={formatWeekday}