Merge branch 'users/srmukher/legendsMultiSelectVBC' of https://github…

….com/microsoft/fluentui into users/srmukher/legendsMultiSelectVBC

apps/perf-test-react-components/package.json

@@ -21,6 +21,7 @@
     "@fluentui/scripts-perf-test-flamegrill": "*",
     "@fluentui/react-avatar": "*",
     "@fluentui/react-button": "*",
+    "@fluentui/react-color-picker-preview": "*",
     "@fluentui/react-components": "*",
     "@fluentui/react-field": "*",
     "@fluentui/react-persona": "*",

apps/perf-test-react-components/src/scenarios/ColorPicker.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ColorPicker, ColorArea, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+const Scenario = () => (
+  <ColorPicker color={{ h: 109, s: 1, v: 0.91 }}>
+    <ColorArea />
+    <ColorSlider />
+    <AlphaSlider />
+  </ColorPicker>
+);
+
+Scenario.decorator = (props: { children: React.ReactNode }) => (
+  <FluentProvider theme={webLightTheme}>{props.children}</FluentProvider>
+);
+
+export default Scenario;

apps/vr-tests-react-components/package.json

@@ -27,6 +27,7 @@
     "@fluentui/react-card": "*",
     "@fluentui/react-charts-preview": "*",
     "@fluentui/react-checkbox": "*",
+    "@fluentui/react-color-picker-preview": "*",
     "@fluentui/react-combobox": "*",
     "@fluentui/react-context-selector": "*",
     "@fluentui/react-datepicker-compat": "*",

apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { ColorPicker } from '@fluentui/react-color-picker-preview';
+import { SampleColorPicker } from './utils';
+import { Steps } from 'storywright';
+
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'ColorPicker Converged',
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
+} satisfies Meta<typeof ColorPicker>;
+
+export const Default = () => <SampleColorPicker color={{ h: 109, s: 1, v: 0.91 }} />;
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Shape = () => (
+  <>
+    <SampleColorPicker color={{ h: 195, s: 0.85, v: 0.93 }} shape="square" />
+    <SampleColorPicker color={{ h: 195, s: 0.85, v: 0.913 }} shape="rounded" />
+  </>
+);
+Shape.storyName = 'shape';

apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {
+  ColorPicker,
+  ColorArea,
+  AlphaSlider,
+  ColorSlider,
+  type ColorPickerProps,
+} from '@fluentui/react-color-picker-preview';
+
+export const SampleColorPicker = (props: ColorPickerProps) => (
+  <ColorPicker {...props}>
+    <ColorArea />
+    <ColorSlider />
+    <AlphaSlider />
+  </ColorPicker>
+);

apps/vr-tests-react-components/src/utilities/index.ts

@@ -1,3 +1,9 @@
-export * from './TestWrapperDecorator';
-export * from './getStoryVariant';
-export * from './withStoryWrightSteps';
+export {
+  TestWrapperDecorator,
+  TestWrapperDecoratorFixedWidth,
+  TestWrapperDecoratorFullWidth,
+  TestWrapperDecoratorTall,
+  TestWrapperDecoratorTallFixedWidth,
+} from './TestWrapperDecorator';
+export { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from './getStoryVariant';
+export { withStoryWrightSteps } from './withStoryWrightSteps';

change/@fluentui-eslint-plugin-75e61142-a4e1-4046-9076-316b44c873ca.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-33c0a62b-e18c-45a1-9fbd-bfd7089f997c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-message-bar-72abc821-ab32-4cac-8dd2-4c8dce4c810e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "refactor(MessageBar): migrate slide & fade to motion components",
+  "packageName": "@fluentui/react-message-bar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-f4f8b668-785c-48d9-9d8f-2410472b12f4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: handle case when Animation.persist() does not exist",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -69,7 +69,7 @@
     "@griffel/webpack-loader": "2.2.10",
     "@jest/reporters": "29.7.0",
     "@mdx-js/loader": "2.3.0",
-    "@microsoft/api-extractor": "7.38.5",
+    "@microsoft/api-extractor": "7.39.0",
     "@microsoft/api-extractor-model": "7.28.3",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
     "@microsoft/load-themed-styles": "1.10.26",
@@ -336,11 +336,11 @@
     "tmp": "0.2.1",
     "ts-jest": "29.1.1",
     "ts-loader": "9.4.2",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "tslib": "2.6.3",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
     "vinyl": "2.2.0",
     "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.1",
@@ -379,7 +379,6 @@
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0",
-    "@microsoft/api-extractor/typescript": "5.2.2",
     "ws": "8.17.1"
   },
   "nx": {

packages/a11y-testing/src/definitions/index.ts

@@ -1,12 +1,25 @@
-export * from './Button/buttonBehaviorDefinition';
-export * from './Button/buttonGroupBehaviorDefinition';
-export * from './Button/toggleButtonBehaviorDefinition';
-export * from './Link/linkBehaviorDefinition';
-export * from './MenuButton/menuButtonBehaviorDefinition';
-export * from './Pill/pillActionBehaviorDefinition';
-export * from './Pill/pillBehaviorDefinition';
-export * from './Pill/pillOptionBehaviorDefinition';
-export * from './Pill/pillGroupBehaviorDefinition';
-export * from './Popup/popupBehaviorDefinition';
-
-export * from './react-button/buttonAccessibilityBehaviorDefinition';
+export { buttonBehaviorDefinition } from './Button/buttonBehaviorDefinition';
+export { buttonGroupBehaviorDefinition } from './Button/buttonGroupBehaviorDefinition';
+export { toggleButtonBehaviorDefinition } from './Button/toggleButtonBehaviorDefinition';
+export { linkBehaviorDefinition } from './Link/linkBehaviorDefinition';
+export {
+  menuButtonBehaviorDefinition,
+  menuButtonBehaviorDefinitionMenuSlot,
+  menuButtonBehaviorDefinitionMenuSlotWithoutID,
+  menuButtonBehaviorDefinitionTriggerSlotNotTabbable,
+  menuButtonBehaviorDefinitionTriggerSlotTabbable,
+  menuButtonBehaviorDefinitionTriggerSlotWithoutID,
+  menuButtonBehaviorDefinitionTriggerWithTabIndex,
+} from './MenuButton/menuButtonBehaviorDefinition';
+export { pillActionBehaviorDefinition } from './Pill/pillActionBehaviorDefinition';
+export { pillBehaviorDefinition } from './Pill/pillBehaviorDefinition';
+export { pillOptionBehaviorDefinition } from './Pill/pillOptionBehaviorDefinition';
+export { pillGroupBehaviorDefinition } from './Pill/pillGroupBehaviorDefinition';
+export {
+  popupBehaviorDefinition,
+  popupBehaviorDefinitionPopupSlot,
+  popupBehaviorDefinitionTriggerSlotNotTabbable,
+  popupBehaviorDefinitionTriggerSlotTabbable,
+  popupBehaviorDefinitionTriggerSlotWithTabIndex,
+} from './Popup/popupBehaviorDefinition';
+export { buttonAccessibilityBehaviorDefinition } from './react-button/buttonAccessibilityBehaviorDefinition';

packages/a11y-testing/src/facades/index.ts

@@ -1 +1 @@
-export * from './ComponentTestFacade';
+export { ComponentTestFacade } from './ComponentTestFacade';

packages/a11y-testing/src/index.ts

@@ -1,5 +1,27 @@
-export * from './types';
-export * from './validators/index';
-export * from './facades/index';
-export * from './rules/index';
-export * from './definitions/index';
+export type { AccessibilityBehavior, PropValue, Props, Rule, Slot, TestFacade } from './types';
+export { validateBehavior, validateSlot } from './validators/index';
+export { ComponentTestFacade } from './facades/index';
+export { BehaviorRule, SlotRule } from './rules/index';
+export {
+  buttonAccessibilityBehaviorDefinition,
+  buttonBehaviorDefinition,
+  buttonGroupBehaviorDefinition,
+  linkBehaviorDefinition,
+  menuButtonBehaviorDefinition,
+  menuButtonBehaviorDefinitionMenuSlot,
+  menuButtonBehaviorDefinitionMenuSlotWithoutID,
+  menuButtonBehaviorDefinitionTriggerSlotNotTabbable,
+  menuButtonBehaviorDefinitionTriggerSlotTabbable,
+  menuButtonBehaviorDefinitionTriggerSlotWithoutID,
+  menuButtonBehaviorDefinitionTriggerWithTabIndex,
+  pillActionBehaviorDefinition,
+  pillBehaviorDefinition,
+  pillGroupBehaviorDefinition,
+  pillOptionBehaviorDefinition,
+  popupBehaviorDefinition,
+  popupBehaviorDefinitionPopupSlot,
+  popupBehaviorDefinitionTriggerSlotNotTabbable,
+  popupBehaviorDefinitionTriggerSlotTabbable,
+  popupBehaviorDefinitionTriggerSlotWithTabIndex,
+  toggleButtonBehaviorDefinition,
+} from './definitions/index';

packages/a11y-testing/src/rules/index.ts

@@ -1 +1 @@
-export * from './rules';
+export { BehaviorRule, SlotRule } from './rules';

packages/a11y-testing/src/validators/index.ts

@@ -1 +1 @@
-export * from './validate';
+export { validateBehavior, validateSlot } from './validate';

packages/azure-themes/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Mon, 23 Dec 2024 07:22:58 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.115",
+      "version": "8.6.115",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.122.2",
+            "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 13 Dec 2024 07:23:12 GMT",
       "tag": "@fluentui/azure-themes_v8.6.114",

packages/azure-themes/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Fri, 13 Dec 2024 07:23:12 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Dec 2024 07:22:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.115](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.115)
+
+Mon, 23 Dec 2024 07:22:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.114..@fluentui/azure-themes_v8.6.115)
+
+### Patches
+
+- Bump @fluentui/react to v8.122.2 ([PR #33445](https://github.com/microsoft/fluentui/pull/33445) by beachball)
+
 ## [8.6.114](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.114)
 
 Fri, 13 Dec 2024 07:23:12 GMT 

packages/azure-themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/azure-themes",
-  "version": "8.6.114",
+  "version": "8.6.115",
   "description": "Azure themes for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,7 +27,7 @@
     "@fluentui/scripts-webpack": "*"
   },
   "dependencies": {
-    "@fluentui/react": "^8.122.1",
+    "@fluentui/react": "^8.122.2",
     "@fluentui/set-version": "^8.2.23",
     "tslib": "^2.1.0"
   }

packages/charts/react-charting/CHANGELOG.json

@@ -1,6 +1,54 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "date": "Mon, 23 Dec 2024 07:22:57 GMT",
+      "tag": "@fluentui/react-charting_v5.23.29",
+      "version": "5.23.29",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee",
+            "comment": "feat: add functionality to export chart as image"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react-focus to v8.9.20",
+            "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/theme-samples to v8.7.191",
+            "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.122.2",
+            "commit": "7b4a3785c6c1d7c207602cad0a1795e3df9122ee"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 20 Dec 2024 07:20:00 GMT",
+      "tag": "@fluentui/react-charting_v5.23.28",
+      "version": "5.23.28",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-charting",
+            "commit": "da882f44f251e7bb80fb969cbe268a942a2df74e",
+            "comment": "Ensure type safety of dependent fields"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 18 Dec 2024 07:20:30 GMT",
       "tag": "@fluentui/react-charting_v5.23.27",