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

package/components/Button/Button.tsx

@@ -81,6 +81,8 @@ export type Props = Omit<SurfaceProps, 'style'> &
         disabledPress?: boolean;
     };
 
+const emptyObj = {};
+
 const Button = (
     {
         disabled = false,
@@ -97,7 +99,7 @@ const Button = (
         style: styleProp,
         testID,
         accessible,
-        stateLayerProps = {},
+        stateLayerProps = emptyObj,
         elevation: elevationProp,
         textRelatedStyle,
         disabledPress,

package/components/Card/Card.tsx

@@ -51,7 +51,7 @@ const Card = (
             container: [cardStyles.container, cardStyles.root, style],
             innerContainer: [cardStyles.innerContainer, touchableContainerStyle],
         };
-        // eslint-disable-next-line
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant, state, style, touchableContainerStyle]);
 
     const elevation = elevationProp === undefined ? elevationLevel ?? 0 : elevationProp;

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -1,4 +1,3 @@
-import setColor from 'color';
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -39,9 +38,8 @@ const CheckboxIOS = (
     });
     const checkedColor = colorProp;
 
-    const { rippleColor, rippleContainerStyles, iconContainerStyles } = useMemo(() => {
+    const { rippleContainerStyles, iconContainerStyles } = useMemo(() => {
         return {
-            rippleColor: setColor(checkedColor).fade(0.32).rgb().string(),
             rippleContainerStyles: [styles.root, style],
             iconContainerStyles: { opacity: indeterminate || checked ? 1 : 0 },
         };
@@ -58,7 +56,6 @@ const CheckboxIOS = (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"

package/components/Checkbox/CheckboxBase.tsx

@@ -1,6 +1,5 @@
-import setColor from 'color';
 import { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
-import { Platform, type ViewProps } from 'react-native';
+import { type ViewProps } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -51,14 +50,11 @@ const CheckboxAndroid = (
         size,
     });
 
-    const { rippleColor, rippleContainerStyles, iconStyle } = useMemo(() => {
+    const { rippleContainerStyles, iconStyle } = useMemo(() => {
         const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
 
         return {
             iconStyle: [styles.icon, _color],
-            // TODO - fix this on web
-            rippleColor:
-                Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
             rippleContainerStyles: [styles.root, style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,7 +76,6 @@ const CheckboxAndroid = (
         <TouchableRipple
             {...rest}
             borderless
-            rippleColor={rippleColor}
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"

package/components/DatePicker/DateCalendar.tsx

@@ -11,7 +11,7 @@ import { useOptionalDatePickerContext } from './context';
 
 export type DateCalendarProps = DatePickerInlineProps;
 
-const DateCalendarDefault = memo((props: DateCalendarProps) => {
+const DateCalendarDefault = memo(({ headerLayout = 'default', ...props }: DateCalendarProps) => {
     const ctx = useOptionalDatePickerContext();
 
     const hasExplicitState =
@@ -22,7 +22,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
         props.onChange !== undefined;
 
     const isRange = props.mode === 'range' || ctx?.mode === 'range';
-    const effectiveHeaderLayout = props.headerLayout ?? (ctx ? 'docked' : 'inline');
+    const effectiveHeaderLayout = headerLayout ?? (ctx ? 'docked' : 'inline');
     const showOutsideDays =
         props.showOutsideDays ?? (effectiveHeaderLayout === 'docked' && !isRange);
 
@@ -50,7 +50,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
                 onChange={onChange}
                 locale={locale}
                 validRange={validRange}
-                headerLayout={props.headerLayout ?? 'docked'}
+                headerLayout={headerLayout}
                 showOutsideDays={showOutsideDays}
             />
         );
@@ -72,7 +72,7 @@ const DateCalendarDefault = memo((props: DateCalendarProps) => {
             onChange={onChange}
             locale={locale}
             validRange={validRange}
-            headerLayout={props.headerLayout ?? 'docked'}
+            headerLayout={headerLayout}
             showOutsideDays={showOutsideDays}
         />
     );

package/components/DatePicker/DatePickerModal.tsx

@@ -11,6 +11,7 @@ import {
 
 import { getRegisteredComponentWithFallback } from '../../core';
 import { DateField } from '../DateField';
+import type { DatePickerInlineProps } from '../DatePickerInline/DatePickerInline';
 import { IconButton } from '../IconButton';
 import { Modal, type ModalProps } from '../Modal';
 import { Portal } from '../Portal';
@@ -47,7 +48,7 @@ export type DatePickerModalProps = Omit<ModalProps, 'children' | 'isOpen' | 'onC
     showCalendarAccessibilityLabel?: string;
     enterDateManuallyAccessibilityLabel?: string;
     locale?: DatePickerLocale;
-    headerLayout?: 'inline' | 'docked';
+    headerLayout?: DatePickerInlineProps['headerLayout'];
     /** Override the surface default draft mode. Modal defaults to `true` (staged commit). */
     draft?: boolean;
 };

package/components/DatePicker/utils.ts

@@ -232,6 +232,8 @@ const datePickerPopoverMonthItemStylesDefault = StyleSheet.create(theme => ({
         width: '100%',
         overflow: 'hidden',
         padding: theme.spacings['0'],
+        justifyContent: 'flex-start',
+
         variants: {
             state: {
                 selected: {

package/components/DatePickerInline/DatePickerDockedHeader.tsx

@@ -4,10 +4,10 @@ import { View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import type { DatePickerLocale } from '../DatePicker/context';
-import { useDatePickerStoreRef, useDatePickerStoreValue } from './DatePickerContext';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
 import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStoreRef, useDatePickerInlineStoreValue } from './store';
 import { datePickerHeaderStyles } from './utils';
 
 export type DockedHeaderProps = {
@@ -23,8 +23,8 @@ function DatePickerDockedHeader({
     disableWeekDays,
     style: styleProp,
 }: DockedHeaderProps) {
-    const setStore = useDatePickerStoreRef().set;
-    const { localDate, pickerType } = useDatePickerStoreValue(state => ({
+    const setStore = useDatePickerInlineStoreRef().set;
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
         pickerType: state.pickerType,
     }));

package/components/DatePickerInline/DatePickerInline.tsx

@@ -25,7 +25,7 @@ const DatePickerInline = ({
     onChange,
     locale = 'en',
     mode = 'single',
-    headerLayout = 'inline',
+    headerLayout = 'default',
     HeaderComponent,
     containerStyle: containerStyleProp,
     ...rest

package/components/DatePickerInline/DatePickerInlineBase.tsx

@@ -2,10 +2,10 @@ import { memo, useCallback, useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useLatest } from '../../hooks';
-import { defaultValue, Provider, useDatePickerStore } from './DatePickerContext';
 import { areDatesOnSameDay, dateToUnix, getEndOfDay, getInitialIndex } from './dateUtils';
 import Month from './Month';
 import MonthPicker from './MonthPicker';
+import { defaultValue, Provider, useDatePickerInlineStore } from './store';
 import Swiper from './Swiper';
 import type {
     CalendarDate,
@@ -46,7 +46,7 @@ function DatePickerInlineBaseChild(props: DatePickerInlineBaseProps) {
         showOutsideDays,
         headerLayout,
     } = props;
-    const [pickerType, setStore] = useDatePickerStore(state => state.pickerType);
+    const [pickerType, setStore] = useDatePickerInlineStore(state => state.pickerType);
 
     const scrollMode = mode === 'range' || mode === 'multiple' ? 'vertical' : 'horizontal';
     const isHorizontal = scrollMode === 'horizontal';

package/components/DatePickerInline/DatePickerInlineHeader.tsx

@@ -1,12 +1,12 @@
-import { add } from 'date-fns';
+import { add, setYear } from 'date-fns';
 import { memo, useCallback, useMemo } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import type { DatePickerLocale } from '../DatePicker/context';
-import { useDatePickerStore, useDatePickerStoreValue } from './DatePickerContext';
 import type { DisableWeekDaysType } from './dateUtils';
 import DayNames from './DayNames';
 import HeaderItem from './HeaderItem';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
 import { datePickerHeaderStyles, dayNamesHeight } from './utils';
 
 const buttonContainerHeight = 56;
@@ -26,10 +26,10 @@ function DatePickerInlineHeader({
     disableWeekDays,
     style: styleProp,
 }: CalendarHeaderProps) {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, isYearPickerType } = useDatePickerStoreValue(state => ({
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, pickerType } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
-        isYearPickerType: state.pickerType === 'year',
+        pickerType: state.pickerType,
     }));
     const isHorizontal = scrollMode === 'horizontal';
 
@@ -58,36 +58,62 @@ function DatePickerInlineHeader({
         };
     }, [styleProp]);
 
+    const handleOnMonthPress = useCallback(() => {
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'month' ? undefined : 'month',
+            }));
+    }, [isHorizontal, setStore]);
+
     const handleOnYearPress = useCallback(() => {
-        isHorizontal && setStore(prev => ({ pickerType: prev.pickerType ? undefined : 'year' }));
+        isHorizontal &&
+            setStore(prev => ({
+                pickerType: prev.pickerType === 'year' ? undefined : 'year',
+            }));
     }, [isHorizontal, setStore]);
 
-    const handleOnPrev = useCallback(() => {
+    const handleMonthPrev = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: -1 }) }));
     }, [setStore]);
 
-    const handleOnNext = useCallback(() => {
+    const handleMonthNext = useCallback(() => {
         setStore(prev => ({ localDate: add(prev.localDate, { months: 1 }) }));
     }, [setStore]);
 
+    const handleYearPrev = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() - 1),
+        }));
+    }, [setStore]);
+
+    const handleYearNext = useCallback(() => {
+        setStore(prev => ({
+            localDate: setYear(prev.localDate, prev.localDate.getFullYear() + 1),
+        }));
+    }, [setStore]);
+
     return (
         <View pointerEvents={'box-none'}>
             <>
                 {isHorizontal && (
                     <View style={containerStyle}>
                         <HeaderItem
-                            onPressDropdown={handleOnYearPress}
-                            type="year"
-                            value={`${monthName} ${year}`}
-                            pickerType="year"
-                            selecting={isYearPickerType}
+                            onPrev={handleMonthPrev}
+                            onNext={handleMonthNext}
+                            onPressDropdown={handleOnMonthPress}
+                            type="month"
+                            value={monthName}
+                            pickerType={pickerType}
+                            selecting={pickerType === 'month'}
                         />
                         <HeaderItem
-                            onNext={handleOnNext}
-                            onPrev={handleOnPrev}
-                            selecting={false}
+                            onNext={handleYearNext}
+                            onPrev={handleYearPrev}
+                            onPressDropdown={handleOnYearPress}
+                            type="year"
+                            selecting={pickerType === 'year'}
                             value={year}
-                            pickerType="year"
+                            pickerType={pickerType}
                         />
                     </View>
                 )}

package/components/DatePickerInline/HeaderItem.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
-import { useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStoreValue } from './store';
 
 function HeaderItem({
     value,
@@ -25,7 +25,7 @@ function HeaderItem({
     onNext?: (type: 'month' | 'year' | undefined) => void;
     onPrev?: (type: 'month' | 'year' | undefined) => void;
 }) {
-    const { startDateYear, endDateYear } = useDatePickerStoreValue(state => ({
+    const { startDateYear, endDateYear } = useDatePickerInlineStoreValue(state => ({
         startDateYear: state.startDateYear,
         endDateYear: state.endDateYear,
     }));

package/components/DatePickerInline/MonthPicker.tsx

@@ -1,5 +1,5 @@
 import { setMonth } from 'date-fns';
-import { memo, useCallback, useMemo, useRef } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { FlatList, View, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
@@ -7,87 +7,84 @@ import { resolveStateVariant } from '../../utils';
 import { range } from '../../utils/dateTimePicker';
 import type { DatePickerLocale } from '../DatePicker/context';
 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, useDatePickerStoreValue } from './DatePickerContext';
+import { useDatePickerInlineStore, useDatePickerInlineStoreValue } from './store';
+
+type MonthListItem = { id: number; label: string };
 
 export default function MonthPicker({ locale }: { locale?: DatePickerLocale }) {
-    const [_, setStore] = useDatePickerStore(state => state);
-    const { localDate, selectingMonth } = useDatePickerStoreValue(state => ({
+    const [_, setStore] = useDatePickerInlineStore(state => state);
+    const { localDate, selectingMonth } = useDatePickerInlineStoreValue(state => ({
         localDate: state.localDate,
         selectingMonth: state.pickerType === 'month',
     }));
-    // const monthPickerStyles = useComponentStyles('DatePickerDocked_MonthPicker');
-    const flatList = useRef<FlatList<number> | null>(null);
     const months = range(0, 11);
+    const monthItems = useMemo<MonthListItem[]>(
+        () => months.map(month => ({ id: month, label: String(month) })),
+        [months],
+    );
 
     const handleOnChange = useCallback(
-        (month: number) => {
+        (value: ListItemId | null) => {
+            if (typeof value !== 'number') return;
             setStore(prev => ({
-                localDate: setMonth(prev.localDate, month),
+                localDate: setMonth(prev.localDate, value),
                 pickerType: undefined,
             }));
         },
         [setStore],
     );
 
-    const renderItem = useCallback(
-        ({ item }: { item: number }) => {
-            return (
-                <Month
-                    month={item}
-                    selected={localDate.getMonth() === item}
-                    onPressMonth={handleOnChange}
-                    monthStyles={datePickerMonthPickerStyles.root}
-                    locale={locale}
-                />
-            );
-        },
-        [localDate, handleOnChange, locale],
-    );
-
     if (!selectingMonth) {
         return null;
     }
 
     return (
-        <View
-            style={[
-                StyleSheet.absoluteFill,
-                styles.root,
-                // { backgroundColor },
-                selectingMonth ? styles.opacity1 : styles.opacity0,
-            ]}
-            pointerEvents={selectingMonth ? 'auto' : 'none'}>
-            <HorizontalDivider />
-            <FlatList<number>
-                ref={flatList}
-                style={styles.list}
-                data={months}
-                renderItem={renderItem}
-                keyExtractor={item => `${item}`}
-            />
-        </View>
+        <List multiple={false} value={localDate.getMonth()} onChange={handleOnChange}>
+            <View
+                style={[
+                    StyleSheet.absoluteFill,
+                    styles.root,
+                    selectingMonth ? styles.opacity1 : styles.opacity0,
+                ]}
+                pointerEvents={selectingMonth ? 'auto' : 'none'}>
+                <Divider />
+                <FlatList<MonthListItem>
+                    style={styles.list}
+                    data={monthItems}
+                    renderItem={({ item }) => (
+                        <Month
+                            month={item.id}
+                            monthStyles={datePickerMonthPickerStyles.root}
+                            locale={locale}
+                        />
+                    )}
+                    keyExtractor={item => `${item.id}`}
+                />
+            </View>
+        </List>
     );
 }
 
 function MonthPure({
     month,
-    selected,
-    onPressMonth,
     monthStyles,
     locale,
 }: {
     month: number;
-    selected: boolean;
-    onPressMonth: (newMonth: number) => any;
     monthStyles: ViewStyle;
     locale?: DatePickerLocale;
 }) {
+    const isSelected = useListContextValue(state => {
+        const selectedValue = state.value as any;
+        return (selectedValue?.id ?? selectedValue) === month;
+    });
+
     const state = resolveStateVariant({
-        selected,
+        selected: isSelected,
     });
 
     datePickerMonthItemStyles.useVariants({
@@ -99,44 +96,38 @@ function MonthPure({
 
         return {
             monthButtonStyle: [monthButton, monthStyles],
-            accessibilityState: { selected },
+            accessibilityState: { selected: isSelected },
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected, monthStyles, state]);
+    }, [isSelected, monthStyles]);
 
     const monthLabel = useMemo(
-        () =>
-            new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
+        () => new Intl.DateTimeFormat(locale, { month: 'long' }).format(new Date(2000, month, 1)),
         [locale, month],
     );
 
-    const handleMonthPress = useCallback(() => {
-        onPressMonth(month);
-    }, [onPressMonth, month]);
-
     return (
-        <ListItem
-            onPress={handleMonthPress}
+        <List.Item
+            value={month}
             accessibilityRole="button"
             accessibilityLabel={String(month)}
             accessibilityState={accessibilityState}
             style={monthButtonStyle}
-            testID={`pick-month-${month}`}
-            left={
-                selected ? (
+            testID={`pick-month-${month}`}>
+            <View style={styles.left}>
+                {isSelected ? (
                     <View style={styles.checkIconView}>
                         <Icon name="check" size={24} />
                     </View>
                 ) : (
                     <View style={styles.spacer} />
-                )
-            }>
+                )}
+            </View>
             <View style={datePickerMonthItemStyles.monthInner}>
                 <Text style={datePickerMonthItemStyles.monthLabel} selectable={false}>
                     {monthLabel}
                 </Text>
             </View>
-        </ListItem>
+        </List.Item>
     );
 }
 const Month = memo(MonthPure);
@@ -155,6 +146,9 @@ const styles = StyleSheet.create(theme => ({
     spacer: {
         width: 44,
     },
+    left: {
+        marginRight: theme.spacings['2'],
+    },
 
     list: {
         flex: 1,

package/components/DatePickerInline/Swiper.native.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react-native';
 
 import AutoSizer from './AutoSizer';
-import { useDatePickerStore } from './DatePickerContext';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';
 import {
@@ -18,6 +17,7 @@ import {
     getMonthHeight,
     getVerticalMonthsOffset,
 } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -56,7 +56,7 @@ function SwiperInner({
     );
 
     const parentRef = useRef<ScrollView | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
 
     const scrollTo = useCallback(
         (index: number, animated: boolean) => {

package/components/DatePickerInline/Swiper.tsx

@@ -12,10 +12,10 @@ import {
 
 import { useLatest } from '../../hooks';
 import AutoSizer from './AutoSizer';
-import { useDatePickerStore } from './DatePickerContext';
 import { beginOffset, estimatedMonthHeight, getInitialIndex, totalMonths } from './dateUtils';
 import { addMonths, getRealIndex } from './dateUtils';
 import { getIndexFromVerticalOffset, getMonthHeight, getVerticalMonthsOffset } from './Month';
+import { useDatePickerInlineStore } from './store';
 import type { SwiperProps } from './SwiperUtils';
 import { montHeaderHeight } from './utils';
 
@@ -73,7 +73,7 @@ function HorizontalScroller({
         visibleHorizontalArray(initialIndex),
     );
     const parentRef = useRef<HTMLDivElement | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
     const settleTimerRef = useRef<number | null>(null);
     const isRecenteringRef = useRef(false);
 
@@ -209,7 +209,7 @@ function VerticalScroller({
     const [visibleIndexes, setVisibleIndexes] = useState<number[]>(visibleArray(initialIndex));
 
     const parentRef = useRef<HTMLDivElement | null>(null);
-    const [{ localDate }, setStore] = useDatePickerStore(state => state);
+    const [{ localDate }, setStore] = useDatePickerInlineStore(state => state);
 
     useIsomorphicLayoutEffect(() => {
         const element = parentRef.current;