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

package/components/List/types.ts

@@ -1,149 +1,117 @@
-import type { ComponentProps, ComponentType, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import {
+    type AccessibilityRole,
     type GestureResponderEvent,
-    ScrollView,
-    type TextInputProps,
-    type ViewProps,
+    type ScrollViewProps,
+    type StyleProp,
+    type ViewStyle,
 } from 'react-native';
 
-import type { InternalListItemProps as ListItemProps } from './List';
+import type { TouchableRippleProps } from '../TouchableRipple';
+
+export type ListItemId = string | number;
 
 export type DefaultListItemT = {
-    id: string | number;
+    id?: ListItemId;
     label?: string;
     selectable?: boolean;
-    [key: string]: any;
+    [key: string]: unknown;
 };
 
-export type ListValue<
-    Option extends DefaultListItemT,
-    Multiple extends boolean,
-> = Multiple extends true ? Option['id'][] : Option['id'] | null;
+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 DefaultListItemT = DefaultListItemT> = {
-    value: Option['id'] | Option['id'][] | null;
+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;
-    items: Option[];
-    searchQuery: string;
-    setSearchQuery: (query: string) => void;
-    filteredItems: Option[];
+    allowDeselect: boolean;
 };
 
-type ListPropsBase<Option extends DefaultListItemT = DefaultListItemT> = {
+type ListPropsBase = {
     children: ReactNode;
-    items: Option[];
     disabled?: boolean;
     error?: boolean;
-    searchKey?: string;
-    onSearchChange?: (query: string) => void;
-    hideSelected?: 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 DefaultListItemT = DefaultListItemT> = {
+type SingleListProps<Option extends object = DefaultListItemT> = {
     multiple?: false | undefined;
-    value?: ListValue<Option, false>;
-    defaultValue?: ListValue<Option, false>;
-    onChange?: (
-        value: ListValue<Option, false>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
 };
 
-type MultipleListProps<Option extends DefaultListItemT = DefaultListItemT> = {
+type MultipleListProps<Option extends object = DefaultListItemT> = {
     multiple: true;
-    value?: ListValue<Option, true>;
-    defaultValue?: ListValue<Option, true>;
-    onChange?: (
-        value: ListValue<Option, true>,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
 };
 
-export type ListProps<Option extends DefaultListItemT = DefaultListItemT> = ListPropsBase<Option> &
+export type ListProps<Option extends object = DefaultListItemT> = ListPropsBase &
     (SingleListProps<Option> | MultipleListProps<Option>);
 
+export type ListContentProps = Omit<ScrollViewProps, 'children'> & {
+    children?: ReactNode;
+};
+
 /**
- * Arguments passed to the `processProps` callback on `<List.Content>`.
+ * 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).
  *
- * Use these to adapt `List` context state into the prop contract required by
- * a custom container (for example `FlatList`'s `data`/`renderItem` or
- * `SectionList`'s `sections`/`renderItem`).
+ * 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 ListContentProcessPropsArgs<
-    Option extends DefaultListItemT = DefaultListItemT,
-    ContainerProps extends Record<string, any> = Record<string, any>,
-> = {
-    /** The user-provided props on `<List.Content>` minus `children`/`ref`. */
-    props: ContainerProps;
-    /** The current `filteredItems` from the List context. */
-    items: Option[];
-    /** True when there are no items to render after filtering. */
-    isEmpty: boolean;
-    /** Resolved empty state node (caller-provided or the default). */
-    emptyState: ReactNode;
-    /** Returns whether the given item is currently selected. */
-    isSelected: (item: Option) => boolean;
-};
-
-type ListContentPropsShared<C extends ComponentType<any> = typeof ScrollView> = Partial<
-    Omit<ComponentProps<C>, 'children' | 'ref'>
-> & {
-    /**
-     * The component used to render the scrollable container. Defaults to ScrollView.
-     * The rest of the props on `<List.Content>` are inferred from this component's props.
-     *
-     * Required props (e.g. `FlatList`'s `data`/`renderItem`) can be supplied
-     * either directly or via `processProps`.
-     */
-    ContainerComponent?: C;
-    emptyState?: ReactNode;
-};
-
-export type ListContentProps<
-    Option extends DefaultListItemT = DefaultListItemT,
-    C extends ComponentType<any> = typeof ScrollView,
-> = ListContentPropsShared<C> &
-    (
-        | {
-              /**
-               * Optional when `processProps` renders rows/items itself (e.g. chunked grid rows).
-               */
-              processProps: (
-                  args: ListContentProcessPropsArgs<
-                      Option,
-                      Omit<ComponentProps<C>, 'children' | 'ref'>
-                  >,
-              ) => ComponentProps<C>;
-              children?: (item: Option, isSelected: boolean) => ReactNode;
-          }
-        | {
-              processProps?: undefined;
-              children: (item: Option, isSelected: boolean) => ReactNode;
-          }
-    );
-
-export type ListGroupProps = ViewProps & {
-    children: ReactNode;
-    label?: string;
-};
-
-export type ListItemOptionProps<Option extends DefaultListItemT = DefaultListItemT> = Omit<
-    ListItemProps,
-    'children' | 'selected' | 'disabled' | 'onPress'
+export type ListItemProps<Option extends object = DefaultListItemT> = Omit<
+    TouchableRippleProps,
+    'children' | 'onPress'
 > & {
-    value: Option['id'];
-    children: ReactNode;
-    onPress?: (item: Option, event: GestureResponderEvent) => void;
+    ref?: RefObject<unknown>;
+    children?: ReactNode;
+    value?: ListItemId;
+    style?: StyleProp<ViewStyle>;
+    variant?: 'default' | 'menuItem';
+    selected?: boolean;
     disabled?: boolean;
+    hovered?: boolean;
+    hoverable?: boolean;
     shouldToggleOnPress?: boolean;
-    accessibilityRole?: any;
+    /** 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 ListSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'>;
+export type ListItemElementProps = {
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+};

package/components/List/utils.ts

@@ -3,19 +3,6 @@ import { StyleSheet } from 'react-native-unistyles';
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const defaultStyles = StyleSheet.create(theme => ({
-    groupLabel: {
-        paddingHorizontal: theme.spacings['4'],
-        paddingVertical: theme.spacings['2'],
-        fontWeight: '600',
-        color: theme.colors.onSurface,
-    },
-    searchInput: {
-        marginHorizontal: theme.spacings['2'],
-        marginVertical: theme.spacings['3'],
-    },
-    searchInputInput: {
-        height: 42,
-    },
     emptyState: {
         paddingHorizontal: theme.spacings['4'],
         paddingVertical: theme.spacings['6'],
@@ -33,6 +20,9 @@ export const listStyles = getRegisteredComponentStylesWithFallback('List', defau
 const listItemStylesDefault = StyleSheet.create(theme => ({
     root: {
         backgroundColor: theme.colors.surface,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: theme.spacings['4'],
 
         _web: {
             outlineStyle: 'none',
@@ -58,37 +48,14 @@ const listItemStylesDefault = StyleSheet.create(theme => ({
                     paddingLeft: theme.spacings['4'],
                     paddingRight: theme.spacings['6'],
                     minHeight: 56,
-                    justifyContent: 'center',
                 },
                 menuItem: {
                     paddingHorizontal: theme.spacings['3'],
-                    minHeight: 48,
-                    justifyContent: 'center',
+                    minHeight: 40,
                 },
             },
         },
     },
-
-    innerContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        minHeight: 40,
-    },
-
-    content: {
-        flex: 1,
-        justifyContent: 'center',
-        minHeight: 40,
-    },
-
-    leftElement: {
-        marginRight: theme.spacings['4'],
-        marginLeft: theme.spacings._1,
-    },
-    rightElement: {
-        marginRight: theme.spacings._1,
-        marginLeft: theme.spacings['4'],
-    },
     stateLayer: {
         variants: {
             state: {

package/components/Menu/Menu.tsx

@@ -29,20 +29,16 @@ type MenuBaseProps = Omit<
     style?: ViewStyle;
     closeOnSelect?: boolean;
     children: ReactElement | ReactElement[];
-    backdropStyles?: ViewStyle;
-    items?: DefaultListItemT[];
     disabled?: boolean;
-    searchKey?: string;
-    onSearchChange?: (query: string) => void;
-    hideSelected?: boolean;
+    allowDeselect?: boolean;
 };
 
 type SingleMenuProps = {
     multiple?: false | undefined;
-    value?: ListValue<DefaultListItemT, false>;
-    defaultValue?: ListValue<DefaultListItemT, false>;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
     onChange?: (
-        value: ListValue<DefaultListItemT, false>,
+        value: ListValue<false>,
         item: DefaultListItemT,
         event?: GestureResponderEvent,
     ) => void;
@@ -50,10 +46,10 @@ type SingleMenuProps = {
 
 type MultipleMenuProps = {
     multiple: true;
-    value?: ListValue<DefaultListItemT, true>;
-    defaultValue?: ListValue<DefaultListItemT, true>;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
     onChange?: (
-        value: ListValue<DefaultListItemT, true>,
+        value: ListValue<true>,
         item: DefaultListItemT,
         event?: GestureResponderEvent,
     ) => void;
@@ -61,34 +57,25 @@ type MultipleMenuProps = {
 
 export type Props = MenuBaseProps & (SingleMenuProps | MultipleMenuProps);
 
-const emptyObj = {} as ViewStyle;
-
-const emptyArr = [] as DefaultListItemT[];
-
 const Menu = ({
     children,
     style: styleProp,
-    backdropStyles = emptyObj,
     closeOnSelect = true,
-    items,
     value,
     defaultValue,
     onChange,
     multiple,
     disabled,
-    searchKey,
-    onSearchChange,
-    hideSelected,
+    allowDeselect,
     ...rest
 }: Props) => {
     const { isOpen, onClose, triggerRef } = useContext(MenuRootContext);
 
-    const { backdropStyle, style } = useMemo(() => {
+    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(
         () => ({
@@ -99,20 +86,16 @@ const Menu = ({
     );
 
     const listProps = {
-        items: items ?? emptyArr,
         multiple,
         value,
         defaultValue,
         onChange,
         disabled,
-        searchKey,
-        onSearchChange,
-        hideSelected,
+        allowDeselect,
     } as ListProps<DefaultListItemT>;
 
     return (
         <Popover isOpen={isOpen} onClose={onClose} style={style} triggerRef={triggerRef} {...rest}>
-            <Popover.Overlay style={backdropStyle} />
             <List {...listProps}>
                 <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
             </List>
@@ -187,9 +170,9 @@ export const MenuItem = memo(({ onPress, children, ...rest }: MenuItemProps) =>
     );
 
     return (
-        <List.Row {...rest} variant="menuItem" onPress={handlePress}>
+        <List.Item variant="menuItem" {...rest} onPress={handlePress}>
             {children}
-        </List.Row>
+        </List.Item>
     );
 });
 

package/components/Menu/index.tsx

@@ -8,8 +8,6 @@ export const MenuDefault = Object.assign(MenuComponent, {
     Trigger: MenuTrigger,
     Item: MenuItem,
     Content: List.Content,
-    Group: List.Group,
-    SearchInput: List.SearchInput,
     RootContext: MenuRootContext,
 });
 

package/components/Popover/Popover.tsx

@@ -27,9 +27,7 @@ import { createPopoverRoot } from './PopoverRoot';
 import { usePlatformMeasure } from './usePlatformMeasure';
 import { popoverStyles } from './utils';
 
-type PopoverPanelProps = PopoverProps & {
-    overlay?: ReactNode;
-};
+type PopoverPanelProps = PopoverProps & { backdrop?: ReactNode };
 
 const PopoverPanel = ({
     triggerRef,
@@ -45,7 +43,7 @@ const PopoverPanel = ({
     offset = 8,
     horizontalOffset = 0,
     triggerDimensions,
-    overlay,
+    backdrop,
     ...rest
 }: PopoverPanelProps) => {
     const {
@@ -58,11 +56,13 @@ const PopoverPanel = ({
     } = usePopover({ isOpen, position, align, offset, horizontalOffset });
 
     const popoverRef = useRef<View>(null);
+    const hasBackdrop = !!backdrop;
 
     const { popoverStyle } = usePlatformMeasure({
         triggerRef,
         isOpen,
         onClose,
+        dismissOnClickOutside: !hasBackdrop,
         calculatedPosition,
         calculateAndSetPosition,
         targetLayoutRef,
@@ -93,8 +93,8 @@ const PopoverPanel = ({
     return (
         <Portal>
             <PopoverPanelContext value={panelContextValue}>
+                {backdrop}
                 <Wrapper {...(WrapperProps as any)}>
-                    {overlay}
                     <View
                         onLayout={handlePopoverLayout}
                         style={[popoverStyles.popoverContainer, style, popoverStyle]}
@@ -127,10 +127,7 @@ export const PopoverTrigger = memo(
 );
 PopoverTrigger.displayName = 'Popover_Trigger';
 
-export const PopoverContent = memo(({ children }: { children?: ReactNode }) => <>{children}</>);
-PopoverContent.displayName = 'Popover_Content';
-
-export const PopoverOverlay = memo(({ style, onPress, ...rest }: PressableProps) => {
+export const PopoverBackdrop = memo(({ style, onPress, ...rest }: PressableProps) => {
     const { isOpen, onClose } = useContext(PopoverContext);
     if (!isOpen) return null;
     return (
@@ -141,7 +138,7 @@ export const PopoverOverlay = memo(({ style, onPress, ...rest }: PressableProps)
         />
     );
 });
-PopoverOverlay.displayName = 'Popover_Overlay';
+PopoverBackdrop.displayName = 'Popover_Backdrop';
 
 type PopoverArrowProps = {
     size?: number;

package/components/Popover/PopoverRoot.tsx

@@ -1,17 +1,10 @@
-import {
-    type ComponentType,
-    memo,
-    type ReactElement,
-    type ReactNode,
-    useMemo,
-    useRef,
-} from 'react';
+import { type ComponentType, memo, type ReactNode, useMemo, useRef } from 'react';
 import { type View } from 'react-native';
 
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { PopoverContext, type PopoverProps } from './common';
 
-type PopoverPanelInternalProps = PopoverProps & { overlay?: ReactNode };
+type PopoverPanelInternalProps = PopoverProps & { backdrop?: ReactNode };
 
 export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelInternalProps>) => {
     const PopoverRoot = ({
@@ -25,15 +18,13 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
 
         const {
             Popover_Trigger,
-            Popover_Content,
-            Popover_Overlay,
+            Popover_Backdrop,
             rest: restChildren,
         } = extractSubcomponents({
             children,
             allowedChildren: [
                 { name: 'Popover_Trigger', allowMultiple: false },
-                { name: 'Popover_Content', allowMultiple: false },
-                { name: 'Popover_Overlay', allowMultiple: false },
+                { name: 'Popover_Backdrop', allowMultiple: false },
             ] as const,
             includeRest: true,
         });
@@ -41,11 +32,6 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
         const hasTrigger = Popover_Trigger.length > 0;
         const resolvedTriggerRef = triggerRefProp ?? (hasTrigger ? internalTriggerRef : undefined);
 
-        const panelContent =
-            Popover_Content.length > 0
-                ? (Popover_Content[0] as ReactElement<{ children?: ReactNode }>).props.children
-                : restChildren;
-
         const contextValue = useMemo(
             () => ({
                 triggerRef: resolvedTriggerRef ?? internalTriggerRef,
@@ -62,9 +48,9 @@ export const createPopoverRoot = (PopoverPanel: ComponentType<PopoverPanelIntern
                     triggerRef={resolvedTriggerRef}
                     isOpen={isOpen}
                     onClose={onClose}
-                    overlay={Popover_Overlay[0]}
+                    backdrop={Popover_Backdrop[0]}
                     {...rest}>
-                    {panelContent}
+                    {restChildren}
                 </PopoverPanel>
             </PopoverContext>
         );

package/components/Popover/common.ts

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { LayoutRectangle, StyleProp, View, ViewStyle } from 'react-native';
 import { Dimensions, StyleSheet } from 'react-native';
 
+import { registerPortalContext } from '../Portal';
+
 export type Position = 'top' | 'left' | 'right' | 'bottom';
 export type Align = 'start' | 'center' | 'end';
 
@@ -27,6 +29,8 @@ export const PopoverContext = createContext<PopoverContextValue>({
     triggerRef: { current: null },
 });
 
+registerPortalContext(PopoverContext);
+
 export type PopoverPanelContextValue = {
     calculatedPosition: ViewStyle | null;
     targetLayoutRef: RefObject<LayoutRectangle | null>;

package/components/Popover/index.ts

@@ -1,18 +1,12 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import PopoverDefault, {
-    PopoverArrow,
-    PopoverContent,
-    PopoverOverlay,
-    PopoverTrigger,
-} from './Popover';
+import PopoverDefault, { PopoverArrow, PopoverBackdrop, PopoverTrigger } from './Popover';
 
 const PopoverBase = getRegisteredComponentWithFallback('Popover', PopoverDefault);
 
 export const Popover = Object.assign(PopoverBase, {
     Trigger: PopoverTrigger,
-    Content: PopoverContent,
     Arrow: PopoverArrow,
-    Overlay: PopoverOverlay,
+    Backdrop: PopoverBackdrop,
 });
 
 export type { Align, PopoverProps, Position } from './common';

package/components/Popover/usePlatformMeasure.ts

@@ -7,6 +7,7 @@ export type UsePlatformMeasureArgs = {
     triggerRef: RefObject<View | any> | undefined;
     isOpen: boolean;
     onClose?: () => void;
+    dismissOnClickOutside?: boolean;
     calculatedPosition: ViewStyle | null;
     calculateAndSetPosition: () => void;
     targetLayoutRef: RefObject<LayoutRectangle | null>;
@@ -23,6 +24,7 @@ export const usePlatformMeasure = ({
     triggerRef,
     isOpen,
     onClose,
+    dismissOnClickOutside = true,
     calculatedPosition,
     calculateAndSetPosition,
     targetLayoutRef,
@@ -82,7 +84,7 @@ export const usePlatformMeasure = ({
     }, [isOpen, measureTarget, triggerRef]);
 
     useEffect(() => {
-        if (!isOpen || !onClose) return;
+        if (!isOpen || !onClose || !dismissOnClickOutside) return;
         const handleClickOutside = (event: MouseEvent) => {
             const popoverElement = popoverRef.current as any as HTMLElement;
             const targetElement = triggerRef?.current as any as HTMLElement;
@@ -99,7 +101,7 @@ export const usePlatformMeasure = ({
         return () => {
             document.removeEventListener('mousedown', handleClickOutside, { capture: true });
         };
-    }, [isOpen, onClose, popoverRef, triggerRef]);
+    }, [dismissOnClickOutside, isOpen, onClose, popoverRef, triggerRef]);
 
     const popoverStyle = useMemo(() => {
         if (!calculatedPosition) return popoverDefaultStyles;