react-native-molecules 0.5.0-beta.10 → 0.5.0-beta.12

package/components/IconButton/utils.ts

@@ -22,7 +22,6 @@ const iconButtonSizeToIconSizeMapDefault = {
 const iconButtonStylesDefault = StyleSheet.create(theme => ({
     root: {
         borderColor: theme.colors.outline,
-        color: theme.colors.onSurfaceVariant,
         borderRadius: theme.shapes.corner.full,
         overflow: 'hidden',
         borderWidth: 0,
@@ -73,16 +72,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
 
                 contained: {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.primary,
                 },
 
                 'contained-tonal': {
                     backgroundColor: theme.colors.surfaceVariant,
-                    color: theme.colors.onSurfaceVariant,
                 },
 
                 outlined: {
-                    color: theme.colors.onSurfaceVariant,
                     borderWidth: 1,
                 },
             },
@@ -92,30 +88,23 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
             {
                 variant: 'default',
                 state: 'selectedAndDisabled',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selected',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'default',
                 state: 'selectedAndHovered',
-                styles: {
-                    color: theme.colors.primary,
-                },
+                styles: {},
             },
             {
                 variant: 'contained',
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -130,14 +119,13 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
                 variant: 'contained',
                 state: 'selectedAndHovered',
                 styles: {
-                    color: theme.colors.primary,
+                    backgroundColor: theme.colors.primary,
                 },
             },
             {
@@ -145,7 +133,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'hovered',
                 styles: {
                     backgroundColor: theme.colors.primary,
-                    color: theme.colors.onPrimary,
                 },
             },
             {
@@ -153,7 +140,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -168,7 +154,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -176,7 +161,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -184,7 +168,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndDisabled',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -200,7 +183,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selected',
                 styles: {
                     backgroundColor: theme.colors.inverseSurface,
-                    color: theme.colors.inverseOnSurface,
                     borderWidth: 0,
                 },
             },
@@ -209,7 +191,6 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 state: 'selectedAndHovered',
                 styles: {
                     backgroundColor: theme.colors.secondaryContainer,
-                    color: theme.colors.onSecondaryContainer,
                 },
             },
             {
@@ -294,13 +275,147 @@ const iconButtonStylesDefault = StyleSheet.create(theme => ({
                 variant: 'outlined',
                 state: 'hovered',
                 styles: {
-                    backgroundColor: theme.colors.stateLayer.hover.inverseOnSurface,
+                    backgroundColor: theme.colors.stateLayer.hover.onSurfaceVariant,
                 },
             },
         ],
     },
 
-    icon: {},
+    icon: {
+        color: theme.colors.onSurfaceVariant,
+
+        variants: {
+            variant: {
+                default: {},
+
+                contained: {
+                    color: theme.colors.primary,
+                },
+
+                'contained-tonal': {
+                    color: theme.colors.onSurfaceVariant,
+                },
+
+                outlined: {
+                    color: theme.colors.onSurfaceVariant,
+                },
+            },
+        },
+
+        compoundVariants: [
+            {
+                variant: 'default',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'default',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.primary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained',
+                state: 'hovered',
+                styles: {
+                    color: theme.colors.onPrimary,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'contained-tonal',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndDisabled',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'disabled',
+                styles: {},
+            },
+            {
+                variant: 'outlined',
+                state: 'selected',
+                styles: {
+                    color: theme.colors.inverseOnSurface,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'selectedAndHovered',
+                styles: {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
+            {
+                variant: 'outlined',
+                state: 'hovered',
+                styles: {},
+            },
+        ],
+    },
 }));
 
 export const defaultStyles = getRegisteredComponentStylesWithFallback(

package/components/Select/Select.tsx

@@ -807,7 +807,7 @@ SelectOption.displayName = 'Select_Option';
 
 // Select.SearchInput - handles search
 const SelectSearchInput = memo(
-    ({ autoFocus = true, ...textInputProps }: SelectSearchInputProps) => {
+    ({ autoFocus = true, children, ...textInputProps }: SelectSearchInputProps) => {
         const { searchQuery, setSearchQuery } = useSelectContextValue(state => ({
             searchQuery: state.searchQuery,
             setSearchQuery: state.setSearchQuery,
@@ -866,16 +866,19 @@ const SelectSearchInput = memo(
                 ref={textInputRef}
                 autoFocus={Platform.OS !== 'web' && autoFocus}
                 style={styles.searchInput}
-                left={<Icon onPress={onPressLeftIcon} name="magnify" size={20} />}
-                right={
-                    searchQuery ? (
-                        <IconButton name="close" size={20} onPress={onClearSearchQuery} />
-                    ) : undefined
-                }
                 size="sm"
                 variant="outlined"
-                {...inputProps}
-            />
+                {...inputProps}>
+                <TextInput.Left>
+                    <Icon onPress={onPressLeftIcon} name="magnify" size={20} />
+                </TextInput.Left>
+                {searchQuery && (
+                    <TextInput.Right>
+                        <IconButton name="close" size={20} onPress={onClearSearchQuery} />
+                    </TextInput.Right>
+                )}
+                {children}
+            </TextInput>
         );
     },
 );

package/components/Tabs/TabItem.tsx

@@ -1,29 +1,20 @@
-import {
-    Children,
-    cloneElement,
-    forwardRef,
-    isValidElement,
-    type JSXElementConstructor,
-    memo,
-    type ReactElement,
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { type LayoutChangeEvent, View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { tabsItemStyles } from './utils';
+import { TabItemContext, tabsItemStyles } from './utils';
 
-export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
+export type TabItemProps<T extends string | number> = Omit<
+    TouchableRippleProps,
+    'children' | 'ref'
+> & {
     /**
      * name of the tab. This should be unique like a route name
      * */
-    name: string;
+    name: T;
     /**
      * Allows to define if TabItem is active.
      * */
@@ -37,22 +28,11 @@ export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
     contentsContainerProps?: Omit<ViewProps, 'children' | 'style' | 'onLayout'>;
     onLayoutContent?: (e: LayoutChangeEvent) => void;
     accessibilityLabel?: string;
-    children: ReactElement<
-        {
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        },
-        JSXElementConstructor<{
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        }>
-    >;
+    children: ReactNode;
     stateLayerProps?: ViewProps;
 };
 
-const TabItem = (
+const TabItem = <T extends string | number>(
     {
         active = false,
         variant = 'primary',
@@ -65,7 +45,7 @@ const TabItem = (
         children,
         stateLayerProps,
         ...rest
-    }: TabItemProps,
+    }: TabItemProps<T>,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
@@ -110,36 +90,33 @@ const TabItem = (
         [active, accessibilityLabel, state],
     );
 
+    const contextValue = useMemo(() => ({ active, hovered, variant }), [active, hovered, variant]);
+
     return (
-        <TouchableRipple
-            style={containerStyle}
-            accessibilityRole="tab"
-            accessibilityState={accessibilityState}
-            accessibilityValue={accessibilityValue}
-            {...rest}
-            ref={actionsRef}
-            onLayout={onLayout}>
-            <>
-                <View
-                    style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
-                    {...contentsContainerProps}
-                    onLayout={onLayoutHandled}>
-                    {Children.map(children, child => {
-                        if (!isValidElement(child)) return null;
-                        return cloneElement(child, {
-                            active,
-                            hovered,
-                            variant,
-                        });
-                    })}
-                </View>
+        <TabItemContext.Provider value={contextValue}>
+            <TouchableRipple
+                style={containerStyle}
+                accessibilityRole="tab"
+                accessibilityState={accessibilityState}
+                accessibilityValue={accessibilityValue}
+                {...rest}
+                ref={actionsRef}
+                onLayout={onLayout}>
+                <>
+                    <View
+                        style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
+                        {...contentsContainerProps}
+                        onLayout={onLayoutHandled}>
+                        {children}
+                    </View>
 
-                <StateLayer
-                    {...stateLayerProps}
-                    style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
-                />
-            </>
-        </TouchableRipple>
+                    <StateLayer
+                        {...stateLayerProps}
+                        style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
+                    />
+                </>
+            </TouchableRipple>
+        </TabItemContext.Provider>
     );
 };
 

package/components/Tabs/TabLabel.tsx

@@ -1,9 +1,9 @@
-import { type FC, memo, useMemo } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { type TextProps, type TextStyle } from 'react-native';
 
 import { Icon, type IconProps, type IconType } from '../Icon';
 import { Text } from '../Text';
-import { tabsLabelStyles } from './utils';
+import { TabItemContext, tabsLabelStyles } from './utils';
 
 const DEFAULT_ICON_SIZE = 24;
 
@@ -23,11 +23,6 @@ export type TabLabelProps = {
     iconStyle?: TextStyle;
 
     activeColor?: string;
-
-    active: boolean;
-    hovered: boolean;
-
-    variant: 'primary' | 'secondary';
 };
 
 const TabLabel = memo((props: TabLabelProps) => {
@@ -40,9 +35,10 @@ const TabLabel = memo((props: TabLabelProps) => {
         labelStyle: labelStyleProp,
         labelProps,
         label,
-        active,
     } = props;
 
+    const { active } = useContext(TabItemContext);
+
     // tabsLabelStyles.useVariants({
     //     variant,
     //     state: resolveStateVariant({
@@ -81,4 +77,4 @@ const TabLabel = memo((props: TabLabelProps) => {
 
 TabLabel.displayName = 'TabLabel';
 
-export default TabLabel as unknown as FC<Omit<TabLabelProps, 'active' | 'hovered' | 'variant'>>;
+export default TabLabel;