Merge branch 'master' 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-codemods-64d49103-6d6d-4ef0-93f0-2339233931e5.json

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

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-icon-provider-a7f6eac5-5e7c-40b4-ae8c-4b3dab5bc372.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove usage of \"export *\"",
+  "packageName": "@fluentui/react-icon-provider",
+  "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"
+}

change/@fluentui-theme-576e3635-ea2b-48cd-b8bd-f35566e66189.json

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

change/@fluentui-web-components-f87a2b96-d977-4138-8cb9-8cad4b13d8a8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix tooltip positioning styles for 'below-end' option",
+  "packageName": "@fluentui/web-components",
+  "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/charts/react-charting/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-charting",
   "entries": [
+    {
+      "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",

packages/charts/react-charting/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Wed, 18 Dec 2024 07:20:30 GMT and should not be manually modified.
+This log was last generated on Fri, 20 Dec 2024 07:20:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.23.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.28)
+
+Fri, 20 Dec 2024 07:20:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.23.27..@fluentui/react-charting_v5.23.28)
+
+### Patches
+
+- Ensure type safety of dependent fields ([PR #33486](https://github.com/microsoft/fluentui/pull/33486) by [email protected])
+
 ## [5.23.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.23.27)
 
 Wed, 18 Dec 2024 07:20:30 GMT 

packages/charts/react-charting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.23.27",
+  "version": "5.23.28",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/codemods/src/codeMods/tests/mock/compat/mockIndex.ts

@@ -1,2 +1,2 @@
-export * from './Button';
-export * from './DefaultButton';
+export { Button, OtherButton } from './Button';
+export { DefaultButton } from './DefaultButton';

packages/codemods/src/codeMods/utilities/index.ts

@@ -1,4 +1,4 @@
-export * from './jsx';
-export * from './imports';
-export * from './props';
-export * from './transforms';
+export { findJsxTag } from './jsx';
+export { appendOrCreateNamedImport, getImportsByPath, renameImport, repathImport } from './imports';
+export { renameProp } from './props';
+export { boolTransform, enumTransform, numberTransform, stringTransform } from './transforms';

packages/eslint-plugin/src/configs/base.js

@@ -19,10 +19,9 @@ module.exports = {
   },
   overrides: [
     {
-      files: '**/src/index.{ts,tsx,js}',
+      files: '**/src/**/*.{ts,tsx,js}',
       rules: {
-        // TODO: propagate to `error` once all packages barrel files have been fixed
-        '@rnx-kit/no-export-all': ['warn', { expand: 'all' }],
+        '@rnx-kit/no-export-all': ['error', { expand: 'all' }],
       },
     },
   ],

packages/react-components/react-components/CHANGELOG.json

@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/react-components",
   "entries": [
+    {
+      "date": "Thu, 19 Dec 2024 14:30:56 GMT",
+      "tag": "@fluentui/react-components_v9.56.8",
+      "version": "9.56.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/react-message-bar",
+            "commit": "f2523077e9c92fc7f065308efe2081fc86846b5b",
+            "comment": "fix: MessageBar auto reflow should handle document reflow with `min-content`"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 18 Dec 2024 10:59:36 GMT",
       "tag": "@fluentui/react-components_v9.56.7",