fix: review findings

Author: adrcotfas

src/components/Appbar/Appbar.tsx

@@ -167,7 +167,7 @@ const Appbar = ({
     elevation = elevated ? 2 : 0,
     ...restStyle
   } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
-    elevation?: number;
+    elevation?: Elevation;
     backgroundColor?: ColorValue;
   };
 
@@ -234,7 +234,7 @@ const Appbar = ({
         insets,
         restStyle,
       ]}
-      elevation={elevation as Elevation}
+      elevation={elevation}
       container
       {...rest}
     >

src/components/Menu/Menu.tsx

@@ -23,7 +23,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import MenuItem from './MenuItem';
 import { useInternalTheme } from '../../core/theming';
-import type { Elevation, ElevationLevel, Theme, ThemeProp } from '../../types';
+import type { Elevation, Theme, ThemeProp } from '../../types';
 import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
@@ -669,10 +669,7 @@ const Menu = ({
                   styles.shadowMenuContainer,
                   shadowMenuContainerStyle,
                   {
-                    backgroundColor:
-                      md3Colors.elevation[
-                        `level${elevation}` as ElevationLevel
-                      ],
+                    backgroundColor: md3Colors.elevation[`level${elevation}`],
                   },
                   contentStyle,
                 ]}

src/components/Surface.tsx

@@ -96,13 +96,13 @@ function getStyleForShadowLayer(
       shadowOffset: {
         width: 0,
         height: elevation.interpolate({
-          inputRange: [...elevationInputRange],
-          outputRange: [...shadowLayers[layer].height],
+          inputRange: elevationInputRange,
+          outputRange: shadowLayers[layer].height,
         }),
       },
       shadowRadius: elevation.interpolate({
-        inputRange: [...elevationInputRange],
-        outputRange: [...shadowLayers[layer].shadowRadius],
+        inputRange: elevationInputRange,
+        outputRange: shadowLayers[layer].shadowRadius,
       }),
     };
   }
@@ -252,9 +252,9 @@ const Surface = forwardRef<View, Props>(
     const backgroundColor = (() => {
       if (isAnimatedValue(elevation)) {
         return elevation.interpolate({
-          inputRange: [...elevationInputRange],
-          outputRange: [...elevationInputRange].map((elevation) => {
-            return colors.elevation?.[`level${elevation as Elevation}`];
+          inputRange: elevationInputRange,
+          outputRange: elevationInputRange.map((elevation) => {
+            return colors.elevation?.[`level${elevation}`];
           }),
         });
       }
@@ -286,17 +286,15 @@ const Surface = forwardRef<View, Props>(
     }
 
     if (Platform.OS === 'android') {
-      const elevationLevel = [...androidElevationLevels];
-
       const getElevationAndroid = () => {
         if (isAnimatedValue(elevation)) {
           return elevation.interpolate({
-            inputRange: [...elevationInputRange],
-            outputRange: elevationLevel,
+            inputRange: elevationInputRange,
+            outputRange: androidElevationLevels,
           });
         }
 
-        return elevationLevel[elevation];
+        return androidElevationLevels[elevation];
       };
 
       const { margin, padding, transform, borderRadius } = (StyleSheet.flatten(

src/components/__tests__/Menu.test.tsx

@@ -4,7 +4,7 @@ import { Animated, Dimensions, StyleSheet, View } from 'react-native';
 import { act, render, screen, waitFor } from '@testing-library/react-native';
 
 import { getTheme } from '../../core/theming';
-import { Elevation, ElevationLevel } from '../../types';
+import { Elevation } from '../../types';
 import Button from '../Button/Button';
 import Menu from '../Menu/Menu';
 import Portal from '../Portal/Portal';
@@ -87,8 +87,7 @@ it('renders menu with content styles', () => {
     );
 
     expect(getByTestId('menu-surface')).toHaveStyle({
-      backgroundColor:
-        theme.colors.elevation[`level${elevation}` as ElevationLevel],
+      backgroundColor: theme.colors.elevation[`level${elevation}`],
     });
   })
 );

src/index.tsx

@@ -12,7 +12,6 @@ export * from './theme/schemes';
 
 export { default as Provider } from './core/PaperProvider';
 export { default as PaperProvider } from './core/PaperProvider';
-export { default as shadow } from './theme/shadow';
 export { default as configureFonts } from './theme/fonts';
 
 import * as Avatar from './components/Avatar/Avatar';

src/theme/shadow.tsx

@@ -3,7 +3,8 @@
 
 import { Animated } from 'react-native';
 
-import type { ThemeElevation } from '../../types';
+import { isAnimatedValue } from '../../../utils/animations';
+import type { Elevation, ThemeElevation } from '../../types';
 
 export const defaultElevation: ThemeElevation = {
   level0: 0,
@@ -14,9 +15,9 @@ export const defaultElevation: ThemeElevation = {
   level5: 5,
 };
 
-export const elevationInputRange = [0, 1, 2, 3, 4, 5] as const;
+export const elevationInputRange: Elevation[] = Object.values(defaultElevation);
 
-export const androidElevationLevels = [0, 1, 3, 6, 8, 12] as const;
+export const androidElevationLevels = [0, 1, 3, 6, 8, 12];
 
 export const shadowLayers = [
   {
@@ -29,20 +30,20 @@ export const shadowLayers = [
     height: [0, 1, 1, 1, 2, 4],
     shadowRadius: [0, 2, 2, 3, 3, 4],
   },
-] as const;
+];
 
 export function shadow(
   elevation: number | Animated.Value = 0,
   shadowColor: string
 ) {
-  if (elevation instanceof Animated.Value) {
+  if (isAnimatedValue(elevation)) {
     return {
       shadowColor,
       shadowOffset: {
         width: new Animated.Value(0),
         height: elevation.interpolate({
-          inputRange: [...elevationInputRange],
-          outputRange: [...shadowLayers[0].height],
+          inputRange: elevationInputRange,
+          outputRange: shadowLayers[0].height,
         }),
       },
       shadowOpacity: elevation.interpolate({
@@ -51,8 +52,8 @@ export function shadow(
         extrapolate: 'clamp',
       }),
       shadowRadius: elevation.interpolate({
-        inputRange: [...elevationInputRange],
-        outputRange: [...shadowLayers[0].shadowRadius],
+        inputRange: elevationInputRange,
+        outputRange: shadowLayers[0].shadowRadius,
       }),
     };
   }

src/theme/tokens/sys/elevation.ts

@@ -1,12 +1,6 @@
 export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
 
-export type ElevationLevel =
-  | 'level0'
-  | 'level1'
-  | 'level2'
-  | 'level3'
-  | 'level4'
-  | 'level5';
+export type ElevationLevel = `level${Elevation}`;
 
 export type ElevationColors = Record<ElevationLevel, string>;