@fluentui-react-native/experimental-shadow 0.6.19 → 0.7.0

package/package.json

@@ -1,79 +1,88 @@
 {
   "name": "@fluentui-react-native/experimental-shadow",
-  "version": "0.6.19",
+  "version": "0.7.0",
   "description": "A cross-platform Shadow component using the Fluent Design System",
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
-  "react-native": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/experimental/Shadow"
+  },
+  "license": "MIT",
+  "author": "",
   "exports": {
     ".": {
+      "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
-      "types": "./lib/index.d.ts"
+      "require": "./lib-commonjs/index.js"
     }
   },
-  "typings": "lib/index.d.ts",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
     "build": "fluentui-scripts build",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
-    "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest",
-    "update-snapshots": "fluentui-scripts jest -u",
+    "lint-package": "fluentui-scripts lint-package",
     "prettier": "fluentui-scripts prettier",
-    "prettier-fix": "fluentui-scripts prettier --fix true"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/microsoft/fluentui-react-native.git",
-    "directory": "packages/experimental/Shadow"
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.14.17",
-    "@fluentui-react-native/pressable": "0.12.19",
-    "@fluentui-react-native/theme-types": "0.43.0"
+    "@fluentui-react-native/framework": "0.15.0",
+    "@fluentui-react-native/framework-base": "0.3.0",
+    "@fluentui-react-native/pressable": "0.13.0",
+    "@fluentui-react-native/theme-types": "0.44.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@fluentui-react-native/babel-config": "0.1.1",
     "@fluentui-react-native/eslint-config-rules": "0.1.1",
     "@fluentui-react-native/jest-config": "0.1.1",
-    "@fluentui-react-native/scripts": "0.1.1",
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
     "@fluentui-react-native/test-tools": "0.1.1",
-    "@react-native/babel-preset": "^0.74.0",
-    "@react-native/metro-config": "^0.74.0",
-    "@types/react": "~18.2.0",
-    "@types/react-test-renderer": "^18.2.0",
-    "react": "18.2.0",
-    "react-native": "^0.74.0",
-    "react-native-macos": "^0.74.0",
-    "react-native-windows": "^0.74.0",
-    "react-test-renderer": "18.2.0"
+    "@react-native-community/cli": "^20.0.0",
+    "@react-native-community/cli-platform-android": "^20.0.0",
+    "@react-native-community/cli-platform-ios": "^20.0.0",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/metro-config": "^0.81.0",
+    "@types/react": "~19.1.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "react": "19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-macos": "^0.81.0",
+    "react-native-windows": "^0.81.0",
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.74.0",
-    "react": "18.2.0",
-    "react-native": "^0.73.0 || ^0.74.0",
-    "react-native-macos": "^0.73.0 || ^0.74.0",
-    "react-native-windows": "^0.73.0 || ^0.74.0"
+    "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
+    "react": "18.2.0 || 19.0.0 || 19.1.0",
+    "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
+    "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
+  },
+  "peerDependenciesMeta": {
+    "@office-iss/react-native-win32": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react-native-macos": {
+      "optional": true
+    },
+    "react-native-windows": {
+      "optional": true
+    }
   },
-  "author": "",
-  "license": "MIT",
   "rnx-kit": {
     "kitType": "library",
     "alignDeps": {
-      "presets": [
-        "microsoft/react-native"
-      ],
-      "requirements": {
-        "development": [
-          "react-native@0.74"
-        ],
-        "production": [
-          "react-native@0.73 || 0.74"
-        ]
-      },
       "capabilities": [
         "babel-preset-react-native",
         "core",
@@ -82,19 +91,11 @@
         "core-macos",
         "core-windows",
         "react",
-        "react-test-renderer"
+        "react-test-renderer",
+        "tools-core",
+        "tools-jest"
       ]
-    }
-  },
-  "peerDependenciesMeta": {
-    "@office-iss/react-native-win32": {
-      "optional": true
     },
-    "react-native-macos": {
-      "optional": true
-    },
-    "react-native-windows": {
-      "optional": true
-    }
+    "extends": "@fluentui-react-native/kit-config"
   }
-}
+}

package/src/Shadow.tsx

@@ -2,39 +2,30 @@ import * as React from 'react';
 import type { ViewStyle } from 'react-native';
 import { View } from 'react-native';
 
-import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
-import { memoize } from '@fluentui-react-native/framework';
+import { memoize, mergeProps, phasedComponent, directComponent } from '@fluentui-react-native/framework-base';
 import type { ShadowToken } from '@fluentui-react-native/theme-types';
 
 import type { ShadowProps } from './Shadow.types';
 import { shadowName } from './Shadow.types';
 import { getShadowTokenStyleSet } from './shadowStyle';
 
-export const Shadow = stagedComponent((props: ShadowProps) => {
-  return (final: ShadowProps, children: React.ReactNode) => {
+export const Shadow = phasedComponent((props: ShadowProps) => {
+  return directComponent<ShadowProps>((final: ShadowProps) => {
+    const { children, ...rest } = final;
     if (!props.shadowToken) {
       return <>{children}</>;
     }
 
-    const childrenArray = React.Children.toArray(children) as React.ReactElement[];
-    const child = childrenArray[0];
-
-    if (__DEV__) {
-      if (childrenArray.length !== 1) {
-        console.warn('Shadow must only have one child');
-      }
-    }
-
-    const { style: childStyle, ...restOfChildProps } = child.props;
+    const { style: childStyle, ...restOfChildProps } = children.props as { style?: ViewStyle };
 
     const shadowViewStyleProps = getStylePropsForShadowViews(childStyle, props.shadowToken);
     const innerShadowViewProps = mergeProps(restOfChildProps, shadowViewStyleProps.inner);
-    const outerShadowViewProps = mergeProps(final, shadowViewStyleProps.outer);
+    const outerShadowViewProps = mergeProps(rest, shadowViewStyleProps.outer);
 
-    const childWithInnerShadow = React.cloneElement(child, innerShadowViewProps);
+    const childWithInnerShadow = React.cloneElement(children, innerShadowViewProps);
 
     return <View {...outerShadowViewProps}>{childWithInnerShadow}</View>;
-  };
+  });
 });
 
 const getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);

package/src/Shadow.types.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { ViewProps } from 'react-native';
 
 import type { ShadowToken } from '@fluentui-react-native/theme-types';
@@ -6,4 +7,7 @@ export const shadowName = 'Shadow';
 
 export interface ShadowProps extends ViewProps {
   shadowToken?: ShadowToken;
+
+  /** Exactly one child */
+  children: React.ReactElement;
 }

package/src/__tests__/Shadow.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { act } from 'react';
+import { Text, View, type ViewStyle } from 'react-native';
 
 import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
 import { Pressable } from '@fluentui-react-native/pressable';
@@ -46,7 +47,7 @@ const TestShadowOnChildViewWithProps: React.FunctionComponent<ShadowOnChildViewW
   const theme = useFluentTheme();
   return (
     <Shadow shadowToken={theme.shadows['shadow16']}>
-      <View style={mergeStyles(props.childViewStyleProps, backgroundColor)}>
+      <View style={mergeStyles<ViewStyle>(props.childViewStyleProps, backgroundColor)}>
         <Text>{JSON.stringify(props.childViewStyleProps)}</Text>
       </View>
     </Shadow>
@@ -62,83 +63,131 @@ describe('Shadow component tests', () => {
   });
 
   it('Shadow (depth=2)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow (depth=4)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=4)" depth="shadow4" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=4)" depth="shadow4" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow (depth=8)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=8)" depth="shadow8" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=8)" depth="shadow8" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow (depth=16)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=16)" depth="shadow16" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=16)" depth="shadow16" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow (depth=28)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=28)" depth="shadow28" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=28)" depth="shadow28" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow (depth=64)', () => {
-    const tree = renderer.create(<TestShadow displayText="Shadow (depth=64)" depth="shadow64" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Shadow (depth=64)" depth="shadow64" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=2)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=2)" depth="shadow2brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=2)" depth="shadow2brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=4)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=4)" depth="shadow4brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=4)" depth="shadow4brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=8)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=8)" depth="shadow8brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=8)" depth="shadow8brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=16)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=16)" depth="shadow16brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=16)" depth="shadow16brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=28)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=28)" depth="shadow28brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=28)" depth="shadow28brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=64)', () => {
-    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=64)" depth="shadow64brand" />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadow displayText="Brand shadow (depth=64)" depth="shadow64brand" />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Pressable that has a shadow vs. pressable without shadow', () => {
-    const tree = renderer.create(<TestPressableWithAndWithoutShadow />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestPressableWithAndWithoutShadow />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow on a child with margin and padding', () => {
-    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ margin: 2, padding: 2 }} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ margin: 2, padding: 2 }} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow on a child with border radius', () => {
-    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderRadius: 2 }} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderRadius: 2 }} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   it('Shadow on a child with border width', () => {
-    const tree = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderWidth: 2 }} />).toJSON();
-    expect(tree).toMatchSnapshot();
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<TestShadowOnChildViewWithProps childViewStyleProps={{ borderWidth: 2 }} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
   });
 
   afterAll(() => {

package/src/__tests__/__snapshots__/Shadow.test.tsx.snap

@@ -236,8 +236,6 @@ exports[`Shadow component tests Pressable that has a shadow vs. pressable withou
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -263,8 +261,6 @@ exports[`Shadow component tests Pressable that has a shadow vs. pressable withou
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}