@fluentui-react-native/experimental-shimmer 0.8.16 → 0.8.18

package/lib-commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,WAAW,GACZ,MAAM,iBAAiB,CAAC"}

package/lib-commonjs/index.js

@@ -1,19 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Shimmer"), exports);
-__exportStar(require("./Shimmer.types"), exports);
+exports.shimmerName = exports.Shimmer = void 0;
+var Shimmer_1 = require("./Shimmer");
+Object.defineProperty(exports, "Shimmer", { enumerable: true, get: function () { return Shimmer_1.Shimmer; } });
+var Shimmer_types_1 = require("./Shimmer.types");
+Object.defineProperty(exports, "shimmerName", { enumerable: true, get: function () { return Shimmer_types_1.shimmerName; } });
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B;AAC1B,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,iDAA8C;AAArC,4GAAA,WAAW,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-shimmer",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "A cross-platform Fluent Shimmer component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,7 +22,7 @@
     "directory": "packages/experimental/Shimmer"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.8.39",
+    "@fluentui-react-native/framework": "0.9.0",
     "@fluentui-react-native/tokens": ">=0.20.7 <1.0.0",
     "@fluentui-react-native/theming-utils": ">=0.23.2 <1.0.0",
     "@fluentui-react-native/component-cache": "^1.4.3",

package/src/Shimmer.styling.ts

@@ -1,5 +1,7 @@
-import { UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { shimmerName, ShimmerProps, ShimmerSlotProps, ShimmerTokens } from './Shimmer.types';
+import type { UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import type { ShimmerProps, ShimmerSlotProps, ShimmerTokens } from './Shimmer.types';
+import { shimmerName } from './Shimmer.types';
 import { defaultShimmerTokens } from './ShimmerTokens';
 
 export const stylingSettings: UseStylingOptions<ShimmerProps, ShimmerSlotProps, ShimmerTokens> = {

package/src/Shimmer.styling.win32.ts

@@ -1,6 +1,8 @@
-import { UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { shimmerName, ShimmerProps, ShimmerTokens } from './Shimmer.types';
-import { ShimmerSlotProps } from './Shimmer.types.win32';
+import type { UseStylingOptions } from '@fluentui-react-native/framework';
+import { buildProps } from '@fluentui-react-native/framework';
+import type { ShimmerProps, ShimmerTokens } from './Shimmer.types';
+import { shimmerName } from './Shimmer.types';
+import type { ShimmerSlotProps } from './Shimmer.types.win32';
 import { defaultShimmerTokens } from './ShimmerTokens.win32';
 
 /**

package/src/Shimmer.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { Shimmer } from './Shimmer';
-import { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
+import type { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
 
 // mocks out setTimeout and other timer functions with mock functions, test will fail without this as we're using Animated API
 jest.useFakeTimers();

package/src/Shimmer.tsx

@@ -1,8 +1,11 @@
 /** @jsx withSlots */
 import { useRef, useEffect, useMemo, useCallback } from 'react';
-import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G, TransformObject } from 'react-native-svg';
-import { shimmerName, ShimmerProps, ShimmerType } from './Shimmer.types';
-import { compose, mergeProps, withSlots, UseSlots, buildUseStyling } from '@fluentui-react-native/framework';
+import type { TransformObject } from 'react-native-svg';
+import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg';
+import type { ShimmerProps, ShimmerType } from './Shimmer.types';
+import { shimmerName } from './Shimmer.types';
+import type { UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps, withSlots, buildUseStyling } from '@fluentui-react-native/framework';
 import { Animated, I18nManager } from 'react-native';
 import { stylingSettings } from './Shimmer.styling';
 import assertNever from 'assert-never';

package/src/Shimmer.types.shared.ts

@@ -0,0 +1,170 @@
+import type { SvgProps } from 'react-native-svg';
+import type { ColorValue, ViewProps } from 'react-native';
+import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens';
+
+export const shimmerName = 'Shimmer';
+
+/**
+ * Properties necessary to define a circular Shimmer element.
+ */
+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;
+
+export interface ShimmerTokens extends IBackgroundColorTokens {
+  /**
+   * 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;
+}
+
+export interface ShimmerSlotProps {
+  root: SvgProps;
+}
+
+export interface ShimmerProps extends ViewProps, ShimmerTokens {
+  /**
+   * Shimmer shapes that define the masking effect of the Shimmer control.
+   */
+  elements: Array<ShimmerElementTypes>;
+}
+
+export interface ShimmerType {
+  props: ShimmerProps;
+  slotProps: ShimmerSlotProps;
+  tokens: ShimmerTokens;
+}

package/src/Shimmer.types.ts

@@ -1,170 +1,10 @@
-import { SvgProps } from 'react-native-svg';
-import { ColorValue, ViewProps } from 'react-native';
-import { IBackgroundColorTokens } from '@fluentui-react-native/tokens';
-
-export const shimmerName = 'Shimmer';
-
-/**
- * Properties necessary to define a circular Shimmer element.
- */
-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;
-
-export interface ShimmerTokens extends IBackgroundColorTokens {
-  /**
-   * 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;
-}
-
-export interface ShimmerSlotProps {
-  root: SvgProps;
-}
-
-export interface ShimmerProps extends ViewProps, ShimmerTokens {
-  /**
-   * Shimmer shapes that define the masking effect of the Shimmer control.
-   */
-  elements: Array<ShimmerElementTypes>;
-}
-
-export interface ShimmerType {
-  props: ShimmerProps;
-  slotProps: ShimmerSlotProps;
-  tokens: ShimmerTokens;
-}
+export {
+  shimmerName,
+  ShimmerCircleElement,
+  ShimmerRectElement,
+  ShimmerElementTypes,
+  ShimmerTokens,
+  ShimmerSlotProps,
+  ShimmerProps,
+  ShimmerType,
+} from './Shimmer.types.shared';

package/src/Shimmer.types.win32.ts

@@ -1,5 +1,7 @@
-import { ViewProps } from 'react-native';
-import { ShimmerProps, ShimmerTokens } from './Shimmer.types';
+import type { ViewProps } from 'react-native';
+import type { ShimmerProps, ShimmerTokens } from './Shimmer.types.shared';
+export { ShimmerProps, ShimmerTokens };
+export { shimmerName, ShimmerRectElement, ShimmerElementTypes, ShimmerCircleElement } from './Shimmer.types.shared';
 
 export interface ClippingMaskProps extends ShimmerTokens {
   /**

package/src/Shimmer.win32.tsx

@@ -1,10 +1,14 @@
 /** @jsx withSlots */
-import { compose, mergeProps, UseSlots } from '@fluentui-react-native/framework';
+import type { UseSlots } from '@fluentui-react-native/framework';
+import { compose, mergeProps } from '@fluentui-react-native/framework';
 import { View } from 'react-native';
-import { ClipPath, Defs, LinearGradient, Path, Rect, Stop, Svg, SvgProps } from 'react-native-svg';
+import type { SvgProps } from 'react-native-svg';
+import { ClipPath, Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg';
 import { stylingSettings } from './Shimmer.styling.win32';
-import { ShimmerElementTypes, shimmerName, ShimmerProps } from './Shimmer.types';
-import { ClippingMaskProps, ShimmerType, ShimmerWaveProps } from './Shimmer.types.win32';
+import type { ShimmerElementTypes, ShimmerProps, ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types.shared';
+export { ShimmerCircleElement, ShimmerRectElement };
+import { shimmerName } from './Shimmer.types.shared';
+import type { ClippingMaskProps, ShimmerType, ShimmerWaveProps } from './Shimmer.types.win32';
 import { RCTNativeAnimatedShimmer } from './consts.win32';
 import { convertRectToSvgPath, convertCircleToSvgPath } from './SvgShapeToPath';
 import { withSlots } from '@fluentui-react-native/framework';

package/src/ShimmerTokens.android.ts

@@ -1,6 +1,6 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { ShimmerTokens } from './Shimmer.types';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
+import type { Theme } from '@fluentui-react-native/framework';
+import type { ShimmerTokens } from './Shimmer.types';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>
   ({

package/src/ShimmerTokens.ts

@@ -1,6 +1,6 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { ShimmerTokens } from './Shimmer.types';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
+import type { Theme } from '@fluentui-react-native/framework';
+import type { ShimmerTokens } from './Shimmer.types';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 
 export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>

package/src/ShimmerTokens.win32.ts

@@ -1,6 +1,6 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { ShimmerTokens } from './Shimmer.types';
-import { TokenSettings } from '@fluentui-react-native/use-styling';
+import type { Theme } from '@fluentui-react-native/framework';
+import type { ShimmerTokens } from './Shimmer.types';
+import type { TokenSettings } from '@fluentui-react-native/use-styling';
 
 export const defaultShimmerTokens: TokenSettings<ShimmerTokens, Theme> = (theme: Theme) =>
   ({

package/src/SvgShapeToPath.ts

@@ -13,7 +13,7 @@
  * as we only support rounded rects and circles, with a circle being a rounded rect of borderRadius=length/2=width/2.
  */
 
-import { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
+import type { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types';
 
 // Note for explicit clarity: length and width represent the full length and width of the rect, and not
 // the straight edge segments (i.e. length - 2*borderRadius).

package/src/index.ts

@@ -1,2 +1,11 @@
-export * from './Shimmer';
-export * from './Shimmer.types';
+export { Shimmer } from './Shimmer';
+export { shimmerName } from './Shimmer.types';
+export type {
+  ShimmerCircleElement,
+  ShimmerElementTypes,
+  ShimmerProps,
+  ShimmerRectElement,
+  ShimmerSlotProps,
+  ShimmerTokens,
+  ShimmerType,
+} from './Shimmer.types';