@microsoft/sp-component-base 1.17.4 → 1.18.0-beta.2

package/lib-commonjs/DynamicDataProvider.js

@@ -119,7 +119,7 @@ var DynamicDataProvider = /** @class */ (function () {
         sp_core_library_1.Validate.isNonemptyString(sourceId, 'sourceId');
         sp_core_library_1.Validate.isNotNullOrUndefined(callback, 'callback');
         var registration = { id: sourceId, callback: callback };
-        if (!this.isRegistrationPending(registration)) {
+        if (!this._isRegistrationPending(registration)) {
             // Source is already registered.
             this._dynamicDataManager.unregisterSourceChanged(sourceId, this._component, callback);
             this._logFeatureEntry('UnregisterSourceChanged', { sourceId: sourceId });
@@ -184,7 +184,7 @@ var DynamicDataProvider = /** @class */ (function () {
             propertyId: propertyId
         };
         // registration is in pending state.
-        if (!this.isRegistrationPending(registration)) {
+        if (!this._isRegistrationPending(registration)) {
             this._dynamicDataManager.unregisterPropertyChanged(sourceId, propertyId, this._component, callback);
             this._logFeatureEntry('UnregisterPropertyChanged', { sourceId: sourceId, propertyId: propertyId });
         }
@@ -271,7 +271,7 @@ var DynamicDataProvider = /** @class */ (function () {
         if (!dataSource) {
             return undefined;
         }
-        var data = dataSource.getPropertyValue(dataReference.property); // tslint:disable-line:no-any
+        var data = dataSource.getPropertyValue(dataReference.property);
         if (data && dataReference.propertyPath) {
             // multiple levels of sub-properties are separated by '.' in the property path.
             var subpaths = dataReference.propertyPath.split('.');
@@ -286,7 +286,7 @@ var DynamicDataProvider = /** @class */ (function () {
                 // then extract that specific entry.
                 if (data) {
                     if (Array.isArray(data)) {
-                        var dataItems_1 = []; /* tslint:disable-line:no-any */
+                        var dataItems_1 = [];
                         data.forEach(function (item) {
                             if (item.hasOwnProperty(subProperty)) {
                                 dataItems_1.push(item[subProperty]);
@@ -303,7 +303,7 @@ var DynamicDataProvider = /** @class */ (function () {
                              * Since the subpath element is an array, we are normalizing the existing dataItems object
                              * i.e., dataItems will have an array of array objects.
                              */
-                            var tempDataItems_1 = []; /* tslint:disable-line:no-any */
+                            var tempDataItems_1 = [];
                             dataItems_1.forEach(function (dataItem) {
                                 dataItem.forEach(function (internalItem) { return tempDataItems_1.push(internalItem); });
                             });
@@ -367,7 +367,7 @@ var DynamicDataProvider = /** @class */ (function () {
      * Also adds a listener to the _DynamicDataManager's sourcesChangedEvent.
      */
     DynamicDataProvider.prototype._addPendingRegistration = function (registration) {
-        if (!this.isRegistrationPending(registration)) {
+        if (!this._isRegistrationPending(registration)) {
             this._pendingRegistrations.set(registration.id + (registration.propertyId || ''), {
                 id: registration.id,
                 propertyId: registration.propertyId,
@@ -395,7 +395,7 @@ var DynamicDataProvider = /** @class */ (function () {
      *
      * @param incomingRegistration - registration to be checked.
      */
-    DynamicDataProvider.prototype.isRegistrationPending = function (incomingRegistration) {
+    DynamicDataProvider.prototype._isRegistrationPending = function (incomingRegistration) {
         return this._pendingRegistrations.has(incomingRegistration.id + (incomingRegistration.propertyId || ''));
     };
     /**

package/lib-commonjs/DynamicDataSourceManager.js

@@ -82,7 +82,7 @@ var DynamicDataSourceManager = /** @class */ (function () {
     DynamicDataSourceManager.prototype.initializeSource = function (callableFunctions) {
         this._assertNotDisposed();
         this._assertInitialized();
-        if (!!this._src) {
+        if (this._src) {
             throw new Error(Strings_resx_1.default.SourceAlreadyInitialized);
         }
         this._callableFunctions = callableFunctions;
@@ -186,7 +186,6 @@ var DynamicDataSourceManager = /** @class */ (function () {
      * @param eventName - Name of the event
      * @param data - Associated data
      */
-    // tslint:disable-next-line:no-any
     DynamicDataSourceManager.prototype._sendEvent = function (eventName, data) {
         this._assertValidEvent(eventName);
         this._callableFunctions.sendEvent(eventName, data);
@@ -210,13 +209,11 @@ var DynamicDataSourceManager = /** @class */ (function () {
      * propertyId will have [*] notation appended at the end to support valid JSON Path notation.
      * Hence when reading the property id, we account for that and extract the name accordingly.
      */
-    // tslint:disable-next-line:no-any
     DynamicDataSourceManager.prototype._getPropertyValue = function (propertyId) {
         sp_core_library_1.Validate.isNotNullOrUndefined(propertyId, 'propertyId');
         var qosMonitor = new sp_diagnostics_1._QosMonitor('DynamicDataSourceManager._getPropertyValue');
         var paths = propertyId.split(DynamicDataProvider_1.default._jsonPathArrayRegex);
         try {
-            // tslint:disable-next-line:no-any
             var propertyValue = this._callableFunctions.getPropertyValue(paths.shift());
             if (paths.length > 0) {
                 if (!isNaN(parseInt(paths[0], 10)) && Array.isArray(propertyValue)) {
@@ -227,7 +224,7 @@ var DynamicDataSourceManager = /** @class */ (function () {
                 if (
                 // This code can be slow if there is a many property definitions (O(n) for number of properties).
                 // It's done this way to prioritize memory consumption instead of CPU cycles as this is an optional feature,
-                // so if it's not used there is no memory foorprint
+                // so if it's not used there is no memory footprint
                 this._callableFunctions.getPropertyDefinitions().filter(function (def) { return def.id === propertyId; }).length ===
                     0 &&
                     this._src // Check that the source exists to get its title
@@ -235,7 +232,13 @@ var DynamicDataSourceManager = /** @class */ (function () {
                     throw new Error("Property \"".concat(propertyId, "\" doesn't exist in source \"").concat(this._src.metadata.title, "\""));
                 }
             }
-            qosMonitor.writeSuccess(tslib_1.__assign(tslib_1.__assign({}, ((this._src && this._src.metadata) || {})), { sourceId: this._src && this._src.id, propertyValue: propertyValue, propertyId: propertyId }));
+            // propertyValue can contain PII so we need to remove it before logging.
+            if ((0, KillSwitches_1.isDropPropertyValueExtraDataKsActivated)()) {
+                qosMonitor.writeSuccess(tslib_1.__assign(tslib_1.__assign({}, ((this._src && this._src.metadata) || {})), { sourceId: this._src && this._src.id, propertyValue: propertyValue, propertyId: propertyId }));
+            }
+            else {
+                qosMonitor.writeSuccess(tslib_1.__assign(tslib_1.__assign({}, ((this._src && this._src.metadata) || {})), { sourceId: this._src && this._src.id, propertyId: propertyId }));
+            }
             return (0, sp_lodash_subset_1.cloneDeep)(propertyValue);
         }
         catch (error) {
@@ -249,7 +252,6 @@ var DynamicDataSourceManager = /** @class */ (function () {
     };
     /**
      * Returns the real time value of the property.
-     * @param propertyId - property id for which the value is requested.
      */
     DynamicDataSourceManager.prototype._getPropertyDefinitionsAsync = function () {
         return Promise.resolve(this._getPropertyDefinitions());
@@ -258,7 +260,6 @@ var DynamicDataSourceManager = /** @class */ (function () {
      * Returns the real time value of the property.
      * @param propertyId - property id for which the value is requested.
      */
-    // tslint:disable-next-line:no-any
     DynamicDataSourceManager.prototype._getPropertyValueAsync = function (propertyId) {
         return Promise.resolve(this._getPropertyValue(propertyId));
     };
@@ -290,7 +291,6 @@ var DynamicDataSourceManager = /** @class */ (function () {
         if (getAnnotatedPropertyValue) {
             var paths = propertyId.split(DynamicDataProvider_1.default._jsonPathArrayRegex);
             try {
-                // tslint:disable-next-line:no-any
                 annotatedPropertyValue = this._callableFunctions.getAnnotatedPropertyValue(paths.shift());
                 if (paths.length > 0) {
                     if (!isNaN(parseInt(paths[0], 10)) && Array.isArray(annotatedPropertyValue)) {
@@ -331,7 +331,7 @@ var DynamicDataSourceManager = /** @class */ (function () {
             instanceId: component.instanceId
         };
         // Web parts have properties "title" and "description" that should go to the source by default.
-        var componentWithMetadata = component; // tslint:disable-line:no-any
+        var componentWithMetadata = component;
         if (componentWithMetadata.title) {
             metadata.title = componentWithMetadata.title;
         }

package/lib-commonjs/DynamicProperty.js

@@ -27,7 +27,6 @@ var DynamicProperty = /** @class */ (function () {
         this._hasValue = false;
         this._isDisposed = false;
         sp_core_library_1.Validate.isNotNullOrUndefined(provider, 'provider');
-        // tslint:disable-next-line:no-string-literal
         this['__type'] = DynamicProperty._TYPE_NAME;
         this._provider = provider;
         this._callbacks = new Set();
@@ -203,7 +202,6 @@ var DynamicProperty = /** @class */ (function () {
      * an empty array if the source or the data doesn't exist.
      */
     DynamicProperty.prototype.tryGetValues = function () {
-        // tslint:disable-next-line:no-any
         var value = this._getData();
         // OK, time for some massaging of the return.
         if (value) {
@@ -326,7 +324,6 @@ var DynamicProperty = /** @class */ (function () {
      *
      * @internal
      */
-    // tslint:disable-next-line:no-any
     DynamicProperty.prototype._cloneDeep = function (instance) {
         return lodash.cloneDeepWith(instance, function (prop) {
             if (prop instanceof DynamicDataProvider_1.default) {
@@ -341,7 +338,7 @@ var DynamicProperty = /** @class */ (function () {
      * Removes the array notation from the property name, if any, before it is being registered.
      * This is to avoid any mismatch between the strings passed by the source when it notifies
      * a property change, as the source doesn't pass any array notation with the property name.
-     * Array notation is only for internal representaion, for a property whose value is an array type.
+     * Array notation is only for internal representation, for a property whose value is an array type.
      */
     DynamicProperty.prototype._getPropertyToRegister = function () {
         sp_core_library_1.Validate.isNotDisposed(this, 'DynamicData');

package/lib-commonjs/LegacyThirdPartyFabricCoreLoader.js

@@ -44,10 +44,10 @@ var LegacyThirdPartyFabricCoreLoader = /** @class */ (function () {
      * @param isComponentInternal - indicates whether the requesting component is internal to Microsoft or not.
      */
     LegacyThirdPartyFabricCoreLoader.load = function (isComponentInternal) {
-        if (!isComponentInternal && !LegacyThirdPartyFabricCoreLoader.isLoaded) {
+        if (!isComponentInternal && !LegacyThirdPartyFabricCoreLoader._isLoaded) {
             return Promise.resolve().then(function () { return __importStar(require(
             /* webpackChunkName: 'legacy-third-party-fabric-core-localfont' */ './chunks/legacy-third-party-fabric-core/FabricLocalFont')); }).then(function () {
-                LegacyThirdPartyFabricCoreLoader.isLoaded = true;
+                LegacyThirdPartyFabricCoreLoader._isLoaded = true;
                 return;
             });
         }
@@ -69,7 +69,7 @@ var LegacyThirdPartyFabricCoreLoader = /** @class */ (function () {
             if (LegacyThirdPartyFabricCoreLoader._shouldLoad(manifest)) {
                 return Promise.resolve().then(function () { return __importStar(require(
                 /* webpackChunkName: 'legacy-third-party-fabric-core-localfont' */ './chunks/legacy-third-party-fabric-core/FabricLocalFont')); }).then(function () {
-                    LegacyThirdPartyFabricCoreLoader.isLoaded = true;
+                    LegacyThirdPartyFabricCoreLoader._isLoaded = true;
                     return;
                 });
             }
@@ -102,13 +102,13 @@ var LegacyThirdPartyFabricCoreLoader = /** @class */ (function () {
         return manifest.loadLegacyFabricCss;
     };
     LegacyThirdPartyFabricCoreLoader._shouldLoad = function (manifest) {
-        return (!LegacyThirdPartyFabricCoreLoader.isLoaded &&
+        return (!LegacyThirdPartyFabricCoreLoader._isLoaded &&
             LegacyThirdPartyFabricCoreLoader.needLegacyFabricCss(manifest));
     };
     /**
      * Indicates whether the fabric-core styles are loaded on the page or not.
      */
-    LegacyThirdPartyFabricCoreLoader.isLoaded = false;
+    LegacyThirdPartyFabricCoreLoader._isLoaded = false;
     return LegacyThirdPartyFabricCoreLoader;
 }());
 exports.default = LegacyThirdPartyFabricCoreLoader;

package/lib-commonjs/PropertyMetadataProcessor.js

@@ -16,8 +16,8 @@ var PropertyMetadataProcessor = /** @class */ (function () {
     /**
      * Serialize the properties into server processed content as declared in metadata.
      *
-     * @param properties - The component properties. This object will be modified during serialization.
      * @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) {
@@ -55,14 +55,13 @@ var PropertyMetadataProcessor = /** @class */ (function () {
                     // Build custom metadata for the given property path
                     var customMetadata_1 = {};
                     if (metadata && metadata.customMetadata) {
-                        var _loop_1 = function (propName) {
-                            /* tslint:disable-line:forin */
-                            var customMetadataPropPath = metadata.customMetadata[propName];
-                            if (iteration !== undefined && customMetadataPropPath.indexOf('*') !== -1) {
+                        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
-                                customMetadataPropPath = customMetadataPropPath.replace('*', iteration.toString());
+                                normalizedCustomMetadataPropPath = normalizedCustomMetadataPropPath.replace('*', iteration.toString());
                             }
-                            _this._validateAndIteratePath(customMetadataPropPath, properties, function (fixedPropPath, customIteration) {
+                            _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);
@@ -78,8 +77,9 @@ var PropertyMetadataProcessor = /** @class */ (function () {
                                 }
                             });
                         };
-                        for (var propName in metadata.customMetadata) {
-                            _loop_1(propName);
+                        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) {
@@ -97,8 +97,8 @@ var PropertyMetadataProcessor = /** @class */ (function () {
      * 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 properties - The component properties. This object will be modified during serialization.
      * @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.
      */
@@ -134,10 +134,9 @@ var PropertyMetadataProcessor = /** @class */ (function () {
             for (var _i = 0, htmlMaps_1 = htmlMaps; _i < htmlMaps_1.length; _i++) {
                 var htmlMap = htmlMaps_1[_i];
                 if (htmlMap) {
-                    for (var propPath in htmlMap) {
-                        /* tslint:disable-line:forin */
+                    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
-                        var value = htmlMap[propPath];
                         if (typeof value === 'string') {
                             lodash.set(properties, propPath, value);
                         }
@@ -149,24 +148,23 @@ var PropertyMetadataProcessor = /** @class */ (function () {
     /**
      * Iterates and validates each metadata property before calling metadata processor.
      *
-     * @param properties - Component properties.
      * @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) {
-                /* tslint:disable-line:forin */
-                var metadata = propertiesMetadata[propPath];
+            var _loop_2 = function (propPath, metadata) {
                 this_1._validateAndIteratePath(propPath, properties, function (fixedPropPath, index) {
                     metadataProcessor(fixedPropPath, metadata, index);
                 });
             };
             var this_1 = this;
-            for (var propPath in propertiesMetadata) {
-                _loop_2(propPath);
+            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);
             }
         }
     };
@@ -181,12 +179,14 @@ var PropertyMetadataProcessor = /** @class */ (function () {
         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;
@@ -196,6 +196,7 @@ var PropertyMetadataProcessor = /** @class */ (function () {
                 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;
                 }

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

@@ -1,6 +1,4 @@
 "use strict";
-/* tslint:disable:export-name variable-name */
-Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Include Fabric here so we aren't dependent on the Fabric CDN
  *
@@ -9,11 +7,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * 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.
+ * 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).
  */
+Object.defineProperty(exports, "__esModule", { value: true });
 require("./fabric-core-sass/Fabric.LocalFont.scss");
 require("./fabric-core-shim.scss");
 require("./iconDefinitions.css");

package/lib-commonjs/chunks/legacy-third-party-fabric-core/fabric-core-sass/Fabric.LocalFont.scss.css

@@ -6903,59 +6903,59 @@
 }
 @media (max-width: 479px) {
   .ms-SPLegacyFabricBlock .ms-hiddenSm,
-.ms-SPLegacyFabricBlock .ms-hiddenMdDown,
-.ms-SPLegacyFabricBlock .ms-hiddenLgDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXlDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
+  .ms-SPLegacyFabricBlock .ms-hiddenMdDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
     display: none !important;
   }
 }
 @media (min-width: 480px) and (max-width: 639px) {
   .ms-SPLegacyFabricBlock .ms-hiddenMd,
-.ms-SPLegacyFabricBlock .ms-hiddenMdUp,
-.ms-SPLegacyFabricBlock .ms-hiddenMdDown,
-.ms-SPLegacyFabricBlock .ms-hiddenLgDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXlDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
+  .ms-SPLegacyFabricBlock .ms-hiddenMdUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenMdDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
     display: none !important;
   }
 }
 @media (min-width: 640px) and (max-width: 1023px) {
   .ms-SPLegacyFabricBlock .ms-hiddenMdUp,
-.ms-SPLegacyFabricBlock .ms-hiddenLg,
-.ms-SPLegacyFabricBlock .ms-hiddenLgUp,
-.ms-SPLegacyFabricBlock .ms-hiddenLgDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXlDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
+  .ms-SPLegacyFabricBlock .ms-hiddenLg,
+  .ms-SPLegacyFabricBlock .ms-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenLgDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
     display: none !important;
   }
 }
 @media (min-width: 1024px) and (max-width: 1365px) {
   .ms-SPLegacyFabricBlock .ms-hiddenMdUp,
-.ms-SPLegacyFabricBlock .ms-hiddenLgUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXl,
-.ms-SPLegacyFabricBlock .ms-hiddenXlUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXlDown,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
+  .ms-SPLegacyFabricBlock .ms-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXl,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlDown,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
     display: none !important;
   }
 }
 @media (min-width: 1366px) and (max-width: 1919px) {
   .ms-SPLegacyFabricBlock .ms-hiddenMdUp,
-.ms-SPLegacyFabricBlock .ms-hiddenLgUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXlUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXxl,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
+  .ms-SPLegacyFabricBlock .ms-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxl,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlDown {
     display: none !important;
   }
 }
 @media (min-width: 1920px) {
   .ms-SPLegacyFabricBlock .ms-hiddenMdUp,
-.ms-SPLegacyFabricBlock .ms-hiddenLgUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXlUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXxlUp,
-.ms-SPLegacyFabricBlock .ms-hiddenXxxl {
+  .ms-SPLegacyFabricBlock .ms-hiddenLgUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXlUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxlUp,
+  .ms-SPLegacyFabricBlock .ms-hiddenXxxl {
     display: none !important;
   }
 }