@trellixio/roaster-coffee/lib/utils/useDropdown/index.js

Beans' product component library

import { useFloating, shift, flip, offset, autoUpdate, useInteractions, useClick, useDismiss, useRole, } from '@floating-ui/react';
import React from 'react';
export function useDropdown({ placement = 'bottom-end', open: controlledOpen, onOpenChange: setControlledOpen, } = {}) {
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
    const open = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
    const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setUncontrolledOpen;
    const data = useFloating({
        placement,
        open,
        onOpenChange: setOpen,
        whileElementsMounted: autoUpdate,
        middleware: [
            offset(5),
            flip({
                fallbackAxisSideDirection: 'end',
            }),
            shift({ padding: 5 }),
        ],
    });
    const { context } = data;
    const click = useClick(context, {
        enabled: controlledOpen == null,
    });
    const dismiss = useDismiss(context);
    const role = useRole(context);
    const interactions = useInteractions([click, dismiss, role]);
    return React.useMemo(() => (Object.assign(Object.assign({ open,
        setOpen }, interactions), data)), [open, setOpen, interactions, data]);
}