@fluentui-react-native/composition 0.11.12 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.json +1 -1
  2. package/CHANGELOG.md +40 -2
  3. package/lib/composeFactory.d.ts +21 -9
  4. package/lib/composeFactory.d.ts.map +1 -1
  5. package/lib/composeFactory.js +22 -22
  6. package/lib/composeFactory.js.map +1 -1
  7. package/lib/composeFactory.test.d.ts +1 -1
  8. package/lib/composeFactory.test.js +45 -35
  9. package/lib/composeFactory.test.js.map +1 -1
  10. package/lib/index.d.ts +1 -1
  11. package/lib/index.js +1 -1
  12. package/lib-commonjs/composeFactory.d.ts +21 -9
  13. package/lib-commonjs/composeFactory.d.ts.map +1 -1
  14. package/lib-commonjs/composeFactory.js +31 -30
  15. package/lib-commonjs/composeFactory.js.map +1 -1
  16. package/lib-commonjs/composeFactory.test.d.ts +1 -1
  17. package/lib-commonjs/composeFactory.test.js +101 -63
  18. package/lib-commonjs/composeFactory.test.js.map +1 -1
  19. package/lib-commonjs/index.d.ts +1 -1
  20. package/lib-commonjs/index.js +10 -5
  21. package/lib-commonjs/index.js.map +1 -1
  22. package/package.json +39 -45
  23. package/src/__snapshots__/composeFactory.test.tsx.snap +1 -1
  24. package/src/composeFactory.test.tsx +13 -8
  25. package/src/composeFactory.ts +16 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fluentui-react-native/composition",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 05 Aug 2025 18:46:06 GMT",
5
+ "date": "Tue, 05 Aug 2025 18:50:42 GMT",
6
6
  "version": "0.11.12",
7
7
  "tag": "@fluentui-react-native/composition_v0.11.12",
8
8
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,50 @@
1
1
  # Change Log - @fluentui-react-native/composition
2
2
 
3
- <!-- This log was last generated on Tue, 05 Aug 2025 18:46:06 GMT and should not be manually modified. -->
3
+ ## 0.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - d7adbdd: # Migration from Beachball to Changesets
8
+
9
+ This changeset represents the migration from Beachball to Changesets for version management and consolidates all changes from 440+ beachball change files that were in the `change/` directory.
10
+
11
+ All 75 affected packages receive a minor version bump to acknowledge the accumulated changes from the beachball era.
12
+
13
+ ## What Changed
14
+
15
+ Going forward, all version management uses Changesets via `yarn changeset`. The following beachball infrastructure has been removed:
16
+
17
+ - ❌ 440+ beachball change files from `change/` directory
18
+ - ❌ `beachball` package dependency
19
+ - ❌ Beachball scripts from `package.json`
20
+ - ❌ `beachball.config.js` configuration file
21
+ - ❌ Beachball publish steps from Azure Pipelines
22
+
23
+ ## New Workflow
24
+
25
+ ✅ **Create changes**: Run `yarn changeset` to document changes
26
+ ✅ **Version bump PRs**: Automatically created by GitHub Actions
27
+ ✅ **Publishing**: Handled by Azure Pipelines using `changeset publish`
28
+ ✅ **Validation**: CI validates changesets and blocks major version bumps
29
+
30
+ For details, see `CHANGESETS_SETUP.md` and `CONTRIBUTING.md`.
31
+
32
+ ### Patch Changes
33
+
34
+ - d1d8c26: We were pinning @types/react and react-native-macos via resolutions. This fixes that which uncovered a bunch of type inconsistencies that needed to be addressed.
35
+ - Updated dependencies [d7adbdd]
36
+ - Updated dependencies [d1d8c26]
37
+ - @fluentui-react-native/framework-base@0.3.0
38
+ - @fluentui-react-native/use-slots@0.11.0
39
+ - @fluentui-react-native/use-styling@0.14.0
40
+
41
+ <!-- This log was last generated on Tue, 05 Aug 2025 18:50:42 GMT and should not be manually modified. -->
4
42
 
5
43
  <!-- Start content -->
6
44
 
7
45
  ## 0.11.12
8
46
 
9
- Tue, 05 Aug 2025 18:46:06 GMT
47
+ Tue, 05 Aug 2025 18:50:42 GMT
10
48
 
11
49
  ### Patches
12
50
 
package/lib/composeFactory.d.ts CHANGED
@@ -1,8 +1,14 @@
1
- import type { ComposableFunction } from '@fluentui-react-native/framework-base';
1
+ import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
2
2
  import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
3
3
  import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
4
4
  export type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
5
- export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
5
+ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<
6
+ TProps,
7
+ TSlotProps,
8
+ TTokens,
9
+ TTheme
10
+ > &
11
+ UseSlotOptions<TSlotProps> & {
6
12
  /**
7
13
  * Includes from UseStylingOptions:
8
14
  *
@@ -11,16 +17,22 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
11
17
  /**
12
18
  * staged render function that takes props and a useSlots hook as an input
13
19
  */
14
- useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
20
+ useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
15
21
  /**
16
22
  * optional statics to attach to the component
17
23
  */
18
24
  statics?: TStatics;
19
- };
25
+ };
20
26
  export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
21
- __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
22
- customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
23
- compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
27
+ __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
28
+ customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
29
+ compose<TOverrideSlotProps = TSlotProps>(
30
+ options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
31
+ ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
24
32
  } & TStatics;
25
- 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>;
26
- //# sourceMappingURL=composeFactory.d.ts.map
33
+ export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(
34
+ options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>,
35
+ themeHelper: ThemeHelper<TTheme>,
36
+ base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>,
37
+ ): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
38
+ //# sourceMappingURL=composeFactory.d.ts.map
package/lib/composeFactory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,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,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE5G;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,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"}
1
+ {"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE7F,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,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,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;IAEhG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,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,CAAC,kBAAkB,GAAG,UAAU,EACrC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,GAC7F,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnF,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,CA8CxE"}
package/lib/composeFactory.js CHANGED
@@ -6,28 +6,28 @@ import { buildUseStyling } from '@fluentui-react-native/use-styling';
6
6
  * options get deep merged except the tokens array gets appended
7
7
  */
8
8
  const mergeOptions = {
9
- tokens: 'appendArray',
10
- object: true,
9
+ tokens: 'appendArray',
10
+ object: true,
11
11
  };
12
12
  export function composeFactory(options, themeHelper, base) {
13
- // merge options together if a base is specified
14
- const baseOptions = base?.__options;
15
- options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : { ...options };
16
- // build styling if styling options are specified
17
- options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({});
18
- // build the slots hook, which will use the styling hook if it has been built
19
- const useSlots = buildUseSlots(options);
20
- // build the staged component
21
- const component = stagedComponent((props) => options.useRender(props, useSlots));
22
- // attach additional props to the returned component
23
- component.displayName = options.displayName;
24
- component.__options = options;
25
- component.customize = (...tokens) => composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
26
- component.compose = (customOptions) => composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
27
- // attach statics if specified
28
- if (options.statics) {
29
- Object.assign(component, options.statics);
30
- }
31
- return component;
13
+ // merge options together if a base is specified
14
+ const baseOptions = base?.__options;
15
+ options = baseOptions ? immutableMergeCore(mergeOptions, baseOptions, options) : { ...options };
16
+ // build styling if styling options are specified
17
+ options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({});
18
+ // build the slots hook, which will use the styling hook if it has been built
19
+ const useSlots = buildUseSlots(options);
20
+ // build the staged component
21
+ const component = stagedComponent((props) => options.useRender(props, useSlots));
22
+ // attach additional props to the returned component
23
+ component.displayName = options.displayName;
24
+ component.__options = options;
25
+ component.customize = (...tokens) => composeFactory(immutableMergeCore(mergeOptions, options, { tokens: tokens }), themeHelper);
26
+ component.compose = (customOptions) => composeFactory(immutableMergeCore(mergeOptions, options, customOptions), themeHelper);
27
+ // attach statics if specified
28
+ if (options.statics) {
29
+ Object.assign(component, options.statics);
30
+ }
31
+ return component;
32
32
  }
33
- //# sourceMappingURL=composeFactory.js.map
33
+ //# sourceMappingURL=composeFactory.js.map
package/lib/composeFactory.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAqCrE;;GAEG;AACH,MAAM,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,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,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,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,eAAe,CAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,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"}
1
+ {"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAE3E,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,UAAU,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E,EACL;IAIxE,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,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,GAAG,EAAE,EAAE,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,eAAe,CAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAClB,aAAoG,EACpG,EAAE,CACF,cAAc,CACZ,kBAAkB,CAAC,YAAY,EAAE,OAAO,EAAE,aAAuB,CAMhE,EACD,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,SAAS,CAAC;AAAA,CAClB"}
package/lib/composeFactory.test.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=composeFactory.test.d.ts.map
2
+ //# sourceMappingURL=composeFactory.test.d.ts.map
package/lib/composeFactory.test.js CHANGED
@@ -1,59 +1,69 @@
1
+ import { jsx as _jsx } from '@fluentui-react-native/framework-base/jsx-runtime';
2
+ /** @jsxImportSource @fluentui-react-native/framework-base */
3
+ import { act } from 'react';
1
4
  import { View, Text } from 'react-native';
2
- import { withSlots } from '@fluentui-react-native/framework-base';
3
5
  import * as renderer from 'react-test-renderer';
4
6
  import { composeFactory } from './composeFactory';
5
7
  const theme = {
6
- values: {
7
- backgroundColor: 'black',
8
- color: 'white',
9
- },
10
- components: {},
8
+ values: {
9
+ backgroundColor: 'black',
10
+ color: 'white',
11
+ },
12
+ components: {},
11
13
  };
12
14
  const themeHelper = {
13
- useTheme: () => theme,
14
- getComponentInfo: (theme, name) => {
15
- return theme?.components ?? theme.components[name];
16
- },
15
+ useTheme: () => theme,
16
+ getComponentInfo: (theme, name) => {
17
+ return theme?.components ?? theme.components[name];
18
+ },
17
19
  };
18
20
  function mergeProps(p1, p2) {
19
- return { ...p1, ...p2 };
21
+ return { ...p1, ...p2 };
20
22
  }
21
- const Base = composeFactory({
23
+ const Base = composeFactory(
24
+ {
22
25
  tokens: [
23
- (t) => ({
24
- backgroundColor: t.values.backgroundColor,
25
- color: t.values.color,
26
- }),
26
+ (t) => ({
27
+ backgroundColor: t.values.backgroundColor,
28
+ color: t.values.color,
29
+ }),
27
30
  ],
28
31
  slotProps: {
29
- outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
30
- content: (tokens) => ({ style: { color: tokens.color } }),
32
+ outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
33
+ content: (tokens) => ({ style: { color: tokens.color } }),
31
34
  },
32
35
  slots: {
33
- outer: View,
34
- content: Text,
36
+ outer: View,
37
+ content: Text,
35
38
  },
36
39
  useRender: (props, useSlots) => {
37
- const Slots = useSlots(props);
38
- return (extra) => (withSlots(Slots.outer, { ...mergeProps(props, extra) },
39
- withSlots(Slots.content, null, "Hello")));
40
+ const Slots = useSlots(props);
41
+ return (extra) => _jsx(Slots.outer, { ...mergeProps(props, extra), children: _jsx(Slots.content, { children: 'Hello' }) });
40
42
  },
41
- }, themeHelper);
43
+ },
44
+ themeHelper,
45
+ );
42
46
  const Customized = Base.customize({ backgroundColor: 'pink' });
43
47
  const mixinStyle = {
44
- width: 30,
45
- height: 20,
46
- borderColor: 'green',
47
- borderWidth: 1,
48
+ width: 30,
49
+ height: 20,
50
+ borderColor: 'green',
51
+ borderWidth: 1,
48
52
  };
49
53
  describe('composeFactory test suite', () => {
50
- it('Base component render', () => {
51
- const tree = renderer.create(withSlots(Base, { style: mixinStyle })).toJSON();
52
- expect(tree).toMatchSnapshot();
54
+ it('Base component render', () => {
55
+ let component;
56
+ act(() => {
57
+ component = renderer.create(_jsx(Base, { style: mixinStyle }));
53
58
  });
54
- it('Base component render', () => {
55
- const tree = renderer.create(withSlots(Customized, { style: mixinStyle })).toJSON();
56
- expect(tree).toMatchSnapshot();
59
+ expect(component.toJSON()).toMatchSnapshot();
60
+ });
61
+ it('Customized component render', () => {
62
+ let component;
63
+ act(() => {
64
+ component = renderer.create(_jsx(Customized, { style: mixinStyle }));
57
65
  });
66
+ expect(component.toJSON()).toMatchSnapshot();
67
+ });
58
68
  });
59
- //# sourceMappingURL=composeFactory.test.js.map
69
+ //# sourceMappingURL=composeFactory.test.js.map
package/lib/composeFactory.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,cAAc,CACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,IAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,UAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,UAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,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,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,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,GAAG,EAAE;QAC/B,MAAM,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"}
1
+ {"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"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"}
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { composeFactory } from './composeFactory';
2
2
  export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory';
3
- //# sourceMappingURL=index.d.ts.map
3
+ //# sourceMappingURL=index.d.ts.map
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export { composeFactory } from './composeFactory';
2
- //# sourceMappingURL=index.js.map
2
+ //# sourceMappingURL=index.js.map
package/lib-commonjs/composeFactory.d.ts CHANGED
@@ -1,8 +1,14 @@
1
- import type { ComposableFunction } from '@fluentui-react-native/framework-base';
1
+ import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
2
2
  import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
3
3
  import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling';
4
4
  export type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
5
- export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<TProps, TSlotProps, TTokens, TTheme> & UseSlotOptions<TSlotProps> & {
5
+ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<
6
+ TProps,
7
+ TSlotProps,
8
+ TTokens,
9
+ TTheme
10
+ > &
11
+ UseSlotOptions<TSlotProps> & {
6
12
  /**
7
13
  * Includes from UseStylingOptions:
8
14
  *
@@ -11,16 +17,22 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
11
17
  /**
12
18
  * staged render function that takes props and a useSlots hook as an input
13
19
  */
14
- useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
20
+ useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
15
21
  /**
16
22
  * optional statics to attach to the component
17
23
  */
18
24
  statics?: TStatics;
19
- };
25
+ };
20
26
  export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
21
- __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
22
- customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
23
- compose: (options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
27
+ __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
28
+ customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
29
+ compose<TOverrideSlotProps = TSlotProps>(
30
+ options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
31
+ ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
24
32
  } & TStatics;
25
- 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>;
26
- //# sourceMappingURL=composeFactory.d.ts.map
33
+ export declare function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(
34
+ options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>,
35
+ themeHelper: ThemeHelper<TTheme>,
36
+ base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>,
37
+ ): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
38
+ //# sourceMappingURL=composeFactory.d.ts.map
package/lib-commonjs/composeFactory.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,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,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE5G;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,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"}
1
+ {"version":3,"file":"composeFactory.d.ts","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAE7F,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAG9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAElH,MAAM,MAAM,cAAc,CAAC,MAAM,EAAE,UAAU,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,UAAU,CAAC,CAAC;AAEzG,MAAM,MAAM,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,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC;IAEhG;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,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,CAAC,kBAAkB,GAAG,UAAU,EACrC,OAAO,EAAE,OAAO,CAAC,qBAAqB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,GAC7F,uBAAuB,CAAC,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;CACnF,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,CA8CxE"}
package/lib-commonjs/composeFactory.js CHANGED
@@ -1,37 +1,38 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.composeFactory = void 0;
4
- const framework_base_1 = require("@fluentui-react-native/framework-base");
5
- const framework_base_2 = require("@fluentui-react-native/framework-base");
6
- const use_slots_1 = require("@fluentui-react-native/use-slots");
7
- const use_styling_1 = require("@fluentui-react-native/use-styling");
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', { value: true });
3
+ exports.composeFactory = composeFactory;
4
+ const framework_base_1 = require('@fluentui-react-native/framework-base');
5
+ const framework_base_2 = require('@fluentui-react-native/framework-base');
6
+ const use_slots_1 = require('@fluentui-react-native/use-slots');
7
+ const use_styling_1 = require('@fluentui-react-native/use-styling');
8
8
  /**
9
9
  * options get deep merged except the tokens array gets appended
10
10
  */
11
11
  const mergeOptions = {
12
- tokens: 'appendArray',
13
- object: true,
12
+ tokens: 'appendArray',
13
+ object: true,
14
14
  };
15
15
  function composeFactory(options, themeHelper, base) {
16
- // merge options together if a base is specified
17
- const baseOptions = base?.__options;
18
- options = baseOptions ? (0, framework_base_1.immutableMergeCore)(mergeOptions, baseOptions, options) : { ...options };
19
- // build styling if styling options are specified
20
- options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) : () => ({});
21
- // build the slots hook, which will use the styling hook if it has been built
22
- const useSlots = (0, use_slots_1.buildUseSlots)(options);
23
- // build the staged component
24
- const component = (0, framework_base_2.stagedComponent)((props) => options.useRender(props, useSlots));
25
- // attach additional props to the returned component
26
- component.displayName = options.displayName;
27
- component.__options = options;
28
- component.customize = (...tokens) => composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
29
- component.compose = (customOptions) => composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
30
- // attach statics if specified
31
- if (options.statics) {
32
- Object.assign(component, options.statics);
33
- }
34
- return component;
16
+ // merge options together if a base is specified
17
+ const baseOptions = base?.__options;
18
+ options = baseOptions ? (0, framework_base_1.immutableMergeCore)(mergeOptions, baseOptions, options) : { ...options };
19
+ // build styling if styling options are specified
20
+ options.useStyling = options.slotProps || options.tokens ? (0, use_styling_1.buildUseStyling)(options, themeHelper) : () => ({});
21
+ // build the slots hook, which will use the styling hook if it has been built
22
+ const useSlots = (0, use_slots_1.buildUseSlots)(options);
23
+ // build the staged component
24
+ const component = (0, framework_base_2.stagedComponent)((props) => options.useRender(props, useSlots));
25
+ // attach additional props to the returned component
26
+ component.displayName = options.displayName;
27
+ component.__options = options;
28
+ component.customize = (...tokens) =>
29
+ composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, { tokens: tokens }), themeHelper);
30
+ component.compose = (customOptions) =>
31
+ composeFactory((0, framework_base_1.immutableMergeCore)(mergeOptions, options, customOptions), themeHelper);
32
+ // attach statics if specified
33
+ if (options.statics) {
34
+ Object.assign(component, options.statics);
35
+ }
36
+ return component;
35
37
  }
36
- exports.composeFactory = composeFactory;
37
- //# sourceMappingURL=composeFactory.js.map
38
+ //# sourceMappingURL=composeFactory.js.map
package/lib-commonjs/composeFactory.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;AACA,0EAA2E;AAE3E,0EAAwE;AAExE,gEAAiE;AACjE,oEAAqE;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,SAAgB,cAAc,CAC5B,OAA6E,EAC7E,WAAgC,EAChC,IAA6E;IAK7E,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,mCAAkB,EAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,6BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,IAAA,yBAAa,EAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAA,gCAAe,EAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAAC,aAAoC,EAAE,EAAE,CAC3D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,aAAa,CAAiB,EACxE,WAAW,CACZ,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"}
1
+ {"version":3,"file":"composeFactory.js","sourceRoot":"","sources":["../src/composeFactory.ts"],"names":[],"mappings":";;;AACA,0EAA2E;AAE3E,0EAAwE;AAExE,gEAAiE;AACjE,oEAAqE;AAqCrE;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,wBACE,OAA6E,EAC7E,WAAgC,EAChC,IAA6E,EACL;IAIxE,gDAAgD;IAChD,MAAM,WAAW,GAAiB,IAAI,EAAE,SAAyB,CAAC;IAClE,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,IAAA,mCAAkB,EAAe,YAAY,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAE9G,iDAAiD;IACjD,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,6BAAe,EAAC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,EAAiB,CAAA,CAAC;IAE5H,6EAA6E;IAC7E,MAAM,QAAQ,GAAG,IAAA,yBAAa,EAAC,OAAO,CAAuC,CAAC;IAE9E,6BAA6B;IAC7B,MAAM,SAAS,GAAG,IAAA,gCAAe,EAAS,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAmB,CAAC;IAE3G,oDAAoD;IACpD,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;IAC5C,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,MAA8B,EAAE,EAAE,CAC1D,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,MAAM,EAAkB,CAAC,EAC7E,WAAW,CACZ,CAAC;IAEJ,SAAS,CAAC,OAAO,GAAG,CAClB,aAAoG,EACpG,EAAE,CACF,cAAc,CACZ,IAAA,mCAAkB,EAAC,YAAY,EAAE,OAAO,EAAE,aAAuB,CAMhE,EACD,WAAW,CACZ,CAAC;IAEJ,8BAA8B;IAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,SAAS,CAAC;AAAA,CAClB"}
package/lib-commonjs/composeFactory.test.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export {};
2
- //# sourceMappingURL=composeFactory.test.d.ts.map
2
+ //# sourceMappingURL=composeFactory.test.d.ts.map
package/lib-commonjs/composeFactory.test.js CHANGED
@@ -1,84 +1,122 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- const react_native_1 = require("react-native");
27
- const framework_base_1 = require("@fluentui-react-native/framework-base");
28
- const renderer = __importStar(require("react-test-renderer"));
29
- const composeFactory_1 = require("./composeFactory");
1
+ 'use strict';
2
+ var __createBinding =
3
+ (this && this.__createBinding) ||
4
+ (Object.create
5
+ ? function (o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
9
+ desc = {
10
+ enumerable: true,
11
+ get: function () {
12
+ return m[k];
13
+ },
14
+ };
15
+ }
16
+ Object.defineProperty(o, k2, desc);
17
+ }
18
+ : function (o, m, k, k2) {
19
+ if (k2 === undefined) k2 = k;
20
+ o[k2] = m[k];
21
+ });
22
+ var __setModuleDefault =
23
+ (this && this.__setModuleDefault) ||
24
+ (Object.create
25
+ ? function (o, v) {
26
+ Object.defineProperty(o, 'default', { enumerable: true, value: v });
27
+ }
28
+ : function (o, v) {
29
+ o['default'] = v;
30
+ });
31
+ var __importStar =
32
+ (this && this.__importStar) ||
33
+ (function () {
34
+ var ownKeys = function (o) {
35
+ ownKeys =
36
+ Object.getOwnPropertyNames ||
37
+ function (o) {
38
+ var ar = [];
39
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
40
+ return ar;
41
+ };
42
+ return ownKeys(o);
43
+ };
44
+ return function (mod) {
45
+ if (mod && mod.__esModule) return mod;
46
+ var result = {};
47
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
48
+ __setModuleDefault(result, mod);
49
+ return result;
50
+ };
51
+ })();
52
+ Object.defineProperty(exports, '__esModule', { value: true });
53
+ const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
54
+ /** @jsxImportSource @fluentui-react-native/framework-base */
55
+ const react_1 = require('react');
56
+ const react_native_1 = require('react-native');
57
+ const renderer = __importStar(require('react-test-renderer'));
58
+ const composeFactory_1 = require('./composeFactory');
30
59
  const theme = {
31
- values: {
32
- backgroundColor: 'black',
33
- color: 'white',
34
- },
35
- components: {},
60
+ values: {
61
+ backgroundColor: 'black',
62
+ color: 'white',
63
+ },
64
+ components: {},
36
65
  };
37
66
  const themeHelper = {
38
- useTheme: () => theme,
39
- getComponentInfo: (theme, name) => {
40
- return theme?.components ?? theme.components[name];
41
- },
67
+ useTheme: () => theme,
68
+ getComponentInfo: (theme, name) => {
69
+ return theme?.components ?? theme.components[name];
70
+ },
42
71
  };
43
72
  function mergeProps(p1, p2) {
44
- return { ...p1, ...p2 };
73
+ return { ...p1, ...p2 };
45
74
  }
46
- const Base = (0, composeFactory_1.composeFactory)({
75
+ const Base = (0, composeFactory_1.composeFactory)(
76
+ {
47
77
  tokens: [
48
- (t) => ({
49
- backgroundColor: t.values.backgroundColor,
50
- color: t.values.color,
51
- }),
78
+ (t) => ({
79
+ backgroundColor: t.values.backgroundColor,
80
+ color: t.values.color,
81
+ }),
52
82
  ],
53
83
  slotProps: {
54
- outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
55
- content: (tokens) => ({ style: { color: tokens.color } }),
84
+ outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
85
+ content: (tokens) => ({ style: { color: tokens.color } }),
56
86
  },
57
87
  slots: {
58
- outer: react_native_1.View,
59
- content: react_native_1.Text,
88
+ outer: react_native_1.View,
89
+ content: react_native_1.Text,
60
90
  },
61
91
  useRender: (props, useSlots) => {
62
- const Slots = useSlots(props);
63
- return (extra) => ((0, framework_base_1.withSlots)(Slots.outer, { ...mergeProps(props, extra) },
64
- (0, framework_base_1.withSlots)(Slots.content, null, "Hello")));
92
+ const Slots = useSlots(props);
93
+ return (extra) =>
94
+ jsx_runtime_1.jsx(Slots.outer, { ...mergeProps(props, extra), children: jsx_runtime_1.jsx(Slots.content, { children: 'Hello' }) });
65
95
  },
66
- }, themeHelper);
96
+ },
97
+ themeHelper,
98
+ );
67
99
  const Customized = Base.customize({ backgroundColor: 'pink' });
68
100
  const mixinStyle = {
69
- width: 30,
70
- height: 20,
71
- borderColor: 'green',
72
- borderWidth: 1,
101
+ width: 30,
102
+ height: 20,
103
+ borderColor: 'green',
104
+ borderWidth: 1,
73
105
  };
74
106
  describe('composeFactory test suite', () => {
75
- it('Base component render', () => {
76
- const tree = renderer.create((0, framework_base_1.withSlots)(Base, { style: mixinStyle })).toJSON();
77
- expect(tree).toMatchSnapshot();
107
+ it('Base component render', () => {
108
+ let component;
109
+ (0, react_1.act)(() => {
110
+ component = renderer.create(jsx_runtime_1.jsx(Base, { style: mixinStyle }));
78
111
  });
79
- it('Base component render', () => {
80
- const tree = renderer.create((0, framework_base_1.withSlots)(Customized, { style: mixinStyle })).toJSON();
81
- expect(tree).toMatchSnapshot();
112
+ expect(component.toJSON()).toMatchSnapshot();
113
+ });
114
+ it('Customized component render', () => {
115
+ let component;
116
+ (0, react_1.act)(() => {
117
+ component = renderer.create(jsx_runtime_1.jsx(Customized, { style: mixinStyle }));
82
118
  });
119
+ expect(component.toJSON()).toMatchSnapshot();
120
+ });
83
121
  });
84
- //# sourceMappingURL=composeFactory.test.js.map
122
+ //# sourceMappingURL=composeFactory.test.js.map
package/lib-commonjs/composeFactory.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,+CAA0C;AAE1C,0EAAkE;AAElE,8DAAgD;AAGhD,qDAAkD;AAYlD,MAAM,KAAK,GAAU;IACnB,MAAM,EAAE;QACN,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE,EAAE;CACf,CAAC;AAYF,MAAM,WAAW,GAAuB;IACtC,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;IACrB,gBAAgB,EAAE,CAAC,KAAY,EAAE,IAAY,EAAE,EAAE;QAC/C,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAI,EAAK,EAAE,EAAK;IACjC,OAAO,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1B,CAAC;AAED,MAAM,IAAI,GAAG,IAAA,+BAAc,EACzB;IACE,MAAM,EAAE;QACN,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACN,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;YACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SACtB,CAAC;KACH;IACD,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,eAAe,EAAE,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;KAC1D;IACD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAI;QACX,OAAO,EAAE,mBAAI;KACd;IACD,SAAS,EAAE,CAAC,KAAgB,EAAE,QAA8C,EAAE,EAAE;QAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,OAAO,CAAC,KAAgB,EAAE,EAAE,CAAC,CAC3B,gCAAC,KAAK,CAAC,KAAK,OAAK,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;YACvC,gCAAC,KAAK,CAAC,OAAO,gBAAsB,CACxB,CACf,CAAC;IACJ,CAAC;CACF,EACD,WAAW,CACZ,CAAC;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;AAE/D,MAAM,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,GAAG,EAAE;IACzC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,gCAAC,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,GAAG,EAAE;QAC/B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,gCAAC,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"}
1
+ {"version":3,"file":"composeFactory.test.js","sourceRoot":"","sources":["../src/composeFactory.test.tsx"],"names":[],"mappings":"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"}
package/lib-commonjs/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { composeFactory } from './composeFactory';
2
2
  export type { ComposeFactoryComponent, ComposeFactoryOptions, UseStyledSlots } from './composeFactory';
3
- //# sourceMappingURL=index.d.ts.map
3
+ //# sourceMappingURL=index.d.ts.map
package/lib-commonjs/index.js CHANGED
@@ -1,6 +1,11 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ 'use strict';
2
+ Object.defineProperty(exports, '__esModule', { value: true });
3
3
  exports.composeFactory = void 0;
4
- var composeFactory_1 = require("./composeFactory");
5
- Object.defineProperty(exports, "composeFactory", { enumerable: true, get: function () { return composeFactory_1.composeFactory; } });
6
- //# sourceMappingURL=index.js.map
4
+ const composeFactory_1 = require('./composeFactory');
5
+ Object.defineProperty(exports, 'composeFactory', {
6
+ enumerable: true,
7
+ get: function () {
8
+ return composeFactory_1.composeFactory;
9
+ },
10
+ });
11
+ //# sourceMappingURL=index.js.map
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAAzC,gHAAA,cAAc,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qDAAkD;AAAzC,gHAAA,cAAc,OAAA"}
package/package.json CHANGED
@@ -1,83 +1,77 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/composition",
3
- "version": "0.11.12",
3
+ "version": "0.12.0",
4
4
  "description": "Composition factories for building HOCs",
5
+ "keywords": [],
5
6
  "repository": {
6
7
  "type": "git",
7
8
  "url": "https://github.com/microsoft/fluentui-react-native",
8
9
  "directory": "packages/framework/composition"
9
10
  },
10
- "main": "lib-commonjs/index.js",
11
- "module": "lib/index.js",
12
- "react-native": "src/index.ts",
11
+ "license": "MIT",
12
+ "author": "",
13
13
  "exports": {
14
14
  ".": {
15
+ "types": "./lib/index.d.ts",
15
16
  "import": "./lib/index.js",
16
- "require": "./lib-commonjs/index.js",
17
- "types": "./lib/index.d.ts"
17
+ "require": "./lib-commonjs/index.js"
18
18
  }
19
19
  },
20
- "typings": "lib/index.d.ts",
20
+ "main": "lib-commonjs/index.js",
21
+ "module": "lib/index.js",
22
+ "types": "lib/index.d.ts",
21
23
  "scripts": {
22
24
  "build": "fluentui-scripts build",
25
+ "build-cjs": "tsgo --outDir lib-commonjs",
26
+ "build-esm": "tsgo --outDir lib --module esnext --moduleResolution bundler",
23
27
  "clean": "fluentui-scripts clean",
24
28
  "depcheck": "fluentui-scripts depcheck",
25
- "just": "fluentui-scripts",
26
29
  "lint": "fluentui-scripts eslint",
30
+ "lint-package": "fluentui-scripts lint-package",
31
+ "prettier": "fluentui-scripts prettier",
27
32
  "start": "fluentui-scripts dev",
28
33
  "start-test": "fluentui-scripts jest-watch",
29
34
  "test": "fluentui-scripts jest",
30
- "update-snapshots": "fluentui-scripts jest -u",
31
- "prettier": "fluentui-scripts prettier",
32
- "prettier-fix": "fluentui-scripts prettier --fix true"
35
+ "update-snapshots": "fluentui-scripts jest -u"
33
36
  },
34
- "keywords": [],
35
- "author": "",
36
- "license": "MIT",
37
37
  "dependencies": {
38
- "@fluentui-react-native/framework-base": "0.2.1",
39
- "@fluentui-react-native/use-slots": "0.10.12",
40
- "@fluentui-react-native/use-styling": "0.13.12"
38
+ "@fluentui-react-native/framework-base": "0.3.0",
39
+ "@fluentui-react-native/use-slots": "0.11.0",
40
+ "@fluentui-react-native/use-styling": "0.14.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@babel/core": "^7.20.0",
44
44
  "@fluentui-react-native/babel-config": "0.1.1",
45
45
  "@fluentui-react-native/eslint-config-rules": "0.1.1",
46
46
  "@fluentui-react-native/jest-config": "0.1.1",
47
- "@fluentui-react-native/scripts": "0.1.1",
48
- "@react-native/babel-preset": "^0.74.0",
49
- "@react-native/metro-config": "^0.74.0",
50
- "@types/react": "18.2.0",
51
- "@types/react-test-renderer": "^18.2.0",
52
- "react": "18.2.0",
53
- "react-native": "^0.74.0",
54
- "react-test-renderer": "18.2.0"
47
+ "@fluentui-react-native/kit-config": "0.1.2",
48
+ "@fluentui-react-native/scripts": "0.1.2",
49
+ "@react-native/babel-preset": "^0.81.0",
50
+ "@types/react": "~19.1.0",
51
+ "@types/react-test-renderer": "^19.1.0",
52
+ "react": "19.1.0",
53
+ "react-native": "^0.81.0",
54
+ "react-test-renderer": "19.1.0"
55
55
  },
56
56
  "peerDependencies": {
57
- "react": "18.2.0",
58
- "react-native": "^0.73.0 || ^0.74.0"
57
+ "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.0",
58
+ "react": "18.2.0 || 19.0.0 || 19.1.0"
59
+ },
60
+ "peerDependenciesMeta": {
61
+ "@types/react": {
62
+ "optional": true
63
+ }
59
64
  },
60
65
  "rnx-kit": {
61
66
  "kitType": "library",
62
67
  "alignDeps": {
63
- "presets": [
64
- "microsoft/react-native"
65
- ],
66
- "requirements": {
67
- "development": [
68
- "react-native@0.74"
69
- ],
70
- "production": [
71
- "react-native@0.73 || 0.74"
72
- ]
73
- },
74
68
  "capabilities": [
75
- "babel-preset-react-native",
76
- "core",
77
- "core-android",
78
- "core-ios",
79
- "react-test-renderer"
69
+ "core-dev-only",
70
+ "react-test-renderer",
71
+ "tools-core",
72
+ "tools-jest"
80
73
  ]
81
- }
74
+ },
75
+ "extends": "@fluentui-react-native/kit-config"
82
76
  }
83
- }
77
+ }
package/src/__snapshots__/composeFactory.test.tsx.snap CHANGED
@@ -24,7 +24,7 @@ exports[`composeFactory test suite Base component render 1`] = `
24
24
  </View>
25
25
  `;
26
26
 
27
- exports[`composeFactory test suite Base component render 2`] = `
27
+ exports[`composeFactory test suite Customized component render 1`] = `
28
28
  <View
29
29
  style={
30
30
  {
package/src/composeFactory.test.tsx CHANGED
@@ -1,9 +1,8 @@
1
- /** @jsxRuntime classic */
2
- /** @jsx withSlots */
1
+ /** @jsxImportSource @fluentui-react-native/framework-base */
2
+ import { act } from 'react';
3
3
  import type { ViewProps, TextProps, ColorValue } from 'react-native';
4
4
  import { View, Text } from 'react-native';
5
5
 
6
- import { withSlots } from '@fluentui-react-native/framework-base';
7
6
  import type { ThemeHelper } from '@fluentui-react-native/use-styling';
8
7
  import * as renderer from 'react-test-renderer';
9
8
 
@@ -88,12 +87,18 @@ const mixinStyle = {
88
87
 
89
88
  describe('composeFactory test suite', () => {
90
89
  it('Base component render', () => {
91
- const tree = renderer.create(<Base style={mixinStyle} />).toJSON();
92
- expect(tree).toMatchSnapshot();
90
+ let component: renderer.ReactTestRenderer;
91
+ act(() => {
92
+ component = renderer.create(<Base style={mixinStyle} />);
93
+ });
94
+ expect(component!.toJSON()).toMatchSnapshot();
93
95
  });
94
96
 
95
- it('Base component render', () => {
96
- const tree = renderer.create(<Customized style={mixinStyle} />).toJSON();
97
- expect(tree).toMatchSnapshot();
97
+ it('Customized component render', () => {
98
+ let component: renderer.ReactTestRenderer;
99
+ act(() => {
100
+ component = renderer.create(<Customized style={mixinStyle} />);
101
+ });
102
+ expect(component!.toJSON()).toMatchSnapshot();
98
103
  });
99
104
  });
package/src/composeFactory.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { MergeOptions } from '@fluentui-react-native/framework-base';
2
2
  import { immutableMergeCore } from '@fluentui-react-native/framework-base';
3
- import type { ComposableFunction } from '@fluentui-react-native/framework-base';
3
+ import type { ComposableFunction, FinalRender } from '@fluentui-react-native/framework-base';
4
4
  import { stagedComponent } from '@fluentui-react-native/framework-base';
5
5
  import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots';
6
6
  import { buildUseSlots } from '@fluentui-react-native/use-slots';
@@ -25,7 +25,7 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
25
25
  /**
26
26
  * staged render function that takes props and a useSlots hook as an input
27
27
  */
28
- useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
28
+ useRender: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => FinalRender<TProps>;
29
29
 
30
30
  /**
31
31
  * optional statics to attach to the component
@@ -36,9 +36,9 @@ export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics
36
36
  export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
37
37
  __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
38
38
  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
39
- compose: (
40
- options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>,
41
- ) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
39
+ compose<TOverrideSlotProps = TSlotProps>(
40
+ options: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
41
+ ): ComposeFactoryComponent<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>;
42
42
  } & TStatics;
43
43
 
44
44
  /**
@@ -79,9 +79,17 @@ export function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics ext
79
79
  themeHelper,
80
80
  );
81
81
 
82
- component.compose = (customOptions: Partial<LocalOptions>) =>
83
- composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics>(
84
- immutableMergeCore(mergeOptions, options, customOptions) as LocalOptions,
82
+ component.compose = <TOverrideSlotProps = TSlotProps>(
83
+ customOptions: Partial<ComposeFactoryOptions<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>>,
84
+ ) =>
85
+ composeFactory<TProps, TOverrideSlotProps, TTokens, TTheme, TStatics>(
86
+ immutableMergeCore(mergeOptions, options, customOptions as object) as unknown as ComposeFactoryOptions<
87
+ TProps,
88
+ TOverrideSlotProps,
89
+ TTokens,
90
+ TTheme,
91
+ TStatics
92
+ >,
85
93
  themeHelper,
86
94
  );
87
95