@fountain-ui/lab 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/FlipCard/FlipCard.tsx

@@ -37,7 +37,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${sharedAngle.value}deg` },
             ],
         };
-    }, []);
+    }, [sharedAngle]);
 
     const animatedBackCardStyle = useAnimatedStyle(() => {
         return {
@@ -47,7 +47,7 @@ export default function FlipCard(props: FlipCardProps) {
                 { rotateX: `${(sharedAngle.value + 180)}deg` },
             ],
         };
-    }, []);
+    }, [sharedAngle]);
 
     useEffect(() => {
         sharedAngle.value = 0;

package/src/StatusBarProvider/StatusBarProvider.tsx

@@ -30,7 +30,7 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
     };
 
     const theme = useTheme();
-    const defaultColor = theme.palette.background.default;
+    const defaultColor = theme.palette.background.base;
 
     const [visible, setVisible] = React.useState(initialVisible);
     const [backgroundViewColor, setBackgroundViewColor] = React.useState(defaultColor);
@@ -179,4 +179,4 @@ export default function StatusBarProvider(props: StatusBarProviderProps) {
             {children}
         </Provider>
     );
-}
+}

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -108,11 +108,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             };
         }
         return {};
-    }, [
-        /**
-         * FIXME: Consider add `elevationStyle` to dependencies.
-         */
-    ]);
+    }, [translateY, overlapped, elevationStyle]);
 
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);
@@ -222,7 +218,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    }, [appBarHeight]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -22,5 +22,5 @@ export default function useAnimatedDisplayStyle(
 
     return useAnimatedStyle(() => ({
         display: display.value,
-    }), []);
+    }), [display]);
 };