react-native-molecules 0.5.0-beta.14 → 0.5.0-beta.15

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

@@ -10,8 +10,9 @@ 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';
 
@@ -45,9 +46,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 +85,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>
             );

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/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>
     );

package/components/Button/index.tsx

@@ -10,4 +10,4 @@ export const Button = Object.assign(ButtonBase, {
 });
 
 export type { Props as ButtonProps } from './Button';
-export { buttonIconStyles, buttonStyles, buttonTextStyles } from './utils';
+export { ButtonContext, buttonIconStyles, buttonStyles, buttonTextStyles } from './utils';

package/components/DatePickerInput/DatePickerInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useLatest, useToggle } from '../../hooks';
@@ -9,6 +9,7 @@ import { TextInput } from '../TextInput';
 import DatePickerInputModal from './DatePickerInputModal';
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal';
 import type { DatePickerInputProps } from './types';
+import { DatePickerInputContext } from './utils';
 
 function DatePickerInput(
     {
@@ -24,111 +25,99 @@ function DatePickerInput(
         startYear,
         endYear,
         dockedPopoverContentProps,
+        children,
         //locale = 'en',
         ...rest
     }: DatePickerInputProps,
     ref: any,
 ) {
     const triggerRef = useRef(null);
-    const { state: isOpen, onToggle } = useToggle(false);
-    const [visible, setVisible] = useState<boolean>(false);
+    const { state: isOpen, onToggle, handleOpen, handleClose } = useToggle(false);
 
     const onDismiss = useCallback(() => {
-        setVisible(false);
-    }, [setVisible]);
+        handleClose();
+    }, [handleClose]);
 
     const onChangeRef = useLatest(onChange);
 
     const onInnerConfirm = useCallback(
         ({ date }: any) => {
-            setVisible(false);
+            handleClose();
             onChangeRef.current(date);
         },
-        [setVisible, onChangeRef],
+        [handleClose, onChangeRef],
     );
 
     const onPressCalendarIcon = useCallback(() => {
         if (pickerMode === 'docked') {
             onToggle();
+        } else {
+            handleOpen();
         }
-        setVisible(true);
-    }, [pickerMode, onToggle]);
+    }, [pickerMode, onToggle, handleOpen]);
 
-    const renderers = useMemo(() => {
-        return {
-            modal: (
-                <DatePickerInputModal
-                    date={value}
-                    mode="single"
-                    isOpen={visible}
-                    onClose={onDismiss}
-                    onConfirm={onInnerConfirm}
-                    locale={locale}
-                    validRange={validRange}
-                />
-            ),
-            docked: (
-                <DatePickerDocked
-                    date={value}
-                    locale={locale}
-                    startYear={startYear}
-                    endYear={endYear}
-                    onChange={onInnerConfirm}
-                    isOpen={isOpen}
-                    onClose={onDismiss}
-                    onToggle={onToggle}
-                    triggerRef={triggerRef}
-                    popoverContentProps={dockedPopoverContentProps}
-                />
-            ),
-        };
-    }, [
-        dockedPopoverContentProps,
-        endYear,
-        isOpen,
-        locale,
-        onDismiss,
-        onInnerConfirm,
-        onToggle,
-        startYear,
-        validRange,
-        value,
-        visible,
-    ]);
-
-    const rightElement = useMemo(
-        () => (
-            <>
-                {withModal || pickerMode === 'docked' ? (
-                    <>
-                        <IconButton
-                            ref={triggerRef}
-                            style={styles.calendarButton}
-                            name={calendarIcon}
-                            onPress={onPressCalendarIcon}
-                            disabled={disabled}
-                        />
-                        {renderers[pickerMode]}
-                    </>
-                ) : null}
-            </>
+    const renderers = {
+        modal: (
+            <DatePickerInputModal
+                date={value}
+                mode="single"
+                isOpen={isOpen}
+                onClose={onDismiss}
+                onConfirm={onInnerConfirm}
+                locale={locale}
+                validRange={validRange}
+            />
         ),
-        [calendarIcon, disabled, onPressCalendarIcon, pickerMode, renderers, withModal],
+        docked: (
+            <DatePickerDocked
+                date={value}
+                locale={locale}
+                startYear={startYear}
+                endYear={endYear}
+                onChange={onInnerConfirm}
+                isOpen={isOpen}
+                onClose={onDismiss}
+                onToggle={onToggle}
+                triggerRef={triggerRef}
+                popoverContentProps={dockedPopoverContentProps}
+            />
+        ),
+    };
+
+    const contextValue = useMemo(
+        () => ({ isOpen, onPressTrigger: onPressCalendarIcon }),
+        [isOpen, onPressCalendarIcon],
     );
 
     return (
-        <DatePickerInputWithoutModal
-            ref={ref}
-            {...rest}
-            disabled={disabled}
-            value={value}
-            inputMode={inputMode}
-            validRange={validRange}
-            onChange={onChange}
-            // locale={locale}
-        >
-            <TextInput.Right>{rightElement}</TextInput.Right>
-        </DatePickerInputWithoutModal>
+        <DatePickerInputContext value={contextValue}>
+            <DatePickerInputWithoutModal
+                ref={ref}
+                {...rest}
+                disabled={disabled}
+                value={value}
+                inputMode={inputMode}
+                validRange={validRange}
+                onChange={onChange}
+                // locale={locale}
+            >
+                <TextInput.Right>
+                    {withModal || pickerMode === 'docked' ? (
+                        <>
+                            <IconButton
+                                ref={triggerRef}
+                                style={styles.calendarButton}
+                                name={calendarIcon}
+                                onPress={onPressCalendarIcon}
+                                disabled={disabled}
+                            />
+                        </>
+                    ) : null}
+                </TextInput.Right>
+                {children}
+                {renderers[pickerMode]}
+            </DatePickerInputWithoutModal>
+        </DatePickerInputContext>
     );
 }
 

package/components/DatePickerInput/index.tsx

@@ -7,4 +7,5 @@ export const DatePickerInput = getRegisteredComponentWithFallback(
 );
 
 export type { DatePickerInputProps } from './types';
-export { datePickerInputStyles } from './utils';
+export { DatePickerInputContext, datePickerInputStyles } from './utils';
+export type { DatePickerInputContextType } from './utils';

package/components/DatePickerInput/utils.ts

@@ -1,7 +1,16 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export type DatePickerInputContextType = {
+    onPressTrigger: () => void;
+};
+
+export const DatePickerInputContext = createContext<DatePickerInputContextType>({
+    onPressTrigger: () => {},
+});
+
 const datePickerInputStylesDefault = StyleSheet.create({
     root: {
         minWidth: 150,

package/components/Drawer/Drawer.tsx

@@ -3,25 +3,36 @@ import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { useSubcomponents } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = Omit<ViewProps, 'children'> & {
     children: ReactElement | ReactElement[];
 };
 
-const allowedChildren = ['Drawer_Footer', 'Drawer_Header', 'Drawer_Content'];
+const allowedChildren = [
+    { name: 'Drawer_Footer', allowMultiple: false },
+    { name: 'Drawer_Header', allowMultiple: false },
+    { name: 'Drawer_Content', allowMultiple: false },
+];
 
 const Drawer = ({ style, children, ...rest }: Props) => {
-    const { Drawer_Header, Drawer_Footer, Drawer_Content } = useSubcomponents({
+    const {
+        Drawer_Header,
+        Drawer_Footer,
+        Drawer_Content,
+        rest: restChildren,
+    } = extractSubcomponents({
         children,
         allowedChildren,
+        includeRest: true,
     });
 
     return (
         <View style={[drawerStyles.root, style]} {...rest}>
-            {Drawer_Header[0]}
-            {Drawer_Content[0]}
-            {Drawer_Footer[0]}
+            {Drawer_Header}
+            {Drawer_Content}
+            {Drawer_Footer}
+            {restChildren}
         </View>
     );
 };

package/components/FilePicker/FilePicker.tsx

@@ -5,6 +5,7 @@ import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
 import { IconButton } from '../IconButton';
 import { TextInput, type TextInputProps } from '../TextInput';
+import { FilePickerContext } from './utils';
 
 export type OmitProp =
     | 'editable'
@@ -84,14 +85,18 @@ const FilePicker = ({
         });
     }, [onValueChange, openFilePicker]);
 
+    const contextValue = useMemo(() => ({ onPressTrigger: onPress }), [onPress]);
+
     return (
-        <TextInput value={displayText} {...rest} editable={false} ref={ref}>
-            <TextInput.Label>Choose file</TextInput.Label>
-            <TextInput.Right>
-                <IconButton type="material-community" name="upload" onPress={onPress} />
-            </TextInput.Right>
-            {children}
-        </TextInput>
+        <FilePickerContext value={contextValue}>
+            <TextInput value={displayText} {...rest} editable={false} ref={ref}>
+                <TextInput.Label>Choose file</TextInput.Label>
+                <TextInput.Right>
+                    <IconButton type="material-community" name="upload" onPress={onPress} />
+                </TextInput.Right>
+                {children}
+            </TextInput>
+        </FilePickerContext>
     );
 };
 

package/components/FilePicker/index.tsx

@@ -4,4 +4,5 @@ import FilePickerDefault from './FilePicker';
 export const FilePicker = getRegisteredComponentWithFallback('FilePicker', FilePickerDefault);
 
 export type { Props as FilePickerProps } from './FilePicker';
-export { defaultStyles } from './utils';
+export { FilePickerContext, defaultStyles } from './utils';
+export type { FilePickerContextType } from './utils';

package/components/FilePicker/utils.ts

@@ -1,7 +1,16 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export type FilePickerContextType = {
+    onPressTrigger: () => void;
+};
+
+export const FilePickerContext = createContext<FilePickerContextType>({
+    onPressTrigger: () => {},
+});
+
 const filePickerStylesDefault = StyleSheet.create({
     root: {},
 });

package/components/NavigationRail/NavigationRail.tsx

@@ -1,30 +1,36 @@
 import { memo, type ReactElement } from 'react';
 import { View, type ViewProps } from 'react-native';
 
-import { useSubcomponents } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { navigationRailStyles } from './utils';
 
 export type Props = Omit<ViewProps, 'children'> & {
     children: ReactElement | ReactElement[];
 };
 const allowedChildren = [
-    'NavigationRail_Header',
-    'NavigationRail_Content',
-    'NavigationRail_Footer',
+    { name: 'NavigationRail_Header', allowMultiple: false },
+    { name: 'NavigationRail_Content', allowMultiple: false },
+    { name: 'NavigationRail_Footer', allowMultiple: false },
 ];
 
 const NavigationRail = ({ children, style, ...rest }: Props) => {
-    const { NavigationRail_Header, NavigationRail_Content, NavigationRail_Footer } =
-        useSubcomponents({
-            children,
-            allowedChildren,
-        });
+    const {
+        NavigationRail_Header,
+        NavigationRail_Content,
+        NavigationRail_Footer,
+        rest: restChildren,
+    } = extractSubcomponents({
+        children,
+        allowedChildren,
+        includeRest: true,
+    });
 
     return (
         <View style={[navigationRailStyles.root, style]} {...rest}>
             {NavigationRail_Header[0]}
             {NavigationRail_Content[0]}
             {NavigationRail_Footer[0]}
+            {restChildren}
         </View>
     );
 };

package/components/Tabs/Tabs.tsx

@@ -22,7 +22,8 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useControlledValue, useSubcomponents } from '../../hooks';
+import { useControlledValue } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { noop } from '../../utils/lodash';
 import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
@@ -81,7 +82,7 @@ export const TabBase = <T extends string | number>({
         variant,
     });
 
-    const { Tabs_Item: tabItems } = useSubcomponents({
+    const { Tabs_Item: tabItems } = extractSubcomponents({
         children,
         allowedChildren: ['Tabs_Item'],
     });

package/components/TextInput/TextInput.tsx

@@ -34,8 +34,8 @@ import {
 import { useActionState } from '../../hooks/useActionState';
 import useControlledValue from '../../hooks/useControlledValue';
 import useLatest from '../../hooks/useLatest';
-import useSubcomponents from '../../hooks/useSubcomponents';
 import { createSyntheticEvent, resolveStateVariant } from '../../utils';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { HelperText } from '../HelperText';
 import { Icon } from '../Icon';
 import { StateLayer } from '../StateLayer';
@@ -215,7 +215,7 @@ const TextInput = ({
         TextInput_SupportingText,
         TextInput_Outline,
         rest: restChildren,
-    } = useSubcomponents({
+    } = extractSubcomponents({
         children,
         allowedChildren: [
             { name: 'TextInput_Label', allowMultiple: false },

package/components/Tooltip/Tooltip.tsx

@@ -2,41 +2,63 @@ import {
     createContext,
     memo,
     type ReactElement,
+    type RefObject,
     useCallback,
     useEffect,
     useMemo,
     useRef,
 } from 'react';
-import { Text, type ViewProps, type ViewStyle } from 'react-native';
 
-import { useSubcomponents, useToggle } from '../../hooks';
-import { Popover, type PopoverProps } from '../Popover';
-import { tooltipStyles } from './utils';
+import { useToggle } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
-export type Props = Omit<PopoverProps, 'isOpen' | 'triggerRef'> & {
+export type Props = {
     fadeInDelay?: number;
     fadeOutDelay?: number;
-    showArrow?: boolean;
-    style?: ViewStyle;
-    children: ReactElement | ReactElement[];
     hoverableContent?: boolean;
+    children: ReactElement | ReactElement[];
+};
+
+export type TooltipContextValue = {
+    isOpen: boolean;
+    triggerRef: RefObject<any>;
+    onOpen: () => void;
+    onClose: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
 
+export const TooltipContext = createContext<TooltipContextValue>({
+    isOpen: false,
+    onOpen: () => {},
+    onClose: () => {},
+    triggerRef: { current: null },
+});
+
 const Tooltip = ({
-    style,
     children,
     fadeInDelay = 100,
     fadeOutDelay = 300,
-    showArrow = false,
     hoverableContent = false,
-    ...rest
 }: Props) => {
     const { state: isOpen, setState: setIsOpen } = useToggle(false);
     const triggerRef = useRef(null);
     const timeOutRef = useRef<NodeJS.Timeout>(undefined);
-    const popoverTimeoutRef = useRef<NodeJS.Timeout>(undefined);
     const preventCloseRef = useRef(false);
 
+    const {
+        Tooltip_Trigger,
+        Tooltip_Content,
+        rest: restChildren,
+    } = extractSubcomponents({
+        children,
+        allowedChildren: [
+            { name: 'Tooltip_Trigger', allowMultiple: false },
+            { name: 'Tooltip_Content', allowMultiple: false },
+        ],
+        includeRest: true,
+    });
+
     const onClose = useCallback(() => {
         if (preventCloseRef.current) return;
         clearTimeout(timeOutRef.current);
@@ -48,34 +70,13 @@ const Tooltip = ({
         timeOutRef.current = setTimeout(() => setIsOpen(true), fadeInDelay);
     }, [fadeInDelay, setIsOpen]);
 
-    // const setPopoverOpen = useCallback(
-    //     (_isOpen: boolean) => {
-    //         clearTimeout(popoverTimeoutRef.current);
-    //         popoverTimeoutRef.current = setTimeout(
-    //             () => setIsOpen(_isOpen),
-    //             isOpen ? fadeInDelay : fadeOutDelay,
-    //         );
-    //     },
-    //     [fadeInDelay, fadeOutDelay, isOpen, setIsOpen],
-    // );
-
-    const { Tooltip_Trigger, Tooltip_Content } = useSubcomponents({
-        children,
-        allowedChildren: ['Tooltip_Trigger', 'Tooltip_Content'],
-    });
-
-    const contextValue = useMemo(
+    const contextValue = useMemo<TooltipContextValue>(
         () => ({
+            isOpen,
             triggerRef,
             onOpen,
             onClose,
-        }),
-        [onClose, onOpen],
-    );
-
-    const { popoverContentProps, popoverStyle } = useMemo(
-        () => ({
-            popoverContentProps: (hoverableContent
+            ...(hoverableContent
                 ? {
                       onMouseEnter: () => {
                           preventCloseRef.current = true;
@@ -88,50 +89,24 @@ const Tooltip = ({
                           setIsOpen(false);
                       },
                   }
-                : {}) as ViewProps,
-            popoverStyle: [tooltipStyles.content, style],
+                : {}),
         }),
-        [hoverableContent, setIsOpen, style],
+        [hoverableContent, isOpen, onClose, onOpen, setIsOpen],
     );
 
     useEffect(() => {
-        const popoverTimeout = popoverTimeoutRef;
-
         return () => {
             clearTimeout(timeOutRef.current);
-            clearTimeout(popoverTimeout.current);
         };
     }, []);
 
     return (
         <TooltipContext.Provider value={contextValue}>
-            {Tooltip_Trigger[0]}
-            {isOpen && (
-                <Popover
-                    isOpen={isOpen}
-                    inverted
-                    // placement={placement}
-                    showArrow={showArrow}
-                    // backdropStyles={styles.backdrop}
-                    triggerRef={triggerRef}
-                    // setIsOpen={setPopoverOpen}
-                    {...popoverContentProps}
-                    {...rest}
-                    style={popoverStyle}
-                    // contentTextStyles={contentTextStyles}
-                    // popoverContentProps={popoverContentProps}
-                    onClose={onClose}>
-                    <Text style={tooltipStyles.contentText}>{Tooltip_Content[0]}</Text>
-                </Popover>
-            )}
+            {Tooltip_Trigger}
+            {Tooltip_Content}
+            {restChildren}
         </TooltipContext.Provider>
     );
 };
 
-export const TooltipContext = createContext({
-    onOpen: () => {},
-    onClose: () => {},
-    triggerRef: null as any,
-});
-
 export default memo(Tooltip);

package/components/Tooltip/TooltipContent.tsx

@@ -1,11 +1,38 @@
-import { memo, type ReactElement, type ReactNode } from 'react';
+import { memo, type ReactNode, useContext, useMemo } from 'react';
+import { type StyleProp, Text, type ViewStyle } from 'react-native';
 
-export type Props = {
-    children: ReactElement | ReactNode;
+import { Popover, type PopoverProps } from '../Popover';
+import { TooltipContext } from './Tooltip';
+import { tooltipStyles } from './utils';
+
+export type Props = Omit<PopoverProps, 'isOpen' | 'triggerRef' | 'onClose' | 'children'> & {
+    children?: ReactNode;
 };
 
-const TooltipContent = memo(({ children }: Props) => {
-    return <>{children}</>;
+const TooltipContent = memo(({ children, style, ...rest }: Props) => {
+    const { isOpen, triggerRef, onClose, onMouseEnter, onMouseLeave } = useContext(TooltipContext);
+
+    const popoverStyle = useMemo<StyleProp<ViewStyle>>(
+        () => [tooltipStyles.content, style],
+        [style],
+    );
+
+    if (!isOpen) return null;
+
+    return (
+        <Popover
+            isOpen={isOpen}
+            inverted
+            triggerRef={triggerRef}
+            onClose={onClose}
+            {...rest}
+            style={popoverStyle}
+            // @ts-ignore — onMouseEnter/onMouseLeave spread onto the inner View via ...rest in Popover
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}>
+            <Text style={tooltipStyles.contentText}>{children}</Text>
+        </Popover>
+    );
 });
 
 TooltipContent.displayName = 'Tooltip_Content';

package/components/Tooltip/index.tsx

@@ -10,7 +10,7 @@ export const TooltipDefault = Object.assign(TooltipComponent, {
 
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
-export type { Props as TooltipProps } from './Tooltip';
+export type { TooltipContextValue, Props as TooltipProps } from './Tooltip';
 export type { Props as TooltipContentProps } from './TooltipContent';
 export type { Props as TooltipTriggerProps } from './TooltipTrigger';
 export { tooltipStyles } from './utils';

package/hooks/index.tsx

@@ -18,6 +18,5 @@ export { useMediaQuery } from './useMediaQuery';
 export { useMergedRefs } from './useMergedRefs';
 export { default as usePrevious } from './usePrevious';
 export * from './useQueryFilter';
-export { default as useSubcomponents, type UseSubcomponentsProps } from './useSubcomponents';
 export * from './useTheme';
 export { default as useToggle } from './useToggle';

package/package.json

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

package/utils/extractSubcomponents.ts

@@ -0,0 +1,89 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Children, type FC, isValidElement } from 'react';
+
+export type ExtractSubcomponentsArgs<T extends string> = {
+    children: ReactNode;
+    /**
+     * array of displayName as string
+     * */
+    allowedChildren: (T | { name: T; allowMultiple?: boolean })[];
+    /**
+     * If true, also returns the remaining children that don't match any of the allowedChildren
+     * in a `rest` property
+     */
+    includeRest?: boolean;
+};
+
+export type ExtractSubcomponentsResult<T extends string, IncludeRest extends boolean = false> = {
+    [key in T]: ReactElement[];
+} & (IncludeRest extends true ? { rest: ReactNode[] } : {});
+
+/**
+ *  This will return an object with the displayNames as the property names
+ *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
+ *
+ *  return value -> {
+ *    Drawer_Header: [],
+ *    Drawer_Content: [],
+ *    Drawer_Footer: [],
+ *    DrawerItem: [],
+ *  }
+ *
+ *  If includeRest is true, also returns:
+ *  {
+ *    ...above,
+ *    rest: [remaining children that don't match allowedChildren]
+ *  }
+ *  */
+export function extractSubcomponents<
+    T extends string = string,
+    IncludeRest extends boolean = false,
+>({
+    children,
+    allowedChildren,
+    includeRest,
+}: ExtractSubcomponentsArgs<T> & { includeRest?: IncludeRest }): ExtractSubcomponentsResult<
+    T,
+    IncludeRest
+> {
+    // Single map: name → allowMultiple
+    const allowedMap = new Map<T, boolean>();
+    for (const entry of allowedChildren) {
+        if (typeof entry === 'string') {
+            allowedMap.set(entry as T, true);
+        } else {
+            allowedMap.set(entry.name, entry.allowMultiple ?? true);
+        }
+    }
+
+    const result = (includeRest ? { rest: [] } : {}) as ExtractSubcomponentsResult<T, IncludeRest>;
+    for (const name of allowedMap.keys()) {
+        (result as any)[name] = [];
+    }
+
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) {
+            if (includeRest) (result as any).rest.push(child);
+            return;
+        }
+
+        const displayName = (child.type as FC)?.displayName as T | undefined;
+        if (!displayName) {
+            if (includeRest) (result as any).rest.push(child);
+            return;
+        }
+
+        const allowMultiple = allowedMap.get(displayName);
+        if (allowMultiple !== undefined) {
+            if (allowMultiple) {
+                (result as any)[displayName].push(child);
+            } else {
+                (result as any)[displayName] = [child];
+            }
+        } else if (includeRest) {
+            (result as any).rest.push(child);
+        }
+    });
+
+    return result;
+}

package/hooks/useSubcomponents.tsx

@@ -1,91 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import { Children, type FC, isValidElement, useMemo } from 'react';
-
-export type UseSubcomponentsProps<T extends string> = {
-    children: ReactNode;
-    /**
-     * array of displayName as string
-     * */
-    allowedChildren: (T | { name: T; allowMultiple?: boolean })[];
-    /**
-     * If true, also returns the remaining children that don't match any of the allowedChildren
-     * in a `rest` property
-     */
-    includeRest?: boolean;
-};
-
-export type UseSubcomponentsResult<T extends string, IncludeRest extends boolean = false> = {
-    [key in T]: ReactElement[];
-} & (IncludeRest extends true ? { rest: ReactNode[] } : {});
-
-/**
- *  This will return an object with the displayNames as the property names
- *  eg. allowedChildren: ['Drawer_Header', 'Drawer_Content', 'Drawer_Footer', 'DrawerItem'];
- *
- *  return value -> {
- *    Drawer_Header: [],
- *    Drawer_Content: [],
- *    Drawer_Footer: [],
- *    DrawerItem: [],
- *  }
- *
- *  If includeRest is true, also returns:
- *  {
- *    ...above,
- *    rest: [remaining children that don't match allowedChildren]
- *  }
- *  */
-function useSubcomponents<T extends string = string, IncludeRest extends boolean = false>({
-    children,
-    allowedChildren,
-    includeRest,
-}: UseSubcomponentsProps<T> & { includeRest?: IncludeRest }): UseSubcomponentsResult<
-    T,
-    IncludeRest
-> {
-    return useMemo(() => {
-        const configs = allowedChildren.map(entry =>
-            typeof entry === 'string'
-                ? { name: entry, allowMultiple: true as boolean }
-                : { name: entry.name, allowMultiple: entry.allowMultiple ?? true },
-        );
-
-        const nameSet = new Set(configs.map(c => c.name));
-        const allowMultipleMap = new Map(configs.map(c => [c.name, c.allowMultiple]));
-
-        const result = configs.reduce((acc, { name }) => {
-            (acc as any)[name] = [];
-            return acc;
-        }, (includeRest ? { rest: [] } : {}) as UseSubcomponentsResult<T, IncludeRest>);
-
-        Children.forEach(children, child => {
-            if (!isValidElement(child)) {
-                if (includeRest) {
-                    (result as any).rest.push(child);
-                }
-                return;
-            }
-
-            const displayName = (child.type as FC)?.displayName as T | undefined;
-
-            if (displayName && nameSet.has(displayName)) {
-                if (allowMultipleMap.get(displayName)) {
-                    (result as any)[displayName].push(child);
-                } else {
-                    // Only keep the last matching child
-                    (result as any)[displayName] = [child];
-                }
-
-                return;
-            }
-
-            if (includeRest) {
-                (result as any).rest.push(child);
-            }
-        });
-
-        return result;
-    }, [allowedChildren, children, includeRest]);
-}
-
-export default useSubcomponents;