@uifabric/foundation - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

CHANGELOG.json

@@ -5,2 +5,29 @@ {
     {
+      "version": "0.5.3",
+      "tag": "@uifabric/foundation_v0.5.3",
+      "date": "Fri, 21 Sep 2018 14:25:46 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Adding a version stamp file",
+            "author": "Kenneth Chau <[e-mail]>",
+            "commit": "11c18bce52dba131548610c5eea0c1ab7fa4d1ca"
+          },
+          {
+            "comment": "Support schemes through new schemes prop.",
+            "author": "Jason Gore <[e-mail]>",
+            "commit": "7c45ef96439a8794586a6b338c2b2ee1e7080318"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/set-version\" from `>=1.0.0 <2.0.0` to `>=1.1.0 <2.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/jest-serializer-merge-styles\" from `>=6.0.4 <7.0.0` to `>=6.0.5 <7.0.0`"
+          }
+        ]
+      }
+    },
+    {
       "version": "0.5.2",
@@ -7,0 +34,0 @@ "tag": "@uifabric/foundation_v0.5.2",

CHANGELOG.md

 # Change Log - @uifabric/foundation
 
-This log was last generated on Mon, 17 Sep 2018 12:27:05 GMT and should not be manually modified.
+This log was last generated on Fri, 21 Sep 2018 14:25:46 GMT and should not be manually modified.
 
+## 0.5.3
+Fri, 21 Sep 2018 14:25:46 GMT
+
+### Patches
+
+- Adding a version stamp file
+- Support schemes through new schemes prop.
+
 ## 0.5.2
@@ -6,0 +14,0 @@ Mon, 17 Sep 2018 12:27:05 GMT

dist/foundation.js

@@ -289,2 +289,35 @@ var FabricFoundation =
 
+/***/ "../set-version/lib/index.js":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _setVersion__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../set-version/lib/setVersion.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "setVersion", function() { return _setVersion__WEBPACK_IMPORTED_MODULE_0__["setVersion"]; });
+
+
+
+Object(_setVersion__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/set-version', '6.0.0');
+
+
+/***/ }),
+
+/***/ "../set-version/lib/setVersion.js":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setVersion", function() { return setVersion; });
+function setVersion(packageName, packageVersion) {
+    if (typeof window !== 'undefined') {
+        // tslint:disable-next-line:no-any
+        var packages = (window.__packages__ = window.__packages__ || {});
+        var versions = (packages[packageName] = packages[packageName] || []);
+        versions.push(packageVersion);
+    }
+}
+
+
+/***/ }),
+
 /***/ "./lib/createComponent.js":
@@ -340,3 +373,2 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) {
             var settings = providers.getCustomizations(options.displayName, context);
-            var _a = settings, contextStyles = _a.styles, rest = tslib__WEBPACK_IMPORTED_MODULE_0__["__rest"](_a, ["styles"]);
             var renderView = function (processedProps) {
@@ -346,17 +378,24 @@ // The approach here is to allow state components to provide only the props they care about, automatically
                 //    including children and styles.
-                // TODO: userProps should only override processedProps for controlled props. for all other props, such as callbacks,
-                //    processedProps should always have priority (this is not the case as written now.)
+                // TODO: userProps should only override processedProps for controlled props (and also schemes, styles, theme?)
+                //    for all other props, such as callbacks, processedProps should always have priority (this is not the case as written now.)
                 //    introduce controlled prop marking mechanism so that only controlled userProps override processedProps.
                 // TODO: Should 'rest' props from customizations pass onto view? They're not currently. (props like theme will break snapshots)
-                var propStyles = processedProps.styles || userProps.styles;
-                var styleProps = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, rest, processedProps, userProps);
-                var viewProps = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, processedProps, userProps, {
-                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, propStyles))
+                var mergedProps = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, processedProps, userProps);
+                var newContext = providers.getContextFromProps(mergedProps, context, settings);
+                if (newContext) {
+                    // If we have a new context we need to refresh our settings (to reflect new contextual theme, for example)
+                    settings = providers.getCustomizations(options.displayName, newContext);
+                }
+                var contextStyles = settings.styles, rest = tslib__WEBPACK_IMPORTED_MODULE_0__["__rest"](settings, ["styles"]);
+                var styleProps = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, rest, mergedProps);
+                var viewProps = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, mergedProps, {
+                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, mergedProps.styles))
                 });
-                // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging
-                return options.view(viewProps);
+                // If a new context has been generated, instantiate a Provider to provide it.
+                return newContext ? (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](CustomizerContext.Provider, { value: newContext }, options.view(viewProps))) : (options.view(viewProps));
             };
-            // TODO: What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
-            //        is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
-            //        since userProps does not necessarily extend TViewProps.
+            // What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
+            //  is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
+            //  since userProps does not necessarily extend TViewProps. Until then we're sacrificing a bit of type safety to prevent
+            //  the need of duplicating this function.
             // if (StateComponent) {
@@ -396,5 +435,7 @@ //   type TProcessedProps = TViewProps & IStyleableComponentProps<TViewProps, TStyleSet, TTheme>;
 
+/* harmony import */ var _version__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./lib/version.js");
 
 
 
+
 /***/ }),
@@ -415,2 +456,16 @@
 
+/***/ "./lib/version.js":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("../set-version/lib/index.js");
+// @uifabric/foundation@0.5.2
+// Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only.
+
+Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/foundation', '0.5.2');
+
+
+/***/ }),
+
 /***/ "react":
@@ -417,0 +472,0 @@ /***/ (function(module, exports) {

dist/foundation.min.js

@@ -1,2 +0,2 @@
-var FabricFoundation=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=React},function(t,e,n){"use strict";n.r(e);var r=function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};var o=n(0),u=r;function a(t,e){var n=e.CustomizerContext,a=function(u){return o.createElement(n.Consumer,null,function(n){var a=e.getCustomizations(t.displayName,n),s=a.styles,c=function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(t);o<r.length;o++)e.indexOf(r[o])<0&&(n[r[o]]=t[r[o]])}return n}(a,["styles"]),l=function(n){var o=n.styles||u.styles,a=r({},c,n,u),l=r({},n,u,{classNames:e.mergeStyleSets(i(a,t.styles),i(a,s),i(a,o))});return t.view(l)};return t.state?o.createElement(t.state,r({},u,{renderView:l})):l(u)})};return a.displayName=t.displayName,u(a,t.statics),a}function i(t,e){return"function"==typeof e?e(t):e}n.d(e,"createComponent",function(){return a})}]);
+var FabricFoundation=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){e.exports=React},function(e,t,n){"use strict";n.r(t);var r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};var o=n(0),a=r;function i(e,t){var n=t.CustomizerContext,i=function(a){return o.createElement(n.Consumer,null,function(i){var s=t.getCustomizations(e.displayName,i),c=function(c){var f=r({},c,a),l=t.getContextFromProps(f,i,s);l&&(s=t.getCustomizations(e.displayName,l));var p=s.styles,y=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&(n[r[o]]=e[r[o]])}return n}(s,["styles"]),d=r({},y,f),v=r({},f,{classNames:t.mergeStyleSets(u(d,e.styles),u(d,p),u(d,f.styles))});return l?o.createElement(n.Provider,{value:l},e.view(v)):e.view(v)};return e.state?o.createElement(e.state,r({},a,{renderView:c})):c(a)})};return i.displayName=e.displayName,a(i,e.statics),i}function u(e,t){return"function"==typeof t?t(e):t}!function(e,t){if("undefined"!=typeof window){var n=window.__packages__=window.__packages__||{};(n[e]=n[e]||[]).push(t)}}("@uifabric/foundation","0.5.2"),n.d(t,"createComponent",function(){return i})}]);
 //# sourceMappingURL=foundation.min.js.map

lib-amd/createComponent.d.ts

@@ -16,7 +16,12 @@ import * as React from 'react';
  */
-export interface IStyleableComponentProps<TProps, TStyleSet, TTheme> {
+export interface IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme> {
     styles?: IStylesProp<TProps, TStyleSet>;
     theme?: TTheme;
+    /**
+     * Optional scheme to apply to contextual theme. Specifying this prop
+     * will modify context and affect all children.
+     */
+    scheme?: TScheme;
 }
-export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme>;
+export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme, TScheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme>;
 /**
@@ -58,5 +63,19 @@ * Enforce props contract on state components, including the view prop and its shape.
  */
-export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme> {
+export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme> {
+    /**
+     * A required provider that merges multiple TStyleSets to create a TProcessedStyleSet that will be passed onto views components.
+     */
     mergeStyleSets: (...styles: (Partial<TStyleSet> | undefined)[]) => TProcessedStyleSet;
-    getCustomizations: (scope: string, context: TContext) => IStyleableComponentCombinedProps<TViewProps, TStyleSet, TTheme>;
+    /**
+     * A required provider for accessing global customizations as a fallback for contextual customizations.
+     */
+    getCustomizations: (scope: string, context: TContext) => IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>;
+    /**
+     * A provider that allows consumer to change context based on component's view props. If returned value is defined,
+     * foundation assumes context has changed and will automatically instantiate a CustomizerContext.Provider to provide new context.
+     */
+    getContextFromProps: (props: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>, context: TContext, settings: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>) => TContext | undefined;
+    /**
+     * React context provider based on TContext.
+     */
     CustomizerContext: React.Context<TContext>;
@@ -96,2 +115,2 @@ }
  */
-export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme>): React.StatelessComponent<TComponentProps> & TStatics;
+export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme>): React.StatelessComponent<TComponentProps> & TStatics;

lib-amd/createComponent.js

@@ -41,3 +41,2 @@ define(["require", "exports", "tslib", "react", "./utilities"], function (require, exports, tslib_1, React, utilities_1) {
                 var settings = providers.getCustomizations(options.displayName, context);
-                var _a = settings, contextStyles = _a.styles, rest = tslib_1.__rest(_a, ["styles"]);
                 var renderView = function (processedProps) {
@@ -47,17 +46,24 @@ // The approach here is to allow state components to provide only the props they care about, automatically
                     //    including children and styles.
-                    // TODO: userProps should only override processedProps for controlled props. for all other props, such as callbacks,
-                    //    processedProps should always have priority (this is not the case as written now.)
+                    // TODO: userProps should only override processedProps for controlled props (and also schemes, styles, theme?)
+                    //    for all other props, such as callbacks, processedProps should always have priority (this is not the case as written now.)
                     //    introduce controlled prop marking mechanism so that only controlled userProps override processedProps.
                     // TODO: Should 'rest' props from customizations pass onto view? They're not currently. (props like theme will break snapshots)
-                    var propStyles = processedProps.styles || userProps.styles;
-                    var styleProps = tslib_1.__assign({}, rest, processedProps, userProps);
-                    var viewProps = tslib_1.__assign({}, processedProps, userProps, {
-                        classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, propStyles))
+                    var mergedProps = tslib_1.__assign({}, processedProps, userProps);
+                    var newContext = providers.getContextFromProps(mergedProps, context, settings);
+                    if (newContext) {
+                        // If we have a new context we need to refresh our settings (to reflect new contextual theme, for example)
+                        settings = providers.getCustomizations(options.displayName, newContext);
+                    }
+                    var contextStyles = settings.styles, rest = tslib_1.__rest(settings, ["styles"]);
+                    var styleProps = tslib_1.__assign({}, rest, mergedProps);
+                    var viewProps = tslib_1.__assign({}, mergedProps, {
+                        classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, mergedProps.styles))
                     });
-                    // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging
-                    return options.view(viewProps);
+                    // If a new context has been generated, instantiate a Provider to provide it.
+                    return newContext ? (React.createElement(CustomizerContext.Provider, { value: newContext }, options.view(viewProps))) : (options.view(viewProps));
                 };
-                // TODO: What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
-                //        is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
-                //        since userProps does not necessarily extend TViewProps.
+                // What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
+                //  is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
+                //  since userProps does not necessarily extend TViewProps. Until then we're sacrificing a bit of type safety to prevent
+                //  the need of duplicating this function.
                 // if (StateComponent) {
@@ -64,0 +70,0 @@ //   type TProcessedProps = TViewProps & IStyleableComponentProps<TViewProps, TStyleSet, TTheme>;

lib-amd/index.d.ts

 export * from './createComponent';
+import './version';

lib-amd/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "tslib", "./createComponent"], function (require, exports, tslib_1, createComponent_1) {
+define(["require", "exports", "tslib", "./createComponent", "./version"], function (require, exports, tslib_1, createComponent_1) {
     "use strict";
@@ -3,0 +3,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

lib-commonjs/createComponent.d.ts

@@ -16,7 +16,12 @@ import * as React from 'react';
  */
-export interface IStyleableComponentProps<TProps, TStyleSet, TTheme> {
+export interface IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme> {
     styles?: IStylesProp<TProps, TStyleSet>;
     theme?: TTheme;
+    /**
+     * Optional scheme to apply to contextual theme. Specifying this prop
+     * will modify context and affect all children.
+     */
+    scheme?: TScheme;
 }
-export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme>;
+export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme, TScheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme>;
 /**
@@ -58,5 +63,19 @@ * Enforce props contract on state components, including the view prop and its shape.
  */
-export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme> {
+export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme> {
+    /**
+     * A required provider that merges multiple TStyleSets to create a TProcessedStyleSet that will be passed onto views components.
+     */
     mergeStyleSets: (...styles: (Partial<TStyleSet> | undefined)[]) => TProcessedStyleSet;
-    getCustomizations: (scope: string, context: TContext) => IStyleableComponentCombinedProps<TViewProps, TStyleSet, TTheme>;
+    /**
+     * A required provider for accessing global customizations as a fallback for contextual customizations.
+     */
+    getCustomizations: (scope: string, context: TContext) => IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>;
+    /**
+     * A provider that allows consumer to change context based on component's view props. If returned value is defined,
+     * foundation assumes context has changed and will automatically instantiate a CustomizerContext.Provider to provide new context.
+     */
+    getContextFromProps: (props: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>, context: TContext, settings: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>) => TContext | undefined;
+    /**
+     * React context provider based on TContext.
+     */
     CustomizerContext: React.Context<TContext>;
@@ -96,2 +115,2 @@ }
  */
-export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme>): React.StatelessComponent<TComponentProps> & TStatics;
+export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme>): React.StatelessComponent<TComponentProps> & TStatics;

lib-commonjs/createComponent.js

@@ -43,3 +43,2 @@ "use strict";
             var settings = providers.getCustomizations(options.displayName, context);
-            var _a = settings, contextStyles = _a.styles, rest = tslib_1.__rest(_a, ["styles"]);
             var renderView = function (processedProps) {
@@ -49,17 +48,24 @@ // The approach here is to allow state components to provide only the props they care about, automatically
                 //    including children and styles.
-                // TODO: userProps should only override processedProps for controlled props. for all other props, such as callbacks,
-                //    processedProps should always have priority (this is not the case as written now.)
+                // TODO: userProps should only override processedProps for controlled props (and also schemes, styles, theme?)
+                //    for all other props, such as callbacks, processedProps should always have priority (this is not the case as written now.)
                 //    introduce controlled prop marking mechanism so that only controlled userProps override processedProps.
                 // TODO: Should 'rest' props from customizations pass onto view? They're not currently. (props like theme will break snapshots)
-                var propStyles = processedProps.styles || userProps.styles;
-                var styleProps = tslib_1.__assign({}, rest, processedProps, userProps);
-                var viewProps = tslib_1.__assign({}, processedProps, userProps, {
-                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, propStyles))
+                var mergedProps = tslib_1.__assign({}, processedProps, userProps);
+                var newContext = providers.getContextFromProps(mergedProps, context, settings);
+                if (newContext) {
+                    // If we have a new context we need to refresh our settings (to reflect new contextual theme, for example)
+                    settings = providers.getCustomizations(options.displayName, newContext);
+                }
+                var contextStyles = settings.styles, rest = tslib_1.__rest(settings, ["styles"]);
+                var styleProps = tslib_1.__assign({}, rest, mergedProps);
+                var viewProps = tslib_1.__assign({}, mergedProps, {
+                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, mergedProps.styles))
                 });
-                // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging
-                return options.view(viewProps);
+                // If a new context has been generated, instantiate a Provider to provide it.
+                return newContext ? (React.createElement(CustomizerContext.Provider, { value: newContext }, options.view(viewProps))) : (options.view(viewProps));
             };
-            // TODO: What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
-            //        is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
-            //        since userProps does not necessarily extend TViewProps.
+            // What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
+            //  is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
+            //  since userProps does not necessarily extend TViewProps. Until then we're sacrificing a bit of type safety to prevent
+            //  the need of duplicating this function.
             // if (StateComponent) {
@@ -66,0 +72,0 @@ //   type TProcessedProps = TViewProps & IStyleableComponentProps<TViewProps, TStyleSet, TTheme>;

lib-commonjs/index.d.ts

 export * from './createComponent';
+import './version';

lib-commonjs/index.js

@@ -5,2 +5,3 @@ "use strict";
 tslib_1.__exportStar(require("./createComponent"), exports);
+require("./version");
 //# sourceMappingURL=index.js.map

lib/createComponent.d.ts

@@ -16,7 +16,12 @@ import * as React from 'react';
  */
-export interface IStyleableComponentProps<TProps, TStyleSet, TTheme> {
+export interface IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme> {
     styles?: IStylesProp<TProps, TStyleSet>;
     theme?: TTheme;
+    /**
+     * Optional scheme to apply to contextual theme. Specifying this prop
+     * will modify context and affect all children.
+     */
+    scheme?: TScheme;
 }
-export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme>;
+export declare type IStyleableComponentCombinedProps<TProps extends {}, TStyleSet, TTheme, TScheme> = TProps & IStyleableComponentProps<TProps, TStyleSet, TTheme, TScheme>;
 /**
@@ -58,5 +63,19 @@ * Enforce props contract on state components, including the view prop and its shape.
  */
-export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme> {
+export interface IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme> {
+    /**
+     * A required provider that merges multiple TStyleSets to create a TProcessedStyleSet that will be passed onto views components.
+     */
     mergeStyleSets: (...styles: (Partial<TStyleSet> | undefined)[]) => TProcessedStyleSet;
-    getCustomizations: (scope: string, context: TContext) => IStyleableComponentCombinedProps<TViewProps, TStyleSet, TTheme>;
+    /**
+     * A required provider for accessing global customizations as a fallback for contextual customizations.
+     */
+    getCustomizations: (scope: string, context: TContext) => IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>;
+    /**
+     * A provider that allows consumer to change context based on component's view props. If returned value is defined,
+     * foundation assumes context has changed and will automatically instantiate a CustomizerContext.Provider to provide new context.
+     */
+    getContextFromProps: (props: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>, context: TContext, settings: IStyleableComponentProps<TViewProps, TStyleSet, TTheme, TScheme>) => TContext | undefined;
+    /**
+     * React context provider based on TContext.
+     */
     CustomizerContext: React.Context<TContext>;
@@ -96,2 +115,2 @@ }
  */
-export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme>): React.StatelessComponent<TComponentProps> & TStatics;
+export declare function createComponent<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme, TStatics>(options: IComponentOptions<TComponentProps, TViewProps, TStyleSet, TProcessedStyleSet, TTheme, TStatics>, providers: IStylingProviders<TViewProps, TStyleSet, TProcessedStyleSet, TContext, TTheme, TScheme>): React.StatelessComponent<TComponentProps> & TStatics;

lib/createComponent.js

@@ -41,3 +41,2 @@ import * as tslib_1 from "tslib";
             var settings = providers.getCustomizations(options.displayName, context);
-            var _a = settings, contextStyles = _a.styles, rest = tslib_1.__rest(_a, ["styles"]);
             var renderView = function (processedProps) {
@@ -47,17 +46,24 @@ // The approach here is to allow state components to provide only the props they care about, automatically
                 //    including children and styles.
-                // TODO: userProps should only override processedProps for controlled props. for all other props, such as callbacks,
-                //    processedProps should always have priority (this is not the case as written now.)
+                // TODO: userProps should only override processedProps for controlled props (and also schemes, styles, theme?)
+                //    for all other props, such as callbacks, processedProps should always have priority (this is not the case as written now.)
                 //    introduce controlled prop marking mechanism so that only controlled userProps override processedProps.
                 // TODO: Should 'rest' props from customizations pass onto view? They're not currently. (props like theme will break snapshots)
-                var propStyles = processedProps.styles || userProps.styles;
-                var styleProps = tslib_1.__assign({}, rest, processedProps, userProps);
-                var viewProps = tslib_1.__assign({}, processedProps, userProps, {
-                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, propStyles))
+                var mergedProps = tslib_1.__assign({}, processedProps, userProps);
+                var newContext = providers.getContextFromProps(mergedProps, context, settings);
+                if (newContext) {
+                    // If we have a new context we need to refresh our settings (to reflect new contextual theme, for example)
+                    settings = providers.getCustomizations(options.displayName, newContext);
+                }
+                var contextStyles = settings.styles, rest = tslib_1.__rest(settings, ["styles"]);
+                var styleProps = tslib_1.__assign({}, rest, mergedProps);
+                var viewProps = tslib_1.__assign({}, mergedProps, {
+                    classNames: providers.mergeStyleSets(_evaluateStyle(styleProps, options.styles), _evaluateStyle(styleProps, contextStyles), _evaluateStyle(styleProps, mergedProps.styles))
                 });
-                // TODO: consider rendering view as JSX component with display name in debug mode to aid in debugging
-                return options.view(viewProps);
+                // If a new context has been generated, instantiate a Provider to provide it.
+                return newContext ? (React.createElement(CustomizerContext.Provider, { value: newContext }, options.view(viewProps))) : (options.view(viewProps));
             };
-            // TODO: What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
-            //        is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
-            //        since userProps does not necessarily extend TViewProps.
+            // What we really need to be able to do here either type force TViewProps to be TComponentProps when StateComponent
+            //  is undefined OR logically something like code below. Until we figure out how to do this, cast userProps as any
+            //  since userProps does not necessarily extend TViewProps. Until then we're sacrificing a bit of type safety to prevent
+            //  the need of duplicating this function.
             // if (StateComponent) {
@@ -64,0 +70,0 @@ //   type TProcessedProps = TViewProps & IStyleableComponentProps<TViewProps, TStyleSet, TTheme>;

lib/index.d.ts

 export * from './createComponent';
+import './version';

lib/index.js

 export * from './createComponent';
+import './version';
 //# sourceMappingURL=index.js.map

package-deps.json

@@ -7,4 +7,4 @@ {
     "packages/foundation/.vscode/settings.json": "a47d61e2fb865a31a0ee471e65cfb447269f23f2",
-    "packages/foundation/CHANGELOG.json": "e8b4c2ba64862c018e207bb431080f19be7dfbd7",
-    "packages/foundation/CHANGELOG.md": "5a776f4d8719aeef47070b8104a8d3ab69f1e5a6",
+    "packages/foundation/CHANGELOG.json": "aa23eaed9cbf570012f0fbcb2dd9b97b673cca88",
+    "packages/foundation/CHANGELOG.md": "2783ab05a884ed7273a3c95b5e88d179571f4ebb",
     "packages/foundation/LICENSE": "f40682078e868be480a62821f1def5fbe0dd965e",
@@ -16,6 +16,7 @@ "packages/foundation/README.md": "087545875d3296f7c6652fb9471d9a8ef15b4d0e",
     "packages/foundation/jsconfig.json": "c25b2cc60e6443982c62d0847d67b6ac6960dddc",
-    "packages/foundation/package.json": "41a0a71caf169d637c86bffdd04957f414a2dc96",
-    "packages/foundation/src/createComponent.tsx": "8c5c00a21148f2051da2dfa3a11cd02403bf5dfa",
-    "packages/foundation/src/index.ts": "ee6e311e0dfffc26dda52974ea5e34c58ea94e51",
+    "packages/foundation/package.json": "3abe3bff8b1a9c51143010c409700dc3a49a8152",
+    "packages/foundation/src/createComponent.tsx": "4016e443e584d79628b9f568770738493ea0dfd5",
+    "packages/foundation/src/index.ts": "bd566476eef79592d2e2444591f55a646f1b6933",
     "packages/foundation/src/utilities.ts": "3146eabfcb3301605bc038fad923b2546d0c1faa",
+    "packages/foundation/src/version.ts": "fe36cc62657011eeb3c4148e4020adf3a221a353",
     "packages/foundation/tsconfig.json": "3758c6c261a8af0f1c243da01fcd0a0c221684ae",
@@ -22,0 +23,0 @@ "packages/foundation/tslint.json": "c481d5d9d31876899da1da929b4cdf982cd8995f",

package.json

 {
   "name": "@uifabric/foundation",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Foundation library for building Fabric components.",
@@ -8,3 +8,5 @@ "main": "lib-commonjs/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "lib/version.js"
+  ],
   "repository": {
@@ -30,3 +32,3 @@ "type": "git",
     "@types/sinon": "2.2.2",
-    "@uifabric/jest-serializer-merge-styles": ">=6.0.4 <7.0.0",
+    "@uifabric/jest-serializer-merge-styles": ">=6.0.5 <7.0.0",
     "enzyme": "^3.4.1",
@@ -41,2 +43,3 @@ "enzyme-adapter-react-16": "^1.2.0",
   "dependencies": {
+    "@uifabric/set-version": ">=1.1.0 <2.0.0",
     "tslib": "^1.7.1"
@@ -43,0 +46,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154930

increased by15.22%

Number of package files

48

increased by23.08%

Lines of code

1359

increased by13.82%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@uifabric/set-version@>=1.1.0 <2.0.0

• + Added@uifabric/set-version@1.1.3(transitive)