@cdx-ui/components 0.2.4 → 0.3.0

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/Stack/HStack.tsx

@@ -1,10 +1,12 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box, type BoxProps } from '../Box';
 import { hStackRootVariants, type StackSpace } from './styles';
 
-export interface HStackProps extends ViewProps {
+export interface HStackProps extends Omit<BoxProps, 'asChild'> {
   className?: string;
   /** Token-based gap between children. */
   space?: StackSpace;
@@ -22,14 +24,16 @@ export const HStack = forwardRef<View, HStackProps>(
     ref: ForwardedRef<View>,
   ) => {
     return (
-      <View
+      <Box
         ref={ref}
         className={cn(hStackRootVariants({ reversed, space }), className)}
         style={style}
         {...restProps}
+        // Caller-supplied data attributes win so components composed on HStack keep their own slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'hstack' }), restProps)}
       >
         {children}
-      </View>
+      </Box>
     );
   },
 );

package/src/components/Stack/VStack.tsx

@@ -1,10 +1,12 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box, type BoxProps } from '../Box';
 import { vStackRootVariants, type StackSpace } from './styles';
 
-export interface VStackProps extends ViewProps {
+export interface VStackProps extends Omit<BoxProps, 'asChild'> {
   className?: string;
   /** Token-based gap between children. */
   space?: StackSpace;
@@ -22,14 +24,16 @@ export const VStack = forwardRef<View, VStackProps>(
     ref: ForwardedRef<View>,
   ) => {
     return (
-      <View
+      <Box
         ref={ref}
         className={cn(vStackRootVariants({ reversed, space }), className)}
         style={style}
         {...restProps}
+        // Caller-supplied data attributes win so components composed on VStack keep their own slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'vstack' }), restProps)}
       >
         {children}
-      </View>
+      </Box>
     );
   },
 );

package/src/index.ts

@@ -1,4 +1,6 @@
 /// <reference types="uniwind/types" preserve="true" />
+import { View as RNView } from 'react-native';
+
 export * from './components';
 export * from './hooks';
 export * from './navigation';
@@ -6,5 +8,10 @@ export { ToastProvider, useToast } from './providers/toast';
 export type * from './providers/toast';
 export { ForgeDesignProvider } from './providers/forge-design';
 export type { ForgeDesignConfig, ForgeDesignProviderProps } from './providers/forge-design';
-export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/** @deprecated Use `Box` instead. */
+export const View = RNView;
+/** @deprecated Use `BoxRef` for refs and `BoxProps` for props instead. */
+export type View = RNView;