@mozaic-ds/vue 2.19.2 → 2.20.0

package/src/components/optionListbox/MOptionListbox.spec.ts

@@ -1,4 +1,13 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  afterAll,
+  beforeEach,
+  afterEach,
+} from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import MOptionListbox from './MOptionListbox.vue';
@@ -68,6 +77,34 @@ const optionsWithSections: ListboxOption[] = [
   { label: 'Carrot', value: 'carrot' },
 ];
 
+let originalScrollIntoViewDescriptor: PropertyDescriptor | undefined;
+const scrollIntoViewMock = vi.fn();
+
+beforeAll(() => {
+  originalScrollIntoViewDescriptor = Object.getOwnPropertyDescriptor(
+    HTMLElement.prototype,
+    'scrollIntoView',
+  );
+
+  Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+    configurable: true,
+    value: scrollIntoViewMock,
+  });
+});
+
+afterAll(() => {
+  if (originalScrollIntoViewDescriptor) {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'scrollIntoView',
+      originalScrollIntoViewDescriptor,
+    );
+  } else {
+    delete (HTMLElement.prototype as { scrollIntoView?: unknown })
+      .scrollIntoView;
+  }
+});
+
 function mountListbox(props: Record<string, unknown> = {}): VueWrapper {
   return mount(MOptionListbox, {
     props: {
@@ -389,6 +426,7 @@ describe('MOptionListbox – search / filtering', () => {
 describe('MOptionListbox – keyboard navigation', () => {
   beforeEach(() => {
     vi.useFakeTimers();
+    scrollIntoViewMock.mockClear();
   });
 
   afterEach(() => {
@@ -455,6 +493,21 @@ describe('MOptionListbox – keyboard navigation', () => {
     expect(wrapper.emitted('open')).toBeDefined();
   });
 
+  it('ArrowDown when closed sets activeIndex to selected option', async () => {
+    const wrapper = mountListbox({
+      search: true,
+      open: false,
+      modelValue: 'banana',
+    });
+    const input = wrapper.find('input');
+
+    await input.trigger('keydown', { key: 'ArrowDown' });
+    await nextTick();
+
+    const items = wrapper.findAll('.mc-option-listbox__item');
+    expect(items[1].classes()).toContain('mc-option-listbox__item--active');
+  });
+
   it('ArrowUp when closed emits open and sets activeIndex to last item', async () => {
     const wrapper = mountListbox({ search: true, open: false });
     const input = wrapper.find('input');
@@ -474,6 +527,30 @@ describe('MOptionListbox – keyboard navigation', () => {
     const items = wrapper.findAll('.mc-option-listbox__item');
     expect(items[2].classes()).toContain('mc-option-listbox__item--active');
   });
+
+  it('scrolls the active option into view during ArrowDown navigation', async () => {
+    const wrapper = mountListbox({ search: true, open: true });
+    const input = wrapper.find('input');
+
+    await input.trigger('keydown', { key: 'ArrowDown' });
+    await nextTick();
+
+    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+    expect(scrollIntoViewMock).toHaveBeenCalledWith({
+      block: 'nearest',
+      inline: 'nearest',
+    });
+  });
+
+  it('does not scroll active option when listbox is closed', async () => {
+    const wrapper = mountListbox({ search: true, open: false });
+    const input = wrapper.find('input');
+
+    await input.trigger('keydown', { key: 'ArrowDown' });
+    await nextTick();
+
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+  });
 });
 
 describe('MOptionListbox – exposed API', () => {

package/src/components/optionListbox/MOptionListbox.types.ts

@@ -0,0 +1,7 @@
+export type ListboxOption = {
+  label: string;
+  content?: string;
+  value?: string | number;
+  disabled?: boolean;
+  type?: 'option' | 'section';
+};

package/src/components/optionListbox/MOptionListbox.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="listboxEl"
-    class="mc-option-listbox mc-listbox__content mc-combobox__listbox"
-  >
+  <div ref="listboxEl" class="mc-option-listbox">
     <template v-if="search">
       <div class="mc-option-listbox__search">
         <MTextInput
@@ -42,6 +39,7 @@
     </template>
 
     <ul
+      ref="optionsList"
       class="mc-option-listbox__list"
       role="listbox"
       :id="`listbox-${id}`"
@@ -128,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, watch, type VNode } from 'vue';
+import { ref, useTemplateRef, watch, type VNode } from 'vue';
 import MButton from '../button/MButton.vue';
 import MTextInput from '../textinput/MTextInput.vue';
 import {
@@ -137,34 +135,16 @@ import {
   Less20,
   Check20,
 } from '@mozaic-ds/icons-vue';
+import { debounce } from '../../utils/debounce';
+import { useListboxSelection } from './use-listbox-selection.composable';
+import { useListboxNavigation } from './use-listbox-navigation.composable';
+import type { ListboxOption } from './MOptionListbox.types';
 
-function debounce<T extends (...args: unknown[]) => unknown>(
-  fn: T,
-  wait: number,
-): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  return function (this: unknown, ...args: Parameters<T>) {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      fn.apply(this, args);
-    }, wait);
-  };
-}
+export type { ListboxOption };
 
 /**
  * An Option Listbox is a customizable, accessible listbox component designed to power dropdowns and comboboxes with advanced selection capabilities. It supports single or multiple selection, optional search, grouped options with section headers, and full keyboard navigation.
  */
-export type ListboxOption = {
-  label: string;
-  content?: string;
-  value?: string | number;
-  disabled?: boolean;
-  type?: 'option' | 'section';
-};
-
 const props = withDefaults(
   defineProps<{
     /**
@@ -249,28 +229,35 @@ defineSlots<{
 }>();
 
 const listboxEl = useTemplateRef('listboxEl');
+const optionsList = useTemplateRef('optionsList');
 const textInput = useTemplateRef('textInput');
 
-const activeIndex = ref<number>(-1);
-
 const searchText = ref('');
-
 const filteredResults = ref<ListboxOption[]>(props.options);
 
-const selection = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value: string | number | null | (string | number)[]) {
-    emit('update:modelValue', value);
-  },
-});
+const {
+  isSelectable,
+  isOptionSelected,
+  isSectionSelected,
+  isIndeterminate,
+  toggleValue,
+  toggleSection,
+  selectAll,
+  clearSelection,
+} = useListboxSelection(props, emit);
 
-const activeDescendantId = computed(() => {
-  return activeIndex.value >= 0
-    ? `option-${props.id}-${activeIndex.value}`
-    : undefined;
-});
+const { activeIndex, activeDescendantId, handleKeydown } = useListboxNavigation(
+  props,
+  (on) => (on === 'open' ? emit('open') : emit('close')),
+  {
+    filteredResults,
+    optionsList,
+    isSelectable,
+    isOptionSelected,
+    toggleValue,
+    toggleSection,
+  },
+);
 
 const updateFilteredResults = debounce(() => {
   const search = searchText.value.toLowerCase().trim();
@@ -287,179 +274,6 @@ const updateFilteredResults = debounce(() => {
   activeIndex.value = filteredResults.value.length ? 0 : -1;
 }, 200);
 
-const sectionMap = computed(() => {
-  const map = new Map<string, ListboxOption[]>();
-  let currentSection: ListboxOption | null = null;
-
-  props.options.forEach((option) => {
-    if (option.type === 'section') {
-      currentSection = option;
-      map.set(currentSection?.value?.toString() || currentSection.label, []);
-    } else if (currentSection) {
-      map
-        .get(currentSection?.value?.toString() || currentSection.label)!
-        .push(option);
-    }
-  });
-
-  return map;
-});
-
-function toggleSection(item: ListboxOption) {
-  if (!props.checkableSections || !props.multiple) return;
-
-  const sectionItems =
-    sectionMap.value.get(item.value?.toString() || item.label) || [];
-  const selectedItems = selection.value as (string | number)[];
-
-  if (isSectionSelected(item)) {
-    selection.value = selectedItems.filter(
-      (opt) => !sectionItems.find((item) => item.value === opt),
-    );
-  } else {
-    selection.value = [
-      ...selectedItems,
-      ...sectionItems
-        .filter((opt) => !selectedItems.includes(opt.value!))
-        .map((item) => item.value!),
-    ];
-  }
-}
-
-function toggleValue(item?: ListboxOption) {
-  if (!item || !isSelectable(item)) return;
-
-  if (Array.isArray(selection.value)) {
-    if (isOptionSelected(item)) {
-      selection.value = (selection.value as (string | number)[]).filter(
-        (el) => el !== item.value,
-      );
-    } else {
-      selection.value = [...selection.value, item.value!];
-    }
-  } else {
-    selection.value = isOptionSelected(item) ? null : item.value!;
-  }
-}
-
-function selectAll() {
-  selection.value = [
-    ...props.options
-      .filter(
-        (option) =>
-          !!option.value && !option.disabled && option.type !== 'section',
-      )
-      .map((item) => item.value!),
-  ];
-}
-
-function clearSelection() {
-  if (Array.isArray(selection.value)) {
-    selection.value = [];
-  } else {
-    selection.value = null;
-  }
-}
-
-function isSelectable(item: ListboxOption) {
-  return (
-    (item.type !== 'section' && !item.disabled) ||
-    (item.type === 'section' && props.checkableSections && props.multiple)
-  );
-}
-
-function isSectionSelected(item: ListboxOption) {
-  if (!props.checkableSections || !props.multiple) return false;
-
-  const sectionItems =
-    sectionMap.value.get(item.value?.toString() || item.label) || [];
-  const selectedItems = selection.value as (string | number)[];
-
-  return sectionItems.every((opt) => selectedItems.includes(opt.value!));
-}
-
-function isOptionSelected(item: ListboxOption) {
-  if (!item.value) return false;
-
-  if (Array.isArray(selection.value)) {
-    return (selection.value as (string | number)[])?.includes(item.value!);
-  } else {
-    return item.value === selection.value;
-  }
-}
-
-function isIndeterminate(item: ListboxOption) {
-  const section = sectionMap.value.get(item.value?.toString() || item.label);
-  return (
-    section?.some((option) => isOptionSelected(option)) &&
-    !section?.every((option) => isOptionSelected(option))
-  );
-}
-
-function moveActive(delta: number) {
-  if (!props.open || filteredResults.value.length === 0) return;
-
-  let nextIndex = activeIndex.value + delta;
-
-  if (nextIndex < 0) nextIndex = filteredResults.value.length - 1;
-  if (nextIndex >= filteredResults.value.length) nextIndex = 0;
-
-  while (!isSelectable(filteredResults.value[nextIndex])) {
-    nextIndex += delta > 0 ? 1 : -1;
-    if (nextIndex < 0) nextIndex = filteredResults.value.length - 1;
-    if (nextIndex >= filteredResults.value.length) nextIndex = 0;
-  }
-
-  activeIndex.value = nextIndex;
-}
-
-function selectActive() {
-  const item = filteredResults.value[activeIndex.value];
-  if (!item || !isSelectable(item)) return;
-
-  if (item.type === 'section') {
-    toggleSection(item);
-  } else {
-    toggleValue(item);
-  }
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  switch (event.key) {
-    case 'ArrowDown':
-      event.preventDefault();
-      if (!props.open) {
-        emit('open');
-        activeIndex.value = 0;
-      } else {
-        moveActive(1);
-      }
-      break;
-    case 'ArrowUp':
-      event.preventDefault();
-      if (!props.open) {
-        emit('open');
-        activeIndex.value = filteredResults.value.length - 1;
-      } else {
-        moveActive(-1);
-      }
-      break;
-    case 'Enter':
-      event.preventDefault();
-      if (!props.open) {
-        emit('open');
-        activeIndex.value = 0;
-      } else {
-        selectActive();
-      }
-      break;
-    case 'Escape':
-      event.preventDefault();
-      emit('close');
-      break;
-  }
-}
-
 watch(
   () => props.open,
   (v) => {

package/src/components/optionListbox/README.md

@@ -53,11 +53,13 @@ style MOptionListbox fill:#008240,stroke:#333,stroke-width:4px
 ### Used By
 
 - [MCombobox](../combobox)
+- [MPageHeaderContext](../pageheadercontext)
 
 ### Graph
 
 ```mermaid
 graph TD;
   MCombobox --> MOptionListbox
+  MPageHeaderContext --> MOptionListbox
 style MOptionListbox fill:#008240,stroke:#333,stroke-width:4px
 ```

package/src/components/optionListbox/use-listbox-navigation.composable.ts

@@ -0,0 +1,147 @@
+import { computed, nextTick, ref, watch, type Ref, type ShallowRef } from 'vue';
+import type { ListboxOption } from './MOptionListbox.types';
+
+type Props = {
+  open?: boolean;
+  id: string;
+};
+
+type Deps = {
+  filteredResults: Ref<ListboxOption[]>;
+  optionsList: Readonly<ShallowRef<HTMLElement | null>>;
+  isSelectable: (item: ListboxOption) => boolean;
+  isOptionSelected: (item: ListboxOption) => boolean;
+  toggleValue: (item: ListboxOption) => void;
+  toggleSection: (item: ListboxOption) => void;
+};
+
+export function useListboxNavigation(
+  props: Props,
+  emit: (on: 'open' | 'close') => void,
+  deps: Deps,
+) {
+  const activeIndex = ref<number>(-1);
+
+  const activeDescendantId = computed(() =>
+    activeIndex.value >= 0
+      ? `option-${props.id}-${activeIndex.value}`
+      : undefined,
+  );
+
+  function moveActive(delta: number) {
+    if (!props.open || deps.filteredResults.value.length === 0) return;
+
+    const total = deps.filteredResults.value.length;
+    let nextIndex = activeIndex.value;
+    for (let i = 0; i < total; i++) {
+      nextIndex += delta;
+      if (nextIndex < 0) nextIndex = total - 1;
+      if (nextIndex >= total) nextIndex = 0;
+      if (deps.isSelectable(deps.filteredResults.value[nextIndex])) {
+        activeIndex.value = nextIndex;
+        return;
+      }
+    }
+  }
+
+  function getFirstSelectableIndex() {
+    return deps.filteredResults.value.findIndex((item) =>
+      deps.isSelectable(item),
+    );
+  }
+
+  function getLastSelectableIndex() {
+    for (let i = deps.filteredResults.value.length - 1; i >= 0; i--) {
+      if (deps.isSelectable(deps.filteredResults.value[i])) return i;
+    }
+    return -1;
+  }
+
+  function getSelectedOptionIndex() {
+    return deps.filteredResults.value.findIndex(
+      (item) =>
+        item.type !== 'section' &&
+        deps.isSelectable(item) &&
+        deps.isOptionSelected(item),
+    );
+  }
+
+  function getInitialActiveIndex(direction: 'forward' | 'backward') {
+    const selectedIndex = getSelectedOptionIndex();
+
+    if (selectedIndex >= 0) return selectedIndex;
+
+    return direction === 'backward'
+      ? getLastSelectableIndex()
+      : getFirstSelectableIndex();
+  }
+
+  function selectActive() {
+    const item = deps.filteredResults.value[activeIndex.value];
+    if (!item || !deps.isSelectable(item)) return;
+
+    if (item.type === 'section') {
+      deps.toggleSection(item);
+    } else {
+      deps.toggleValue(item);
+    }
+  }
+
+  function scrollActiveOptionIntoView() {
+    if (!props.open || activeIndex.value < 0) return;
+
+    const activeOption = deps.optionsList.value?.querySelector<HTMLElement>(
+      `#option-${props.id}-${activeIndex.value}`,
+    );
+
+    activeOption?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!props.open) {
+          emit('open');
+          activeIndex.value = getInitialActiveIndex('forward');
+        } else {
+          moveActive(1);
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!props.open) {
+          emit('open');
+          activeIndex.value = getInitialActiveIndex('backward');
+        } else {
+          moveActive(-1);
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (!props.open) {
+          emit('open');
+          activeIndex.value = getInitialActiveIndex('forward');
+        } else {
+          selectActive();
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        emit('close');
+        break;
+    }
+  }
+
+  watch([activeIndex, () => props.open], async ([index, isOpen]) => {
+    if (!isOpen || index < 0) return;
+    await nextTick();
+    scrollActiveOptionIntoView();
+  });
+
+  return {
+    activeIndex,
+    activeDescendantId,
+    handleKeydown,
+  };
+}