Merge branch 'master' into feat/drawer-motion

* master: (32 commits)
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
  chore: update swc build dependencies (microsoft#28989)
  fix(react-tags-preview): add hover/pressed style for windows high contrast (microsoft#29035)
  chore(react-tags-preview): use InteractionTag for TagGroup's stories (microsoft#29024)
  chore(react-tags-preview): use makeResetStyles for base styles (microsoft#29022)
  chore: fix codesandbox export for preview component by making @fluentui/react-components required dependency (microsoft#29016)
  applying package updates
  feat(react-motion): create useReducedMotion and apply to useMotion to skip animations (microsoft#29014)
  ReAdd: Keytips: Align keytipData with visible instance for dupes (microsoft#28992)
  feat(react-drawer): add motion to Drawer (microsoft#28999)
  fix(react-utilities): avoid calling requestAnimationFrame when in SSR (microsoft#29015)
  fix(ssr-tests-v9): use correct path for ssr-tests-v9 stories (microsoft#29025)
  chore: updates devcontainer to use v16-bookworm image (microsoft#28997)
  feat(docsite): add Application Insights telemetry (microsoft#28709)
  ...

.devcontainer/Dockerfile

@@ -1,19 +1,4 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
-
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
-ARG VARIANT="16-bullseye"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-16-bookworm
 
 # Cypress linux pre-requisites https://docs.cypress.io/guides/getting-started/installing-cypress#Linux-Prerequisites
 RUN apt-get update && apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

.devcontainer/devcontainer.json

@@ -1,18 +1,10 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node
 {
   "name": "Node.js",
   "build": {
-    "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
-    // Append -bullseye or -buster to pin to an OS version.
-    // Use -bullseye variants on local arm64/Apple Silicon.
-    "args": { "VARIANT": "16" }
+    "dockerfile": "Dockerfile"
   },
-  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node",
   "features": {
-    "github-cli": "latest"
+    "ghcr.io/devcontainers/features/github-cli:1": {}
   },
   "containerEnv": {
     // Required Environment Variable to properly run Cypress

.github/workflows/docsite-publish-ghpages.yml

@@ -51,6 +51,8 @@ jobs:
 
       - name: Build storybook
         run: yarn workspace @fluentui/public-docsite-v9 build-storybook
+        env:
+          STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
 
       - name: Upload Pages Artifact
         uses: actions/upload-pages-artifact@v1

.gitignore

@@ -160,3 +160,6 @@ rush.json
 
 # tsdoc
 tsdoc-metadata.json
+
+# swc cache
+.swc

.storybook/preview.js

@@ -48,12 +48,13 @@ export const parameters = {
       'react-dom': '^17',
       // necessary when using typescript in CodeSandbox
       'react-scripts': 'latest',
+      // necessary for FluentProvider:
+      '@fluentui/react-components': '^9.0.0',
       // Pin @swc/helpers - in 0.4.36 it uses dependency alias which is not supported by CodeSandbox.
       // Remove this pinned version when @swc/helpers will be upgraded https://github.com/microsoft/fluentui/issues/28919
       '@swc/helpers': '0.4.35',
     },
     optionalDependencies: {
-      '@fluentui/react-components': '^9.0.0', // necessary for FluentProvider
       '@fluentui/react-icons': 'latest',
     },
     indexTsx: dedent`

README.md

@@ -35,9 +35,9 @@ The following table will help you navigate the 3 projects and understand their d
 | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-positioning?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep01-preview.gif" alt="Watch EP01: Positioning" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-styling?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep02-preview.gif" alt="Watch EP02: Styling" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-griffel?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep03-preview.gif" alt="Watch EP03: Griffel" width="240" /></a> |
 
-|                                                                                                                          EP04: Foundational APIs                                                                                                                           |                                                                                                              EP05: Theming                                                                                                              |
-| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-apis-in-v9-slots-jsx-children-triggers?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep04-preview.gif" alt="Watch EP04: Foundational APIs" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-theming-in-v9?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep05-preview.gif" alt="Watch EP05: Theming" width="240" /></a> |
+|                                                                                                                          EP04: Foundational APIs                                                                                                                           |                                                                                                              EP05: Theming                                                                                                              |                                                                                                                  EP06: Accessible by default                                                                                                                  |
+| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-apis-in-v9-slots-jsx-children-triggers?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep04-preview.gif" alt="Watch EP04: Foundational APIs" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-theming-in-v9?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep05-preview.gif" alt="Watch EP05: Theming" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-accessible-by-default?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep06-preview.gif" alt="Watch EP06: Accessible by default" width="240" /></a> |
 
 ## Licenses
 

apps/public-docsite-v9/.storybook/manager.js

@@ -1,7 +1,41 @@
 import { addons } from '@storybook/addons';
 import fluentStorybookTheme from './theme';
+import { ApplicationInsights } from '@microsoft/applicationinsights-web';
+import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from '@storybook/core-events';
 
 addons.setConfig({
   theme: fluentStorybookTheme,
   showPanel: false,
 });
+
+addons.register('application-insights', api => {
+  if (process.env.NODE_ENV === 'production') {
+    const { STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY } = process.env;
+
+    if (STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY) {
+      const appInsights = new ApplicationInsights({
+        config: {
+          connectionString: STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY,
+          disableCookiesUsage: true,
+        },
+      });
+
+      appInsights.loadAppInsights();
+
+      const trackError = (/** @type {string | undefined} */ eventData) => {
+        appInsights.trackException({ exception: new Error(eventData) });
+      };
+
+      appInsights.trackPageView();
+
+      api.on(STORY_CHANGED, eventData => {
+        appInsights.trackPageView({ name: eventData });
+      });
+
+      api.on(STORY_ERRORED, trackError);
+      api.on(STORY_MISSING, trackError);
+    } else {
+      console.warn(`[application-insights] instrumentation key not found in window or env variable`);
+    }
+  }
+});

apps/public-docsite-v9/package.json

@@ -38,6 +38,7 @@
     "@fluentui/react-search-preview": "*",
     "@fluentui/react-motion-preview": "*",
     "@griffel/react": "^1.5.14",
+    "@microsoft/applicationinsights-web": "^3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-window": "^1.8.6",

apps/ssr-tests-v9/package.json

@@ -15,10 +15,11 @@
     "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
     "type-check": "tsc -b tsconfig.json",
-    "test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
+    "test-ssr": "test-ssr \"./src/stories/**/*.stories.tsx\""
   },
   "dependencies": {
-    "@fluentui/react-components": "*"
+    "@fluentui/react-components": "*",
+    "@fluentui/react-utilities": "*"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

apps/ssr-tests-v9/src/stories/Utilitites/index.stories.tsx

@@ -0,0 +1,5 @@
+export { Default } from './useAnimationFrame.stories';
+
+export default {
+  title: 'Utilities/useAnimationFrame',
+};

apps/ssr-tests-v9/src/stories/Utilitites/useAnimationFrame.stories.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useAnimationFrame } from '@fluentui/react-utilities';
+
+export const Default = () => {
+  const [setAnimationFrame, clearAnimationFrame] = useAnimationFrame();
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    setAnimationFrame(() => setVisible(true));
+
+    return () => clearAnimationFrame();
+  }, [setAnimationFrame]);
+
+  return visible ? <div>Test the renderization</div> : null;
+};

change/@fluentui-babel-preset-global-context-97148935-1aa9-4638-8808-549e48fbbd00.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/babel-preset-global-context",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-0a8487dc-15bd-4385-bb27-8179b4501909.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/global-context",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-global-context-148d7795-1aaa-4b01-99a4-adc0ab6b6af9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bumps react peer dependencies to v16.14.0",
+  "packageName": "@fluentui/global-context",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-keyboard-keys-67d5dc74-f0a5-4c89-8137-505b414d6707.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/keyboard-keys",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-priority-overflow-00f9d502-0c0f-4958-bec9-174081d91ea9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/priority-overflow",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-accordion-e4e8416d-5820-4e7d-abaa-11da497a4930.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-accordion",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-accordion-f2e2fa75-618d-4b0f-a14b-9e870aea04f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-accordion",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-alert-70cd27f1-e77f-41cf-9c19-b9e58c9cc51d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-alert",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-alert-89828b79-0e68-4c66-9b38-54845c2d1be7.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-alert",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-7c5f8963-1b94-4b3e-b19a-159e88a88287.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-aria",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-af023eb7-8f96-44f1-8334-234374274d04.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps react peer dependencies to v16.14.0",
+  "packageName": "@fluentui/react-aria",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-56d89fb0-df4f-4882-a2a6-b6fe132f6395.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-avatar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-7a459088-59ab-42a4-b271-8a64bc6de447.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-avatar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-badge-b9445029-2875-4cd1-ba68-5fd459f028f4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-badge",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-badge-d9465d5c-2285-4d6d-9767-9e31b2f25096.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-badge",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-breadcrumb-preview-59f718e3-6876-4675-a10d-d9cba06b4574.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-breadcrumb-preview-6394d7e4-19ee-4f65-9449-63ac49b020a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-0364e7fd-60eb-44a7-af36-98ec013cd21d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-button",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-5243101e-4f98-4f06-9c40-13a78de8388a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-button",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-card-6d0a211e-810e-4be9-bc7b-be95e1f5a153.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-card",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-card-a61be511-ff32-426e-a78e-0184dc8e10d5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-card",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-checkbox-b6ff7f38-2163-476a-973c-dc28d66cc23c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-checkbox-e4b12431-2abd-4a5d-9ded-dcc85aa9c8db.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-combobox-1de6071c-5054-4c56-8b2c-0faf14e73495.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bumps @swc/helpers version to 0.5.1",
+  "packageName": "@fluentui/react-combobox",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-combobox-f35ba0a4-98b0-47fd-83f1-5efd5efe0a5c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate package to use JSX importSource",
+  "packageName": "@fluentui/react-combobox",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}