@cdx-ui/components 0.2.5 → 0.3.0

package/src/components/BottomSheet/index.tsx

@@ -5,6 +5,7 @@ import React, {
   useEffect,
   useId,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   type ReactNode,
@@ -25,15 +26,21 @@ import {
   type BottomSheetModalProps as GorhomBottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
 import { useEscapeKey, useOverlayStackRegistration } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { SheetHeader } from '../sheet-header';
 import {
   bottomSheetBackgroundClassName,
   bottomSheetContentVariants,
   bottomSheetFooterVariants,
   bottomSheetModalContainerClassName,
+  type BottomSheetContentVariantProps,
 } from './styles';
 
+const SCOPE = 'BOTTOM_SHEET';
+
+const useBottomSheetStyleContext = () =>
+  (useStyleContext(SCOPE) ?? {}) as BottomSheetContentVariantProps;
+
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
 
 function useSafeInsets(): EdgeInsets {
@@ -100,13 +107,19 @@ export interface BottomSheetContentProps {
   className?: string;
   /** Adds bottom padding equal to the safe-area inset. */
   hasSafeAreaInset?: boolean;
+  /** Removes horizontal padding. Inherits the parent `BottomSheet.Modal`'s `fullBleed` when omitted. */
+  fullBleed?: BottomSheetContentVariantProps['fullBleed'];
   style?: ViewStyle;
 }
 
 const BottomSheetContent = forwardRef<View, BottomSheetContentProps>(
-  ({ children, className, hasSafeAreaInset, style }, ref) => {
+  ({ children, className, hasSafeAreaInset, fullBleed, style }, ref) => {
     const insets = useSafeInsets();
-    const computedClassName = cn(bottomSheetContentVariants(), className);
+    const { fullBleed: fullBleedFromContext } = useBottomSheetStyleContext();
+    const computedClassName = cn(
+      bottomSheetContentVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
+      className,
+    );
     return (
       <View
         ref={ref}
@@ -162,6 +175,11 @@ export interface BottomSheetModalProps extends GorhomBottomSheetModalProps {
    * Pass it through this prop; a footer placed as a child does not animate with the sheet.
    */
   footer?: ReactNode;
+  /**
+   * Removes `BottomSheet.Content`'s horizontal padding so content can span the sheet edge to edge.
+   * `BottomSheet.Content` inherits this unless it sets its own `fullBleed`. The footer keeps its padding.
+   */
+  fullBleed?: BottomSheetContentVariantProps['fullBleed'];
 }
 
 const MAX_DYNAMIC_CONTENT_SIZE = Dimensions.get('window').height * 0.9;
@@ -185,151 +203,169 @@ const CustomBackground = (props: React.ComponentPropsWithoutRef<typeof View>) =>
 const BottomSheetModalStyled = forwardRef<
   React.ComponentRef<typeof BottomSheetModal>,
   BottomSheetModalProps
->(({ handleVisible = true, footer, onDismiss, onChange, onAnimate, ...rest }, ref) => {
-  const renderFooter = useCallback(
-    (props: GorhomBottomSheetFooterProps) => (
-      <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
-    ),
-    [footer],
-  );
-
-  const modalRef = useRef<BottomSheetModalRef | null>(null);
-  const dismissedRef = useRef(false);
-  const sheetMountedRef = useRef(false);
-  const mountPendingRef = useRef(false);
-  const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
-  const [presented, setPresented] = useState(false);
-
-  // Must stay a callback ref: gorhom hands this ref to its modal provider, which
-  // reads `.current` to minimize and restore stacked sheets. A ref object would
-  // switch that stacking on.
-  const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
-    modalRef.current = instance;
-  }, []);
-
-  // gorhom mounts the sheet a frame after `present()` and silently drops a
-  // `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
-  // it until the sheet mounts keeps the early Escape/back claim releasable.
-  const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
-    if (mountPendingRef.current) {
-      pendingDismissRef.current = args;
-      return;
-    }
-    modalRef.current?.dismiss(...args);
-  }, []);
+>(
+  (
+    { handleVisible = true, footer, fullBleed, children, onDismiss, onChange, onAnimate, ...rest },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { fullBleed } }), [parent, fullBleed]);
+
+    const renderFooter = useCallback(
+      (props: GorhomBottomSheetFooterProps) => (
+        <GorhomBottomSheetFooter {...props}>{footer}</GorhomBottomSheetFooter>
+      ),
+      [footer],
+    );
 
-  const markSheetMounted = useCallback(() => {
-    sheetMountedRef.current = true;
-    if (!mountPendingRef.current) return;
-    mountPendingRef.current = false;
-    const pendingDismiss = pendingDismissRef.current;
-    pendingDismissRef.current = null;
-    if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
-  }, []);
+    const modalRef = useRef<BottomSheetModalRef | null>(null);
+    const dismissedRef = useRef(false);
+    const sheetMountedRef = useRef(false);
+    const mountPendingRef = useRef(false);
+    const pendingDismissRef = useRef<Parameters<BottomSheetModalRef['dismiss']> | null>(null);
+    const [presented, setPresented] = useState(false);
+
+    // Must stay a callback ref: gorhom hands this ref to its modal provider, which
+    // reads `.current` to minimize and restore stacked sheets. A ref object would
+    // switch that stacking on.
+    const setModalRef = useCallback((instance: BottomSheetModalRef | null) => {
+      modalRef.current = instance;
+    }, []);
+
+    // gorhom mounts the sheet a frame after `present()` and silently drops a
+    // `dismiss()` that arrives before then, never reporting `onDismiss`. Holding
+    // it until the sheet mounts keeps the early Escape/back claim releasable.
+    const dismissSheet = useCallback((...args: Parameters<BottomSheetModalRef['dismiss']>) => {
+      if (mountPendingRef.current) {
+        pendingDismissRef.current = args;
+        return;
+      }
+      modalRef.current?.dismiss(...args);
+    }, []);
+
+    const markSheetMounted = useCallback(() => {
+      sheetMountedRef.current = true;
+      if (!mountPendingRef.current) return;
+      mountPendingRef.current = false;
+      const pendingDismiss = pendingDismissRef.current;
+      pendingDismissRef.current = null;
+      if (pendingDismiss) modalRef.current?.dismiss(...pendingDismiss);
+    }, []);
+
+    // `present()` claims Escape and back immediately; waiting for the first
+    // `onChange` would leave the overlay beneath in charge for the whole open animation.
+    useImperativeHandle(
+      ref,
+      (): BottomSheetModalRef => ({
+        present: (...args) => {
+          dismissedRef.current = false;
+          if (!sheetMountedRef.current) mountPendingRef.current = true;
+          setPresented(true);
+          modalRef.current?.present(...args);
+        },
+        dismiss: dismissSheet,
+        snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
+        snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
+        expand: (...args) => modalRef.current?.expand(...args),
+        collapse: (...args) => modalRef.current?.collapse(...args),
+        close: (...args) => modalRef.current?.close(...args),
+        forceClose: (...args) => modalRef.current?.forceClose(...args),
+      }),
+      [dismissSheet],
+    );
 
-  // `present()` claims Escape and back immediately; waiting for the first
-  // `onChange` would leave the overlay beneath in charge for the whole open animation.
-  useImperativeHandle(
-    ref,
-    (): BottomSheetModalRef => ({
-      present: (...args) => {
+    const handleDismiss = useCallback(() => {
+      sheetMountedRef.current = false;
+      mountPendingRef.current = false;
+      pendingDismissRef.current = null;
+      setPresented(false);
+      if (dismissedRef.current) return;
+      dismissedRef.current = true;
+      onDismiss?.();
+    }, [onDismiss]);
+
+    const handleChange = useCallback(
+      (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
         dismissedRef.current = false;
-        if (!sheetMountedRef.current) mountPendingRef.current = true;
-        setPresented(true);
-        modalRef.current?.present(...args);
+        setPresented(args[0] >= 0);
+        if (args[0] >= 0) markSheetMounted();
+        onChange?.(...args);
       },
-      dismiss: dismissSheet,
-      snapToIndex: (...args) => modalRef.current?.snapToIndex(...args),
-      snapToPosition: (...args) => modalRef.current?.snapToPosition(...args),
-      expand: (...args) => modalRef.current?.expand(...args),
-      collapse: (...args) => modalRef.current?.collapse(...args),
-      close: (...args) => modalRef.current?.close(...args),
-      forceClose: (...args) => modalRef.current?.forceClose(...args),
-    }),
-    [dismissSheet],
-  );
-
-  const handleDismiss = useCallback(() => {
-    sheetMountedRef.current = false;
-    mountPendingRef.current = false;
-    pendingDismissRef.current = null;
-    setPresented(false);
-    if (dismissedRef.current) return;
-    dismissedRef.current = true;
-    onDismiss?.();
-  }, [onDismiss]);
-
-  const handleChange = useCallback(
-    (...args: Parameters<NonNullable<BottomSheetModalProps['onChange']>>) => {
-      dismissedRef.current = false;
-      setPresented(args[0] >= 0);
-      if (args[0] >= 0) markSheetMounted();
-      onChange?.(...args);
-    },
-    [markSheetMounted, onChange],
-  );
+      [markSheetMounted, onChange],
+    );
 
-  const handleAnimate = useCallback(
-    (...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
-      if (args[1] >= 0) markSheetMounted();
-      onAnimate?.(...args);
-    },
-    [markSheetMounted, onAnimate],
-  );
+    const handleAnimate = useCallback(
+      (...args: Parameters<NonNullable<BottomSheetModalProps['onAnimate']>>) => {
+        if (args[1] >= 0) markSheetMounted();
+        onAnimate?.(...args);
+      },
+      [markSheetMounted, onAnimate],
+    );
 
-  const id = useId();
-  const overlayId = `bottom-sheet-${id}`;
-  useEscapeKey(presented, dismissSheet, {
-    id: overlayId,
-    groupId: overlayId,
-    layer: 'modal',
-  });
-  const { isTopmost } = useOverlayStackRegistration({
-    active: presented && Platform.OS !== 'web',
-    capabilities: ['back'],
-    id: overlayId,
-    groupId: overlayId,
-    layer: 'modal',
-  });
-
-  useEffect(() => {
-    // BackHandler is native-only; react-native-web warns on every subscription.
-    if (!presented || Platform.OS === 'web') return;
-
-    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
-      if (!isTopmost('back')) return false;
-      dismissSheet();
-      return true;
+    const id = useId();
+    const overlayId = `bottom-sheet-${id}`;
+    useEscapeKey(presented, dismissSheet, {
+      id: overlayId,
+      groupId: overlayId,
+      layer: 'modal',
+    });
+    const { isTopmost } = useOverlayStackRegistration({
+      active: presented && Platform.OS !== 'web',
+      capabilities: ['back'],
+      id: overlayId,
+      groupId: overlayId,
+      layer: 'modal',
     });
 
-    return () => {
-      backHandler.remove();
-    };
-  }, [dismissSheet, isTopmost, presented]);
+    useEffect(() => {
+      // BackHandler is native-only; react-native-web warns on every subscription.
+      if (!presented || Platform.OS === 'web') return;
 
-  const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
-  const handleIndicatorStyle = useResolveClassNames(
-    'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
-  );
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (!isTopmost('back')) return false;
+        dismissSheet();
+        return true;
+      });
 
-  return (
-    <BottomSheetModal
-      ref={setModalRef}
-      enableDynamicSizing
-      maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
-      style={sheetContainerStyle}
-      handleComponent={handleVisible ? undefined : null}
-      handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
-      backdropComponent={CustomBackdrop}
-      backgroundComponent={CustomBackground}
-      {...rest}
-      onDismiss={handleDismiss}
-      onChange={handleChange}
-      onAnimate={handleAnimate}
-      {...(footer != null && { footerComponent: renderFooter })}
-    />
-  );
-});
+      return () => {
+        backHandler.remove();
+      };
+    }, [dismissSheet, isTopmost, presented]);
+
+    const sheetContainerStyle = useResolveClassNames(bottomSheetModalContainerClassName);
+    const handleIndicatorStyle = useResolveClassNames(
+      'bg-surface-neutral-subtle w-9 h-[5px] rounded-full',
+    );
+
+    return (
+      <BottomSheetModal
+        ref={setModalRef}
+        enableDynamicSizing
+        maxDynamicContentSize={MAX_DYNAMIC_CONTENT_SIZE}
+        style={sheetContainerStyle}
+        handleComponent={handleVisible ? undefined : null}
+        handleIndicatorStyle={handleVisible ? handleIndicatorStyle : undefined}
+        backdropComponent={CustomBackdrop}
+        backgroundComponent={CustomBackground}
+        {...rest}
+        onDismiss={handleDismiss}
+        onChange={handleChange}
+        onAnimate={handleAnimate}
+        {...(footer != null && { footerComponent: renderFooter })}
+      >
+        {typeof children === 'function' ? (
+          (props: { data?: unknown }) => (
+            <ParentContext.Provider value={ctx}>
+              {children(props) as ReactNode}
+            </ParentContext.Provider>
+          )
+        ) : (
+          <ParentContext.Provider value={ctx}>{children}</ParentContext.Provider>
+        )}
+      </BottomSheetModal>
+    );
+  },
+);
 
 BottomSheetModalStyled.displayName = 'BottomSheet.Modal';
 

package/src/components/BottomSheet/styles.ts

@@ -1,4 +1,4 @@
-import { cva } from '@cdx-ui/utils';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 /** Keep gorhom's animated container unclipped so web transforms can settle correctly. */
 export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
@@ -6,6 +6,14 @@ export const bottomSheetModalContainerClassName = 'rounded-t-4xl';
 /** Clip the static background for rounded corners without clipping the animated sheet. */
 export const bottomSheetBackgroundClassName = `${bottomSheetModalContainerClassName} overflow-hidden bg-surface-primary`;
 
-export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-5 pb-5 gap-3']);
+export const bottomSheetContentVariants = cva(['bg-surface-primary', 'px-4 pb-4 gap-3'], {
+  variants: {
+    fullBleed: {
+      true: 'px-0',
+    },
+  },
+});
 
-export const bottomSheetFooterVariants = cva(['px-5 pb-5 gap-2', 'bg-surface-primary']);
+export type BottomSheetContentVariantProps = VariantProps<typeof bottomSheetContentVariants>;
+
+export const bottomSheetFooterVariants = cva(['px-4 pb-5 gap-2', 'bg-surface-primary']);

package/src/components/Calendar/CalendarMonthHeader.tsx

@@ -94,28 +94,35 @@ export const CalendarMonthHeader = forwardRef<ComponentRef<typeof View>, Calenda
           />
         </Pressable>
 
-        {!isYearView ? (
-          <View className={calendarMonthHeaderNavVariants()}>
-            <IconButton
-              as={ChevronLeft}
-              variant="ghost"
-              color="neutral"
-              size="small"
-              accessibilityLabel={labels.previousMonth}
-              isDisabled={disabled}
-              onPress={() => shiftMonth(-1)}
-            />
-            <IconButton
-              as={ChevronRight}
-              variant="ghost"
-              color="neutral"
-              size="small"
-              accessibilityLabel={labels.nextMonth}
-              isDisabled={disabled}
-              onPress={() => shiftMonth(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.previousMonth}
+            isDisabled={disabled || isYearView}
+            focusable={!isYearView}
+            onPress={() => shiftMonth(-1)}
+          />
+          <IconButton
+            as={ChevronRight}
+            variant="ghost"
+            color="neutral"
+            size="small"
+            accessibilityLabel={labels.nextMonth}
+            isDisabled={disabled || isYearView}
+            focusable={!isYearView}
+            onPress={() => shiftMonth(1)}
+          />
+        </View>
       </View>
     );
   },

package/src/components/Calendar/CalendarYearList.tsx

@@ -0,0 +1,136 @@
+import { Fragment, useCallback, useMemo, useRef, type ReactElement } from 'react';
+import { ScrollView, View } from 'react-native';
+import { ScrollShadow } from '../ScrollShadow';
+import {
+  calendarYearPickerListContentVariants,
+  calendarYearPickerPlaceholderVariants,
+  calendarYearPickerRowVariants,
+} from './styles';
+
+/** Years listed before / after today's year on a side with no `minValue` / `maxValue`. */
+const DEFAULT_YEAR_WINDOW = 100;
+const YEAR_COLUMNS = 3;
+/** Pill cell (40px) plus its vertical margins and row gap; fixed so the initial offset is exact. */
+export const YEAR_ROW_HEIGHT = 52;
+
+const ROW_STYLE = { height: YEAR_ROW_HEIGHT };
+
+export interface YearRange {
+  first: number;
+  last: number;
+}
+
+export function getYearRange(
+  minYear: number | undefined,
+  maxYear: number | undefined,
+  visibleYear: number,
+  todayYear: number,
+): YearRange {
+  const first =
+    minYear ?? Math.min(todayYear - DEFAULT_YEAR_WINDOW, visibleYear, maxYear ?? Infinity);
+  const last = maxYear ?? Math.max(todayYear + DEFAULT_YEAR_WINDOW, visibleYear, first);
+  return { first, last: Math.max(first, last) };
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export interface CalendarYearListProps extends YearRange {
+  selectedYear: number;
+  /** Fixed list height, matched to the sibling view so switching views does not resize. */
+  height: number;
+  renderYear: (year: number) => ReactElement;
+}
+
+/**
+ * Three-up year list shared by the Calendar, RangeCalendar, and MonthCalendar year views.
+ *
+ * A plain `ScrollView` rather than a `FlatList`: the pickers render this inside their popover
+ * `ScrollView`, and a nested `VirtualizedList` breaks windowing there. The list is a few hundred
+ * light cells at most, so virtualization buys little.
+ */
+export function CalendarYearList({
+  first,
+  last,
+  selectedYear,
+  height,
+  renderYear,
+}: CalendarYearListProps) {
+  const scrollRef = useRef<ScrollView>(null);
+  const hasAppliedInitialOffset = useRef(false);
+
+  const rows = useMemo<(number | null)[][]>(() => {
+    const count = last - first + 1;
+    return Array.from({ length: Math.ceil(count / YEAR_COLUMNS) }, (_, row) =>
+      Array.from({ length: YEAR_COLUMNS }, (_, column) => {
+        const index = row * YEAR_COLUMNS + column;
+        return index < count ? first + index : null;
+      }),
+    );
+  }, [first, last]);
+
+  const visibleRows = height / YEAR_ROW_HEIGHT;
+  const selectedRow = Math.floor((clamp(selectedYear, first, last) - first) / YEAR_COLUMNS);
+  const firstVisibleRow = Math.max(0, selectedRow - Math.floor((visibleRows - 1) / 2));
+  const maxOffset = Math.max(0, rows.length * YEAR_ROW_HEIGHT - height);
+  const initialOffsetY = Math.min(firstVisibleRow * YEAR_ROW_HEIGHT, maxOffset);
+
+  // `contentOffset` is computed once so later re-renders (a new selection) never yank the
+  // scroll position back.
+  const initialOffset = useRef({ x: 0, y: initialOffsetY }).current;
+  const listStyle = useMemo(() => ({ height }), [height]);
+
+  // iOS and Android apply `contentOffset` before first paint; React Native Web ignores it, so
+  // the same offset is applied once content has a size.
+  const handleContentSizeChange = useCallback(() => {
+    if (hasAppliedInitialOffset.current) {
+      return;
+    }
+    hasAppliedInitialOffset.current = true;
+    if (initialOffset.y > 0) {
+      scrollRef.current?.scrollTo({ x: 0, y: initialOffset.y, animated: false });
+    }
+  }, [initialOffset]);
+
+  const content = useMemo(
+    () =>
+      rows.map((cells, row) => (
+        <View
+          key={first + row * YEAR_COLUMNS}
+          className={calendarYearPickerRowVariants()}
+          style={ROW_STYLE}
+        >
+          {cells.map((year, column) =>
+            year === null ? (
+              <View
+                key={`placeholder-${String(column)}`}
+                className={calendarYearPickerPlaceholderVariants()}
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                aria-hidden
+              />
+            ) : (
+              <Fragment key={year}>{renderYear(year)}</Fragment>
+            ),
+          )}
+        </View>
+      )),
+    [first, rows, renderYear],
+  );
+
+  return (
+    <ScrollShadow surface="primary" size="small">
+      <ScrollView
+        ref={scrollRef}
+        style={listStyle}
+        contentContainerClassName={calendarYearPickerListContentVariants()}
+        contentOffset={initialOffset}
+        onContentSizeChange={handleContentSizeChange}
+        nestedScrollEnabled
+      >
+        {content}
+      </ScrollView>
+    </ScrollShadow>
+  );
+}