@fluentui-react-native/experimental-shadow 0.2.4 → 0.2.7

package/CHANGELOG.json

@@ -2,7 +2,70 @@
   "name": "@fluentui-react-native/experimental-shadow",
   "entries": [
     {
-      "date": "Thu, 14 Jul 2022 16:12:53 GMT",
+      "date": "Fri, 15 Jul 2022 01:22:26 GMT",
+      "tag": "@fluentui-react-native/experimental-shadow_v0.2.7",
+      "version": "0.2.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "78454019+lyzhan7@users.noreply.github.com",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141",
+            "comment": "Replace shadowDepth with shadowToken"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "comment": "Bump @fluentui-react-native/theme-types to v0.18.0",
+            "commit": "b3e63050f4b326ea7326a7d8e5c956537e9f5141"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 15 Jul 2022 00:29:27 GMT",
+      "tag": "@fluentui-react-native/experimental-shadow_v0.2.6",
+      "version": "0.2.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "ruaraki@microsoft.com",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "commit": "32c99c628be487a61c9ad2f792accc4360e1cfe7",
+            "comment": "Fix some versions"
+          },
+          {
+            "author": "78454019+lyzhan7@users.noreply.github.com",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "commit": "368fee7d4df7596cab2638938835f7ded84bc6c9",
+            "comment": "Add shadow to iOS FAB"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 18:09:51 GMT",
+      "tag": "@fluentui-react-native/experimental-shadow_v0.2.5",
+      "version": "0.2.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "duomaster01@gmail.com",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "commit": "155145b496a51b06bba73f8f9c6b89dc7b348c4b",
+            "comment": "updated to rn 0.66"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/experimental-shadow",
+            "comment": "Bump @fluentui-react-native/framework to v0.8.0",
+            "commit": "155145b496a51b06bba73f8f9c6b89dc7b348c4b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 16:13:45 GMT",
       "tag": "@fluentui-react-native/experimental-shadow_v0.2.4",
       "version": "0.2.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @fluentui-react-native/experimental-shadow
 
-This log was last generated on Thu, 14 Jul 2022 16:12:53 GMT and should not be manually modified.
+This log was last generated on Fri, 15 Jul 2022 01:22:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.2.7
+
+Fri, 15 Jul 2022 01:22:26 GMT
+
+### Patches
+
+- Replace shadowDepth with shadowToken (78454019+lyzhan7@users.noreply.github.com)
+- Bump @fluentui-react-native/theme-types to v0.18.0
+
+## 0.2.6
+
+Fri, 15 Jul 2022 00:29:27 GMT
+
+### Patches
+
+- Fix some versions (ruaraki@microsoft.com)
+- Add shadow to iOS FAB (78454019+lyzhan7@users.noreply.github.com)
+
+## 0.2.5
+
+Thu, 14 Jul 2022 18:09:51 GMT
+
+### Patches
+
+- updated to rn 0.66 (duomaster01@gmail.com)
+- Bump @fluentui-react-native/framework to v0.8.0
+
 ## 0.2.4
 
-Thu, 14 Jul 2022 16:12:53 GMT
+Thu, 14 Jul 2022 16:13:45 GMT
 
 ### Patches
 

package/lib/Shadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAajB,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAWjB,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/lib/Shadow.js

@@ -12,16 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import { View } from 'react-native';
 import { shadowName } from './Shadow.types';
-import { useFluentTheme, mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
 import { getShadowTokenStyleSet } from './shadowStyle';
 export var Shadow = stagedComponent(function (props) {
-    var theme = useFluentTheme();
-    return function (final) {
-        var children = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            children[_i - 1] = arguments[_i];
-        }
-        var shadowTokenStyleSet = getShadowTokenStyleSet(theme, props.depth);
+    return function (final, children) {
+        var shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
         var mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
         return (React.createElement(View, { style: shadowTokenStyleSet.ambient },
             React.createElement(View, __assign({}, mergedProps), children)));

package/lib/Shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/F,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB;QAAE,kBAA8B;aAA9B,UAA8B,EAA9B,qBAA8B,EAA9B,IAA8B;YAA9B,iCAA8B;;QACxD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,IAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAe,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,CAAC,IAAM,MAAM,GAAG,eAAe,CAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,IAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC;AAEhC,eAAe,MAAM,CAAC"}

package/lib/Shadow.types.d.ts

@@ -1,7 +1,7 @@
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 import { ViewProps } from 'react-native';
 export declare const shadowName = "Shadow";
-export declare type ShadowDepth = 'shadow2' | 'shadow4' | 'shadow8' | 'shadow16' | 'shadow28' | 'shadow64' | 'shadow2brand' | 'shadow4brand' | 'shadow8brand' | 'shadow16brand' | 'shadow28brand' | 'shadow64brand';
 export interface ShadowProps extends ViewProps {
-    depth?: ShadowDepth;
+    shadowToken?: ShadowToken;
 }
 //# sourceMappingURL=Shadow.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shadow.types.d.ts","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,oBAAY,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,UAAU,GACV,cAAc,GACd,cAAc,GACd,cAAc,GACd,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB"}
+{"version":3,"file":"Shadow.types.d.ts","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B"}

package/lib/Shadow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,IAAM,UAAU,GAAG,QAAQ,CAAC"}

package/lib/__tests__/Shadow.test.js

@@ -1,104 +1,68 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import { Shadow } from '../Shadow';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+var TestShadow = function (props) {
+    var theme = useFluentTheme();
+    return (React.createElement(Shadow, { shadowToken: theme.shadows[props.depth] },
+        React.createElement(Text, null, props.displayText)));
+};
 describe('Shadow component tests', function () {
     it('Shadow (depth=2)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow2" },
-            React.createElement(Text, null, "Shadow (depth=2) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=4)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow4" },
-            React.createElement(Text, null, "Shadow (depth=4)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=4)", depth: "shadow4" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=8)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow8" },
-            React.createElement(Text, null, "Shadow (depth=8) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=8)", depth: "shadow8" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=16)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow16" },
-            React.createElement(Text, null, "Shadow (depth=16)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=16)", depth: "shadow16" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=28)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow28" },
-            React.createElement(Text, null, "Shadow (depth=28) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=28)", depth: "shadow28" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=64)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow64" },
-            React.createElement(Text, null, "Shadow (depth=64)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=64)", depth: "shadow64" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=2)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow2brand" },
-            React.createElement(Text, null, "Brand shadow (depth=2)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=2)", depth: "shadow2brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=4)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow4brand" },
-            React.createElement(Text, null, "Brand shadow (depth=4)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=4)", depth: "shadow4brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=8)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow8brand" },
-            React.createElement(Text, null, "Brand shadow (depth=8)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=8)", depth: "shadow8brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=16)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow16brand" },
-            React.createElement(Text, null, "Brand shadow (depth=16)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=16)", depth: "shadow16brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=28)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow28brand" },
-            React.createElement(Text, null, "Brand shadow (depth=28)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=28)", depth: "shadow28brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=64)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow, { depth: "shadow64brand" },
-            React.createElement(Text, null, "Brand shadow (depth=64)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow simple rendering does not invalidate styling', function () {
-        checkRenderConsistency(function () { return (React.createElement(Shadow, { depth: "shadow2" },
-            React.createElement(Text, null, "Shadow render test"))); }, 2);
-    });
-    it('Shadow simple rendering does not invalidate styling', function () {
-        checkRenderConsistency(function () { return (React.createElement(Shadow, { depth: "shadow2" },
-            React.createElement(Text, null, "Shadow render test"))); }, 2);
+        checkRenderConsistency(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
     });
     it('Shadow re-renders correctly', function () {
-        checkReRender(function () { return (React.createElement(Shadow, { depth: "shadow2" },
-            React.createElement(Text, null, "Shadow render twice test"))); }, 2);
+        checkReRender(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
     });
 });
 //# sourceMappingURL=Shadow.test.js.map

package/lib/__tests__/Shadow.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -1,4 +1,4 @@
 export { Shadow } from './Shadow';
-export { ShadowDepth, ShadowProps } from './Shadow.types';
+export { ShadowProps } from './Shadow.types';
 export { getShadowTokenStyleSet } from './shadowStyle';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

package/lib/shadowStyle.d.ts

@@ -1,7 +1,6 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { ShadowDepth } from './Shadow.types';
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 export declare const getShadowTokenStyleSet: typeof getShadowTokenStyleSetWorker;
-declare function getShadowTokenStyleSetWorker(t: Theme, depth: ShadowDepth): {
+declare function getShadowTokenStyleSetWorker(shadowToken: ShadowToken): {
     key: {
         shadowColor: string;
         shadowOpacity: number;

package/lib/shadowStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwBjE"}
+{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+B7D"}

package/lib/shadowStyle.js

@@ -1,8 +1,14 @@
 import { memoize } from '@fluentui-react-native/framework';
 export var getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
-function getShadowTokenStyleSetWorker(t, depth) {
-    var keyShadow = t.shadows[depth.toString()].key;
-    var ambientShadow = t.shadows[depth.toString()].ambient;
+function getShadowTokenStyleSetWorker(shadowToken) {
+    if (!shadowToken) {
+        return {
+            key: emptyShadowStyle,
+            ambient: emptyShadowStyle,
+        };
+    }
+    var keyShadow = shadowToken.key;
+    var ambientShadow = shadowToken.ambient;
     return {
         key: {
             shadowColor: shadowColorFromRGBAColor(keyShadow.color),
@@ -33,4 +39,13 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
     // Round to two decimal places
     return Math.round(opacityAsDecimal * 100) / 100;
 };
+var emptyShadowStyle = {
+    shadowColor: '000000',
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowOffset: {
+        width: 0,
+        height: 0,
+    },
+};
 //# sourceMappingURL=shadowStyle.js.map

package/lib/shadowStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAIlE,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
+{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAI3D,MAAM,CAAC,IAAM,sBAAsB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAajB,CAAC;AAIH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Shadow.d.ts","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,gBAAgB,CAAC;AAIzD,eAAO,MAAM,MAAM,4EAWjB,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/lib-commonjs/Shadow.js

@@ -37,13 +37,8 @@ var Shadow_types_1 = require("./Shadow.types");
 var framework_1 = require("@fluentui-react-native/framework");
 var shadowStyle_1 = require("./shadowStyle");
 exports.Shadow = (0, framework_1.stagedComponent)(function (props) {
-    var theme = (0, framework_1.useFluentTheme)();
-    return function (final) {
-        var children = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            children[_i - 1] = arguments[_i];
-        }
-        var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(theme, props.depth);
+    return function (final, children) {
+        var shadowTokenStyleSet = (0, shadowStyle_1.getShadowTokenStyleSet)(props.shadowToken);
         var mergedProps = (0, framework_1.mergeProps)(final, { style: shadowTokenStyleSet.key });
         return (React.createElement(react_native_1.View, { style: shadowTokenStyleSet.ambient },
             React.createElement(react_native_1.View, __assign({}, mergedProps), children)));

package/lib-commonjs/Shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+F;AAC/F,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAE/B,OAAO,UAAC,KAAkB;QAAE,kBAA8B;aAA9B,UAA8B,EAA9B,qBAA8B,EAA9B,IAA8B;YAA9B,iCAA8B;;QACxD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,mBAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}
+{"version":3,"file":"Shadow.js","sourceRoot":"","sources":["../src/Shadow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,6CAAoC;AACpC,+CAAyD;AACzD,8DAA+E;AAC/E,6CAAuD;AAE1C,QAAA,MAAM,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAkB;IACvD,OAAO,UAAC,KAAkB,EAAE,QAAyB;QACnD,IAAM,mBAAmB,GAAG,IAAA,oCAAsB,EAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtE,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC;QAE1E,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,mBAAmB,CAAC,OAAO;YACtC,oBAAC,mBAAI,eAAK,WAAW,GAAG,QAAQ,CAAQ,CACnC,CACR,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,yBAAU,CAAC;AAEhC,kBAAe,cAAM,CAAC"}

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

@@ -1,7 +1,7 @@
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 import { ViewProps } from 'react-native';
 export declare const shadowName = "Shadow";
-export declare type ShadowDepth = 'shadow2' | 'shadow4' | 'shadow8' | 'shadow16' | 'shadow28' | 'shadow64' | 'shadow2brand' | 'shadow4brand' | 'shadow8brand' | 'shadow16brand' | 'shadow28brand' | 'shadow64brand';
 export interface ShadowProps extends ViewProps {
-    depth?: ShadowDepth;
+    shadowToken?: ShadowToken;
 }
 //# sourceMappingURL=Shadow.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Shadow.types.d.ts","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,oBAAY,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,UAAU,GACV,cAAc,GACd,cAAc,GACd,cAAc,GACd,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AAEpB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB"}
+{"version":3,"file":"Shadow.types.d.ts","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,WAAW,CAAC;AAEnC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B"}

package/lib-commonjs/Shadow.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":";;;AAEa,QAAA,UAAU,GAAG,QAAQ,CAAC"}
+{"version":3,"file":"Shadow.types.js","sourceRoot":"","sources":["../src/Shadow.types.ts"],"names":[],"mappings":";;;AAGa,QAAA,UAAU,GAAG,QAAQ,CAAC"}

package/lib-commonjs/__tests__/Shadow.test.js

@@ -22,104 +22,68 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var react_native_1 = require("react-native");
 var Shadow_1 = require("../Shadow");
+var framework_1 = require("@fluentui-react-native/framework");
 var renderer = __importStar(require("react-test-renderer"));
 var test_tools_1 = require("@fluentui-react-native/test-tools");
+var TestShadow = function (props) {
+    var theme = (0, framework_1.useFluentTheme)();
+    return (React.createElement(Shadow_1.Shadow, { shadowToken: theme.shadows[props.depth] },
+        React.createElement(react_native_1.Text, null, props.displayText)));
+};
 describe('Shadow component tests', function () {
     it('Shadow (depth=2)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=2) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=2)", depth: "shadow2" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=4)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow4" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=4)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=4)", depth: "shadow4" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=8)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow8" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=8) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=8)", depth: "shadow8" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=16)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow16" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=16)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=16)", depth: "shadow16" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=28)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow28" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=28) ")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=28)", depth: "shadow28" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow (depth=64)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow64" },
-            React.createElement(react_native_1.Text, null, "Shadow (depth=64)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Shadow (depth=64)", depth: "shadow64" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=2)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow2brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=2)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=2)", depth: "shadow2brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=4)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow4brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=4)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=4)", depth: "shadow4brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=8)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow8brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=8)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=8)", depth: "shadow8brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=16)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow16brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=16)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=16)", depth: "shadow16brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=28)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow28brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=28)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=28)", depth: "shadow28brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Brand shadow (depth=64)', function () {
-        var tree = renderer
-            .create(React.createElement(Shadow_1.Shadow, { depth: "shadow64brand" },
-            React.createElement(react_native_1.Text, null, "Brand shadow (depth=64)")))
-            .toJSON();
+        var tree = renderer.create(React.createElement(TestShadow, { displayText: "Brand shadow (depth=64)", depth: "shadow64brand" })).toJSON();
         expect(tree).toMatchSnapshot();
     });
     it('Shadow simple rendering does not invalidate styling', function () {
-        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
-            React.createElement(react_native_1.Text, null, "Shadow render test"))); }, 2);
-    });
-    it('Shadow simple rendering does not invalidate styling', function () {
-        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
-            React.createElement(react_native_1.Text, null, "Shadow render test"))); }, 2);
+        (0, test_tools_1.checkRenderConsistency)(function () { return React.createElement(TestShadow, { displayText: "Shadow render test", depth: "shadow2" }); }, 2);
     });
     it('Shadow re-renders correctly', function () {
-        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Shadow_1.Shadow, { depth: "shadow2" },
-            React.createElement(react_native_1.Text, null, "Shadow render twice test"))); }, 2);
+        (0, test_tools_1.checkReRender)(function () { return React.createElement(TestShadow, { displayText: "Shadow render twice test", depth: "shadow2" }); }, 2);
     });
 });
 //# sourceMappingURL=Shadow.test.js.map

package/lib-commonjs/__tests__/Shadow.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Shadow.test.js","sourceRoot":"","sources":["../../src/__tests__/Shadow.test.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/index.d.ts

@@ -1,4 +1,4 @@
 export { Shadow } from './Shadow';
-export { ShadowDepth, ShadowProps } from './Shadow.types';
+export { ShadowProps } from './Shadow.types';
 export { getShadowTokenStyleSet } from './shadowStyle';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC"}

package/lib-commonjs/shadowStyle.d.ts

@@ -1,7 +1,6 @@
-import { Theme } from '@fluentui-react-native/framework';
-import { ShadowDepth } from './Shadow.types';
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 export declare const getShadowTokenStyleSet: typeof getShadowTokenStyleSetWorker;
-declare function getShadowTokenStyleSetWorker(t: Theme, depth: ShadowDepth): {
+declare function getShadowTokenStyleSetWorker(shadowToken: ShadowToken): {
     key: {
         shadowColor: string;
         shadowOpacity: number;

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

@@ -1 +1 @@
-{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAW,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EAwBjE"}
+{"version":3,"file":"shadowStyle.d.ts","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAGjE,eAAO,MAAM,sBAAsB,qCAAwC,CAAC;AAE5E,iBAAS,4BAA4B,CAAC,WAAW,EAAE,WAAW;;;;;;;;;;;;;;;;;;;EA+B7D"}

package/lib-commonjs/shadowStyle.js

@@ -3,9 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getShadowTokenStyleSet = void 0;
 var framework_1 = require("@fluentui-react-native/framework");
 exports.getShadowTokenStyleSet = (0, framework_1.memoize)(getShadowTokenStyleSetWorker);
-function getShadowTokenStyleSetWorker(t, depth) {
-    var keyShadow = t.shadows[depth.toString()].key;
-    var ambientShadow = t.shadows[depth.toString()].ambient;
+function getShadowTokenStyleSetWorker(shadowToken) {
+    if (!shadowToken) {
+        return {
+            key: emptyShadowStyle,
+            ambient: emptyShadowStyle,
+        };
+    }
+    var keyShadow = shadowToken.key;
+    var ambientShadow = shadowToken.ambient;
     return {
         key: {
             shadowColor: shadowColorFromRGBAColor(keyShadow.color),
@@ -36,4 +42,13 @@ var shadowOpacityFromRGBAColor = function (rgbaColor) {
     // Round to two decimal places
     return Math.round(opacityAsDecimal * 100) / 100;
 };
+var emptyShadowStyle = {
+    shadowColor: '000000',
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    shadowOffset: {
+        width: 0,
+        height: 0,
+    },
+};
 //# sourceMappingURL=shadowStyle.js.map

package/lib-commonjs/shadowStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAAkE;AAIrD,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,CAAQ,EAAE,KAAkB;IAChE,IAAM,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC;IAClD,IAAM,aAAa,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC;IAE1D,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC"}
+{"version":3,"file":"shadowStyle.js","sourceRoot":"","sources":["../src/shadowStyle.ts"],"names":[],"mappings":";;;AAAA,8DAA2D;AAI9C,QAAA,sBAAsB,GAAG,IAAA,mBAAO,EAAC,4BAA4B,CAAC,CAAC;AAE5E,SAAS,4BAA4B,CAAC,WAAwB;IAC5D,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO;YACL,GAAG,EAAE,gBAAgB;YACrB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;KACH;IAED,IAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC;IAClC,IAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC;IAE1C,OAAO;QACL,GAAG,EAAE;YACH,WAAW,EAAE,wBAAwB,CAAC,SAAS,CAAC,KAAK,CAAC;YACtD,aAAa,EAAE,0BAA0B,CAAC,SAAS,CAAC,KAAK,CAAC;YAC1D,YAAY,EAAE,SAAS,CAAC,IAAI;YAC5B,YAAY,EAAE;gBACZ,KAAK,EAAE,SAAS,CAAC,CAAC;gBAClB,MAAM,EAAE,SAAS,CAAC,CAAC;aACpB;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB,CAAC,aAAa,CAAC,KAAK,CAAC;YAC1D,aAAa,EAAE,0BAA0B,CAAC,aAAa,CAAC,KAAK,CAAC;YAC9D,YAAY,EAAE,aAAa,CAAC,IAAI;YAChC,YAAY,EAAE;gBACZ,KAAK,EAAE,aAAa,CAAC,CAAC;gBACtB,MAAM,EAAE,aAAa,CAAC,CAAC;aACxB;SACF;KACF,CAAC;AACJ,CAAC;AAED,IAAM,wBAAwB,GAAG,UAAC,SAAqB;IACrD,OAAO,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,0BAA0B,GAAG,UAAC,SAAqB;IACvD,IAAM,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAM,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;IAEtD,8BAA8B;IAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AAClD,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG;IACvB,WAAW,EAAE,QAAQ;IACrB,aAAa,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC;IACf,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/experimental-shadow",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "A cross-platform Shadow component using the Fluent Design System",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,18 +22,19 @@
     "directory": "packages/experimental/Shadow"
   },
   "dependencies": {
-    "@fluentui-react-native/framework": "0.7.32"
+    "@fluentui-react-native/framework": "0.8.0",
+    "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0"
   },
   "devDependencies": {
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
     "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
     "@fluentui-react-native/scripts": "^0.1.1",
-    "react": ">=17.0.1",
-    "react-native": ">=0.64.3"
+    "react": ">=17.0.2",
+    "react-native": "^0.66.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.1",
-    "react-native": ">=0.64.3"
+    "react": ">=17.0.2",
+    "react-native": ">=0.66.0"
   },
   "author": "",
   "license": "MIT"

package/src/Shadow.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { ShadowProps, shadowName } from './Shadow.types';
-import { useFluentTheme, mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
 import { getShadowTokenStyleSet } from './shadowStyle';
 
 export const Shadow = stagedComponent((props: ShadowProps) => {
-  const theme = useFluentTheme();
-
-  return (final: ShadowProps, ...children: React.ReactNode[]) => {
-    const shadowTokenStyleSet = getShadowTokenStyleSet(theme, props.depth);
+  return (final: ShadowProps, children: React.ReactNode) => {
+    const shadowTokenStyleSet = getShadowTokenStyleSet(props.shadowToken);
     const mergedProps = mergeProps(final, { style: shadowTokenStyleSet.key });
 
     return (

package/src/Shadow.types.ts

@@ -1,21 +1,8 @@
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 import { ViewProps } from 'react-native';
 
 export const shadowName = 'Shadow';
 
-export type ShadowDepth =
-  | 'shadow2'
-  | 'shadow4'
-  | 'shadow8'
-  | 'shadow16'
-  | 'shadow28'
-  | 'shadow64'
-  | 'shadow2brand'
-  | 'shadow4brand'
-  | 'shadow8brand'
-  | 'shadow16brand'
-  | 'shadow28brand'
-  | 'shadow64brand';
-
 export interface ShadowProps extends ViewProps {
-  depth?: ShadowDepth;
+  shadowToken?: ShadowToken;
 }

package/src/__tests__/Shadow.test.tsx

@@ -1,172 +1,90 @@
 import * as React from 'react';
 import { Text } from 'react-native';
 import { Shadow } from '../Shadow';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 
+interface ShadowTestProps {
+  displayText: string;
+  depth: string;
+}
+
+const TestShadow: React.FunctionComponent<ShadowTestProps> = (props: ShadowTestProps) => {
+  const theme = useFluentTheme();
+  return (
+    <Shadow shadowToken={theme.shadows[props.depth]}>
+      <Text>{props.displayText}</Text>
+    </Shadow>
+  );
+};
+
 describe('Shadow component tests', () => {
   it('Shadow (depth=2)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow2">
-          <Text>Shadow (depth=2) </Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=2)" depth="shadow2" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow (depth=4)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow4">
-          <Text>Shadow (depth=4)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=4)" depth="shadow4" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow (depth=8)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow8">
-          <Text>Shadow (depth=8) </Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=8)" depth="shadow8" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow (depth=16)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow16">
-          <Text>Shadow (depth=16)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=16)" depth="shadow16" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow (depth=28)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow28">
-          <Text>Shadow (depth=28) </Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=28)" depth="shadow28" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow (depth=64)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow64">
-          <Text>Shadow (depth=64)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Shadow (depth=64)" depth="shadow64" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=2)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow2brand">
-          <Text>Brand shadow (depth=2)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=2)" depth="shadow2brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=4)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow4brand">
-          <Text>Brand shadow (depth=4)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=4)" depth="shadow4brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=8)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow8brand">
-          <Text>Brand shadow (depth=8)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=8)" depth="shadow8brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=16)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow16brand">
-          <Text>Brand shadow (depth=16)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=16)" depth="shadow16brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=28)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow28brand">
-          <Text>Brand shadow (depth=28)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=28)" depth="shadow28brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Brand shadow (depth=64)', () => {
-    const tree = renderer
-      .create(
-        <Shadow depth="shadow64brand">
-          <Text>Brand shadow (depth=64)</Text>
-        </Shadow>,
-      )
-      .toJSON();
+    const tree = renderer.create(<TestShadow displayText="Brand shadow (depth=64)" depth="shadow64brand" />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Shadow simple rendering does not invalidate styling', () => {
-    checkRenderConsistency(
-      () => (
-        <Shadow depth="shadow2">
-          <Text>Shadow render test</Text>
-        </Shadow>
-      ),
-      2,
-    );
-  });
-
-  it('Shadow simple rendering does not invalidate styling', () => {
-    checkRenderConsistency(
-      () => (
-        <Shadow depth="shadow2">
-          <Text>Shadow render test</Text>
-        </Shadow>
-      ),
-      2,
-    );
+    checkRenderConsistency(() => <TestShadow displayText="Shadow render test" depth="shadow2" />, 2);
   });
 
   it('Shadow re-renders correctly', () => {
-    checkReRender(
-      () => (
-        <Shadow depth="shadow2">
-          <Text>Shadow render twice test</Text>
-        </Shadow>
-      ),
-      2,
-    );
+    checkReRender(() => <TestShadow displayText="Shadow render twice test" depth="shadow2" />, 2);
   });
 });

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

@@ -232,7 +232,7 @@ exports[`Shadow component tests Shadow (depth=2) 1`] = `
     }
   >
     <Text>
-      Shadow (depth=2) 
+      Shadow (depth=2)
     </Text>
   </View>
 </View>
@@ -300,7 +300,7 @@ exports[`Shadow component tests Shadow (depth=8) 1`] = `
     }
   >
     <Text>
-      Shadow (depth=8) 
+      Shadow (depth=8)
     </Text>
   </View>
 </View>
@@ -368,7 +368,7 @@ exports[`Shadow component tests Shadow (depth=28) 1`] = `
     }
   >
     <Text>
-      Shadow (depth=28) 
+      Shadow (depth=28)
     </Text>
   </View>
 </View>

package/src/index.ts

@@ -1,3 +1,3 @@
 export { Shadow } from './Shadow';
-export { ShadowDepth, ShadowProps } from './Shadow.types';
+export { ShadowProps } from './Shadow.types';
 export { getShadowTokenStyleSet } from './shadowStyle';

package/src/shadowStyle.ts

@@ -1,12 +1,19 @@
-import { Theme, memoize } from '@fluentui-react-native/framework';
+import { memoize } from '@fluentui-react-native/framework';
+import { ShadowToken } from '@fluentui-react-native/theme-types';
 import { ColorValue } from 'react-native';
-import { ShadowDepth } from './Shadow.types';
 
 export const getShadowTokenStyleSet = memoize(getShadowTokenStyleSetWorker);
 
-function getShadowTokenStyleSetWorker(t: Theme, depth: ShadowDepth) {
-  const keyShadow = t.shadows[depth.toString()].key;
-  const ambientShadow = t.shadows[depth.toString()].ambient;
+function getShadowTokenStyleSetWorker(shadowToken: ShadowToken) {
+  if (!shadowToken) {
+    return {
+      key: emptyShadowStyle,
+      ambient: emptyShadowStyle,
+    };
+  }
+
+  const keyShadow = shadowToken.key;
+  const ambientShadow = shadowToken.ambient;
 
   return {
     key: {
@@ -41,3 +48,13 @@ const shadowOpacityFromRGBAColor = (rgbaColor: ColorValue) => {
   // Round to two decimal places
   return Math.round(opacityAsDecimal * 100) / 100;
 };
+
+const emptyShadowStyle = {
+  shadowColor: '000000',
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  shadowOffset: {
+    width: 0,
+    height: 0,
+  },
+};