@microsoft/sp-component-base 1.23.1 → 1.24.0-beta.2

package/lib-commonjs/test-api/MockComponent.js

@@ -1,34 +1,49 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MockComponent = void 0;
-var tslib_1 = require("tslib");
-var BaseComponent_1 = tslib_1.__importDefault(require("../BaseComponent"));
-var MockComponentContext_1 = require("./MockComponentContext");
-var MockComponent = /** @class */ (function (_super) {
-    tslib_1.__extends(MockComponent, _super);
-    function MockComponent(mockScope) {
-        var _this = _super.call(this) || this;
-        _this.mockIDynamicData = {
-            getPropertyDefinitions: function () {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MockComponent", {
+    enumerable: true,
+    get: function() {
+        return MockComponent;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _BaseComponent = /*#__PURE__*/ _interop_require_default._(require("../BaseComponent"));
+const _MockComponentContext = require("./MockComponentContext");
+class MockComponent extends _BaseComponent.default {
+    constructor(mockScope){
+        super();
+        this.mockIDynamicData = {
+            getPropertyDefinitions: ()=>{
                 return [
-                    { id: 'test1', title: 'Test One' },
-                    { id: 'test2', title: 'Test Two' },
-                    { id: 'test3', title: 'Test Three' }
+                    {
+                        id: 'test1',
+                        title: 'Test One'
+                    },
+                    {
+                        id: 'test2',
+                        title: 'Test Two'
+                    },
+                    {
+                        id: 'test3',
+                        title: 'Test Three'
+                    }
                 ];
             },
-            getPropertyValue: function () {
-                return { 'mock-key': 'mock-value' };
+            getPropertyValue: ()=>{
+                return {
+                    'mock-key': 'mock-value'
+                };
             },
-            getAnnotatedPropertyValue: function () {
+            getAnnotatedPropertyValue: ()=>{
                 return {
                     sampleValue: {}
                 };
             }
         };
-        _this._initializeContext(new MockComponentContext_1.MockComponentContext(mockScope));
-        return _this;
+        this._initializeContext(new _MockComponentContext.MockComponentContext(mockScope));
     }
-    return MockComponent;
-}(BaseComponent_1.default));
-exports.MockComponent = MockComponent;
-//# sourceMappingURL=MockComponent.js.map
+}
+
+//# sourceMappingURL=./MockComponent.js.map

package/lib-commonjs/test-api/MockComponentContext.js

@@ -1,19 +1,27 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MockComponentContext = void 0;
-var tslib_1 = require("tslib");
-var BaseComponentContext_1 = tslib_1.__importDefault(require("../BaseComponentContext"));
-var MockComponentContext = /** @class */ (function (_super) {
-    tslib_1.__extends(MockComponentContext, _super);
-    function MockComponentContext(mockRootScope) {
-        return _super.call(this, {
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "MockComponentContext", {
+    enumerable: true,
+    get: function() {
+        return MockComponentContext;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _BaseComponentContext = /*#__PURE__*/ _interop_require_default._(require("../BaseComponentContext"));
+class MockComponentContext extends _BaseComponentContext.default {
+    constructor(mockRootScope){
+        super({
             parentServiceScope: mockRootScope,
             manifest: {
                 componentType: 'Application',
                 alias: 'alias',
                 version: '1.0',
                 loaderConfig: {
-                    internalModuleBaseUrls: ['mock info'],
+                    internalModuleBaseUrls: [
+                        'mock info'
+                    ],
                     entryModuleId: 'eId',
                     scriptResources: {}
                 },
@@ -22,9 +30,8 @@ var MockComponentContext = /** @class */ (function (_super) {
             },
             loggingTag: 'logtag',
             instanceId: 'iId'
-        }) || this;
+        });
     }
-    return MockComponentContext;
-}(BaseComponentContext_1.default));
-exports.MockComponentContext = MockComponentContext;
-//# sourceMappingURL=MockComponentContext.js.map
+}
+
+//# sourceMappingURL=./MockComponentContext.js.map

package/lib-commonjs/test-api/index.js

@@ -1,8 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MockComponentContext = exports.MockComponent = void 0;
-var MockComponent_1 = require("./MockComponent");
-Object.defineProperty(exports, "MockComponent", { enumerable: true, get: function () { return MockComponent_1.MockComponent; } });
-var MockComponentContext_1 = require("./MockComponentContext");
-Object.defineProperty(exports, "MockComponentContext", { enumerable: true, get: function () { return MockComponentContext_1.MockComponentContext; } });
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MockComponent: function() {
+        return _MockComponent.MockComponent;
+    },
+    MockComponentContext: function() {
+        return _MockComponentContext.MockComponentContext;
+    }
+});
+const _MockComponent = require("./MockComponent");
+const _MockComponentContext = require("./MockComponentContext");
+
+//# sourceMappingURL=./index.js.map

package/lib-commonjs/themeProvider/ThemeProvider.js

@@ -1,102 +1,88 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = exports.ThemeChangedEventArgs = void 0;
-var tslib_1 = require("tslib");
-var sp_core_library_1 = require("@microsoft/sp-core-library");
-/**
- * The object passed when the IThemeProvider.themeChangedEvent is raised.
- *
- * @public
- */
-var ThemeChangedEventArgs = /** @class */ (function (_super) {
-    tslib_1.__extends(ThemeChangedEventArgs, _super);
-    function ThemeChangedEventArgs() {
-        return _super !== null && _super.apply(this, arguments) || this;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ThemeChangedEventArgs: function() {
+        return ThemeChangedEventArgs;
+    },
+    ThemeProvider: function() {
+        return ThemeProvider;
     }
-    return ThemeChangedEventArgs;
-}(sp_core_library_1.SPEventArgs));
-exports.ThemeChangedEventArgs = 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 sp_core_library_1.SPEvent(this._themeChangedEventName);
-        if (theme) {
-            this._theme = Object.freeze(theme);
-        }
-        if (themeV2) {
-            this._themeV2 = Object.freeze(themeV2);
-        }
+});
+const _spcorelibrary = require("@microsoft/sp-core-library");
+class ThemeChangedEventArgs extends _spcorelibrary.SPEventArgs {
+}
+class ThemeProvider {
+    get _themeChangedEventName() {
+        return ThemeProvider._themeChangedEventNameLiteral + this._id;
     }
-    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 () {
+   * Clear the currently set theme and raise the themeChangedEvent.
+   *
+   * @internal
+   */ _clearTheme() {
         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) {
-        sp_core_library_1.Validate.isNotNullOrUndefined(theme, 'theme');
+   * Change the theme and raise the themeChangedEvent.
+   *
+   * @param theme - The new theme.
+   *
+   * @internal
+   */ _setTheme(theme, themeV2) {
+        _spcorelibrary.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 () {
+   * If set, get the current scoped theme.
+   */ tryGetTheme() {
         return this._theme;
-    };
-    ThemeProvider.prototype.tryGetThemeV2 = function () {
+    }
+    tryGetThemeV2() {
         return this._themeV2;
-    };
-    ThemeProvider.prototype._raiseEvent = function () {
-        sp_core_library_1._SPEventManager.instance.raiseEvent(this._themeChangedEventName, {
+    }
+    _raiseEvent() {
+        _spcorelibrary._SPEventManager.instance.raiseEvent(this._themeChangedEventName, {
             theme: this._theme,
             themeV2: this._themeV2
         });
-    };
-    /**
-     * The service key for ThemeProvider.
-     */
-    ThemeProvider.serviceKey = sp_core_library_1.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;
-}());
-exports.ThemeProvider = ThemeProvider;
-//# sourceMappingURL=ThemeProvider.js.map
+   * Construct a new instance of the ThemeProvider class.
+   *
+   * @param serviceScope - The current service scope.
+   * @param theme - Theme to provide.
+   */ constructor(serviceScope, theme, themeV2){
+        this._id = ThemeProvider._instanceCount++;
+        this.themeChangedEvent = new _spcorelibrary.SPEvent(this._themeChangedEventName);
+        if (theme) {
+            this._theme = Object.freeze(theme);
+        }
+        if (themeV2) {
+            this._themeV2 = Object.freeze(themeV2);
+        }
+    }
+}
+/**
+   * The service key for ThemeProvider.
+   */ ThemeProvider.serviceKey = _spcorelibrary.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;
+
+//# sourceMappingURL=./ThemeProvider.js.map

package/lib-commonjs/themeProvider/themeInterfaces/IFontStyles.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=IFontStyles.js.map
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./IFontStyles.js.map

package/lib-commonjs/themeProvider/themeInterfaces/IPalette.js

@@ -1,3 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=IPalette.js.map
+/**
+ * Color palette.
+ *
+ * @public
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./IPalette.js.map

package/lib-commonjs/themeProvider/themeInterfaces/ISemanticColors.js

@@ -1,3 +1,59 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ISemanticColors.js.map
+/**
+ * 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
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ISemanticColors.js.map

package/lib-commonjs/themeProvider/themeInterfaces/ISemanticTextColors.js

@@ -1,3 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ISemanticTextColors.js.map
+/**
+ * Collection of semantic text colors.
+ *
+ * @public
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ISemanticTextColors.js.map

package/lib-commonjs/themeProvider/themeInterfaces/ITheme.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=ITheme.js.map
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=./ITheme.js.map

package/{lib → lib-dts}/BaseComponent.d.ts

@@ -6,7 +6,7 @@ import type BaseComponentContext from './BaseComponentContext';
  *
  * @public
  */
-export default abstract class BaseComponent implements ISPEventObserver {
+export default abstract class BaseComponent<TClientSideComponentManifest extends IClientSideComponentManifest = IClientSideComponentManifest> implements ISPEventObserver {
     /**
      * Use the context object to access common services and state associated with the component.
      *
@@ -23,7 +23,7 @@ export default abstract class BaseComponent implements ISPEventObserver {
      * then we can convert "context" to an ordinary property getter.
      * https://github.com/Microsoft/TypeScript/issues/338
      */
-    protected context?: BaseComponentContext;
+    protected context?: BaseComponentContext<TClientSideComponentManifest>;
     /**
      * Stores whether or not this component has a dynamic data source.
      * @internal
@@ -60,16 +60,16 @@ export default abstract class BaseComponent implements ISPEventObserver {
     get isDisposed(): boolean;
     /**
      * Provides access to the manifest for the client-side component.
-     * virtual
+     *
      * @remarks
-     * Child classes can override this with more specialized manifest types.
+     * The manifest type is determined by the `TClientSideComponentManifest` generic parameter.
      */
-    get manifest(): IClientSideComponentManifest;
+    get manifest(): TClientSideComponentManifest;
     /**
      * This event method is called at the end of the component's lifecycle.
      * It provides an opportunity to release any associated resources, cancel any
      * outstanding requests, etc.
-     * virtual
+     * @virtual
      */
     protected onDispose(): void;
     /**
@@ -94,7 +94,7 @@ export default abstract class BaseComponent implements ISPEventObserver {
     /**
      * @internal
      */
-    protected _initializeContext(context: BaseComponentContext): void;
+    protected _initializeContext(context: BaseComponentContext<TClientSideComponentManifest>): void;
     /**
      * This event method allows a component to add custom services to its
      * {@link @microsoft/sp-core-library#ServiceScope}.
@@ -103,7 +103,7 @@ export default abstract class BaseComponent implements ISPEventObserver {
      * This event method is fired before {@link @microsoft/sp-core-library#ServiceScope | ServiceScope.finish()}
      * is called, allowing the component to provide custom services.
      *
-     * virtual
+     * @virtual
      *
      * @alpha
      */

package/{lib → lib-dts}/BaseComponentContext.d.ts

@@ -10,7 +10,7 @@ import DynamicDataSourceManager from './DynamicDataSourceManager';
  *
  * @internal
  */
-export interface IComponentContextParameters {
+export interface IComponentContextParameters<TClientSideComponentManifest extends IClientSideComponentManifest = IClientSideComponentManifest> {
     /**
      * The manager's ServiceScope, which will be used to create the child
      * ServiceScope for the associated context.
@@ -19,7 +19,7 @@ export interface IComponentContextParameters {
     /**
      * The client-side component manifest.
      */
-    readonly manifest: IClientSideComponentManifest;
+    readonly manifest: TClientSideComponentManifest;
     /**
      * Logging service tag
      */
@@ -54,11 +54,11 @@ export interface IComponentContextParameters {
  *
  * @public
  */
-declare abstract class BaseComponentContext implements IDisposable {
+declare abstract class BaseComponentContext<TClientSideComponentManifest extends IClientSideComponentManifest = IClientSideComponentManifest> implements IDisposable {
     /**
      * Manifest for the client-side component.
      */
-    readonly manifest: IClientSideComponentManifest;
+    readonly manifest: TClientSideComponentManifest;
     private _serviceScope;
     private _instanceId;
     private _pageContext;
@@ -72,7 +72,7 @@ declare abstract class BaseComponentContext implements IDisposable {
     private _msGraphClientFactory;
     private _isServedFromLocalhost;
     /** @internal */
-    constructor(parameters: IComponentContextParameters);
+    constructor(parameters: IComponentContextParameters<TClientSideComponentManifest>);
     /**
      * Returns true if the context is disposed.
      */

package/lib-dts/RenderableComponentContext.d.ts

@@ -0,0 +1,35 @@
+import type { IClientSideComponentManifest } from '@microsoft/sp-module-interfaces';
+import BaseComponentContext from './BaseComponentContext';
+import type { IComponentContextParameters } from './BaseComponentContext';
+/**
+ * Constructor parameters for a {@link RenderableComponentContext}.
+ *
+ * @internal
+ */
+export interface IRenderableComponentContextParameters<TClientSideComponentManifest extends IClientSideComponentManifest = IClientSideComponentManifest> extends IComponentContextParameters<TClientSideComponentManifest> {
+    /** DOM element the component renders into. */
+    readonly domElement: HTMLElement;
+}
+/**
+ * Base context for component types that render into a DOM element — web parts,
+ * Copilot Components, and any future renderable component type.
+ *
+ * @remarks
+ * Extends {@link @microsoft/sp-component-base#BaseComponentContext} with a
+ * {@link RenderableComponentContext.domElement | domElement} property. Component
+ * types that do not have a dedicated render target (e.g. application
+ * customizers, extensions) should continue to extend `BaseComponentContext`
+ * directly.
+ *
+ * @public
+ */
+declare class RenderableComponentContext<TClientSideComponentManifest extends IClientSideComponentManifest = IClientSideComponentManifest> extends BaseComponentContext<TClientSideComponentManifest> {
+    /**
+     * Reference to the DOM element that hosts this client-side component.
+     */
+    readonly domElement: HTMLElement;
+    /** @internal */
+    constructor(parameters: IRenderableComponentContextParameters<TClientSideComponentManifest>);
+}
+export default RenderableComponentContext;
+//# sourceMappingURL=RenderableComponentContext.d.ts.map

package/{lib → lib-dts}/index.d.ts

@@ -11,6 +11,7 @@
  */
 export { default as BaseComponent } from './BaseComponent';
 export { default as BaseComponentContext, type IComponentContextParameters as _IComponentContextParameters } from './BaseComponentContext';
+export { default as RenderableComponentContext, type IRenderableComponentContextParameters as _IRenderableComponentContextParameters } from './RenderableComponentContext';
 export { default as DynamicDataProvider } from './DynamicDataProvider';
 export { default as DynamicDataSourceManager } from './DynamicDataSourceManager';
 export { default as DynamicProperty } from './DynamicProperty';