@fluentui-react-native/framework 0.15.0 → 0.15.3
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.
- package/CHANGELOG.md +50 -0
- package/lib/compose.d.ts +12 -27
- package/lib/compose.js +2 -2
- package/lib/compressible.d.ts +2 -5
- package/lib/compressible.js +8 -8
- package/lib/compressible.test.d.ts +1 -1
- package/lib/compressible.test.js +61 -66
- package/lib/index.d.ts +6 -76
- package/lib/index.js +2 -16
- package/lib/themeHelper.d.ts +1 -1
- package/lib/themeHelper.js +6 -6
- package/lib/useFluentTheme.d.ts +1 -1
- package/lib/useFluentTheme.js +2 -2
- package/lib/useStyling.d.ts +4 -15
- package/lib/useStyling.js +4 -4
- package/lib/useTokens.d.ts +1 -1
- package/lib/useTokens.js +2 -2
- package/lib-commonjs/compose.d.ts +12 -27
- package/lib-commonjs/compose.js +6 -6
- package/lib-commonjs/compressible.d.ts +2 -5
- package/lib-commonjs/compressible.js +11 -11
- package/lib-commonjs/compressible.test.d.ts +1 -1
- package/lib-commonjs/compressible.test.js +100 -130
- package/lib-commonjs/index.d.ts +6 -76
- package/lib-commonjs/index.js +55 -283
- package/lib-commonjs/themeHelper.d.ts +1 -1
- package/lib-commonjs/themeHelper.js +9 -9
- package/lib-commonjs/useFluentTheme.d.ts +1 -1
- package/lib-commonjs/useFluentTheme.js +6 -6
- package/lib-commonjs/useStyling.d.ts +4 -15
- package/lib-commonjs/useStyling.js +8 -8
- package/lib-commonjs/useTokens.d.ts +1 -1
- package/lib-commonjs/useTokens.js +11 -31
- package/package.json +31 -30
- package/eslint.config.js +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,55 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/framework
|
|
2
2
|
|
|
3
|
+
## 0.15.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 9cf4444: Migrate from ESLint to oxlint
|
|
8
|
+
- Updated dependencies [9cf4444]
|
|
9
|
+
- @fluentui-react-native/composition@0.12.3
|
|
10
|
+
- @fluentui-react-native/use-styling@0.14.3
|
|
11
|
+
- @fluentui-react-native/default-theme@0.27.3
|
|
12
|
+
- @fluentui-react-native/use-tokens@0.7.3
|
|
13
|
+
- @fluentui-react-native/use-slots@0.11.3
|
|
14
|
+
- @fluentui-react-native/theme-types@0.44.3
|
|
15
|
+
- @fluentui-react-native/use-slot@0.7.3
|
|
16
|
+
- @fluentui-react-native/framework-base@0.3.3
|
|
17
|
+
- @fluentui-react-native/tokens@0.24.3
|
|
18
|
+
|
|
19
|
+
## 0.15.2
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- 8a7b549: Update to the latest rnx-kit versions, fix some typing issues, and correct the vscode settings
|
|
24
|
+
- Updated dependencies [8a7b549]
|
|
25
|
+
- @fluentui-react-native/composition@0.12.2
|
|
26
|
+
- @fluentui-react-native/use-styling@0.14.2
|
|
27
|
+
- @fluentui-react-native/default-theme@0.27.2
|
|
28
|
+
- @fluentui-react-native/use-tokens@0.7.2
|
|
29
|
+
- @fluentui-react-native/use-slots@0.11.2
|
|
30
|
+
- @fluentui-react-native/theme-types@0.44.2
|
|
31
|
+
- @fluentui-react-native/use-slot@0.7.2
|
|
32
|
+
- @fluentui-react-native/framework-base@0.3.2
|
|
33
|
+
- @fluentui-react-native/tokens@0.24.2
|
|
34
|
+
|
|
35
|
+
## 0.15.1
|
|
36
|
+
|
|
37
|
+
### Patch Changes
|
|
38
|
+
|
|
39
|
+
- 0d6e9c1: chore: migrate to `oxfmt`
|
|
40
|
+
- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
|
|
41
|
+
- Updated dependencies [0d6e9c1]
|
|
42
|
+
- Updated dependencies [ac6e7af]
|
|
43
|
+
- @fluentui-react-native/composition@0.12.1
|
|
44
|
+
- @fluentui-react-native/use-styling@0.14.1
|
|
45
|
+
- @fluentui-react-native/default-theme@0.27.1
|
|
46
|
+
- @fluentui-react-native/use-tokens@0.7.1
|
|
47
|
+
- @fluentui-react-native/use-slots@0.11.1
|
|
48
|
+
- @fluentui-react-native/theme-types@0.44.1
|
|
49
|
+
- @fluentui-react-native/use-slot@0.7.1
|
|
50
|
+
- @fluentui-react-native/framework-base@0.3.1
|
|
51
|
+
- @fluentui-react-native/tokens@0.24.1
|
|
52
|
+
|
|
3
53
|
## 0.15.0
|
|
4
54
|
|
|
5
55
|
### Minor Changes
|
package/lib/compose.d.ts
CHANGED
|
@@ -6,47 +6,32 @@ import type { ObjectBase } from '@fluentui-react-native/framework-base';
|
|
|
6
6
|
* the type via the IComposableType interface, this is simply the format used to extract the type info.
|
|
7
7
|
*/
|
|
8
8
|
export interface ComposeType<TProps, TSlotProps, TTokens, TStatics = ObjectBase> {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
props: TProps;
|
|
10
|
+
slotProps: TSlotProps;
|
|
11
|
+
tokens: TTokens;
|
|
12
|
+
statics: TStatics;
|
|
13
13
|
}
|
|
14
14
|
/** fragments used in type extraction */
|
|
15
15
|
type PropsFragment<TProps> = {
|
|
16
|
-
|
|
16
|
+
props: TProps;
|
|
17
17
|
};
|
|
18
18
|
type SlotPropsFragment<TSlotProps> = {
|
|
19
|
-
|
|
19
|
+
slotProps: TSlotProps;
|
|
20
20
|
};
|
|
21
21
|
type TokensFragment<TTokens> = {
|
|
22
|
-
|
|
22
|
+
tokens: TTokens;
|
|
23
23
|
};
|
|
24
24
|
type StaticsFragment<TStatics extends ObjectBase> = {
|
|
25
|
-
|
|
25
|
+
statics: TStatics;
|
|
26
26
|
};
|
|
27
27
|
/** Extraction types that get the various interface types from IComposableType */
|
|
28
28
|
export type ExtractProps<T> = T extends PropsFragment<infer U> ? U : never;
|
|
29
29
|
export type ExtractSlotProps<T> = T extends SlotPropsFragment<infer U> ? U : never;
|
|
30
30
|
export type ExtractTokens<T> = T extends TokensFragment<infer U> ? U : ObjectBase;
|
|
31
31
|
export type ExtractStatics<T> = T extends StaticsFragment<infer U> ? U : ObjectBase;
|
|
32
|
-
export type ComposeOptions<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryOptions<
|
|
33
|
-
|
|
34
|
-
TSlotProps,
|
|
35
|
-
TTokens,
|
|
36
|
-
Theme,
|
|
37
|
-
TStatics
|
|
38
|
-
>;
|
|
39
|
-
export type ComposableComponent<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryComponent<
|
|
40
|
-
TProps,
|
|
41
|
-
TSlotProps,
|
|
42
|
-
TTokens,
|
|
43
|
-
Theme,
|
|
44
|
-
TStatics
|
|
45
|
-
>;
|
|
32
|
+
export type ComposeOptions<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryOptions<TProps, TSlotProps, TTokens, Theme, TStatics>;
|
|
33
|
+
export type ComposableComponent<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryComponent<TProps, TSlotProps, TTokens, Theme, TStatics>;
|
|
46
34
|
export type UseSlots<T> = UseStyledSlots<ExtractProps<T>, ExtractSlotProps<T>>;
|
|
47
|
-
export declare function compose<T>(
|
|
48
|
-
options: ComposeOptions<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>,
|
|
49
|
-
base?: ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>,
|
|
50
|
-
): ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>;
|
|
35
|
+
export declare function compose<T>(options: ComposeOptions<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>, base?: ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>): ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>;
|
|
51
36
|
export {};
|
|
52
|
-
//# sourceMappingURL=compose.d.ts.map
|
|
37
|
+
//# sourceMappingURL=compose.d.ts.map
|
package/lib/compose.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { composeFactory } from '@fluentui-react-native/composition';
|
|
2
2
|
import { themeHelper } from './themeHelper';
|
|
3
3
|
export function compose(options, base) {
|
|
4
|
-
|
|
4
|
+
return composeFactory(options, themeHelper, base);
|
|
5
5
|
}
|
|
6
|
-
//# sourceMappingURL=compose.js.map
|
|
6
|
+
//# sourceMappingURL=compose.js.map
|
package/lib/compressible.d.ts
CHANGED
|
@@ -9,8 +9,5 @@ import type { UseTokens } from './useTokens';
|
|
|
9
9
|
* @param useTokens a hook function to build a set of tokens from a passed in theme as well as a cache object
|
|
10
10
|
* @returns A tree compressed function component with the `.customize` method exposed to it
|
|
11
11
|
*/
|
|
12
|
-
export declare function compressible<TProps, TTokens>(
|
|
13
|
-
|
|
14
|
-
useTokens: UseTokens<TTokens>,
|
|
15
|
-
): CustomizableComponent<TProps, TTokens, Theme>;
|
|
16
|
-
//# sourceMappingURL=compressible.d.ts.map
|
|
12
|
+
export declare function compressible<TProps, TTokens>(fn: StagedRender<TProps>, useTokens: UseTokens<TTokens>): CustomizableComponent<TProps, TTokens, Theme>;
|
|
13
|
+
//# sourceMappingURL=compressible.d.ts.map
|
package/lib/compressible.js
CHANGED
|
@@ -7,12 +7,12 @@ import { stagedComponent } from '@fluentui-react-native/framework-base';
|
|
|
7
7
|
* @returns A tree compressed function component with the `.customize` method exposed to it
|
|
8
8
|
*/
|
|
9
9
|
export function compressible(fn, useTokens) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
const injectedWrapper = (props) => fn(props, useTokens);
|
|
11
|
+
const component = stagedComponent(injectedWrapper);
|
|
12
|
+
component.customize = (...tokens) => {
|
|
13
|
+
const useTokensNew = useTokens.customize(...tokens);
|
|
14
|
+
return compressible(fn, useTokensNew);
|
|
15
|
+
};
|
|
16
|
+
return component;
|
|
17
17
|
}
|
|
18
|
-
//# sourceMappingURL=compressible.js.map
|
|
18
|
+
//# sourceMappingURL=compressible.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=compressible.test.d.ts.map
|
|
2
|
+
//# sourceMappingURL=compressible.test.d.ts.map
|
package/lib/compressible.test.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui-react-native/framework-base/jsx-runtime";
|
|
2
2
|
import { act } from 'react';
|
|
3
3
|
import { Text, View } from 'react-native';
|
|
4
4
|
import { mergeStyles } from '@fluentui-react-native/framework-base';
|
|
@@ -8,80 +8,75 @@ import * as renderer from 'react-test-renderer';
|
|
|
8
8
|
import { compressible } from './compressible';
|
|
9
9
|
import { buildUseTokens } from './useTokens';
|
|
10
10
|
const useVariantTokens = buildUseTokens({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
color: 'black',
|
|
12
|
+
fontSize: 12,
|
|
13
|
+
fontWeight: '500',
|
|
14
|
+
defaultType: 'normal',
|
|
15
|
+
header: {
|
|
16
|
+
color: 'blue',
|
|
17
|
+
fontSize: 16,
|
|
18
|
+
fontWeight: '700',
|
|
19
|
+
},
|
|
20
|
+
caption: {
|
|
21
|
+
color: 'gray',
|
|
22
|
+
fontWeight: '300',
|
|
23
|
+
},
|
|
24
24
|
});
|
|
25
25
|
const VariantText = compressible((props, useTokens) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
26
|
+
// fake theme here
|
|
27
|
+
const theme = {};
|
|
28
|
+
// get the tokens
|
|
29
|
+
let [tokens, cache] = useTokens(theme);
|
|
30
|
+
// split the props, defaulting the variant type to the default type from the tokens
|
|
31
|
+
const { variant = tokens.defaultType, style, ...rest } = props;
|
|
32
|
+
// now apply the alternate layer tokens as appropriate
|
|
33
|
+
[tokens, cache] = applyTokenLayers(tokens, ['normal', 'header', 'caption'], cache, (layer) => layer === variant);
|
|
34
|
+
// merge styles together with what is passed in
|
|
35
|
+
const mergedStyle = mergeStyles({ color: tokens.color, fontSize: tokens.fontSize, fontWeight: tokens.fontWeight }, style);
|
|
36
|
+
// now get the slot
|
|
37
|
+
const InnerText = useSlot(Text, { ...rest, style: mergedStyle });
|
|
38
|
+
return (extra, children) => {
|
|
39
|
+
return _jsx(InnerText, { ...extra, children: children });
|
|
40
|
+
};
|
|
41
41
|
}, useVariantTokens);
|
|
42
42
|
const SuperHeader = VariantText.customize({ header: { fontSize: 24, color: 'purple' } });
|
|
43
43
|
const useLabelTokens = buildUseTokens({
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
headerVariant: 'header',
|
|
45
|
+
captionVariant: 'caption',
|
|
46
46
|
});
|
|
47
47
|
const Label = compressible((props, useTokens) => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
48
|
+
const theme = {};
|
|
49
|
+
const [tokens] = useTokens(theme);
|
|
50
|
+
const { headerText, captionText, headerSlot, captionSlot } = props;
|
|
51
|
+
const Header = useSlot(headerSlot || VariantText, { variant: tokens.headerVariant });
|
|
52
|
+
const Caption = useSlot(captionSlot || VariantText, { variant: tokens.captionVariant });
|
|
53
|
+
return () => {
|
|
54
|
+
if (captionText) {
|
|
55
|
+
return (_jsxs(View, { children: [
|
|
56
|
+
_jsx(Header, { children: headerText }), _jsx(Caption, { children: captionText })
|
|
57
|
+
] }));
|
|
58
|
+
}
|
|
59
|
+
return _jsx(Header, { children: headerText });
|
|
60
|
+
};
|
|
59
61
|
}, useLabelTokens);
|
|
60
62
|
describe('compressible tests', () => {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
})
|
|
68
|
-
|
|
63
|
+
it('Two labels, one with caption and one without', () => {
|
|
64
|
+
let component;
|
|
65
|
+
act(() => {
|
|
66
|
+
component = renderer.create(_jsxs(View, { children: [
|
|
67
|
+
_jsx(Label, { headerText: "Header1" }), _jsx(Label, { headerText: "Header2", captionText: "Caption2" })
|
|
68
|
+
] }));
|
|
69
|
+
});
|
|
70
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
69
71
|
});
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
_jsx(Label, { headerText: 'Super Header', headerSlot: SuperHeader, captionText: 'Normal caption' }),
|
|
79
|
-
_jsx(Label, { headerText: 'Normal Header', captionText: 'Another normal caption' }),
|
|
80
|
-
],
|
|
81
|
-
}),
|
|
82
|
-
);
|
|
72
|
+
it('Two labels, one plugging in SuperHeader instead', () => {
|
|
73
|
+
let component;
|
|
74
|
+
act(() => {
|
|
75
|
+
component = renderer.create(_jsxs(View, { children: [
|
|
76
|
+
_jsx(Label, { headerText: "Super Header", headerSlot: SuperHeader, captionText: "Normal caption" }), _jsx(Label, { headerText: "Normal Header", captionText: "Another normal caption" })
|
|
77
|
+
] }));
|
|
78
|
+
});
|
|
79
|
+
expect(component.toJSON()).toMatchSnapshot();
|
|
83
80
|
});
|
|
84
|
-
expect(component.toJSON()).toMatchSnapshot();
|
|
85
|
-
});
|
|
86
81
|
});
|
|
87
|
-
//# sourceMappingURL=compressible.test.js.map
|
|
82
|
+
//# sourceMappingURL=compressible.test.js.map
|
package/lib/index.d.ts
CHANGED
|
@@ -2,89 +2,19 @@ export type { GetMemoValue, GetTypedMemoValue } from '@fluentui-react-native/fra
|
|
|
2
2
|
export { getMemoCache, getTypedMemoCache, memoize } from '@fluentui-react-native/framework-base';
|
|
3
3
|
export type { StyleProp } from '@fluentui-react-native/framework-base';
|
|
4
4
|
export { mergeProps, mergeStyles } from '@fluentui-react-native/framework-base';
|
|
5
|
-
export {
|
|
6
|
-
|
|
7
|
-
borderStyles,
|
|
8
|
-
borderTokens,
|
|
9
|
-
colorTokens,
|
|
10
|
-
fontStyles,
|
|
11
|
-
foregroundColorTokens,
|
|
12
|
-
getPaletteFromTheme,
|
|
13
|
-
layoutStyles,
|
|
14
|
-
layoutTokens,
|
|
15
|
-
shadowStyles,
|
|
16
|
-
shadowTokens,
|
|
17
|
-
textTokens,
|
|
18
|
-
tokenBuilder,
|
|
19
|
-
} from '@fluentui-react-native/tokens';
|
|
20
|
-
export type {
|
|
21
|
-
FontStyleTokens,
|
|
22
|
-
FontTokens,
|
|
23
|
-
FontVariantTokens,
|
|
24
|
-
IBackgroundColorTokens,
|
|
25
|
-
IBorderTokens,
|
|
26
|
-
IColorTokens,
|
|
27
|
-
IForegroundColorTokens,
|
|
28
|
-
IShadowTokens,
|
|
29
|
-
LayoutTokens,
|
|
30
|
-
TokenBuilder,
|
|
31
|
-
} from '@fluentui-react-native/tokens';
|
|
5
|
+
export { backgroundColorTokens, borderStyles, borderTokens, colorTokens, fontStyles, foregroundColorTokens, getPaletteFromTheme, layoutStyles, layoutTokens, shadowStyles, shadowTokens, textTokens, tokenBuilder, } from '@fluentui-react-native/tokens';
|
|
6
|
+
export type { FontStyleTokens, FontTokens, FontVariantTokens, IBackgroundColorTokens, IBorderTokens, IColorTokens, IForegroundColorTokens, IShadowTokens, LayoutTokens, TokenBuilder, } from '@fluentui-react-native/tokens';
|
|
32
7
|
export { useSlot } from '@fluentui-react-native/use-slot';
|
|
33
8
|
export { renderSlot, stagedComponent, withSlots } from '@fluentui-react-native/framework-base';
|
|
34
9
|
export type { ComposableFunction, FinalRender, NativeReactType, SlotFn, StagedRender } from '@fluentui-react-native/framework-base';
|
|
35
10
|
export { buildUseSlots } from '@fluentui-react-native/use-slots';
|
|
36
11
|
export type { GetSlotProps, Slots, UseSlotOptions, UseSlotsBase } from '@fluentui-react-native/use-slots';
|
|
37
12
|
export { immutableMerge, immutableMergeCore, processImmutable } from '@fluentui-react-native/framework-base';
|
|
38
|
-
export type {
|
|
39
|
-
BuiltinRecursionHandlers,
|
|
40
|
-
CustomRecursionHandler,
|
|
41
|
-
MergeOptions,
|
|
42
|
-
ObjectBase,
|
|
43
|
-
RecursionHandler,
|
|
44
|
-
RecursionOption,
|
|
45
|
-
} from '@fluentui-react-native/framework-base';
|
|
13
|
+
export type { BuiltinRecursionHandlers, CustomRecursionHandler, MergeOptions, ObjectBase, RecursionHandler, RecursionOption, } from '@fluentui-react-native/framework-base';
|
|
46
14
|
export { ThemeContext, useTheme } from '@fluentui-react-native/theme-types';
|
|
47
|
-
export type {
|
|
48
|
-
AliasColorTokens,
|
|
49
|
-
AppearanceOptions,
|
|
50
|
-
Color,
|
|
51
|
-
FontFamilies,
|
|
52
|
-
FontFamily,
|
|
53
|
-
FontFamilyValue,
|
|
54
|
-
FontSize,
|
|
55
|
-
FontSizeValuePoints,
|
|
56
|
-
FontSizes,
|
|
57
|
-
FontWeight,
|
|
58
|
-
FontWeightValue,
|
|
59
|
-
FontWeights,
|
|
60
|
-
OfficePalette,
|
|
61
|
-
Palette,
|
|
62
|
-
PaletteBackgroundColors,
|
|
63
|
-
PaletteTextColors,
|
|
64
|
-
PartialPalette,
|
|
65
|
-
PartialTheme,
|
|
66
|
-
PartialTypography,
|
|
67
|
-
Spacing,
|
|
68
|
-
TextStyling,
|
|
69
|
-
Theme,
|
|
70
|
-
ThemeColorDefinition,
|
|
71
|
-
ThemeOptions,
|
|
72
|
-
Typography,
|
|
73
|
-
Variant,
|
|
74
|
-
VariantValue,
|
|
75
|
-
Variants,
|
|
76
|
-
} from '@fluentui-react-native/theme-types';
|
|
15
|
+
export type { AliasColorTokens, AppearanceOptions, Color, FontFamilies, FontFamily, FontFamilyValue, FontSize, FontSizeValuePoints, FontSizes, FontWeight, FontWeightValue, FontWeights, OfficePalette, Palette, PaletteBackgroundColors, PaletteTextColors, PartialPalette, PartialTheme, PartialTypography, Spacing, TextStyling, Theme, ThemeColorDefinition, ThemeOptions, Typography, Variant, VariantValue, Variants, } from '@fluentui-react-native/theme-types';
|
|
77
16
|
export { compose } from './compose';
|
|
78
|
-
export type {
|
|
79
|
-
ComposableComponent,
|
|
80
|
-
ComposeOptions,
|
|
81
|
-
ComposeType,
|
|
82
|
-
ExtractProps,
|
|
83
|
-
ExtractSlotProps,
|
|
84
|
-
ExtractStatics,
|
|
85
|
-
ExtractTokens,
|
|
86
|
-
UseSlots,
|
|
87
|
-
} from './compose';
|
|
17
|
+
export type { ComposableComponent, ComposeOptions, ComposeType, ExtractProps, ExtractSlotProps, ExtractStatics, ExtractTokens, UseSlots, } from './compose';
|
|
88
18
|
export { compressible } from './compressible';
|
|
89
19
|
export { useFluentTheme } from './useFluentTheme';
|
|
90
20
|
export type { HasLayer, TokensThatAreAlsoProps, UseStyling } from './useStyling';
|
|
@@ -92,4 +22,4 @@ export { buildProps, buildUseStyling } from './useStyling';
|
|
|
92
22
|
export type { BuildProps, TokenSettings, TokensFromTheme, UseStylingOptions } from './useStyling';
|
|
93
23
|
export { applyPropsToTokens, applyTokenLayers, buildUseTokens, customizable, patchTokens } from './useTokens';
|
|
94
24
|
export type { UseTokens, CustomizableComponent } from './useTokens';
|
|
95
|
-
//# sourceMappingURL=index.d.ts.map
|
|
25
|
+
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.js
CHANGED
|
@@ -1,20 +1,6 @@
|
|
|
1
1
|
export { getMemoCache, getTypedMemoCache, memoize } from '@fluentui-react-native/framework-base';
|
|
2
2
|
export { mergeProps, mergeStyles } from '@fluentui-react-native/framework-base';
|
|
3
|
-
export {
|
|
4
|
-
backgroundColorTokens,
|
|
5
|
-
borderStyles,
|
|
6
|
-
borderTokens,
|
|
7
|
-
colorTokens,
|
|
8
|
-
fontStyles,
|
|
9
|
-
foregroundColorTokens,
|
|
10
|
-
getPaletteFromTheme,
|
|
11
|
-
layoutStyles,
|
|
12
|
-
layoutTokens,
|
|
13
|
-
shadowStyles,
|
|
14
|
-
shadowTokens,
|
|
15
|
-
textTokens,
|
|
16
|
-
tokenBuilder,
|
|
17
|
-
} from '@fluentui-react-native/tokens';
|
|
3
|
+
export { backgroundColorTokens, borderStyles, borderTokens, colorTokens, fontStyles, foregroundColorTokens, getPaletteFromTheme, layoutStyles, layoutTokens, shadowStyles, shadowTokens, textTokens, tokenBuilder, } from '@fluentui-react-native/tokens';
|
|
18
4
|
export { useSlot } from '@fluentui-react-native/use-slot';
|
|
19
5
|
export { renderSlot, stagedComponent, withSlots } from '@fluentui-react-native/framework-base';
|
|
20
6
|
export { buildUseSlots } from '@fluentui-react-native/use-slots';
|
|
@@ -25,4 +11,4 @@ export { compressible } from './compressible';
|
|
|
25
11
|
export { useFluentTheme } from './useFluentTheme';
|
|
26
12
|
export { buildProps, buildUseStyling } from './useStyling';
|
|
27
13
|
export { applyPropsToTokens, applyTokenLayers, buildUseTokens, customizable, patchTokens } from './useTokens';
|
|
28
|
-
//# sourceMappingURL=index.js.map
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
package/lib/themeHelper.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@fluentui-react-native/theme-types';
|
|
2
2
|
import type { ThemeHelper } from '@fluentui-react-native/use-styling';
|
|
3
3
|
export declare const themeHelper: ThemeHelper<Theme>;
|
|
4
|
-
//# sourceMappingURL=themeHelper.d.ts.map
|
|
4
|
+
//# sourceMappingURL=themeHelper.d.ts.map
|
package/lib/themeHelper.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { useFluentTheme } from './useFluentTheme';
|
|
2
2
|
export const themeHelper = {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
useTheme: () => useFluentTheme(),
|
|
4
|
+
getComponentInfo: (theme, name) => {
|
|
5
|
+
const components = theme.components || {};
|
|
6
|
+
return components[name];
|
|
7
|
+
},
|
|
8
8
|
};
|
|
9
|
-
//# sourceMappingURL=themeHelper.js.map
|
|
9
|
+
//# sourceMappingURL=themeHelper.js.map
|
package/lib/useFluentTheme.d.ts
CHANGED
package/lib/useFluentTheme.js
CHANGED
|
@@ -6,6 +6,6 @@ import { useTheme } from '@fluentui-react-native/theme-types';
|
|
|
6
6
|
* @returns - a valid Theme object
|
|
7
7
|
*/
|
|
8
8
|
export function useFluentTheme() {
|
|
9
|
-
|
|
9
|
+
return useTheme() || defaultFluentTheme;
|
|
10
10
|
}
|
|
11
|
-
//# sourceMappingURL=useFluentTheme.js.map
|
|
11
|
+
//# sourceMappingURL=useFluentTheme.js.map
|
package/lib/useStyling.d.ts
CHANGED
|
@@ -4,18 +4,9 @@
|
|
|
4
4
|
*/
|
|
5
5
|
export type { TokensThatAreAlsoProps, HasLayer, UseStyling } from '@fluentui-react-native/use-styling';
|
|
6
6
|
import type { Theme } from '@fluentui-react-native/theme-types';
|
|
7
|
-
import type {
|
|
8
|
-
TokensFromTheme as TokensFromThemeBase,
|
|
9
|
-
TokenSettings as TokenSettingsBase,
|
|
10
|
-
UseStylingOptions as UseStylingOptionsBase,
|
|
11
|
-
UseStyling,
|
|
12
|
-
BuildPropsBase,
|
|
13
|
-
} from '@fluentui-react-native/use-styling';
|
|
7
|
+
import type { TokensFromTheme as TokensFromThemeBase, TokenSettings as TokenSettingsBase, UseStylingOptions as UseStylingOptionsBase, UseStyling, BuildPropsBase } from '@fluentui-react-native/use-styling';
|
|
14
8
|
export type BuildProps<TProps, TTokens> = BuildPropsBase<TProps, TTokens, Theme>;
|
|
15
|
-
export declare function buildProps<TProps, TTokens>(
|
|
16
|
-
fn: (tokens: TTokens, theme: Theme) => TProps,
|
|
17
|
-
keys?: (keyof TTokens)[],
|
|
18
|
-
): BuildProps<TProps, TTokens>;
|
|
9
|
+
export declare function buildProps<TProps, TTokens>(fn: (tokens: TTokens, theme: Theme) => TProps, keys?: (keyof TTokens)[]): BuildProps<TProps, TTokens>;
|
|
19
10
|
export type TokensFromTheme<TTokens> = TokensFromThemeBase<TTokens, Theme>;
|
|
20
11
|
export type TokenSettings<TTokens> = TokenSettingsBase<TTokens, Theme>;
|
|
21
12
|
export type UseStylingOptions<TProps, TSlotProps, TTokens> = UseStylingOptionsBase<TProps, TSlotProps, TTokens, Theme>;
|
|
@@ -24,7 +15,5 @@ export type UseStylingOptions<TProps, TSlotProps, TTokens> = UseStylingOptionsBa
|
|
|
24
15
|
*
|
|
25
16
|
* @param options - options which drive behavior for the generated styling hook
|
|
26
17
|
*/
|
|
27
|
-
export declare function buildUseStyling<TProps, TSlotProps, TTokens>(
|
|
28
|
-
|
|
29
|
-
): UseStyling<TProps, TSlotProps>;
|
|
30
|
-
//# sourceMappingURL=useStyling.d.ts.map
|
|
18
|
+
export declare function buildUseStyling<TProps, TSlotProps, TTokens>(options: UseStylingOptions<TProps, TSlotProps, TTokens>): UseStyling<TProps, TSlotProps>;
|
|
19
|
+
//# sourceMappingURL=useStyling.d.ts.map
|
package/lib/useStyling.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { buildUseStyling as buildUseStylingBase, buildProps as buildPropsBase } from '@fluentui-react-native/use-styling';
|
|
2
2
|
import { themeHelper } from './themeHelper';
|
|
3
3
|
export function buildProps(fn, keys) {
|
|
4
|
-
|
|
4
|
+
return buildPropsBase(fn, keys);
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
7
|
* Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
|
|
@@ -9,7 +9,7 @@ export function buildProps(fn, keys) {
|
|
|
9
9
|
* @param options - options which drive behavior for the generated styling hook
|
|
10
10
|
*/
|
|
11
11
|
export function buildUseStyling(options) {
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
// create a cache instance for this use styling implementation
|
|
13
|
+
return buildUseStylingBase(options, themeHelper);
|
|
14
14
|
}
|
|
15
|
-
//# sourceMappingURL=useStyling.js.map
|
|
15
|
+
//# sourceMappingURL=useStyling.js.map
|
package/lib/useTokens.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ export { applyTokenLayers, applyPropsToTokens, customizable, patchTokens } from
|
|
|
5
5
|
export type UseTokens<TTokens> = UseTokensCore<TTokens, Theme>;
|
|
6
6
|
export type { CustomizableComponent } from '@fluentui-react-native/use-tokens';
|
|
7
7
|
export declare function buildUseTokens<TTokens>(...tokens: TokenSettings<TTokens>[]): UseTokens<TTokens>;
|
|
8
|
-
//# sourceMappingURL=useTokens.d.ts.map
|
|
8
|
+
//# sourceMappingURL=useTokens.d.ts.map
|
package/lib/useTokens.js
CHANGED
|
@@ -2,6 +2,6 @@ import { buildUseTokens as buildUseTokensCore } from '@fluentui-react-native/use
|
|
|
2
2
|
import { themeHelper } from './themeHelper';
|
|
3
3
|
export { applyTokenLayers, applyPropsToTokens, customizable, patchTokens } from '@fluentui-react-native/use-tokens';
|
|
4
4
|
export function buildUseTokens(...tokens) {
|
|
5
|
-
|
|
5
|
+
return buildUseTokensCore(themeHelper.getComponentInfo, ...tokens);
|
|
6
6
|
}
|
|
7
|
-
//# sourceMappingURL=useTokens.js.map
|
|
7
|
+
//# sourceMappingURL=useTokens.js.map
|
|
@@ -6,47 +6,32 @@ import type { ObjectBase } from '@fluentui-react-native/framework-base';
|
|
|
6
6
|
* the type via the IComposableType interface, this is simply the format used to extract the type info.
|
|
7
7
|
*/
|
|
8
8
|
export interface ComposeType<TProps, TSlotProps, TTokens, TStatics = ObjectBase> {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
props: TProps;
|
|
10
|
+
slotProps: TSlotProps;
|
|
11
|
+
tokens: TTokens;
|
|
12
|
+
statics: TStatics;
|
|
13
13
|
}
|
|
14
14
|
/** fragments used in type extraction */
|
|
15
15
|
type PropsFragment<TProps> = {
|
|
16
|
-
|
|
16
|
+
props: TProps;
|
|
17
17
|
};
|
|
18
18
|
type SlotPropsFragment<TSlotProps> = {
|
|
19
|
-
|
|
19
|
+
slotProps: TSlotProps;
|
|
20
20
|
};
|
|
21
21
|
type TokensFragment<TTokens> = {
|
|
22
|
-
|
|
22
|
+
tokens: TTokens;
|
|
23
23
|
};
|
|
24
24
|
type StaticsFragment<TStatics extends ObjectBase> = {
|
|
25
|
-
|
|
25
|
+
statics: TStatics;
|
|
26
26
|
};
|
|
27
27
|
/** Extraction types that get the various interface types from IComposableType */
|
|
28
28
|
export type ExtractProps<T> = T extends PropsFragment<infer U> ? U : never;
|
|
29
29
|
export type ExtractSlotProps<T> = T extends SlotPropsFragment<infer U> ? U : never;
|
|
30
30
|
export type ExtractTokens<T> = T extends TokensFragment<infer U> ? U : ObjectBase;
|
|
31
31
|
export type ExtractStatics<T> = T extends StaticsFragment<infer U> ? U : ObjectBase;
|
|
32
|
-
export type ComposeOptions<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryOptions<
|
|
33
|
-
|
|
34
|
-
TSlotProps,
|
|
35
|
-
TTokens,
|
|
36
|
-
Theme,
|
|
37
|
-
TStatics
|
|
38
|
-
>;
|
|
39
|
-
export type ComposableComponent<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryComponent<
|
|
40
|
-
TProps,
|
|
41
|
-
TSlotProps,
|
|
42
|
-
TTokens,
|
|
43
|
-
Theme,
|
|
44
|
-
TStatics
|
|
45
|
-
>;
|
|
32
|
+
export type ComposeOptions<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryOptions<TProps, TSlotProps, TTokens, Theme, TStatics>;
|
|
33
|
+
export type ComposableComponent<TProps, TSlotProps, TTokens, TStatics extends ObjectBase> = ComposeFactoryComponent<TProps, TSlotProps, TTokens, Theme, TStatics>;
|
|
46
34
|
export type UseSlots<T> = UseStyledSlots<ExtractProps<T>, ExtractSlotProps<T>>;
|
|
47
|
-
export declare function compose<T>(
|
|
48
|
-
options: ComposeOptions<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>,
|
|
49
|
-
base?: ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>,
|
|
50
|
-
): ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>;
|
|
35
|
+
export declare function compose<T>(options: ComposeOptions<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>, base?: ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>): ComposableComponent<ExtractProps<T>, ExtractSlotProps<T>, ExtractTokens<T>, ExtractStatics<T>>;
|
|
51
36
|
export {};
|
|
52
|
-
//# sourceMappingURL=compose.d.ts.map
|
|
37
|
+
//# sourceMappingURL=compose.d.ts.map
|
package/lib-commonjs/compose.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.compose = compose;
|
|
4
|
-
const composition_1 = require(
|
|
5
|
-
const themeHelper_1 = require(
|
|
4
|
+
const composition_1 = require("@fluentui-react-native/composition");
|
|
5
|
+
const themeHelper_1 = require("./themeHelper");
|
|
6
6
|
function compose(options, base) {
|
|
7
|
-
|
|
7
|
+
return (0, composition_1.composeFactory)(options, themeHelper_1.themeHelper, base);
|
|
8
8
|
}
|
|
9
|
-
//# sourceMappingURL=compose.js.map
|
|
9
|
+
//# sourceMappingURL=compose.js.map
|
|
@@ -9,8 +9,5 @@ import type { UseTokens } from './useTokens';
|
|
|
9
9
|
* @param useTokens a hook function to build a set of tokens from a passed in theme as well as a cache object
|
|
10
10
|
* @returns A tree compressed function component with the `.customize` method exposed to it
|
|
11
11
|
*/
|
|
12
|
-
export declare function compressible<TProps, TTokens>(
|
|
13
|
-
|
|
14
|
-
useTokens: UseTokens<TTokens>,
|
|
15
|
-
): CustomizableComponent<TProps, TTokens, Theme>;
|
|
16
|
-
//# sourceMappingURL=compressible.d.ts.map
|
|
12
|
+
export declare function compressible<TProps, TTokens>(fn: StagedRender<TProps>, useTokens: UseTokens<TTokens>): CustomizableComponent<TProps, TTokens, Theme>;
|
|
13
|
+
//# sourceMappingURL=compressible.d.ts.map
|