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

package/components/Select/context.tsx

@@ -0,0 +1,81 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+import type { View } from 'react-native';
+
+import {
+    ListContext,
+    ListContextProvider,
+    useListContext,
+    useListContextValue,
+    useListStoreRef,
+} from '../List';
+import { registerPortalContext } from '../Portal';
+import type { DefaultItemT, SelectDropdownContextValue, SelectSearchContextValue } from './types';
+
+export {
+    ListContext as SelectContext,
+    ListContextProvider as SelectContextProvider,
+    useListContext as useSelectContext,
+    useListContextValue as useSelectContextValue,
+    useListStoreRef as useSelectStoreRef,
+};
+
+// SelectDropdownContext - holds isOpen, onClose, triggerRef with fast-context
+export type SelectDropdownContextType = SelectDropdownContextValue & {
+    triggerRef: React.RefObject<View> | null;
+    triggerLayout: { width: number; height: number } | null;
+    setTriggerLayout: (layout: { width: number; height: number }) => void;
+    triggerHovered?: boolean;
+};
+
+const selectDropdownContextDefaultValue: SelectDropdownContextType = {
+    isOpen: false,
+    onClose: () => {},
+    onOpen: () => {},
+    triggerRef: null,
+    triggerLayout: null,
+    setTriggerLayout: () => {},
+    triggerHovered: false,
+};
+
+const {
+    useStoreRef: useSelectDropdownStoreRef,
+    Provider: SelectDropdownContextProvider,
+    useContext: useSelectDropdownContext,
+    useContextValue: useSelectDropdownContextValue,
+    Context: SelectDropdownContext,
+} = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
+
+const selectSearchContextDefaultValue: SelectSearchContextValue<DefaultItemT> = {
+    searchQuery: '',
+    setSearchQuery: () => {},
+    allOptions: [],
+    options: [],
+    optionById: new Map(),
+    getOptionId: item => item.id,
+};
+
+const {
+    useStoreRef: useSelectSearchStoreRef,
+    Provider: SelectSearchContextProvider,
+    useContext: useSelectSearchContext,
+    useContextValue: useSelectSearchContextValue,
+    Context: SelectSearchContext,
+} = createFastContext<SelectSearchContextValue<DefaultItemT>>(
+    selectSearchContextDefaultValue,
+    true,
+);
+
+export {
+    SelectDropdownContext,
+    SelectDropdownContextProvider,
+    SelectSearchContext,
+    SelectSearchContextProvider,
+    useSelectDropdownContext,
+    useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
+    useSelectSearchContext,
+    useSelectSearchContextValue,
+    useSelectSearchStoreRef,
+};
+
+registerPortalContext([SelectDropdownContext, SelectSearchContext]);

package/components/Select/index.ts

@@ -1,14 +1,26 @@
-export { default as Select } from './Select';
-export type {
-    DefaultItemT,
-    SelectContentProps,
-    SelectContextValue,
-    SelectDropdownContextValue,
-    SelectDropdownProps,
-    SelectGroupProps,
-    SelectOptionProps,
-    SelectProviderProps,
-    SelectSearchInputProps,
-    SelectTriggerProps,
-    SelectValueProps,
-} from './types';
+import { getRegisteredComponentWithFallback } from '../../core';
+import SelectRoot, {
+    SelectContent,
+    SelectDropdown,
+    SelectOption,
+    SelectSearchInput,
+    SelectTrigger,
+    SelectTriggerOutline,
+    SelectValue,
+} from './Select';
+
+const SelectWithSubcomponents = Object.assign(SelectRoot, {
+    Trigger: SelectTrigger,
+    TriggerOutline: SelectTriggerOutline,
+    Value: SelectValue,
+    Dropdown: SelectDropdown,
+    Content: SelectContent,
+    Option: SelectOption,
+    SearchInput: SelectSearchInput,
+});
+
+export const Select = getRegisteredComponentWithFallback('Select', SelectWithSubcomponents);
+
+export * from './context';
+export type * from './types';
+export * from './utils';

package/components/Select/types.ts

@@ -1,33 +1,16 @@
 import type { ComponentType, ReactNode } from 'react';
-import type {
-    GestureResponderEvent,
-    ScrollViewProps,
-    TextInputProps,
-    ViewProps,
-} from 'react-native';
+import type { GestureResponderEvent, TextInputProps, ViewProps } from 'react-native';
 
+import type { ListContentProps, ListItemId, ListValue } from '../List';
 import type { PopoverProps } from '../Popover';
 
+export type { ListContextValue as SelectContextValue } from '../List';
+
 export type DefaultItemT = {
     id: string | number;
     label?: string;
     selectable?: boolean;
-    [key: string]: any;
-};
-
-// SelectContext types
-export type SelectContextValue<Option extends DefaultItemT = DefaultItemT> = {
-    value: Option | Option[] | null;
-    multiple: boolean;
-    onAdd: (item: Option) => void;
-    onRemove: (item: Option) => void;
-    disabled?: boolean;
-    error?: boolean;
-    labelKey?: string;
-    options: Option[];
-    searchQuery: string;
-    setSearchQuery: (query: string) => void;
-    filteredOptions: Option[];
+    [key: string]: unknown;
 };
 
 // SelectDropdownContext types
@@ -37,24 +20,61 @@ export type SelectDropdownContextValue = {
     onOpen: () => void;
 };
 
+export type SelectSearchMode = 'client' | 'external';
+
+export type SelectSearchKey<Option extends object = DefaultItemT> =
+    | string
+    | string[]
+    | ((item: Option, query: string) => boolean);
+
+export type SelectSearchContextValue<Option extends DefaultItemT = DefaultItemT> = {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    allOptions: Option[];
+    options: Option[];
+    optionById: Map<ListItemId, Option>;
+    getOptionId: (item: Option) => ListItemId;
+};
+
 // SelectProvider props
-export type SelectProviderProps<Option extends DefaultItemT = DefaultItemT> = {
+type SelectPropsBase<Option extends DefaultItemT = DefaultItemT> = {
     children: ReactNode;
-    value?: Option['id'] | Option['id'][] | null;
-    defaultValue?: Option['id'] | Option['id'][] | null;
-    onChange?: (
-        value: Option['id'] | Option['id'][] | null,
-        item: Option,
-        event?: GestureResponderEvent,
-    ) => void;
-    multiple?: boolean;
     disabled?: boolean;
     error?: boolean;
-    labelKey?: string;
     options: Option[];
-    searchKey?: string;
+    searchKey?: SelectSearchKey<Option>;
+    searchQuery?: string;
+    defaultSearchQuery?: string;
     onSearchChange?: (query: string) => void;
-    hideSelected?: boolean;
+    searchMode?: SelectSearchMode;
+    allowDeselect?: boolean;
+    getItemId?: (item: Option) => ListItemId;
+};
+
+export type SelectSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'>;
+
+type SingleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
+    multiple?: false | undefined;
+    value?: ListValue<false>;
+    defaultValue?: ListValue<false>;
+    onChange?: (value: ListValue<false>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+type MultipleSelectProps<Option extends DefaultItemT = DefaultItemT> = {
+    multiple: true;
+    value?: ListValue<true>;
+    defaultValue?: ListValue<true>;
+    onChange?: (value: ListValue<true>, item: Option, event?: GestureResponderEvent) => void;
+};
+
+export type SelectProps<Option extends DefaultItemT = DefaultItemT> = SelectPropsBase<Option> &
+    (SingleSelectProps<Option> | MultipleSelectProps<Option>);
+
+export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ListContentProps,
+    'children'
+> & {
+    children?: ReactNode | ((item: Option, isSelected: boolean) => ReactNode);
 };
 
 // Select.Trigger props
@@ -62,9 +82,12 @@ export type SelectTriggerProps = ViewProps & {
     children?: ReactNode;
 };
 
+export type SelectTriggerOutlineProps = ViewProps;
+
 // Select.Value props
 export type SelectValueProps = ViewProps & {
     placeholder?: string;
+    labelKey?: string;
     renderValue?: (value: DefaultItemT | DefaultItemT[] | null) => ReactNode;
 };
 
@@ -78,38 +101,22 @@ export type SelectDropdownProps = Omit<
     wrapperComponentProps?: Record<string, any>;
 };
 
-// Select.Content props
-export type SelectContentProps<Option extends DefaultItemT = DefaultItemT> = Omit<
-    ScrollViewProps,
-    'children'
-> & {
-    children: (item: Option, isSelected: boolean) => ReactNode;
-    ContainerComponent?: ComponentType<any>;
-    emptyState?: ReactNode;
-};
-
-// Select.Group props
-export type SelectGroupProps = ViewProps & {
-    children: ReactNode;
-    label?: string;
-};
-
 // Select.Option props
-export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = ViewProps & {
+// `accessibilityRole` and `role` are intentionally omitted: Select.Option forces them to
+// "option" on web so the dropdown's keyboard navigator (which queries [role="option"]) can
+// always find the rows. Allowing callers to override would silently break keyboard nav.
+export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = Omit<
+    ViewProps,
+    'accessibilityRole' | 'role'
+> & {
     /**
      * Unique id for the option
      */
     value: Option['id'];
-    children?: ReactNode;
-    renderItem?: (item: Option, isSelected: boolean) => ReactNode;
+    children: ReactNode;
     onPress?: (item: Option, event: GestureResponderEvent) => void;
     /**
      * When true, the option can't be selected (similar to HTML option disabled)
      */
     disabled?: boolean;
 };
-
-// Select.SearchInput props
-export type SelectSearchInputProps = TextInputProps & {
-    onQueryChange?: (query: string) => void;
-};

package/components/Select/utils.ts

@@ -0,0 +1,126 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+
+/** Web-only marker on Select.Option roots so keyboard nav does not depend on role/accessibilityRole overrides. */
+export const SELECT_OPTION_DATA_ATTR = 'data-molecules-select-option';
+
+const SELECT_OPTION_SELECTOR = `[${SELECT_OPTION_DATA_ATTR}], [data-option-id], [role="option"]`;
+
+export function collectWebSelectKeyboardOptionElements(container: ParentNode): HTMLElement[] {
+    return Array.from(container.querySelectorAll(SELECT_OPTION_SELECTOR)).filter(
+        (el): el is HTMLElement => {
+            if (!(el instanceof HTMLElement)) return false;
+            if (el.getAttribute('aria-disabled') === 'true') return false;
+            return true;
+        },
+    );
+}
+
+const triggerDefaultStyles = StyleSheet.create(theme => ({
+    trigger: {
+        borderRadius: theme.shapes.corner.extraSmall,
+        paddingHorizontal: theme.spacings['3'],
+        paddingVertical: theme.spacings['2'],
+        minHeight: 48,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        variants: {
+            state: {
+                disabled: {
+                    opacity: 0.38,
+                    backgroundColor: theme.colors.surfaceVariant,
+                },
+                errorDisabled: {
+                    opacity: 0.38,
+                },
+            },
+        },
+    },
+    triggerIcon: {
+        marginLeft: theme.spacings['2'],
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+const outlineDefaultStyles = StyleSheet.create(theme => ({
+    outline: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: theme.shapes.corner.extraSmall,
+        borderWidth: 1,
+        borderColor: theme.colors.outline,
+        pointerEvents: 'none',
+        variants: {
+            state: {
+                focused: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.primary,
+                },
+                hovered: {
+                    borderColor: theme.colors.onSurface,
+                },
+                hoveredAndFocused: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.primary,
+                },
+                disabled: {
+                    borderColor: theme.colors.onSurface,
+                },
+                error: {
+                    borderColor: theme.colors.error,
+                },
+                errorFocused: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.error,
+                },
+                errorHovered: {
+                    borderColor: theme.colors.onErrorContainer,
+                },
+                errorFocusedAndHovered: {
+                    borderWidth: 2,
+                    borderColor: theme.colors.error,
+                },
+                errorDisabled: {
+                    borderColor: theme.colors.error,
+                },
+            },
+        },
+    },
+}));
+
+export const defaultStyles = StyleSheet.create(theme => ({
+    valueText: {
+        flex: 1,
+    },
+    chipContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+        maxWidth: '90%',
+        flex: 1,
+    },
+    searchInput: {
+        marginHorizontal: theme.spacings['2'],
+        marginVertical: theme.spacings['3'],
+    },
+    searchInputInput: {
+        height: 42,
+    },
+}));
+
+export const triggerStyles = getRegisteredComponentStylesWithFallback(
+    'Select_Trigger',
+    triggerDefaultStyles,
+);
+export const selectOutlineStyles = getRegisteredComponentStylesWithFallback(
+    'SelectOutline',
+    outlineDefaultStyles,
+);
+
+export const styles = getRegisteredComponentStylesWithFallback('Select', defaultStyles);

package/components/Slot/Slot.tsx

@@ -0,0 +1,224 @@
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import * as React from 'react';
+import { type PressableProps, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+
+declare module 'react' {
+    interface ReactElement {
+        $$typeof?: symbol | string;
+    }
+}
+
+const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+
+interface LazyReactElement extends React.ReactElement {
+    $$typeof: typeof REACT_LAZY_TYPE;
+    _payload: PromiseLike<Exclude<React.ReactNode, PromiseLike<any>>>;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+export type Usable<T> = PromiseLike<T> | React.Context<T>;
+const use: typeof React.use | undefined = (React as any)[' use '.trim().toString()];
+
+interface SlotProps
+    extends Omit<ViewProps, 'children'>,
+        Partial<
+            Pick<
+                PressableProps,
+                'onPress' | 'onPressIn' | 'onPressOut' | 'onLongPress' | 'disabled'
+            >
+        > {
+    children?: React.ReactNode;
+}
+
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+    return typeof value === 'object' && value !== null && 'then' in value;
+}
+
+function isLazyComponent(element: React.ReactNode): element is LazyReactElement {
+    return (
+        element != null &&
+        typeof element === 'object' &&
+        '$$typeof' in element &&
+        element.$$typeof === REACT_LAZY_TYPE &&
+        '_payload' in element &&
+        isPromiseLike(element._payload)
+    );
+}
+
+/* @__NO_SIDE_EFFECTS__ */ export function createSlot(ownerName: string) {
+    const SlotClone = createSlotClone(ownerName);
+    const Slot = React.forwardRef<any, SlotProps>((props, forwardedRef) => {
+        const { children: childrenProp, ...slotProps } = props;
+        let children = childrenProp;
+        if (isLazyComponent(children) && typeof use === 'function') {
+            children = use(children._payload);
+        }
+        const childrenArray = React.Children.toArray(children);
+        const slottable = childrenArray.find(isSlottable);
+
+        if (slottable) {
+            // the new element to render is the one passed as a child of `Slottable`
+            const newElement = slottable.props.children;
+
+            const newChildren = childrenArray.map(child => {
+                if (child === slottable) {
+                    // because the new element will be the one rendered, we are only interested
+                    // in grabbing its children (`newElement.props.children`)
+                    if (React.Children.count(newElement) > 1) return React.Children.only(null);
+                    return React.isValidElement(newElement)
+                        ? (newElement.props as { children: React.ReactNode }).children
+                        : null;
+                } else {
+                    return child;
+                }
+            });
+
+            return (
+                <SlotClone {...slotProps} ref={forwardedRef}>
+                    {React.isValidElement(newElement)
+                        ? React.cloneElement(newElement, undefined, newChildren)
+                        : null}
+                </SlotClone>
+            );
+        }
+
+        return (
+            <SlotClone {...slotProps} ref={forwardedRef}>
+                {children}
+            </SlotClone>
+        );
+    });
+
+    Slot.displayName = `${ownerName}.Slot`;
+    return Slot;
+}
+
+const Slot = createSlot('Slot');
+
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/
+
+interface SlotCloneProps {
+    children: React.ReactNode;
+}
+
+/* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName: string) {
+    const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
+        const { children: childrenProp, ...slotProps } = props;
+        let children = childrenProp;
+        if (isLazyComponent(children) && typeof use === 'function') {
+            children = use(children._payload);
+        }
+
+        if (React.isValidElement(children)) {
+            const childrenRef = getElementRef(children);
+            const mergedProps = mergeProps(slotProps, children.props as AnyProps);
+            // do not pass ref to React.Fragment for React 19 compatibility
+            if (children.type !== React.Fragment) {
+                mergedProps.ref = forwardedRef
+                    ? composeRefs(forwardedRef, childrenRef)
+                    : childrenRef;
+            }
+            return React.cloneElement(children, mergedProps);
+        }
+
+        return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+    });
+
+    SlotClone.displayName = `${ownerName}.SlotClone`;
+    return SlotClone;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/
+
+const SLOTTABLE_IDENTIFIER = Symbol('radix.slottable');
+
+interface SlottableProps {
+    children: React.ReactNode;
+}
+
+export interface SlottableComponent extends React.FC<SlottableProps> {
+    __radixId: symbol;
+}
+
+/* @__NO_SIDE_EFFECTS__ */ export function createSlottable(ownerName: string) {
+    const Slottable: SlottableComponent = ({ children }) => {
+        return <>{children}</>;
+    };
+    Slottable.displayName = `${ownerName}.Slottable`;
+    Slottable.__radixId = SLOTTABLE_IDENTIFIER;
+    return Slottable;
+}
+
+const Slottable = createSlottable('Slottable');
+
+/* ---------------------------------------------------------------------------------------------- */
+
+type AnyProps = Record<string, any>;
+
+function isSlottable(
+    child: React.ReactNode,
+): child is React.ReactElement<SlottableProps, typeof Slottable> {
+    return (
+        React.isValidElement(child) &&
+        typeof child.type === 'function' &&
+        '__radixId' in child.type &&
+        child.type.__radixId === SLOTTABLE_IDENTIFIER
+    );
+}
+
+function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+    // all child props should override
+    const overrideProps = { ...childProps };
+
+    for (const propName in childProps) {
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) {
+                overrideProps[propName] = (...args: unknown[]) => {
+                    const result = childPropValue(...args);
+                    slotPropValue(...args);
+                    return result;
+                };
+            }
+            // but if it exists only on the slot, we use only this one
+            else if (slotPropValue) {
+                overrideProps[propName] = slotPropValue;
+            }
+        }
+        // if it's `style`, we merge them (React Native styles can be arrays)
+        else if (propName === 'style') {
+            const slotStyle = slotPropValue as StyleProp<ViewStyle> | undefined;
+            const childStyle = childPropValue as StyleProp<ViewStyle> | undefined;
+            if (slotStyle || childStyle) {
+                overrideProps[propName] = [slotStyle, childStyle].filter(
+                    Boolean,
+                ) as StyleProp<ViewStyle>;
+            }
+        }
+    }
+
+    return { ...slotProps, ...overrideProps };
+}
+
+function getElementRef(element: React.ReactElement) {
+    return (element.props as { ref?: React.Ref<unknown> }).ref;
+}
+
+export {
+    //
+    Slot as Root,
+    Slot,
+    Slottable,
+};
+export type { SlotProps };