diff --git a/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json b/change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json new file mode 100644 index 0000000000000..ad979f55c5a38 --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md index 359a21b2dd24e..d2d98d67ef736 100644 --- a/packages/react-components/react-combobox/etc/react-combobox.api.md +++ b/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 { PortalProps } from '@fluentui/react-portal'; import type { PositioningShorthand } from '@fluentui/react-positioning'; import { Provider } from 'react'; import { ProviderProps } from 'react'; diff --git a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx index d52f0b32ab2b2..099f51bf56259 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx +++ b/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 ? ( ) : ( - + ))} diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx index 5a01a3706f128..b6239512d18b5 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx @@ -26,7 +26,7 @@ export const renderDropdown_unstable = (state: DropdownState, contextValues: Dro (state.inlinePopup ? ( ) : ( - + ))} diff --git a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts index fb1e599a3a9dc..033cffe22a8cc 100644 --- a/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts +++ b/packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts @@ -3,75 +3,77 @@ import type { PositioningShorthand } from '@fluentui/react-positioning'; import type { ComboboxContextValue } from '../contexts/ComboboxContext'; import type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types'; import { SelectionProps, SelectionState } from '../utils/Selection.types'; +import { PortalProps } from '@fluentui/react-portal'; /** * ComboboxBase Props * Shared types between Combobox and Dropdown components */ -export type ComboboxBaseProps = SelectionProps & { - /** - * Controls the colors and borders of the combobox trigger. - * @default 'outline' - */ - appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline'; - - /** - * The default open state when open is uncontrolled - */ - defaultOpen?: boolean; - - /** - * The default value displayed in the trigger input or button when the combobox's value is uncontrolled - */ - defaultValue?: string; - - /** - * Render the combobox's popup inline in the DOM. - * This has accessibility benefits, particularly for touch screen readers. - */ - inlinePopup?: boolean; - - /** - * Callback when the open/closed state of the dropdown changes - */ - onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void; - - /** - * Sets the open/closed state of the dropdown. - * Use together with onOpenChange to fully control the dropdown's visibility - */ - open?: boolean; - - /** - * If set, the placeholder will show when no value is selected - */ - placeholder?: string; - - /** - * Configure the positioning of the combobox dropdown - * - * @defaultvalue below - */ - positioning?: PositioningShorthand; - - /** - * Controls the size of the combobox faceplate - * @default 'medium' - */ - size?: 'small' | 'medium' | 'large'; - - /** - * The value displayed by the Combobox. - * Use this with `onOptionSelect` to directly control the displayed value string - */ - value?: string; -}; +export type ComboboxBaseProps = SelectionProps & + Pick & { + /** + * Controls the colors and borders of the combobox trigger. + * @default 'outline' + */ + appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline'; + + /** + * The default open state when open is uncontrolled + */ + defaultOpen?: boolean; + + /** + * The default value displayed in the trigger input or button when the combobox's value is uncontrolled + */ + defaultValue?: string; + + /** + * Render the combobox's popup inline in the DOM. + * This has accessibility benefits, particularly for touch screen readers. + */ + inlinePopup?: boolean; + + /** + * Callback when the open/closed state of the dropdown changes + */ + onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void; + + /** + * Sets the open/closed state of the dropdown. + * Use together with onOpenChange to fully control the dropdown's visibility + */ + open?: boolean; + + /** + * If set, the placeholder will show when no value is selected + */ + placeholder?: string; + + /** + * Configure the positioning of the combobox dropdown + * + * @defaultvalue below + */ + positioning?: PositioningShorthand; + + /** + * Controls the size of the combobox faceplate + * @default 'medium' + */ + size?: 'small' | 'medium' | 'large'; + + /** + * The value displayed by the Combobox. + * Use this with `onOptionSelect` to directly control the displayed value string + */ + value?: string; + }; /** * State used in rendering Combobox */ export type ComboboxBaseState = Required> & - Pick & + Pick & OptionCollectionState & SelectionState & { /* Option data for the currently highlighted option (not the selected option) */ diff --git a/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts b/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts index 4646284e05765..e9fa2e802b656 100644 --- a/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts +++ b/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts @@ -16,6 +16,7 @@ export const useComboboxBaseState = ( children, editable = false, inlinePopup = false, + mountNode = undefined, multiselect, onOpenChange, size = 'medium', @@ -117,6 +118,7 @@ export const useComboboxBaseState = ( hasFocus, ignoreNextBlur, inlinePopup, + mountNode, open, setActiveOption, setFocusVisible,