@fluentui-react-native/framework 0.15.0 → 0.15.3

package/lib-commonjs/compressible.js

@@ -1,7 +1,7 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.compressible = compressible;
-const framework_base_1 = require('@fluentui-react-native/framework-base');
+const framework_base_1 = require("@fluentui-react-native/framework-base");
 /**
  * Utility function which can create function components that can be tree compressed (using the stagedRender pattern),
  * and also have customize functionality.
@@ -10,12 +10,12 @@ const framework_base_1 = require('@fluentui-react-native/framework-base');
  * @returns A tree compressed function component with the `.customize` method exposed to it
  */
 function compressible(fn, useTokens) {
-  const injectedWrapper = (props) => fn(props, useTokens);
-  const component = (0, framework_base_1.stagedComponent)(injectedWrapper);
-  component.customize = (...tokens) => {
-    const useTokensNew = useTokens.customize(...tokens);
-    return compressible(fn, useTokensNew);
-  };
-  return component;
+    const injectedWrapper = (props) => fn(props, useTokens);
+    const component = (0, framework_base_1.stagedComponent)(injectedWrapper);
+    component.customize = (...tokens) => {
+        const useTokensNew = useTokens.customize(...tokens);
+        return compressible(fn, useTokensNew);
+    };
+    return component;
 }
-//# sourceMappingURL=compressible.js.map
+//# sourceMappingURL=compressible.js.map

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

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

package/lib-commonjs/compressible.test.js

@@ -1,147 +1,117 @@
-'use strict';
-var __createBinding =
-  (this && this.__createBinding) ||
-  (Object.create
-    ? function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-          desc = {
-            enumerable: true,
-            get: function () {
-              return m[k];
-            },
-          };
-        }
-        Object.defineProperty(o, k2, desc);
-      }
-    : function (o, m, k, k2) {
-        if (k2 === undefined) k2 = k;
-        o[k2] = m[k];
-      });
-var __setModuleDefault =
-  (this && this.__setModuleDefault) ||
-  (Object.create
-    ? function (o, v) {
-        Object.defineProperty(o, 'default', { enumerable: true, value: v });
-      }
-    : function (o, v) {
-        o['default'] = v;
-      });
-var __importStar =
-  (this && this.__importStar) ||
-  (function () {
-    var ownKeys = function (o) {
-      ownKeys =
-        Object.getOwnPropertyNames ||
-        function (o) {
-          var ar = [];
-          for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-          return ar;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
         };
-      return ownKeys(o);
+        return ownKeys(o);
     };
     return function (mod) {
-      if (mod && mod.__esModule) return mod;
-      var result = {};
-      if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== 'default') __createBinding(result, mod, k[i]);
-      __setModuleDefault(result, mod);
-      return result;
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
     };
-  })();
-Object.defineProperty(exports, '__esModule', { value: true });
-const jsx_runtime_1 = require('@fluentui-react-native/framework-base/jsx-runtime');
-const react_1 = require('react');
-const react_native_1 = require('react-native');
-const framework_base_1 = require('@fluentui-react-native/framework-base');
-const use_slot_1 = require('@fluentui-react-native/use-slot');
-const use_tokens_1 = require('@fluentui-react-native/use-tokens');
-const renderer = __importStar(require('react-test-renderer'));
-const compressible_1 = require('./compressible');
-const useTokens_1 = require('./useTokens');
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@fluentui-react-native/framework-base/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const framework_base_1 = require("@fluentui-react-native/framework-base");
+const use_slot_1 = require("@fluentui-react-native/use-slot");
+const use_tokens_1 = require("@fluentui-react-native/use-tokens");
+const renderer = __importStar(require("react-test-renderer"));
+const compressible_1 = require("./compressible");
+const useTokens_1 = require("./useTokens");
 const useVariantTokens = (0, useTokens_1.buildUseTokens)({
-  color: 'black',
-  fontSize: 12,
-  fontWeight: '500',
-  defaultType: 'normal',
-  header: {
-    color: 'blue',
-    fontSize: 16,
-    fontWeight: '700',
-  },
-  caption: {
-    color: 'gray',
-    fontWeight: '300',
-  },
+    color: 'black',
+    fontSize: 12,
+    fontWeight: '500',
+    defaultType: 'normal',
+    header: {
+        color: 'blue',
+        fontSize: 16,
+        fontWeight: '700',
+    },
+    caption: {
+        color: 'gray',
+        fontWeight: '300',
+    },
 });
 const VariantText = (0, compressible_1.compressible)((props, useTokens) => {
-  // fake theme here
-  const theme = {};
-  // get the tokens
-  let [tokens, cache] = useTokens(theme);
-  // split the props, defaulting the variant type to the default type from the tokens
-  const { variant = tokens.defaultType, style, ...rest } = props;
-  // now apply the alternate layer tokens as appropriate
-  [tokens, cache] = (0, use_tokens_1.applyTokenLayers)(tokens, ['normal', 'header', 'caption'], cache, (layer) => layer === variant);
-  // merge styles together with what is passed in
-  const mergedStyle = (0, framework_base_1.mergeStyles)(
-    { color: tokens.color, fontSize: tokens.fontSize, fontWeight: tokens.fontWeight },
-    style,
-  );
-  // now get the slot
-  const InnerText = (0, use_slot_1.useSlot)(react_native_1.Text, { ...rest, style: mergedStyle });
-  return (extra, children) => {
-    return jsx_runtime_1.jsx(InnerText, { ...extra, children: children });
-  };
+    // fake theme here
+    const theme = {};
+    // get the tokens
+    let [tokens, cache] = useTokens(theme);
+    // split the props, defaulting the variant type to the default type from the tokens
+    const { variant = tokens.defaultType, style, ...rest } = props;
+    // now apply the alternate layer tokens as appropriate
+    [tokens, cache] = (0, use_tokens_1.applyTokenLayers)(tokens, ['normal', 'header', 'caption'], cache, (layer) => layer === variant);
+    // merge styles together with what is passed in
+    const mergedStyle = (0, framework_base_1.mergeStyles)({ color: tokens.color, fontSize: tokens.fontSize, fontWeight: tokens.fontWeight }, style);
+    // now get the slot
+    const InnerText = (0, use_slot_1.useSlot)(react_native_1.Text, { ...rest, style: mergedStyle });
+    return (extra, children) => {
+        return jsx_runtime_1.jsx(InnerText, { ...extra, children: children });
+    };
 }, useVariantTokens);
 const SuperHeader = VariantText.customize({ header: { fontSize: 24, color: 'purple' } });
 const useLabelTokens = (0, useTokens_1.buildUseTokens)({
-  headerVariant: 'header',
-  captionVariant: 'caption',
+    headerVariant: 'header',
+    captionVariant: 'caption',
 });
 const Label = (0, compressible_1.compressible)((props, useTokens) => {
-  const theme = {};
-  const [tokens] = useTokens(theme);
-  const { headerText, captionText, headerSlot, captionSlot } = props;
-  const Header = (0, use_slot_1.useSlot)(headerSlot || VariantText, { variant: tokens.headerVariant });
-  const Caption = (0, use_slot_1.useSlot)(captionSlot || VariantText, { variant: tokens.captionVariant });
-  return () => {
-    if (captionText) {
-      return jsx_runtime_1.jsxs(react_native_1.View, {
-        children: [jsx_runtime_1.jsx(Header, { children: headerText }), jsx_runtime_1.jsx(Caption, { children: captionText })],
-      });
-    }
-    return jsx_runtime_1.jsx(Header, { children: headerText });
-  };
+    const theme = {};
+    const [tokens] = useTokens(theme);
+    const { headerText, captionText, headerSlot, captionSlot } = props;
+    const Header = (0, use_slot_1.useSlot)(headerSlot || VariantText, { variant: tokens.headerVariant });
+    const Caption = (0, use_slot_1.useSlot)(captionSlot || VariantText, { variant: tokens.captionVariant });
+    return () => {
+        if (captionText) {
+            return (jsx_runtime_1.jsxs(react_native_1.View, { children: [
+                    jsx_runtime_1.jsx(Header, { children: headerText }), jsx_runtime_1.jsx(Caption, { children: captionText })
+                ] }));
+        }
+        return jsx_runtime_1.jsx(Header, { children: headerText });
+    };
 }, useLabelTokens);
 describe('compressible tests', () => {
-  it('Two labels, one with caption and one without', () => {
-    let component;
-    (0, react_1.act)(() => {
-      component = renderer.create(
-        jsx_runtime_1.jsxs(react_native_1.View, {
-          children: [
-            jsx_runtime_1.jsx(Label, { headerText: 'Header1' }),
-            jsx_runtime_1.jsx(Label, { headerText: 'Header2', captionText: 'Caption2' }),
-          ],
-        }),
-      );
+    it('Two labels, one with caption and one without', () => {
+        let component;
+        (0, react_1.act)(() => {
+            component = renderer.create(jsx_runtime_1.jsxs(react_native_1.View, { children: [
+                    jsx_runtime_1.jsx(Label, { headerText: "Header1" }), jsx_runtime_1.jsx(Label, { headerText: "Header2", captionText: "Caption2" })
+                ] }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-  it('Two labels, one plugging in SuperHeader instead', () => {
-    let component;
-    (0, react_1.act)(() => {
-      component = renderer.create(
-        jsx_runtime_1.jsxs(react_native_1.View, {
-          children: [
-            jsx_runtime_1.jsx(Label, { headerText: 'Super Header', headerSlot: SuperHeader, captionText: 'Normal caption' }),
-            jsx_runtime_1.jsx(Label, { headerText: 'Normal Header', captionText: 'Another normal caption' }),
-          ],
-        }),
-      );
+    it('Two labels, one plugging in SuperHeader instead', () => {
+        let component;
+        (0, react_1.act)(() => {
+            component = renderer.create(jsx_runtime_1.jsxs(react_native_1.View, { children: [
+                    jsx_runtime_1.jsx(Label, { headerText: "Super Header", headerSlot: SuperHeader, captionText: "Normal caption" }), jsx_runtime_1.jsx(Label, { headerText: "Normal Header", captionText: "Another normal caption" })
+                ] }));
+        });
+        expect(component.toJSON()).toMatchSnapshot();
     });
-    expect(component.toJSON()).toMatchSnapshot();
-  });
 });
-//# sourceMappingURL=compressible.test.js.map
+//# sourceMappingURL=compressible.test.js.map

package/lib-commonjs/index.d.ts

@@ -2,89 +2,19 @@ export type { GetMemoValue, GetTypedMemoValue } from '@fluentui-react-native/fra
 export { getMemoCache, getTypedMemoCache, memoize } from '@fluentui-react-native/framework-base';
 export type { StyleProp } from '@fluentui-react-native/framework-base';
 export { mergeProps, mergeStyles } from '@fluentui-react-native/framework-base';
-export {
-  backgroundColorTokens,
-  borderStyles,
-  borderTokens,
-  colorTokens,
-  fontStyles,
-  foregroundColorTokens,
-  getPaletteFromTheme,
-  layoutStyles,
-  layoutTokens,
-  shadowStyles,
-  shadowTokens,
-  textTokens,
-  tokenBuilder,
-} from '@fluentui-react-native/tokens';
-export type {
-  FontStyleTokens,
-  FontTokens,
-  FontVariantTokens,
-  IBackgroundColorTokens,
-  IBorderTokens,
-  IColorTokens,
-  IForegroundColorTokens,
-  IShadowTokens,
-  LayoutTokens,
-  TokenBuilder,
-} from '@fluentui-react-native/tokens';
+export { backgroundColorTokens, borderStyles, borderTokens, colorTokens, fontStyles, foregroundColorTokens, getPaletteFromTheme, layoutStyles, layoutTokens, shadowStyles, shadowTokens, textTokens, tokenBuilder, } from '@fluentui-react-native/tokens';
+export type { FontStyleTokens, FontTokens, FontVariantTokens, IBackgroundColorTokens, IBorderTokens, IColorTokens, IForegroundColorTokens, IShadowTokens, LayoutTokens, TokenBuilder, } from '@fluentui-react-native/tokens';
 export { useSlot } from '@fluentui-react-native/use-slot';
 export { renderSlot, stagedComponent, withSlots } from '@fluentui-react-native/framework-base';
 export type { ComposableFunction, FinalRender, NativeReactType, SlotFn, StagedRender } from '@fluentui-react-native/framework-base';
 export { buildUseSlots } from '@fluentui-react-native/use-slots';
 export type { GetSlotProps, Slots, UseSlotOptions, UseSlotsBase } from '@fluentui-react-native/use-slots';
 export { immutableMerge, immutableMergeCore, processImmutable } from '@fluentui-react-native/framework-base';
-export type {
-  BuiltinRecursionHandlers,
-  CustomRecursionHandler,
-  MergeOptions,
-  ObjectBase,
-  RecursionHandler,
-  RecursionOption,
-} from '@fluentui-react-native/framework-base';
+export type { BuiltinRecursionHandlers, CustomRecursionHandler, MergeOptions, ObjectBase, RecursionHandler, RecursionOption, } from '@fluentui-react-native/framework-base';
 export { ThemeContext, useTheme } from '@fluentui-react-native/theme-types';
-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';
+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';
 export { compose } from './compose';
-export type {
-  ComposableComponent,
-  ComposeOptions,
-  ComposeType,
-  ExtractProps,
-  ExtractSlotProps,
-  ExtractStatics,
-  ExtractTokens,
-  UseSlots,
-} from './compose';
+export type { ComposableComponent, ComposeOptions, ComposeType, ExtractProps, ExtractSlotProps, ExtractStatics, ExtractTokens, UseSlots, } from './compose';
 export { compressible } from './compressible';
 export { useFluentTheme } from './useFluentTheme';
 export type { HasLayer, TokensThatAreAlsoProps, UseStyling } from './useStyling';
@@ -92,4 +22,4 @@ export { buildProps, buildUseStyling } from './useStyling';
 export type { BuildProps, TokenSettings, TokensFromTheme, UseStylingOptions } from './useStyling';
 export { applyPropsToTokens, applyTokenLayers, buildUseTokens, customizable, patchTokens } from './useTokens';
 export type { UseTokens, CustomizableComponent } from './useTokens';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map