[pull] master from microsoft:master

.devops/templates/build-test-lint.yml

@@ -29,9 +29,9 @@ steps:
 
   - script: |
       if [[ -n "$(targetBranch)" ]]; then
-        yarn format --since $(targetBranch) --check
+        yarn nx format:check --base $(targetBranch)
       else
-        yarn format --all --check
+        yarn nx format:check --all
       fi
     displayName: check formatting
 

change/@fluentui-merge-styles-006a4ebc-3844-4381-b6de-5cd56fbe3742.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(security): escape < and > in serialized CSS values and stylesheet state so they cannot terminate a <style> or <script> element during SSR",
+  "packageName": "@fluentui/merge-styles",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-37b8b8d0-2866-4288-9f75-2a52fd8f764e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: warn in development when DocumentCard onClickHref is given a script URL",
+  "packageName": "@fluentui/react",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-calendar-compat-25031152-3f2f-498b-87b1-6be678cf09b7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-charting-cbed644d-0462-46f7-afe2-8573d6563098.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: note that IChartDataPoint.color is rendered into generated CSS and should be validated when it comes from untrusted input",
+  "packageName": "@fluentui/react-charting",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-4210bc32-eb8c-4fee-a455-9e9d11c6e3ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-docsite-components-8f3a1c42-6b7e-4d29-9a1e-2c5b7f0d3e14.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: warn that Markdown's `enableRenderHtmlBlock` renders unsanitized HTML and must only be used with developer-authored content",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-field-6b1c6a5e-0b7d-4a7f-9e0a-2f3d4c5b6a71.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs: clarify how `supportsSize` option of `useFieldControlProps_unstable` applies the Field size",
+  "packageName": "@fluentui/react-field",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-headless-components-preview-a339eaf6-e97d-41b0-85ea-ab3bb5c3c24b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: collapse redundant headless type, render, and hook wrappers to direct re-exports",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-icons-compat-99ab4ccd-a0a4-491e-9a10-2ca1d53293bd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-icons-compat",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-infolabel-f02577ac-913f-4ed1-aac8-5f307f228cd1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-infolabel",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-input-3a8f1b62-7d94-4c05-a1e2-8f6b0d5c9e37.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add TODO for the no-op `supportsSize` field control option",
+  "packageName": "@fluentui/react-input",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-list-6eb5d551-5f64-4f24-bb6d-b10489732089.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-list",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-message-bar-54930096-3ea9-4baa-8b33-679925651403.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-cf2ba3fb-7d37-4d0a-8105-9940c72ccc19.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-7f7c3881-f1a9-4fe3-bbda-a9ecb0df4076.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-motion",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-rating-6b5a0004-4b31-41da-bc93-16cf12c97dd5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-rating",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-swatch-picker-ff10de4e-2836-4f56-8cf2-a5e8bef29b4d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-swatch-picker",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-9c2d7f31-4e58-4a63-8b90-1d7e6f2c3a45.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove no-op `supportsSize` field control option from `TagPickerInput`",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-teaching-popover-95c14e7f-f226-48a2-94e6-27c2e7cb89a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-textarea-5e0c9a84-2b17-4f36-9c58-6a4d3e1b7f82.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add TODO for the no-op `supportsSize` field control option",
+  "packageName": "@fluentui/react-textarea",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-timepicker-compat-f96b242c-6379-4d5b-908e-e30185ee30a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: align react/react-dom/@types peerDependencies with the react/jsx-runtime 16.14.0 floor",
+  "packageName": "@fluentui/react-timepicker-compat",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "patch"
+}

docs/react-wiki-archive/Server-side-rendering-and-browserless-testing.md

@@ -1,5 +1,9 @@
 ## Server-side rendering
 
+> **Security note**
+>
+> Both recipes below write Fluent UI output into raw text elements using `dangerouslySetInnerHTML` - `Stylesheet.getRules()` into a `<style>` and `Stylesheet.serialize()` into a `<script>`. `merge-styles` escapes `<`/`>` in declaration values and `<` in the serialized state so neither string can terminate its element, but you are still responsible for validating any untrusted data (user- or tenant-supplied colors, accents, background image URLs) that you route into a style value, and for serving a Content Security Policy. Do not pass untrusted data to `Stylesheet.insertRule`, which is not escaped because it accepts full rules including selectors.
+
 ## Next.js setup
 
 For basic instructions on getting Next.js set up, see https://nextjs.org/

package.json

@@ -19,7 +19,7 @@
     "check:installed-dependencies-versions": "satisfied --no-peers --skip-invalid",
     "create-component": "nx g @fluentui/workspace-plugin:react-component",
     "create-package": "nx g @fluentui/workspace-plugin:react-library",
-    "format": "node scripts/executors/src/format.js",
+    "format": "nx format",
     "generate-version-files": "node -r ./scripts/ts-node/src/register ./scripts/generators/src/generate-version-files",
     "postinstall": "husky && node ./scripts/package-manager/src/postinstall.js",
     "preinstall": "node ./scripts/package-manager/src/preinstall.js",

packages/charts/react-charting/src/types/IDataPoint.ts

@@ -132,6 +132,8 @@ export interface IChartDataPoint {
 
   /**
    * Color for the legend in the chart. If not provided, it will fallback on the default color palette.
+   *
+   * @remarks This value is rendered into generated CSS. Validate it before assigning untrusted input to it.
    */
   color?: string;
 

packages/merge-styles/README.md

@@ -485,6 +485,20 @@ renderStatic(() => ReactDOM.renderToString(<App/>);
 
 - Rehydration on the client may result in mismatched rules. You can apply a namespace on the server side to ensure there aren't name collisions.
 
+### Untrusted data in style values
+
+The `css` returned by `renderStatic` (and by `Stylesheet.getRules`) is raw CSS text that is normally written into a `<style>` element. A `<style>` element is HTML raw text, so a declaration value containing `</style>` would otherwise terminate it and inject markup.
+
+To prevent that, `merge-styles` emits `<` and `>` inside declaration values as the CSS code point escapes `\3C ` and `\3E `. This is semantics-preserving - the escapes decode back to the same characters, including inside quoted strings and `url()`. Likewise, `Stylesheet.serialize` emits `<` as `\u003C` so its output can be embedded in an inline `<script>` for rehydration.
+
+This escaping is defense in depth, not a substitute for validating input. Applications remain responsible for:
+
+- Validating any untrusted data (user- or tenant-supplied brand colors, accents, background image URLs) before using it as a style value.
+- `Stylesheet.insertRule`, which is intentionally **not** escaped because it accepts complete rules including selectors, and selectors legitimately contain `<` and `>` adjacent characters such as the `>` child combinator. Never pass untrusted data to it.
+- Serving a Content Security Policy, which limits the impact of any injection.
+
+Note also that rules registered with `preserve` - which is what `fontFace` and `keyframes` do - are intentionally retained by `Stylesheet.reset`, so they are re-emitted by every later `getRules(true)` call in the same process. Do not derive font faces or keyframes from per-request untrusted data in a shared server process.
+
 ## Working with content security policy (CSP)
 
 Some content security policies prevent style injection without a nonce. To set the nonce used by `merge-styles`:

packages/merge-styles/src/Stylesheet.test.ts

@@ -90,6 +90,7 @@ describe('Stylesheet', () => {
 
       it('returns a new instance on mismatched global', () => {
         // We need to modify internals in order to mock this behaviour.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (_stylesheet as any)._lastStyleElement = { ownerDocument: {} };
 
         const newInstance = Stylesheet.getInstance();
@@ -409,6 +410,15 @@ describe('Stylesheet', () => {
         );
       });
 
+      it('escapes `<` so the result is safe to embed in an inline script element', () => {
+        _stylesheet.insertRule('a { content: "</script>" };');
+
+        const serializedStylesheet = _stylesheet.serialize();
+
+        expect(serializedStylesheet).not.toContain('<');
+        expect(JSON.parse(serializedStylesheet).rules).toEqual(['a { content: "</script>" };']);
+      });
+
       it('can be deserialized', () => {
         const rehydrationData = JSON.parse(
           // eslint-disable-next-line @fluentui/max-len

packages/merge-styles/src/Stylesheet.ts

@@ -168,6 +168,7 @@ export class Stylesheet {
   private _keyToClassName: { [key: string]: string } = {};
   private _onInsertRuleCallbacks: (Function | InsertRuleCallback)[] = [];
   private _onResetCallbacks: Function[] = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _classNameToArgs: { [key: string]: { args: any; rules: string[] } } = {};
 
   /**
@@ -210,6 +211,10 @@ export class Stylesheet {
 
   /**
    * Serializes the Stylesheet instance into a format which allows rehydration on creation.
+   *
+   * `<` is emitted as the `\u003C` JSON escape so the result can be safely embedded in an inline
+   * `<script>` element without terminating it. `JSON.parse` round-trips to an identical object.
+   *
    * @returns string representation of `ISerializedStylesheet` interface.
    */
   public serialize(): string {
@@ -219,7 +224,7 @@ export class Stylesheet {
       keyToClassName: this._keyToClassName,
       preservedRules: this._preservedRules,
       rules: this._rules,
-    });
+    }).replace(/</g, '\\u003C');
   }
 
   /**
@@ -321,7 +326,14 @@ export class Stylesheet {
 
   /**
    * Inserts a css rule into the stylesheet.
-   * @param preserve - Preserves the rule beyond a reset boundary.
+   *
+   * The rule is inserted verbatim - no escaping is performed, because a rule includes its selector
+   * and selectors legitimately contain characters such as `>`. Callers passing untrusted data are
+   * responsible for validating it before it reaches this method.
+   *
+   * @param preserve - Preserves the rule beyond a reset boundary. Note that {@link Stylesheet.reset}
+   * intentionally does not clear preserved rules, so a preserved rule is re-emitted by every
+   * subsequent {@link Stylesheet.getRules} call in the same process.
    */
   public insertRule(rule: string, preserve?: boolean, stylesheetKey: string = GLOBAL_STYLESHEET_KEY): void {
     const { injectionMode } = this._config;
@@ -361,6 +373,10 @@ export class Stylesheet {
   /**
    * Gets all rules registered with the stylesheet; only valid when
    * using InsertionMode.none.
+   *
+   * The return value is raw CSS text intended for a `<style>` element. Values that went through
+   * `mergeStyles`, `fontFace` or `keyframes` have `<` and `>` escaped as CSS code points so they
+   * cannot terminate that element, but rules added via {@link Stylesheet.insertRule} are unescaped.
    */
   public getRules(includePreservedRules?: boolean): string {
     return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');
@@ -369,6 +385,9 @@ export class Stylesheet {
   /**
    * Resets the internal state of the stylesheet. Only used in server
    * rendered scenarios where we're using InsertionMode.none.
+   *
+   * Rules registered with `preserve` (via `fontFace` and `keyframes`) are intentionally retained,
+   * so they survive into every later render served by the same process.
    */
   public reset(): void {
     this._rules = [];

packages/merge-styles/src/fontFace.test.ts

@@ -25,4 +25,17 @@ describe('fontFace', () => {
 
     expect(_stylesheet.getRules()).toEqual('@font-face{font-family:Segoe UI;src:url("foo");}');
   });
+
+  it('escapes values that would terminate the style element', () => {
+    _stylesheet.reset();
+    fontFace({
+      fontFamily: 'x</style><script>alert(1)</script>',
+      src: 'url("foo")',
+    });
+
+    const rules = _stylesheet.getRules(true);
+
+    expect(rules).not.toContain('</style');
+    expect(rules).toContain('font-family:x\\3C /style\\3E ');
+  });
 });

packages/merge-styles/src/keyframes.test.ts

@@ -73,4 +73,16 @@ describe('keyframes', () => {
 
     expect(_stylesheet.getRules()).toEqual('@keyframes css-0{from{opacity:0;}to{opacity:1;}}');
   });
+
+  it('escapes values that would terminate the style element', () => {
+    keyframes({
+      from: { background: 'red;}</style><script>alert(1)</script>' },
+      to: { opacity: 1 },
+    });
+
+    const rules = _stylesheet.getRules(true);
+
+    expect(rules).not.toContain('</style');
+    expect(rules).not.toContain('<script');
+  });
 });

packages/merge-styles/src/server.test.ts

@@ -35,4 +35,21 @@ describe('staticRender', () => {
     expect(html).toEqual(`<div class="test-root-0">Hello!</div>`);
     expect(css).toEqual(`.test-root-0{background:red;}`);
   });
+
+  it('does not emit a style element terminator from an untrusted style value', () => {
+    const { css } = renderStatic(() => {
+      const classNames: { root: string } = mergeCssSets([
+        {
+          root: {
+            background: 'red;}</style><script>alert(document.cookie)</script><style>.x{color:red',
+          },
+        },
+      ]);
+
+      return `<div class="${classNames.root}">Hello!</div>`;
+    });
+
+    expect(css).not.toContain('</style');
+    expect(css).not.toContain('<script');
+  });
 });

packages/merge-styles/src/server.ts

@@ -2,6 +2,11 @@ import { InjectionMode, Stylesheet } from './Stylesheet';
 
 /**
  * Renders a given string and returns both html and css needed for the html.
+ *
+ * The returned `css` is raw CSS text meant to be placed in a `<style>` element. Declaration values
+ * have `<` and `>` escaped as CSS code points so they cannot terminate that element, but callers
+ * remain responsible for validating untrusted data used in style values.
+ *
  * @param onRender - Function that returns a string.
  * @param namespace - Optional namespace to prepend to css classnames to avoid collisions.
  */