@microsoft/sp-component-base 1.22.0-beta.2 → 1.22.0-beta.4

package/lib/themeProvider/ThemeProvider.d.ts

@@ -0,0 +1,71 @@
+import { ServiceKey, type ServiceScope, SPEvent, SPEventArgs } from '@microsoft/sp-core-library';
+import type { ITheme, IReadonlyTheme } from './themeInterfaces/ITheme';
+import type { Theme } from '@fluentui/react-components';
+/**
+ * The object passed when the IThemeProvider.themeChangedEvent is raised.
+ *
+ * @public
+ */
+export declare class ThemeChangedEventArgs extends SPEventArgs {
+    /**
+     * The new theme. If the value is undefined, then the theme was cleared.
+     */
+    readonly theme: ITheme | undefined;
+    readonly themeV2: Theme | undefined;
+}
+/**
+ * The ThemeProvider class provides the capability to get different themes from the Framework. Themes can be provided
+ * in different contexts, e.g. Canvas sections may provide a variant of the global theme in some contexts.
+ *
+ * @public
+ */
+export declare class ThemeProvider {
+    /**
+     * The service key for ThemeProvider.
+     */
+    static readonly serviceKey: ServiceKey<ThemeProvider>;
+    private static readonly _themeChangedEventNameLiteral;
+    /**
+     * Used to register a unique event for each ThemeProvider instance by appending
+     * the instance count to themeChangedEventNameLiteral.
+     */
+    private static _instanceCount;
+    /**
+     * Raised when the theme changes with the new theme as an argument.
+     *
+     * @eventproperty
+     */
+    readonly themeChangedEvent: SPEvent<ThemeChangedEventArgs>;
+    private readonly _id;
+    private _theme;
+    private _themeV2;
+    /**
+     * Construct a new instance of the ThemeProvider class.
+     *
+     * @param serviceScope - The current service scope.
+     * @param theme - Theme to provide.
+     */
+    constructor(serviceScope: ServiceScope, theme?: ITheme, themeV2?: Theme);
+    private get _themeChangedEventName();
+    /**
+     * Clear the currently set theme and raise the themeChangedEvent.
+     *
+     * @internal
+     */
+    _clearTheme(): void;
+    /**
+     * Change the theme and raise the themeChangedEvent.
+     *
+     * @param theme - The new theme.
+     *
+     * @internal
+     */
+    _setTheme(theme: ITheme, themeV2?: Theme): void;
+    /**
+     * If set, get the current scoped theme.
+     */
+    tryGetTheme(): IReadonlyTheme | undefined;
+    tryGetThemeV2(): Theme | undefined;
+    private _raiseEvent;
+}
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/lib/themeProvider/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/themeProvider/ThemeProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,YAAY,EACjB,OAAO,EACP,WAAW,EAGZ,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExD;;;;GAIG;AACH,qBAAa,qBAAsB,SAAQ,WAAW;IACpD;;OAEG;IACH,SAAgB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,SAAgB,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC;CAC5C;AAED;;;;;GAKG;AACH,qBAAa,aAAa;IACxB;;OAEG;IACH,gBAAuB,UAAU,EAAE,UAAU,CAAC,aAAa,CAAC,CAG1D;IAEF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,6BAA6B,CAA6C;IAElG;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,cAAc,CAAa;IAE1C;;;;OAIG;IACH,SAAgB,iBAAiB,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAElE,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAS;IAE7B,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,QAAQ,CAAoB;IAEpC;;;;;OAKG;gBACgB,YAAY,EAAE,YAAY,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK;IAY9E,OAAO,KAAK,sBAAsB,GAEjC;IAED;;;;OAIG;IACI,WAAW,IAAI,IAAI;IAM1B;;;;;;OAMG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI;IAUtD;;OAEG;IACI,WAAW,IAAI,cAAc,GAAG,SAAS;IAIzC,aAAa,IAAI,KAAK,GAAG,SAAS;IAIzC,OAAO,CAAC,WAAW;CAMpB"}

package/lib/themeProvider/ThemeProvider.js

@@ -0,0 +1,99 @@
+import { __extends } from "tslib";
+import { ServiceKey, SPEvent, SPEventArgs, _SPEventManager, Validate } from '@microsoft/sp-core-library';
+/**
+ * The object passed when the IThemeProvider.themeChangedEvent is raised.
+ *
+ * @public
+ */
+var ThemeChangedEventArgs = /** @class */ (function (_super) {
+    __extends(ThemeChangedEventArgs, _super);
+    function ThemeChangedEventArgs() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ThemeChangedEventArgs;
+}(SPEventArgs));
+export { ThemeChangedEventArgs };
+/**
+ * The ThemeProvider class provides the capability to get different themes from the Framework. Themes can be provided
+ * in different contexts, e.g. Canvas sections may provide a variant of the global theme in some contexts.
+ *
+ * @public
+ */
+var ThemeProvider = /** @class */ (function () {
+    /**
+     * Construct a new instance of the ThemeProvider class.
+     *
+     * @param serviceScope - The current service scope.
+     * @param theme - Theme to provide.
+     */
+    function ThemeProvider(serviceScope, theme, themeV2) {
+        this._id = ThemeProvider._instanceCount++;
+        this.themeChangedEvent = new SPEvent(this._themeChangedEventName);
+        if (theme) {
+            this._theme = Object.freeze(theme);
+        }
+        if (themeV2) {
+            this._themeV2 = Object.freeze(themeV2);
+        }
+    }
+    Object.defineProperty(ThemeProvider.prototype, "_themeChangedEventName", {
+        get: function () {
+            return ThemeProvider._themeChangedEventNameLiteral + this._id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Clear the currently set theme and raise the themeChangedEvent.
+     *
+     * @internal
+     */
+    ThemeProvider.prototype._clearTheme = function () {
+        this._theme = undefined;
+        this._themeV2 = undefined;
+        this._raiseEvent();
+    };
+    /**
+     * Change the theme and raise the themeChangedEvent.
+     *
+     * @param theme - The new theme.
+     *
+     * @internal
+     */
+    ThemeProvider.prototype._setTheme = function (theme, themeV2) {
+        Validate.isNotNullOrUndefined(theme, 'theme');
+        this._theme = Object.freeze(theme);
+        if (themeV2) {
+            this._themeV2 = Object.freeze(themeV2);
+        }
+        this._raiseEvent();
+    };
+    /**
+     * If set, get the current scoped theme.
+     */
+    ThemeProvider.prototype.tryGetTheme = function () {
+        return this._theme;
+    };
+    ThemeProvider.prototype.tryGetThemeV2 = function () {
+        return this._themeV2;
+    };
+    ThemeProvider.prototype._raiseEvent = function () {
+        _SPEventManager.instance.raiseEvent(this._themeChangedEventName, {
+            theme: this._theme,
+            themeV2: this._themeV2
+        });
+    };
+    /**
+     * The service key for ThemeProvider.
+     */
+    ThemeProvider.serviceKey = ServiceKey.create('sp-component-base.ThemeProvider', ThemeProvider);
+    ThemeProvider._themeChangedEventNameLiteral = 'ThemeProvider.themeChangedEvent';
+    /**
+     * Used to register a unique event for each ThemeProvider instance by appending
+     * the instance count to themeChangedEventNameLiteral.
+     */
+    ThemeProvider._instanceCount = 0;
+    return ThemeProvider;
+}());
+export { ThemeProvider };
+//# sourceMappingURL=ThemeProvider.js.map

package/lib/themeProvider/themeInterfaces/IFontStyles.d.ts

@@ -0,0 +1,26 @@
+import type { IFontStyles, IRawStyle } from '@fluentui/react';
+/**
+ * IStyleObject extends a raw style objects, but allows selectors to be defined
+ * under the selectors node.
+ *
+ * @public
+ */
+export type { IRawStyle };
+/**
+ * Font styles for different sizes.
+ *
+ * @public
+ */
+export type { IFontStyles };
+/**
+ * @public
+ */
+export type IReadonlyRawStyle = Readonly<IRawStyle>;
+/**
+ * {@inheritdoc IFontStyles}
+ *
+ * @public
+ */
+export interface IReadonlyFontStyles extends Readonly<IFontStyles> {
+}
+//# sourceMappingURL=IFontStyles.d.ts.map

package/lib/themeProvider/themeInterfaces/IFontStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFontStyles.d.ts","sourceRoot":"","sources":["../../../src/themeProvider/themeInterfaces/IFontStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE9D;;;;;GAKG;AACH,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;;;GAIG;AACH,YAAY,EAAE,WAAW,EAAE,CAAC;AAE5B;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEpD;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,QAAQ,CAAC,WAAW,CAAC;CAAG"}

package/lib/themeProvider/themeInterfaces/IFontStyles.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IFontStyles.js.map

package/lib/themeProvider/themeInterfaces/IPalette.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Color palette.
+ *
+ * @public
+ */
+export type { IPalette } from '@fluentui/react';
+//# sourceMappingURL=IPalette.d.ts.map

package/lib/themeProvider/themeInterfaces/IPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IPalette.d.ts","sourceRoot":"","sources":["../../../src/themeProvider/themeInterfaces/IPalette.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/themeProvider/themeInterfaces/IPalette.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IPalette.js.map

package/lib/themeProvider/themeInterfaces/ISemanticColors.d.ts

@@ -0,0 +1,56 @@
+/**
+ * The collection of all semantic slots for colors used in themes.
+ *
+ * Note: text colors are defined in ISemanticTextColors.ts.
+ *
+ * ## Naming Convention
+ *
+ * The name of a semantic slot can quickly tell you how it's meant to be used. It generally follows this format:
+ *
+ * [category name][element name][checked state][hovered/pressed/disabled state]
+ * [category name] - The “family” that this slot belongs to.
+ * [element name] - The name of the thing being targeted, such as the background or border.
+ * [checked state] - Whether the thing is checked. We assume things are unchecked by default, so no need to
+ * specify the unchecked state.
+ * (We used “checked” to refer to anything that is on, selected, toggled, highlighted, emphasized, etc.)
+ * [hovered/pressed/disabled state] - One of these states, if applicable. Each of these states are mutually exclusive.
+ * Pressed styles overwrite hovered styles, and disabled elements cannot be hovered or pressed.
+ *
+ * ## Base Slots
+ *
+ * A basic set of slots that provide many default body styles, such as text, subtext, disabled colors, and so on.
+ * If a category doesn't provide the slot you're looking for, use one from this category.
+ * For example, the placeholder text on a text input field has no corresponding slot in its category,
+ * so you'd use the bodySubtextColor from this category.
+ *
+ * ## Invariants
+ *
+ * When color has meaning, we do not want to change the color much theme to theme. For example, we
+ * will always want errors to be some shade of red, but we will need to tweak the exact shade so it's
+ * legible depending on whether it's an inverted theme or not.
+ * Invariant colors should almost never be changed by the theme, the defaults should suffice.
+ *
+ * ## Input Controls
+ *
+ * This category contains input components commonly used to denote state, including radio buttons,
+ * check boxes, toggle switches, sliders, progress bars, and more.
+ *
+ * ## Buttons
+ *
+ * Buttons! And all the flavors thereof.
+ *
+ * ## Menus
+ *
+ * Any kind of popup menus uses this category.
+ *
+ * ## Lists
+ *
+ * Lists differ from menus in that they are designed to show infinite amounts of items, often scroll,
+ * and have a large and complex interaction surface.
+ * This category covers all kinds of lists, whether they're typical one-item-per-row lists (like DetailsList)
+ * or ones with a tiled layout.
+ *
+ * @public
+ */
+export type { ISemanticColors } from '@fluentui/react';
+//# sourceMappingURL=ISemanticColors.d.ts.map

package/lib/themeProvider/themeInterfaces/ISemanticColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ISemanticColors.d.ts","sourceRoot":"","sources":["../../../src/themeProvider/themeInterfaces/ISemanticColors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/themeProvider/themeInterfaces/ISemanticColors.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ISemanticColors.js.map

package/lib/themeProvider/themeInterfaces/ISemanticTextColors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Collection of semantic text colors.
+ *
+ * @public
+ */
+export type { ISemanticTextColors } from '@fluentui/react';
+//# sourceMappingURL=ISemanticTextColors.d.ts.map

package/lib/themeProvider/themeInterfaces/ISemanticTextColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ISemanticTextColors.d.ts","sourceRoot":"","sources":["../../../src/themeProvider/themeInterfaces/ISemanticTextColors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/themeProvider/themeInterfaces/ISemanticTextColors.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ISemanticTextColors.js.map

package/lib/themeProvider/themeInterfaces/ITheme.d.ts

@@ -0,0 +1,16 @@
+import type { IPartialTheme } from '@fluentui/react';
+/**
+ * Collection of theme values, which can be used to programatically style components.
+ *
+ * @public
+ */
+export interface ITheme extends IPartialTheme {
+}
+/**
+ * Immutable ITheme.
+ *
+ * @public
+ */
+export interface IReadonlyTheme extends Readonly<ITheme> {
+}
+//# sourceMappingURL=ITheme.d.ts.map

package/lib/themeProvider/themeInterfaces/ITheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ITheme.d.ts","sourceRoot":"","sources":["../../../src/themeProvider/themeInterfaces/ITheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;GAIG;AACH,MAAM,WAAW,MAAO,SAAQ,aAAa;CAAG;AAEhD;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,QAAQ,CAAC,MAAM,CAAC;CAAG"}

package/lib/themeProvider/themeInterfaces/ITheme.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ITheme.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/sp-component-base",
-  "version": "1.22.0-beta.2",
+  "version": "1.22.0-beta.4",
   "description": "SharePoint Framework support for building client-side components",
   "license": "https://aka.ms/spfx/license",
   "homepage": "http://aka.ms/spfx",
@@ -11,33 +11,33 @@
     "tsdocFlavor": "AEDoc"
   },
   "devDependencies": {
-    "@rushstack/heft": "0.74.3",
+    "@rushstack/heft": "1.1.1",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
     "eslint": "8.57.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "@msinternal/ms-graph-v3-bundle": "3.0.2",
     "@msinternal/react-17-bundle": "17.0.1",
-    "@msinternal/sp-safehtml": "0.5.2",
-    "@ms/office-ui-fabric-react-bundle": "1.19.46",
-    "@msinternal/react-dom-17-profiling-bundle": "17.0.1",
+    "@ms/office-ui-fabric-react-bundle": "1.19.50",
     "@msinternal/react-dom-17-bundle": "17.0.1",
-    "@msinternal/sp-telemetry": "0.35.36",
+    "@msinternal/ms-graph-v3-bundle": "3.0.2",
+    "@msinternal/react-dom-17-profiling-bundle": "17.0.1",
+    "@msinternal/sp-safehtml": "0.5.2",
+    "@msinternal/sp-telemetry": "0.35.55",
     "@msinternal/spfx-internal-web-build-rig": "0.1.0"
   },
   "dependencies": {
     "@fluentui/react": "^8.123.1",
     "@fluentui/react-components": "^9.66.5",
-    "@swc/helpers": "0.5.12",
+    "@swc/helpers": "^0.5.12",
     "tslib": "2.3.1",
-    "@microsoft/sp-diagnostics": "1.22.0-beta.2",
-    "@microsoft/sp-dynamic-data": "1.22.0-beta.2",
-    "@microsoft/sp-http": "1.22.0-beta.2",
-    "@microsoft/sp-core-library": "1.22.0-beta.2",
-    "@microsoft/sp-lodash-subset": "1.22.0-beta.2",
-    "@microsoft/sp-module-interfaces": "1.22.0-beta.2",
-    "@microsoft/sp-page-context": "1.22.0-beta.2"
+    "@microsoft/sp-core-library": "1.22.0-beta.4",
+    "@microsoft/sp-dynamic-data": "1.22.0-beta.4",
+    "@microsoft/sp-http": "1.22.0-beta.4",
+    "@microsoft/sp-lodash-subset": "1.22.0-beta.4",
+    "@microsoft/sp-module-interfaces": "1.22.0-beta.4",
+    "@microsoft/sp-page-context": "1.22.0-beta.4",
+    "@microsoft/sp-diagnostics": "1.22.0-beta.4"
   },
   "engines": {
     "node": ">=18.17.1 <19.0.0 || >=22.14.0 < 23.0.0"