Merge branch 'master' into users/srmukher/ComponentTestsVBC

apps/public-docsite-resources/package.json

@@ -38,11 +38,11 @@
     "@fluentui/react-examples": "^8.34.4",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/azure-themes": "^8.6.12",
-    "@fluentui/react-docsite-components": "^8.12.16",
+    "@fluentui/react-docsite-components": "^8.12.17",
     "@fluentui/font-icons-mdl2": "^8.5.21",
     "@fluentui/set-version": "^8.2.11",
     "@fluentui/theme-samples": "^8.7.91",
-    "@fluentui/react-monaco-editor": "^1.7.93",
+    "@fluentui/react-monaco-editor": "^1.7.94",
     "office-ui-fabric-core": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx

@@ -110,6 +110,25 @@ function MyComponent(props) {
 }
 ```
 
+### IdPrefixProvider
+
+Having multiple applications using `FluentProvider` on a single web page can cause interop problems when they come from different bundles, more details in [microsoft/fluentui#26496](https://github.com/microsoft/fluentui/pull/26496).
+
+Adding the `IdPrefixProvider` component around the `FluentProvider` will resolve the issue of losing styling on components and IDs collisions in an application.
+
+```jsx
+import { IdPrefixProvider, FluentProvider } from '@fluentui/react-components';
+import * as React from 'react';
+
+function MyApp() {
+  return (
+    <IdPrefixProvider value="APP1-">
+      <FluentProvider>{/* children */}</FluentProvider>
+    </IdPrefixProvider>
+  );
+}
+```
+
 ## References
 
 - https://griffel.js.org/react/api/create-dom-renderer

apps/public-docsite/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@fluentui/common-styles": "^1.2.30",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-monaco-editor": "^1.7.93",
+    "@fluentui/react-monaco-editor": "^1.7.94",
     "write-file-webpack-plugin": "^4.1.0",
     "@fluentui/scripts-tasks": "*",
     "@fluentui/scripts-webpack": "*"
@@ -35,7 +35,7 @@
     "@fluentui/public-docsite-resources": "^8.1.41",
     "@fluentui/public-docsite-setup": "^0.3.21",
     "@fluentui/react": "^8.109.10",
-    "@fluentui/react-docsite-components": "^8.12.16",
+    "@fluentui/react-docsite-components": "^8.12.17",
     "@fluentui/react-examples": "^8.34.4",
     "@fluentui/react-experiments": "^8.14.86",
     "@fluentui/fluent2-theme": "^8.107.16",

apps/theming-designer/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@fluentui/react": "^8.109.10",
     "@fluentui/merge-styles": "^8.5.12",
-    "@fluentui/react-docsite-components": "^8.12.16",
+    "@fluentui/react-docsite-components": "^8.12.17",
     "@fluentui/foundation-legacy": "^8.2.41",
     "@fluentui/scheme-utilities": "^8.3.33",
     "@fluentui/set-version": "^8.2.11",

azure-pipelines.yml

@@ -94,6 +94,23 @@ jobs:
           yarn workspace @fluentui/pr-deploy-site generate:site
         displayName: generate PR Deploy Site
 
+      - bash: |
+          mkdir -p apps/pr-deploy-site/sbom
+        displayName: 📒 Create dir for manifest Deploy-Site
+
+      - task: ManifestGeneratorTask@0
+        displayName: 📒 Generate Manifest Deploy-Site
+        inputs:
+          BuildDropPath: apps/pr-deploy-site/dist
+          ManifestDirPath: 'apps/pr-deploy-site/sbom'
+          Verbosity: Verbose
+
+      - task: PublishPipelineArtifact@1
+        displayName: 📒 Publish Manifest Deploy-Site
+        inputs:
+          artifactName: SBom-Deploy-Site-$(System.JobAttempt)
+          targetPath: apps/pr-deploy-site/sbom
+
       - task: AzureUpload@2
         displayName: Upload PR deploy site
         inputs:

change/@fluentui-keyboard-keys-589c6e0c-8c91-4202-8310-113c77e80d35.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: re-generate api.md - api extractor regression",
+  "packageName": "@fluentui/keyboard-keys",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-4cf263e9-5a59-4ce0-b9b1-a08d8baa5e67.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Dropdown hover high contrast mode colors",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-bf3bb0f5-64ca-4492-be5c-82e7a6808157.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "MessageBar: Add SmallScreenSelector styles to use grid layout to properly place buttons",
+  "packageName": "@fluentui/react",
+  "email": "mgodbolt@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-09db4fc5-2f5c-4dbe-a602-2c226cff5bab.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: testOptions custom classname prefix now works as intended.",
+  "packageName": "@fluentui/react-conformance",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}

jest.preset.js

@@ -24,6 +24,11 @@ const baseConfig = {
   cacheDirectory: '<rootDir>/node_modules/.cache/jest',
   clearMocks: true,
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  // OLD format for migration to jest 29 - TODO: migrate to new format . https://jestjs.io/blog/2022/04/25/jest-28#future
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
 };
 
 module.exports = { ...baseConfig };

package.json

@@ -94,11 +94,11 @@
     "@griffel/react": "^1.5.7",
     "@griffel/webpack-extraction-plugin": "0.3.11",
     "@griffel/webpack-loader": "2.1.13",
-    "@jest/reporters": "28.1.3",
+    "@jest/reporters": "29.5.0",
     "@mdx-js/loader": "1.6.22",
-    "@microsoft/api-extractor": "7.22.2",
-    "@microsoft/api-extractor-model": "7.17.1",
-    "@microsoft/tsdoc": "0.14.1",
+    "@microsoft/api-extractor": "7.28.7",
+    "@microsoft/api-extractor-model": "7.22.2",
+    "@microsoft/tsdoc": "0.14.2",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
     "@microsoft/loader-load-themed-styles": "2.0.17",
@@ -156,7 +156,7 @@
     "@types/gulp-remember": "0.0.31",
     "@types/gulp-sourcemaps": "0.0.35",
     "@types/gulp-util": "3.0.36",
-    "@types/jest": "28.1.8",
+    "@types/jest": "29.5.1",
     "@types/jest-axe": "3.5.5",
     "@types/jju": "1.4.1",
     "@types/json-schema": "^7.0.8",
@@ -194,7 +194,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
-    "babel-jest": "28.1.3",
+    "babel-jest": "29.5.0",
     "babel-loader": "8.2.2",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-annotate-pure-imports": "1.0.0-1",
@@ -261,13 +261,13 @@
     "html-webpack-plugin": "5.1.0",
     "ignore-not-found-export-webpack-plugin": "1.0.2",
     "imports-loader": "1.2.0",
-    "jest": "28.1.3",
+    "jest": "29.5.0",
     "jest-axe": "6.0.1",
-    "jest-cli": "28.1.3",
-    "jest-environment-jsdom": "28.1.3",
-    "jest-environment-node-single-context": "28.1.0",
-    "jest-snapshot": "28.1.3",
-    "jest-watch-typeahead": "1.1.0",
+    "jest-cli": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "jest-environment-node-single-context": "29.1.0",
+    "jest-snapshot": "29.5.0",
+    "jest-watch-typeahead": "2.2.2",
     "jju": "1.4.0",
     "json-schema": "0.4.0",
     "json-stable-stringify-without-jsonify": "1.0.1",
@@ -338,13 +338,13 @@
     "terser-webpack-plugin": "5.3.9",
     "through2": "4.0.2",
     "tmp": "0.2.1",
-    "ts-jest": "28.0.8",
+    "ts-jest": "29.1.0",
     "ts-loader": "9.3.1",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.1.0",
     "tsconfig-paths-webpack-plugin": "4.0.0",
     "tslib": "2.4.1",
-    "typescript": "4.5.5",
+    "typescript": "4.6.4",
     "vinyl": "2.2.0",
     "vrscreenshotdiff": "0.0.17",
     "webpack": "5.83.1",

packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx

@@ -1,23 +1,15 @@
 import * as React from 'react';
 
+import { LikeIcon } from '@fluentui/react-icons-northstar';
+
 import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests';
+import { mountWithProvider, EmptyThemeProvider } from 'test/utils';
 
 import { ChatMessage } from 'src/components/Chat/ChatMessage';
 import { Text } from 'src/components/Text/Text';
-import { usePopper } from 'src/utils/positioner';
-import { LikeIcon } from '@fluentui/react-icons-northstar';
 import { ChatMessageDetails } from 'src/components/Chat/ChatMessageDetails';
 import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent';
-import { mountWithProvider, EmptyThemeProvider } from 'test/utils';
-
-jest.mock('src/utils/positioner', () => {
-  const actualPositioner = jest.requireActual('src/utils/positioner');
-
-  return {
-    ...actualPositioner,
-    usePopper: jest.fn().mockReturnValue(actualPositioner.usePopper),
-  };
-});
+import * as positionerApi from 'src/utils/positioner';
 
 const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage);
 
@@ -39,8 +31,12 @@ describe('ChatMessage', () => {
     handlesAccessibility(ChatMessage);
   });
 
-  describe('rtl', () => {
-    beforeEach(() => jest.clearAllMocks());
+  describe.only('rtl', () => {
+    let usePopperSpy;
+    beforeEach(() => {
+      jest.clearAllMocks();
+      usePopperSpy = jest.spyOn(positionerApi, 'usePopper');
+    });
 
     function render(wrappingComponent?: React.ComponentType) {
       const actionMenu = {
@@ -70,15 +66,15 @@ describe('ChatMessage', () => {
       const RTLProvider = props => <EmptyThemeProvider {...props} rtl={true} />;
       render(RTLProvider);
 
-      expect(usePopper).toHaveBeenCalledTimes(1);
-      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: true }));
+      expect(usePopperSpy).toHaveBeenCalledTimes(1);
+      expect(usePopperSpy).toHaveBeenCalledWith(expect.objectContaining({ rtl: true }));
     });
 
     it('should pass rtl parameter as undefined to usePopper in LTR', () => {
       render();
 
-      expect(usePopper).toHaveBeenCalledTimes(1);
-      expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined }));
+      expect(usePopperSpy).toHaveBeenCalledTimes(1);
+      expect(usePopperSpy).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined }));
     });
   });
 });

packages/fluentui/react-northstar/test/specs/utils/mergeProviderContexts/mergeProviderContexts-test.ts

@@ -1,8 +1,11 @@
 import { ProviderContextInput } from '@fluentui/react-bindings';
+import type { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
 import { mergeProviderContexts, mergePerformanceOptions, getRenderer } from 'src/utils/mergeProviderContexts';
 
 describe('getRenderer', () => {
-  const createRenderer = jest.fn().mockImplementation(target => ({ target }));
+  const createRenderer = (target => {
+    return { target };
+  }) as unknown as CreateRenderer;
 
   test(`without "target" defaults to a document`, () => {
     // will be "undefined" as we call createRenderer() with "undefined"

packages/react-charting/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Fri, 02 Jun 2023 07:35:08 GMT",
+      "tag": "@fluentui/react-charting_v5.16.37",
+      "version": "5.16.37",
+      "comments": {
+        "patch": [
+          {
+            "author": "srmukher@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "3d73007c50ca4008618498a998cdaed5675bbda6",
+            "comment": "Accessibility fixes"
+          }
+        ]
+      }
+    },
     {
       "date": "Thu, 01 Jun 2023 07:38:37 GMT",
       "tag": "@fluentui/react-charting_v5.16.36",

packages/react-charting/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Thu, 01 Jun 2023 07:38:37 GMT and should not be manually modified.
+This log was last generated on Fri, 02 Jun 2023 07:35:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.16.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.37)
+
+Fri, 02 Jun 2023 07:35:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.16.36..@fluentui/react-charting_v5.16.37)
+
+### Patches
+
+- Accessibility fixes ([PR #26344](https://github.com/microsoft/fluentui/pull/26344) by srmukher@microsoft.com)
+
 ## [5.16.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.16.36)
 
 Thu, 01 Jun 2023 07:38:37 GMT 

packages/react-charting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.16.36",
+  "version": "5.16.37",
   "description": "Experimental React charting components for building experiences for Microsoft 365.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/react-components/babel-preset-storybook-full-source/tsconfig.lib.json

@@ -10,6 +10,6 @@
     "types": ["static-assets", "environment", "node"],
     "module": "CommonJS"
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "src/index.dev.d.ts"],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }

packages/react-components/keyboard-keys/etc/keyboard-keys.api.md

@@ -921,7 +921,8 @@ export const ListProgram = "ListProgram";
 export const LiveContent = "LiveContent";
 
 // @public (undocumented)
-export const Lock = "Lock";
+const Lock_2 = "Lock";
+export { Lock_2 as Lock }
 
 // @public (undocumented)
 export const LogOff = "LogOff";

packages/react-components/react-portal/src/components/Portal/usePortal.test.ts

@@ -4,28 +4,26 @@ describe('toMountNodeProps', () => {
   it('handles HTMLElement', () => {
     const element = document.createElement('div');
 
-    expect(toMountNodeProps(element)).toMatchObject({
-      element,
-    });
+    expect(toMountNodeProps(element)).toEqual({ element });
   });
 
   it('handles "null"', () => {
-    expect(toMountNodeProps(null)).toMatchObject({
+    expect(toMountNodeProps(null)).toEqual({
       element: null,
     });
   });
 
   it('handles "undefined"', () => {
-    expect(toMountNodeProps(null)).toMatchObject({});
+    expect(toMountNodeProps(undefined)).toEqual({});
   });
 
   it('handles objects', () => {
     const element = document.createElement('div');
 
-    expect(toMountNodeProps({ element })).toMatchObject({
+    expect(toMountNodeProps({ element })).toEqual({
       element,
     });
-    expect(toMountNodeProps({ element, className: 'foo' })).toMatchObject({
+    expect(toMountNodeProps({ element, className: 'foo' })).toEqual({
       element,
       className: 'foo',
     });