@fluentui-react-native/experimental-shimmer 0.8.13 → 0.8.14

package/CHANGELOG.json

@@ -2,7 +2,49 @@
   "name": "@fluentui-react-native/experimental-shimmer",
   "entries": [
     {
-      "date": "Wed, 25 Jan 2023 21:28:23 GMT",
+      "date": "Mon, 30 Jan 2023 07:10:00 GMT",
+      "tag": "@fluentui-react-native/experimental-shimmer_v0.8.14",
+      "version": "0.8.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shimmer",
+            "comment": "Bump @fluentui-react-native/framework to v0.8.37",
+            "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shimmer",
+            "comment": "Bump @fluentui-react-native/tokens to v0.20.6",
+            "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shimmer",
+            "comment": "Bump @fluentui-react-native/theming-utils to v0.23.1",
+            "commit": "f6f403b2efe86a229448a618b043601ceefd9a5f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 27 Jan 2023 18:54:22 GMT",
+      "tag": "@fluentui-react-native/experimental-shimmer_v0.8.13",
+      "version": "0.8.13",
+      "comments": {
+        "none": [
+          {
+            "author": "ayushsinghs@yahoo.in",
+            "package": "@fluentui-react-native/experimental-shimmer",
+            "commit": "939db0b8e93cc3d172744481f070dd15169de2d9",
+            "comment": "Update Shimmer docs"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 25 Jan 2023 21:31:18 GMT",
       "tag": "@fluentui-react-native/experimental-shimmer_v0.8.13",
       "version": "0.8.13",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui-react-native/experimental-shimmer
 
-This log was last generated on Wed, 25 Jan 2023 21:28:23 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Jan 2023 07:10:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.8.14
+
+Mon, 30 Jan 2023 07:10:00 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/framework to v0.8.37
+- Bump @fluentui-react-native/tokens to v0.20.6
+- Bump @fluentui-react-native/theming-utils to v0.23.1
+
 ## 0.8.13
 
-Wed, 25 Jan 2023 21:28:23 GMT
+Wed, 25 Jan 2023 21:31:18 GMT
 
 ### Patches
 

package/SPEC.md

@@ -0,0 +1,324 @@
+# Shimmer
+
+## Background
+
+The `Shimmer` component is a temporary animation placeholder for when a service call takes time to return data and we don't want to block rendering the rest of the UI.
+
+Many a time, applications must wait for content to load or perform lengthy data processing operations. During these times, it is vital to show the user that the application isn't stalled. Progress indicators like `Shimmer` are used in these cases.
+
+## Requirements
+
+To work with [FURN's theming](../../../docs/pages/Theming/Basics.md), the `Shimmer` requires the use of `ThemeProvider` from `@fluentui-react-native/theme`.
+
+Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for information on updating your `ThemeProvider` if you are already using the older version from `@uifabricshared/theming-react-native`.
+
+## Sample Code
+
+Basic examples:
+
+```jsx
+function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
+  return [
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 100,
+      height: 20,
+      x: 90,
+      y: 70,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 150,
+      height: 20,
+      x: 90,
+      y: 42,
+    },
+    {
+      type: 'rect',
+      borderRadiusX: 3,
+      borderRadiusY: 3,
+      width: 200,
+      height: 20,
+      x: 90,
+      y: 15,
+    },
+    {
+      type: 'circle',
+      radius: 30,
+      cx: 40,
+      cy: 55,
+    },
+  ];
+}
+<Shimmer elements={shimmerRects()} style={{ width: 300, height: 100 }} />;
+```
+
+More examples on the [Test pages for the Shimmer](../../../apps/fluent-tester/src/TestComponents/Shimmer). Instructions on running the tester app can be found [here](../../../apps/fluent-tester/README.md).
+
+## Visual Examples
+
+Win32:
+
+Dark:
+![Dark Shimmer win32](./assets/dark_shimmer_win32.png)
+
+Light:
+![Light Shimmer win32](./assets/light_shimmer_win32.png)
+
+Android:
+
+Dark:
+![Dark Shimmer android](./assets/dark_shimmer_android.png)
+
+Light:
+![Light Shimmer android](./assets/light_shimmer_android.png)
+
+## API
+
+### Slots
+
+The `Shimmer` component has only one slot, or part. The slot behaves as follows:
+
+- `root` - The outer container representing the `Shimmer` itself that wraps everything passed via the `children` prop.
+
+On Win32 though, the `Shimmer` component has four slots, or parts. The slots behave as follows:
+
+- `root` - The outer container representing the `Shimmer` itself that wraps everything passed via the `children` prop.
+- `shimmerWave` - The shimmer wave is rendered here.
+- `shimmerWaveContainer` - Container of the shimmer wave. This is responsible for the animation in win32.
+- `clippingMask` - Mask placed along with the shimmer wave to render elements passed.
+
+The slots can be modified using the `compose` function on the `Shimmer`. For more information on using the `compose` API, please see [this page](../../framework/composition/README.md).
+
+### Props
+
+Below is the set of props the Shimmer supports:
+
+```ts
+export interface ShimmerCircleElement {
+  /**
+   * Shimmer element type.
+   */
+  type: 'circle';
+
+  /**
+   * Radius of the circle element.
+   * @defaultValue 12
+   */
+  radius?: number;
+
+  /**
+   * Note: cx and cy should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
+   * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
+   */
+
+  /**
+   * The x-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
+   */
+  cx: number;
+
+  /**
+   * The y-axis center of the circle element in the Shimmer relative to the origin [top-left, (0,0)].
+   */
+  cy: number;
+}
+
+/**
+ * Properties necessary to define a rectangular Shimmer element.
+ */
+export interface ShimmerRectElement {
+  /**
+   * Shimmer element type.
+   */
+  type: 'rect';
+
+  /**
+   * Width of the rect.
+   * @defaultValue 100%
+   */
+  width?: number;
+
+  /**
+   * Height of the rect.
+   * @defaultValue 16
+   */
+  height?: number;
+
+  /**
+   * Border radius for the x-axis of a rounded rect.
+   * @defaultValue 0
+   */
+  borderRadiusX?: number;
+
+  /**
+   * Border radius for the y-axis of a rounded rect.
+   * @defaultValue 0
+   */
+  borderRadiusY?: number;
+
+  /**
+   * Note: x and y should be optional properties [or removed], with relative positioning being the default [or only] positioning mechanism.
+   * Note: The behavior of element intersections is undefined.  https://www.github.com/Microsoft/fluentui-react-native Issue #866
+   */
+
+  /**
+   * The x-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
+   */
+  x: number;
+
+  /**
+   * The y-axis position of the rect element's top-left corner in the Shimmer relative to the origin [top-left, (0,0)].
+   */
+  y: number;
+}
+
+export type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
+```
+
+```ts
+export interface ShimmerProps extends ViewProps {
+  /**
+   * Shimmer shapes that define the masking effect of the Shimmer control.
+   */
+  elements: Array<ShimmerElementTypes>;
+
+  /**
+   * Specifies the Shimmer effect angle in degrees (produced by a gradient).
+   *
+   * @defaultValue 45 on @platform Android
+   * @defaultValue 0 on other platforms.
+   */
+  angle?: number;
+
+  /**
+   * Specifies the animation delay time in milliseconds.
+   *
+   * @defaultValue 500 on @platform win32
+   * @defaultValue 0 on other platforms.
+   */
+  delay?: number;
+
+  /**
+   * Specifies the time required to traverse the control in milliseconds.
+   *
+   * @defaultValue 1000 on @platform Android
+   * @defaultValue 2000 on @platform win32
+   * @defaultValue 7000 on other platforms.
+   */
+  duration?: number;
+
+  /**
+   * Specifies the opacity of the shimmer color.
+   * @defaultValue 1
+   */
+  shimmerColorOpacity?: number;
+
+  /**
+   * Specifies the opacity of the wave color.
+   * @defaultValue 1
+   */
+  shimmerWaveColorOpacity?: number;
+
+  /**
+   * Color you see when the shimmer wave is not animating.
+   *
+   * @defaultValue theme.colors.neutralStencil1 on @platform Android
+   * @defaultValue theme.colors.bodyFrameDivider on @platform win32
+   * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
+   */
+  shimmerColor?: ColorValue;
+
+  /**
+   * Defines the tip color of the wave which has a linear gradient.
+   * from shimmerColor to shimmerWaveColor to shimmerColor.
+   *
+   * @defaultValue theme.colors.neutralStencil2 on @platform Android
+   * @defaultValue #E1E1E1 on @platform win32
+   * @defaultValue white/black for light/dark theme on other platforms.
+   */
+  shimmerWaveColor?: ColorValue;
+
+  /**
+   * Width of the Shimmer wave.
+   *
+   * @defaultValue '100%' of the 'width' property
+   * @platform win32
+   */
+  shimmerWaveWidth?: number | string;
+}
+```
+
+### Styling Tokens
+
+Tokens can be used to customize the styling of the control by using the `customize` function on the `Shimmer`. For more information on using the `customize` API, please see [this page](../../framework/composition/README.md). The `Shimmer` has the following tokens:
+
+```ts
+export interface ShimmerTokens extends IBackgroundColorTokens {
+  /**
+   * Specifies the Shimmer effect angle in degrees (produced by a gradient)
+   * @defaultValue 45 on Android, 0 on other platforms
+   */
+  angle?: number;
+
+  /**
+   * Specifies the animation delay time in milliseconds
+   * @defaultValue 500 on win32, 0 on other platforms
+   */
+  delay?: number;
+
+  /**
+   * Specifies the time required to traverse the control in milliseconds
+   *
+   * @defaultValue 1000 on Android, 2000 on win32, 7000 on other platforms
+   */
+  duration?: number;
+
+  /**
+   * Specifies the opacity of the shimmer color.
+   * @defaultValue 1
+   */
+  shimmerColorOpacity?: number;
+
+  /**
+   * Specifies the opacity of the wave color.
+   * @defaultValue 1
+   */
+  shimmerWaveColorOpacity?: number;
+
+  /**
+   * Color you see when the shimmer wave is not animating.
+   *
+   * @defaultValue theme.colors.neutralStencil1 on Android, theme.colors.bodyFrameDivider on win32, #E1E1E1/#404040 on other platforms for light/dark theme
+   */
+  shimmerColor?: ColorValue;
+
+  /**
+   * Defines the tip color of the wave which has a linear gradient.
+   * from shimmerColor to shimmerWaveColor to shimmerColor.
+   *
+   * @defaultValue theme.colors.neutralStencil2 on Android, #E1E1E1 on win32, white/black on other platforms for light/dark theme
+   */
+  shimmerWaveColor?: ColorValue;
+
+  /**
+   * Width of the Shimmer wave.
+   * @defaultValue '100%' of the 'width' property
+   * @platform win32
+   */
+  shimmerWaveWidth?: number | string;
+}
+```
+
+## Behaviors
+
+### States
+
+There is only one default state for `Shimmer`.
+
+### Interaction
+
+There are no interactions available for `Shimmer`.

package/lib/Shimmer.types.d.ts

@@ -72,19 +72,25 @@ export interface ShimmerRectElement {
 export declare type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
 export interface ShimmerTokens extends IBackgroundColorTokens {
     /**
-     * Specifies the Shimmer effect angle in degrees (produced by a gradient)
-     * @defaultValue 0
+     * Specifies the Shimmer effect angle in degrees (produced by a gradient).
+     *
+     * @defaultValue 45 on @platform Android
+     * @defaultValue 0 on other platforms.
      */
     angle?: number;
     /**
-     * Specifies the animation delay time in milliseconds
-     * @defaultValue 0
+     * Specifies the animation delay time in milliseconds.
+     *
+     * @defaultValue 500 on @platform win32
+     * @defaultValue 0 on other platforms.
      */
     delay?: number;
     /**
-     * Specifies the time required to traverse the control in milliseconds
+     * Specifies the time required to traverse the control in milliseconds.
      *
-     * @defaultValue 2000
+     * @defaultValue 1000 on @platform Android
+     * @defaultValue 2000 on @platform win32
+     * @defaultValue 7000 on other platforms.
      */
     duration?: number;
     /**
@@ -100,19 +106,25 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
     /**
      * Color you see when the shimmer wave is not animating.
      *
-     * @defaultValue theme.colors.bodyFrameDivider
+     * @defaultValue theme.colors.neutralStencil1 on @platform Android
+     * @defaultValue theme.colors.bodyFrameDivider on @platform win32
+     * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
      */
     shimmerColor?: ColorValue;
     /**
      * Defines the tip color of the wave which has a linear gradient.
      * from shimmerColor to shimmerWaveColor to shimmerColor.
      *
-     * @defaultValue '#E1E1E1'
+     * @defaultValue theme.colors.neutralStencil2 on @platform Android
+     * @defaultValue #E1E1E1 on @platform win32
+     * @defaultValue white/black for light/dark theme on other platforms.
      */
     shimmerWaveColor?: ColorValue;
     /**
      * Width of the Shimmer wave.
+     *
      * @defaultValue '100%' of the 'width' property
+     * @platform win32
      */
     shimmerWaveWidth?: number | string;
 }

package/lib/Shimmer.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.types.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"Shimmer.types.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}

package/lib-commonjs/Shimmer.types.d.ts

@@ -72,19 +72,25 @@ export interface ShimmerRectElement {
 export declare type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
 export interface ShimmerTokens extends IBackgroundColorTokens {
     /**
-     * Specifies the Shimmer effect angle in degrees (produced by a gradient)
-     * @defaultValue 0
+     * Specifies the Shimmer effect angle in degrees (produced by a gradient).
+     *
+     * @defaultValue 45 on @platform Android
+     * @defaultValue 0 on other platforms.
      */
     angle?: number;
     /**
-     * Specifies the animation delay time in milliseconds
-     * @defaultValue 0
+     * Specifies the animation delay time in milliseconds.
+     *
+     * @defaultValue 500 on @platform win32
+     * @defaultValue 0 on other platforms.
      */
     delay?: number;
     /**
-     * Specifies the time required to traverse the control in milliseconds
+     * Specifies the time required to traverse the control in milliseconds.
      *
-     * @defaultValue 2000
+     * @defaultValue 1000 on @platform Android
+     * @defaultValue 2000 on @platform win32
+     * @defaultValue 7000 on other platforms.
      */
     duration?: number;
     /**
@@ -100,19 +106,25 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
     /**
      * Color you see when the shimmer wave is not animating.
      *
-     * @defaultValue theme.colors.bodyFrameDivider
+     * @defaultValue theme.colors.neutralStencil1 on @platform Android
+     * @defaultValue theme.colors.bodyFrameDivider on @platform win32
+     * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
      */
     shimmerColor?: ColorValue;
     /**
      * Defines the tip color of the wave which has a linear gradient.
      * from shimmerColor to shimmerWaveColor to shimmerColor.
      *
-     * @defaultValue '#E1E1E1'
+     * @defaultValue theme.colors.neutralStencil2 on @platform Android
+     * @defaultValue #E1E1E1 on @platform win32
+     * @defaultValue white/black for light/dark theme on other platforms.
      */
     shimmerWaveColor?: ColorValue;
     /**
      * Width of the Shimmer wave.
+     *
      * @defaultValue '100%' of the 'width' property
+     * @platform win32
      */
     shimmerWaveWidth?: number | string;
 }

package/lib-commonjs/Shimmer.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shimmer.types.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}
+{"version":3,"file":"Shimmer.types.d.ts","sourceRoot":"","sources":["../src/Shimmer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IAEH;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEH;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,mBAAmB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE5E,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAE9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,aAAa;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-shimmer",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "description": "A cross-platform Fluent Shimmer component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,9 +22,9 @@
     "directory": "packages/experimental/Shimmer"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.8.36",
-    "@fluentui-react-native/tokens": ">=0.20.5 <1.0.0",
-    "@fluentui-react-native/theming-utils": ">=0.23.0 <1.0.0",
+    "@fluentui-react-native/framework": "0.8.37",
+    "@fluentui-react-native/tokens": ">=0.20.6 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.23.1 <1.0.0",
     "@fluentui-react-native/component-cache": "^1.4.2",
     "@fluentui-react-native/use-styling": "^0.9.1",
     "react-native-svg": "12.5.0"

package/src/Shimmer.types.ts

@@ -88,21 +88,27 @@ export type ShimmerElementTypes = ShimmerCircleElement | ShimmerRectElement;
 
 export interface ShimmerTokens extends IBackgroundColorTokens {
   /**
-   * Specifies the Shimmer effect angle in degrees (produced by a gradient)
-   * @defaultValue 0
+   * Specifies the Shimmer effect angle in degrees (produced by a gradient).
+   *
+   * @defaultValue 45 on @platform Android
+   * @defaultValue 0 on other platforms.
    */
   angle?: number;
 
   /**
-   * Specifies the animation delay time in milliseconds
-   * @defaultValue 0
+   * Specifies the animation delay time in milliseconds.
+   *
+   * @defaultValue 500 on @platform win32
+   * @defaultValue 0 on other platforms.
    */
   delay?: number;
 
   /**
-   * Specifies the time required to traverse the control in milliseconds
+   * Specifies the time required to traverse the control in milliseconds.
    *
-   * @defaultValue 2000
+   * @defaultValue 1000 on @platform Android
+   * @defaultValue 2000 on @platform win32
+   * @defaultValue 7000 on other platforms.
    */
   duration?: number;
 
@@ -121,7 +127,9 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
   /**
    * Color you see when the shimmer wave is not animating.
    *
-   * @defaultValue theme.colors.bodyFrameDivider
+   * @defaultValue theme.colors.neutralStencil1 on @platform Android
+   * @defaultValue theme.colors.bodyFrameDivider on @platform win32
+   * @defaultValue #E1E1E1/#404040 for light/dark theme on other platforms.
    */
   shimmerColor?: ColorValue;
 
@@ -129,13 +137,17 @@ export interface ShimmerTokens extends IBackgroundColorTokens {
    * Defines the tip color of the wave which has a linear gradient.
    * from shimmerColor to shimmerWaveColor to shimmerColor.
    *
-   * @defaultValue '#E1E1E1'
+   * @defaultValue theme.colors.neutralStencil2 on @platform Android
+   * @defaultValue #E1E1E1 on @platform win32
+   * @defaultValue white/black for light/dark theme on other platforms.
    */
   shimmerWaveColor?: ColorValue;
 
   /**
    * Width of the Shimmer wave.
+   *
    * @defaultValue '100%' of the 'width' property
+   * @platform win32
    */
   shimmerWaveWidth?: number | string;
 }