react-native-molecules 0.5.0-beta.28 → 0.5.0-beta.29

package/components/IconButton/types.ts

@@ -1,3 +1,11 @@
 export type IconButtonVariant = 'default' | 'outlined' | 'contained' | 'contained-tonal';
 export type IconButtonShape = 'round' | 'square';
 export type IconButtonWidth = 'narrow' | 'default' | 'wide';
+
+export type IconButtonDefaultProps = {
+    size: 'xs' | 'sm' | 'md' | 'lg' | number;
+    variant: IconButtonVariant;
+    shape: IconButtonShape;
+    width: IconButtonWidth;
+    animated: boolean;
+};

package/components/IconButton/utils.ts

@@ -4,6 +4,7 @@ import {
     getRegisteredComponentStylesWithFallback,
     getRegisteredComponentUtilsWithFallback,
 } from './../../core/componentsRegistry';
+import type { IconButtonDefaultProps } from './types';
 
 export type States =
     | 'selectedAndDisabled'
@@ -19,6 +20,22 @@ const iconButtonSizeToIconSizeMapDefault = {
     lg: 26,
 };
 
+const iconButtonConstantsDefault = {
+    minContainerSize: 32,
+    containerPadding: 16,
+    narrowWidthAdjustment: -8,
+    wideWidthAdjustment: 12,
+    squareCornerRadius: 12,
+};
+
+const iconButtonDefaultPropsDefault: IconButtonDefaultProps = {
+    size: 24,
+    variant: 'default',
+    shape: 'round',
+    width: 'default',
+    animated: false,
+};
+
 const iconButtonStylesDefault = StyleSheet.create(theme => ({
     root: {
         borderColor: theme.colors.outline,
@@ -427,3 +444,11 @@ export const iconButtonSizeToIconSizeMap = getRegisteredComponentUtilsWithFallba
     iconButtonSizeToIconSizeMapDefault,
     'iconButtonSizeToIconSizeMap',
 );
+export const iconButtonConstants = {
+    ...iconButtonConstantsDefault,
+    ...getRegisteredComponentUtilsWithFallback('IconButton', {}, 'iconButtonConstants'),
+};
+export const iconButtonDefaultProps: IconButtonDefaultProps = {
+    ...iconButtonDefaultPropsDefault,
+    ...getRegisteredComponentUtilsWithFallback('IconButton', {}, 'iconButtonDefaultProps'),
+};

package/components/Menu/Menu.tsx

@@ -22,14 +22,11 @@ import {
 import { Popover, type PopoverProps } from '../Popover';
 import { MenuContext, MenuRootContext, menuStyles } from './utils';
 
-type MenuBaseProps = Omit<
-    PopoverProps,
-    'setIsOpen' | 'onClose' | 'isOpen' | 'triggerRef' | 'children'
-> & {
-    style?: ViewStyle;
-    closeOnSelect?: boolean;
+type MenuBaseProps = {
     children: ReactElement | ReactElement[];
+    closeOnSelect?: boolean;
     disabled?: boolean;
+    error?: boolean;
     allowDeselect?: boolean;
 };
 
@@ -59,23 +56,16 @@ export type Props = MenuBaseProps & (SingleMenuProps | MultipleMenuProps);
 
 const Menu = ({
     children,
-    style: styleProp,
     closeOnSelect = true,
     value,
     defaultValue,
     onChange,
     multiple,
     disabled,
+    error,
     allowDeselect,
-    ...rest
 }: Props) => {
-    const { isOpen, onClose, triggerRef } = useContext(MenuRootContext);
-
-    const { style } = useMemo(() => {
-        return {
-            style: [menuStyles.root, styleProp] as unknown as ViewStyle,
-        };
-    }, [styleProp]);
+    const { onClose } = useContext(MenuRootContext);
 
     const contextValue = useMemo(
         () => ({
@@ -91,15 +81,14 @@ const Menu = ({
         defaultValue,
         onChange,
         disabled,
+        error,
         allowDeselect,
     } as ListProps<DefaultListItemT>;
 
     return (
-        <Popover isOpen={isOpen} onClose={onClose} style={style} triggerRef={triggerRef} {...rest}>
-            <List {...listProps}>
-                <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
-            </List>
-        </Popover>
+        <List {...listProps}>
+            <MenuContext.Provider value={contextValue}>{children}</MenuContext.Provider>
+        </List>
     );
 };
 
@@ -124,6 +113,28 @@ export const MenuRoot = memo(({ children }: MenuRootProps) => {
 
 MenuRoot.displayName = 'Menu_Root';
 
+export type MenuPopoverProps = Omit<PopoverProps, 'isOpen' | 'onClose' | 'triggerRef'> & {
+    isOpen?: boolean;
+    onClose?: () => void;
+};
+
+export const MenuPopover = memo(({ children, style: styleProp, ...rest }: MenuPopoverProps) => {
+    const { isOpen, onClose, triggerRef } = useContext(MenuRootContext);
+    const { style } = useMemo(() => {
+        return {
+            style: [menuStyles.root, styleProp] as unknown as ViewStyle,
+        };
+    }, [styleProp]);
+
+    return (
+        <Popover isOpen={isOpen} onClose={onClose} triggerRef={triggerRef} style={style} {...rest}>
+            {children}
+        </Popover>
+    );
+});
+
+MenuPopover.displayName = 'Menu_Popover';
+
 export type MenuTriggerProps = {
     children: ReactElement;
 };

package/components/Menu/index.tsx

@@ -1,6 +1,6 @@
 import { getRegisteredComponentWithFallback } from '../../core';
 import { List } from '../List';
-import MenuComponent, { MenuItem, MenuRoot, MenuTrigger } from './Menu';
+import MenuComponent, { MenuItem, MenuPopover, MenuRoot, MenuTrigger } from './Menu';
 import { MenuRootContext } from './utils';
 
 export const MenuDefault = Object.assign(MenuComponent, {
@@ -9,6 +9,7 @@ export const MenuDefault = Object.assign(MenuComponent, {
     Item: MenuItem,
     Content: List.Content,
     RootContext: MenuRootContext,
+    Popover: MenuPopover,
 });
 
 export const Menu = getRegisteredComponentWithFallback('Menu', MenuDefault);

package/components/Radio/Radio.tsx

@@ -0,0 +1,188 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import { forwardRef, memo, useCallback, useContext, useId, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
+import { RadioGroupContext, RadioItemContext } from './context';
+import RadioBase from './RadioBase';
+import type { RadioGroupProps, RadioLabelProps, RadioProps, RadioRowProps } from './types';
+import { radioRowStyles } from './utils';
+
+/**
+ * The radio control (the circle). Use inside a RadioRow, or standalone under a RadioGroup with `value`.
+ */
+const Radio = (
+    {
+        value,
+        disabled: disabledProp,
+        size: sizeProp,
+        color,
+        uncheckedColor,
+        stateLayerProps,
+        testID,
+        ...rest
+    }: RadioProps,
+    ref: any,
+) => {
+    const item = useContext(RadioItemContext);
+    const group = useContext(RadioGroupContext);
+
+    // Inside a RadioRow the item context drives state; standalone (bare) mode uses group context.
+    const checked = item ? item.checked : group?.value === value;
+    const disabled = disabledProp ?? item?.disabled ?? group?.disabled;
+    const size = sizeProp ?? item?.size ?? group?.size ?? 'md';
+    const labelId = item?.labelId;
+
+    const onPress = useCallback(() => {
+        if (disabled) return;
+        if (item) {
+            item.onSelect();
+        } else if (value !== undefined) {
+            group?.onValueChange(value);
+        }
+    }, [disabled, item, group, value]);
+
+    const accessibilityState = useMemo(
+        () => ({ checked: !!checked, disabled: !!disabled }),
+        [checked, disabled],
+    );
+
+    return (
+        <RadioBase
+            {...rest}
+            ref={ref}
+            checked={!!checked}
+            disabled={disabled}
+            size={size}
+            color={color}
+            uncheckedColor={uncheckedColor}
+            onPress={onPress}
+            stateLayerProps={stateLayerProps}
+            testID={testID}
+            accessibilityRole="radio"
+            accessibilityState={accessibilityState}
+            accessibilityLabelledBy={labelId}
+        />
+    );
+};
+
+/**
+ * The label for a RadioRow. Pressing it selects the row's value, and it is wired to the control via
+ * `nativeID` / `accessibilityLabelledBy` (web `id` / `aria-labelledby`).
+ */
+export const RadioLabel = memo(({ children, style, ...rest }: RadioLabelProps) => {
+    const item = useContext(RadioItemContext);
+
+    const state = resolveStateVariant({
+        disabled: !!item?.disabled,
+        checked: !!item?.checked,
+    });
+
+    radioRowStyles.useVariants({ state: state as any });
+
+    if (!item) {
+        return (
+            <Text style={style} {...rest}>
+                {children}
+            </Text>
+        );
+    }
+
+    return (
+        <Text
+            nativeID={item.labelId}
+            onPress={item.disabled ? undefined : item.onSelect}
+            disabled={item.disabled}
+            selectable={false}
+            style={[radioRowStyles.label, style]}
+            {...rest}>
+            {children}
+        </Text>
+    );
+});
+
+RadioLabel.displayName = 'Radio_Label';
+
+/**
+ * A row that binds a value to a Radio control and its Radio.Label. The row itself is not pressable —
+ * only the Radio and Radio.Label inside it are. Children may be in any order.
+ */
+export const RadioRow = memo(
+    forwardRef(
+        ({ value, disabled: disabledProp, style, children, ...rest }: RadioRowProps, ref: any) => {
+            const group = useContext(RadioGroupContext);
+            const labelId = useId();
+
+            const disabled = disabledProp ?? group?.disabled;
+            const checked = group?.value === value;
+
+            const onSelect = useCallback(() => {
+                if (disabled) return;
+                group?.onValueChange(value);
+            }, [disabled, group, value]);
+
+            const contextValue = useMemo(
+                () => ({ value, checked, onSelect, disabled, size: group?.size, labelId }),
+                [value, checked, onSelect, disabled, group?.size, labelId],
+            );
+
+            return (
+                <RadioItemContext.Provider value={contextValue}>
+                    <View ref={ref} style={[radioRowStyles.row, style]} {...rest}>
+                        {children}
+                    </View>
+                </RadioItemContext.Provider>
+            );
+        },
+    ),
+);
+
+RadioRow.displayName = 'Radio_Row';
+
+/**
+ * Controls a group of radios, holding the selected value.
+ *
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioRow value="first">
+ *     <Radio />
+ *     <Radio.Label>First option</Radio.Label>
+ *   </RadioRow>
+ * </RadioGroup>
+ * ```
+ */
+export const RadioGroup = memo(
+    ({
+        value: valueProp,
+        defaultValue,
+        onValueChange: onChange,
+        disabled,
+        size,
+        children,
+        ...rest
+    }: RadioGroupProps) => {
+        const [value, onValueChange] = useControlledValue({
+            value: valueProp,
+            defaultValue,
+            onChange,
+        });
+
+        const contextValue = useMemo(
+            () => ({ value, onValueChange, disabled, size }),
+            [value, onValueChange, disabled, size],
+        );
+
+        return (
+            <RadioGroupContext.Provider value={contextValue}>
+                <View accessibilityRole="radiogroup" {...rest}>
+                    {children}
+                </View>
+            </RadioGroupContext.Provider>
+        );
+    },
+);
+
+RadioGroup.displayName = 'Radio_Group';
+
+export default memo(forwardRef(Radio));

package/components/Radio/RadioBase.ios.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
+import { tokenStylesParser } from '../../utils/tokenStylesParser';
+import { Icon } from '../Icon';
+import { TouchableRipple } from '../TouchableRipple';
+import type { RadioBaseProps } from './types';
+import { iconSizeMap, radioStyles } from './utils';
+
+const RadioBaseIOS = (
+    {
+        disabled = false,
+        size = 'md',
+        style,
+        color: colorProp,
+        checked,
+        onPress,
+        uncheckedColor: uncheckedColorProp,
+        testID,
+        ...rest
+    }: RadioBaseProps,
+    ref: any,
+) => {
+    const state = resolveStateVariant({
+        disabled,
+        checked,
+    });
+
+    radioStyles.useVariants({
+        state: state as any,
+        size: size as any,
+    });
+
+    const { containerStyle, iconContainerStyle, iconStyle } = useMemo(() => {
+        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+
+        return {
+            containerStyle: [radioStyles.container, radioStyles.root, style],
+            iconContainerStyle: { opacity: checked ? 1 : 0 },
+            iconStyle: [radioStyles.icon, _color],
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [checked, colorProp, style, state, size, uncheckedColorProp]);
+
+    return (
+        <TouchableRipple
+            {...rest}
+            ref={ref}
+            onPress={onPress}
+            disabled={disabled}
+            borderless
+            style={containerStyle}
+            testID={testID}>
+            <View style={iconContainerStyle}>
+                <Icon
+                    allowFontScaling={false}
+                    name="check"
+                    size={iconSizeMap[size]}
+                    style={iconStyle}
+                />
+            </View>
+        </TouchableRipple>
+    );
+};
+
+RadioBaseIOS.displayName = 'Radio_Base';
+
+export default memo(forwardRef(RadioBaseIOS));

package/components/{RadioButton/RadioButtonAndroid.tsx → Radio/RadioBase.tsx}

@@ -1,52 +1,20 @@
-import { forwardRef, memo, type PropsWithoutRef, useEffect, useMemo, useRef } from 'react';
-import type { ViewProps } from 'react-native';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import { StateLayer } from '../StateLayer';
-import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { ANIMATION_DURATION, radioButtonStyles } from './utils';
-
-export type Props = Omit<TouchableRippleProps, 'children'> & {
-    /**
-     * Status of radio button.
-     */
-    status?: 'checked' | 'unchecked';
-    /**
-     * Whether radio is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Custom color for unchecked radio.
-     */
-    uncheckedColor?: string;
-    /**
-     * Custom color for radio.
-     */
-    color?: string;
-    /**
-     * testID to be used on tests.
-     */
-    testID?: string;
-    /**
-     * passed from RadioButton component
-     */
-    checked: boolean;
-    onPress: (() => void) | undefined;
-    /**
-     * props for the stateLayer
-     */
-    stateLayerProps?: PropsWithoutRef<ViewProps>;
-};
+import { TouchableRipple } from '../TouchableRipple';
+import type { RadioBaseProps } from './types';
+import { ANIMATION_DURATION, radioStyles } from './utils';
 
 const BORDER_WIDTH = 2;
 
-const RadioButtonAndroid = (
+const RadioBaseAndroid = (
     {
         disabled = false,
-        status,
+        size = 'md',
         testID,
         color: colorProp,
         uncheckedColor: uncheckedColorProp,
@@ -55,14 +23,12 @@ const RadioButtonAndroid = (
         onPress,
         stateLayerProps = {},
         ...rest
-    }: Props,
+    }: RadioBaseProps,
     ref: any,
 ) => {
     const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
     const { current: borderAnim } = useRef<Animated.Value>(new Animated.Value(BORDER_WIDTH));
-
     const { current: radioAnim } = useRef<Animated.Value>(new Animated.Value(1));
-
     const isFirstRendering = useRef<boolean>(true);
 
     const state = resolveStateVariant({
@@ -72,36 +38,33 @@ const RadioButtonAndroid = (
         hovered,
     });
 
-    radioButtonStyles.useVariants({
+    radioStyles.useVariants({
         state: state as any,
+        size: size as any,
     });
 
-    const { containerStyles, radioStyles, dotStyles, dotContainerStyles, stateLayerStyle } =
+    const { containerStyles, radioStyle, dotStyles, dotContainerStyles, stateLayerStyle } =
         useMemo(() => {
             return {
-                containerStyles: [radioButtonStyles.container, radioButtonStyles.root, style],
-                radioStyles: [
-                    radioButtonStyles.radio,
-                    {
-                        borderWidth: borderAnim,
-                    },
+                containerStyles: [radioStyles.container, radioStyles.root, style],
+                radioStyle: [
+                    radioStyles.radio,
+                    { borderWidth: borderAnim },
                     tokenStylesParser.getColor(
                         checked ? colorProp : uncheckedColorProp,
                         'borderColor',
                     ),
                 ],
-                dotContainerStyles: [StyleSheet.absoluteFill, radioButtonStyles.radioContainer],
+                dotContainerStyles: [StyleSheet.absoluteFill, radioStyles.radioContainer],
                 dotStyles: [
-                    radioButtonStyles.dot,
-                    {
-                        transform: [{ scale: radioAnim }],
-                    },
+                    radioStyles.dot,
+                    { transform: [{ scale: radioAnim }] },
                     tokenStylesParser.getColor(
                         checked ? colorProp : uncheckedColorProp,
                         'backgroundColor',
                     ),
                 ],
-                stateLayerStyle: [radioButtonStyles.stateLayer, stateLayerProps?.style],
+                stateLayerStyle: [radioStyles.stateLayer, stateLayerProps?.style],
             };
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [
@@ -113,18 +76,18 @@ const RadioButtonAndroid = (
             uncheckedColorProp,
             style,
             state,
+            size,
         ]);
 
     useEffect(() => {
-        // Do not run animation on very first rendering
+        // Do not run animation on the very first render.
         if (isFirstRendering.current) {
             isFirstRendering.current = false;
             return;
         }
 
-        if (status === 'checked') {
+        if (checked) {
             radioAnim.setValue(1.2);
-
             Animated.timing(radioAnim, {
                 toValue: 1,
                 duration: ANIMATION_DURATION,
@@ -132,24 +95,25 @@ const RadioButtonAndroid = (
             }).start();
         } else {
             borderAnim.setValue(10);
-
             Animated.timing(borderAnim, {
                 toValue: BORDER_WIDTH,
                 duration: ANIMATION_DURATION,
                 useNativeDriver: false,
             }).start();
         }
-    }, [status, borderAnim, radioAnim]);
+    }, [checked, borderAnim, radioAnim]);
 
     return (
         <TouchableRipple
             {...rest}
             ref={actionsRef}
             onPress={onPress}
+            disabled={disabled}
+            borderless
             style={containerStyles}
             testID={testID}>
             <>
-                <Animated.View style={radioStyles}>
+                <Animated.View style={radioStyle}>
                     {checked ? (
                         <View style={dotContainerStyles}>
                             <Animated.View style={dotStyles} />
@@ -167,6 +131,6 @@ const RadioButtonAndroid = (
     );
 };
 
-RadioButtonAndroid.displayName = 'RadioButton_Android';
+RadioBaseAndroid.displayName = 'Radio_Base';
 
-export default memo(forwardRef(RadioButtonAndroid));
+export default memo(forwardRef(RadioBaseAndroid));

package/components/Radio/context.tsx

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+import type { Size } from './types';
+
+export type RadioGroupContextType = {
+    value?: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    size?: Size;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextType | null>(null);
+
+export type RadioItemContextType = {
+    value: string;
+    checked: boolean;
+    onSelect: () => void;
+    disabled?: boolean;
+    size?: Size;
+    labelId: string;
+};
+
+export const RadioItemContext = createContext<RadioItemContextType | null>(null);

package/components/Radio/index.tsx

@@ -0,0 +1,20 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+// @component ./Radio.tsx
+import RadioControl, {
+    RadioGroup as RadioGroupComponent,
+    RadioLabel,
+    RadioRow as RadioRowComponent,
+} from './Radio';
+
+const RadioDefault = Object.assign(RadioControl, {
+    Label: RadioLabel,
+    Group: RadioGroupComponent,
+    Row: RadioRowComponent,
+});
+
+export const Radio = getRegisteredComponentWithFallback('Radio', RadioDefault);
+export const RadioGroup = RadioGroupComponent;
+export const RadioRow = RadioRowComponent;
+
+export type { RadioGroupProps, RadioLabelProps, RadioProps, RadioRowProps } from './types';
+export { radioRowStyles, radioStyles } from './utils';