[pull] master from microsoft:master

.github/workflows/check-packages.yml

@@ -30,11 +30,10 @@ jobs:
         run: |
           echo "yarn.lock changed! Verifying package deduplication ..."
 
-          yarn run dedupe --check --json
-
-          if [[ $? -ne 0 ]]; then
-            echo "Your changes introduced package duplication 🚨"
-            echo "Run 'yarn run dedupe' to fix those."
+          if ! yarn run dedupe --check; then
+            echo
+            echo "::error::Your changes introduced package duplication - run 'yarn run dedupe' to fix."
+            exit 1
           else
             echo "No duplicate packages introduced ✅"
           fi

.vscode/settings.json

@@ -69,12 +69,10 @@
   "[handlebars]": {
     "editor.formatOnSave": false
   },
-  "javascript.preferences.importModuleSpecifier": "relative",
-  "javascript.preferences.importModuleSpecifierEnding": "index",
-  "typescript.preferences.importModuleSpecifier": "relative",
-  "typescript.preferences.importModuleSpecifierEnding": "index",
-  "typescript.tsdk": "./node_modules/typescript/lib",
-  "typescript.reportStyleChecksAsWarnings": false,
+  "js/ts.preferences.importModuleSpecifier": "relative",
+  "js/ts.preferences.importModuleSpecifierEnding": "index",
+  "js/ts.tsdk.path": "./node_modules/typescript/lib",
+  "js/ts.reportStyleChecksAsWarnings": false,
   "cSpell.words": ["beachball", "borderless", "fluentui", "griffel", "spinbutton", "tabster"],
   "nxConsole.generateAiAgentRules": true,
   // Maximum number of requests for the chat agent - Prevents AI agents from stopping mid-session

azure-pipelines.release-headless-experimental.yml

@@ -125,10 +125,12 @@ extends:
                 displayName: test
 
               - script: |
-                  yarn beachball publish -b origin/$(validation.branchPath) --access public -y -n $(npmToken) --no-push --tag experimental --config scripts/beachball/src/release-headless.config.js
+                  yarn beachball publish -b origin/$(validation.branchPath) --no-push --tag experimental --config scripts/beachball/src/release-headless.config.js
                   git reset --hard origin/$(validation.branchPath)
                 displayName: Publish changes and bump versions
                 condition: and(succeeded(), not(${{ parameters.dryRun }}))
+                env:
+                  NPM_TOKEN: $(npmToken)
 
               - template: .devops/templates/cleanup.yml@self
                 parameters:

azure-pipelines.release-vnext-experimental.yml

@@ -118,10 +118,12 @@ extends:
                 displayName: test
 
               - script: |
-                  yarn beachball publish -b origin/$(validation.branchPath) --access public -y -n $(npmToken) --no-push --tag experimental --config scripts/beachball/src/release-vNext.config.js
+                  yarn beachball publish -b origin/$(validation.branchPath) --no-push --tag experimental --config scripts/beachball/src/release-vNext.config.js
                   git reset --hard origin/$(validation.branchPath)
                 displayName: Publish changes and bump versions
                 condition: and(succeeded(), not(${{ parameters.dryRun }}))
+                env:
+                  NPM_TOKEN: $(npmToken)
 
               - template: .devops/templates/cleanup.yml@self
                 parameters:

azure-pipelines.release-vnext-nightly.yml

@@ -103,10 +103,12 @@ extends:
                 displayName: test
 
               - script: |
-                  yarn publish:beachball -b origin/$(Build.SourceBranchName) -n $(npmToken) --no-push --tag nightly --config scripts/beachball/src/release-vNext.config.js
+                  yarn beachball publish -b origin/$(Build.SourceBranchName) --no-push --tag nightly --config scripts/beachball/src/release-vNext.config.js
                   git reset --hard origin/$(Build.SourceBranchName)
                 displayName: Publish changes and bump versions
                 condition: not(${{ parameters.dryRun }})
+                env:
+                  NPM_TOKEN: $(npmToken)
 
               - template: .devops/templates/cleanup.yml@self
                 parameters:

azure-pipelines.release-vnext.yml

@@ -95,10 +95,11 @@ extends:
                 condition: not(${{ parameters.dryRun }})
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-vNext.config.js --message 'release: applying package updates - react-components'
+                  yarn beachball publish --config scripts/beachball/src/release-vNext.config.js --message 'release: applying package updates - react-components'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)
+                  NPM_TOKEN: $(npmToken)
                 displayName: Publish changes and bump versions
                 condition: not(${{ parameters.dryRun }})
 

azure-pipelines.release.headless.yml

@@ -84,10 +84,11 @@ extends:
                 displayName: lint
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-headless.config.js --message 'release: applying package updates - react-headless'
+                  yarn beachball publish --config scripts/beachball/src/release-headless.config.js --message 'release: applying package updates - react-headless'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)
+                  NPM_TOKEN: $(npmToken)
                 displayName: Publish changes and bump versions
                 condition: not(${{ parameters.dryRun }})
 

azure-pipelines.release.tools-experimental.yml

@@ -117,10 +117,12 @@ extends:
                 displayName: test
 
               - script: |
-                  yarn beachball publish -b origin/$(validation.branchPath) --access public -y -n $(npmToken) --no-push --tag experimental --config scripts/beachball/src/release-tools.config.js
+                  yarn beachball publish -b origin/$(validation.branchPath) --no-push --tag experimental --config scripts/beachball/src/release-tools.config.js
                   git reset --hard origin/$(validation.branchPath)
                 displayName: Publish changes and bump versions
                 condition: and(succeeded(), not(${{ parameters.dryRun }}))
+                env:
+                  NPM_TOKEN: $(npmToken)
 
               - template: .devops/templates/cleanup.yml@self
                 parameters:

azure-pipelines.release.tools.yml

@@ -83,10 +83,11 @@ extends:
                 displayName: lint
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-tools.config.js --message 'release: applying package updates - tools'
+                  yarn beachball publish --config scripts/beachball/src/release-tools.config.js --message 'release: applying package updates - tools'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)
+                  NPM_TOKEN: $(npmToken)
                 displayName: Publish changes and bump versions
                 condition: not(${{ parameters.dryRun }})
 

azure-pipelines.release.web-components.yml

@@ -81,10 +81,11 @@ extends:
                 displayName: Build, Test, Lint
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-web-components.config.js --message 'release: applying package updates - web-components'
+                  yarn beachball publish --config scripts/beachball/src/release-web-components.config.js --message 'release: applying package updates - web-components'
                   git reset --hard origin/master
                 env:
                   GITHUB_PAT: $(githubPAT)
+                  NPM_TOKEN: $(npmToken)
                 displayName: Publish changes and bump versions
                 condition: not(${{ parameters.dryRun }})
 

azure-pipelines.release.yml

@@ -127,11 +127,12 @@ extends:
                 displayName: verify packaged assets
 
               - script: |
-                  yarn publish:beachball -n $(npmToken) --config scripts/beachball/src/release-v8.config.js --message 'release: applying package updates - react v8'
+                  yarn beachball publish --config scripts/beachball/src/release-v8.config.js --message 'release: applying package updates - react v8'
                   git reset --hard origin/master
                 condition: and(succeeded(), not(${{ parameters.dryRun }}))
                 env:
                   GITHUB_PAT: $(githubPAT)
+                  NPM_TOKEN: $(npmToken)
                 displayName: Publish changes and bump versions
 
               - script: |

beachball.config.js

@@ -1 +1 @@
-module.exports = require('./scripts/beachball/base.config.json');
+module.exports = require('./scripts/beachball/base.config');

change/@fluentui-react-headless-components-preview-931596e2-bc46-4837-a7cc-db12b9edd5cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add swatch picker components",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-swatch-picker-c346c0ef-e11a-45a1-91b0-4efbf20a3127.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose headless base APIs",
+  "packageName": "@fluentui/react-swatch-picker",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dedupe": "yarn dedupe --strategy highest",
-    "change": "beachball change --no-commit",
+    "change": "beachball change",
     "check:change": "beachball check",
     "check:modified-files": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/check-for-modified-files",
     "check:affected": "node ./scripts/executors/src/checkIfPackagesAffected.js",
@@ -23,7 +23,6 @@
     "generate-version-files": "node -r ./scripts/ts-node/src/register ./scripts/generators/src/generate-version-files",
     "postinstall": "husky && node ./scripts/package-manager/src/postinstall.js",
     "preinstall": "node ./scripts/package-manager/src/preinstall.js",
-    "publish:beachball": "beachball publish -b origin/master --access public -y",
     "start": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/start",
     "generate": "node -r ./scripts/ts-node/src/register ./scripts/executors/src/generate-ui",
     "clean": "nx run-many -t clean --verbose",
@@ -165,7 +164,6 @@
     "@types/webpack-env": "1.18.8",
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/yargs": "13.0.11",
-    "@types/yargs-unparser": "2.0.1",
     "@typescript-eslint/eslint-plugin": "8.46.2",
     "@typescript-eslint/rule-tester": "^8.46.2",
     "autoprefixer": "10.2.1",
@@ -178,7 +176,7 @@
     "babel-plugin-module-resolver": "5.0.3",
     "babel-plugin-react-compiler": "1.0.0",
     "babel-plugin-tester": "10.1.0",
-    "beachball": "2.31.0",
+    "beachball": "3.0.0-alpha.7",
     "chalk": "4.1.0",
     "chrome-remote-interface": "0.28.2",
     "ci-info": "3.9.0",
@@ -283,7 +281,6 @@
     "react-shadow": "20.3.0",
     "react-test-renderer": "19.2.0",
     "react-window": "^1.8.6",
-    "read-pkg-up": "7.0.1",
     "remark-gfm": "4.0.1",
     "replace-in-file": "6.1.0",
     "resolve": "1.22.8",
@@ -331,10 +328,8 @@
     "webpack-dev-server": "4.15.2",
     "webpack-hot-middleware": "2.26.1",
     "webpack-merge": "5.10.0",
-    "workspace-tools": "0.29.1",
     "yargs": "13.3.2",
-    "yargs-parser": "13.1.2",
-    "yargs-unparser": "2.0.0"
+    "yargs-parser": "13.1.2"
   },
   "dependencies": {
     "@fluentui/react-icons-northstar": "0.66.5",

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -37,6 +37,7 @@ import * as Skeleton from '@fluentui/react-headless-components-preview/skeleton'
 import * as Slider from '@fluentui/react-headless-components-preview/slider';
 import * as SpinButton from '@fluentui/react-headless-components-preview/spin-button';
 import * as Spinner from '@fluentui/react-headless-components-preview/spinner';
+import * as SwatchPicker from '@fluentui/react-headless-components-preview/swatch-picker';
 import * as Switch from '@fluentui/react-headless-components-preview/switch';
 import * as TabList from '@fluentui/react-headless-components-preview/tab-list';
 import * as Tag from '@fluentui/react-headless-components-preview/tag';
@@ -89,6 +90,7 @@ console.log({
   Slider,
   SpinButton,
   Spinner,
+  SwatchPicker,
   Switch,
   TabList,
   Tag,

packages/react-components/react-headless-components-preview/library/etc/swatch-picker.api.md

@@ -0,0 +1,136 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ColorSwatchBaseState } from '@fluentui/react-swatch-picker';
+import { ColorSwatchBaseProps as ColorSwatchProps } from '@fluentui/react-swatch-picker';
+import { ColorSwatchSlots } from '@fluentui/react-swatch-picker';
+import type { EmptySwatchBaseState } from '@fluentui/react-swatch-picker';
+import { EmptySwatchBaseProps as EmptySwatchProps } from '@fluentui/react-swatch-picker';
+import { EmptySwatchSlots } from '@fluentui/react-swatch-picker';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ImageSwatchBaseState } from '@fluentui/react-swatch-picker';
+import { ImageSwatchBaseProps as ImageSwatchProps } from '@fluentui/react-swatch-picker';
+import { ImageSwatchSlots } from '@fluentui/react-swatch-picker';
+import type * as React_2 from 'react';
+import { renderColorSwatch_unstable as renderColorSwatch } from '@fluentui/react-swatch-picker';
+import { renderEmptySwatch_unstable as renderEmptySwatch } from '@fluentui/react-swatch-picker';
+import { renderImageSwatch_unstable as renderImageSwatch } from '@fluentui/react-swatch-picker';
+import { renderSwatchPicker_unstable as renderSwatchPicker } from '@fluentui/react-swatch-picker';
+import { renderSwatchPickerRow_unstable as renderSwatchPickerRow } from '@fluentui/react-swatch-picker';
+import type { SwatchPickerBaseState } from '@fluentui/react-swatch-picker';
+import { SwatchPickerBaseProps as SwatchPickerProps } from '@fluentui/react-swatch-picker';
+import type { SwatchPickerRowBaseState } from '@fluentui/react-swatch-picker';
+import { SwatchPickerRowBaseProps as SwatchPickerRowProps } from '@fluentui/react-swatch-picker';
+import { SwatchPickerRowSlots } from '@fluentui/react-swatch-picker';
+import { SwatchPickerSlots } from '@fluentui/react-swatch-picker';
+import { useSwatchPickerContextValue_unstable as useSwatchPickerContextValue } from '@fluentui/react-swatch-picker';
+import { useSwatchPickerContextValues } from '@fluentui/react-swatch-picker';
+
+// @public (undocumented)
+export const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
+
+export { ColorSwatchProps }
+
+export { ColorSwatchSlots }
+
+// @public (undocumented)
+export type ColorSwatchState = ColorSwatchBaseState & {
+    root: {
+        'data-selected'?: string;
+        'data-disabled'?: string;
+    };
+};
+
+// @public (undocumented)
+export const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
+
+export { EmptySwatchProps }
+
+export { EmptySwatchSlots }
+
+// @public (undocumented)
+export type EmptySwatchState = EmptySwatchBaseState & {
+    root: {
+        'data-selected'?: string;
+        'data-disabled'?: string;
+    };
+};
+
+// @public (undocumented)
+export const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
+
+export { ImageSwatchProps }
+
+export { ImageSwatchSlots }
+
+// @public (undocumented)
+export type ImageSwatchState = ImageSwatchBaseState & {
+    root: {
+        'data-selected'?: string;
+    };
+};
+
+export { renderColorSwatch }
+
+export { renderEmptySwatch }
+
+export { renderImageSwatch }
+
+export { renderSwatchPicker }
+
+export { renderSwatchPickerRow }
+
+// @public
+export const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
+
+export { SwatchPickerProps }
+
+// @public (undocumented)
+export const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
+
+export { SwatchPickerRowProps }
+
+export { SwatchPickerRowSlots }
+
+// @public (undocumented)
+export type SwatchPickerRowState = SwatchPickerRowBaseState & {
+    root: SwatchPickerRowBaseState['root'] & {
+        focusgrouprow?: string;
+    };
+};
+
+export { SwatchPickerSlots }
+
+// @public (undocumented)
+export type SwatchPickerState = SwatchPickerBaseState & {
+    root: {
+        'data-layout'?: SwatchPickerBaseState['layout'];
+        focusgroup?: string;
+    };
+};
+
+// @public (undocumented)
+export const useColorSwatch: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
+
+// @public (undocumented)
+export const useEmptySwatch: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
+
+// @public (undocumented)
+export const useImageSwatch: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
+
+// @public (undocumented)
+export const useSwatchPicker: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
+
+export { useSwatchPickerContextValue }
+
+export { useSwatchPickerContextValues }
+
+// @public (undocumented)
+export const useSwatchPickerRow: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
+
+// (No @packageDocumentation comment for this package)
+
+```