Merge branch 'master' into chore/bump-floating-ui

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/stories/SwatchPicker/SwatchPicker.stories.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { SwatchPicker } from '@fluentui/react-swatch-picker';
-import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils';
+import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid } from './utils';
+import { Steps } from 'storywright';
 
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
 
 export default {
   title: 'SwatchPicker Converged',
-  decorators: [story => withStoryWrightSteps({ story, steps })],
+  decorators: [
+    story => withStoryWrightSteps({ story, steps: new Steps().snapshot('default', { cropTo: '.testWrapper' }).end() }),
+  ],
 } satisfies Meta<typeof SwatchPicker>;
 
 export const Default = () => (
@@ -20,7 +23,6 @@ export const Default = () => (
     <SampleSwatchPickerGrid />
   </>
 );
-Default.storyName = 'default';
 
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 
@@ -64,7 +66,7 @@ export const Shape = () => (
     <SampleSwatchPickerGrid shape="circular" />
   </>
 );
-Size.storyName = 'shape';
+Shape.storyName = 'shape';
 
 export const Spacing = () => (
   <>
@@ -79,4 +81,4 @@ export const Spacing = () => (
     <SampleSwatchPickerGrid spacing="small" />
   </>
 );
-Size.storyName = 'spacing';
+Spacing.storyName = 'spacing';

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

@@ -1,25 +1,14 @@
 import * as React from 'react';
-import { Steps } from 'storywright';
 import {
   SwatchPicker,
   ColorSwatch,
-  SwatchPickerProps,
+  type SwatchPickerProps,
   ImageSwatch,
   EmptySwatch,
   SwatchPickerRow,
 } from '@fluentui/react-swatch-picker';
 import { HeartRegular } from '@fluentui/react-icons';
 
-export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover('.breadcrumb-sample')
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown('.breadcrumb-sample')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .focus('.breadcrumb-sample')
-  .snapshot('focused', { cropTo: '.testWrapper' })
-  .end();
-
 export const SampleSwatchPickerColors = (props: SwatchPickerProps) => (
   <SwatchPicker defaultSelectedValue="00B053" {...props}>
     <ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />

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-charting-6dbae5bf-a46a-4276-a3bf-3629fd5542ec.json → change/@fluentui-react-charting-4af7cac4-c23c-4357-8a25-914a9dd6f699.json

@@ -1,6 +1,6 @@
 {
   "type": "patch",
-  "comment": "Mode check for declarative area chart ",
+  "comment": "[Horizontal Bar Chart With Axis] Enable multiple legend selection",
   "packageName": "@fluentui/react-charting",
   "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,36 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Mon, 30 Dec 2024 07:21:29 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.116",
+      "version": "8.6.116",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.122.3",
+            "commit": "681a95a732fe385a70b8d4537dc489acbcd1c21e"
+          }
+        ]
+      }
+    },
+    {
+      "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",