// @flow strict import * as React from 'react'; import { // $FlowFixMe[untyped-import] autoUpdate, // $FlowFixMe[untyped-import] flip, // $FlowFixMe[untyped-import] FloatingFocusManager, // $FlowFixMe[untyped-import] FloatingPortal, // $FlowFixMe[untyped-import] offset, // $FlowFixMe[untyped-import] shift, // $FlowFixMe[untyped-import] useFloating, } from '@floating-ui/react'; import {useReferenceElementWidth} from '../../hooks'; import {spaceNone, spaceXXSmall} from '../../styles/variables/_space'; import type {ClickAwayRefType} from '../../utils'; import {ClickAway, mergeRefs} from '../../utils'; import classify from '../../utils/classify'; import type {ButtonProps, ButtonSize} from '../Button'; import {Button} from '../Button'; import type {AnchorType, Strategy} from '../ButtonDropdown'; import {ANCHOR_POSITION_TYPE, STRATEGY_TYPE} from '../ButtonDropdown'; import type {ElevationType} from '../Tooltip'; import {getElevationValue} from '../Tooltip'; import css from './FilterButtonOverlay.module.css'; type ClassNames = $ReadOnly<{wrapper?: string, overlayContainer?: string}>; export type FilterButtonOverlaySizeTypes = 'medium' | 'small'; export type NewButtonProps = $Diff; export type FilterButtonOverlayProps = { ...NewButtonProps, classNames?: ClassNames, children: React.Node, positionStrategy?: Strategy, anchorPosition?: AnchorType, clickAwayRef?: ClickAwayRefType, isFluid?: boolean, size?: FilterButtonOverlaySizeTypes, buttonLabel?: React.Node, buttonSize?: ButtonSize, elevation?: ElevationType, buttonIsFluid?: boolean, ... }; export const FilterButtonOverlay: React$AbstractComponent< FilterButtonOverlayProps, HTMLDivElement, > = React.forwardRef( ( { classNames, anchorPosition = ANCHOR_POSITION_TYPE.bottomStart, positionStrategy = STRATEGY_TYPE.absolute, clickAwayRef, size = 'medium', children, isFluid, buttonLabel, buttonIsFluid, buttonSize, elevation = 'modal', ...restProps }: FilterButtonOverlayProps, ref, ) => { const {x, y, refs, strategy, context} = useFloating({ open: true, strategy: positionStrategy, placement: anchorPosition, whileElementsMounted: autoUpdate, middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))], }); const dropdownWidth = useReferenceElementWidth(refs.reference?.current); return ( {({isOpen, onOpen, boundaryRef, triggerRef}) => (

{isOpen && (

element. This means the menu would otherwise default to the body's width. To support fluid width, we must manually set the dropdown width here; otherwise, it uses a fixed width. Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */ ...(isFluid !== false && { '--dropdown-width': dropdownWidth, }), '--menu-elevation': getElevationValue(elevation), }} >

{children}

)}

)} ); }, );