Add mountNode prop to combos

change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Added portal slot to Combobox and Dropdown",
+  "packageName": "@fluentui/react-combobox",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/etc/react-combobox.api.md

@@ -10,6 +10,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { FC } from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import { Provider } from 'react';
 import { ProviderProps } from 'react';
@@ -50,10 +51,11 @@ export type ComboboxSlots = {
     expandIcon: Slot<'span'>;
     input: NonNullable<Slot<'input'>>;
     listbox?: Slot<typeof Listbox>;
+    portal?: Slot<typeof Portal>;
 };
 
 // @public
-export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;
+export type ComboboxState = ComponentState<Omit<ComboboxSlots, 'portal'> & Required<Pick<ComboboxSlots, 'portal'>>> & ComboboxBaseState;
 
 // @public
 export const Dropdown: ForwardRefComponent<DropdownProps>;
@@ -79,10 +81,11 @@ export type DropdownSlots = {
     expandIcon: Slot<'span'>;
     button: NonNullable<Slot<'button'>>;
     listbox?: Slot<typeof Listbox>;
+    portal?: Slot<typeof Portal>;
 };
 
 // @public
-export type DropdownState = ComponentState<DropdownSlots> & ComboboxBaseState & {
+export type DropdownState = ComponentState<Omit<DropdownSlots, 'portal'> & Required<Pick<DropdownSlots, 'portal'>>> & ComboboxBaseState & {
     placeholderVisible: boolean;
 };
 

packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts

@@ -8,6 +8,7 @@ import type {
   ComboboxBaseState,
 } from '../../utils/ComboboxBase.types';
 import { Listbox } from '../Listbox/Listbox';
+import { Portal } from '@fluentui/react-portal';
 
 export type ComboboxSlots = {
   /* The root combobox slot */
@@ -21,6 +22,11 @@ export type ComboboxSlots = {
 
   /* The dropdown listbox slot */
   listbox?: Slot<typeof Listbox>;
+
+  /* The dropdown portal slot.
+     Limited to setting props only as the listbox is the rendered child.
+  */
+  portal?: Slot<typeof Portal>;
 };
 
 /**
@@ -42,7 +48,8 @@ export type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>
 /**
  * State used in rendering Combobox
  */
-export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState;
+export type ComboboxState = ComponentState<Omit<ComboboxSlots, 'portal'> & Required<Pick<ComboboxSlots, 'portal'>>> &
+  ComboboxBaseState;
 
 /* Export types defined in ComboboxBase */
 export type ComboboxContextValues = ComboboxBaseContextValues;

packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx

@@ -1,6 +1,5 @@
 /** @jsxRuntime classic */
 /** @jsx createElement */
-
 import { Portal } from '@fluentui/react-portal';
 
 import { createElement } from '@fluentui/react-jsx-runtime';
@@ -24,7 +23,7 @@ export const renderCombobox_unstable = (state: ComboboxState, contextValues: Com
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal {...slotProps.portal}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

@@ -19,6 +19,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SelectionEvents } from '../../utils/Selection.types';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { ComboboxProps, ComboboxState } from './Combobox.types';
+import { Portal } from '@fluentui/react-portal';
 
 /**
  * Create the state required to render Combobox.
@@ -184,6 +185,13 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
         })
       : undefined;
 
+  const portalSlot: Slot<typeof Portal> | undefined =
+    open || hasFocus
+      ? resolveShorthand(props.portal, {
+          required: true,
+        })
+      : undefined;
+
   [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
   [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
 
@@ -197,6 +205,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
       input: 'input',
       expandIcon: 'span',
       listbox: Listbox,
+      portal: Portal,
     },
     root: resolveShorthand(props.root, {
       required: true,
@@ -207,6 +216,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     }),
     input: triggerSlot,
     listbox: listboxSlot,
+    portal: portalSlot,
     expandIcon: resolveShorthand(props.expandIcon, {
       required: true,
       defaultProps: {

packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.styles.ts

@@ -9,6 +9,7 @@ export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
   input: 'fui-Combobox__input',
   expandIcon: 'fui-Combobox__expandIcon',
   listbox: 'fui-Combobox__listbox',
+  portal: 'fui-Combobox__portal',
 };
 
 // Matches internal heights for Select and Input, but there are no theme variables for these

packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts

@@ -7,6 +7,7 @@ import type {
   ComboboxBaseState,
 } from '../../utils/ComboboxBase.types';
 import { Listbox } from '../Listbox/Listbox';
+import { Portal } from '@fluentui/react-portal';
 
 export type DropdownSlots = {
   /* The root dropdown slot */
@@ -20,6 +21,12 @@ export type DropdownSlots = {
 
   /* The dropdown listbox slot */
   listbox?: Slot<typeof Listbox>;
+
+  /*
+     The dropdown portal slot.
+     Limited to setting props only as the listbox is the rendered child.
+  */
+  portal?: Slot<typeof Portal>;
 };
 
 /**
@@ -30,7 +37,7 @@ export type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & C
 /**
  * State used in rendering Dropdown
  */
-export type DropdownState = ComponentState<DropdownSlots> &
+export type DropdownState = ComponentState<Omit<DropdownSlots, 'portal'> & Required<Pick<DropdownSlots, 'portal'>>> &
   ComboboxBaseState & {
     /* Whether the placeholder is currently displayed */
     placeholderVisible: boolean;

packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx

@@ -26,7 +26,7 @@ export const renderDropdown_unstable = (state: DropdownState, contextValues: Dro
           (state.inlinePopup ? (
             <slots.listbox {...slotProps.listbox} />
           ) : (
-            <Portal>
+            <Portal {...slotProps.portal}>
               <slots.listbox {...slotProps.listbox} />
             </Portal>
           ))}

packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx

@@ -11,6 +11,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { OptionValue } from '../../utils/OptionCollection.types';
 import type { DropdownProps, DropdownState } from './Dropdown.types';
 import { useMergedRefs } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
 
 /**
  * Create the state required to render Dropdown.
@@ -130,6 +131,13 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
         })
       : undefined;
 
+  const portalSlot: Slot<typeof Portal> | undefined =
+    baseState.open || baseState.hasFocus
+      ? resolveShorthand(props.portal, {
+          required: true,
+        })
+      : undefined;
+
   [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
   [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
 
@@ -139,6 +147,7 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
       button: 'button',
       expandIcon: 'span',
       listbox: Listbox,
+      portal: Portal,
     },
     root: resolveShorthand(props.root, {
       required: true,
@@ -150,6 +159,7 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
     }),
     button: triggerSlot,
     listbox: listboxSlot,
+    portal: portalSlot,
     expandIcon: resolveShorthand(props.expandIcon, {
       required: true,
       defaultProps: {

packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.styles.ts

@@ -9,6 +9,7 @@ export const dropdownClassNames: SlotClassNames<DropdownSlots> = {
   button: 'fui-Dropdown__button',
   expandIcon: 'fui-Dropdown__expandIcon',
   listbox: 'fui-Dropdown__listbox',
+  portal: 'fui-Dropdown__portal',
 };
 
 /**