@pagopa/io-app-design-system 5.2.5 → 5.3.0

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { View, Animated, Easing } from "react-native";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
-import { IOColors } from "../../core";
+import { IOColors, useIOTheme } from "../../core";
 
 export type LoadingSpinner = WithTestID<{
   color?: IOColors;
@@ -24,34 +24,34 @@ const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
   76: 7
 };
 
-const startRotationAnimation = (
-  durationMs: number,
-  rotationDegree: Animated.Value
-): void => {
-  Animated.loop(
-    Animated.timing(rotationDegree, {
-      toValue: 360,
-      duration: durationMs,
-      easing: Easing.linear,
-      useNativeDriver: true
-    })
-  ).start();
-};
-
 export const LoadingSpinner = ({
-  color = "blueIO-500",
+  color: customColor,
   size = 24,
   durationMs = 850,
   accessibilityHint,
   accessibilityLabel,
   testID = "LoadingSpinnerTestID"
 }: LoadingSpinner): React.ReactElement => {
+  const theme = useIOTheme();
   const rotationDegree = useRef(new Animated.Value(0)).current;
   const stroke: number = strokeMap[size];
 
+  const color = customColor ?? theme["interactiveElem-default"];
+
   useEffect(() => {
-    startRotationAnimation(durationMs, rotationDegree);
-  }, [durationMs, rotationDegree]);
+    const animation = Animated.loop(
+      Animated.timing(rotationDegree, {
+        toValue: 360,
+        duration: durationMs,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [durationMs, rotationDegree, theme]);
 
   return (
     <View
@@ -60,7 +60,6 @@ export const LoadingSpinner = ({
       accessibilityRole="progressbar"
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
-      importantForAccessibility={"no-hide-descendants"}
       testID={testID}
     >
       <Animated.View

package/src/components/modules/ModuleAttachment.tsx

@@ -44,12 +44,7 @@ const ModuleAttachmentContent = ({
         ? `${testID}_activityIndicator`
         : undefined;
 
-      return (
-        <LoadingSpinner
-          testID={activityIndicatorTestId}
-          color={theme["interactiveElem-default"]}
-        />
-      );
+      return <LoadingSpinner testID={activityIndicatorTestId} />;
     }
 
     return (

package/src/components/modules/ModuleCredential.tsx

@@ -91,7 +91,6 @@ const ModuleCredentialContent = ({
       return (
         <LoadingSpinner
           testID={testID ? `${testID}_activityIndicator` : undefined}
-          color={theme["interactiveElem-default"]}
         />
       );
     }

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -905,11 +905,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
               accessibilityLabel=""
               accessible={false}
               align="xMidYMid"
-              animatedProps={
-                {
-                  "color": undefined,
-                }
-              }
               bbHeight={24}
               bbWidth={24}
               focusable={false}
@@ -934,12 +929,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   },
                 ]
               }
-              tintColor="#FFFFFF"
               vbHeight={24}
               vbWidth={24}
               width={24}
             >
               <RNSVGGroup
+                color="#FFFFFF"
                 fill={
                   {
                     "payload": 4278190080,
@@ -1129,11 +1124,6 @@ exports[`NumberPad Should match the snapshot 1`] = `
               accessibilityLabel=""
               accessible={false}
               align="xMidYMid"
-              animatedProps={
-                {
-                  "color": undefined,
-                }
-              }
               bbHeight={24}
               bbWidth={24}
               focusable={false}
@@ -1158,12 +1148,12 @@ exports[`NumberPad Should match the snapshot 1`] = `
                   },
                 ]
               }
-              tintColor="#FFFFFF"
               vbHeight={24}
               vbWidth={24}
               width={24}
             >
               <RNSVGGroup
+                color="#FFFFFF"
                 fill={
                   {
                     "payload": 4278190080,

package/src/components/otpInput/OTPInput.tsx

@@ -96,7 +96,14 @@ export const OTPInput = forwardRef<View, Props>(
       }
     };
 
-    useEffect(() => () => clearTimeout(timerRef.current), []);
+    useEffect(
+      () => () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      },
+      []
+    );
 
     const handleChange = (value: string) => {
       if (value.length > length) {

package/src/components/progressLoader/ProgressLoader.tsx

@@ -1,19 +1,12 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOColors, IOSpringValues } from "../../core";
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    height: 4,
-    backgroundColor: IOColors.white
-  }
-});
+import { IOColors, IOSpringValues, useIOTheme } from "../../core";
 
 export type ProgressLoader = {
   progress: number;
@@ -29,12 +22,16 @@ export type ProgressLoader = {
 export const ProgressLoader = ({
   progress,
   accessibilityLabel,
-  color = "blueIO-500"
+  color: customColor
 }: ProgressLoader) => {
-  const [width, setWidth] = React.useState(0);
+  const theme = useIOTheme();
+  const [width, setWidth] = useState(0);
   const progressWidth = useSharedValue(0);
 
-  React.useEffect(() => {
+  const backgroundColor = IOColors[theme["appBackground-primary"]];
+  const foregroundColor = customColor ?? theme["interactiveElem-default"];
+
+  useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     progressWidth.value = withSpring(
       (progress / 100) * width,
@@ -48,14 +45,29 @@ export const ProgressLoader = ({
 
   return (
     <View
-      style={styles.container}
+      focusable
+      /* We set a fixed height to make the component focusable on Android */
+      style={{
+        width: "100%",
+        height: 16,
+        justifyContent: "center",
+        backgroundColor
+      }}
       onLayout={e => setWidth(e.nativeEvent.layout.width)}
+      importantForAccessibility="yes"
       accessibilityLabel={accessibilityLabel}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityValue={{
+        min: 0,
+        max: 100,
+        now: progress
+      }}
     >
       <Animated.View
         style={[
           animatedStyle,
-          { height: "100%", backgroundColor: IOColors[color] }
+          { height: 4, backgroundColor: IOColors[foregroundColor] }
         ]}
       />
     </View>

package/src/components/toast/ToastNotification.tsx

@@ -1,6 +1,11 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { IOAlertRadius, IOColors } from "../../core";
+import React, { useMemo } from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
+import {
+  hexToRgba,
+  IOAlertRadius,
+  IOColors,
+  useIOThemeContext
+} from "../../core";
 import { Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { ButtonText } from "../typography";
@@ -38,16 +43,27 @@ type Props = Pick<Toast, "message" | "variant" | "icon">;
 
 const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
   const colors = toastColorVariants[variant];
+  const { themeType } = useIOThemeContext();
+
+  const dynamicStyle: ViewStyle = useMemo(() => {
+    const borderColor =
+      themeType === "dark"
+        ? hexToRgba(IOColors[colors.stroke], 0.25)
+        : hexToRgba(IOColors[colors.stroke], 0.5);
+
+    /* Remove border entirely when dark mode is enabled */
+    const borderWidth = themeType === "dark" ? 0 : 1;
+
+    return {
+      backgroundColor: IOColors[colors.background],
+      borderColor,
+      borderWidth
+    };
+  }, [colors, themeType]);
 
   return (
     <View
-      style={[
-        styles.toast,
-        {
-          backgroundColor: IOColors[colors.background],
-          borderColor: IOColors[colors.stroke]
-        }
-      ]}
+      style={[styles.toast, dynamicStyle]}
       accessible={true}
       accessibilityRole={"alert"}
       accessibilityLabel={message}
@@ -68,7 +84,6 @@ const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
 const styles = StyleSheet.create({
   toast: {
     borderRadius: IOAlertRadius,
-    borderWidth: 1,
     borderCurve: "continuous",
     padding: 16,
     flexDirection: "row",

package/src/components/tooltip/Arrows.tsx

@@ -1,9 +1,9 @@
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { IOColors } from '../../core';
+import Svg, { Path } from "react-native-svg";
+import React from "react";
+import { IOColors } from "../../core";
 
 export const LeftArrow = ({ color = IOColors.white }: { color?: string }) => (
-  <Svg fill="none" >
+  <Svg fill="none">
     <Path
       d="M12.6955 15.2C14.8289 13.6 14.8289 10.4 12.6955 8.8L0.962204 0V24L12.6955 15.2Z"
       fill={color}
@@ -33,4 +33,4 @@ export const TopArrow = ({ color = IOColors.white }: { color?: string }) => (
       fill={color}
     />
   </Svg>
-);
+);

package/src/components/tooltip/Tooltip.tsx

@@ -108,7 +108,8 @@ type CloseWithTapOnBackground = {
 type CloseWithBackgroundTapDisabled = {
   allowCloseOnBackgroundTap?: false;
 };
-type Props = CommonProps & (CloseWithTapOnBackground | CloseWithBackgroundTapDisabled);
+type Props = CommonProps &
+  (CloseWithTapOnBackground | CloseWithBackgroundTapDisabled);
 
 /**
  * Tooltip component that displays a contextual tooltip around its children.
@@ -133,7 +134,8 @@ export const Tooltip = ({
   const insets = useSafeAreaInsets();
   const [currentPlacement, setCurrentPlacement] =
     useState<Placement>(initialPlacement);
-  const [childrenCoords, setChildrenCoords] = useState<ChildrenCoords>(INITIAL_COORDS);
+  const [childrenCoords, setChildrenCoords] =
+    useState<ChildrenCoords>(INITIAL_COORDS);
   const [tooltipLayout, setTooltipLayout] = useState<TooltipLayout>();
   const childRef = useRef<View>(null);
   const titleRef = useRef<View>(null);
@@ -144,8 +146,7 @@ export const Tooltip = ({
     [currentPlacement]
   );
   const isChildrenMeasurementFinished =
-    every(childrenCoords, isDefined)
-    && some(childrenCoords, isNotZero);
+    every(childrenCoords, isDefined) && some(childrenCoords, isNotZero);
   const isTooltipMeasurementCompleted = isDefined(tooltipLayout);
   const tooltipVisibility = { opacity: isTooltipMeasurementCompleted ? 1 : 0 };
 
@@ -240,7 +241,9 @@ export const Tooltip = ({
       <Modal transparent visible={isVisible && isChildrenMeasurementFinished}>
         <View
           accessibilityElementsHidden={!childrenInteractionsEnabled}
-          importantForAccessibility={childrenInteractionsEnabled ? 'auto' : 'no-hide-descendants'}
+          importantForAccessibility={
+            childrenInteractionsEnabled ? "auto" : "no-hide-descendants"
+          }
           pointerEvents={childrenInteractionsEnabled ? "auto" : "box-only"}
           style={[
             tooltipStyles.childrenContainer,
@@ -252,15 +255,12 @@ export const Tooltip = ({
         <TouchableWithoutFeedback
           accessible={allowCloseOnBackgroundTap}
           accessibilityRole={allowCloseOnBackgroundTap ? "button" : "none"}
-          importantForAccessibility={allowCloseOnBackgroundTap ? 'yes' : 'no'}
+          importantForAccessibility={allowCloseOnBackgroundTap ? "yes" : "no"}
           accessibilityElementsHidden={!allowCloseOnBackgroundTap}
           onPress={handleTapOnBackground}
         >
           <View
-            style={[
-              tooltipStyles.overlay,
-              { height: screenDimensions.height }
-            ]}
+            style={[tooltipStyles.overlay, { height: screenDimensions.height }]}
           />
         </TouchableWithoutFeedback>
         <View
@@ -296,11 +296,7 @@ export const Tooltip = ({
           style={[
             tooltipStyles.arrowContainer,
             getArrowBoxByPlacement(currentPlacement),
-            getArrowCoords(
-              currentPlacement,
-              childrenCoords,
-              screenDimensions
-            ),
+            getArrowCoords(currentPlacement, childrenCoords, screenDimensions),
             getArrowVerticalAlignment(currentPlacement, childrenCoords.height),
             tooltipVisibility
           ]}

package/src/components/tooltip/index.ts

@@ -1 +1 @@
-export * from "./Tooltip";
+export * from "./Tooltip";

package/src/components/tooltip/styles.ts

@@ -1,6 +1,6 @@
-import { StyleSheet } from 'react-native';
-import { IOColors } from '../../core';
-import { ChildrenCoords } from './utils/types';
+import { StyleSheet } from "react-native";
+import { IOColors } from "../../core";
+import { ChildrenCoords } from "./utils/types";
 
 export const tooltipStyles = StyleSheet.create({
   overlay: {
@@ -26,11 +26,11 @@ export const tooltipStyles = StyleSheet.create({
   },
   arrowContainer: {
     position: "absolute",
-    display: 'flex',
+    display: "flex",
     zIndex: 3000
   },
   closeIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 8,
     top: 9 // It's been used `9` instead of `8` to fix accessibility focus order. In this way title is read before close icon.
   }
@@ -41,4 +41,4 @@ export const getChildrenPosition = (childrenCoords: ChildrenCoords) => ({
   left: childrenCoords.x,
   width: childrenCoords.width,
   height: childrenCoords.height
-});
+});

package/src/components/tooltip/utils/index.ts

@@ -1,6 +1,6 @@
-import { ScaledSize } from 'react-native';
-import { IOVisualCostants } from '../../../core';
-import { ChildrenCoords, DisplayInsets, Placement } from './types';
+import { ScaledSize } from "react-native";
+import { IOVisualCostants } from "../../../core";
+import { ChildrenCoords, DisplayInsets, Placement } from "./types";
 
 export const ARROW_WIDTH = 24;
 export const ARROW_HEIGHT = 14;
@@ -9,7 +9,7 @@ const DEFAULT_INSETS: DisplayInsets = {
   top: 0,
   bottom: 0,
   left: IOVisualCostants.appMarginDefault,
-  right: IOVisualCostants.appMarginDefault,
+  right: IOVisualCostants.appMarginDefault
 };
 
 /**
@@ -21,22 +21,22 @@ export const getDisplayInsets = (
 ): DisplayInsets => ({ ...DEFAULT_INSETS, ...displayInsets });
 
 /**
- * 
+ *
  * @param placement The `Tooltip` placement
  * @returns The `Arrow` box `width` and `height` based on `placement` value
  */
 export const getArrowBoxByPlacement = (placement: Placement) => {
   switch (placement) {
-    case 'left':
-    case 'right':
+    case "left":
+    case "right":
       return {
         width: ARROW_HEIGHT,
-        height: ARROW_WIDTH,
+        height: ARROW_WIDTH
       };
     default:
       return {
         height: ARROW_HEIGHT,
-        width: ARROW_WIDTH,
+        width: ARROW_WIDTH
       };
   }
 };
@@ -66,7 +66,8 @@ export const getTooltipCoords = (
       };
     case "bottom":
       return {
-        top: childrenCoords.y + childrenCoords.height + ARROW_HEIGHT + EMPTY_SPACE,
+        top:
+          childrenCoords.y + childrenCoords.height + ARROW_HEIGHT + EMPTY_SPACE,
         left: displayInsets.left,
         width: screenWidth - displayInsets.left - displayInsets.right
       };
@@ -75,17 +76,20 @@ export const getTooltipCoords = (
         top: childrenCoords.y,
         left: displayInsets.left,
         width:
-          screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - displayInsets.left - EMPTY_SPACE
+          screenWidth -
+          (screenWidth - childrenCoords.x) -
+          ARROW_HEIGHT -
+          displayInsets.left -
+          EMPTY_SPACE
       };
     case "right":
-      const elementSize = childrenCoords.width + childrenCoords.x + ARROW_HEIGHT + EMPTY_SPACE;
+      const elementSize =
+        childrenCoords.width + childrenCoords.x + ARROW_HEIGHT + EMPTY_SPACE;
 
       return {
         top: childrenCoords.y,
         left: elementSize,
-        width:
-          screenWidth -
-          (elementSize + displayInsets.right)
+        width: screenWidth - (elementSize + displayInsets.right)
       };
     // TODO: provide a default center position in case of Tooltip without children
     default:
@@ -121,7 +125,12 @@ export const getArrowCoords = (
     case "left":
       return {
         top: childrenCoords.y,
-        left: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - EMPTY_SPACE - 1, // FIXME -> This `-1` is necessary because of the Svg size doesn't match the box size
+        left:
+          screenWidth -
+          (screenWidth - childrenCoords.x) -
+          ARROW_HEIGHT -
+          EMPTY_SPACE -
+          1 // FIXME -> This `-1` is necessary because of the Svg size doesn't match the box size
       };
     case "right":
       return {
@@ -139,16 +148,19 @@ export const getArrowCoords = (
  * @param placement The `Tooltip` placement in relation of its children
  * @param childrenHeight The `Tooltip`'s children height
  * @param tooltipHeight The `Tooltip`'s height
- * @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center, 
+ * @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center,
  * otherwise `null` is returned
  */
-export const getTooltipVerticalAlignment = (placement: Placement, childrenHeight: number, tooltipHeight?: number) => {
+export const getTooltipVerticalAlignment = (
+  placement: Placement,
+  childrenHeight: number,
+  tooltipHeight?: number
+) => {
   if ((placement === "left" || placement === "right") && tooltipHeight) {
     return {
       transform: [
         {
-          translateY:
-            -tooltipHeight / 2 + childrenHeight / 2
+          translateY: -tooltipHeight / 2 + childrenHeight / 2
         }
       ]
     };
@@ -160,14 +172,16 @@ export const getTooltipVerticalAlignment = (placement: Placement, childrenHeight
  * A utility function to calculate the `Arrow` vertical alignment
  * @param placement The `Tooltip` placement in relation of its children
  * @param childrenHeight The `Tooltip`'s children height
-*/
-export const getArrowVerticalAlignment = (placement: Placement, childrenHeight: number) => {
+ */
+export const getArrowVerticalAlignment = (
+  placement: Placement,
+  childrenHeight: number
+) => {
   if (placement === "left" || placement === "right") {
     return {
       transform: [
         {
-          translateY:
-            -ARROW_WIDTH / 2 + childrenHeight / 2
+          translateY: -ARROW_WIDTH / 2 + childrenHeight / 2
         }
       ]
     };
@@ -176,4 +190,4 @@ export const getArrowVerticalAlignment = (placement: Placement, childrenHeight:
 };
 
 export const isDefined = <T>(v: T) => v !== undefined;
-export const isNotZero = (v: number) => v !== 0;
+export const isNotZero = (v: number) => v !== 0;

package/src/components/tooltip/utils/types.ts

@@ -6,4 +6,4 @@ export type ChildrenCoords = {
   width: number;
   height: number;
 };
-export type TooltipLayout = ChildrenCoords;
+export type TooltipLayout = ChildrenCoords;

package/src/functions/haptic-feedback/hapticFeedback.ts

@@ -4,10 +4,15 @@ import {
   HapticOptions
 } from "react-native-haptic-feedback";
 
+const defaultOptions: HapticOptions = {
+  enableVibrateFallback: true,
+  ignoreAndroidSystemSettings: false
+};
+
 const triggerHaptic = (
-  type: string | HapticFeedbackTypes,
+  type: HapticFeedbackTypes | keyof typeof HapticFeedbackTypes,
   options?: HapticOptions
-) => trigger(type, options);
+) => trigger(type, { ...defaultOptions, ...options });
 
 export { triggerHaptic, HapticFeedbackTypes as HapticTypes };
 export type { HapticOptions };