import React, { ElementType, forwardRef, useMemo } from 'react'; import { Menu, Transition } from '@headlessui/react'; import styles from './style.module.css'; import classNames from 'classnames'; import DropdownItem from '@/components/elements/dropdown/DropdownItem'; import DropdownButton from '@/components/elements/dropdown/DropdownButton'; interface Props { as?: ElementType; children: React.ReactNode; } const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
); type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & { type?: JSX.Element; } const Dropdown = forwardRef(({ as, children }, ref) => { const [ Button, items ] = useMemo(() => { const list = React.Children.toArray(children) as unknown as TypedChild[]; return [ list.filter(child => child.type === DropdownButton), list.filter(child => child.type !== DropdownButton), ]; }, [ children ]); if (!Button) { throw new Error('Cannot mount component without a child .'); } return ( {Button}
{items}
); }); const _Dropdown = Object.assign(Dropdown, { Button: DropdownButton, Item: DropdownItem, Gap: DropdownGap, }); export { _Dropdown as default };