fixup

Author: dmytrokirpa

change/@fluentui-react-avatar-5d8641dc-c661-41bc-bbe3-8b0c8a82b68e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: drop unnecessary dependencies from base hooks",
+  "packageName": "@fluentui/react-avatar",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-progress-7b34e90c-ceac-4cef-ae58-1e00f71233fc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: drop unnecessary dependencies from base hooks",
+  "packageName": "@fluentui/react-progress",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-slider-391fdebc-4979-4df3-a493-c2a794fb6d93.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: drop unnecessary dependencies from base hooks",
+  "packageName": "@fluentui/react-slider",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-spinner-bb2b5be4-201f-437b-ae3b-41e239e31ad7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: drop unnecessary dependencies from base hooks",
+  "packageName": "@fluentui/react-spinner",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx

@@ -103,11 +103,11 @@ export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBase
     popoverOpen,
 
     components: {
-      root: Popover,
+      root: 'div',
       triggerButton: 'button',
       content: 'ul',
-      popoverSurface: PopoverSurface,
-      tooltip: Tooltip,
+      popoverSurface: 'div',
+      tooltip: 'div',
     },
     root: slot.always(
       {

packages/react-components/react-field/library/src/components/Field/index.ts

@@ -10,5 +10,6 @@ export type {
 } from './Field.types';
 export { Field } from './Field';
 export { renderField_unstable } from './renderField';
-export { useField_unstable, useFieldBase_unstable } from './useField';
+export { useField_unstable } from './useField';
+export { useFieldBase_unstable } from './useFieldBase';
 export { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';

packages/react-components/react-field/library/src/components/Field/useField.tsx

@@ -4,8 +4,9 @@ import * as React from 'react';
 
 import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
-import type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';
+import { slot } from '@fluentui/react-utilities';
+import type { FieldProps, FieldState } from './Field.types';
+import { useFieldBase_unstable } from './useFieldBase';
 
 const validationMessageIcons = {
   error: <DiamondDismiss12Filled />,
@@ -46,50 +47,3 @@ export const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivEleme
     size,
   };
 };
-
-/**
- * Base hook for Field component, which manages state related to validation, ARIA attributes,
- * ID generation, and slot structure without design props.
- *
- * @param props - Props passed to this field
- * @param ref - Ref to the root
- */
-export const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {
-  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
-
-  const baseId = useId('field-');
-  const generatedControlId = baseId + '__control';
-
-  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {
-    elementType: 'div',
-  });
-  const label = slot.optional(props.label, {
-    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },
-    elementType: 'label',
-  });
-  const validationMessage = slot.optional(props.validationMessage, {
-    defaultProps: {
-      id: baseId + '__validationMessage',
-      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,
-    },
-    elementType: 'div',
-  });
-  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });
-  const validationMessageIcon = slot.optional(props.validationMessageIcon, {
-    renderByDefault: false,
-    elementType: 'span',
-  });
-
-  return {
-    children,
-    generatedControlId,
-    required,
-    validationState,
-    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },
-    root,
-    label,
-    validationMessageIcon,
-    validationMessage,
-    hint,
-  };
-};

packages/react-components/react-field/library/src/components/Field/useFieldBase.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import type { FieldBaseProps, FieldBaseState } from './Field.types';
+
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */
+export const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {
+  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
+
+  const baseId = useId('field-');
+  const generatedControlId = baseId + '__control';
+
+  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {
+    elementType: 'div',
+  });
+  const label = slot.optional(props.label, {
+    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },
+    elementType: 'label',
+  });
+  const validationMessage = slot.optional(props.validationMessage, {
+    defaultProps: {
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,
+    },
+    elementType: 'div',
+  });
+  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });
+  const validationMessageIcon = slot.optional(props.validationMessageIcon, {
+    renderByDefault: false,
+    elementType: 'span',
+  });
+
+  return {
+    children,
+    generatedControlId,
+    required,
+    validationState,
+    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },
+    root,
+    label,
+    validationMessageIcon,
+    validationMessage,
+    hint,
+  };
+};

packages/react-components/react-headless/library/bundle-size/webpack.analyze.js

@@ -0,0 +1,39 @@
+// @ts-check
+const path = require('path');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+const libraryRoot = path.resolve(__dirname, '..');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+  mode: 'production',
+  entry: path.resolve(__dirname, 'ReactComponents.fixture.js'),
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, '../dist/bundle-analyze'),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    // Resolve @fluentui/react-headless to the local lib (ESM for best tree-shaking)
+    alias: {
+      '@fluentui/react-headless': path.resolve(libraryRoot, 'lib/index.js'),
+    },
+  },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+  },
+  optimization: {
+    // Disable scope hoisting so bundle-analyzer shows each module individually
+    concatenateModules: false,
+  },
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: path.resolve(__dirname, '../dist/bundle-analyze/report.html'),
+      openAnalyzer: true,
+      generateStatsFile: true,
+      statsFilename: path.resolve(__dirname, '../dist/bundle-analyze/stats.json'),
+    }),
+  ],
+};