react-native-molecules 0.5.0-beta.4 → 0.5.0-beta.5

package/components/Select/index.ts

@@ -1,14 +1,7 @@
-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 SelectDefault from './Select';
+
+export const Select = getRegisteredComponentWithFallback('Select', SelectDefault);
+
+export type * from './types';
+export * from './utils';

package/components/Select/types.ts

@@ -38,7 +38,7 @@ export type SelectDropdownContextValue = {
 };
 
 // SelectProvider props
-export type SelectProviderProps<Option extends DefaultItemT = DefaultItemT> = {
+export type SelectProps<Option extends DefaultItemT = DefaultItemT> = {
     children: ReactNode;
     value?: Option['id'] | Option['id'][] | null;
     defaultValue?: Option['id'] | Option['id'][] | null;
@@ -110,6 +110,4 @@ export type SelectOptionProps<Option extends DefaultItemT = DefaultItemT> = View
 };
 
 // Select.SearchInput props
-export type SelectSearchInputProps = TextInputProps & {
-    onQueryChange?: (query: string) => void;
-};
+export type SelectSearchInputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {};

package/components/Select/utils.ts

@@ -0,0 +1,215 @@
+import type { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getRegisteredComponentStylesWithFallback } from '../../core';
+import { createFastContext } from '../../fast-context';
+import { registerPortalContext } from '../Portal';
+import type { DefaultItemT, SelectContextValue, SelectDropdownContextValue } from './types';
+
+// SelectContext - holds value, onAdd, onRemove with fast-context for optimized rendering
+const selectContextDefaultValue: SelectContextValue<DefaultItemT> = {
+    value: null,
+    multiple: false,
+    onAdd: () => {},
+    onRemove: () => {},
+    disabled: false,
+    error: false,
+    labelKey: 'label',
+    options: [],
+    searchQuery: '',
+    setSearchQuery: () => {},
+    filteredOptions: [],
+};
+
+const {
+    useStoreRef: useSelectStoreRef,
+    Provider: SelectContextProvider,
+    useContext: useSelectContext,
+    useContextValue: useSelectContextValue,
+    Context: SelectContext,
+} = createFastContext<SelectContextValue<DefaultItemT>>(selectContextDefaultValue, true);
+
+export {
+    SelectContext,
+    SelectContextProvider,
+    useSelectContext,
+    useSelectContextValue,
+    useSelectStoreRef,
+};
+
+// SelectDropdownContext - holds isOpen, onClose, triggerRef with fast-context
+export type SelectDropdownContextType = SelectDropdownContextValue & {
+    triggerRef: React.RefObject<View> | null;
+    contentRef: React.RefObject<any> | null;
+    triggerLayout: { width: number; height: number } | null;
+    setTriggerLayout: (layout: { width: number; height: number }) => void;
+};
+
+const selectDropdownContextDefaultValue: SelectDropdownContextType = {
+    isOpen: false,
+    onClose: () => {},
+    onOpen: () => {},
+    triggerRef: null,
+    contentRef: null,
+    triggerLayout: null,
+    setTriggerLayout: () => {},
+};
+
+const {
+    useStoreRef: useSelectDropdownStoreRef,
+    Provider: SelectDropdownContextProvider,
+    useContext: useSelectDropdownContext,
+    useContextValue: useSelectDropdownContextValue,
+    Context: SelectDropdownContext,
+} = createFastContext<SelectDropdownContextType>(selectDropdownContextDefaultValue, true);
+
+export {
+    SelectDropdownContext,
+    SelectDropdownContextProvider,
+    useSelectDropdownContext,
+    useSelectDropdownContextValue,
+    useSelectDropdownStoreRef,
+};
+
+registerPortalContext([SelectContext, SelectDropdownContext]);
+
+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,
+                },
+            },
+        },
+    },
+    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,
+                },
+            },
+        },
+    },
+    triggerIcon: {
+        marginLeft: theme.spacings['2'],
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+export const defaultStyles = StyleSheet.create(theme => ({
+    chipContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+        maxWidth: '90%',
+    },
+    groupLabel: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['2'],
+        fontWeight: '600',
+        color: theme.colors.onSurface,
+    },
+    item: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['3'],
+        backgroundColor: 'transparent',
+
+        _web: {
+            cursor: 'pointer',
+            outlineStyle: 'none',
+            _hover: {
+                backgroundColor: theme.colors.stateLayer.hover.primary,
+            },
+            _focus: {
+                backgroundColor: theme.colors.stateLayer.focussed.primary,
+            },
+        },
+    },
+    itemSelected: {
+        backgroundColor: theme.colors.stateLayer.hover.primary,
+    },
+    itemDisabled: {
+        opacity: 0.38,
+        _web: {
+            cursor: 'not-allowed',
+        },
+    },
+    itemDisabledText: {
+        color: theme.colors.onSurfaceVariant,
+    },
+    searchInput: {
+        marginHorizontal: theme.spacings['2'],
+        marginVertical: theme.spacings['3'],
+    },
+    searchInputInput: {
+        height: 42,
+    },
+    emptyState: {
+        paddingHorizontal: theme.spacings['4'],
+        paddingVertical: theme.spacings['6'],
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyStateText: {
+        color: theme.colors.onSurfaceVariant,
+        fontSize: 14,
+    },
+}));
+
+export const triggerStyles = getRegisteredComponentStylesWithFallback(
+    'Select_Trigger',
+    triggerDefaultStyles,
+);
+
+export const styles = getRegisteredComponentStylesWithFallback('Select', defaultStyles);

package/components/Slot/Slot.tsx

@@ -0,0 +1,244 @@
+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 };
+}
+
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+function getElementRef(element: React.ReactElement) {
+    // React <=18 in DEV
+    let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
+    let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return (element as any).ref;
+    }
+
+    // React 19 in DEV
+    getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;
+    mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;
+    if (mayWarn) {
+        return (element.props as { ref?: React.Ref<unknown> }).ref;
+    }
+
+    // Not DEV
+    return (element.props as { ref?: React.Ref<unknown> }).ref || (element as any).ref;
+}
+
+export {
+    //
+    Slot as Root,
+    Slot,
+    Slottable,
+};
+export type { SlotProps };

package/components/Slot/compose-refs.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+    if (typeof ref === 'function') {
+        return ref(value);
+    } else if (ref !== null && ref !== undefined) {
+        ref.current = value;
+    }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    return node => {
+        let hasCleanup = false;
+        const cleanups = refs.map(ref => {
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup === 'function') {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+
+        // React <19 will log an error to the console if a callback ref returns a
+        // value. We don't use ref cleanups internally so this will only happen if a
+        // user's ref callback returns a value, which we only expect if they are
+        // using the cleanup functionality added in React 19.
+        if (hasCleanup) {
+            return () => {
+                for (let i = 0; i < cleanups.length; i++) {
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup === 'function') {
+                        cleanup();
+                    } else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+    };
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };

package/components/Slot/index.tsx

@@ -0,0 +1,8 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import { Slot as SlotComponent, Slottable } from './Slot';
+
+const SlotDefault = Object.assign(SlotComponent, { Slottable, Root: SlotComponent });
+
+export const Slot = getRegisteredComponentWithFallback('Slot', SlotDefault);
+
+export { createSlot, createSlottable, type SlotProps } from './Slot';

package/components/Surface/Surface.android.tsx

@@ -2,11 +2,13 @@ import { forwardRef, memo, type ReactNode, useMemo } from 'react';
 import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
+import { Slot } from '../Slot';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, getElevationAndroid } from './utils';
+import { defaultStyles } from './utils';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
 
 export type Props = ViewProps & {
     /**
@@ -20,11 +22,19 @@ export type Props = ViewProps & {
      * TestID used for testing purposes
      */
     testID?: string;
+    /**
+     * Change the component to the HTML tag or custom component use the passed child.
+     * This will merge the props of the Surface with the props of the child element.
+     */
+    asChild?: boolean;
 };
 
 const elevationLevel = [0, 1, 2, 6, 8, 12];
 
-const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
+const Surface = (
+    { elevation: _elevation = 1, style, children, testID, asChild = false, ...props }: Props,
+    ref: any,
+) => {
     const { theme } = useUnistyles();
 
     const backgroundColor = (() => {
@@ -33,6 +43,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
     })();
 
     const { memoizedStyles, surfaceBackground } = useMemo(() => {
+        const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
         return {
             memoizedStyles: [
                 {
@@ -41,7 +52,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                 defaultStyles.root,
                 style,
                 {
-                    elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
+                    elevation: elevationLevel[elevation],
                 },
             ] as StyleProp<ViewStyle>,
             surfaceBackground: extractPropertiesFromStyles(
@@ -49,13 +60,15 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                 ['backgroundColor'],
             ).backgroundColor,
         };
-    }, [backgroundColor, elevation, style]);
+    }, [backgroundColor, _elevation, style]);
+
+    const Component = asChild ? Slot : AnimatedView;
 
     return (
         <BackgroundContextWrapper backgroundColor={surfaceBackground}>
-            <View ref={ref} {...props} testID={testID} style={memoizedStyles}>
+            <Component ref={ref} {...props} testID={testID} style={memoizedStyles}>
                 {children}
-            </View>
+            </Component>
         </BackgroundContextWrapper>
     );
 };