From 563f2d5dd71d47a72c26229c5387c537e46a2dfa Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 27 Jul 2023 11:17:31 -0700 Subject: [PATCH 1/4] Added portal slot to combo and dropdown --- .../react-combobox/etc/react-combobox.api.md | 7 +++++-- .../src/components/Combobox/Combobox.types.ts | 9 ++++++++- .../src/components/Combobox/renderCombobox.tsx | 3 +-- .../src/components/Combobox/useCombobox.tsx | 10 ++++++++++ .../components/Combobox/useComboboxStyles.styles.ts | 1 + .../src/components/Dropdown/Dropdown.types.ts | 9 ++++++++- .../src/components/Dropdown/renderDropdown.tsx | 2 +- .../src/components/Dropdown/useDropdown.tsx | 10 ++++++++++ .../components/Dropdown/useDropdownStyles.styles.ts | 1 + 9 files changed, 45 insertions(+), 7 deletions(-) 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 359a21b2dd24ec..0e65de9585025a 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 { 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>; listbox?: Slot; + portal?: Slot; }; // @public -export type ComboboxState = ComponentState & ComboboxBaseState; +export type ComboboxState = ComponentState & Required>> & ComboboxBaseState; // @public export const Dropdown: ForwardRefComponent; @@ -79,10 +81,11 @@ export type DropdownSlots = { expandIcon: Slot<'span'>; button: NonNullable>; listbox?: Slot; + portal?: Slot; }; // @public -export type DropdownState = ComponentState & ComboboxBaseState & { +export type DropdownState = ComponentState & Required>> & ComboboxBaseState & { placeholderVisible: boolean; }; diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts index 5c366cb48454b1..10bbb8ff371a02 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts +++ b/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; + + /* The dropdown portal slot. + Limited to setting props only as the listbox is the rendered child. + */ + portal?: Slot; }; /** @@ -42,7 +48,8 @@ export type ComboboxProps = Omit, 'input'> /** * State used in rendering Combobox */ -export type ComboboxState = ComponentState & ComboboxBaseState; +export type ComboboxState = ComponentState & Required>> & + ComboboxBaseState; /* Export types defined in ComboboxBase */ export type ComboboxContextValues = ComboboxBaseContextValues; 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 d52f0b32ab2b2c..210de516527b6e 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/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx index b394426c170417..1be348a12e4c20 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx +++ b/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 | 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 = { 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 diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts index 94b67521f5dee3..94a13d89a7fa8d 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts +++ b/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; + + /* + The dropdown portal slot. + Limited to setting props only as the listbox is the rendered child. + */ + portal?: Slot; }; /** @@ -30,7 +37,7 @@ export type DropdownProps = ComponentProps, 'button'> & C /** * State used in rendering Dropdown */ -export type DropdownState = ComponentState & +export type DropdownState = ComponentState & Required>> & ComboboxBaseState & { /* Whether the placeholder is currently displayed */ placeholderVisible: boolean; 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 5a01a3706f128c..00e0f635443aed 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/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx index 29b69dec00c8f1..75d82bb06b0025 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx +++ b/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 | 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 = { button: 'fui-Dropdown__button', expandIcon: 'fui-Dropdown__expandIcon', listbox: 'fui-Dropdown__listbox', + portal: 'fui-Dropdown__portal', }; /** From 13e0ff35eec864bd5300d01f3288956741adcd6d Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Thu, 27 Jul 2023 11:18:28 -0700 Subject: [PATCH 2/4] yarn change --- ...eact-combobox-b28f719f-a080-42c6-acee-872d683f562f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-combobox-b28f719f-a080-42c6-acee-872d683f562f.json 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 00000000000000..ad979f55c5a385 --- /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" +} From 1b5b8b41b5115bf4459f6229e010392ccff74d3a Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Fri, 28 Jul 2023 09:41:20 -0700 Subject: [PATCH 3/4] PR updates --- .../react-combobox/etc/react-combobox.api.md | 8 ++++---- .../src/components/Combobox/Combobox.types.ts | 5 ++--- .../src/components/Combobox/useCombobox.tsx | 9 +++------ .../src/components/Dropdown/Dropdown.types.ts | 4 ++-- .../src/components/Dropdown/useDropdown.tsx | 9 +++------ 5 files changed, 14 insertions(+), 21 deletions(-) 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 0e65de9585025a..6cd8ec52bb4b65 100644 --- a/packages/react-components/react-combobox/etc/react-combobox.api.md +++ b/packages/react-components/react-combobox/etc/react-combobox.api.md @@ -51,11 +51,11 @@ export type ComboboxSlots = { expandIcon: Slot<'span'>; input: NonNullable>; listbox?: Slot; - portal?: Slot; + portal: NonNullable>; }; // @public -export type ComboboxState = ComponentState & Required>> & ComboboxBaseState; +export type ComboboxState = ComponentState & ComboboxBaseState; // @public export const Dropdown: ForwardRefComponent; @@ -81,11 +81,11 @@ export type DropdownSlots = { expandIcon: Slot<'span'>; button: NonNullable>; listbox?: Slot; - portal?: Slot; + portal: NonNullable>; }; // @public -export type DropdownState = ComponentState & Required>> & ComboboxBaseState & { +export type DropdownState = ComponentState & ComboboxBaseState & { placeholderVisible: boolean; }; diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts index 10bbb8ff371a02..0e58b3aee17ec8 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts @@ -26,7 +26,7 @@ export type ComboboxSlots = { /* The dropdown portal slot. Limited to setting props only as the listbox is the rendered child. */ - portal?: Slot; + portal: NonNullable>; }; /** @@ -48,8 +48,7 @@ export type ComboboxProps = Omit, 'input'> /** * State used in rendering Combobox */ -export type ComboboxState = ComponentState & Required>> & - ComboboxBaseState; +export type ComboboxState = ComponentState & ComboboxBaseState; /* Export types defined in ComboboxBase */ export type ComboboxContextValues = ComboboxBaseContextValues; diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx index 1be348a12e4c20..9f12a988054712 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx @@ -185,12 +185,9 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref | undefined = - open || hasFocus - ? resolveShorthand(props.portal, { - required: true, - }) - : undefined; + const portalSlot: Slot | undefined = resolveShorthand(props.portal, { + required: true, + }); [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot); [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot); diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts index 94a13d89a7fa8d..e8e0cc48538f35 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts +++ b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts @@ -26,7 +26,7 @@ export type DropdownSlots = { The dropdown portal slot. Limited to setting props only as the listbox is the rendered child. */ - portal?: Slot; + portal: NonNullable>; }; /** @@ -37,7 +37,7 @@ export type DropdownProps = ComponentProps, 'button'> & C /** * State used in rendering Dropdown */ -export type DropdownState = ComponentState & Required>> & +export type DropdownState = ComponentState & ComboboxBaseState & { /* Whether the placeholder is currently displayed */ placeholderVisible: boolean; diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx index 75d82bb06b0025..34c9b98c3c4b62 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx @@ -131,12 +131,9 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref | undefined = - baseState.open || baseState.hasFocus - ? resolveShorthand(props.portal, { - required: true, - }) - : undefined; + const portalSlot: Slot | undefined = resolveShorthand(props.portal, { + required: true, + }); [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot); [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot); From 80535b1e11060d4f20a628b55b5539d1e6570a6a Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Fri, 28 Jul 2023 12:12:53 -0700 Subject: [PATCH 4/4] PR updates --- .../react-combobox/etc/react-combobox.api.md | 4 +- .../src/components/Combobox/Combobox.types.ts | 6 - .../components/Combobox/renderCombobox.tsx | 2 +- .../src/components/Combobox/useCombobox.tsx | 7 - .../Combobox/useComboboxStyles.styles.ts | 1 - .../src/components/Dropdown/Dropdown.types.ts | 7 - .../components/Dropdown/renderDropdown.tsx | 2 +- .../src/components/Dropdown/useDropdown.tsx | 7 - .../Dropdown/useDropdownStyles.styles.ts | 1 - .../src/utils/ComboboxBase.types.ts | 120 +++++++++--------- .../src/utils/useComboboxBaseState.ts | 2 + 11 files changed, 66 insertions(+), 93 deletions(-) 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 6cd8ec52bb4b65..d2d98d67ef7367 100644 --- a/packages/react-components/react-combobox/etc/react-combobox.api.md +++ b/packages/react-components/react-combobox/etc/react-combobox.api.md @@ -10,7 +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 { PortalProps } from '@fluentui/react-portal'; import type { PositioningShorthand } from '@fluentui/react-positioning'; import { Provider } from 'react'; import { ProviderProps } from 'react'; @@ -51,7 +51,6 @@ export type ComboboxSlots = { expandIcon: Slot<'span'>; input: NonNullable>; listbox?: Slot; - portal: NonNullable>; }; // @public @@ -81,7 +80,6 @@ export type DropdownSlots = { expandIcon: Slot<'span'>; button: NonNullable>; listbox?: Slot; - portal: NonNullable>; }; // @public diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts index 0e58b3aee17ec8..5c366cb48454b1 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.types.ts @@ -8,7 +8,6 @@ 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 */ @@ -22,11 +21,6 @@ export type ComboboxSlots = { /* The dropdown listbox slot */ listbox?: Slot; - - /* The dropdown portal slot. - Limited to setting props only as the listbox is the rendered child. - */ - portal: NonNullable>; }; /** 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 210de516527b6e..099f51bf562592 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/renderCombobox.tsx @@ -23,7 +23,7 @@ export const renderCombobox_unstable = (state: ComboboxState, contextValues: Com (state.inlinePopup ? ( ) : ( - + ))} diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx index 9f12a988054712..b394426c170417 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx @@ -19,7 +19,6 @@ 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. @@ -185,10 +184,6 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref | undefined = resolveShorthand(props.portal, { - required: true, - }); - [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot); [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot); @@ -202,7 +197,6 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref = { 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 diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts index e8e0cc48538f35..94b67521f5dee3 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts +++ b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts @@ -7,7 +7,6 @@ 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 */ @@ -21,12 +20,6 @@ export type DropdownSlots = { /* The dropdown listbox slot */ listbox?: Slot; - - /* - The dropdown portal slot. - Limited to setting props only as the listbox is the rendered child. - */ - portal: NonNullable>; }; /** 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 00e0f635443aed..b6239512d18b5c 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/components/Dropdown/useDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx index 34c9b98c3c4b62..29b69dec00c8f1 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx +++ b/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx @@ -11,7 +11,6 @@ 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. @@ -131,10 +130,6 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref | undefined = resolveShorthand(props.portal, { - required: true, - }); - [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot); [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot); @@ -144,7 +139,6 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref = { button: 'fui-Dropdown__button', expandIcon: 'fui-Dropdown__expandIcon', listbox: 'fui-Dropdown__listbox', - portal: 'fui-Dropdown__portal', }; /** 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 fb1e599a3a9dc2..033cffe22a8cc6 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 4646284e05765b..e9fa2e802b6566 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,