@pagopa/io-app-design-system 7.0.2 → 7.1.1

package/src/components/tabs/TabItem.tsx

@@ -1,4 +1,4 @@
-import { Ref, forwardRef, useCallback, useMemo } from "react";
+import { Ref, useCallback, useMemo } from "react";
 import {
   GestureResponderEvent,
   Pressable,
@@ -25,6 +25,7 @@ type ColorMode = "light" | "dark";
 type TabItemState = "default" | "selected" | "disabled";
 
 export type TabItem = WithTestID<{
+  ref?: Ref<View>;
   label: string;
   color?: ColorMode;
   selected?: boolean;
@@ -57,155 +58,151 @@ type ColorStates = {
 
 const DISABLED_OPACITY = 0.5;
 
-const TabItem = forwardRef(
-  (
-    {
-      label,
-      color = "light",
-      selected = false,
-      accessibilityLabel,
-      accessibilityHint,
-      testID,
-      onPress,
-      disabled = false,
-      icon,
-      iconSelected
-    }: TabItem,
-    ref: Ref<View>
-  ) => {
-    const { onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("medium");
-    const theme = useIOTheme();
-    const reducedMotion = useReducedMotion();
-
-    const mapColorStates: Record<
-      NonNullable<TabItem["color"]>,
-      ColorStates
-    > = useMemo(
-      () => ({
-        light: {
-          border: {
-            default: IOColors[theme["tab-item-border-default"]],
-            selected: hexToRgba(
-              IOColors[theme["tab-item-foreground-selected"]],
-              0.5
-            )
-          },
-          background: {
-            default: hexToRgba(
-              IOColors[theme["tab-item-background-selected"]],
-              0
-            ),
-            selected: hexToRgba(
-              IOColors[theme["tab-item-background-selected"]],
-              0.25
-            ),
-            pressed: IOColors[theme["appBackground-primary"]]
-          },
-          foreground: {
-            default: theme["tab-item-foreground-default"],
-            selected: theme["tab-item-foreground-selected"],
-            disabled: "grey-700"
-          }
+const TabItem = ({
+  label,
+  color = "light",
+  selected = false,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  onPress,
+  disabled = false,
+  icon,
+  iconSelected,
+  ref
+}: TabItem) => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const theme = useIOTheme();
+  const reducedMotion = useReducedMotion();
+
+  const mapColorStates: Record<
+    NonNullable<TabItem["color"]>,
+    ColorStates
+  > = useMemo(
+    () => ({
+      light: {
+        border: {
+          default: IOColors[theme["tab-item-border-default"]],
+          selected: hexToRgba(
+            IOColors[theme["tab-item-foreground-selected"]],
+            0.5
+          )
         },
-        dark: {
-          border: {
-            default: hexToRgba(IOColors.white, 0),
-            selected: IOColors.white
-          },
-          background: {
-            default: hexToRgba(IOColors.white, 0.1),
-            selected: IOColors.white,
-            pressed: IOColors.white
-          },
-          foreground: {
-            default: "white",
-            selected: "black",
-            disabled: "white"
-          }
-        }
-      }),
-      [theme]
-    );
-
-    const itemState: TabItemState = selected
-      ? "selected"
-      : disabled
-      ? "disabled"
-      : "default";
-
-    const foregroundColor = mapColorStates[color].foreground[itemState];
-
-    const selectedStateTransition = useDerivedValue(() =>
-      withSpring(selected ? 1 : 0, IOSpringValues.selection)
-    );
-
-    // Interpolate animation values from `pressed` values
-    const animatedStyle = useAnimatedStyle(() => ({
-      backgroundColor: interpolateColor(
-        selectedStateTransition.value,
-        [0, 1],
-        [
-          mapColorStates[color].background.default,
-          mapColorStates[color].background.selected
-        ]
-      ),
-      borderColor: interpolateColor(
-        selectedStateTransition.value,
-        [0, 1],
-        [
-          mapColorStates[color].border.default,
-          mapColorStates[color].border.selected
-        ]
-      )
-    }));
-
-    const activeIcon = selected ? iconSelected ?? icon : icon;
-
-    const handleOnPress = useCallback(
-      (event: GestureResponderEvent) => {
-        if (onPress) {
-          ReactNativeHapticFeedback.trigger("impactLight");
-          onPress(event);
+        background: {
+          default: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0
+          ),
+          selected: hexToRgba(
+            IOColors[theme["tab-item-background-selected"]],
+            0.25
+          ),
+          pressed: IOColors[theme["appBackground-primary"]]
+        },
+        foreground: {
+          default: theme["tab-item-foreground-default"],
+          selected: theme["tab-item-foreground-selected"],
+          disabled: "grey-700"
         }
       },
-      [onPress]
-    );
-
-    return (
-      <Pressable
-        ref={ref}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole="tab"
-        accessibilityState={{ checked: !!selected }}
-        testID={testID}
-        onPress={handleOnPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        accessible={true}
-        disabled={disabled}
+      dark: {
+        border: {
+          default: hexToRgba(IOColors.white, 0),
+          selected: IOColors.white
+        },
+        background: {
+          default: hexToRgba(IOColors.white, 0.1),
+          selected: IOColors.white,
+          pressed: IOColors.white
+        },
+        foreground: {
+          default: "white",
+          selected: "black",
+          disabled: "white"
+        }
+      }
+    }),
+    [theme]
+  );
+
+  const itemState: TabItemState = selected
+    ? "selected"
+    : disabled
+    ? "disabled"
+    : "default";
+
+  const foregroundColor = mapColorStates[color].foreground[itemState];
+
+  const selectedStateTransition = useDerivedValue(() =>
+    withSpring(selected ? 1 : 0, IOSpringValues.selection)
+  );
+
+  // Interpolate animation values from `pressed` values
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      selectedStateTransition.value,
+      [0, 1],
+      [
+        mapColorStates[color].background.default,
+        mapColorStates[color].background.selected
+      ]
+    ),
+    borderColor: interpolateColor(
+      selectedStateTransition.value,
+      [0, 1],
+      [
+        mapColorStates[color].border.default,
+        mapColorStates[color].border.selected
+      ]
+    )
+  }));
+
+  const activeIcon = selected ? iconSelected ?? icon : icon;
+
+  const handleOnPress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (onPress) {
+        ReactNativeHapticFeedback.trigger("impactLight");
+        onPress(event);
+      }
+    },
+    [onPress]
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole="tab"
+      accessibilityState={{ checked: !!selected }}
+      testID={testID}
+      onPress={handleOnPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+      disabled={disabled}
+    >
+      <Animated.View
+        style={[
+          styles.container,
+          { columnGap: 4 },
+          !disabled && !reducedMotion && scaleAnimatedStyle,
+          animatedStyle,
+          disabled && { opacity: DISABLED_OPACITY }
+        ]}
       >
-        <Animated.View
-          style={[
-            styles.container,
-            { columnGap: 4 },
-            !disabled && !reducedMotion && scaleAnimatedStyle,
-            animatedStyle,
-            disabled && { opacity: DISABLED_OPACITY }
-          ]}
-        >
-          {activeIcon && (
-            <Icon name={activeIcon} color={foregroundColor} size={16} />
-          )}
-          <IOText size={14} weight="Semibold" color={foregroundColor}>
-            {label}
-          </IOText>
-        </Animated.View>
-      </Pressable>
-    );
-  }
-);
+        {activeIcon && (
+          <Icon name={activeIcon} color={foregroundColor} size={16} />
+        )}
+        <IOText size={14} weight="Semibold" color={foregroundColor}>
+          {label}
+        </IOText>
+      </Animated.View>
+    </Pressable>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {

package/src/components/textInput/TextInputBase.tsx

@@ -55,6 +55,7 @@ type InputTextProps = WithTestID<{
   icon?: IOIcons;
   rightElement?: ReactNode;
   counterLimit?: number;
+  showCounterOnlyWhenLimitReached?: boolean;
   accessibilityAnnounceLimitReached?: string;
   bottomMessage?: string;
   bottomMessageColor?: IOColors;
@@ -123,6 +124,7 @@ type InputTextHelperRow = Pick<
   InputTextProps,
   | "value"
   | "counterLimit"
+  | "showCounterOnlyWhenLimitReached"
   | "bottomMessage"
   | "bottomMessageColor"
   | "inputType"
@@ -132,6 +134,7 @@ type InputTextHelperRow = Pick<
 const HelperRow = ({
   value,
   counterLimit,
+  showCounterOnlyWhenLimitReached,
   bottomMessage,
   bottomMessageColor,
   inputType,
@@ -153,13 +156,17 @@ const HelperRow = ({
   const bottomMessageColorValue =
     bottomMessageColor ?? bottomMessageColorDefault;
 
+  const shouldShowCounter =
+    !!counterLimit &&
+    (!showCounterOnlyWhenLimitReached || valueCount >= counterLimit);
+
   const helperRowStyle: ViewStyle = useMemo(() => {
-    if (counterLimit && bottomMessage) {
+    if (shouldShowCounter && bottomMessage) {
       return {
         justifyContent: "space-between"
       };
     }
-    if (counterLimit) {
+    if (shouldShowCounter) {
       return {
         justifyContent: "flex-end"
       };
@@ -170,7 +177,7 @@ const HelperRow = ({
       };
     }
     return {};
-  }, [counterLimit, bottomMessage]);
+  }, [shouldShowCounter, bottomMessage]);
 
   return (
     <View
@@ -193,7 +200,7 @@ const HelperRow = ({
           {bottomMessage}
         </BodySmall>
       )}
-      {counterLimit && (
+      {shouldShowCounter && (
         <BodySmall
           accessibilityLiveRegion="polite"
           weight="Regular"
@@ -218,6 +225,7 @@ export const TextInputBase = ({
   icon,
   rightElement,
   counterLimit,
+  showCounterOnlyWhenLimitReached,
   accessibilityAnnounceLimitReached,
   bottomMessage,
   bottomMessageColor,
@@ -556,6 +564,7 @@ export const TextInputBase = ({
           bottomMessage={bottomMessage}
           bottomMessageColor={bottomMessageColor}
           counterLimit={counterLimit}
+          showCounterOnlyWhenLimitReached={showCounterOnlyWhenLimitReached}
           inputType={inputType}
           textInputProps={textInputProps}
         />

package/src/components/textInput/TextInputValidation.tsx

@@ -1,6 +1,6 @@
 import {
   ComponentProps,
-  forwardRef,
+  Ref,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -25,6 +25,13 @@ type TextInputValidationProps = Omit<
   ComponentProps<typeof TextInputBase>,
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
+  ref?: Ref<TextInputValidationRefProps>;
+  /**
+   * If true, the character counter will only be displayed/announced when the counter limit is reached.
+   * If false or undefined, the character counter will be displayed/announced whenever the counter is enabled,
+   * including before the user starts typing (for example, `0 / limit`).
+   */
+  showCounterOnlyWhenLimitReached?: boolean;
   /**
    * This function can return either a `boolean` or a `ValidationWithOptions` object.
    * If a `boolean` is returned and the field is not valid, the value of the errorMessage prop will be displayed/announced.
@@ -57,132 +64,125 @@ function isValidationWithOptions(
 
 const feedbackIconSize: IOIconSizeScale = 24;
 
-export const TextInputValidation = forwardRef<
-  TextInputValidationRefProps,
-  TextInputValidationProps
->(
-  (
-    {
-      onValidate,
-      errorMessage,
-      value,
-      bottomMessage,
-      onBlur,
-      onFocus,
-      validationMode = "onBlur",
-      accessibilityErrorLabel,
-      ...props
-    },
-    ref
-  ) => {
-    const theme = useIOTheme();
-    const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
-    const [errMessage, setErrMessage] = useState(errorMessage);
-
-    const getErrorFeedback = useCallback(
-      (isValid: boolean, message: string) => {
-        setIsValid(isValid);
-        setErrMessage(message);
-
-        if (!isValid) {
-          triggerHaptic("notificationError");
-          AccessibilityInfo.announceForAccessibilityWithOptions(
-            accessibilityErrorLabel ?? message,
-            {
-              queue: true
-            }
-          );
-        } else {
-          triggerHaptic("notificationSuccess");
-        }
-      },
-      [accessibilityErrorLabel]
-    );
-
-    const validateInput = useCallback(() => {
-      const validation = onValidate(value);
-
-      if (isValidationWithOptions(validation)) {
-        getErrorFeedback(validation.isValid, validation.errorMessage);
+export const TextInputValidation = ({
+  onValidate,
+  errorMessage,
+  value,
+  bottomMessage,
+  onBlur,
+  onFocus,
+  validationMode = "onBlur",
+  accessibilityErrorLabel,
+  ref,
+  ...props
+}: TextInputValidationProps) => {
+  const theme = useIOTheme();
+  const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+  const [errMessage, setErrMessage] = useState(errorMessage);
+
+  const getErrorFeedback = useCallback(
+    (isValid: boolean, message: string) => {
+      setIsValid(isValid);
+      setErrMessage(message);
+
+      if (!isValid) {
+        triggerHaptic("notificationError");
+        AccessibilityInfo.announceForAccessibilityWithOptions(
+          accessibilityErrorLabel ?? message,
+          {
+            queue: true
+          }
+        );
       } else {
-        getErrorFeedback(validation, errorMessage);
-      }
-    }, [value, errorMessage, onValidate, getErrorFeedback]);
-
-    // Expose the validateInput function to the parent component
-    useImperativeHandle(ref, () => ({
-      validateInput
-    }));
-
-    const onBlurHandler = useCallback(() => {
-      if (validationMode === "onBlur") {
-        validateInput();
+        triggerHaptic("notificationSuccess");
       }
-      onBlur?.();
-    }, [validationMode, validateInput, onBlur]);
+    },
+    [accessibilityErrorLabel]
+  );
 
-    const onFocusHandler = useCallback(() => {
-      setIsValid(undefined);
-      onFocus?.();
-    }, [onFocus]);
+  const validateInput = useCallback(() => {
+    const validation = onValidate(value);
+
+    if (isValidationWithOptions(validation)) {
+      getErrorFeedback(validation.isValid, validation.errorMessage);
+    } else {
+      getErrorFeedback(validation, errorMessage);
+    }
+  }, [value, errorMessage, onValidate, getErrorFeedback]);
+
+  // Expose the validateInput function to the parent component
+  useImperativeHandle(ref, () => ({
+    validateInput
+  }));
+
+  const onBlurHandler = useCallback(() => {
+    if (validationMode === "onBlur") {
+      validateInput();
+    }
+    onBlur?.();
+  }, [validationMode, validateInput, onBlur]);
+
+  const onFocusHandler = useCallback(() => {
+    setIsValid(undefined);
+    onFocus?.();
+  }, [onFocus]);
+
+  const labelError = useMemo(
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
+    [isValid, errMessage, bottomMessage]
+  );
 
-    const labelError = useMemo(
-      () => (isValid === false && errMessage ? errMessage : bottomMessage),
-      [isValid, errMessage, bottomMessage]
-    );
+  const labelErrorColor: IOColors | undefined = useMemo(
+    () => (isValid === false && errMessage ? theme.errorText : undefined),
+    [isValid, errMessage, theme.errorText]
+  );
 
-    const labelErrorColor: IOColors | undefined = useMemo(
-      () => (isValid === false && errMessage ? theme.errorText : undefined),
-      [isValid, errMessage, theme.errorText]
-    );
+  const feedbackIconAttrMap: Record<
+    string,
+    { name: IOIcons; color: IOColors }
+  > = useMemo(
+    () => ({
+      valid: {
+        name: "success",
+        color: theme.successIcon
+      },
+      notValid: {
+        name: "errorFilled",
+        color: theme.errorIcon
+      }
+    }),
+    [theme]
+  );
 
-    const feedbackIconAttrMap: Record<
-      string,
-      { name: IOIcons; color: IOColors }
-    > = useMemo(
-      () => ({
-        valid: {
-          name: "success",
-          color: theme.successIcon
-        },
-        notValid: {
-          name: "errorFilled",
-          color: theme.errorIcon
-        }
-      }),
-      [theme]
+  const feedbackIcon = useMemo(() => {
+    const validationStatus = isValid ? "valid" : "notValid";
+
+    return isValid !== undefined ? (
+      <Animated.View
+        entering={enterTransitionInputIcon}
+        exiting={exitTransitionInputIcon}
+      >
+        <Icon
+          name={feedbackIconAttrMap[validationStatus].name}
+          color={feedbackIconAttrMap[validationStatus].color}
+          size={feedbackIconSize}
+        />
+      </Animated.View>
+    ) : (
+      <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
     );
+  }, [feedbackIconAttrMap, isValid]);
 
-    const feedbackIcon = useMemo(() => {
-      const validationStatus = isValid ? "valid" : "notValid";
-
-      return isValid !== undefined ? (
-        <Animated.View
-          entering={enterTransitionInputIcon}
-          exiting={exitTransitionInputIcon}
-        >
-          <Icon
-            name={feedbackIconAttrMap[validationStatus].name}
-            color={feedbackIconAttrMap[validationStatus].color}
-            size={feedbackIconSize}
-          />
-        </Animated.View>
-      ) : (
-        <View style={{ width: feedbackIconSize, height: feedbackIconSize }} />
-      );
-    }, [feedbackIconAttrMap, isValid]);
-
-    return (
-      <TextInputBase
-        {...props}
-        value={value}
-        status={isValid === false ? "error" : undefined}
-        bottomMessage={labelError}
-        bottomMessageColor={labelErrorColor}
-        rightElement={feedbackIcon}
-        onBlur={onBlurHandler}
-        onFocus={onFocusHandler}
-      />
-    );
-  }
-);
+  return (
+    <TextInputBase
+      {...props}
+      value={value}
+      status={isValid === false ? "error" : undefined}
+      bottomMessage={labelError}
+      bottomMessageColor={labelErrorColor}
+      rightElement={feedbackIcon}
+      onBlur={onBlurHandler}
+      onFocus={onFocusHandler}
+    />
+  );
+};