49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { type HTMLAttributes, useRef } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
|
|
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
|
|
|
const StyledDropdownMenuContainer = styled.ul<{
|
|
anchor: 'left' | 'right';
|
|
}>`
|
|
padding: 0;
|
|
position: absolute;
|
|
${({ anchor }) => {
|
|
if (anchor === 'right') return 'right: 0';
|
|
}};
|
|
top: 14px;
|
|
`;
|
|
|
|
export type DropdownMenuContainerProps = {
|
|
anchor?: 'left' | 'right';
|
|
children: React.ReactNode;
|
|
onClose?: () => void;
|
|
width?: `${string}px` | 'auto' | number;
|
|
} & HTMLAttributes<HTMLUListElement>;
|
|
|
|
export function DropdownMenuContainer({
|
|
anchor = 'right',
|
|
children,
|
|
onClose,
|
|
width,
|
|
...props
|
|
}: DropdownMenuContainerProps) {
|
|
const dropdownRef = useRef(null);
|
|
|
|
useListenClickOutside({
|
|
refs: [dropdownRef],
|
|
callback: () => {
|
|
onClose?.();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<StyledDropdownMenuContainer data-select-disable {...props} anchor={anchor}>
|
|
<StyledDropdownMenu ref={dropdownRef} width={width}>
|
|
{children}
|
|
</StyledDropdownMenu>
|
|
</StyledDropdownMenuContainer>
|
|
);
|
|
}
|