feat: Rewrite arrow navigation, add support for multi-calendars, start focus from an active element. (resolves #1086,#1118)

Author: Jasenkoo

docs/props/general-configuration/index.md

@@ -1050,6 +1050,17 @@ Sets the menu position on the page center, useful for smaller screens where ther
 
 Navigate the menu via arrow keys
 
+:::tip
+If you wish to integrate arrow navigation within slots, you can set the following attributes:
+
+- `:data-dp-action-element="{level}"` - Set on the element that can receive focus
+- `:data-dp-element-active="{level}"` - (optional) Set on the element that can have active state. If present, focus starts from the active element
+
+Available levels: `0 | 1 | 2`
+
+Levels indicate level in the menu hierarchy. On the initial menu level, you are on level `0`. If you open an overlay, you are on level `1`. If overlay has another overlay (e.g. hours/minutes), you are on level `2`.
+:::
+
 <GlobalDemo :arrow-navigation="true"></GlobalDemo>
 
 ::: details Code Example

src/VueDatePicker/VueDatePicker.vue

@@ -91,7 +91,6 @@
     import {
         useExternalInternalMapper,
         useSlotsMapper,
-        useArrowNavigation,
         useTransitions,
         useValidation,
         useResponsive,
@@ -108,7 +107,6 @@
         rootProps,
         defaults: { inline, config, textInput, range, multiDates, teleport, floatingConfig },
     } = useContext();
-    const { clearArrowNav } = useArrowNavigation();
     const { validateDate, isValidTime } = useValidation();
     const { menuTransition, showTransition } = useTransitions();
     const { isMobile } = useResponsive();
@@ -348,7 +346,6 @@
                 isOpen.value = false;
                 setState('menuFocused', false);
                 setState('shiftKeyInMenu', false);
-                clearArrowNav();
                 rootEmit('closed');
                 if (inputValue.value) {
                     parseExternalModelValue(modelValueRef.value);

src/VueDatePicker/components/ActionRow.vue

@@ -30,6 +30,7 @@
                         v-if="!inline.enabled && actionRow.showCancel"
                         ref="cancel-btn"
                         type="button"
+                        data-dp-action-element="0"
                         class="dp__action_button dp__action_cancel"
                         @click="$emit('close-picker')"
                         @keydown="checkKeyDown($event, () => $emit('close-picker'))"
@@ -39,6 +40,7 @@
                     <button
                         v-if="actionRow.showNow"
                         type="button"
+                        data-dp-action-element="0"
                         class="dp__action_button dp__action_cancel"
                         @click="$emit('select-now')"
                         @keydown="checkKeyDown($event, () => $emit('select-now'))"
@@ -49,6 +51,7 @@
                         v-if="actionRow.showSelect"
                         ref="select-btn"
                         type="button"
+                        data-dp-action-element="0"
                         class="dp__action_button dp__action_select"
                         :disabled="boolHtmlAttribute(disabled)"
                         data-test-id="select-button"
@@ -65,9 +68,8 @@
 
 <script lang="ts" setup>
     import { computed, onUnmounted, onMounted, ref, useTemplateRef } from 'vue';
-    import { unrefElement } from '@vueuse/core';
 
-    import { useArrowNavigation, useContext, useFormatter, useHelperFns, useValidation, useUtils } from '@/composables';
+    import { useContext, useFormatter, useHelperFns, useValidation, useUtils } from '@/composables';
 
     interface ActionRowEmits {
         'close-picker': [];
@@ -95,23 +97,17 @@
     } = useContext();
 
     const { isTimeValid, isMonthValid } = useValidation();
-    const { buildMatrix } = useArrowNavigation();
     const { formatPreview } = useFormatter();
     const { checkKeyDown, convertType } = useHelperFns();
     const { boolHtmlAttribute } = useUtils();
 
-    const cancelButtonRef = useTemplateRef('cancel-btn');
-    const selectButtonRef = useTemplateRef('select-btn');
     const actionBtnContainer = useTemplateRef('action-buttons-container');
     const actionRowRef = useTemplateRef('action-row');
 
     const showPreview = ref(false);
     const previewStyle = ref<any>({});
 
     onMounted(() => {
-        if (rootProps.arrowNavigation) {
-            buildMatrix([unrefElement(cancelButtonRef), unrefElement(selectButtonRef)] as HTMLElement[], 'actionRow');
-        }
         getPreviewAvailableSpace();
         globalThis.addEventListener('resize', getPreviewAvailableSpace);
     });

src/VueDatePicker/components/Common/ArrowBtn.vue

@@ -3,6 +3,7 @@
         ref="arrow-btn"
         type="button"
         :data-dp-element="elName"
+        data-dp-action-element="0"
         class="dp__btn dp--arrow-btn-nav"
         tabindex="0"
         :aria-label="ariaLabel"
@@ -17,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { onMounted, type Ref, useTemplateRef } from 'vue';
+    import { type Ref } from 'vue';
     import { useHelperFns } from '@/composables';
 
     const { checkKeyDown } = useHelperFns();
@@ -32,8 +33,4 @@
         elName?: string;
         disabled?: boolean;
     }>();
-
-    const elRef = useTemplateRef('arrow-btn');
-
-    onMounted(() => emit('set-ref', elRef));
 </script>

src/VueDatePicker/components/Common/SelectionOverlay.vue

@@ -28,13 +28,14 @@
                     :class="{ dp__flex_row: items.length >= 3 }"
                 >
                     <div
-                        v-for="(col, ind) in row"
+                        v-for="col in row"
                         :key="col.value"
-                        :ref="(el) => assignRef(el, col, i, ind)"
                         role="gridcell"
                         :class="cellClassName"
                         :aria-selected="col.active || undefined"
                         :aria-disabled="col.disabled || undefined"
+                        :data-dp-action-element="level ?? 1"
+                        :data-dp-element-active="col.active ? (level ?? 1) : undefined"
                         tabindex="0"
                         :data-test-id="col.text"
                         @click.prevent="onClick(col)"
@@ -57,6 +58,7 @@
             :aria-label="ariaLabels?.toggleOverlay"
             :class="actionButtonClass"
             tabindex="0"
+            :data-dp-action-element="level ?? 1"
             @click="toggle"
             @keydown="onBtnKeyDown"
         >
@@ -69,14 +71,12 @@
     import { computed, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
     import { unrefElement } from '@vueuse/core';
 
-    import { useArrowNavigation, useContext, useHelperFns } from '@/composables';
+    import { useContext, useHelperFns } from '@/composables';
     import { useNavigationDisplay } from '@/components/shared/useNavigationDisplay.ts';
 
     import { EventKey } from '@/constants';
     import type { DynamicClass, OverlayGridItem, PickerSection } from '@/types';
 
-    const { setSelectionGrid, buildMultiLevelMatrix, setMonthPicker } = useArrowNavigation();
-
     const emit = defineEmits<{
         selected: [value: number];
         toggle: [];
@@ -87,76 +87,42 @@
     const props = defineProps<{
         items: OverlayGridItem[][];
         type: PickerSection;
-        isLast: boolean;
-        skipButtonRef?: boolean;
-        headerRefs?: (HTMLElement | null)[];
         useRelative?: boolean;
         height?: number | string;
-        noOverlayFocus?: boolean;
-        focusValue?: number;
-        menuWrapRef?: HTMLElement | null;
         overlayLabel?: string;
+        isLast: boolean;
+        level?: 0 | 1 | 2;
     }>();
 
     const {
-        rootProps,
-        defaults: { ariaLabels, textInput, config },
+        setState,
+        defaults: { ariaLabels, config },
     } = useContext();
     const { hideNavigationButtons } = useNavigationDisplay();
-    const { handleEventPropagation, convertType, checkKeyDown, checkStopPropagation, getElWithin, findFocusableEl } =
-        useHelperFns();
+    const { handleEventPropagation, checkKeyDown } = useHelperFns();
 
     const toggleButton = useTemplateRef('toggle-button');
     const containerRef = useTemplateRef('overlay-container');
     const gridWrapRef = useTemplateRef('grid-wrap');
 
     const scrollable = ref(false);
     const selectionActiveRef = ref<HTMLElement | null>(null);
-    const elementRefs = ref<Array<HTMLElement | null>[]>([]);
     const hoverValue = ref();
     const containerHeight = ref(0);
 
     onBeforeUpdate(() => {
         selectionActiveRef.value = null;
     });
 
-    /**
-     * On mounted hook, set the scroll position, if any to a selected value when opening overlay
-     */
-    onMounted(() => {
-        nextTick().then(() => setContainerHeightAndScroll());
-        if (!props.noOverlayFocus) {
-            focusGrid();
-        }
-        handleArrowNav(true);
+    onMounted(async () => {
+        await nextTick();
+        setContainerHeightAndScroll();
+        setState('arrowNavigationLevel', props.level ?? 1);
     });
 
-    onUnmounted(() => handleArrowNav(false));
-
-    const handleArrowNav = (value: boolean): void => {
-        if (rootProps.arrowNavigation) {
-            if (props.headerRefs?.length) {
-                setMonthPicker(value);
-            } else {
-                setSelectionGrid(value);
-            }
-        }
-    };
-
-    const focusGrid = (): void => {
-        const elm = unrefElement(gridWrapRef);
-        if (elm) {
-            if (!textInput.value.enabled) {
-                if (selectionActiveRef.value) {
-                    selectionActiveRef.value?.focus({ preventScroll: true });
-                } else {
-                    elm.focus({ preventScroll: true });
-                }
-            }
-
-            scrollable.value = elm.clientHeight < elm.scrollHeight;
-        }
-    };
+    onUnmounted(() => {
+        setState('arrowNavigationLevel', (props.level ?? 1) - 1);
+    });
 
     // Dynamic class  for the overlay
     const dpOverlayClass = computed(
@@ -202,7 +168,7 @@
 
     const setContainerHeightAndScroll = (setScroll = true) => {
         nextTick().then(() => {
-            const el = unrefElement(selectionActiveRef);
+            const el = document.querySelector<HTMLElement>(`[data-dp-element-active="${props.level ?? 1}"]`);
             const parent = unrefElement(gridWrapRef);
             const btn = unrefElement(toggleButton);
             const container = unrefElement(containerRef);
@@ -245,72 +211,21 @@
         }
     };
 
-    const assignRef = (el: any, col: OverlayGridItem, rowInd: number, colInd: number): void => {
-        if (el) {
-            if (col.active || col.value === props.focusValue) {
-                selectionActiveRef.value = el;
-            }
-            if (rootProps.arrowNavigation) {
-                if (Array.isArray(elementRefs.value[rowInd])) {
-                    elementRefs.value[rowInd][colInd] = el;
-                } else {
-                    elementRefs.value[rowInd] = [el];
-                }
-                buildMatrix();
-            }
-        }
-    };
-
-    const buildMatrix = () => {
-        const refs = props.headerRefs?.length
-            ? [props.headerRefs].concat(elementRefs.value)
-            : elementRefs.value.concat([props.skipButtonRef ? [] : [toggleButton.value]]);
-
-        buildMultiLevelMatrix(convertType(refs), props.headerRefs?.length ? 'monthPicker' : 'selectionGrid');
-    };
-
-    const handleArrowKey = (ev: KeyboardEvent) => {
-        if (rootProps.arrowNavigation) return;
-        checkStopPropagation(ev, config.value, true);
-    };
-
     const setHoverValue = (val: number) => {
         hoverValue.value = val;
         emit('hover-value', val);
     };
 
-    const onTab = () => {
-        toggle();
-        if (!props.isLast) {
-            const actionRow = getElWithin(props.menuWrapRef ?? null, 'action-row');
-            if (actionRow) {
-                const focusable = findFocusableEl(actionRow);
-                focusable?.focus();
-            }
-        }
-    };
-
     const onKeyDown = (ev: KeyboardEvent) => {
         switch (ev.key) {
             case EventKey.esc:
                 return handleEsc(ev);
-            case EventKey.arrowLeft:
-                return handleArrowKey(ev);
-            case EventKey.arrowRight:
-                return handleArrowKey(ev);
-            case EventKey.arrowUp:
-                return handleArrowKey(ev);
-            case EventKey.arrowDown:
-                return handleArrowKey(ev);
             default:
                 return;
         }
     };
 
     const onBtnKeyDown = (ev: KeyboardEvent) => {
         if (ev.key === EventKey.enter) return toggle();
-        if (ev.key === EventKey.tab) return onTab();
     };
-
-    defineExpose({ focusGrid });
 </script>

src/VueDatePicker/components/DatePicker/DatePicker.vue

@@ -107,7 +107,6 @@
         assignMonthAndYear,
         setStartTime,
     } = useDatePicker(props, emit, triggerCalendarTransition, updateFlowStep);
-
     const slots = useSlots();
     const { setHoverDate, getDayClassData, clearHoverDate } = useCalendarClass();
     const {

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -45,6 +45,8 @@
                             :aria-label="ariaLabels?.day?.(dayVal)"
                             :tabindex="!dayVal.current && rootProps.hideOffsetDates ? undefined : 0"
                             :data-test-id="getCellId(dayVal.value)"
+                            :data-dp-element-active="!!dayVal.classData.dp__active_date ? 0 : undefined"
+                            data-dp-action-element="0"
                             @click.prevent="onDateSelect($event, dayVal)"
                             @touchend="onDateSelect($event, dayVal, false)"
                             @keydown="checkKeyDown($event, () => $emit('select-date', dayVal))"
@@ -118,7 +120,7 @@
     import { unrefElement, useSwipe } from '@vueuse/core';
     import { getISOWeek, getWeek, set, type Day, startOfWeek, endOfWeek, eachDayOfInterval } from 'date-fns';
 
-    import { useArrowNavigation, useHelperFns, useDateUtils, useContext, useFormatter } from '@/composables';
+    import { useHelperFns, useDateUtils, useContext, useFormatter } from '@/composables';
 
     import type { UnwrapRef } from 'vue';
     import type { CalendarDay, CalendarWeek, DynamicClass, Marker } from '@/types';
@@ -148,7 +150,6 @@
         rootProps,
         defaults: { transitions, config, ariaLabels, multiCalendars, weekNumbers, multiDates, ui },
     } = useContext();
-    const { buildMultiLevelMatrix } = useArrowNavigation();
     const { isDateAfter, isDateEqual, resetDateTime, getCellId } = useDateUtils();
     const { checkKeyDown, checkStopPropagation, isTouchDevice } = useHelperFns();
     const { formatWeekDay } = useFormatter();
@@ -319,9 +320,6 @@
                 dayRefs.value[weekInd] = [el];
             }
         }
-        if (rootProps.arrowNavigation) {
-            buildMultiLevelMatrix(dayRefs.value, 'calendar');
-        }
     };
 
     const onScroll = (ev: WheelEvent) => {