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

package/lib/PropertyMetadataProcessor.js

@@ -0,0 +1,297 @@
+import { _SPKillSwitch } from '@microsoft/sp-core-library';
+import * as lodash from '@microsoft/sp-lodash-subset';
+import { isServerPropertiesSanitizedEnabled } from './common/Flights';
+import { _QosMonitor } from '@microsoft/sp-diagnostics';
+import { SafeHtml } from '@msinternal/sp-safehtml';
+/**
+ * The processor to serialize and deserialize the server processed content and component properties
+ * based on component metadata.
+ *
+ * @internal
+ */
+var PropertyMetadataProcessor = /** @class */ (function () {
+    function PropertyMetadataProcessor() {
+    }
+    /**
+     * Serialize the properties into server processed content as declared in metadata.
+     *
+     * @param propertiesMetadata - The component properties metadata.
+     * @param properties - The component properties. This object will be modified during serialization.
+     * @param serverProcessedContent - The serialized server processed content. This object will be modified.
+     */
+    PropertyMetadataProcessor.serializeServerProcessedData = function (propertiesMetadata, properties, serverProcessedContent) {
+        var _this = this;
+        this._forEachPropertyWithMetaData(propertiesMetadata, properties, function (propPath, metadata, iteration) {
+            // Remove fields with shouldNotPersist metadata
+            if (metadata.shouldNotPersist) {
+                lodash.set(properties, propPath, undefined);
+            }
+            // Use the property path as the key in server-processed content maps
+            var key = propPath;
+            // WARNING: This is critical code. Please do not modify without fully understanding the data pipeline
+            var value = lodash.get(properties, propPath);
+            // Skip if the property is non-string or undefined
+            if (serverProcessedContent && typeof value === 'string' && value) {
+                if (serverProcessedContent.htmlStrings && metadata.isHtmlString) {
+                    serverProcessedContent.htmlStrings[key] = value;
+                }
+                else if (serverProcessedContent.searchablePlainTexts && metadata.isSearchablePlainText) {
+                    serverProcessedContent.searchablePlainTexts[key] = value;
+                }
+                else if (serverProcessedContent.links && metadata.isLink) {
+                    serverProcessedContent.links[key] = value;
+                }
+                else if (serverProcessedContent.imageSources && metadata.isImageSource) {
+                    serverProcessedContent.imageSources[key] = value;
+                }
+                else if (metadata.isComponentDependency) {
+                    if (!serverProcessedContent.componentDependencies) {
+                        serverProcessedContent.componentDependencies = {};
+                    }
+                    serverProcessedContent.componentDependencies[key] = value;
+                }
+                if (metadata.customMetadata) {
+                    // Build custom metadata for the given property path
+                    var customMetadata_1 = {};
+                    if (metadata && metadata.customMetadata) {
+                        var _loop_1 = function (propName, customMetadataPropPath) {
+                            var normalizedCustomMetadataPropPath = customMetadataPropPath;
+                            if (iteration !== undefined && normalizedCustomMetadataPropPath.indexOf('*') !== -1) {
+                                // Custom metadata should be resolved with current iteration of wildcard
+                                normalizedCustomMetadataPropPath = normalizedCustomMetadataPropPath.replace('*', iteration.toString());
+                            }
+                            _this._validateAndIteratePath(normalizedCustomMetadataPropPath, properties, function (fixedPropPath, customIteration) {
+                                // Custom metadata should be resolved without iteration
+                                if (customIteration === undefined && metadata.customMetadata) {
+                                    var customValue = lodash.get(properties, fixedPropPath);
+                                    if (serverProcessedContent && customValue !== undefined) {
+                                        // Insert custom metadata key and value
+                                        if (isFixCustomMetadataKeyKillSwitchActivated()) {
+                                            customMetadata_1[fixedPropPath] = customValue;
+                                        }
+                                        else {
+                                            customMetadata_1[propName] = customValue;
+                                        }
+                                    }
+                                }
+                            });
+                        };
+                        for (var _i = 0, _a = Object.entries(metadata.customMetadata); _i < _a.length; _i++) {
+                            var _b = _a[_i], propName = _b[0], customMetadataPropPath = _b[1];
+                            _loop_1(propName, customMetadataPropPath);
+                        }
+                    }
+                    if (!serverProcessedContent.customMetadata) {
+                        serverProcessedContent.customMetadata = {};
+                    }
+                    // Store serialized custom metadata for the given the property path.
+                    serverProcessedContent.customMetadata[key] = customMetadata_1;
+                }
+                // Unset the extracted property to avoid duplication
+                lodash.set(properties, propPath, undefined);
+            }
+        });
+    };
+    /**
+     * Reapply the serialized server processed content on the properties based on the metadata.
+     * This process will result in the properties bag as it was when the serialization happened.
+     *
+     * @param propertiesMetadata - The component properties metadata.
+     * @param properties - The component properties. This object will be modified during serialization.
+     * @param serverProcessedContent - The serialized server processed content.
+     * @param manifest - The optional component manifest.
+     */
+    PropertyMetadataProcessor.reInstateServerProcessedData = function (propertiesMetadata, properties, serverProcessedContent, manifest) {
+        var _this = this;
+        var propertyPathsNotInServerProcessedContent = new Set();
+        if (manifest) {
+            // @privateRemarks Clear out the properties with isHtmlString metadata for security reasons. We only want to
+            // propagate values from the serverProcessed content as they are security sanitized by the server. Note, there is a
+            // scenario when an end user can update the list item with whatever data they like. In that case, they can
+            // eliminate the serverProcessed content and that can cause a potential security hole. Hence, we always want
+            // clear out the property values that have isHtmlString metadata.
+            this._forEachPropertyWithMetaData(propertiesMetadata, properties, function (propPath, metadata) {
+                if (!isServerPropertiesSanitizedEnabled()) {
+                    // This is a temporary hack to make sure that the webparts published using the Mobile app keep rendering.
+                    // Currently, for those pages, the DocumentEmbedWebPart does not have HTMLProperties pupulated. Hence,
+                    // we are doing this work around to not unset the property bag.
+                    // (SPPPLAT VSO#289988) tracks removal of this code.
+                    if (manifest.id !== 'b7dd04e1-19ce-4b24-9132-b60a1c2b910d' && metadata.isHtmlString) {
+                        lodash.set(properties, propPath, undefined);
+                    }
+                }
+                else {
+                    // We should always sanitize the deserialized property bag for any property
+                    // that is marked with propertiesMetadata. It is possible for the content to have been
+                    // modified at rest and therefore work around the assumption of the serverProcessedContent
+                    // properties matching the propertiesMetadata. Since the propertiesMetadata is generated at
+                    // runtime we should enforce an expectation of the serverProcessedContent to match.
+                    //
+                    // This implicitly means a web part will receive a property bag that could not have properties it is expecting
+                    // if the data has been incorrectly modified at rest. The web part is expected to handle that.
+                    //
+                    // If the path is already undefined then we can skip setting to undefined and the enforcement
+                    if (manifest.id === 'b7dd04e1-19ce-4b24-9132-b60a1c2b910d' &&
+                        _SPKillSwitch.isActivated('71b68bd4-eb7a-4330-93bd-dc6d382123c1' /* '9/28/2023', 'Do not serverProcessContent sanitization for DocumentEmbedWebPart' */)) {
+                        return;
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var propValue = lodash.get(properties, propPath);
+                    if (propValue !== undefined) {
+                        var qosMonitor = new _QosMonitor('PropertyMetadataProcessor.clearMetadataValue');
+                        if (metadata.isLink) {
+                            propertyPathsNotInServerProcessedContent.add(propPath);
+                            if (!_this._isSafeLink(propValue)) {
+                                qosMonitor.writeUnexpectedFailure('ClearingLinkProperty', new Error(propPath));
+                                lodash.set(properties, propPath, undefined);
+                            }
+                        }
+                        if (metadata.isHtmlString) {
+                            propertyPathsNotInServerProcessedContent.add(propPath);
+                            var safeHtml = _this._getSafeHtml(propValue);
+                            if (safeHtml !== propValue) {
+                                qosMonitor.writeUnexpectedFailure('SettingSafeHtml', new Error(propPath));
+                                lodash.set(properties, propPath, safeHtml);
+                            }
+                        }
+                        if (!qosMonitor.hasEnded) {
+                            qosMonitor.writeSuccess();
+                        }
+                    }
+                }
+            });
+        }
+        if (serverProcessedContent) {
+            // Re-instate the server processed values in the specified path in the property bag.
+            // There is a change that the new shape of the property bag is different. But the
+            // the purpose of the inbuilt deserialization is to provide the same properties object
+            // back to the web part that has the same shape as when the serialization happened.
+            // CustomMetadata is only processed on the server so we do not round trip the data back
+            // into the web part properties.  This is by design of the feature
+            var htmlMaps = [
+                serverProcessedContent.htmlStrings,
+                serverProcessedContent.searchablePlainTexts,
+                serverProcessedContent.imageSources,
+                serverProcessedContent.links,
+                serverProcessedContent.componentDependencies
+            ];
+            for (var _i = 0, htmlMaps_1 = htmlMaps; _i < htmlMaps_1.length; _i++) {
+                var htmlMap = htmlMaps_1[_i];
+                if (htmlMap) {
+                    for (var _a = 0, _b = Object.entries(htmlMap); _a < _b.length; _a++) {
+                        var _c = _b[_a], propPath = _c[0], value = _c[1];
+                        // WARNING: This is critical code. Please do not modify without fully understanding the data pipeline
+                        if (typeof value === 'string') {
+                            lodash.set(properties, propPath, value);
+                            if (isServerPropertiesSanitizedEnabled()) {
+                                propertyPathsNotInServerProcessedContent.delete(propPath);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        if (isServerPropertiesSanitizedEnabled() &&
+            manifest &&
+            propertyPathsNotInServerProcessedContent.size > 0) {
+            var logServerPropertiesMissing = new _QosMonitor('PropertyMetadataProcessor.serverProcessedContentMissing');
+            logServerPropertiesMissing.writeUnexpectedFailure('Missing Content', undefined, {
+                manifest: manifest.id,
+                properties: Array.from(propertyPathsNotInServerProcessedContent).join(',')
+            });
+        }
+    };
+    PropertyMetadataProcessor._isSafeLink = function (link) {
+        try {
+            var safeLinkUrl = new URL(link);
+            return SafeHtml.isSafeLinkProtocol(safeLinkUrl.protocol);
+        }
+        catch (_a) {
+            try {
+                var safeLinkUrl = new URL(link, window.location.origin);
+                return SafeHtml.isSafeLinkProtocol(safeLinkUrl.protocol);
+            }
+            catch (_b) {
+                return false;
+            }
+        }
+    };
+    PropertyMetadataProcessor._getSafeHtml = function (html) {
+        return SafeHtml.clean(html);
+    };
+    /**
+     * Iterates and validates each metadata property before calling metadata processor.
+     *
+     * @param propertiesMetadata - Component properties metadata.
+     * @param properties - Component properties.
+     * @param metadataProcessor - Callback handler to to process validated metadata.
+     *
+     * @internal
+     */
+    PropertyMetadataProcessor._forEachPropertyWithMetaData = function (propertiesMetadata, properties, metadataProcessor) {
+        if (propertiesMetadata) {
+            var _loop_2 = function (propPath, metadata) {
+                this_1._validateAndIteratePath(propPath, properties, function (fixedPropPath, index) {
+                    metadataProcessor(fixedPropPath, metadata, index);
+                });
+            };
+            var this_1 = this;
+            for (var _i = 0, _a = Object.entries(propertiesMetadata); _i < _a.length; _i++) {
+                var _b = _a[_i], propPath = _b[0], metadata = _b[1];
+                _loop_2(propPath, metadata);
+            }
+        }
+    };
+    /**
+     * Validates path and iterate over one or multiple wildcard paths
+     *
+     * @param propPath - Original property path provided in metadata
+     * @param properties - Properties to look for the given path.
+     * @param propertyPathHandler - Handler to process validated and fixed path
+     */
+    PropertyMetadataProcessor._validateAndIteratePath = function (propPath, properties, propertyPathHandler) {
+        var wildcardCount = (propPath.match(/\*/g) || []).length;
+        if (wildcardCount > 1) {
+            // Skip if there are more than one asterisks in the path (not supported)
+            // eslint-disable-next-line no-console
+            console.warn("Invalid property path: Multiple wildcards are not supported in property paths.\nEntry with path '".concat(propPath, "' got ignored in the properties metadata."));
+            return;
+        }
+        else if (wildcardCount === 1) {
+            var index = propPath.indexOf('[*]');
+            if (index < -1) {
+                // eslint-disable-next-line no-console
+                console.warn("Invalid property path: Wildcards are only supported inside brackets to select array\nindices as in 'foo[*].bar'. Entry with path '".concat(propPath, "' got ignored in the properties metadata."));
+                // Skip if the wildcard is not used for an array (not supported)
+                return;
+            }
+            else {
+                // Handle the array wildcard by generating each individual property path
+                var arrayPath = propPath.substr(0, index);
+                var arrayInstance = lodash.get(properties, arrayPath);
+                if (!arrayInstance) {
+                    // eslint-disable-next-line no-console
+                    console.warn("Invalid property path: Could not find an array named '".concat(arrayPath, "' in the properties.\nEntry with path '").concat(propPath, "' got ignored in the properties metadata."));
+                    return;
+                }
+                else {
+                    for (var i = 0; i < arrayInstance.length; i++) {
+                        var fixedPropPath = propPath.replace('*', "".concat(i));
+                        propertyPathHandler(fixedPropPath, i);
+                    }
+                }
+            }
+        }
+        else {
+            propertyPathHandler(propPath);
+        }
+    };
+    return PropertyMetadataProcessor;
+}());
+export { PropertyMetadataProcessor };
+function isFixCustomMetadataKeyKillSwitchActivated() {
+    return _SPKillSwitch.isActivated('bf085c27-422d-4b62-a93a-43efa89e77ee'
+    /* '2022-03-28', 'Fix custom metadata key' */
+    );
+}
+//# sourceMappingURL=PropertyMetadataProcessor.js.map

package/lib/ShimmerFactory.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Class to create shimmers for applications.
+ *
+ * @internal
+ */
+export default class ShimmerFactory {
+    /**
+     *  Method that creates a shimmer for applications using an svg.
+     * @param width - Width of the shimmer
+     * @param height - Height of the shimmer
+     * @param componentTag - ID for the shimmer
+     * @param loadingMessage - Displays message when the shimmer loads
+     */
+    static createShimmer(width: number, height: number | undefined, componentTag: string, loadingMessage: string, containerMargin?: number | undefined): HTMLDivElement;
+    private static _shimmerRect;
+}
+//# sourceMappingURL=ShimmerFactory.d.ts.map

package/lib/ShimmerFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerFactory.d.ts","sourceRoot":"","sources":["../src/ShimmerFactory.ts"],"names":[],"mappings":"AAeA;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,cAAc;IACjC;;;;;;OAMG;WACW,aAAa,CACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,eAAe,GAAE,MAAM,GAAG,SAAqB,GAC9C,cAAc;IAwEjB,OAAO,CAAC,MAAM,CAAC,YAAY;CAiB5B"}

package/lib/ShimmerFactory.js

@@ -0,0 +1,62 @@
+import styles from './styles/shimmer.module.scss';
+// These constants are taken from generic shimmer design.
+var SHIMMER_WIDTH_DEFAULT = 100;
+var SHIMMER_HEIGHT_DEFAULT = 100;
+var SHIMMER_RECTANGLE_HEIGHT_MAX = 16;
+var SHIMMER_RECTANGLE_COUNT = 4;
+var SHIMMER_ELEMENT_COUNT = 2 * SHIMMER_RECTANGLE_COUNT + 1;
+var RECTANGLE_X = 8;
+var SHIMMER_MAIN_RECTANGLE_SIZE_RATIO = 0.9;
+var RECTANGLE_1_LENGTH = 20;
+var RECTANGLE_2_LENGTH = 40;
+var RECTANGLE_3_LENGTH = 90;
+var RECTANGLE_4_LENGTH = 80;
+/**
+ * Class to create shimmers for applications.
+ *
+ * @internal
+ */
+var ShimmerFactory = /** @class */ (function () {
+    function ShimmerFactory() {
+    }
+    /**
+     *  Method that creates a shimmer for applications using an svg.
+     * @param width - Width of the shimmer
+     * @param height - Height of the shimmer
+     * @param componentTag - ID for the shimmer
+     * @param loadingMessage - Displays message when the shimmer loads
+     */
+    ShimmerFactory.createShimmer = function (width, height, componentTag, loadingMessage, containerMargin) {
+        if (containerMargin === void 0) { containerMargin = undefined; }
+        width = width || SHIMMER_WIDTH_DEFAULT;
+        height = height || SHIMMER_HEIGHT_DEFAULT;
+        var shimmerContainerDiv = document.createElement('div');
+        shimmerContainerDiv.className = styles.shimmerContainer;
+        var shimmerDiv = document.createElement('div');
+        var mainRectangleHeight = height * SHIMMER_MAIN_RECTANGLE_SIZE_RATIO;
+        var rectangleHeight = mainRectangleHeight / SHIMMER_ELEMENT_COUNT;
+        rectangleHeight = Math.min(SHIMMER_RECTANGLE_HEIGHT_MAX, rectangleHeight);
+        var gap = 2 * rectangleHeight;
+        var rectangle1Y = rectangleHeight;
+        var rectangle2Y = rectangle1Y + gap;
+        var rectangle3Y = rectangle2Y + gap;
+        var rectangle4Y = rectangle3Y + gap;
+        var className = styles.shimmerElementFill;
+        shimmerDiv.innerHTML = "<svg width=".concat(width, " height=").concat(height, " viewBox=\"0 0 ").concat(width, " ").concat(height, "\" version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <title>").concat(loadingMessage, "</title>\n        <g id=").concat(componentTag, "_Shimmer stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n          <rect x=\"0\" y=\"0\" width=").concat(width, " height=").concat(height, "></rect>\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_1', className, RECTANGLE_X, rectangle1Y, RECTANGLE_1_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_2', className, RECTANGLE_X, rectangle2Y, RECTANGLE_2_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_3', className, RECTANGLE_X, rectangle3Y, RECTANGLE_3_LENGTH, rectangleHeight), "\n          ").concat(ShimmerFactory._shimmerRect(componentTag + '_4', className, RECTANGLE_X, rectangle4Y, RECTANGLE_4_LENGTH, rectangleHeight), "\n        </g>\n      </svg>");
+        if (containerMargin !== undefined) {
+            shimmerContainerDiv.style.margin = containerMargin + '';
+        }
+        shimmerContainerDiv.appendChild(shimmerDiv);
+        var shimmerAccessibilityContainerDiv = document.createElement('div');
+        shimmerAccessibilityContainerDiv.setAttribute('role', 'status');
+        shimmerAccessibilityContainerDiv.setAttribute('aria-live', 'polite');
+        shimmerContainerDiv.appendChild(shimmerAccessibilityContainerDiv);
+        return shimmerContainerDiv;
+    };
+    ShimmerFactory._shimmerRect = function (id, className, x, y, width, height) {
+        return "<rect id=".concat(id, " class=").concat(className, " x=").concat(x, " y=").concat(y, " width=\"").concat(width, "%\" height=").concat(height, ">\n      <animate\n      attributeName=\"opacity\"\n      dur=\"1s\"\n      values=\"0.2;0.5;0.9\"\n      repeatCount=\"indefinite\"\n      begin=\"0\"/>\n    </rect>");
+    };
+    return ShimmerFactory;
+}());
+export default ShimmerFactory;
+//# sourceMappingURL=ShimmerFactory.js.map

package/lib/chunks/legacy-third-party-fabric-core/FabricLocalFont.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Include Fabric here so we aren't dependent on the Fabric CDN
+ *
+ * These are legacy styles from fabric-core statically copied on 11/24/2017.
+ * SPFx is exporting them to support backward compatibilty for the existing
+ * third-party production web parts.
+ *
+ * Please DO NOT update these styles with new styles.All new development should
+ * use \@microsoft/sp-office-ui-fabric-core package for core styles.
+ *
+ * NOTE: Fabric.LocalFont is a modified copy of legacy Fabric that removes the
+ * use of Segoe CSS font-face in favor of local fonts (Segoe/SF/Roboto).
+ */
+import './fabric-core-sass/Fabric.LocalFont.global.scss';
+import './fabric-core-shim.global.scss';
+import './iconDefinitions.css';
+//# sourceMappingURL=FabricLocalFont.d.ts.map

package/lib/chunks/legacy-third-party-fabric-core/FabricLocalFont.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FabricLocalFont.d.ts","sourceRoot":"","sources":["../../../src/chunks/legacy-third-party-fabric-core/FabricLocalFont.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,iDAAiD,CAAC;AACzD,OAAO,gCAAgC,CAAC;AAExC,OAAO,uBAAuB,CAAC"}

package/lib/chunks/legacy-third-party-fabric-core/FabricLocalFont.js

@@ -0,0 +1,17 @@
+/**
+ * Include Fabric here so we aren't dependent on the Fabric CDN
+ *
+ * These are legacy styles from fabric-core statically copied on 11/24/2017.
+ * SPFx is exporting them to support backward compatibilty for the existing
+ * third-party production web parts.
+ *
+ * Please DO NOT update these styles with new styles.All new development should
+ * use \@microsoft/sp-office-ui-fabric-core package for core styles.
+ *
+ * NOTE: Fabric.LocalFont is a modified copy of legacy Fabric that removes the
+ * use of Segoe CSS font-face in favor of local fonts (Segoe/SF/Roboto).
+ */
+import './fabric-core-sass/Fabric.LocalFont.global.scss';
+import './fabric-core-shim.global.scss';
+import './iconDefinitions.css';
+//# sourceMappingURL=FabricLocalFont.js.map