@fluentui-react-native/composition 0.6.9

package/CHANGELOG.md

@@ -0,0 +1,173 @@
+# Change Log - @fluentui-react-native/composition
+
+This log was last generated on Tue, 28 Sep 2021 21:06:18 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 0.6.9
+
+Tue, 28 Sep 2021 21:06:18 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/use-styling to v0.6.8 (67026167+chiuam@users.noreply.github.com)
+
+## 0.6.8
+
+Sat, 07 Aug 2021 00:40:04 GMT
+
+### Patches
+
+- enable usePressableState with stock Pressable component (jasonmo@microsoft.com)
+
+## 0.6.7
+
+Wed, 04 Aug 2021 16:54:20 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/use-styling to v0.6.6 (jasonmo@microsoft.com)
+
+## 0.6.6
+
+Wed, 04 Aug 2021 06:26:25 GMT
+
+### Patches
+
+- radio group on macOS (67026167+chiuam@users.noreply.github.com)
+
+## 0.6.5
+
+Tue, 03 Aug 2021 22:33:17 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/use-styling to v0.6.4 (jasonmo@microsoft.com)
+
+## 0.6.4
+
+Tue, 27 Jul 2021 22:17:20 GMT
+
+### Patches
+
+- add compressible utility and a snapshot test / demo to framework (jasonmo@microsoft.com)
+
+## 0.6.3
+
+Mon, 26 Jul 2021 20:41:04 GMT
+
+### Patches
+
+- add new use-slot package, move framework to consume that package (jasonmo@microsoft.com)
+
+## 0.6.2
+
+Wed, 21 Jul 2021 22:55:40 GMT
+
+### Patches
+
+- expose use-tokens in framework package (jasonmo@microsoft.com)
+
+## 0.6.1
+
+Fri, 18 Jun 2021 00:38:19 GMT
+
+### Patches
+
+- Apply prettier to framework, run (ruaraki@microsoft.com)
+
+## 0.6.0
+
+Tue, 15 Jun 2021 00:55:36 GMT
+
+### Minor changes
+
+- Add support for ColorValue (ruaraki@microsoft.com)
+
+## 0.5.0
+
+Sat, 06 Mar 2021 00:20:05 GMT
+
+### Minor changes
+
+- Update to react-native 0.63 (30809111+acoates-ms@users.noreply.github.com)
+
+## 0.4.1
+
+Mon, 02 Nov 2020 19:16:23 GMT
+
+### Patches
+
+- Update type of the tokens parameter to make TSC happy. (kinhln@microsoft.com)
+
+## 0.4.0
+
+Fri, 23 Oct 2020 22:27:37 GMT
+
+### Minor changes
+
+- RNIcon feature (warleu@microsoft.com)
+
+## 0.3.8
+
+Fri, 25 Sep 2020 19:21:43 GMT
+
+### Patches
+
+- Update react-native-win32 versions - enable logbox (acoates-ms@noreply.github.com)
+
+## 0.3.7
+
+Wed, 23 Sep 2020 18:31:48 GMT
+
+### Patches
+
+- start publishing src to fix customer source maps (jasonmo@microsoft.com)
+
+## 0.3.4
+
+Mon, 17 Aug 2020 22:08:34 GMT
+
+### Patches
+
+- fix dependency errors (jasonmo@microsoft.com)
+
+## 0.3.3
+
+Thu, 13 Aug 2020 04:48:19 GMT
+
+### Patches
+
+- release @fluentui-react-native/memo-cache (jasonmo@microsoft.com)
+
+## 0.3.2
+
+Wed, 12 Aug 2020 23:52:15 GMT
+
+### Patches
+
+- release @fluentui-react-native/immutable-merge (jasonmo@microsoft.com)
+
+## 0.3.0
+
+Sat, 01 Aug 2020 00:34:34 GMT
+
+### Minor changes
+
+- specify types for tests (krsiler@microsoft.com)
+
+## 0.2.1
+
+Wed, 29 Jul 2020 22:38:20 GMT
+
+### Patches
+
+- switch to using Lage for build sequencing (jasonmo@microsoft.com)
+
+## 0.2.0
+
+Tue, 28 Jul 2020 18:21:12 GMT
+
+### Minor changes
+
+- add experimental framework packages (jasonmo@microsoft.com)

package/README.md

@@ -0,0 +1 @@
+# @fluentui-react-native/use-styling

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@uifabricshared/build-native/babel.config');

package/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@uifabricshared/build-native');
+
+preset();

package/lib/composeFactory.d.ts

@@ -0,0 +1,26 @@
+import { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
+import { ComposableFunction } from '@fluentui-react-native/use-slot';
+import { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
+export declare type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
+export declare type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
+    /**
+     * Includes from UseStylingOptions:
+     *
+     */
+    displayName?: string;
+    /**
+     * staged render function that takes props and a useSlots hook as an input
+     */
+    render: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    /**
+     * optional statics to attach to the component
+     */
+    statics?: TStatics;
+};
+export declare type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
+    __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+    compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+} & TStatics;
+export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>, themeHelper: ThemeHelper<TTheme>, base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+//# sourceMappingURL=composeFactory.d.ts.map

package/lib/composeFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAmB,MAAM,oCAAoC,CAAC;AAC9H,OAAO,EAAE,kBAAkB,EAAmB,MAAM,iCAAiC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAiB,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAGxF,oBAAY,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,oBAAY,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAEzG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,oBAAY,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,EAAE,CACP,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,KACnF,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC7E,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAsCxE"}

package/lib/composeFactory.js

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { buildUseStyling } from '@fluentui-react-native/use-styling';
+import { stagedComponent } from '@fluentui-react-native/use-slot';
+import { buildUseSlots } from '@fluentui-react-native/use-slots';
+import { immutableMergeCore } from '@fluentui-react-native/immutable-merge';
+/**
+ * options get deep merged except the tokens array gets appended
+ */
+var mergeOptions = {
+    tokens: 'appendArray',
+    object: true,
+};
+export function composeFactory(options, themeHelper, base) {
+    // merge options together if a base is specified
+    var baseOptions = base === null || base === void 0 ? void 0 : base.__options;
+    options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : __assign({}, options);
+    // build styling if styling options are specified
+    options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : function () { return ({}); };
+    // build the slots hook, which will use the styling hook if it has been built
+    var useSlots = buildUseSlots(options);
+    // build the staged component
+    var component = stagedComponent(function (props) { return options.render(props, useSlots); });
+    // attach additional props to the returned component
+    component.displayName = options.displayName;
+    component.__options = options;
+    component.customize = function () {
+        var tokens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tokens[_i] = arguments[_i];
+        }
+        return composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
+    };
+    component.compose = function (customOptions) {
+        return composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
+    };
+    // attach statics if specified
+    if (options.statics) {
+        Object.assign(component, options.statics);
+    }
+    return component;
+}
+//# sourceMappingURL=composeFactory.js.map

package/lib/composeFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAA2D,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC9H,OAAO,EAAsB,eAAe,EAAE,MAAM,iCAAiC,CAAC;AACtF,OAAO,EAAkB,aAAa,EAAS,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAgB,MAAM,wCAAwC,CAAC;AAoC1F;;GAEG;AACH,IAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,UAAU,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,IAAM,WAAW,GAAiB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,cAAM,OAAO,CAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,cAAM,OAAA,CAAC,EAAiB,CAAA,EAAlB,CAAkB,CAAC;IAE5H,6EAA6E;IAC7E,IAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,IAAM,SAAS,GAAG,eAAe,CAAS,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,EAA/B,CAA+B,CAAmB,CAAC;IAExG,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG;QAAC,gBAAiC;aAAjC,UAAiC,EAAjC,qBAAiC,EAAjC,IAAiC;YAAjC,2BAAiC;;QACtD,OAAA,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ;IAHD,CAGC,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,UAAC,aAAoC;QACvD,OAAA,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ;IAHD,CAGC,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/lib/composeFactory.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=composeFactory.test.d.ts.map

package/lib/composeFactory.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.test.d.ts","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":""}

package/lib/composeFactory.test.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/** @jsx withSlots */
+import { withSlots } from '@fluentui-react-native/use-slot';
+import * as renderer from 'react-test-renderer';
+import { composeFactory } from './composeFactory';
+import { View, Text } from 'react-native';
+var theme = {
+    values: {
+        backgroundColor: 'black',
+        color: 'white',
+    },
+    components: {},
+};
+var themeHelper = {
+    useTheme: function () { return theme; },
+    getComponentInfo: function (theme, name) {
+        var _a;
+        return (_a = theme === null || theme === void 0 ? void 0 : theme.components) !== null && _a !== void 0 ? _a : theme.components[name];
+    },
+};
+function mergeProps(p1, p2) {
+    return __assign(__assign({}, p1), p2);
+}
+var Base = composeFactory({
+    tokens: [
+        function (t) { return ({
+            backgroundColor: t.values.backgroundColor,
+            color: t.values.color,
+        }); },
+    ],
+    slotProps: {
+        outer: function (tokens) { return ({ style: { backgroundColor: tokens.backgroundColor } }); },
+        content: function (tokens) { return ({ style: { color: tokens.color } }); },
+    },
+    slots: {
+        outer: View,
+        content: Text,
+    },
+    render: function (props, useSlots) {
+        var Slots = useSlots(props);
+        return function (extra) { return (withSlots(Slots.outer, __assign({}, mergeProps(props, extra)),
+            withSlots(Slots.content, null, "Hello"))); };
+    },
+}, themeHelper);
+var Customized = Base.customize({ backgroundColor: 'pink' });
+var mixinStyle = {
+    width: 30,
+    height: 20,
+    borderColor: 'green',
+    borderWidth: 1,
+};
+describe('composeFactory test suite', function () {
+    it('Base component render', function () {
+        var tree = renderer.create(withSlots(Base, { style: mixinStyle })).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Base component render', function () {
+        var tree = renderer.create(withSlots(Customized, { style: mixinStyle })).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=composeFactory.test.js.map

package/lib/composeFactory.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAkB,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAa,IAAI,EAAE,IAAI,EAAyB,MAAM,cAAc,CAAC;AAa5E,IAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,IAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IACrB,gBAAgB,EAAE,UAAC,KAAY,EAAE,IAAY;;QAC3C,aAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,6BAAY,EAAE,GAAK,EAAE,EAAG;AAC1B,CAAC;AAED,IAAM,IAAI,GAAG,cAAc,CACzB;IACE,MAAM,EAAE;QACN,UAAC,CAAC,IAAK,OAAA,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC,EAHK,CAGL;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,UAAC,MAAM,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC,EAAxD,CAAwD;QAC3E,OAAO,EAAE,UAAC,MAAM,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAApC,CAAoC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;IACD,MAAM,EAAE,UAAC,KAAgB,EAAE,QAA8C;QACvE,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,UAAC,KAAgB,IAAK,OAAA,CAC3B,UAAC,KAAK,CAAC,KAAK,eAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,EAJ4B,CAI5B,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,IAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,IAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE;IACpC,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './composeFactory';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './composeFactory';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib-commonjs/composeFactory.d.ts

@@ -0,0 +1,26 @@
+import { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
+import { ComposableFunction } from '@fluentui-react-native/use-slot';
+import { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
+export declare type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
+export declare type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
+    /**
+     * Includes from UseStylingOptions:
+     *
+     */
+    displayName?: string;
+    /**
+     * staged render function that takes props and a useSlots hook as an input
+     */
+    render: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+    /**
+     * optional statics to attach to the component
+     */
+    statics?: TStatics;
+};
+export declare type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
+    __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+    compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+} & TStatics;
+export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>, themeHelper: ThemeHelper<TTheme>, base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+//# sourceMappingURL=composeFactory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAmB,MAAM,oCAAoC,CAAC;AAC9H,OAAO,EAAE,kBAAkB,EAAmB,MAAM,iCAAiC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAiB,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAGxF,oBAAY,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,oBAAY,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1H,MAAM,EACN,UAAU,EACV,OAAO,EACP,MAAM,CACP,GACC,cAAc,CAAC,UAAU,CAAC,GAAG;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAEzG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,oBAAY,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACxI,SAAS,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAChF,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE,aAAa,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,KAAK,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IACnI,OAAO,EAAE,CACP,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,KACnF,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC7E,GAAG,QAAQ,CAAC;AAUb,wBAAgB,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,SAAS,MAAM,GAAG,MAAM,EAClG,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAC7E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,IAAI,CAAC,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAC5E,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAsCxE"}

package/lib-commonjs/composeFactory.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var use_styling_1 = require("@fluentui-react-native/use-styling");
+var use_slot_1 = require("@fluentui-react-native/use-slot");
+var use_slots_1 = require("@fluentui-react-native/use-slots");
+var immutable_merge_1 = require("@fluentui-react-native/immutable-merge");
+/**
+ * options get deep merged except the tokens array gets appended
+ */
+var mergeOptions = {
+    tokens: 'appendArray',
+    object: true,
+};
+function composeFactory(options, themeHelper, base) {
+    // merge options together if a base is specified
+    var baseOptions = base === null || base === void 0 ? void 0 : base.__options;
+    options = baseOptions ? immutable_merge_1.immutableMergeCore(mergeOptions, baseOptions, options) : __assign({}, options);
+    // build styling if styling options are specified
+    options.useStyling = options.slotProps || options.tokens ? use_styling_1.buildUseStyling(options, themeHelper) : function () { return ({}); };
+    // build the slots hook, which will use the styling hook if it has been built
+    var useSlots = use_slots_1.buildUseSlots(options);
+    // build the staged component
+    var component = use_slot_1.stagedComponent(function (props) { return options.render(props, useSlots); });
+    // attach additional props to the returned component
+    component.displayName = options.displayName;
+    component.__options = options;
+    component.customize = function () {
+        var tokens = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            tokens[_i] = arguments[_i];
+        }
+        return composeFactory(immutable_merge_1.immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
+    };
+    component.compose = function (customOptions) {
+        return composeFactory(immutable_merge_1.immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
+    };
+    // attach statics if specified
+    if (options.statics) {
+        Object.assign(component, options.statics);
+    }
+    return component;
+}
+exports.composeFactory = composeFactory;
+//# sourceMappingURL=composeFactory.js.map

package/lib-commonjs/composeFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,kEAA8H;AAC9H,4DAAsF;AACtF,8DAAwF;AACxF,0EAA0F;AAoC1F;;GAEG;AACH,IAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,SAAgB,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,IAAM,WAAW,GAAiB,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,oCAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,cAAM,OAAO,CAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,6BAAe,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,cAAM,OAAA,CAAC,EAAiB,CAAA,EAAlB,CAAkB,CAAC;IAE5H,6EAA6E;IAC7E,IAAM,QAAQ,GAAG,yBAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,IAAM,SAAS,GAAG,0BAAe,CAAS,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,EAA/B,CAA+B,CAAmB,CAAC;IAExG,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG;QAAC,gBAAiC;aAAjC,UAAiC,EAAjC,qBAAiC,EAAjC,IAAiC;YAAjC,2BAAiC;;QACtD,OAAA,cAAc,CACZ,oCAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ;IAHD,CAGC,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,UAAC,aAAoC;QACvD,OAAA,cAAc,CACZ,oCAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ;IAHD,CAGC,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE;QACnB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AA1CD,wCA0CC"}

package/lib-commonjs/composeFactory.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=composeFactory.test.d.ts.map

package/lib-commonjs/composeFactory.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.test.d.ts","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":""}

package/lib-commonjs/composeFactory.test.js

@@ -0,0 +1,81 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx withSlots */
+var use_slot_1 = require("@fluentui-react-native/use-slot");
+var renderer = __importStar(require("react-test-renderer"));
+var composeFactory_1 = require("./composeFactory");
+var react_native_1 = require("react-native");
+var theme = {
+    values: {
+        backgroundColor: 'black',
+        color: 'white',
+    },
+    components: {},
+};
+var themeHelper = {
+    useTheme: function () { return theme; },
+    getComponentInfo: function (theme, name) {
+        var _a;
+        return (_a = theme === null || theme === void 0 ? void 0 : theme.components) !== null && _a !== void 0 ? _a : theme.components[name];
+    },
+};
+function mergeProps(p1, p2) {
+    return __assign(__assign({}, p1), p2);
+}
+var Base = composeFactory_1.composeFactory({
+    tokens: [
+        function (t) { return ({
+            backgroundColor: t.values.backgroundColor,
+            color: t.values.color,
+        }); },
+    ],
+    slotProps: {
+        outer: function (tokens) { return ({ style: { backgroundColor: tokens.backgroundColor } }); },
+        content: function (tokens) { return ({ style: { color: tokens.color } }); },
+    },
+    slots: {
+        outer: react_native_1.View,
+        content: react_native_1.Text,
+    },
+    render: function (props, useSlots) {
+        var Slots = useSlots(props);
+        return function (extra) { return (use_slot_1.withSlots(Slots.outer, __assign({}, mergeProps(props, extra)),
+            use_slot_1.withSlots(Slots.content, null, "Hello"))); };
+    },
+}, themeHelper);
+var Customized = Base.customize({ backgroundColor: 'pink' });
+var mixinStyle = {
+    width: 30,
+    height: 20,
+    borderColor: 'green',
+    borderWidth: 1,
+};
+describe('composeFactory test suite', function () {
+    it('Base component render', function () {
+        var tree = renderer.create(use_slot_1.withSlots(Base, { style: mixinStyle })).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Base component render', function () {
+        var tree = renderer.create(use_slot_1.withSlots(Customized, { style: mixinStyle })).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=composeFactory.test.js.map

package/lib-commonjs/composeFactory.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,4DAA4D;AAC5D,4DAAgD;AAChD,mDAAkE;AAClE,6CAA4E;AAa5E,IAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,IAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IACrB,gBAAgB,EAAE,UAAC,KAAY,EAAE,IAAY;;QAC3C,aAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,6BAAY,EAAE,GAAK,EAAE,EAAG;AAC1B,CAAC;AAED,IAAM,IAAI,GAAG,+BAAc,CACzB;IACE,MAAM,EAAE;QACN,UAAC,CAAC,IAAK,OAAA,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC,EAHK,CAGL;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,UAAC,MAAM,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC,EAAxD,CAAwD;QAC3E,OAAO,EAAE,UAAC,MAAM,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAApC,CAAoC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;IACD,MAAM,EAAE,UAAC,KAAgB,EAAE,QAA8C;QACvE,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,UAAC,KAAgB,IAAK,OAAA,CAC3B,qBAAC,KAAK,CAAC,KAAK,eAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,qBAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,EAJ4B,CAI5B,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,IAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,IAAM,UAAU,GAAG;IACjB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,CAAC;CACf,CAAC;AAEF,QAAQ,CAAC,2BAA2B,EAAE;IACpC,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,qBAAC,IAAI,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,qBAAC,UAAU,IAAC,KAAK,EAAE,UAAU,GAAI,CAAC,CAAC,MAAM,EAAE,CAAC;QACzE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './composeFactory';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib-commonjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./composeFactory"));
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,sCAAiC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@fluentui-react-native/composition",
+  "version": "0.6.9",
+  "description": "Composition factories for building HOCs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/ui-fabric-react-native"
+  },
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "bundle": "fluentui-scripts bundle",
+    "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
+    "code-style": "fluentui-scripts code-style",
+    "just": "fluentui-scripts",
+    "lint": "fluentui-scripts eslint",
+    "start": "fluentui-scripts dev",
+    "start-test": "fluentui-scripts jest-watch",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "prettier": "fluentui-scripts prettier",
+    "prettier-fix": "fluentui-scripts prettier --fix true"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui-react-native/immutable-merge": "^1.1.3",
+    "@fluentui-react-native/use-slot": ">=0.1.6 <1.0.0",
+    "@fluentui-react-native/use-slots": ">=0.5.8 <1.0.0",
+    "@fluentui-react-native/use-styling": ">=0.6.8 <1.0.0"
+  },
+  "devDependencies": {
+    "@types/react-native": "^0.63.0",
+    "@uifabricshared/build-native": "^0.1.1",
+    "react-native": "^0.63.4"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.63.4"
+  }
+}