react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.30

package/components/DatePickerInline/dateUtils.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback } from 'react';
 
-import { useLatest } from '../../hooks';
 import type { CalendarDate, CalendarDates, ValidRangeType } from './types';
 
 export type DisableWeekDaysType = number[];
@@ -219,21 +219,25 @@ export const generateCalendarGrid = ({
                 const isFirstWeek = weekGrid === 0;
                 const realDayIndex = emptyDays - dayIndex;
                 const beforeWeekDay = isFirstWeek && realDayIndex > 0;
-                const dayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
-                const afterWeekDay = dayOfMonth > daysInMonth;
-
-                const day = new Date(year, month, dayOfMonth);
+                const rawDayOfMonth = weekGrid * 7 + dayIndex - emptyDays + 1;
+                const afterWeekDay = rawDayOfMonth > daysInMonth;
+                const outside = beforeWeekDay || afterWeekDay;
+
+                const day = new Date(year, month, rawDayOfMonth);
+                const dayOfMonth = day.getDate();
+                const displayYear = day.getFullYear();
+                const displayMonth = day.getMonth();
                 const isToday = areDatesOnSameDay(day, today);
 
                 let inRange = false;
                 let disabled = isDisabled(day);
                 let selected = false;
 
-                let leftCrop = dayOfMonth === 1;
-                let rightCrop = dayOfMonth === daysInMonth;
+                let leftCrop = rawDayOfMonth === 1;
+                let rightCrop = rawDayOfMonth === daysInMonth;
 
-                const isFirstDayOfMonth = dayOfMonth === 1;
-                const isLastDayOfMonth = dayOfMonth === daysInMonth;
+                const isFirstDayOfMonth = rawDayOfMonth === 1;
+                const isLastDayOfMonth = rawDayOfMonth === daysInMonth;
 
                 if (mode === 'range') {
                     const selectedStartDay = areDatesOnSameDay(day, startDate);
@@ -267,8 +271,8 @@ export const generateCalendarGrid = ({
                     const safeDates = dates || [];
                     selected = safeDates.some(d => areDatesOnSameDay(day, d));
 
-                    const yesterday = new Date(year, month, dayOfMonth - 1);
-                    const tomorrow = new Date(year, month, dayOfMonth + 1);
+                    const yesterday = new Date(year, month, rawDayOfMonth - 1);
+                    const tomorrow = new Date(year, month, rawDayOfMonth + 1);
 
                     const yesterdaySelected = safeDates.some(d => areDatesOnSameDay(d, yesterday));
                     const tomorrowSelected = safeDates.some(d => areDatesOnSameDay(d, tomorrow));
@@ -316,8 +320,9 @@ export const generateCalendarGrid = ({
                 return {
                     beforeWeekDay,
                     afterWeekDay,
-                    year,
-                    month,
+                    outside,
+                    year: displayYear,
+                    month: displayMonth,
                     dayOfMonth,
                     dayIndex,
                     mode,

package/components/DatePickerInline/store.tsx

@@ -0,0 +1,27 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+
+import { registerPortalContext } from '../Portal/Portal';
+
+export type Store = {
+    localDate: Date;
+    startDateYear: number;
+    endDateYear: number;
+    pickerType: 'month' | 'year' | undefined;
+};
+
+export const defaultValue = {
+    localDate: new Date(),
+    startDateYear: 1800,
+    endDateYear: 2200,
+    pickerType: undefined,
+};
+
+export const {
+    Provider,
+    useContext: useDatePickerInlineStore,
+    useContextValue: useDatePickerInlineStoreValue,
+    useStoreRef: useDatePickerInlineStoreRef,
+    Context: DatePickerInlineStoreContext,
+} = createFastContext<Store>();
+
+registerPortalContext(DatePickerInlineStoreContext);

package/components/DatePickerInline/types.ts

@@ -1,11 +1,12 @@
 import type { MemoExoticComponent } from 'react';
 import type { ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { CalendarHeaderProps } from './DatePickerInlineHeader';
 import type { DisableWeekDaysType } from './dateUtils';
 
 export interface BaseMonthProps {
-    locale: undefined | string;
+    locale: DatePickerLocale | undefined;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     mode: ModeType;
@@ -13,6 +14,7 @@ export interface BaseMonthProps {
     onPressDate: (date: Date) => any;
     validRange?: ValidRangeType;
     customMonthStyles?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // some of these should be required in final implementation
     date?: CalendarDate;
@@ -46,13 +48,15 @@ export type ValidRangeType = {
 };
 
 export type BaseDatePickerProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     disableWeekDays?: DisableWeekDaysType;
     validRange?: ValidRangeType;
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
+    headerLayout?: 'default' | 'docked';
     monthStyle?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // here they are optional but in final implemenation they are required
     date?: CalendarDate;

package/components/DatePickerInline/utils.ts

@@ -3,11 +3,13 @@ import { StyleSheet } from 'react-native-unistyles';
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { daySize } from './dateUtils';
 
-export const dayNamesHeight = 44;
+export const dayNamesHeight = 48;
 
 // TODO make it flexible
-export const weekMargin = 6;
-export const weekSize = daySize + weekMargin;
+export const cellSize = 48;
+export const cellVerticalPadding = (cellSize - daySize) / 2;
+export const weekMargin = 0;
+export const weekSize = cellSize + weekMargin;
 export const montHeaderHeight = 56;
 export const monthHeaderSingleMarginTop = 4;
 export const monthHeaderSingleMarginBottom = 8 + 22 + 12;
@@ -33,8 +35,7 @@ const datePickerMonthStylesDefault = StyleSheet.create(theme => ({
         backgroundColor: theme.colors.surface,
     },
     monthLabel: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButton: {
         alignSelf: 'flex-start',
@@ -89,6 +90,30 @@ const datePickerYearPickerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
+export const datePickerDayStateLayerStyles = StyleSheet.create(theme => ({
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                todayAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+                outsideAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                selectedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onPrimary,
+                },
+                inRangeAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+}));
+
 const datePickerDayStylesDefault = StyleSheet.create(theme => ({
     containerStyle: {
         flex: 1,
@@ -102,6 +127,9 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 disabled: {
                     opacity: 0.3,
                 },
+                outside: {
+                    opacity: 0.38,
+                },
             },
         },
     },
@@ -117,7 +145,7 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: 'transparent',
                 },
             },
         },
@@ -140,12 +168,13 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -156,15 +185,17 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                 },
             },
         },
     },
     text: {
+        ...theme.typescale.bodyLarge,
         variants: {
             state: {
                 selected: {
@@ -175,16 +206,16 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    color: theme.colors.onPrimary,
+                    color: theme.colors.onSecondaryContainer,
 
                     day: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -205,7 +236,7 @@ const datePickerDayEmptyStylesDefault = StyleSheet.create({
 const datePickerWeekStylesDefault = StyleSheet.create({
     root: {
         flexDirection: 'row',
-        height: daySize,
+        height: cellSize,
     },
 });
 
@@ -214,7 +245,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginHorizontal: theme.spacings['5'],
+        padding: theme.spacings['2'],
     },
     buttonContainer: {
         height: 56,
@@ -226,8 +257,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
     buttonWrapper: {},
     spacer: { flex: 1 },
     yearLabelStyle: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButtonStyle: {
         alignSelf: 'flex-start',
@@ -249,24 +279,25 @@ const dateDayNameStylesDefault = StyleSheet.create(theme => ({
         alignItems: 'center',
         backgroundColor: theme.colors.surface,
     },
-    dayName: { flex: 1, alignItems: 'center' },
+    dayName: { flex: 1, alignItems: 'center', ...theme.typescale.bodyLarge },
     dayNameLabel: {
-        opacity: 0.7,
-        ...theme.typescale.bodyMedium,
+        ...theme.typescale.bodyLarge,
     },
 }));
 
 const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
     container: {
+        position: 'absolute',
+        top: cellVerticalPadding,
+        bottom: cellVerticalPadding,
+        left: 0,
+        right: 0,
         flexDirection: 'row',
 
         variants: {
             state: {
-                bothWays: {
-                    borderRadius: daySize / 2,
-                },
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
                 isCrop: {
                     backgroundColor: undefined,
@@ -280,7 +311,7 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isRightCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
@@ -291,13 +322,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isLeftCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
     },
     centerCrop: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: theme.colors.secondaryContainer,
         minWidth: daySize,
         minHeight: daySize,
 
@@ -317,7 +348,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
 }));
 
 const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
+    content: {
+        alignItems: 'center',
+    },
     yearButton: {
+        borderRadius: theme.shapes.corner.full,
+        paddingHorizontal: 0,
+        overflow: 'hidden',
         variants: {
             state: {
                 selected: {

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,10 @@
+export {
+    Divider,
+    type DividerProps,
+    horizontalDividerStyles,
+    horizontalDividerStylesDefault,
+    type Props,
+    verticalDividerStyles,
+    verticalDividerStylesDefault,
+} from './Divider';
+export { default } from './Divider';

package/components/Drawer/Drawer.tsx

@@ -3,25 +3,36 @@ import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { useSubcomponents } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = Omit<ViewProps, 'children'> & {
     children: ReactElement | ReactElement[];
 };
 
-const allowedChildren = ['Drawer_Footer', 'Drawer_Header', 'Drawer_Content'];
+const allowedChildren = [
+    { name: 'Drawer_Footer', allowMultiple: false },
+    { name: 'Drawer_Header', allowMultiple: false },
+    { name: 'Drawer_Content', allowMultiple: false },
+];
 
 const Drawer = ({ style, children, ...rest }: Props) => {
-    const { Drawer_Header, Drawer_Footer, Drawer_Content } = useSubcomponents({
+    const {
+        Drawer_Header,
+        Drawer_Footer,
+        Drawer_Content,
+        rest: restChildren,
+    } = extractSubcomponents({
         children,
         allowedChildren,
+        includeRest: true,
     });
 
     return (
         <View style={[drawerStyles.root, style]} {...rest}>
-            {Drawer_Header[0]}
-            {Drawer_Content[0]}
-            {Drawer_Footer[0]}
+            {Drawer_Header}
+            {Drawer_Content}
+            {Drawer_Footer}
+            {restChildren}
         </View>
     );
 };

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/ElementGroup/ElementGroup.tsx

@@ -1,8 +1,8 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
-import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
 export enum Orientation {