@hero-design/rn 8.124.1 → 8.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.124.1",
+  "version": "8.125.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -12,7 +12,6 @@ import { Animated, Easing } from 'react-native';
 import type { ReactElement, Ref } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { useTheme } from '../../theme';
-import Icon from '../Icon';
 import {
   StyledAsteriskLabelInsideTextInput,
   StyledBorderBackDrop,
@@ -22,6 +21,7 @@ import {
   StyledErrorAndMaxLengthContainer,
   StyledErrorContainer,
   StyledHelperText,
+  StyledInputContentContainer,
   StyledLabelContainerInsideTextInput,
   StyledLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
@@ -102,10 +102,7 @@ const RichTextEditor = ({
     return 'default';
   }, [isFocused, error, isEmptyValue]);
 
-  const [inputSize, setInputSize] = React.useState<{
-    height: number;
-    width: number;
-  }>({ height: 0, width: 0 });
+  const [containerHeight, setContainerHeight] = React.useState(0);
 
   const focusAnimation = useRef(new Animated.Value(0)).current;
 
@@ -119,10 +116,11 @@ const RichTextEditor = ({
   }, [focusAnimation, isEmptyValue, isFocused]);
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const { height, width } = event.nativeEvent.layout;
-    setInputSize((prev) => ({ ...prev, height, width }));
+    setContainerHeight(event.nativeEvent.layout.height);
   }, []);
 
+  const backgroundColor = theme.__hd__.textInput.colors.containerBackground;
+
   const handleEditorFocus = useCallback(() => {
     onFocus?.();
     setIsFocused(true);
@@ -135,91 +133,107 @@ const RichTextEditor = ({
 
   return (
     <StyledContainer testID={testID}>
-      <StyledLabelContainerInsideTextInput
-        themeHasPrefix={false}
+      <StyledTextInputContainer
+        onLayout={onLayout}
         themeVariant="text"
-        pointerEvents="none"
-        testID="input-label-container"
-        style={[
-          {
-            transformOrigin: 'top left',
-          },
-          {
-            transform: [
+        themeState={state}
+      >
+        <StyledBorderBackDrop
+          themeState={state}
+          themeFocused={isFocused}
+          themeFilled={!isEmptyValue}
+          style={{ backgroundColor }}
+        />
+
+        <StyledInputContentContainer themeHasLabel={!!label}>
+          <StyledLabelContainerInsideTextInput
+            themeVariant="text"
+            pointerEvents="none"
+            testID="input-label-container"
+            style={[
               {
-                translateY: focusAnimation.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [inputSize.height / 2, theme.space.xsmall],
-                }),
+                transformOrigin: 'top left',
               },
               {
-                scale: focusAnimation.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [1, 0.75],
-                }),
+                transform: [
+                  {
+                    translateY: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [
+                        Math.max(
+                          0,
+                          (containerHeight -
+                            theme.__hd__.textInput.lineHeights.label) /
+                            2
+                        ),
+                        theme.__hd__.textInput.space.labelFocusedTranslateY,
+                      ],
+                    }),
+                  },
+                  {
+                    scale: focusAnimation.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [1, 0.75],
+                    }),
+                  },
+                ],
               },
-            ],
-          },
-        ]}
-      >
-        {!!label && (
-          <StyledLabelInsideTextInput
-            style={{
-              backgroundColor: theme.__hd__.textInput.colors.labelBackground,
-            }}
-            testID="input-label"
-            themeState={state}
+            ]}
           >
-            {required && (
-              <StyledAsteriskLabelInsideTextInput
+            {!!label && (
+              <StyledLabelInsideTextInput
                 style={{
                   backgroundColor:
                     theme.__hd__.textInput.colors.labelBackground,
                 }}
+                testID="input-label"
                 themeState={state}
               >
-                *
-              </StyledAsteriskLabelInsideTextInput>
+                {required && (
+                  <StyledAsteriskLabelInsideTextInput
+                    style={{
+                      backgroundColor:
+                        theme.__hd__.textInput.colors.labelBackground,
+                    }}
+                    themeState={state}
+                  >
+                    *
+                  </StyledAsteriskLabelInsideTextInput>
+                )}
+                <Typography.Body intent="muted" numberOfLines={1}>
+                  {label}
+                </Typography.Body>
+              </StyledLabelInsideTextInput>
             )}
-            <Typography.Body numberOfLines={1}>{label}</Typography.Body>
-          </StyledLabelInsideTextInput>
-        )}
-      </StyledLabelContainerInsideTextInput>
-      <StyledTextInputContainer onLayout={onLayout}>
-        <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
-
-        <StyledTextInputAndLabelContainer>
-          <RichTextEditorInput
-            name={name}
-            value={value}
-            style={[
-              style,
-              {
-                marginHorizontal:
-                  theme.__hd__.textInput.space.inputHorizontalMargin,
-              },
-            ]}
-            testID="webview"
-            onChange={onChange}
-            autoFocus={autoFocus}
-            editorRef={forwardedRef}
-            placeholder={placeholder}
-            onBlur={handleEditorBlur}
-            onFocus={handleEditorFocus}
-            onCursorChange={onCursorChange}
-          />
-        </StyledTextInputAndLabelContainer>
+          </StyledLabelContainerInsideTextInput>
+
+          <StyledTextInputAndLabelContainer themeHasLabel={!!label}>
+            <RichTextEditorInput
+              name={name}
+              value={value}
+              style={[
+                style,
+                {
+                  marginHorizontal:
+                    theme.__hd__.textInput.space.inputHorizontalMargin,
+                },
+              ]}
+              testID="webview"
+              onChange={onChange}
+              autoFocus={autoFocus}
+              editorRef={forwardedRef}
+              placeholder={placeholder}
+              onBlur={handleEditorBlur}
+              onFocus={handleEditorFocus}
+              onCursorChange={onCursorChange}
+            />
+          </StyledTextInputAndLabelContainer>
+        </StyledInputContentContainer>
       </StyledTextInputContainer>
       <StyledErrorAndHelpTextContainer>
         <StyledErrorAndMaxLengthContainer>
           {error ? (
             <StyledErrorContainer>
-              <Icon
-                testID="input-error-icon"
-                icon="circle-info"
-                size="xsmall"
-                intent="danger"
-              />
               <StyledError testID="input-error-message">{error}</StyledError>
             </StyledErrorContainer>
           ) : (

package/src/components/Search/StyledSearch.tsx

@@ -48,7 +48,7 @@ export const StyledSuffixContainer = styled(View)(({ theme }) => ({
 export const StyledInput = styled(TextInput)(({ theme }) => ({
   textAlignVertical: 'center',
   fontSize: theme.__hd__.search.fontSizes.text,
-  color: theme.__hd__.textInput.colors.text,
+  color: theme.__hd__.textInput.colors.text.default,
   alignSelf: 'stretch',
   flexGrow: 1,
   flexShrink: 1,

package/src/components/Select/MultiSelect/index.tsx

@@ -107,6 +107,11 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
     setOpen(true);
   }, []);
 
+  let selectSuffix: TextInputProps['suffix'];
+  if (editable && !disabled) {
+    selectSuffix = open ? 'arrow-up' : 'arrow-down';
+  }
+
   useEffect(() => {
     setSelectingValue(value);
   }, [open, value]);
@@ -131,7 +136,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
-              suffix="arrow-down"
+              suffix={selectSuffix}
               multiline
               error={error}
               editable={editable}

package/src/components/Select/SingleSelect/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import type {
   TextInputProps as NativeTextInputProps,
   SectionList,
@@ -90,6 +90,14 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
     setOpen(true);
   }, []);
 
+  const selectSuffix: TextInputProps['suffix'] = useMemo(() => {
+    if (editable && !disabled) {
+      return open ? 'arrow-up' : 'arrow-down';
+    }
+
+    return undefined;
+  }, [editable, disabled, open]);
+
   return (
     <>
       <View
@@ -111,7 +119,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
               {...inputProps}
               label={label}
               value={renderSelectedValue ? rawValue : displayedValue}
-              suffix="arrow-down"
+              suffix={selectSuffix}
               multiline
               error={error}
               editable={editable}

package/src/components/TextInput/StyledTextInput.tsx

@@ -1,10 +1,46 @@
 import { TextInput, View, StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
+import type { Theme } from '@emotion/react';
 import Typography from '../Typography';
 
 export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 type Variant = 'text' | 'textarea';
 
+const genBorderWidth = (
+  theme: Theme,
+  themeState: State,
+  themeFocused: boolean
+): number => {
+  if (themeState === 'readonly') return 0;
+  return themeFocused
+    ? theme.__hd__.textInput.borderWidths.container.focused
+    : theme.__hd__.textInput.borderWidths.container.normal;
+};
+
+const genBorderColor = (
+  theme: Theme,
+  themeState: State,
+  themeFocused: boolean,
+  themeFilled: boolean
+): string => {
+  if (themeState === 'error' && !themeFilled) {
+    return theme.__hd__.textInput.colors.borders.default;
+  }
+  if (themeState === 'error' && themeFilled) {
+    return theme.__hd__.textInput.colors.borders.error;
+  }
+  if (themeFocused) {
+    return (
+      theme.__hd__.textInput.colors.borders.focused ??
+      theme.__hd__.textInput.colors.borders.default
+    );
+  }
+  return (
+    theme.__hd__.textInput.colors.borders[themeState] ??
+    theme.__hd__.textInput.colors.borders.default
+  );
+};
+
 const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
   marginTop: theme.__hd__.textInput.space.containerMarginTop,
@@ -12,17 +48,14 @@ const StyledContainer = styled(View)(({ theme }) => ({
 
 const StyledLabelContainerInsideTextInput = styled(Animated.View)<{
   themeVariant: Variant;
-  themeHasPrefix: boolean;
-}>(({ themeVariant, themeHasPrefix, theme }) => ({
+}>(({ themeVariant, theme }) => ({
   flexDirection: 'row',
   alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
   position: 'absolute',
   zIndex: 1,
-  left: themeHasPrefix
-    ? theme.space.xxlarge
-    : theme.space.medium + theme.space.small,
+  left: 0,
   right: theme.space.medium,
-  top: -theme.__hd__.textInput.space.labelTop,
+  top: 0,
 }));
 
 const StyledLabelInsideTextInput = styled(View)<{
@@ -52,7 +85,6 @@ const StyledErrorContainer = styled(View)(({ theme }) => ({
 
 const StyledError = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.textInput.colors.error,
-  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
 }));
 
 const StyledMaxLengthMessage = styled(Typography.Caption)<{
@@ -71,7 +103,7 @@ const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
     fontSize: theme.__hd__.textInput.fontSizes.text,
     alignSelf: 'stretch',
     flexGrow: 2,
-    marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+    marginHorizontal: 0,
     paddingVertical: 0,
     maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
     height:
@@ -85,37 +117,54 @@ const StyledTextInput = styled(TextInput)<{ themeVariant: Variant }>(
 const StyledBorderBackDrop = styled(View)<{
   themeState: State;
   themeFocused: boolean;
-}>(({ theme, themeFocused, themeState }) => ({
+  themeFilled: boolean;
+}>(({ theme, themeFocused, themeState, themeFilled }) => ({
   ...StyleSheet.absoluteFillObject,
-  borderWidth: themeFocused
-    ? theme.__hd__.textInput.borderWidths.container.focused
-    : theme.__hd__.textInput.borderWidths.container.normal,
+  borderWidth: genBorderWidth(theme, themeState, themeFocused),
   borderRadius: theme.__hd__.textInput.radii.container,
-  borderColor:
-    theme.__hd__.textInput.colors.borders[themeState] ??
-    theme.__hd__.textInput.colors.borders.default,
+  borderColor: genBorderColor(theme, themeState, themeFocused, themeFilled),
 }));
 
-const StyledTextInputContainer = styled(View)(({ theme }) => ({
+const StyledTextInputContainer = styled(View)<{
+  themeVariant: Variant;
+  themeState: State;
+}>(({ theme, themeVariant, themeState }) => ({
   flexDirection: 'row',
   alignItems: 'center',
-  padding: theme.__hd__.textInput.space.containerPadding,
-  backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+  paddingHorizontal: theme.__hd__.textInput.space.containerHorizontalPadding,
+  paddingVertical: theme.__hd__.textInput.space.containerVerticalPadding,
   borderRadius: theme.__hd__.textInput.radii.container,
+  ...(themeVariant === 'text' && {
+    minHeight: theme.__hd__.textInput.sizes.containerMinHeight,
+  }),
+  ...(themeState === 'disabled' && { opacity: 0.5 }),
+  gap: theme.space.smallMedium,
 }));
 
-const StyledTextInputAndLabelContainer = styled(View)(() => ({
+// Outer wrapper that owns flex-grow/shrink and provides the positioning context
+// for StyledLabelContainerInsideTextInput (position: absolute).
+const StyledInputContentContainer = styled(View)<{ themeHasLabel: boolean }>(
+  ({ themeHasLabel }) => ({
+    flexGrow: 2,
+    flexShrink: 1,
+    alignSelf: 'stretch',
+    justifyContent: themeHasLabel ? 'flex-start' : 'center',
+  })
+);
+
+const StyledTextInputAndLabelContainer = styled(View)<{
+  themeHasLabel: boolean;
+}>(({ theme, themeHasLabel }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   alignSelf: 'stretch',
-  flexGrow: 2,
-  flexShrink: 1,
+  ...(themeHasLabel && {
+    paddingTop: theme.__hd__.textInput.space.inputAndLabelContainerPaddingTop,
+  }),
 }));
 
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
-  paddingHorizontal:
-    theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
-  minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+  minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerMinHeight,
   paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop,
 }));
 
@@ -136,6 +185,7 @@ export {
   StyledContainer,
   StyledErrorContainer,
   StyledHelperText,
+  StyledInputContentContainer,
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,