@dossierhq/design
Version:
The design system for Dossier.
23 lines • 1.38 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { useKeyHandler } from '../../hooks/useKeyHandler.js';
import { useWindowClick } from '../../hooks/useWindowClick.js';
import { DropdownDisplay } from '../DropdownDisplay/DropdownDisplay.js';
export function Dropdown({ activeItemIds, items, left, up, isContentItem, renderItem, renderTrigger, onItemClick, }) {
const [active, setActive] = useState(false);
const handleOpen = useCallback(() => setActive(true), []);
const handleClose = useCallback(() => setActive(false), []);
const triggerRef = useRef(null);
useWindowClick(triggerRef, handleClose, active);
useKeyHandler(['Escape'], handleClose, active);
const trigger = renderTrigger(triggerRef, handleOpen);
return (_jsx(DropdownDisplay, { active: active, up: up, left: left, trigger: trigger, triggerRef: triggerRef, children: items.map((item) => {
const contentItem = isContentItem?.(item);
if (contentItem) {
return (_jsx(DropdownDisplay.ContentItem, { children: renderItem(item) }, item.id));
}
return (_jsx(DropdownDisplay.Item, { active: activeItemIds?.includes(item.id), onClick: () => onItemClick?.(item), children: renderItem(item) }, item.id));
}) }));
}
//# sourceMappingURL=Dropdown.js.map