@cdx-ui/components 0.2.5 → 0.3.1

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}

package/src/components/Toast/index.tsx

@@ -441,9 +441,18 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
 // --------------------------------------------------
 
 const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
-  const { children, size = 'small', className, onPress, iconClassName, ...restProps } = props;
+  const {
+    children,
+    size = 'small',
+    className,
+    onPress,
+    iconClassName,
+    color: colorProp,
+    as = CloseIcon,
+    ...restProps
+  } = props;
   const { hide, id, color: toastColor } = useToastStyleContext();
-  const usesNeutralStandIn = toastColor === 'neutral';
+  const usesNeutralStandIn = toastColor === 'neutral' && colorProp == null;
 
   /**
    * Handle close button press
@@ -463,12 +472,13 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
     <IconButton
       ref={ref}
       variant="ghost"
+      color={colorProp ?? toastColor}
       size={size}
       aria-label="Close"
       className={cn(usesNeutralStandIn ? toastCloseRootVariants() : undefined, className)}
       iconClassName={cn(usesNeutralStandIn ? toastCloseIconVariants() : undefined, iconClassName)}
       onPress={handlePress}
-      as={CloseIcon}
+      as={as}
       {...restProps}
     />
   );