@dossierhq/design
Version:
The design system for Dossier.
43 lines • 1.98 kB
JavaScript
'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as ReactAriaOverlays from '@react-aria/overlays';
import { useEffect, useRef, } from 'react';
import { toClassName } from '../../utils/ClassNameUtils.js';
import { Portal } from '../Portal/Portal.js';
const { useOverlayPosition } = ReactAriaOverlays;
export const DropdownDisplay = ({ active, up, left, trigger, triggerRef, children, }) => {
const dialogRef = useRef(null);
const placement = `${up ? 'top' : 'bottom'} ${left ? 'end' : 'start'}`;
const { overlayProps } = useOverlayPosition({
overlayRef: dialogRef,
targetRef: triggerRef,
isOpen: active,
placement,
});
useEffect(() => {
if (!dialogRef.current)
return;
const dialog = dialogRef.current;
// don't do anything if already in right state (due to useEffect double run)
if (active === dialog.open) {
return;
}
if (active) {
dialog.show();
}
else if (!active) {
dialog.close();
}
}, [active]);
return (_jsxs(_Fragment, { children: [trigger, active ? (_jsx(Portal, { children: _jsx("dialog", { ...overlayProps, ref: dialogRef, className: "dialog-reset", children: _jsx("div", { className: "dropdown-content", children: children }) }) })) : null] }));
};
DropdownDisplay.displayName = 'DropdownDisplay';
DropdownDisplay.Item = ({ active, onClick, children }) => {
return (_jsx("a", { className: toClassName('dropdown-item', active && 'is-active'), onClick: onClick, children: children }));
};
DropdownDisplay.Item.displayName = 'DropdownDisplay.Item';
DropdownDisplay.ContentItem = ({ children }) => {
return (_jsx("div", { className: "dropdown-item", children: _jsx("p", { children: children }) }));
};
DropdownDisplay.ContentItem.displayName = 'DropdownDisplay.ContentItem';
//# sourceMappingURL=DropdownDisplay.js.map