Function Dropdown

packages/shared/src/components/fields/Dropdown.tsx:65–304

({
  icon,
  className = {},
  selectedIndex,
  options,
  onChange,
  buttonAriaLabel,
  onOpenChange,
  shouldIndicateSelected,
  buttonSize = ButtonSize.Large,
  buttonVariant = ButtonVariant.Float,
  scrollable = false,
  renderItem,
  placeholder = '',
  iconOnly,
  drawerProps,
  openFullScreen,
  disabled,
  valid,
  hint,
  fetchNextPage,
  canFetchMore = false,
  isFetchingNextPage,
  ...props
}: DropdownProps)

}

export function Dropdown({
  icon,
  className = {},
  selectedIndex,
  options,
  onChange,
  buttonAriaLabel,
  onOpenChange,
  shouldIndicateSelected,
  buttonSize = ButtonSize.Large,
  buttonVariant = ButtonVariant.Float,
  scrollable = false,
  renderItem,
  placeholder = '',
  iconOnly,
  drawerProps,
  openFullScreen,
  disabled,
  valid,
  hint,
  fetchNextPage,
  canFetchMore = false,
  isFetchingNextPage,
  ...props
}: DropdownProps): ReactElement {
  const id = useId();
  const isMobile = useViewSize(ViewSize.MobileL);
  const [isVisible, setVisibility] = useState(false);
  const wasVisible = usePrevious(`${isVisible}`);
  const triggerRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);

  useEffect(() => {
    onOpenChange?.(isVisible);
  }, [isVisible, onOpenChange]);

  const handleMenuTrigger = (): void => {
    setVisibility(!isVisible);
  };

  const handleChange = ({ value, index }: SelectParams): void => {
    onChange(value, index);
  };

  const handleKeyboard = (event: React.KeyboardEvent): void => {
    switch (event.key) {
      case 'Enter':
      case ' ':
        event.preventDefault();
        setVisibility(!isVisible);
        break;
      case 'Escape':
        if (isVisible) {
          setVisibility(false);
        }
        break;
      default:
        break;
    }