@pnp/spfx-controls-react 3.7.0-beta.1939323 → 3.7.0-beta.1939354

package/CHANGELOG.JSON

@@ -3,7 +3,9 @@
     {
       "version": "3.7.0",
       "changes": {
-        "new": [],
+        "new": [
+          "`VariantThemeProvider`: new `VariantThemeProvider` control"
+        ],
         "enhancements": [
           "`Carousel`: Prev and Next Buttons are not labeled, and read as 'Unlabeled button' by screen readers [#1137](https://github.com/pnp/sp-dev-fx-controls-react/issues/1137)",
           "SharePoint Framework v1.14.0 support"
@@ -11,6 +13,7 @@
         "fixes": []
       },
       "contributors": [
+        "[Fabio Franzini](https://github.com/fabiofranzini)",
         "[Won Song](https://github.com/WonSong)"
       ]
     },

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 3.7.0
 
+### New control(s)
+
+- `VariantThemeProvider`: new `VariantThemeProvider` control
+
 ### Enhancements
 
 - `Carousel`: Prev and Next Buttons are not labeled, and read as 'Unlabeled button' by screen readers [#1137](https://github.com/pnp/sp-dev-fx-controls-react/issues/1137)

package/lib/VariantThemeProvider.d.ts

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

package/lib/VariantThemeProvider.d.ts.map

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

package/lib/VariantThemeProvider.js

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

package/lib/VariantThemeProvider.js.map

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

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.7.0-beta.1939323";
+export var version = "3.7.0-beta.1939354";
 //# sourceMappingURL=version.js.map

package/lib/controls/variantThemeProvider/VariantThemeProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { VariantThemeProviderProps } from "./VariantThemeProviderProps";
+export declare const VariantThemeProvider: (props: VariantThemeProviderProps) => JSX.Element;
+//# sourceMappingURL=VariantThemeProvider.d.ts.map

package/lib/controls/variantThemeProvider/VariantThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProvider.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,yBAAyB,EAAe,MAAM,6BAA6B,CAAC;AAErF,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,gBA+BpE,CAAC"}

package/lib/controls/variantThemeProvider/VariantThemeProvider.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ThemeProvider } from "@fluentui/react-theme-provider/lib/ThemeProvider";
+import * as React from "react";
+import { useCallback } from "react";
+import { generateThemeFromColors, generateThemeVariant, getDefaultTheme } from "./VariantThemeProviderHelpers";
+import { VariantType } from "./VariantThemeProviderProps";
+export var VariantThemeProvider = function (props) {
+    var themeToApply = useCallback(function () {
+        var workingVariantType = (props.variantType) ? props.variantType : VariantType.None;
+        var workingTheme;
+        if (props.themeColors) {
+            workingTheme = generateThemeFromColors(props.themeColors.primaryColor, props.themeColors.textColor, props.themeColors.backgroundColor);
+        }
+        else {
+            if (props.theme) {
+                workingTheme = props.theme;
+            }
+            else {
+                workingTheme = getDefaultTheme();
+            }
+        }
+        var themeVariantToApply = (props.variantType == VariantType.None)
+            ? workingTheme
+            : generateThemeVariant(workingTheme, workingVariantType);
+        return themeVariantToApply;
+    }, [props.theme, props.themeColors, props.variantType]);
+    return (React.createElement(ThemeProvider, __assign({}, props, { theme: themeToApply() }), props.children));
+};
+//# sourceMappingURL=VariantThemeProvider.js.map

package/lib/controls/variantThemeProvider/VariantThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProvider.js","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kDAAkD,CAAC;AAEjF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAC/G,OAAO,EAA6B,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAErF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAAgC;IACjE,IAAM,YAAY,GAAG,WAAW,CAC5B;QACI,IAAI,kBAAkB,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;QACpF,IAAI,YAAoC,CAAC;QAEzC,IAAI,KAAK,CAAC,WAAW,EAAE;YACnB,YAAY,GAAG,uBAAuB,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;SAC1I;aAAM;YACH,IAAI,KAAK,CAAC,KAAK,EAAE;gBACb,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC;aAC9B;iBAAM;gBACH,YAAY,GAAG,eAAe,EAAE,CAAC;aACpC;SACJ;QAED,IAAI,mBAAmB,GAAG,CAAC,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC;YAC7D,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;QAE7D,OAAO,mBAAmB,CAAC;IAC/B,CAAC,EACD,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzD,OAAO,CACH,oBAAC,aAAa,eACN,KAAK,IACT,KAAK,EAAE,YAAY,EAAE,KACpB,KAAK,CAAC,QAAQ,CACH,CACnB,CAAC;AACN,CAAC,CAAC"}

package/lib/controls/variantThemeProvider/VariantThemeProviderHelpers.d.ts

@@ -0,0 +1,6 @@
+import { IPartialTheme, ITheme } from "office-ui-fabric-react/lib/Styling";
+import { VariantType } from "./VariantThemeProviderProps";
+export declare const generateThemeVariant: (theme: IPartialTheme | ITheme, themeType: VariantType) => IPartialTheme | ITheme;
+export declare const getDefaultTheme: () => ITheme;
+export declare const generateThemeFromColors: (primaryColor: string, textColor: string, backgroundColor: string) => ITheme;
+//# sourceMappingURL=VariantThemeProviderHelpers.d.ts.map

package/lib/controls/variantThemeProvider/VariantThemeProviderHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProviderHelpers.d.ts","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProviderHelpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAyB,aAAa,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAElG,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,eAAO,MAAM,oBAAoB,UAAW,aAAa,GAAG,MAAM,aAAa,WAAW,KAAG,aAAa,GAAG,MAiB5G,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,MAYlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,iBAAkB,MAAM,aAAa,MAAM,mBAAmB,MAAM,KAAG,MAuC1G,CAAC"}

package/lib/controls/variantThemeProvider/VariantThemeProviderHelpers.js

@@ -0,0 +1,59 @@
+import { getNeutralVariant, getSoftVariant, getStrongVariant } from "@fluentui/scheme-utilities/lib/variants";
+import { getColorFromString, isDark } from "office-ui-fabric-react/lib/Color";
+import { createTheme, getTheme } from "office-ui-fabric-react/lib/Styling";
+import { BaseSlots, ThemeGenerator, themeRulesStandardCreator } from "office-ui-fabric-react/lib/ThemeGenerator";
+import { VariantType } from "./VariantThemeProviderProps";
+export var generateThemeVariant = function (theme, themeType) {
+    var currentTheme;
+    switch (themeType) {
+        case VariantType.None:
+            currentTheme = theme;
+            break;
+        case VariantType.Neutral:
+            currentTheme = getNeutralVariant(theme);
+            break;
+        case VariantType.Soft:
+            currentTheme = getSoftVariant(theme);
+            break;
+        case VariantType.Strong:
+            currentTheme = getStrongVariant(theme);
+            break;
+        default:
+            currentTheme = theme;
+            break;
+    }
+    return currentTheme;
+};
+export var getDefaultTheme = function () {
+    var _a, _b;
+    var currentTheme;
+    var themeColorsFromWindow = (_b = (_a = window) === null || _a === void 0 ? void 0 : _a.__themeState__) === null || _b === void 0 ? void 0 : _b.theme;
+    if (themeColorsFromWindow) {
+        currentTheme = createTheme({
+            palette: themeColorsFromWindow
+        });
+    }
+    else
+        currentTheme = getTheme();
+    return currentTheme;
+};
+export var generateThemeFromColors = function (primaryColor, textColor, backgroundColor) {
+    var themeRules = themeRulesStandardCreator();
+    var colors = {
+        primaryColor: getColorFromString(primaryColor),
+        textColor: getColorFromString(textColor),
+        backgroundColor: getColorFromString(backgroundColor),
+    };
+    var currentIsDark = isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color);
+    ThemeGenerator.insureSlots(themeRules, currentIsDark);
+    ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.primaryColor]], colors.primaryColor, currentIsDark, true, true);
+    ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.foregroundColor]], colors.textColor, currentIsDark, true, true);
+    ThemeGenerator.setSlot(themeRules[BaseSlots[BaseSlots.backgroundColor]], colors.backgroundColor, currentIsDark, true, true);
+    var themeAsJson = ThemeGenerator.getThemeAsJson(themeRules);
+    var generatedTheme = createTheme({
+        palette: themeAsJson,
+        isInverted: currentIsDark,
+    });
+    return generatedTheme;
+};
+//# sourceMappingURL=VariantThemeProviderHelpers.js.map

package/lib/controls/variantThemeProvider/VariantThemeProviderHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProviderHelpers.js","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProviderHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC9G,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAyB,MAAM,oCAAoC,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AACjH,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAA6B,EAAE,SAAsB;IACtF,IAAI,YAAoC,CAAC;IAEzC,QAAQ,SAAS,EAAE;QACf,KAAK,WAAW,CAAC,IAAI;YAAE,YAAY,GAAG,KAAK,CAAC;YACxC,MAAM;QACV,KAAK,WAAW,CAAC,OAAO;YAAE,YAAY,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9D,MAAM;QACV,KAAK,WAAW,CAAC,IAAI;YAAE,YAAY,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YACxD,MAAM;QACV,KAAK,WAAW,CAAC,MAAM;YAAE,YAAY,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5D,MAAM;QACV;YAAS,YAAY,GAAG,KAAK,CAAC;YAC1B,MAAM;KACb;IAED,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG;;IAC3B,IAAI,YAAY,CAAC;IACjB,IAAM,qBAAqB,eAAS,MAAc,0CAAE,cAAc,0CAAE,KAAK,CAAC;IAC1E,IAAI,qBAAqB,EAAE;QACvB,YAAY,GAAG,WAAW,CAAC;YACvB,OAAO,EAAE,qBAAqB;SACjC,CAAC,CAAC;KACN;;QAEG,YAAY,GAAG,QAAQ,EAAE,CAAC;IAE9B,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,YAAoB,EAAE,SAAiB,EAAE,eAAuB;IACpG,IAAM,UAAU,GAAG,yBAAyB,EAAE,CAAC;IAC/C,IAAM,MAAM,GAAG;QACX,YAAY,EAAE,kBAAkB,CAAC,YAAY,CAAE;QAC/C,SAAS,EAAE,kBAAkB,CAAC,SAAS,CAAE;QACzC,eAAe,EAAE,kBAAkB,CAAC,eAAe,CAAE;KACxD,CAAC;IACF,IAAM,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,KAAM,CAAC,CAAC;IAEtF,cAAc,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IACtD,cAAc,CAAC,OAAO,CAClB,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,EAC7C,MAAM,CAAC,YAAY,EACnB,aAAa,EACb,IAAI,EACJ,IAAI,CACP,CAAC;IACF,cAAc,CAAC,OAAO,CAClB,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EAChD,MAAM,CAAC,SAAS,EAChB,aAAa,EACb,IAAI,EACJ,IAAI,CACP,CAAC;IACF,cAAc,CAAC,OAAO,CAClB,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,EAChD,MAAM,CAAC,eAAe,EACtB,aAAa,EACb,IAAI,EACJ,IAAI,CACP,CAAC;IAEF,IAAM,WAAW,GAA+B,cAAc,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;IAC1F,IAAM,cAAc,GAAG,WAAW,CAAC;QAC/B,OAAO,EAAE,WAAW;QACpB,UAAU,EAAE,aAAa;KAC5B,CAAC,CAAC;IAEH,OAAO,cAAc,CAAC;AAC1B,CAAC,CAAC"}

package/lib/controls/variantThemeProvider/VariantThemeProviderProps.d.ts

@@ -0,0 +1,17 @@
+import { ThemeProviderProps } from "@fluentui/react-theme-provider/lib/ThemeProvider.types";
+export interface VariantThemeProviderProps extends ThemeProviderProps {
+    variantType?: VariantType;
+    themeColors?: IThemeColors;
+}
+export declare enum VariantType {
+    None = 0,
+    Neutral = 1,
+    Soft = 2,
+    Strong = 3
+}
+export interface IThemeColors {
+    primaryColor: string;
+    textColor: string;
+    backgroundColor: string;
+}
+//# sourceMappingURL=VariantThemeProviderProps.d.ts.map

package/lib/controls/variantThemeProvider/VariantThemeProviderProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProviderProps.d.ts","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProviderProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC;CAC9B;AAED,oBAAY,WAAW;IACnB,IAAI,IAAA;IACJ,OAAO,IAAA;IACP,IAAI,IAAA;IACJ,MAAM,IAAA;CACT;AAED,MAAM,WAAW,YAAY;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;CAC3B"}

package/lib/controls/variantThemeProvider/VariantThemeProviderProps.js

@@ -0,0 +1,8 @@
+export var VariantType;
+(function (VariantType) {
+    VariantType[VariantType["None"] = 0] = "None";
+    VariantType[VariantType["Neutral"] = 1] = "Neutral";
+    VariantType[VariantType["Soft"] = 2] = "Soft";
+    VariantType[VariantType["Strong"] = 3] = "Strong";
+})(VariantType || (VariantType = {}));
+//# sourceMappingURL=VariantThemeProviderProps.js.map

package/lib/controls/variantThemeProvider/VariantThemeProviderProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantThemeProviderProps.js","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/VariantThemeProviderProps.ts"],"names":[],"mappings":"AAOA,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,6CAAI,CAAA;IACJ,mDAAO,CAAA;IACP,6CAAI,CAAA;IACJ,iDAAM,CAAA;AACV,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}

package/lib/controls/variantThemeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export * from './VariantThemeProvider';
+export * from './VariantThemeProviderHelpers';
+export * from './VariantThemeProviderProps';
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/variantThemeProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC"}

package/lib/controls/variantThemeProvider/index.js

@@ -0,0 +1,4 @@
+export * from './VariantThemeProvider';
+export * from './VariantThemeProviderHelpers';
+export * from './VariantThemeProviderProps';
+//# sourceMappingURL=index.js.map

package/lib/controls/variantThemeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/variantThemeProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "3.7.0-beta.1939323",
+  "version": "3.7.0-beta.1939354",
   "scripts": {
     "build": "gulp build",
     "clean": "gulp clean",
@@ -23,6 +23,7 @@
     "@fluentui/react-hooks": "^8.2.6",
     "@fluentui/react-northstar": "0.51.3",
     "@fluentui/react-theme-provider": "^0.18.5",
+    "@fluentui/scheme-utilities": "^8.2.12",
     "@fluentui/theme": "^2.4.7",
     "@microsoft/mgt-react": "2.3.0",
     "@microsoft/mgt-spfx": "2.3.0",