@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/src/components/UiMenu/UiMenu.vue

@@ -1,192 +1,149 @@
 <template>
-  <div v-click-away="close" class="relative">
-    <UiFilterButton
-      ref="uiMenuActivator"
-      :variant="buttonVariant"
-      :title="selectedOptionLabel || defaultTitle"
-      :button-width="listWidth"
-      data-testid="button"
-      :disabled="disabled"
-      :active="active"
-      icon-size="small"
-      :icon-left="iconLeft"
-      :class="{ 'border-gray-700': isOpen }"
-      :size="filterButtonSize"
-      @click="toggleDisplay"
-    ></UiFilterButton>
-    <Transition :name="animate ? `fade-up` : 'none'">
-      <div
-        v-if="isOpen"
-        ref="uiMenuDropdown"
-        :class="[
-          'absolute',
-          cn(
-            'z-10 [--transition-close-duration:100ms] [--transition-duration:200ms]',
-            placedListClass,
-          ),
-          props.listWidth === 'full' ? 'w-full' : 'w-max',
-        ]"
-        :data-side="floatingUi.placement.value"
-        :style="
-          floatingStylesActive
-            ? {
-                ...floatingStyles,
-                transform: floatingUi.isPositioned
-                  ? floatingStyles.transform
-                  : 'translate(0,-200%)',
-              }
-            : null
+  <UiPopover :initially-open="isOpen" :animate :placement="floatingUiPlacement">
+    <template #button="{ toggle, isOpen: isPopoverOpen }">
+      <UiButton
+        class="w-full justify-between"
+        :class="{
+          'border-neutral-subtle': isPopoverOpen,
+        }"
+        :appearance="active ? 'primary' : buttonAppearance"
+        :disabled
+        :size="filterButtonSize"
+        data-testid="menu-button"
+        @click="
+          toggle();
+          isPopoverOpen ? $emit('close') : $emit('open');
         "
-        data-testid="menu"
       >
-        <UiList
-          :data-side="floatingUi.placement.value"
-          :class="[
-            cn(
-              'block min-w-max border-none bg-white shadow-lg data-[side*=bottom]:mt-1 data-[side*=top]:mb-1',
-              menuClasses,
-            ),
-          ]"
-          data-testid="menu-option-list"
+        <div class="flex items-center gap-2">
+          <UiIcon v-if="iconLeft" :name="iconLeft" size="sm" />
+          {{ selectedOptionLabel }}
+        </div>
+        <UiIcon name="chevron-down" size="sm" />
+      </UiButton>
+    </template>
+
+    <template #default="{ close }">
+      <div
+        class="block w-max max-w-full divide-y overflow-hidden rounded-sm text-base/6 shadow-lg focus:outline-hidden sm:text-sm/5"
+      >
+        <div
+          v-if="hasSearch"
+          class="flex items-center gap-2 rounded-t-sm px-4 py-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
         >
-          <li
-            v-if="hasSearch"
-            style="outline-offset: -2px"
-            class="border-b fill-current px-4 py-3 text-gray-900 shadow-none"
-            tabindex="-1"
-            data-testid="search-input"
-          >
-            <UiSimpleInput
-              :autofocus="hasAutoFocus"
-              :placeholder="searchPlaceholder"
-              :value="query"
-              data-testid="menu-search-input"
-              @input="(event) => updateValue(event)"
-            />
-          </li>
-          <slot
-            :checkbox-color="checkboxColor"
-            :checkbox-size="checkboxSize"
-            :icon-size="iconSize"
-            :image-shape="imageShape"
-            :list-variant="listVariant"
-            :options="options"
-            :grouped-options="groupedOptions"
+          <UiIcon
+            class="shrink-0 text-neutral-emphasis"
+            name="search"
+            size="sm"
+          />
+          <input
+            ref="search-input"
+            v-model="queryModel"
+            type="text"
+            spellcheck="false"
+            class="w-full text-sm focus:outline-hidden"
+            :placeholder="searchPlaceholder"
+            data-testid="menu-search-input"
+          />
+        </div>
+
+        <slot
+          v-bind="{
+            checkboxAppearance,
+            checkboxSize,
+            iconSize,
+            imageShape,
+            listVariant,
+            options,
+            groupedOptions,
+          }"
+        >
+          <ul
+            v-if="processedOptions.some(({ options }) => options.length > 0)"
+            class="max-h-80 overflow-y-auto"
+            data-testid="menu-option-list"
           >
-            <ul
-              v-if="
-                Array.isArray(groupedOptions) &&
-                groupedOptions.some(
-                  (groupedOption) => groupedOption.options.length > 0,
-                )
-              "
-              class="max-h-80 overflow-y-auto"
-              tabindex="0"
+            <template
+              v-for="group in processedOptions"
+              :key="`group-${group.groupLabel ?? 'default'}`"
             >
-              <template
-                v-for="groupedOption in groupedOptions"
-                :key="groupedOption.groupLabel"
-              >
-                <template v-if="groupedOption.options.length > 0">
-                  <li
-                    v-if="groupedOption.groupLabel"
-                    class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
-                  >
-                    {{ groupedOption.groupLabel }}
-                  </li>
-
-                  <UiListItem
-                    v-for="(option, index) in groupedOption.options"
-                    :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
-                    :selected="option.selected"
-                    :selectable="listVariant === 'selectable'"
-                    :is-checked="option.selected"
-                    :check-box-menu="listVariant === 'checkbox'"
-                    :icon-size="iconSize"
-                    :image-shape="imageShape"
-                    :image-src="option.imageSrc"
-                    :icon-name="option.iconName"
-                    :checkbox-size="checkboxSize"
-                    :check-box-color="checkboxColor"
-                    class="hover:bg-gray-100 focus:bg-gray-300"
-                    :data-testid="`menu-option-button-${index}`"
-                    @list-item-click="selectOption(option)"
-                    >{{ option.label }}
-                  </UiListItem>
-                </template>
+              <template v-if="group.options.length > 0">
+                <li
+                  v-if="group.groupLabel"
+                  class="flex h-6 items-center bg-neutral-whisper px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
+                >
+                  {{ group.groupLabel }}
+                </li>
+
+                <UiListItem
+                  v-for="(option, index) in group.options"
+                  :key="`option-${option.value}`"
+                  :selected="option.selected"
+                  :selectable="listVariant === 'selectable'"
+                  :is-checked="option.selected"
+                  :check-box-menu="listVariant === 'checkbox'"
+                  :icon-size="iconSize"
+                  :image-shape="imageShape"
+                  :image-src="option.imageSrc"
+                  :icon-name="option.iconName"
+                  :checkbox-size="checkboxSize"
+                  :checkbox-appearance="checkboxAppearance"
+                  class="hover:bg-neutral-whisper focus:bg-neutral-faint"
+                  :class="{
+                    'border-t': option.hasDividerAbove,
+                  }"
+                  :data-testid="`menu-option-button-${index}`"
+                  @list-item-click="
+                    (value, shouldCloseMenu) => {
+                      selectOption(option);
+                      if (shouldCloseMenu) {
+                        close();
+                      }
+                    }
+                  "
+                  >{{ option.label }}</UiListItem
+                >
               </template>
-            </ul>
-            <ul v-else class="max-h-60 overflow-y-auto" tabindex="0">
-              <UiListItem
-                v-for="(option, index) in options"
-                :key="`menuOptions-${index}`"
-                :selected="option.selected"
-                :selectable="listVariant === 'selectable'"
-                :is-checked="option.selected"
-                :check-box-menu="listVariant === 'checkbox'"
-                :icon-size="iconSize"
-                :image-shape="imageShape"
-                :image-src="option.imageSrc"
-                :icon-name="option.iconName"
-                :checkbox-size="checkboxSize"
-                :check-box-color="checkboxColor"
-                class="hover:bg-gray-100 focus:bg-gray-300"
-                :data-testid="`menu-option-button-${index}`"
-                @list-item-click="selectOption(option)"
-                >{{ option.label }}
-              </UiListItem>
-            </ul>
-          </slot>
-
-          <li
-            v-if="hasResetOption"
-            style="outline-offset: -2px"
-            class="border-t fill-current px-4 py-2 text-gray-900 shadow-none"
-            data-testid="reset-button"
+            </template>
+          </ul>
+        </slot>
+
+        <div v-if="hasResetOption" class="px-4 py-2 text-neutral-primary">
+          <UiButton
+            appearance="secondary"
+            :disabled="disabledReset"
+            icon-name="reset"
+            size="xs"
+            data-testid="menu-search-reset-button"
+            @click="$emit('reset')"
           >
-            <UiButton
-              color="transparent"
-              :disabled="disabledReset"
-              disabled-variant="secondary"
-              icon-name="reset"
-              size="xs"
-              data-testid="menu-search-reset-button"
-              @click="handleReset"
-              >{{ resetLabel }}</UiButton
-            >
-          </li>
-        </UiList>
+            <UiIcon name="reset" />
+            {{ resetLabel }}
+          </UiButton>
+        </div>
       </div>
-    </Transition>
-  </div>
+    </template>
+  </UiPopover>
 </template>
 
 <script setup lang="ts" generic="Value">
-import {
-  autoUpdate,
-  flip,
-  type Placement,
-  shift,
-  useFloating,
-  type UseFloatingOptions,
-} from "@floating-ui/vue";
-import { computed, type HTMLAttributes, ref, watchPostEffect } from "vue";
+import type { Placement } from "@floating-ui/vue";
+import { computed, onMounted, useTemplateRef } from "vue";
 
-import { vClickAway } from "../../directives/vClickAway.ts";
-import { cn } from "../../utils/cn.ts";
 import UiButton from "../UiButton/UiButton.vue";
-import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
 import type { UiIconName } from "../UiIcon/UiIcon.vue";
-import UiList from "../UiList/UiList.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
 import UiListItem from "../UiListItem/UiListItem.vue";
-import UiSimpleInput from "../UiSimpleInput/UiSimpleInput.vue";
+import UiPopover from "../UiPopover/UiPopover.vue";
 
 export type UiMenuOptionType<Value = unknown> = {
   label: string;
-  imageSrc?: string | undefined;
-  iconName?: UiIconName | undefined;
+  imageSrc?: string;
+  iconName?: UiIconName;
   selected: boolean;
   value: Value;
+  /** @default false */
+  hasDividerAbove?: boolean;
 };
 
 export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
@@ -199,268 +156,131 @@ export type UiMenuGroupedOption<Value = unknown> = {
 };
 
 defineSlots<{
-  // Marking the slot as optional avoids inexplicable TypeScript errors in the storybook story (see https://github.com/vuejs/core/issues/10647).
-  default?(props: {
-    checkboxColor: "blue" | "gray";
-    checkboxSize: "small" | "medium";
-    iconSize: "small" | "medium" | "large";
-    imageShape: "rounded" | "square";
-    listVariant: "checkbox" | "selectable" | "blank";
-    options: UiMenuOptionType<Value>[] | undefined;
-    groupedOptions: UiMenuGroupedOption<Value>[] | undefined;
-  }): any;
+  default?: (props: {
+    checkboxAppearance: typeof checkboxAppearance;
+    checkboxSize: typeof checkboxSize;
+    iconSize: typeof iconSize;
+    imageShape: typeof imageShape;
+    listVariant: typeof listVariant;
+    options: typeof options;
+    groupedOptions: typeof groupedOptions;
+  }) => any;
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    menuClasses?: HTMLAttributes["class"];
-    options?: UiMenuOptionType<Value>[];
-    groupedOptions?: UiMenuGroupedOption<Value>[];
-    hasAutoFocus?: boolean;
-    isOpen?: boolean;
-    disabled?: boolean;
-    active?: boolean;
-    defaultTitle?: string;
-    noTitle?: boolean;
-    multiLabel?: string;
-    filterButtonSize?: "small" | "xs";
-    iconSize?: "small" | "medium" | "large";
-    iconLeft?: UiIconName | null;
-    imageShape?: "rounded" | "square";
-    checkboxSize?: "small" | "medium";
-    buttonVariant?:
-      | "blue-rounded"
-      | "white-rounded"
-      | "transparent-rounded"
-      | "blank";
-    listVariant?: "checkbox" | "selectable" | "blank";
-    listWidth?: "full" | "max";
-    checkboxColor?: "blue" | "gray";
-    hasResetOption?: boolean;
-    disabledReset?: boolean;
-    resetLabel?: string;
-    searchPlaceholder?: string;
-    hasSearch?: boolean;
-    floatingStylesActive?: boolean;
-    floatingUiPlacement?: Placement;
-    floatingUiOptions?: UseFloatingOptions | null;
-    animate?: boolean;
-    placedListClass?: string;
-    query?: string;
-  }>(),
-  {
-    isOpen: false,
-    disabled: false,
-    active: false,
-    defaultTitle: "",
-    noTitle: false,
-    multiLabel: "",
-    filterButtonSize: "small",
-    iconSize: "small",
-    iconLeft: null,
-    imageShape: "square",
-    checkboxSize: "medium",
-    buttonVariant: "white-rounded",
-    listVariant: "blank",
-    listWidth: "max",
-    checkboxColor: "blue",
-    hasResetOption: false,
-    disabledReset: true,
-    resetLabel: "",
-    searchPlaceholder: "",
-    hasSearch: false,
-    hasAutoFocus: false,
-    floatingStylesActive: true,
-    options: undefined,
-    groupedOptions: undefined,
-    menuClasses: undefined,
-    floatingUiPlacement: "bottom-start",
-    floatingUiOptions: null,
-    animate: false,
-    placedListClass: undefined,
-    query: "",
-  },
-);
+const queryModel = defineModel<string>("query", { default: "" });
+
+const {
+  options = undefined,
+  groupedOptions = undefined,
+  isOpen = false,
+  floatingUiPlacement = "bottom-start",
+  animate = false,
+
+  // Button slot
+  disabled = false,
+  active = false,
+  iconLeft = null,
+  buttonAppearance = "secondary-alt",
+  filterButtonSize = "sm",
+  defaultTitle = "",
+  multiLabel = "",
+  noTitle = false,
+
+  // Search
+  hasSearch = false,
+  searchPlaceholder = "",
+  hasAutoFocus = false,
+  hasResetOption = false,
+  resetLabel = "",
+
+  // Menu
+  iconSize = "sm",
+  imageShape = "square",
+  checkboxSize = "md",
+  checkboxAppearance = "primary",
+  listVariant = "blank",
+} = defineProps<{
+  options?: UiMenuOptionType<Value>[];
+  groupedOptions?: UiMenuGroupedOption<Value>[];
+  isOpen?: boolean;
+  floatingUiPlacement?: Placement;
+  animate?: boolean;
+
+  // Button slot
+  disabled?: boolean;
+  active?: boolean;
+  iconLeft?: UiIconName;
+  buttonAppearance?: "primary" | "secondary" | "secondary-alt" | "ghost";
+  filterButtonSize?: "sm" | "xs";
+  defaultTitle?: string;
+  multiLabel?: string;
+  noTitle?: boolean;
+
+  // Search
+  hasSearch?: boolean;
+  searchPlaceholder?: string;
+  hasAutoFocus?: boolean;
+  hasResetOption?: boolean;
+  resetLabel?: string;
+
+  // Menu
+  iconSize?: "sm" | "md" | "lg";
+  imageShape?: "rounded" | "square";
+  checkboxSize?: "sm" | "md";
+  checkboxAppearance?: "primary" | "secondary";
+  listVariant?: "checkbox" | "selectable" | "blank";
+}>();
 
 const emit = defineEmits<{
   open: [];
   close: [];
   "option-selected": [UiMenuSelectedOption<Value>];
-  input: [string];
   reset: [];
-  placed: [];
 }>();
 
-const uiMenuActivator = ref();
-const uiMenuDropdown = ref();
+const searchInputRef = useTemplateRef("search-input");
 
-const { floatingStyles, ...floatingUi } = useFloating(
-  uiMenuActivator,
-  uiMenuDropdown,
-  {
-    placement: props.floatingUiPlacement,
-    middleware: [flip(), shift()],
-    whileElementsMounted: autoUpdate,
-    ...(props.floatingUiOptions ? props.floatingUiOptions : {}),
-  },
-);
-
-watchPostEffect(() => {
-  if (floatingUi.isPositioned.value) {
-    emit("placed");
+onMounted(() => {
+  if (hasAutoFocus) {
+    searchInputRef.value?.focus();
   }
 });
 
-const selectedOptionLabel = computed((): string => {
-  const options =
-    props.options || props.groupedOptions?.map((group) => group.options).flat();
-  const selectedOptions = options?.filter((option) => option?.selected);
-  const selectedValues = [
-    ...new Set(selectedOptions?.map(({ value }) => value)),
-  ];
-  if (selectedOptions && selectedValues.length > 0) {
-    if (props.noTitle) {
-      return "";
-    }
-    if (selectedValues.length === 1) {
-      return selectedOptions[0].label;
-    } else {
-      return `${selectedValues.length} ${props.multiLabel}`;
-    }
-  }
-  return "";
-});
-
-const selectOption = (selectedOption: UiMenuOptionType<Value>): void => {
-  const options =
-    props.options || props.groupedOptions?.map((group) => group.options).flat();
-  const index = options?.findIndex(
-    (option) => option.value === selectedOption.value,
-  ) as number;
-
-  emit("option-selected", {
-    ...selectedOption,
-    index,
-  });
-};
-
-const toggleDisplay = (): void => {
-  (props.isOpen ? close : open)();
-};
-
-const close = (): void => {
-  if (props.isOpen) emit("close");
-};
-
-const open = (): void => {
-  if (!props.isOpen) emit("open");
-};
-
-const updateValue = (value: string): void => {
-  emit("input", value);
-};
-
-const handleReset = () => {
-  emit("reset");
-};
-</script>
+const processedOptions = computed<UiMenuGroupedOption<Value>[]>(
+  () => groupedOptions ?? [{ options: options ?? [] }],
+);
 
-<style scoped>
-@keyframes fade-slide-down {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -4px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
+const disabledReset = computed(() => {
+  return processedOptions.value
+    .flatMap(({ options }) => options)
+    .every((option) => !option.selected);
+});
 
-@keyframes fade-slide-right {
-  0% {
-    opacity: 0;
-    transform: translate3d(4px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
+const selectedOptionLabel = computed<string>(() => {
+  if (noTitle) {
+    return defaultTitle;
   }
-}
 
-@keyframes fade-slide-left {
-  0% {
-    opacity: 0;
-    transform: translate3d(-4px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
+  const selectedOptions = processedOptions.value
+    .flatMap((group) => group.options)
+    .filter((option) => option.selected);
 
-@keyframes fade-slide-up {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, 4px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
+  if (selectedOptions.length === 0) {
+    return defaultTitle;
   }
-}
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
+  if (selectedOptions.length === 1) {
+    return selectedOptions[0].label;
   }
-  100% {
-    opacity: 1;
-  }
-}
-
-.fade-up-enter-active {
-  animation: fade-in calc(var(--transition-duration) + 5ms);
-}
-
-.fade-up-leave-active {
-  animation: fade-in calc(var(--transition-close-duration) + 5ms);
-  animation-direction: reverse;
-}
-
-[data-side*="bottom"].fade-up-enter-active > * {
-  animation: fade-slide-up var(--transition-duration);
-}
-
-[data-side*="bottom"].fade-up-leave-active > * {
-  animation: fade-slide-up var(--transition-close-duration);
-  animation-direction: reverse;
-}
-
-[data-side*="top"].fade-up-enter-active > * {
-  animation: fade-slide-down var(--transition-duration);
-}
 
-[data-side*="top"].fade-up-leave-active > * {
-  animation: fade-slide-down var(--transition-close-duration);
-  animation-direction: reverse;
-}
-
-[data-side*="left"].fade-up-enter-active > * {
-  animation: fade-slide-left var(--transition-duration);
-}
-
-[data-side*="left"].fade-up-leave-active > * {
-  animation: fade-slide-left var(--transition-close-duration);
-  animation-direction: reverse;
-}
+  return `${selectedOptions.length} ${multiLabel}`.trim();
+});
 
-[data-side*="right"].fade-up-enter-active > * {
-  animation: fade-slide-right var(--transition-duration);
-}
+const selectOption = (selectedOption: UiMenuOptionType<Value>): void => {
+  const index = processedOptions.value
+    .flatMap((group) => group.options)
+    .findIndex(({ value }) => value === selectedOption.value);
 
-[data-side*="right"].fade-up-leave-active > * {
-  animation: fade-slide-right var(--transition-close-duration);
-  animation-direction: reverse;
-}
-</style>
+  emit("option-selected", { ...selectedOption, index });
+};
+</script>