@pagopa/io-app-design-system 1.43.0 → 1.45.0

package/src/components/stack/Stack.tsx

@@ -2,23 +2,28 @@ import React, { ReactNode } from "react";
 import { View, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 
+type AllowedStyleProps = Pick<
+  ViewStyle,
+  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap"
+>;
+
 type Stack = {
   space?: IOSpacer;
   children: ReactNode;
-  alignItems?: ViewStyle["alignItems"];
+  style?: AllowedStyleProps;
 };
 
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
-export const HStack = ({ space, children, alignItems }: Stack) => (
+export const HStack = ({ space, children, style }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "row",
       columnGap: space,
-      alignItems
+      ...style
     }}
   >
     {children}
@@ -30,13 +35,13 @@ Vertical Stack component
 @param {IOSpacer} space
  */
 
-export const VStack = ({ space, children, alignItems }: Stack) => (
+export const VStack = ({ space, children, style }: Stack) => (
   <View
     style={{
       display: "flex",
       flexDirection: "column",
       rowGap: space,
-      alignItems
+      ...style
     }}
   >
     {children}

package/src/components/textInput/TextInputBase.tsx

@@ -40,6 +40,7 @@ type InputTextProps = WithTestID<{
   value: string;
   onChangeText: (value: string) => void;
   accessibilityLabel?: string;
+  accessibilityHint?: string;
   textInputProps?: RNTextInputProps;
   inputType?: InputType;
   status?: InputStatus;
@@ -197,6 +198,7 @@ export const TextInputBase = ({
   value = "",
   onChangeText,
   accessibilityLabel,
+  accessibilityHint,
   textInputProps,
   inputType = "default",
   status,
@@ -355,7 +357,6 @@ export const TextInputBase = ({
         ]}
         accessible={false}
         accessibilityRole={"none"}
-        accessibilityElementsHidden
         importantForAccessibility="no"
       >
         {/* Fake border managed with Animated.View to avoid
@@ -393,6 +394,7 @@ export const TextInputBase = ({
           disableFullscreenUI={true}
           accessibilityState={{ disabled }}
           accessibilityLabel={accessibilityLabel ?? placeholder}
+          accessibilityHint={accessibilityHint}
           selectionColor={IOColors[theme["interactiveElem-default"]]} // Caret on iOS
           cursorColor={IOColors[theme["interactiveElem-default"]]} // Caret Android
           maxLength={counterLimit}

package/src/components/textInput/TextInputValidation.tsx

@@ -11,14 +11,28 @@ import { triggerHaptic } from "../../functions";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { TextInputBase } from "./TextInputBase";
 
+export type ValidationWithOptions = { isValid: boolean; errorMessage: string };
+
 type TextInputValidationProps = Omit<
   React.ComponentProps<typeof TextInputBase>,
   "rightElement" | "status" | "bottomMessageColor" | "isPassword"
 > & {
-  onValidate: (value: string) => 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. 
+   * If a `ValidationWithOptions` object is returned and the field is not valid, the value displayed/announced will be the one contained within this object.
+   */
+  onValidate: (value: string) => boolean | ValidationWithOptions;
+  /**
+   * In case of a dynamic `errorMessage`, use the `onValidate` function with a `ValidationWithOptions` object as the return value to ensure that screen readers announce the correct value.
+   */
   errorMessage: string;
 };
 
+function isValidationWithOptions(validation: boolean | ValidationWithOptions): validation is ValidationWithOptions {
+  return typeof validation === 'object' && 'isValid' in validation && 'errorMessage' in validation;
+}
+
 const feedbackIconSize: IOIconSizeScale = 24;
 
 export const TextInputValidation = ({
@@ -31,20 +45,32 @@ export const TextInputValidation = ({
   ...props
 }: TextInputValidationProps) => {
   const [isValid, setIsValid] = useState<boolean | undefined>(undefined);
+  const [errMessage, setErrMessage] = useState(errorMessage);
 
-  const onBlurHandler = useCallback(() => {
-    const validation = onValidate(value);
-    setIsValid(validation);
-    if (!validation) {
+  const getErrorFeedback = useCallback((isValid: boolean, message: string) => {
+    setIsValid(isValid);
+    setErrMessage(message);
+
+    if (!isValid) {
       triggerHaptic("notificationError");
-      AccessibilityInfo.announceForAccessibilityWithOptions(errorMessage, {
+      AccessibilityInfo.announceForAccessibilityWithOptions(message, {
         queue: true
       });
     } else {
       triggerHaptic("notificationSuccess");
     }
+  }, []);
+
+  const onBlurHandler = useCallback(() => {
+    const validation = onValidate(value);
+
+    if (isValidationWithOptions(validation)) {
+      getErrorFeedback(validation.isValid, validation.errorMessage);
+    } else {
+      getErrorFeedback(validation, errorMessage);
+    }
     onBlur?.();
-  }, [onValidate, value, onBlur, errorMessage]);
+  }, [value, errorMessage, onBlur, onValidate, getErrorFeedback]);
 
   const onFocusHandler = useCallback(() => {
     setIsValid(undefined);
@@ -52,13 +78,13 @@ export const TextInputValidation = ({
   }, [onFocus]);
 
   const labelError = useMemo(
-    () => (isValid === false && errorMessage ? errorMessage : bottomMessage),
-    [isValid, errorMessage, bottomMessage]
+    () => (isValid === false && errMessage ? errMessage : bottomMessage),
+    [isValid, errMessage, bottomMessage]
   );
 
   const labelErrorColor: IOColors | undefined = useMemo(
-    () => (isValid === false && errorMessage ? "error-600" : undefined),
-    [isValid, errorMessage]
+    () => (isValid === false && errMessage ? "error-600" : undefined),
+    [isValid, errMessage]
   );
 
   const feedbackIconAttrMap: Record<

package/src/components/toast/ToastProvider.tsx

@@ -12,6 +12,7 @@ import Animated, {
   SlideInUp,
   SlideOutUp
 } from "react-native-reanimated";
+import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { Dismissable } from "../layout/Dismissable";
 import { ToastNotification } from "./ToastNotification";
@@ -49,9 +50,9 @@ const ToastNotificationStackItem = ({
   ...toast
 }: ToastNotificationStackItemProps) => (
   <Animated.View
-    entering={SlideInUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    exiting={SlideOutUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    layout={SequencedTransition.duration(300)}
+    entering={SlideInUp.springify().damping(16).mass(0.9).stiffness(90)}
+    exiting={SlideOutUp.duration(700).easing(Easing.inOut(Easing.exp))}
+    layout={SequencedTransition.duration(500).delay(50)}
     style={{ paddingBottom: 8 }}
   >
     <Dismissable onDismiss={onDismiss}>
@@ -119,7 +120,10 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
     <ToastContext.Provider value={contextValue as ToastContext}>
       <InitializeToastRef />
       <SafeAreaView style={styles.container} pointerEvents="box-none">
-        <View style={styles.list} pointerEvents="box-none">
+        <View
+          style={{ padding: IOVisualCostants.appMarginDefault }}
+          pointerEvents="box-none"
+        >
           {toasts.map(toast => (
             <ToastNotificationStackItem
               key={toast.id}
@@ -150,8 +154,5 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
     overflow: "visible"
-  },
-  list: {
-    padding: 24
   }
 });

package/src/core/IOAnimations.ts

@@ -19,6 +19,11 @@ export const IOSpringValues = {
     damping: 10,
     mass: 0.5,
     stiffness: 200
+  },
+  header: {
+    damping: 10,
+    mass: 0.5,
+    stiffness: 200
   }
 };