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

package/components/List/List.tsx

@@ -0,0 +1,275 @@
+import { memo, useCallback, useMemo } from 'react';
+import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+
+import { typedMemo } from '../../hocs';
+import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { resolveStateVariant } from '../../utils';
+import { StateLayer } from '../StateLayer';
+import { TouchableRipple } from '../TouchableRipple';
+import { ListContextProvider, useListContextValue } from './context';
+import type {
+    DefaultListItemT,
+    ListContentProps,
+    ListContextValue,
+    ListItemId,
+    ListItemProps,
+    ListProps,
+} from './types';
+import { listItemStyles } from './utils';
+
+const _ListItemBase = ({
+    ref,
+    children,
+    style: styleProp,
+    disabled = false,
+    variant = 'menuItem',
+    selected = false,
+    onPress,
+    hoverable: hoverableProp = false,
+    hovered: hoveredProp = false,
+    ...props
+}: ListItemProps) => {
+    const {
+        hovered: _hovered,
+        focused,
+        actionsRef,
+    } = useActionState({ ref, actionsToListen: ['hover', 'focus'] });
+    const hoverable = hoverableProp || !!onPress;
+    const hovered = hoveredProp || _hovered;
+
+    const state = resolveStateVariant({
+        selectedAndFocused: selected && focused,
+        selected,
+        disabled,
+        hovered: hoverable && hovered,
+        focused,
+    });
+
+    listItemStyles.useVariants({
+        state: state as never,
+        variant: variant as never,
+    });
+
+    const containerStyles = useMemo(
+        () => [listItemStyles.root, styleProp],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [styleProp, state, variant],
+    );
+
+    return (
+        <TouchableRipple
+            {...props}
+            style={containerStyles as StyleProp<ViewStyle>}
+            disabled={disabled}
+            onPress={onPress}
+            ref={actionsRef}>
+            <>
+                {children}
+                <StateLayer style={listItemStyles.stateLayer} />
+            </>
+        </TouchableRipple>
+    );
+};
+
+const ListItemBase = memo(_ListItemBase);
+
+const _ListItemSelectable = <Option extends object = DefaultListItemT>({
+    value,
+    children,
+    onPress,
+    onBeforeToggle,
+    disabled: itemDisabledProp = false,
+    shouldToggleOnPress = true,
+    accessibilityRole,
+    accessibilityState,
+    variant,
+    ...rest
+}: ListItemProps<Option> & { value: ListItemId }) => {
+    const {
+        onAdd,
+        onRemove,
+        disabled: listDisabled,
+        allowDeselect,
+        isSelectedId,
+    } = useListContextValue(state => ({
+        onAdd: state.onAdd as (item: Option) => void,
+        onRemove: state.onRemove as (item: Option) => void,
+        disabled: state.disabled,
+        allowDeselect: state.allowDeselect,
+        isSelectedId: state.isSelectedId,
+    }));
+
+    const option = useMemo(
+        () =>
+            ({
+                id: value,
+                ...(itemDisabledProp ? { selectable: false } : {}),
+            } as Option),
+        [itemDisabledProp, value],
+    );
+
+    const isSelected = isSelectedId(value);
+
+    const isSelectable = (option as Record<string, unknown>).selectable;
+    const isOptionDisabled = Boolean(listDisabled || itemDisabledProp || isSelectable === false);
+
+    const handlePress = useCallback(
+        (
+            event: NonNullable<ListItemProps<Option>['onPress']> extends (event: infer E) => void
+                ? E
+                : never,
+        ) => {
+            if (isOptionDisabled) return;
+            onPress?.(event);
+
+            if (!shouldToggleOnPress) return;
+            onBeforeToggle?.(event);
+
+            if (isSelected) {
+                if (allowDeselect) onRemove(option);
+                return;
+            }
+            onAdd(option);
+        },
+        [
+            allowDeselect,
+            isOptionDisabled,
+            isSelected,
+            onAdd,
+            onBeforeToggle,
+            onPress,
+            onRemove,
+            option,
+            shouldToggleOnPress,
+        ],
+    );
+
+    return (
+        <ListItemBase
+            {...(rest as ListItemProps)}
+            selected={isSelected}
+            disabled={isOptionDisabled}
+            onPress={handlePress}
+            variant={variant ?? 'menuItem'}
+            accessibilityRole={accessibilityRole}
+            accessibilityState={
+                accessibilityState ?? { selected: isSelected, disabled: isOptionDisabled }
+            }>
+            {children}
+        </ListItemBase>
+    );
+};
+
+const ListItemSelectable = typedMemo(_ListItemSelectable);
+
+const _ListItem = <Option extends object = DefaultListItemT>(props: ListItemProps<Option>) => {
+    if (props.value !== undefined) {
+        return <ListItemSelectable {...(props as ListItemProps<Option> & { value: ListItemId })} />;
+    }
+    return <ListItemBase {...(props as ListItemProps)} />;
+};
+
+const ListItem = typedMemo(_ListItem);
+
+type ControlledListValue = ListItemId | ListItemId[] | null;
+
+const emptyArr: ListItemId[] = [];
+
+const ListProvider = typedMemo(
+    <Option extends object = DefaultListItemT>({
+        children,
+        value: valueProp,
+        defaultValue,
+        onChange,
+        multiple = false,
+        disabled = false,
+        error = false,
+        allowDeselect: allowDeselectProp,
+    }: ListProps<Option>) => {
+        const [value, onValueChange] = useControlledValue<ControlledListValue>({
+            value: valueProp,
+            defaultValue: defaultValue ?? (multiple ? (emptyArr as ListItemId[]) : null),
+            onChange: onChange as
+                | ((value: ControlledListValue, item: Option, event?: unknown) => void)
+                | undefined,
+        });
+        const valueRef = useLatest(value);
+
+        const allowDeselect = allowDeselectProp !== undefined ? allowDeselectProp : multiple;
+        const isSelectedId = useCallback(
+            (id: ListItemId) => {
+                if (multiple) {
+                    const values = (value as ListItemId[] | null | undefined) ?? [];
+                    return values.some(v => v === id);
+                }
+                return (value as ListItemId | null) === id;
+            },
+            [multiple, value],
+        );
+
+        const onAdd = useCallback(
+            (item: Option) => {
+                const id = (item as { id?: ListItemId }).id as ListItemId;
+                if (multiple) {
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    if (!currentValue.find(v => v === id)) {
+                        onValueChange([...currentValue, id], item);
+                    }
+                    return;
+                }
+
+                onValueChange(id, item);
+            },
+            [multiple, onValueChange, valueRef],
+        );
+
+        const onRemove = useCallback(
+            (item: Option) => {
+                const id = (item as { id?: ListItemId }).id as ListItemId;
+                if (multiple) {
+                    const currentValue = (valueRef.current as ListItemId[]) || [];
+                    onValueChange(
+                        currentValue.filter(v => v !== id),
+                        item,
+                    );
+                    return;
+                }
+
+                onValueChange(null, item);
+            },
+            [multiple, onValueChange, valueRef],
+        );
+
+        const contextValue = {
+            value,
+            multiple,
+            onAdd: onAdd as (item: DefaultListItemT) => void,
+            onRemove: onRemove as (item: DefaultListItemT) => void,
+            isSelectedId,
+            disabled,
+            error,
+            allowDeselect,
+        } as ListContextValue<DefaultListItemT>;
+
+        return <ListContextProvider value={contextValue}>{children}</ListContextProvider>;
+    },
+);
+
+const ListContent = typedMemo(
+    ({ ref, children, style, ...rest }: ListContentProps & { ref?: React.ForwardedRef<any> }) => {
+        return (
+            <ScrollView style={style} {...rest} ref={ref}>
+                {children}
+            </ScrollView>
+        );
+    },
+);
+
+const List = Object.assign(ListProvider, {
+    Content: ListContent,
+    Item: ListItem,
+});
+
+export default List;
+
+export { ListContent, ListItem, ListProvider };

package/components/List/context.tsx

@@ -0,0 +1,26 @@
+import { createFastContext } from '../../fast-context';
+import { registerPortalContext } from '../Portal';
+import type { DefaultListItemT, ListContextValue } from './types';
+
+const listContextDefaultValue: ListContextValue<DefaultListItemT> = {
+    value: null,
+    multiple: false,
+    onAdd: () => {},
+    onRemove: () => {},
+    isSelectedId: () => false,
+    disabled: false,
+    error: false,
+    allowDeselect: false,
+};
+
+const {
+    useStoreRef: useListStoreRef,
+    Provider: ListContextProvider,
+    useContext: useListContext,
+    useContextValue: useListContextValue,
+    Context: ListContext,
+} = createFastContext<ListContextValue<DefaultListItemT>>(listContextDefaultValue, true);
+
+export { ListContext, ListContextProvider, useListContext, useListContextValue, useListStoreRef };
+
+registerPortalContext([ListContext]);

package/components/List/index.ts

@@ -0,0 +1,8 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import ListDefault from './List';
+
+export const List = getRegisteredComponentWithFallback('List', ListDefault);
+
+export * from './context';
+export type * from './types';
+export * from './utils';

package/components/List/types.ts

@@ -0,0 +1,117 @@
+import type { ReactNode, RefObject } from 'react';
+import {
+    type AccessibilityRole,
+    type GestureResponderEvent,
+    type ScrollViewProps,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type ListItemId = string | number;
+
+export type DefaultListItemT = {
+    id?: ListItemId;
+    label?: string;
+    selectable?: boolean;
+    [key: string]: unknown;
+};
+
+export type ListValue<Multiple extends boolean = false> = Multiple extends true
+    ? ListItemId[]
+    : ListItemId | null;
+
+export type ListEmptyStateRender = (ctx: {
+    /** True when `items` (the raw input) has at least one entry. */
+    hasItems: boolean;
+}) => ReactNode;
+
+export type ListContextValue<Option extends object = DefaultListItemT> = {
+    value: ListItemId | ListItemId[] | null;
+    multiple: boolean;
+    onAdd: (item: Option) => void;
+    onRemove: (item: Option) => void;
+    isSelectedId: (id: ListItemId) => boolean;
+    disabled?: boolean;
+    error: boolean;
+    allowDeselect: boolean;
+};
+
+type ListPropsBase = {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    /**
+     * Whether re-clicking the currently-selected row should remove it. Defaults
+     * to `true` for multiple, `false` for single (re-clicking the picked row
+     * in a "pick one and close" flow shouldn't clear the value).
+     */
+    allowDeselect?: boolean;
+};
+
+type SingleListProps<Option extends object = DefaultListItemT> = {
+    multiple?: false | undefined;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+type MultipleListProps<Option extends object = DefaultListItemT> = {
+    multiple: true;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+export type ListProps<Option extends object = DefaultListItemT> = ListPropsBase &
+    (SingleListProps<Option> | MultipleListProps<Option>);
+
+export type ListContentProps = Omit<ScrollViewProps, 'children'> & {
+    children?: ReactNode;
+};
+
+/**
+ * Props for `<List.Item>`. When `value` is provided, the item participates in the
+ * surrounding `<List>` context — it derives its `selected` state from the context's
+ * value and toggles selection on press (unless `shouldToggleOnPress` is false).
+ *
+ * Without `value`, the item is a plain styled row (use it for menu-style entries
+ * that don't represent a selectable option).
+ *
+ * Note: when `value` is set, both `onPress` and the selection toggle fire on press,
+ * in that order. For most cases that's fine — pass `onPress` for side effects
+ * (e.g. closing a menu) and let the toggle drive `onChange`. Pass
+ * `onBeforeToggle` for side effects that should only run when the built-in
+ * toggle will happen. Set `shouldToggleOnPress={false}` to suppress the toggle entirely.
+ *
+ * Deselection: by default, single-select rows do **not** deselect on re-click
+ * (use `<List allowDeselect>` to opt in or out at the list level).
+ */
+export type ListItemProps<Option extends object = DefaultListItemT> = Omit<
+    TouchableRippleProps,
+    'children' | 'onPress'
+> & {
+    ref?: RefObject<unknown>;
+    children?: ReactNode;
+    value?: ListItemId;
+    style?: StyleProp<ViewStyle>;
+    variant?: 'default' | 'menuItem';
+    selected?: boolean;
+    disabled?: boolean;
+    hovered?: boolean;
+    hoverable?: boolean;
+    shouldToggleOnPress?: boolean;
+    /** Runs after `onPress`, before the built-in selection toggle. */
+    onBeforeToggle?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityState?: Record<string, unknown>;
+    /** Reserved for generic item shape; not consumed directly. */
+    __optionType?: Option;
+};
+
+export type ListItemElementProps = {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};

package/components/List/utils.ts

@@ -0,0 +1,79 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+const defaultStyles = StyleSheet.create(theme => ({
+    emptyState: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['6'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyStateText: {
+        color: theme.colors.onSurfaceVariant,
+        fontSize: 14,
+    },
+}));
+
+export const listStyles = getRegisteredComponentStylesWithFallback('List', defaultStyles);
+
+const listItemStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        backgroundColor: theme.colors.surface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacings['4'],
+
+        _web: {
+            outlineStyle: 'none',
+        },
+
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                },
+                hovered: {},
+                focused: {},
+
+                selected: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+            },
+            variant: {
+                default: {
+                    paddingLeft: theme.spacings['4'],
+                    paddingRight: theme.spacings['6'],
+                    minHeight: 56,
+                },
+                menuItem: {
+                    paddingHorizontal: theme.spacings['3'],
+                    minHeight: 40,
+                },
+            },
+        },
+    },
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                focused: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                selectedAndFocused: {
+                    backgroundColor: theme.colors.stateLayer.focussed.onSurface,
+                },
+            },
+        },
+    },
+}));
+
+export const listItemStyles = getRegisteredComponentStylesWithFallback(
+    'List_Item',
+    listItemStylesDefault,
+);

package/components/Menu/Menu.tsx

@@ -1,34 +1,81 @@
-import { createContext, memo, type ReactElement, useMemo } from 'react';
-import type { ViewStyle } from 'react-native';
+import {
+    Children,
+    cloneElement,
+    memo,
+    type ReactElement,
+    type ReactNode,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import type { GestureResponderEvent, ViewStyle } from 'react-native';
 
+import {
+    type DefaultListItemT,
+    List,
+    type ListItemProps,
+    type ListProps,
+    type ListValue,
+} from '../List';
 import { Popover, type PopoverProps } from '../Popover';
-import { menuStyles } from './utils';
+import { MenuContext, MenuRootContext, menuStyles } from './utils';
 
-export type Props = Omit<PopoverProps, 'setIsOpen' | 'onClose' | 'children'> & {
+type MenuBaseProps = Omit<
+    PopoverProps,
+    'setIsOpen' | 'onClose' | 'isOpen' | 'triggerRef' | 'children'
+> & {
     style?: ViewStyle;
     closeOnSelect?: boolean;
-    onClose: () => void;
     children: ReactElement | ReactElement[];
-    backdropStyles?: ViewStyle;
+    disabled?: boolean;
+    allowDeselect?: boolean;
 };
 
-const emptyObj = {} as ViewStyle;
+type SingleMenuProps = {
+    multiple?: false | undefined;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (
+        value: ListValue<false>,
+        item: DefaultListItemT,
+        event?: GestureResponderEvent,
+    ) => void;
+};
+
+type MultipleMenuProps = {
+    multiple: true;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (
+        value: ListValue<true>,
+        item: DefaultListItemT,
+        event?: GestureResponderEvent,
+    ) => void;
+};
+
+export type Props = MenuBaseProps & (SingleMenuProps | MultipleMenuProps);
 
 const Menu = ({
-    isOpen,
-    onClose,
     children,
     style: styleProp,
-    backdropStyles = emptyObj,
     closeOnSelect = true,
+    value,
+    defaultValue,
+    onChange,
+    multiple,
+    disabled,
+    allowDeselect,
     ...rest
 }: Props) => {
-    const { backdropStyle, style } = useMemo(() => {
+    const { isOpen, onClose, triggerRef } = useContext(MenuRootContext);
+
+    const { style } = useMemo(() => {
         return {
-            backdropStyle: [menuStyles.backdrop, backdropStyles] as unknown as ViewStyle,
             style: [menuStyles.root, styleProp] as unknown as ViewStyle,
         };
-    }, [backdropStyles, styleProp]);
+    }, [styleProp]);
 
     const contextValue = useMemo(
         () => ({
@@ -38,17 +85,97 @@ const Menu = ({
         [closeOnSelect, onClose],
     );
 
+    const listProps = {
+        multiple,
+        value,
+        defaultValue,
+        onChange,
+        disabled,
+        allowDeselect,
+    } as ListProps<DefaultListItemT>;
+
     return (
-        <Popover isOpen={isOpen} onClose={onClose} style={style} {...rest}>
-            <Popover.Overlay style={backdropStyle} />
-            <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+        <Popover isOpen={isOpen} onClose={onClose} style={style} triggerRef={triggerRef} {...rest}>
+            <List {...listProps}>
+                <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+            </List>
         </Popover>
     );
 };
 
-export const MenuContext = createContext({
-    closeOnSelect: true,
-    onClose: () => {},
+export type MenuRootProps = {
+    children: ReactNode;
+};
+
+export const MenuRoot = memo(({ children }: MenuRootProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+
+    const onOpen = useCallback(() => setIsOpen(true), []);
+    const onClose = useCallback(() => setIsOpen(false), []);
+
+    const contextValue = useMemo(
+        () => ({ isOpen, onOpen, onClose, triggerRef }),
+        [isOpen, onOpen, onClose],
+    );
+
+    return <MenuRootContext.Provider value={contextValue}>{children}</MenuRootContext.Provider>;
 });
 
+MenuRoot.displayName = 'Menu_Root';
+
+export type MenuTriggerProps = {
+    children: ReactElement;
+};
+
+export const MenuTrigger = memo(({ children }: MenuTriggerProps) => {
+    const { onOpen, triggerRef } = useContext(MenuRootContext);
+
+    const onPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onPress?.(e);
+            onOpen();
+        },
+        [children?.props, onOpen],
+    );
+
+    return useMemo(
+        () =>
+            cloneElement(Children.only(children), {
+                // @ts-ignore
+                ref: triggerRef,
+                onPress,
+            }),
+        [children, triggerRef, onPress],
+    );
+});
+
+MenuTrigger.displayName = 'Menu_Trigger';
+
+export type MenuItemProps = Omit<ListItemProps, 'children' | 'onPress'> & {
+    children: ReactNode;
+    onPress?: (event: GestureResponderEvent) => void;
+};
+
+export const MenuItem = memo(({ onPress, children, ...rest }: MenuItemProps) => {
+    const { closeOnSelect, onClose } = useContext(MenuContext);
+
+    const handlePress = useCallback(
+        (event: GestureResponderEvent) => {
+            onPress?.(event);
+            if (closeOnSelect) onClose();
+        },
+        [closeOnSelect, onClose, onPress],
+    );
+
+    return (
+        <List.Item variant="menuItem" {...rest} onPress={handlePress}>
+            {children}
+        </List.Item>
+    );
+});
+
+MenuItem.displayName = 'Menu_Item';
+
 export default memo(Menu);