@pagopa/io-app-design-system 5.6.7 → 5.7.0

package/src/components/numberpad/NumberPad.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps, useCallback, useMemo } from "react";
+import React, { ComponentProps, JSX, useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { BiometricsValidType, Optional } from "../../utils/types";
 import { IconButton } from "../buttons";

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

@@ -863,6 +863,11 @@ exports[`NumberPad Should match the snapshot 1`] = `
               accessibilityLabel=""
               accessible={false}
               align="xMidYMid"
+              animatedProps={
+                {
+                  "color": undefined,
+                }
+              }
               bbHeight={24}
               bbWidth={24}
               color="#FFFFFF"
@@ -1073,6 +1078,11 @@ exports[`NumberPad Should match the snapshot 1`] = `
               accessibilityLabel=""
               accessible={false}
               align="xMidYMid"
+              animatedProps={
+                {
+                  "color": undefined,
+                }
+              }
               bbHeight={24}
               bbWidth={24}
               color="#FFFFFF"

package/src/components/otpInput/OTPInput.tsx

@@ -71,7 +71,7 @@ export const OTPInput = forwardRef<View, Props>(
       useErrorShakeAnimation();
 
     const inputRef = createRef<TextInput>();
-    const timerRef = useRef<NodeJS.Timeout>();
+    const timerRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
     const handleValidate = (val: string) => {
       if (!onValidate || val.length < length) {

package/src/components/pictograms/Pictogram.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { JSX, useMemo } from "react";
 import { ColorValue } from "react-native";
 import { IOColors, IOThemeDark, IOThemeLight, useIOTheme } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";

package/src/components/stack/Stack.tsx

@@ -3,9 +3,9 @@ import { View, ViewProps, ViewStyle } from "react-native";
 import { IOSpacer } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
 
-type AllowedStyleProps = Pick<
+type AllowedStyleProps = Exclude<
   ViewStyle,
-  "alignItems" | "flexShrink" | "flexGrow" | "flex" | "flexWrap" | "width"
+  "display" | "flexDirection" | "gap"
 >;
 
 type A11YRelatedProps = Pick<
@@ -14,7 +14,7 @@ type A11YRelatedProps = Pick<
 >;
 
 type Stack = PropsWithChildren<{
-  space?: IOSpacer;
+  space?: IOSpacer | 0;
   style?: AllowedStyleProps;
   allowScaleSpacing?: boolean;
 }> &
@@ -24,15 +24,13 @@ type BaseStack = Stack & {
   orientation: "vertical" | "horizontal";
 };
 
-const DEFAULT_SPACING_VALUE: IOSpacer = 16;
-
 /**
 Horizontal Stack component
 @param {IOSpacer} space
  */
 
 const Stack = ({
-  space = DEFAULT_SPACING_VALUE,
+  space = 0,
   style,
   orientation = "vertical",
   allowScaleSpacing,
@@ -47,9 +45,10 @@ const Stack = ({
       style={{
         display: "flex",
         flexDirection: orientation === "horizontal" ? "row" : "column",
-        gap: allowScaleSpacing
-          ? space * dynamicFontScale * spacingScaleMultiplier
-          : space,
+        gap:
+          allowScaleSpacing && space !== 0
+            ? space * dynamicFontScale * spacingScaleMultiplier
+            : space,
         ...style
       }}
     >

package/src/components/tooltip/Tooltip.tsx

@@ -179,7 +179,9 @@ export const Tooltip = ({
   const [tooltipLayout, setTooltipLayout] = useState<TooltipLayout>();
   const childRef = useRef<View>(null);
   const titleRef = useRef<View>(null);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
 
   // Theme
   const theme = useIOTheme();