Merge pull request #4634 from GeekyAnts/release/3.3.6-rc.2

release 3.3.6-rc.2

Author: surajahmed

package.json

@@ -37,7 +37,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.3.6-rc.1",
+  "version": "3.3.6-rc.2",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/AspectRatio/index.tsx

@@ -31,20 +31,25 @@ const AspectView = forwardRef((props: any, ref?: any) => {
 });
 
 const AspectRatio = (props: IAspectRatioProps, ref?: any) => {
-  const { style, ratio, children, ...resolvedProps } = usePropsResolution(
+  const {
+    style,
+    ratio,
+    children = <></>,
+    ...resolvedProps
+  } = usePropsResolution(
     'AspectRatio',
     props,
     {},
     { resolveResponsively: ['ratio'] }
   );
   let computedStyle: ViewStyle | undefined = style;
-  let newChildWithProps = React.cloneElement(
+  const newChildWithProps = React.cloneElement(
     children,
     {
-      ...children.props,
+      ...children?.props,
       style: StyleSheet.absoluteFillObject,
     },
-    children.props.children
+    children?.props?.children
   );
 
   //TODO: refactor for responsive prop

src/components/composites/IconButton/index.tsx

@@ -20,6 +20,7 @@ const IconButton = (
     isPressed: isPressedProp,
     isFocused: isFocusedProp,
     isFocusVisible: isFocusVisibleProp,
+    isDisabled,
     ...props
   }: IIconButtonProps,
   ref: any
@@ -43,6 +44,7 @@ const IconButton = (
     isPressed: isPressedProp || isPressed,
     isFocused: isFocusedProp || isFocused,
     isFocusVisible: isFocusVisibleProp || isFocusVisible,
+    isDisabled,
   });
 
   let clonedIcon;

src/components/primitives/Checkbox/Checkbox.tsx

@@ -44,7 +44,6 @@ const Checkbox = (
     defaultSelected: combinedProps.defaultIsChecked,
     isSelected: combinedProps.isChecked,
   });
-
   const _ref = React.useRef();
   const mergedRef = mergeRefs([ref, _ref]);
 
@@ -77,7 +76,6 @@ const Checkbox = (
     ...checkboxGroupContext,
     ...combinedProps,
   });
-
   return (
     <CheckboxComponent
       inputProps={inputProps}
@@ -124,16 +122,20 @@ const CheckboxComponent = React.memo(
       onFocus,
       onBlur,
       ...resolvedProps
-    } = usePropsResolution('Checkbox', inputProps, {
-      isInvalid,
-      isReadOnly,
-      isIndeterminate,
-      isDisabled,
-      isChecked,
-      isHovered: isHoveredProp || isHovered,
-      isPressed: isPressedProp || isPressed,
-      isFocused: isFocusedProp || isFocused,
-    });
+    } = usePropsResolution(
+      'Checkbox',
+      { ...combinedProps, ...inputProps },
+      {
+        isInvalid,
+        isReadOnly,
+        isIndeterminate,
+        isDisabled,
+        isChecked,
+        isHovered: isHoveredProp || isHovered,
+        isPressed: isPressedProp || isPressed,
+        isFocused: isFocusedProp || isFocused,
+      }
+    );
 
     const [layoutProps, nonLayoutProps] = extractInObject(resolvedProps, [
       ...stylingProps.margin,

src/components/primitives/Checkbox/CheckboxGroup.tsx

@@ -11,7 +11,7 @@ export const CheckboxGroupContext = createContext<ICheckboxContext | null>(
 );
 
 function CheckboxGroup(
-  { size, colorScheme, ...props }: ICheckboxGroupProps,
+  { size, _checkbox, colorScheme, ...props }: ICheckboxGroupProps,
   ref?: any
 ) {
   const { children } = props;
@@ -20,6 +20,7 @@ function CheckboxGroup(
     { 'aria-label': props.accessibilityLabel, ...props },
     state
   );
+
   const formControlContext = useFormControlContext();
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps({ ...props, size, colorScheme })) {
@@ -30,6 +31,7 @@ function CheckboxGroup(
       value={{
         size,
         colorScheme,
+        ..._checkbox,
         ...formControlContext,
         state,
       }}

src/components/primitives/Checkbox/types.tsx

@@ -153,6 +153,10 @@ export interface ICheckboxGroupProps extends IBoxProps<ICheckboxGroupProps> {
    * The callback fired when any children Checkbox is checked or unchecked.
    */
   onChange?: (values: any) => any;
+  /**
+   * Pass props will be passed to each checkbox.
+   */
+  _checkbox?: ICheckboxProps;
 }
 export interface ICheckboxContext extends IFormControlContext {
   colorScheme?: string;

src/components/primitives/Radio/Radio.tsx

@@ -39,7 +39,6 @@ const RadioComponent = memo(
       ref: any
     ) => {
       const { isInvalid, isReadOnly, isIndeterminate } = combinedProps;
-
       const { hoverProps, isHovered } = useHover();
       const { pressableProps, isPressed } = useIsPressed();
       const { focusProps, isFocused } = useFocus();
@@ -158,9 +157,10 @@ const Radio = (
 ) => {
   const formControlContext = useFormControlContext();
   const contextState = React.useContext(RadioContext);
-
-  const combinedProps = combineContextAndProps(formControlContext, props);
-
+  const combinedProps = combineContextAndProps(
+    { ...formControlContext, ...contextState },
+    props
+  );
   const inputRef = React.useRef(null);
   const radioState = useRadio(
     { ...combinedProps, 'aria-label': props.accessibilityLabel, children },

src/components/primitives/Radio/Radio.web.tsx

@@ -31,7 +31,6 @@ const RadioComponent = memo(
       ref: any
     ) => {
       const { isInvalid, isReadOnly, isIndeterminate } = combinedProps;
-
       const { disabled: isDisabled, checked: isChecked } = inputProps;
       const _ref = React.useRef(null);
       const { isHovered } = useHover({}, _ref);
@@ -152,7 +151,10 @@ const Radio = (
   const formControlContext = useFormControlContext();
   const contextState = React.useContext(RadioContext);
 
-  const combinedProps = combineContextAndProps(formControlContext, props);
+  const combinedProps = combineContextAndProps(
+    { ...formControlContext, ...contextState },
+    props
+  );
 
   const inputRef = React.useRef(null);
   const radioState = useRadio(

src/components/primitives/Radio/RadioGroup.tsx

@@ -19,7 +19,7 @@ const RadioWrapper = React.memo((props: any) => {
 });
 
 const RadioGroup = (
-  { size, colorScheme, ...props }: IRadioGroupProps,
+  { size, colorScheme, _radio, ...props }: IRadioGroupProps,
   ref: any
 ) => {
   const formControlContext = useFormControlContext();
@@ -35,9 +35,10 @@ const RadioGroup = (
       formControlContext,
       size,
       colorScheme,
+      ..._radio,
       state,
     };
-  }, [size, colorScheme, formControlContext, state]);
+  }, [size, colorScheme, formControlContext, state, _radio]);
 
   const radioGroupProps = React.useMemo(
     () => radioGroupState.radioGroupProps,

src/components/primitives/Radio/types.tsx

@@ -91,6 +91,10 @@ export interface IRadioGroupProps extends IBoxProps<IRadioGroupProps> {
    * The callback fired when any children radio is checked or unchecked.
    */
   onChange?: IRadioGroupOnChangeHandler;
+  /**
+   * Pass props will be passed to each radio.
+   */
+  _radio?: IRadioProps;
 }
 export interface IRadioContext extends IFormControlContext {
   colorScheme?: string;