Portal/rsconcept/frontend/src/components/dropdown/dropdown.tsx

import React from 'react';
import clsx from 'clsx';

import { type Styling } from '../props';

interface DropdownProps extends Styling {
  /** Reference to the dropdown element. */
  ref?: React.Ref<HTMLDivElement>;

  /** Unique ID for the dropdown. */
  id?: string;

  /** Margin for the dropdown. */
  margin?: string;

  /** Indicates whether the dropdown should stretch to the left. */
  stretchLeft?: boolean;

  /** Indicates whether the dropdown should stretch to the top. */
  stretchTop?: boolean;

  /** Indicates whether the dropdown is open. */
  isOpen: boolean;
}

/**
 *  Animated list of children with optional positioning and visibility control.
 *  Note: Dropdown should be inside a relative container.
 */
export function Dropdown({
  isOpen,
  stretchLeft,
  stretchTop,
  margin,
  className,
  children,
  style,
  ...restProps
}: React.PropsWithChildren<DropdownProps>) {
  return (
    <div
      tabIndex={-1}
      className={clsx(
        'z-topmost absolute',
        stretchLeft ? 'right-0' : 'left-0',
        stretchTop ? 'bottom-0' : 'top-full',
        'grid',
        'border rounded-md shadow-lg',
        'clr-input',
        'text-sm',
        'ease-in-out duration-(--duration-dropdown) will-change-[clip-path,transform] transition-[clip-path,transform]',
        margin,
        className
      )}
      style={{
        transform: isOpen ? 'translateY(0)' : 'translateY(-10%)',
        clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(10% 0% 90% 0%)',
        ...style
      }}
      aria-hidden={!isOpen}
      {...restProps}
    >
      {children}
    </div>
  );
}