@pagopa/io-app-design-system 5.0.6 → 5.1.0

package/src/components/layout/ForceScrollDownView.tsx

@@ -1,4 +1,6 @@
 import React, {
+  ComponentProps,
+  ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -13,29 +15,51 @@ import {
   ScrollViewProps,
   StyleSheet
 } from "react-native";
-import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
 import { IOSpringValues, IOVisualCostants } from "../../core";
 import { IconButtonSolid } from "../buttons";
+import { ScaleInOutAnimation } from "../common/ScaleInOutAnimation";
+import { FooterActions } from "./FooterActions";
+import { useFooterActionsInlineMeasurements } from "./hooks";
 
-type ForceScrollDownViewProps = {
+type ForceScrollDownViewActions = {
   /**
-   * The content to display inside the scroll view.
+   * The distance from the bottom is computed automatically based on the actions.
    */
-  children: React.ReactNode;
+  threshold?: never;
+  footerActions: Omit<
+    ComponentProps<typeof FooterActions>,
+    "fixed" | "onMeasure"
+  >;
+};
+
+type ForceScrollDownViewCustomSlot = {
   /**
    * The distance from the bottom of the scrollable content at which the "scroll to bottom" button
-   * should become hidden. Defaults to 100.
+   * should become hidden.
    */
-  threshold?: number;
+  threshold: number;
+  footerActions?: never;
+};
+
+type ForceScrollDownViewSlot =
+  | ForceScrollDownViewActions
+  | ForceScrollDownViewCustomSlot;
+
+export type ForceScrollDownView = {
+  /**
+   * The content to display inside the scroll view.
+   */
+  children: ReactNode;
   /**
    * A callback that will be called whenever the scroll view crosses the threshold. The callback
    * is passed a boolean indicating whether the threshold has been crossed (`true`) or not (`false`).
    */
   onThresholdCrossed?: (crossed: boolean) => void;
-} & Pick<
-  ScrollViewProps,
-  "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
->;
+} & ForceScrollDownViewSlot &
+  Pick<
+    ScrollViewProps,
+    "style" | "contentContainerStyle" | "scrollEnabled" | "testID"
+  >;
 
 /**
  * A React Native component that displays a scroll view with a button that scrolls to the bottom of the content
@@ -44,26 +68,36 @@ type ForceScrollDownViewProps = {
  * `scrollEnabled` prop to `false`.
  */
 const ForceScrollDownView = ({
+  footerActions,
   children,
-  threshold = 100,
+  threshold: customThreshold,
   style,
   contentContainerStyle,
   scrollEnabled = true,
   onThresholdCrossed
-}: ForceScrollDownViewProps) => {
+}: ForceScrollDownView) => {
   const scrollViewRef = useRef<ScrollView>(null);
 
+  const {
+    footerActionsInlineMeasurements,
+    handleFooterActionsInlineMeasurements
+  } = useFooterActionsInlineMeasurements();
+
+  const threshold = footerActions
+    ? footerActionsInlineMeasurements.safeBottomAreaHeight
+    : customThreshold;
+
   /**
    * The height of the scroll view, used to determine whether or not the scrollable content fits inside
    * the scroll view and whether the "scroll to bottom" button should be displayed.
    */
-  const [scrollViewHeight, setScrollViewHeight] = useState<number>();
+  const [scrollViewHeight, setScrollViewHeight] = useState<number>(0);
 
   /**
    * The height of the scrollable content, used to determine whether or not the "scroll to bottom" button
    * should be displayed.
    */
-  const [contentHeight, setContentHeight] = useState<number>();
+  const [contentHeight, setContentHeight] = useState<number>(0);
 
   /**
    * Whether or not the scroll view has crossed the threshold from the bottom.
@@ -79,7 +113,7 @@ const ForceScrollDownView = ({
   /**
    * A callback that is called whenever the scroll view is scrolled. It checks whether or not the
    * scroll view has crossed the threshold from the bottom and updates the state accordingly.
-   * The callback is designed to updatr button visibility only when crossing the threshold.
+   * The callback is designed to update button visibility only when crossing the threshold.
    */
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -88,19 +122,14 @@ const ForceScrollDownView = ({
 
       const thresholdCrossed =
         layoutMeasurement.height + contentOffset.y >=
-        contentSize.height - threshold;
-
-      setThresholdCrossed(previousState => {
-        if (!previousState && thresholdCrossed) {
-          setButtonVisible(false);
-        }
-        if (previousState && !thresholdCrossed) {
-          setButtonVisible(true);
-        }
-        return thresholdCrossed;
-      });
+        contentSize.height - (threshold ?? 0);
+
+      if (isThresholdCrossed !== thresholdCrossed) {
+        setThresholdCrossed(thresholdCrossed);
+        setButtonVisible(!thresholdCrossed);
+      }
     },
-    [threshold]
+    [threshold, isThresholdCrossed]
   );
 
   /**
@@ -145,8 +174,8 @@ const ForceScrollDownView = ({
    */
   const needsScroll = useMemo(
     () =>
-      scrollViewHeight != null &&
-      contentHeight != null &&
+      scrollViewHeight > 0 &&
+      contentHeight > 0 &&
       scrollViewHeight < contentHeight,
     [scrollViewHeight, contentHeight]
   );
@@ -182,16 +211,22 @@ const ForceScrollDownView = ({
       <ScrollView
         testID={"ScrollView"}
         ref={scrollViewRef}
-        scrollIndicatorInsets={{ right: 1 }}
         scrollEnabled={scrollEnabled}
-        onScroll={handleScroll}
-        scrollEventThrottle={400}
         style={style}
+        onScroll={handleScroll}
+        scrollEventThrottle={8}
         onLayout={handleLayout}
         onContentSizeChange={handleContentSizeChange}
         contentContainerStyle={contentContainerStyle}
       >
         {children}
+        {footerActions && (
+          <FooterActions
+            {...footerActions}
+            onMeasure={handleFooterActionsInlineMeasurements}
+            fixed={false}
+          />
+        )}
       </ScrollView>
       {scrollDownButton}
     </>

package/src/components/layout/__test__/ForceScrollDownView.test.tsx

@@ -13,7 +13,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const component = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(component).toMatchSnapshot();
@@ -23,7 +23,7 @@ describe("ForceScrollDownView", () => {
     const tChildren = <Text>{tContent}</Text>;
 
     const { getByText } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     expect(getByText(tContent)).toBeDefined();
@@ -35,7 +35,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");
@@ -72,7 +72,7 @@ describe("ForceScrollDownView", () => {
     const tScreenHeight = 1000;
 
     const { getByTestId, queryByTestId } = render(
-      <ForceScrollDownView>{tChildren}</ForceScrollDownView>
+      <ForceScrollDownView threshold={100}>{tChildren}</ForceScrollDownView>
     );
 
     const scrollView = getByTestId("ScrollView");

package/src/components/layout/__test__/__snapshots__/ForceScrollDownView.test.tsx.snap

@@ -6,12 +6,7 @@ exports[`ForceScrollDownView should match snapshot 1`] = `
   onLayout={[Function]}
   onScroll={[Function]}
   scrollEnabled={true}
-  scrollEventThrottle={400}
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
+  scrollEventThrottle={8}
   testID="ScrollView"
 >
   <View>

package/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
 
 type UseFooterActionsInlineMeasurementsProps = {
@@ -25,11 +25,12 @@ export const useFooterActionsInlineMeasurements =
       safeBottomAreaHeight: 0
     });
 
-    const handleFooterActionsInlineMeasurements = (
-      values: FooterActionsInlineMeasurements
-    ) => {
-      setFooterActionsInlineMeasurements(values);
-    };
+    const handleFooterActionsInlineMeasurements = useCallback(
+      (values: FooterActionsInlineMeasurements) => {
+        setFooterActionsInlineMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsInlineMeasurements,

package/src/components/layout/hooks/useFooterActionsMeasurements.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { FooterActionsMeasurements } from "../FooterActions";
 
 type UseFooterActionsMeasurementsProps = {
@@ -22,11 +22,12 @@ export const useFooterActionsMeasurements =
         safeBottomAreaHeight: 0
       });
 
-    const handleFooterActionsMeasurements = (
-      values: FooterActionsMeasurements
-    ) => {
-      setFooterActionsMeasurements(values);
-    };
+    const handleFooterActionsMeasurements = useCallback(
+      (values: FooterActionsMeasurements) => {
+        setFooterActionsMeasurements(values);
+      },
+      []
+    );
 
     return {
       footerActionsMeasurements,

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -48,11 +48,15 @@ export const ListItemRadioWithAmount = ({
 
   const suggestColor: IOColors = "hanPurple-500";
 
+  const defaultAccessibilityLabel = `${label} ${formattedAmountString} ${
+    suggestReason ?? ""
+  }`;
+
   return (
     <PressableListItemBase
       onPress={pressHandler}
       accessibilityRole="radio"
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={accessibilityLabel ?? defaultAccessibilityLabel}
       accessibilityState={{
         checked: selected ?? toggleValue
       }}

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -767,6 +767,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 1`] = `
 <View
+  accessibilityLabel="label € 1.000,00 suggestReason"
   accessibilityRole="radio"
   accessibilityState={
     {
@@ -1140,6 +1141,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
 
 exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmount Snapshot 2`] = `
 <View
+  accessibilityLabel="label € 1.000,00 "
   accessibilityRole="radio"
   accessibilityState={
     {
@@ -2343,6 +2345,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 <View
+  accessibilityLabel="label € 1.000,00 suggestReason"
   accessibilityRole="radio"
   accessibilityState={
     {
@@ -2716,6 +2719,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
 
 exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
 <View
+  accessibilityLabel="label € 1.000,00 "
   accessibilityRole="radio"
   accessibilityState={
     {

package/src/components/numberpad/NumberButton.tsx

@@ -1,23 +1,26 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
 import {
+  hexToRgba,
   IOColors,
   IONumberPadButtonStyles,
-  useIONewTypeface
+  useIONewTypeface,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
 
-type NumberButtonVariantType = "light" | "dark";
+type NumberButtonVariantType = "neutral" | "primary";
 
 type NumberButtonProps = {
   /**
-   * Used to choose the component color variant between `dark` and `light`.
+   * Used to choose the component color variant between `neutral` and `primary`.
    */
   variant: NumberButtonVariantType;
   /**
@@ -38,19 +41,6 @@ type ColorMapVariant = {
   foreground: IOColors;
 };
 
-const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: IOColors["grey-50"],
-    pressed: IOColors["grey-200"],
-    foreground: "blueIO-500"
-  },
-  dark: {
-    background: IOColors["blueIO-400"],
-    pressed: IOColors["blueIO-200"],
-    foreground: "white"
-  }
-};
-
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
@@ -58,11 +48,32 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
  */
 export const NumberButton = memo(
   ({ number, variant, onPress }: NumberButtonProps) => {
+    const theme = useIOTheme();
+
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("slight");
+      useScaleAnimation("medium");
     const reducedMotion = useReducedMotion();
     const { newTypefaceEnabled } = useIONewTypeface();
 
+    const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = useMemo(
+      () => ({
+        neutral: {
+          background: hexToRgba(
+            IOColors[theme["interactiveElem-default"]],
+            0.1
+          ),
+          pressed: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.35),
+          foreground: theme["interactiveElem-default"]
+        },
+        primary: {
+          background: hexToRgba(IOColors.white, 0.15),
+          pressed: hexToRgba(IOColors.white, 0.5),
+          foreground: "white"
+        }
+      }),
+      [theme]
+    );
+
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
       backgroundColor: interpolateColor(
@@ -73,6 +84,7 @@ export const NumberButton = memo(
     }));
 
     const handleOnPress = useCallback(() => {
+      ReactNativeHapticFeedback.trigger("impactLight");
       onPress(number);
     }, [number, onPress]);
 

package/src/components/numberpad/NumberPad.tsx

@@ -70,7 +70,7 @@ const mapIconSpecByBiometric: Record<
  * @returns {JSX.Element} The rendered numeric keyboard component.
  */
 export const NumberPad = ({
-  variant = "dark",
+  variant = "primary",
   biometricType,
   biometricAccessibilityLabel,
   deleteAccessibilityLabel,
@@ -101,7 +101,7 @@ export const NumberPad = ({
             <ButtonWrapper key={item}>
               <IconButton
                 icon="cancel"
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onDeletePress}
                 accessibilityLabel={deleteAccessibilityLabel}
               />
@@ -114,7 +114,7 @@ export const NumberPad = ({
               <IconButton
                 icon={mapIconSpecByBiometric[biometricType].icon}
                 iconSize={mapIconSpecByBiometric[biometricType].size}
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onBiometricPress}
                 accessibilityLabel={biometricAccessibilityLabel}
               />

package/src/components/tabs/TabItem.tsx

@@ -33,7 +33,6 @@ export type TabItem = WithTestID<{
   label: string;
   color?: ColorMode;
   selected?: boolean;
-  fullWidth?: boolean;
   // Icons
   icon?: IOIcons;
   iconSelected?: IOIcons;
@@ -69,7 +68,6 @@ const TabItem = forwardRef(
       label,
       color = "light",
       selected = false,
-      fullWidth = false,
       accessibilityLabel,
       accessibilityHint,
       testID,
@@ -149,27 +147,24 @@ const TabItem = forwardRef(
     );
 
     // 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
-          ]
-        )
-      }),
-      [selectedStateTransition]
-    );
+    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;
 
@@ -203,7 +198,6 @@ const TabItem = forwardRef(
             { columnGap: 4 },
             !disabled && !reducedMotion && scaleAnimatedStyle,
             animatedStyle,
-            fullWidth && styles.fullWidth,
             disabled && { opacity: DISABLED_OPACITY }
           ]}
         >
@@ -235,9 +229,6 @@ const styles = StyleSheet.create({
     borderCurve: "continuous",
     justifyContent: "center",
     alignSelf: "flex-start"
-  },
-  fullWidth: {
-    alignSelf: "auto"
   }
 });
 

package/src/components/tabs/TabNavigation.tsx

@@ -56,9 +56,6 @@ const TabNavigation = ({
       key={index}
       style={[
         styles.item,
-        {
-          marginEnd: index === React.Children.count(children) - 1 ? 0 : 8
-        },
         stretchItems && {
           minWidth: itemMinWidth
         }
@@ -87,7 +84,8 @@ const TabNavigation = ({
           : {},
         {
           flexGrow: 1,
-          justifyContent: itemsJustify[tabAlignment]
+          justifyContent: itemsJustify[tabAlignment],
+          gap: 8
         }
       ]}
     >