@fountain-ui/core 3.0.0-alpha.44 → 3.0.0-alpha.46

package/src/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { Platform, StyleSheet, Text, TextInput, View } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
@@ -11,6 +11,8 @@ import type TextFieldProps from './TextFieldProps';
 import type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';
 import useVariantStyleMap from './useVariantStyleMap';
 
+const isWeb = Platform.OS === 'web';
+
 const styles = StyleSheet.create({
     root: {
         alignItems: 'center',
@@ -57,6 +59,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const {
         autoFocus,
         containerStyle: containerStyleProp,
+        multiline,
         editable = true,
         hint,
         isLoading,
@@ -84,6 +87,17 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
     const [isFocused, setIsFocused] = useState<boolean>(autoFocus ?? false);
     const [secureTextEntry, setSecureTextEntry] = useState<boolean>(secureTextEntryProp ?? false);
 
+    const internalRef = useRef<TextInput>(null);
+
+    const mergedRef = useCallback((node: TextInput | null) => {
+        (internalRef as React.MutableRefObject<TextInput | null>).current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref) {
+            (ref as React.MutableRefObject<TextInput | null>).current = node;
+        }
+    }, [ref]);
+
     const variantStyles = useVariantStyleMap(variant, status, isFocused);
 
     const handleBlur = (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -100,6 +114,21 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         setSecureTextEntry((current) => !current);
     };
 
+    const resizeHeight = useCallback(() => {
+        const el = internalRef.current as unknown as HTMLTextAreaElement | null;
+        if (el) {
+            el.style.height = 'auto';
+            el.style.height = `${el.scrollHeight}px`;
+        }
+    }, []);
+
+    useLayoutEffect(() => {
+        const shouldResizeHeight = multiline && isWeb;
+        if (shouldResizeHeight) {
+            resizeHeight();
+        }
+    }, [resizeHeight, multiline, value]);
+
     const handleChangeText = (text: string) => {
         onChangeTextProp?.(text);
     };
@@ -119,7 +148,7 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
         styles.input,
         variantStyles.inputStyle,
         variantStyles.inputFontStyle,
-        Platform.OS === 'web' ? { outlineWidth: 0 } as FountainUiStyle : {},
+        isWeb ? { outlineWidth: 0 } as FountainUiStyle : {},
         styleProp,
     ]);
 
@@ -180,10 +209,11 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                             onBlur={handleBlur}
                             onChangeText={handleChangeText}
                             onFocus={handleFocus}
-                            ref={ref}
+                            ref={mergedRef}
                             secureTextEntry={secureTextEntry}
                             style={inputStyle}
                             value={value}
+                            multiline={multiline}
                             {...otherProps}
                         />
                     </View>

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
@@ -150,8 +150,13 @@ export default function Tooltip(props: TooltipProps) {
         { flexShrink: 1 },
     ]);
 
+    const beakOverlapStyle = {
+        [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth,
+    };
+
     const beakStyle = css({
         transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],
+        ...beakOverlapStyle,
     });
 
     const buttonElem = (