useDropdown.ts

import { computed, toValue } from 'vue';
import { onClickOutside, onKeyStroke, type MaybeElementRef, type MaybeRefOrGetter } from '@vueuse/core';
import { flip, offset, shift } from '@floating-ui/vue';
import { type UseDropdownOptions, usePopover } from '@storefront-ui/vue';

export function useDropdown(options: UseDropdownOptions) {
  const { onClose, placement = 'bottom', middleware, isOpen, ...popoverOptions } = options;

  const { floatingRef, referenceRef, style } = usePopover({
    placement,
    middleware: computed(() => toValue(middleware) || [offset(8), shift(), flip()]),
    isOpen,
    ...popoverOptions,
  });

  onClickOutside(referenceRef as MaybeElementRef, () => {
    if (toValue(isOpen)) {
      onClose?.();
    }
  });
  onKeyStroke('Escape', onClose, { target: referenceRef as MaybeRefOrGetter<EventTarget | null | undefined> });

  return { floatingRef, referenceRef, style };
}