feat: update base hooks and render functions types to support headless

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-breadcrumb-59f990c7-d36b-4b22-b659-4152e463b83e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update types for render function",
+  "packageName": "@fluentui/react-breadcrumb",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-6561155a-5cdf-4b9a-ae91-69fa32f9650d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update types for render function",
+  "packageName": "@fluentui/react-button",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-field-90597e60-8f13-4477-b049-1f63aaf11da4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add missing base hook export",
+  "packageName": "@fluentui/react-field",
+  "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-rating-49b1cc95-f0a0-4864-bf2f-e7087f636601.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add mising base hook export",
+  "packageName": "@fluentui/react-rating",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-skeleton-8eae8004-fa9d-4754-bc51-fd06d5eb2c06.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update types for render function",
+  "packageName": "@fluentui/react-skeleton",
+  "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"
+}

change/@fluentui-react-switch-3be4ecac-34fe-4680-897d-7bd62fbec7b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update Switch component to conditionally render CircleFilled in indicator",
+  "packageName": "@fluentui/react-switch",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-textarea-13fe61b7-e8e0-479f-87f7-566a49be4b26.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update types for render function",
+  "packageName": "@fluentui/react-textarea",
+  "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-breadcrumb/library/etc/react-breadcrumb.api.md

@@ -139,16 +139,16 @@ export type PartitionBreadcrumbItemsOptions<T> = {
 };
 
 // @public
-export const renderBreadcrumb_unstable: (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => JSXElement;
+export const renderBreadcrumb_unstable: (state: BreadcrumbBaseState, contextValues: BreadcrumbContextValues) => JSXElement;
 
 // @public
-export const renderBreadcrumbButton_unstable: (state: BreadcrumbButtonState) => JSXElement;
+export const renderBreadcrumbButton_unstable: (state: BreadcrumbButtonBaseState) => JSXElement;
 
 // @public
-export const renderBreadcrumbDivider_unstable: (state: BreadcrumbDividerState) => JSXElement;
+export const renderBreadcrumbDivider_unstable: (state: BreadcrumbDividerBaseState) => JSXElement;
 
 // @public
-export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSXElement;
+export const renderBreadcrumbItem_unstable: (state: BreadcrumbItemBaseState) => JSXElement;
 
 // @public (undocumented)
 export const truncateBreadcrumbLongName: (content: string, maxLength?: number) => string;
@@ -177,6 +177,9 @@ export const useBreadcrumbButtonStyles_unstable: (state: BreadcrumbButtonState)
 // @internal (undocumented)
 export const useBreadcrumbContext_unstable: () => BreadcrumbContextValues;
 
+// @public (undocumented)
+export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues;
+
 // @public
 export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbDividerState;
 

packages/react-components/react-breadcrumb/library/src/Breadcrumb.ts

@@ -15,6 +15,7 @@ export {
   useBreadcrumbContext_unstable,
   useBreadcrumbStyles_unstable,
   useBreadcrumb_unstable,
+  useBreadcrumbContextValues_unstable,
   useBreadcrumbBase_unstable,
   useBreadcrumbA11yBehavior_unstable,
 } from './components/Breadcrumb/index';

packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/index.ts

@@ -14,4 +14,5 @@ export {
   useBreadcrumbBase_unstable,
   useBreadcrumbA11yBehavior_unstable,
 } from './useBreadcrumb';
+export { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue';
 export { breadcrumbClassNames, useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';

packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/renderBreadcrumb.tsx

@@ -5,12 +5,12 @@ import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 
 import { BreadcrumbProvider } from './BreadcrumbContext';
-import type { BreadcrumbState, BreadcrumbSlots, BreadcrumbContextValues } from './Breadcrumb.types';
+import type { BreadcrumbBaseState, BreadcrumbSlots, BreadcrumbContextValues } from './Breadcrumb.types';
 /**
  * Render the final JSX of Breadcrumb
  */
 export const renderBreadcrumb_unstable = (
-  state: BreadcrumbState,
+  state: BreadcrumbBaseState,
   contextValues: BreadcrumbContextValues,
 ): JSXElement => {
   assertSlots<BreadcrumbSlots>(state);

packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/renderBreadcrumbButton.tsx

@@ -1,11 +1,11 @@
-import type { BreadcrumbButtonState } from './BreadcrumbButton.types';
+import type { BreadcrumbButtonBaseState } from './BreadcrumbButton.types';
 import type { JSXElement } from '@fluentui/react-utilities';
 
 import { renderButton_unstable } from '@fluentui/react-button';
 
 /**
  * Render the final JSX of BreadcrumbButton
  */
-export const renderBreadcrumbButton_unstable = (state: BreadcrumbButtonState): JSXElement => {
+export const renderBreadcrumbButton_unstable = (state: BreadcrumbButtonBaseState): JSXElement => {
   return renderButton_unstable(state);
 };

packages/react-components/react-breadcrumb/library/src/components/BreadcrumbDivider/renderBreadcrumbDivider.tsx

@@ -4,12 +4,12 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 
-import type { BreadcrumbDividerState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types';
+import type { BreadcrumbDividerBaseState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types';
 
 /**
  * Render the final JSX of BreadcrumbDivider
  */
-export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState): JSXElement => {
+export const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerBaseState): JSXElement => {
   assertSlots<BreadcrumbDividerSlots>(state);
 
   return <state.root />;

packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx

@@ -4,12 +4,12 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 
-import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';
+import type { BreadcrumbItemBaseState, BreadcrumbItemSlots } from './BreadcrumbItem.types';
 
 /**
  * Render the final JSX of BreadcrumbItem
  */
-export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState): JSXElement => {
+export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemBaseState): JSXElement => {
   assertSlots<BreadcrumbItemSlots>(state);
 
   return <state.root>{state.root.children}</state.root>;

packages/react-components/react-breadcrumb/library/src/index.ts

@@ -5,6 +5,7 @@ export {
   useBreadcrumbBase_unstable,
   useBreadcrumbA11yBehavior_unstable,
   useBreadcrumbStyles_unstable,
+  useBreadcrumbContextValues_unstable,
   breadcrumbClassNames,
 } from './Breadcrumb';
 export type {

packages/react-components/react-button/library/etc/react-button.api.md

@@ -92,7 +92,7 @@ export type MenuButtonSlots = ButtonSlots & {
 export type MenuButtonState = ComponentState<MenuButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components' | 'iconPosition'>;
 
 // @public
-const renderButton_unstable: (state: ButtonState) => JSXElement;
+const renderButton_unstable: (state: ButtonBaseState) => JSXElement;
 export { renderButton_unstable }
 export { renderButton_unstable as renderToggleButton_unstable }
 

packages/react-components/react-button/library/src/components/Button/renderButton.tsx

@@ -4,12 +4,12 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 
-import type { ButtonSlots, ButtonState } from './Button.types';
+import type { ButtonSlots, ButtonBaseState } from './Button.types';
 
 /**
  * Renders a Button component by passing the state defined props to the appropriate slots.
  */
-export const renderButton_unstable = (state: ButtonState): JSXElement => {
+export const renderButton_unstable = (state: ButtonBaseState): JSXElement => {
   assertSlots<ButtonSlots>(state);
   const { iconOnly, iconPosition } = state;
 

packages/react-components/react-field/library/etc/react-field.api.md

@@ -6,6 +6,7 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
@@ -16,6 +17,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public (undocumented)
 export const Field: ForwardRefComponent<FieldProps>;
 
+// @public (undocumented)
+export type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;
+
+// @public (undocumented)
+export type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;
+
 // @public (undocumented)
 export const fieldClassNames: SlotClassNames<FieldSlots>;
 
@@ -74,11 +81,14 @@ export type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<Fi
 };
 
 // @public
-export const renderField_unstable: (state: FieldState, contextValues: FieldContextValues) => JSXElement;
+export const renderField_unstable: (state: FieldBaseState, contextValues: FieldContextValues) => JSXElement;
 
 // @public
 export const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
+// @public
+export const useFieldBase_unstable: (props: FieldBaseProps, ref: React_2.Ref<HTMLDivElement>) => FieldBaseState;
+
 // @public (undocumented)
 export const useFieldContext_unstable: () => FieldContextValue | undefined;
 

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

@@ -5,11 +5,14 @@ export type {
   FieldProps,
   FieldSlots,
   FieldState,
+  FieldBaseProps,
+  FieldBaseState,
 } from './components/Field/index';
 export {
   Field,
   fieldClassNames,
   renderField_unstable,
   useFieldStyles_unstable,
   useField_unstable,
+  useFieldBase_unstable,
 } from './components/Field/index';

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/renderField.tsx

@@ -4,12 +4,12 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
-import type { FieldContextValues, FieldSlots, FieldState } from './Field.types';
+import type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';
 
 /**
  * Render the final JSX of Field
  */
-export const renderField_unstable = (state: FieldState, contextValues: FieldContextValues): JSXElement => {
+export const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {
   assertSlots<FieldSlots>(state);
 
   let { children } = state;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
-import { useField_unstable, useFieldBase_unstable } from './useField';
+import { useField_unstable } from './useField';
 
 describe('useField_unstable', () => {
   const ref = React.createRef<HTMLDivElement>();
@@ -43,47 +43,3 @@ describe('useField_unstable', () => {
     });
   });
 });
-
-describe('useFieldBase_unstable', () => {
-  const ref = React.createRef<HTMLDivElement>();
-
-  it('should return default state when no props are provided', () => {
-    const { result } = renderHook(() => useFieldBase_unstable({}, ref));
-
-    expect(result.current).toMatchObject({
-      children: undefined,
-      components: {
-        // Plain HTML element is expected here, as base hook shouldn't know about the "styled" components
-        label: 'label',
-      },
-      validationMessage: undefined,
-      validationMessageIcon: undefined,
-      validationState: 'none',
-    });
-  });
-
-  it('should return default state when props are provided', () => {
-    const { result } = renderHook(() =>
-      useFieldBase_unstable(
-        {
-          label: 'Test Label',
-          validationMessage: 'Test Validation Message',
-          validationMessageIcon: 'Test Icon',
-          validationState: 'error',
-        },
-        ref,
-      ),
-    );
-
-    expect(result.current).toMatchObject({
-      children: undefined,
-      components: {
-        // Plain HTML element is expected here, as base hook shouldn't know about the "styled" components
-        label: 'label',
-      },
-      validationMessage: expect.objectContaining({ children: 'Test Validation Message' }),
-      validationMessageIcon: expect.objectContaining({ children: 'Test Icon' }),
-      validationState: 'error',
-    });
-  });
-});