react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

package/README.md

@@ -4,7 +4,7 @@ React Native Molecules
 
 <h3 align="center">
   Material 3-powered primitives for React Native + Web.<br/>
-  <a href="https://github.com/webbeetechnologies/react-native-molecules/tree/main/docs">Explore the docs</a>
+  <a href="https://molecules.taylordb.ai">Explore the docs</a>
 </h3>
 
 ---

package/components/Accordion/Accordion.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react';
 import { View } from 'react-native';
 
-import { useControlledValue, useSubcomponents } from '../../hooks';
+import { useControlledValue } from '../../hooks';
 import { accordionStyles } from './utils';
 
 export type Props = Omit<ComponentPropsWithRef<typeof View>, 'children'> & {
@@ -38,8 +38,6 @@ const Accordion = (
         onChange: onChangeProp,
     });
 
-    const { AccordionItem } = useSubcomponents({ children, allowedChildren: ['AccordionItem'] });
-
     const onPressItem = useCallback(
         (id: string) => {
             const isSelected = Array.isArray(expandedItemIds)
@@ -70,9 +68,7 @@ const Accordion = (
 
     return (
         <View style={[accordionStyles.root, style]} {...rest} ref={ref}>
-            <AccordionContext.Provider value={contextValue}>
-                {AccordionItem}
-            </AccordionContext.Provider>
+            <AccordionContext.Provider value={contextValue}>{children}</AccordionContext.Provider>
         </View>
     );
 };

package/components/Accordion/AccordionItem.tsx

@@ -1,5 +1,4 @@
 import {
-    createContext,
     forwardRef,
     memo,
     type ReactElement,
@@ -10,10 +9,11 @@ import {
 } from 'react';
 import { View, type ViewProps } from 'react-native';
 
-import { useControlledValue, useSubcomponents } from '../../hooks';
+import { useControlledValue } from '../../hooks';
 import type { WithElements } from '../../types';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { AccordionContext } from './Accordion';
-import { accordionItemStyles } from './utils';
+import { AccordionItemContext, accordionItemStyles } from './utils';
 
 export type Props = Omit<ViewProps, 'children'> &
     WithElements<ReactNode> & {
@@ -45,9 +45,17 @@ const AccordionItem = memo(
 
             const groupContext = useContext(AccordionContext);
 
-            const { AccordionItem_Header, AccordionItem_Content } = useSubcomponents({
+            const {
+                AccordionItem_Header,
+                AccordionItem_Content,
+                rest: restChildren,
+            } = extractSubcomponents({
                 children,
-                allowedChildren: ['AccordionItem_Header', 'AccordionItem_Content'],
+                allowedChildren: [
+                    { name: 'AccordionItem_Header', allowMultiple: false },
+                    { name: 'AccordionItem_Content', allowMultiple: false },
+                ],
+                includeRest: true,
             });
 
             useEffect(() => {
@@ -76,8 +84,9 @@ const AccordionItem = memo(
             return (
                 <View style={[accordionItemStyles.root, style]} {...rest} ref={ref}>
                     <AccordionItemContext.Provider value={contextValue}>
-                        {AccordionItem_Header[0]}
-                        {contextValue.expanded ? AccordionItem_Content[0] : null}
+                        {AccordionItem_Header}
+                        {contextValue.expanded ? AccordionItem_Content : null}
+                        {restChildren}
                     </AccordionItemContext.Provider>
                 </View>
             );
@@ -85,11 +94,6 @@ const AccordionItem = memo(
     ),
 );
 
-export const AccordionItemContext = createContext({
-    expanded: false,
-    onExpandedChange: (_expanded: boolean) => {},
-});
-
 AccordionItem.displayName = 'AccordionItem';
 
 export default AccordionItem;

package/components/Accordion/AccordionItemContent.tsx

@@ -1,11 +1,16 @@
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 import { View, type ViewProps } from 'react-native';
 
+import { AccordionItemContext } from './utils';
 import { accordionItemContentStyles } from './utils';
 
 export type Props = ViewProps & {};
 
 const AccordionItemContent = memo(({ style, children, ...rest }: Props) => {
+    const { expanded } = useContext(AccordionItemContext);
+
+    if (!expanded) return null;
+
     return (
         <View style={[accordionItemContentStyles.root, style]} {...rest}>
             {children}

package/components/Accordion/AccordionItemHeader.tsx

@@ -6,7 +6,7 @@ import type { WithElements } from '../../types';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { AccordionItemContext } from './AccordionItem';
+import { AccordionItemContext } from './utils';
 import { accordionItemHeaderStyles } from './utils';
 
 export type AccordionHeaderElementProps = {

package/components/Accordion/utils.ts

@@ -1,7 +1,13 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export const AccordionItemContext = createContext({
+    expanded: false,
+    onExpandedChange: (_expanded: boolean) => {},
+});
+
 const accordionStylesDefault = StyleSheet.create({
     root: {},
 });

package/components/ActivityIndicator/ActivityIndicator.tsx

@@ -1,25 +1,17 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import {
-    type ActivityIndicatorProps,
-    Animated,
-    Easing,
-    Platform,
-    View,
-    type ViewStyle,
-} from 'react-native';
+import { type ActivityIndicatorProps, Animated, Easing, Platform, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 import AnimatedSpinner from './AnimatedSpinner';
 
-export type Props = ActivityIndicatorProps & {
+export type Props = Omit<ActivityIndicatorProps, 'color'> & {
     /**
      * Whether to show the indicator or hide it.
      */
     animating?: boolean;
     /**
      * The color of the spinner.
-     */
     color?: string;
     /**
      * Size of the indicator.
@@ -29,7 +21,7 @@ export type Props = ActivityIndicatorProps & {
      * Whether the indicator should hide when not animating.
      */
     hidesWhenStopped?: boolean;
-    style?: ViewStyle;
+    color?: string;
 };
 
 const DURATION = 2400;
@@ -63,7 +55,7 @@ const mapIndicatorSize = (indicatorSize: 'small' | 'large' | number | undefined)
  */
 const ActivityIndicator = ({
     animating = true,
-    color: indicatorColorProp,
+    color,
     hidesWhenStopped = true,
     size: indicatorSize = 'small',
     style: styleProp,
@@ -83,13 +75,12 @@ const ActivityIndicator = ({
 
     const size = mapIndicatorSize(indicatorSize);
 
-    const { color, viewStyle, animatedViewStyle } = useMemo(() => {
+    const { viewStyle, animatedViewStyle } = useMemo(() => {
         return {
-            color: indicatorColorProp,
             viewStyle: [componentStyles.container, styleProp],
             animatedViewStyle: [{ width: size, height: size, opacity: fade }],
         };
-    }, [componentStyles.container, fade, indicatorColorProp, size, styleProp]);
+    }, [componentStyles.container, fade, size, styleProp]);
 
     const startRotation = useCallback(() => {
         // Show indicator

package/components/Appbar/AppbarBase.tsx

@@ -1,7 +1,7 @@
 import { createContext, memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { useSubcomponents } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { Surface } from '../Surface';
 import type { AppbarBaseProps, AppbarType } from './types';
 import { appbarBaseStyles } from './utils';
@@ -26,9 +26,19 @@ const AppbarBase = ({
         };
     }, [innerContainerStyleProp, scrolling, style]);
 
-    const { Appbar_Left, Appbar_Right, Appbar_Title } = useSubcomponents({
+    const {
+        Appbar_Left,
+        Appbar_Right,
+        Appbar_Title,
+        rest: restChildren,
+    } = extractSubcomponents({
         children,
-        allowedChildren: ['Appbar_Left', 'Appbar_Right', 'Appbar_Title'],
+        allowedChildren: [
+            { name: 'Appbar_Left', allowMultiple: false },
+            { name: 'Appbar_Right', allowMultiple: false },
+            { name: 'Appbar_Title', allowMultiple: false },
+        ],
+        includeRest: true,
     });
 
     const contextValue = useMemo(() => ({ type: _type }), [_type]);
@@ -37,17 +47,12 @@ const AppbarBase = ({
         <Surface elevation={elevation} style={containerStyle} {...rest}>
             <AppbarContext.Provider value={contextValue}>
                 <View style={innerContainerStyle}>
-                    {Appbar_Left[0]}
-                    <>
-                        {_type === 'center-aligned' || _type === 'small' ? (
-                            Appbar_Title[0]
-                        ) : (
-                            <View />
-                        )}
-                    </>
-                    {Appbar_Right[0]}
+                    {Appbar_Left}
+                    <>{_type === 'center-aligned' || _type === 'small' ? Appbar_Title : <View />}</>
+                    {Appbar_Right}
                 </View>
-                <>{(_type === 'medium' || _type === 'large') && Appbar_Title[0]}</>
+                {(_type === 'medium' || _type === 'large') && Appbar_Title}
+                {restChildren}
             </AppbarContext.Provider>
         </Surface>
     );