diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index daf5fe83e2..bfeaf1601e 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -46,6 +46,7 @@ import { useFloatingPanel, useFloatingPanelProps, useFloatingReference, + useResolvedAnchor, type AnchorProps, } from '../../internal/floating' import { FormFields } from '../../internal/form-fields' @@ -1546,15 +1547,14 @@ function OptionsFn( let { id = `headlessui-combobox-options-${internalId}`, hold = false, - anchor, + anchor: rawAnchor, ...theirProps } = props let data = useData('Combobox.Options') let actions = useActions('Combobox.Options') + let anchor = useResolvedAnchor(rawAnchor) - let [floatingRef, style] = useFloatingPanel( - anchor === false ? undefined : anchor === true ? {} : anchor - ) + let [floatingRef, style] = useFloatingPanel(anchor) let getFloatingPanelProps = useFloatingPanelProps() let optionsRef = useSyncRefs(data.optionsRef, ref, anchor ? floatingRef : null) diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx index e65deb394c..a8f3fa87ea 100644 --- a/packages/@headlessui-react/src/components/listbox/listbox.tsx +++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx @@ -44,6 +44,7 @@ import { useFloatingPanelProps, useFloatingReference, useFloatingReferenceProps, + useResolvedAnchor, type AnchorPropsWithSelection, } from '../../internal/floating' import { FormFields } from '../../internal/form-fields' @@ -868,7 +869,7 @@ export type ListboxOptionsProps > @@ -878,7 +879,13 @@ function OptionsFn( ref: Ref ) { let internalId = useId() - let { id = `headlessui-listbox-options-${internalId}`, anchor, modal, ...theirProps } = props + let { + id = `headlessui-listbox-options-${internalId}`, + anchor: rawAnchor, + modal, + ...theirProps + } = props + let anchor = useResolvedAnchor(rawAnchor) // Always use `modal` when `anchor` is passed in if (modal == null) { @@ -903,8 +910,6 @@ function OptionsFn( let initialOption = useRef(null) useEffect(() => { - if (typeof anchor === 'boolean') return - if (!anchor?.to?.includes('selection')) return if (!visible) { @@ -938,9 +943,6 @@ function OptionsFn( let panelEnabled = didButtonMove ? false : visible let anchorOptions = (() => { - if (anchor === false) return undefined - if (anchor === true) anchor = {} - if (anchor == null) return undefined if (data.listRef.current.size <= 0) return { ...anchor, inner: undefined } diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx index 76b3c3a79d..0e085c5f21 100644 --- a/packages/@headlessui-react/src/components/menu/menu.tsx +++ b/packages/@headlessui-react/src/components/menu/menu.tsx @@ -41,6 +41,7 @@ import { useFloatingPanelProps, useFloatingReference, useFloatingReferenceProps, + useResolvedAnchor, type AnchorProps, } from '../../internal/floating' import { Modal, ModalFeatures, type ModalProps } from '../../internal/modal' @@ -575,7 +576,7 @@ export type MenuItemsProps ItemsRenderPropArg, ItemsPropsWeControl, { - anchor?: boolean | AnchorProps + anchor?: AnchorProps modal?: boolean // ItemsRenderFeatures @@ -589,11 +590,15 @@ function ItemsFn( ref: Ref ) { let internalId = useId() - let { id = `headlessui-menu-items-${internalId}`, anchor, modal, ...theirProps } = props + let { + id = `headlessui-menu-items-${internalId}`, + anchor: rawAnchor, + modal, + ...theirProps + } = props + let anchor = useResolvedAnchor(rawAnchor) let [state, dispatch] = useMenuContext('Menu.Items') - let [floatingRef, style] = useFloatingPanel( - anchor === false ? undefined : anchor === true ? {} : anchor - ) + let [floatingRef, style] = useFloatingPanel(anchor) let getFloatingPanelProps = useFloatingPanelProps() let itemsRef = useSyncRefs(state.itemsRef, ref, anchor ? floatingRef : null) let ownerDocument = useOwnerDocument(state.itemsRef) diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx index cb3d970f8e..3cf529adc2 100644 --- a/packages/@headlessui-react/src/components/popover/popover.tsx +++ b/packages/@headlessui-react/src/components/popover/popover.tsx @@ -42,6 +42,7 @@ import { useFloatingPanel, useFloatingPanelProps, useFloatingReference, + useResolvedAnchor, type AnchorProps, } from '../../internal/floating' import { Hidden, HiddenFeatures } from '../../internal/hidden' @@ -798,7 +799,7 @@ export type PopoverPanelProps( let { id = `headlessui-popover-panel-${internalId}`, focus = false, - anchor, + anchor: rawAnchor, modal, ...theirProps } = props @@ -827,9 +828,8 @@ function PanelFn( let afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}` let internalPanelRef = useRef(null) - let [floatingRef, style] = useFloatingPanel( - anchor === false ? undefined : anchor === true ? {} : anchor - ) + let anchor = useResolvedAnchor(rawAnchor) + let [floatingRef, style] = useFloatingPanel(anchor) let getFloatingPanelProps = useFloatingPanelProps() // Always use `modal` when `anchor` is passed in