react-native-molecules 0.5.0-beta.21 → 0.5.0-beta.23

package/components/DatePickerInline/YearPicker.tsx

@@ -1,16 +1,18 @@
 import { setYear } from 'date-fns';
 import { memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
-import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { getYearRange, resolveStateVariant } from '../../utils';
 import { datePickerMonthItemStyles, datePickerMonthPickerStyles } from '../DatePicker/utils';
-import { HorizontalDivider } from '../HorizontalDivider';
+import { Divider } from '../Divider';
 import { Icon } from '../Icon';
-import { ListItem } from '../ListItem';
+import { List, type ListItemId, useListContextValue } from '../List';
 import { Text } from '../Text';
-import { useDatePickerStore } from './DatePickerContext';
+import { useDatePickerInlineStore } from './store';
 import { datePickerYearItemStyles, datePickerYearPickerStyles } from './utils';
 
+type YearListItem = { id: number; label: string };
+
 const GRID_ITEM_HEIGHT = 62;
 const NUM_COLUMNS = 3;
 const LIST_ITEM_HEIGHT = 46;
@@ -25,23 +27,19 @@ export default function YearPicker({ layout = 'grid' }: YearPickerProps) {
 }
 
 function YearPickerGrid() {
-    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
-        state => state,
-    );
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
-    const rows = useMemo(() => {
-        const chunks: number[][] = [];
-        for (let i = 0; i < years.length; i += NUM_COLUMNS) {
-            chunks.push(years.slice(i, i + NUM_COLUMNS));
-        }
-        return chunks;
-    }, [years]);
+    const yearItems = useMemo(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
-    const scrollRef = useRef<ScrollView | null>(null);
+    const flatListRef = useRef<FlatList<YearListItem> | null>(null);
 
     const initialScrollOffset = useMemo(() => {
         if (years.length === 0) return 0;
@@ -53,7 +51,7 @@ function YearPickerGrid() {
 
     useLayoutEffect(() => {
         if (!selectingYear) return;
-        scrollRef.current?.scrollTo({ y: initialScrollOffset, animated: false });
+        flatListRef.current?.scrollToOffset({ offset: initialScrollOffset, animated: false });
     }, [selectingYear, initialScrollOffset]);
 
     const { containerStyle, yearStyle } = useMemo(() => {
@@ -71,92 +69,92 @@ function YearPickerGrid() {
     }, [selectingYear]);
 
     const handleOnChange = useCallback(
-        (year: number) => {
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
+    const getRowLayout = useCallback(
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
+            length: GRID_ITEM_HEIGHT,
+            offset: GRID_ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
     return (
-        <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
-            <HorizontalDivider />
-            <ScrollView
-                ref={scrollRef}
-                style={gridStyles.list}
-                contentOffset={{ x: 0, y: initialScrollOffset }}
-                removeClippedSubviews>
-                <View style={gridStyles.grid}>
-                    {rows.map((row, rowIdx) => (
-                        <View key={rowIdx} style={gridStyles.row}>
-                            {row.map(year => (
-                                <View key={year} style={gridStyles.cell}>
-                                    <YearPill
-                                        year={year}
-                                        selected={selectedYear === year}
-                                        onPressYear={handleOnChange}
-                                        yearStyles={yearStyle}
-                                    />
-                                </View>
-                            ))}
-                            {row.length < NUM_COLUMNS &&
-                                Array.from({ length: NUM_COLUMNS - row.length }).map((_, i) => (
-                                    <View key={`pad-${i}`} style={gridStyles.cell} />
-                                ))}
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={containerStyle} pointerEvents={selectingYear ? 'auto' : 'none'}>
+                <Divider />
+                <FlatList<YearListItem>
+                    ref={flatListRef}
+                    style={gridStyles.list}
+                    data={yearItems}
+                    numColumns={NUM_COLUMNS}
+                    contentContainerStyle={gridStyles.grid}
+                    columnWrapperStyle={gridStyles.row}
+                    renderItem={({ item }) => (
+                        <View style={gridStyles.cell}>
+                            <YearPill year={item.id} yearStyles={yearStyle} />
                         </View>
-                    ))}
-                </View>
-            </ScrollView>
-        </View>
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                    getItemLayout={getRowLayout}
+                    initialScrollIndex={Math.floor(initialScrollOffset / GRID_ITEM_HEIGHT)}
+                    removeClippedSubviews
+                />
+            </View>
+        </List>
     );
 }
 
-function YearPillPure({
-    year,
-    selected,
-    onPressYear,
-    yearStyles,
-}: {
-    year: number;
-    selected: boolean;
-    onPressYear: (newYear: number) => any;
-    yearStyles: Record<string, any>;
-}) {
-    datePickerYearItemStyles.useVariants({
-        state: resolveStateVariant({ selected }) as any,
+function YearPillPure({ year, yearStyles }: { year: number; yearStyles: Record<string, any> }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
     });
 
-    const handlePressYear = useCallback(() => {
-        onPressYear(year);
-    }, [year, onPressYear]);
+    datePickerYearItemStyles.useVariants({
+        state: resolveStateVariant({ selected: isSelected }) as any,
+    });
 
     return (
-        <ListItem
-            contentStyle={datePickerYearItemStyles.content}
-            onPress={handlePressYear}
+        <List.Item
+            value={year}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
             style={[yearStyles, datePickerYearItemStyles.yearButton]}
             testID={`pick-year-${year}`}>
-            <ListItem.Title style={datePickerYearItemStyles.yearLabel} selectable={false}>
-                {year}
-            </ListItem.Title>
-        </ListItem>
+            <View style={datePickerYearItemStyles.content}>
+                <Text
+                    typescale="bodyLarge"
+                    style={datePickerYearItemStyles.yearLabel}
+                    selectable={false}>
+                    {year}
+                </Text>
+            </View>
+        </List.Item>
     );
 }
 const YearPill = memo(YearPillPure);
 
 function YearPickerList() {
-    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] = useDatePickerStore(
-        state => state,
-    );
-    const flatList = useRef<FlatList<number> | null>(null);
+    const [{ startDateYear, endDateYear, localDate, pickerType }, setStore] =
+        useDatePickerInlineStore(state => state);
     const years = useMemo(
         () => getYearRange(startDateYear, endDateYear),
         [startDateYear, endDateYear],
     );
+    const yearItems = useMemo<YearListItem[]>(
+        () => years.map(year => ({ id: year, label: String(year) })),
+        [years],
+    );
     const selectingYear = pickerType === 'year';
     const selectedYear = localDate.getFullYear();
 
@@ -167,24 +165,18 @@ function YearPickerList() {
     }, [selectedYear, years]);
 
     const handleOnChange = useCallback(
-        (year: number) => {
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setYear(prev.localDate, year),
+                localDate: setYear(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
-    const renderItem = useCallback(
-        ({ item }: { item: number }) => (
-            <YearRow year={item} selected={selectedYear === item} onPressYear={handleOnChange} />
-        ),
-        [selectedYear, handleOnChange],
-    );
-
     const getItemLayout = useCallback(
-        (_data: any, index: number) => ({
+        (_data: ArrayLike<YearListItem> | null | undefined, index: number) => ({
             length: LIST_ITEM_HEIGHT,
             offset: LIST_ITEM_HEIGHT * index,
             index,
@@ -195,61 +187,54 @@ function YearPickerList() {
     if (!selectingYear) return null;
 
     return (
-        <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
-            <HorizontalDivider />
-            <FlatList<number>
-                ref={flatList}
-                style={listStyles.list}
-                data={years}
-                renderItem={renderItem}
-                keyExtractor={item => `${item}`}
-                initialScrollIndex={initialScrollIndex}
-                getItemLayout={getItemLayout}
-            />
-        </View>
+        <List multiple={false} value={selectedYear} onChange={handleOnChange}>
+            <View style={[StyleSheet.absoluteFill, listStyles.root]} pointerEvents="auto">
+                <Divider />
+                <FlatList<YearListItem>
+                    style={listStyles.list}
+                    data={yearItems}
+                    renderItem={({ item }) => <YearRow year={item.id} />}
+                    keyExtractor={item => `${item.id}`}
+                    initialScrollIndex={initialScrollIndex}
+                    getItemLayout={getItemLayout}
+                />
+            </View>
+        </List>
     );
 }
 
-function YearRowPure({
-    year,
-    selected,
-    onPressYear,
-}: {
-    year: number;
-    selected: boolean;
-    onPressYear: (newYear: number) => any;
-}) {
-    datePickerMonthItemStyles.useVariants({
-        state: resolveStateVariant({ selected }) as any,
+function YearRowPure({ year }: { year: number }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === year;
     });
 
-    const handlePressYear = useCallback(() => {
-        onPressYear(year);
-    }, [year, onPressYear]);
+    datePickerMonthItemStyles.useVariants({
+        state: resolveStateVariant({ selected: isSelected }) as any,
+    });
 
     return (
-        <ListItem
-            onPress={handlePressYear}
+        <List.Item
+            value={year}
             accessibilityRole="button"
             accessibilityLabel={String(year)}
-            accessibilityState={{ selected }}
             style={datePickerMonthItemStyles.monthButton}
-            testID={`pick-year-${year}`}
-            left={
-                selected ? (
+            testID={`pick-year-${year}`}>
+            <View style={listStyles.left}>
+                {isSelected ? (
                     <View style={listStyles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={listStyles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {year}
                 </Text>
             </View>
-        </ListItem>
+        </List.Item>
     );
 }
 const YearRow = memo(YearRowPure);
@@ -260,7 +245,10 @@ const gridStyles = StyleSheet.create({
         top: 56,
         zIndex: 100,
     },
-    list: { flex: 1 },
+    list: {
+        flex: 1,
+        width: '100%',
+    },
     grid: { alignItems: 'center' },
     row: {
         flexDirection: 'row',
@@ -289,4 +277,5 @@ const listStyles = StyleSheet.create({
     list: { flex: 1 },
     checkIconView: { marginLeft: 16 },
     spacer: { width: 44 },
+    left: { marginRight: 8 },
 });

package/components/DatePickerInline/{DatePickerContext.tsx → store.tsx}

@@ -1,4 +1,5 @@
 import { createFastContext } from '../../fast-context';
+import { registerPortalContext } from '../Portal/Portal';
 
 export type Store = {
     localDate: Date;
@@ -16,7 +17,10 @@ export const defaultValue = {
 
 export const {
     Provider,
-    useContext: useDatePickerStore,
-    useContextValue: useDatePickerStoreValue,
-    useStoreRef: useDatePickerStoreRef,
+    useContext: useDatePickerInlineStore,
+    useContextValue: useDatePickerInlineStoreValue,
+    useStoreRef: useDatePickerInlineStoreRef,
+    Context: DatePickerInlineStoreContext,
 } = createFastContext<Store>();
+
+registerPortalContext(DatePickerInlineStoreContext);

package/components/DatePickerInline/types.ts

@@ -54,7 +54,7 @@ export type BaseDatePickerProps = {
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
-    headerLayout?: 'inline' | 'docked';
+    headerLayout?: 'default' | 'docked';
     monthStyle?: Record<string, any>;
     showOutsideDays?: boolean;
 

package/components/Divider/Divider.tsx

@@ -0,0 +1,192 @@
+import { memo } from 'react';
+import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+export type DividerProps = Omit<ViewProps, 'children'> & {
+    /**
+     * Line orientation. Defaults to horizontal.
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * Left inset when `mode` is `"horizontal"`.
+     */
+    leftInset?: number;
+    /**
+     * Right inset when `mode` is `"horizontal"`.
+     */
+    rightInset?: number;
+    /**
+     * Top inset when `mode` is `"vertical"`.
+     */
+    topInset?: number;
+    /**
+     * Bottom inset when `mode` is `"vertical"`.
+     */
+    bottomInset?: number;
+    /**
+     * Whether the divider stroke should use the bold thickness.
+     */
+    bold?: boolean;
+    /**
+     * Margin added perpendicular to the divider line (`marginVertical` for horizontal,
+     * `marginHorizontal` for vertical).
+     */
+    spacing?: number;
+    style?: StyleProp<ViewStyle>;
+};
+
+export type Props = DividerProps;
+
+const DividerHorizontalImpl = memo(function DividerHorizontalImpl({
+    leftInset = 0,
+    rightInset = 0,
+    style,
+    bold = false,
+    spacing = 8,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'topInset' | 'bottomInset'>) {
+    horizontalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    horizontalDividerStyles.root,
+                    leftInset ? { marginLeft: leftInset } : undefined,
+                    rightInset ? { marginRight: rightInset } : undefined,
+                    spacing ? { marginVertical: spacing } : undefined,
+                    style,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+const DividerVerticalImpl = memo(function DividerVerticalImpl({
+    topInset = 0,
+    bottomInset = 0,
+    spacing = 0,
+    style,
+    bold = false,
+    ...rest
+}: Omit<DividerProps, 'mode' | 'leftInset' | 'rightInset'>) {
+    verticalDividerStyles.useVariants({
+        isBold: bold,
+    });
+
+    return (
+        <View
+            {...rest}
+            style={
+                [
+                    verticalDividerStyles.root,
+                    style,
+                    topInset ? { marginTop: topInset } : undefined,
+                    bottomInset ? { marginBottom: bottomInset } : undefined,
+                    spacing ? { marginHorizontal: spacing } : undefined,
+                ] as StyleProp<ViewStyle>
+            }
+        />
+    );
+});
+
+function DividerRoot(props: DividerProps) {
+    const mode = props.mode ?? 'horizontal';
+
+    if (mode === 'vertical') {
+        const {
+            mode: _m,
+            leftInset: _l,
+            rightInset: _r,
+            topInset,
+            bottomInset,
+            bold,
+            spacing,
+            style,
+            ...viewRest
+        } = props;
+
+        return (
+            <DividerVerticalImpl
+                {...viewRest}
+                topInset={topInset}
+                bottomInset={bottomInset}
+                bold={bold}
+                spacing={spacing}
+                style={style}
+            />
+        );
+    }
+
+    const {
+        mode: _m,
+        topInset: _t,
+        bottomInset: _b,
+        leftInset,
+        rightInset,
+        bold,
+        spacing,
+        style,
+        ...viewRest
+    } = props;
+
+    return (
+        <DividerHorizontalImpl
+            {...viewRest}
+            leftInset={leftInset}
+            rightInset={rightInset}
+            bold={bold}
+            spacing={spacing}
+            style={style}
+        />
+    );
+}
+
+export const Divider = memo(DividerRoot);
+
+export const horizontalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        height: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    height: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        width: StyleSheet.hairlineWidth,
+        background: theme.colors.outlineVariant,
+
+        variants: {
+            isBold: {
+                true: {
+                    width: 1,
+                },
+            },
+        },
+    },
+}));
+
+export const horizontalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'HorizontalDivider',
+    horizontalDividerStylesDefault,
+);
+
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
+
+export default Divider;

package/components/Divider/index.tsx

@@ -0,0 +1,11 @@
+export {
+    Divider,
+    horizontalDividerStyles,
+    horizontalDividerStylesDefault,
+    verticalDividerStyles,
+    verticalDividerStylesDefault,
+    type DividerProps,
+    type Props,
+} from './Divider';
+
+export { default } from './Divider';

package/components/Drawer/DrawerItemGroup.tsx

@@ -3,13 +3,13 @@ import { type TextProps, View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import { Divider, type DividerProps } from '../Divider';
 import { Text } from '../Text';
 
 export type Props = ViewProps & {
     title?: ReactNode;
     showDivider?: boolean;
-    dividerProps?: HorizontalDividerProps;
+    dividerProps?: Omit<DividerProps, 'mode'>;
     titleProps?: TextProps;
 };
 
@@ -45,11 +45,7 @@ const DrawerItemGroup = memo(
                     )}
                 </>
                 {children}
-                <>
-                    {showDivider && (
-                        <HorizontalDivider style={dividerStyle} {...dividerRestProps} />
-                    )}
-                </>
+                <>{showDivider && <Divider style={dividerStyle} {...dividerRestProps} />}</>
             </View>
         );
     },

package/components/IconButton/IconButton.tsx

@@ -1,4 +1,3 @@
-import color from 'color';
 import { forwardRef, memo, useMemo } from 'react';
 import {
     type GestureResponderEvent,
@@ -112,13 +111,13 @@ const IconButton = (
         variant: variant as any,
         // @ts-ignore // TODO - fix this
         state,
+        // @ts-ignore // TODO - fix this
         size: typeof size === 'string' && size ? size : undefined,
     });
 
     const {
         iconColor,
         iconSize,
-        rippleColor,
         containerStyle,
         accessibilityState,
         // accessibilityTraits,
@@ -129,18 +128,9 @@ const IconButton = (
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
             (typeof size === 'number' && size ? (size as number) : undefined);
 
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = color(_iconColor).alpha(0.12).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
-
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
-            rippleColor: _rippleColor,
             containerStyle: [
                 iconSizeInNum
                     ? {
@@ -164,7 +154,7 @@ const IconButton = (
             borderless
             centered
             onPress={onPress}
-            rippleColor={rippleColor}
+            rippleAlpha={0.12}
             accessibilityLabel={accessibilityLabel}
             style={containerStyle}
             // accessibilityTraits={accessibilityTraits}