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

package/components/Checkbox/Checkbox.tsx

@@ -10,13 +10,13 @@ import type { CheckboxLabelProps, CheckboxProps, CheckboxRowProps } from './type
 import { checkboxRowStyles } from './utils';
 
 /**
- * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onValueChange`.
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onChange`.
  */
 const Checkbox = (
     {
         value: valueProp,
         defaultValue,
-        onValueChange,
+        onChange: onChangeProp,
         indeterminate,
         disabled: disabledProp,
         size: sizeProp,
@@ -30,7 +30,7 @@ const Checkbox = (
     const [value, setValue] = useControlledValue({
         value: valueProp,
         defaultValue,
-        onChange: onValueChange,
+        onChange: onChangeProp,
         disabled: disabledProp,
     });
 
@@ -114,7 +114,7 @@ export const CheckboxRow = memo(
             {
                 value: valueProp,
                 defaultValue,
-                onValueChange,
+                onChange,
                 indeterminate,
                 disabled,
                 size,
@@ -129,7 +129,7 @@ export const CheckboxRow = memo(
             const [value, setValue] = useControlledValue({
                 value: valueProp,
                 defaultValue,
-                onChange: onValueChange,
+                onChange,
                 disabled,
             });
 
@@ -137,8 +137,8 @@ export const CheckboxRow = memo(
 
             const onToggle = useCallback(() => {
                 if (disabled) return;
-                setValue(!checked);
-            }, [disabled, setValue, checked]);
+                setValue(indeterminate ? true : !checked);
+            }, [disabled, setValue, checked, indeterminate]);
 
             const contextValue = useMemo(
                 () => ({ checked, onToggle, disabled, indeterminate, size, labelId }),

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -45,8 +45,8 @@ const CheckboxIOS = (
     }, [checked, colorProp, indeterminate, style, state, size, checkedColor]);
 
     const onChange = useCallback(() => {
-        onChangeProp?.(!checked);
-    }, [checked, onChangeProp]);
+        onChangeProp?.(indeterminate ? true : !checked);
+    }, [checked, indeterminate, onChangeProp]);
 
     const icon = indeterminate ? 'minus' : 'check';
 
@@ -57,7 +57,7 @@ const CheckboxIOS = (
             onPress={onChange}
             disabled={disabled}
             accessibilityRole="checkbox"
-            accessibilityState={{ disabled, checked }}
+            accessibilityState={{ disabled, checked: indeterminate ? false : checked }}
             accessibilityLiveRegion="polite"
             style={rippleContainerStyles}
             testID={testID}

package/components/Checkbox/CheckboxBase.tsx

@@ -54,8 +54,8 @@ const CheckboxAndroid = (
     }, [checked, colorProp, uncheckedColorProp, style, size, state]);
 
     const onChange = useCallback(() => {
-        onChangeProp?.(!checked);
-    }, [checked, onChangeProp]);
+        onChangeProp?.(indeterminate ? true : !checked);
+    }, [checked, indeterminate, onChangeProp]);
 
     const icon = indeterminate
         ? 'minus-box'
@@ -63,7 +63,10 @@ const CheckboxAndroid = (
         ? 'checkbox-marked'
         : 'checkbox-blank-outline';
 
-    const accessibilityState = useMemo(() => ({ disabled, checked }), [checked, disabled]);
+    const accessibilityState = useMemo(
+        () => ({ disabled, checked: indeterminate ? false : checked }),
+        [checked, disabled, indeterminate],
+    );
 
     return (
         <TouchableRipple

package/components/Checkbox/types.ts

@@ -53,7 +53,7 @@ export type CheckboxBaseProps = Omit<TouchableRippleProps, 'children'> & {
 };
 
 /**
- * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onValueChange`.
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onChange`.
  */
 export type CheckboxProps = Omit<CheckboxBaseProps, 'value' | 'onChange'> & {
     /**
@@ -67,7 +67,7 @@ export type CheckboxProps = Omit<CheckboxBaseProps, 'value' | 'onChange'> & {
     /**
      * Called when the checked state changes.
      */
-    onValueChange?: (newValue: boolean) => void;
+    onChange?: (newValue: boolean) => void;
 };
 
 export type CheckboxRowProps = ViewProps & {
@@ -82,7 +82,7 @@ export type CheckboxRowProps = ViewProps & {
     /**
      * Called when the checked state changes.
      */
-    onValueChange?: (newValue: boolean) => void;
+    onChange?: (newValue: boolean) => void;
     /**
      * Whether the checkbox is in the indeterminate state.
      */

package/components/Radio/Radio.tsx

@@ -39,7 +39,7 @@ const Radio = (
         if (item) {
             item.onSelect();
         } else if (value !== undefined) {
-            group?.onValueChange(value);
+            group?.onChange(value);
         }
     }, [disabled, item, group, value]);
 
@@ -119,7 +119,7 @@ export const RadioRow = memo(
 
             const onSelect = useCallback(() => {
                 if (disabled) return;
-                group?.onValueChange(value);
+                group?.onChange(value);
             }, [disabled, group, value]);
 
             const contextValue = useMemo(
@@ -144,7 +144,7 @@ RadioRow.displayName = 'Radio_Row';
  * Controls a group of radios, holding the selected value.
  *
  * ```tsx
- * <RadioGroup value={value} onValueChange={setValue}>
+ * <RadioGroup value={value} onChange={setValue}>
  *   <RadioRow value="first">
  *     <Radio />
  *     <Radio.Label>First option</Radio.Label>
@@ -156,21 +156,21 @@ export const RadioGroup = memo(
     ({
         value: valueProp,
         defaultValue,
-        onValueChange: onChange,
+        onChange,
         disabled,
         size,
         children,
         ...rest
     }: RadioGroupProps) => {
-        const [value, onValueChange] = useControlledValue({
+        const [value, setValue] = useControlledValue({
             value: valueProp,
             defaultValue,
             onChange,
         });
 
         const contextValue = useMemo(
-            () => ({ value, onValueChange, disabled, size }),
-            [value, onValueChange, disabled, size],
+            () => ({ value, onChange: setValue, disabled, size }),
+            [value, setValue, disabled, size],
         );
 
         return (

package/components/Radio/context.tsx

@@ -4,7 +4,7 @@ import type { Size } from './types';
 
 export type RadioGroupContextType = {
     value?: string;
-    onValueChange: (value: string) => void;
+    onChange: (value: string) => void;
     disabled?: boolean;
     size?: Size;
 };

package/components/Radio/types.ts

@@ -18,7 +18,7 @@ export type RadioGroupProps = ViewProps & {
     /**
      * Called when the selected value changes.
      */
-    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
     /**
      * Disables every radio in the group.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-molecules",
-  "version": "0.5.0-beta.29",
+  "version": "0.5.0-beta.30",
   "author": "Thet Aung <thetaung.dev@gmail.com>",
   "license": "MIT",
   "main": "index.ts",