@fluentui-react-native/experimental-shimmer 0.13.19 → 0.14.0

package/package.json

@@ -1,82 +1,91 @@
 {
   "name": "@fluentui-react-native/experimental-shimmer",
-  "version": "0.13.19",
+  "version": "0.14.0",
   "description": "A cross-platform Fluent Shimmer component",
-  "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/Shimmer"
+  },
+  "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",
-    "just": "fluentui-scripts",
+    "build-cjs": "tsgo --outDir lib-commonjs",
+    "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "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/Shimmer"
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.14.16",
-    "@fluentui-react-native/theming-utils": "0.26.10",
-    "@fluentui-react-native/tokens": "0.23.10",
-    "@fluentui-react-native/use-styling": "0.13.12",
+    "@fluentui-react-native/framework": "0.15.0",
+    "@fluentui-react-native/theming-utils": "0.27.0",
+    "@fluentui-react-native/tokens": "0.24.0",
+    "@fluentui-react-native/use-styling": "0.14.0",
     "assert-never": "^1.2.1"
   },
   "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/framework-base": "0.3.0",
     "@fluentui-react-native/jest-config": "0.1.1",
-    "@fluentui-react-native/scripts": "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-svg": "^15.4.0",
-    "react-native-windows": "^0.74.0",
-    "react-test-renderer": "18.2.0"
+    "@fluentui-react-native/kit-config": "0.1.2",
+    "@fluentui-react-native/scripts": "0.1.2",
+    "@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-svg": "^15.12.1",
+    "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-svg": "^15.0.0 || ^15.4.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-svg": ">=15.0.0 <15.13.0 || >=15.4.0 <15.13.0 || ^15.11.2 || ^15.12.1",
+    "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",
@@ -84,20 +93,12 @@
         "core-ios",
         "core-macos",
         "core-windows",
+        "react-test-renderer",
         "svg",
-        "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/Shimmer.test.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { act } from 'react';
 
 import * as renderer from 'react-test-renderer';
 
@@ -39,22 +39,25 @@ function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
 
 const style = { width: 300, height: 100 };
 
-describe('Shimmer component tests', () => {
-  beforeAll(() => {
-    // mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
-    jest.useFakeTimers();
-    jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
-  });
+// mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
+jest.useFakeTimers();
 
+describe('Shimmer component tests', () => {
   it('Shimmer default', async () => {
-    const tree = renderer.create(<Shimmer elements={shimmerRects()} />).toJSON();
-    expect(tree).toMatchSnapshot();
-    await renderer.act(async () => null);
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<Shimmer elements={shimmerRects()} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
+    await act(async () => null);
   });
 
   it('Shimmer with style prop', async () => {
-    const tree = renderer.create(<Shimmer elements={shimmerRects()} style={style} />).toJSON();
-    expect(tree).toMatchSnapshot();
-    await renderer.act(async () => null);
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(<Shimmer elements={shimmerRects()} style={style} />);
+    });
+    expect(component!.toJSON()).toMatchSnapshot();
+    await act(async () => null);
   });
 });

package/src/Shimmer.tsx

@@ -1,11 +1,10 @@
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { useRef, useEffect, useMemo, useCallback } from 'react';
 import type { ScaleXTransform, TranslateXTransform } from 'react-native';
 import { Animated, I18nManager } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
-import { compose, mergeProps, withSlots, buildUseStyling } from '@fluentui-react-native/framework';
+import { compose, mergeProps, buildUseStyling } from '@fluentui-react-native/framework';
 import assertNever from 'assert-never';
 import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg';
 
@@ -22,7 +21,7 @@ export const Shimmer = compose<ShimmerType>({
   },
   useRender: (props: ShimmerProps, useSlots: UseSlots<ShimmerType>) => {
     const Slots = useSlots(props);
-    props = mergeProps(props, Slots.root({}).props);
+    props = mergeProps(props, Slots.root({}).props as ShimmerProps);
     const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
     const tokens = useStyling(props).root;
     const memoizedShimmerData = useMemo(

package/src/Shimmer.win32.tsx

@@ -4,13 +4,11 @@
  * @format
  */
 
-/** @jsxRuntime classic */
-/** @jsx withSlots */
+/** @jsxImportSource @fluentui-react-native/framework-base */
 import { processColor, View } from 'react-native';
 
 import type { UseSlots } from '@fluentui-react-native/framework';
 import { compose, mergeProps } from '@fluentui-react-native/framework';
-import { withSlots } from '@fluentui-react-native/framework';
 import { assertNever } from 'assert-never';
 import type { SvgProps } from 'react-native-svg';
 import { ClipPath, Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg';

package/src/Win32ShimmerNativeComponent.ts

@@ -4,14 +4,14 @@
  * @format
  */
 
-import type { HostComponent, ViewProps } from 'react-native';
+import type { ViewProps } from 'react-native';
 
 import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import { requireNativeComponent } from 'react-native';
 
 export interface NativeProps extends ViewProps {
   delay?: Double;
   duration?: Double;
 }
 
-export default codegenNativeComponent<NativeProps>('RCTNativeAnimatedShimmer') as HostComponent<NativeProps>;
+export default requireNativeComponent<NativeProps>('RCTNativeAnimatedShimmer');