@pagopa/io-app-design-system 6.0.0 → 6.0.4

package/src/components/modules/__test__/__snapshots__/ModuleNavigationAlt.test.tsx.snap

@@ -60,16 +60,57 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Loading state 1`]
       >
         <View
           collapsable={false}
-          style={
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
             {
-              "backgroundColor": "#E8EBF1",
-              "borderCurve": "continuous",
-              "borderRadius": 8,
-              "height": 32,
-              "opacity": 0.75,
-              "width": 32,
+              "value": {},
             }
           }
+          jestInlineStyle={
+            [
+              {
+                "backgroundColor": "#E8EBF1",
+                "borderCurve": "continuous",
+                "borderRadius": 8,
+                "height": 32,
+                "width": 32,
+              },
+              {
+                "animationDuration": "1250ms",
+                "animationIterationCount": "infinite",
+                "animationName": {
+                  "0%, 100%": {
+                    "opacity": 0.75,
+                  },
+                  "50%": {
+                    "opacity": 0.35,
+                  },
+                },
+                "animationTimingFunction": CubicBezierEasing {
+                  "x1": 0.37,
+                  "x2": 0.63,
+                  "y1": 0,
+                  "y2": 1,
+                },
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "backgroundColor": "#E8EBF1",
+                "borderCurve": "continuous",
+                "borderRadius": 8,
+                "height": 32,
+                "width": 32,
+              },
+              {},
+            ]
+          }
         />
         <View
           style={
@@ -82,58 +123,222 @@ exports[`ModuleNavigationAlt - Snapshot (Experimental Enabled) Loading state 1`]
         >
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 12,
-                "opacity": 0.75,
-                "width": 52,
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {},
               }
             }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 52,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 52,
+                },
+                {},
+              ]
+            }
           />
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 16,
-                "opacity": 0.75,
-                "width": 96,
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {},
               }
             }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 16,
+                  "width": 96,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 16,
+                  "width": 96,
+                },
+                {},
+              ]
+            }
           />
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 12,
-                "opacity": 0.75,
-                "width": 160,
+                "value": {},
               }
             }
+            jestAnimatedStyle={
+              {
+                "value": {},
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 160,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 160,
+                },
+                {},
+              ]
+            }
           />
         </View>
       </View>
     </View>
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "#E8EBF1",
-          "borderCurve": "continuous",
-          "borderRadius": 16,
-          "height": 24,
-          "opacity": 0.75,
-          "width": 64,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "backgroundColor": "#E8EBF1",
+            "borderCurve": "continuous",
+            "borderRadius": 16,
+            "height": 24,
+            "width": 64,
+          },
+          {
+            "animationDuration": "1250ms",
+            "animationIterationCount": "infinite",
+            "animationName": {
+              "0%, 100%": {
+                "opacity": 0.75,
+              },
+              "50%": {
+                "opacity": 0.35,
+              },
+            },
+            "animationTimingFunction": CubicBezierEasing {
+              "x1": 0.37,
+              "x2": 0.63,
+              "y1": 0,
+              "y2": 1,
+            },
+          },
+        ]
+      }
+      style={
+        [
+          {
+            "backgroundColor": "#E8EBF1",
+            "borderCurve": "continuous",
+            "borderRadius": 16,
+            "height": 24,
+            "width": 64,
+          },
+          {},
+        ]
+      }
     />
   </View>
 </View>
@@ -1331,16 +1536,57 @@ exports[`ModuleNavigationAlt - Snapshot Loading state 1`] = `
       >
         <View
           collapsable={false}
-          style={
+          jestAnimatedProps={
+            {
+              "value": {},
+            }
+          }
+          jestAnimatedStyle={
             {
-              "backgroundColor": "#E8EBF1",
-              "borderCurve": "continuous",
-              "borderRadius": 8,
-              "height": 32,
-              "opacity": 0.75,
-              "width": 32,
+              "value": {},
             }
           }
+          jestInlineStyle={
+            [
+              {
+                "backgroundColor": "#E8EBF1",
+                "borderCurve": "continuous",
+                "borderRadius": 8,
+                "height": 32,
+                "width": 32,
+              },
+              {
+                "animationDuration": "1250ms",
+                "animationIterationCount": "infinite",
+                "animationName": {
+                  "0%, 100%": {
+                    "opacity": 0.75,
+                  },
+                  "50%": {
+                    "opacity": 0.35,
+                  },
+                },
+                "animationTimingFunction": CubicBezierEasing {
+                  "x1": 0.37,
+                  "x2": 0.63,
+                  "y1": 0,
+                  "y2": 1,
+                },
+              },
+            ]
+          }
+          style={
+            [
+              {
+                "backgroundColor": "#E8EBF1",
+                "borderCurve": "continuous",
+                "borderRadius": 8,
+                "height": 32,
+                "width": 32,
+              },
+              {},
+            ]
+          }
         />
         <View
           style={
@@ -1353,58 +1599,222 @@ exports[`ModuleNavigationAlt - Snapshot Loading state 1`] = `
         >
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 12,
-                "opacity": 0.75,
-                "width": 52,
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {},
               }
             }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 52,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 52,
+                },
+                {},
+              ]
+            }
           />
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 16,
-                "opacity": 0.75,
-                "width": 96,
+                "value": {},
+              }
+            }
+            jestAnimatedStyle={
+              {
+                "value": {},
               }
             }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 16,
+                  "width": 96,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 16,
+                  "width": 96,
+                },
+                {},
+              ]
+            }
           />
           <View
             collapsable={false}
-            style={
+            jestAnimatedProps={
               {
-                "backgroundColor": "#E8EBF1",
-                "borderCurve": "continuous",
-                "borderRadius": 8,
-                "height": 12,
-                "opacity": 0.75,
-                "width": 160,
+                "value": {},
               }
             }
+            jestAnimatedStyle={
+              {
+                "value": {},
+              }
+            }
+            jestInlineStyle={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 160,
+                },
+                {
+                  "animationDuration": "1250ms",
+                  "animationIterationCount": "infinite",
+                  "animationName": {
+                    "0%, 100%": {
+                      "opacity": 0.75,
+                    },
+                    "50%": {
+                      "opacity": 0.35,
+                    },
+                  },
+                  "animationTimingFunction": CubicBezierEasing {
+                    "x1": 0.37,
+                    "x2": 0.63,
+                    "y1": 0,
+                    "y2": 1,
+                  },
+                },
+              ]
+            }
+            style={
+              [
+                {
+                  "backgroundColor": "#E8EBF1",
+                  "borderCurve": "continuous",
+                  "borderRadius": 8,
+                  "height": 12,
+                  "width": 160,
+                },
+                {},
+              ]
+            }
           />
         </View>
       </View>
     </View>
     <View
       collapsable={false}
-      style={
+      jestAnimatedProps={
         {
-          "backgroundColor": "#E8EBF1",
-          "borderCurve": "continuous",
-          "borderRadius": 16,
-          "height": 24,
-          "opacity": 0.75,
-          "width": 64,
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {},
         }
       }
+      jestInlineStyle={
+        [
+          {
+            "backgroundColor": "#E8EBF1",
+            "borderCurve": "continuous",
+            "borderRadius": 16,
+            "height": 24,
+            "width": 64,
+          },
+          {
+            "animationDuration": "1250ms",
+            "animationIterationCount": "infinite",
+            "animationName": {
+              "0%, 100%": {
+                "opacity": 0.75,
+              },
+              "50%": {
+                "opacity": 0.35,
+              },
+            },
+            "animationTimingFunction": CubicBezierEasing {
+              "x1": 0.37,
+              "x2": 0.63,
+              "y1": 0,
+              "y2": 1,
+            },
+          },
+        ]
+      }
+      style={
+        [
+          {
+            "backgroundColor": "#E8EBF1",
+            "borderCurve": "continuous",
+            "borderRadius": 16,
+            "height": 24,
+            "width": 64,
+          },
+          {},
+        ]
+      }
     />
   </View>
 </View>

package/src/components/numberpad/NumberButton.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Pressable, StyleSheet } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {

package/src/components/numberpad/NumberPad.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, JSX, useCallback, useMemo } from "react";
+import { ComponentProps, JSX, ReactNode, useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { BiometricsValidType, Optional } from "../../utils/types";
 import { IconButton } from "../buttons";
@@ -156,7 +156,7 @@ export const NumberPad = ({
   return <ContentWrapper>{numberPad}</ContentWrapper>;
 };
 
-const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
+const ButtonWrapper = ({ children }: { children: ReactNode }) => (
   <View
     style={[
       numberButtonStyles.buttonSize,

package/src/components/otpInput/BoxedInput.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from "react";
+import { memo, useMemo } from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
 import { useIOTheme } from "../../context";
 import { hexToRgba, IOColors } from "../../core/IOColors";

package/src/components/otpInput/OTPInput.tsx

@@ -1,5 +1,11 @@
-import * as React from "react";
-import { createRef, forwardRef, useEffect, useRef, useState } from "react";
+import {
+  createRef,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import {
   AccessibilityInfo,
   NativeSyntheticEvent,
@@ -131,7 +137,7 @@ export const OTPInput = forwardRef<View, Props>(
       }
     };
 
-    const cells = React.useMemo(() => Array.from({ length }), [length]);
+    const cells = useMemo(() => Array.from({ length }), [length]);
 
     return (
       <Animated.View style={[{ flexGrow: 1 }, animatedStyle]}>