@teammodlr/ui-kit 2.3.23 → 3.0.0-beta.4

package/src/components/select/Select.vue

@@ -1,65 +1,70 @@
 <template>
-    <div ref="selectRef" tabindex="-1">
-        <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
-            {{ label }}
-        </label>
-        <div v-if="description" :class="style.description">
-            {{ description }}
-        </div>
-
-        <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
-            :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
-            @mousedown.prevent="onSelectClick" @focusin.stop="focusSelect" :data-value="selected">
-            <div :class="selectComputedClasses">
-                <template v-if="
-                    multiple &&
-                    Array.isArray(selected) &&
-                    selected.length > 0
-                ">
-                    <MTag v-for="value in selectedMax" :key="value" :closeable="true"
-                        @close="event => removeSelected(event, value)" :size="size">
-                        {{ getSelectedLabel(value) }}
-                    </MTag>
-                    <template v-if="selectedCountNotShown > 0">
-                        <MTag :size="size">
-                            +{{ selectedCountNotShown }} more
-                        </MTag>
-                    </template>
-                </template>
-                <template v-else-if="!multiple && selected">
-                    {{ getSelectedLabel(selected) }}
-                </template>
-                <template v-else>
-                    <div :class="style.placeholder">{{ placeholder }}</div>
-                </template>
-                <span :class="selectComputedArrowClasses">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
-                </span>
+    <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
+        <div ref="selectRef" tabindex="-1">
+            <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
+                {{ label }}
+            </label>
+            <div v-if="description" :class="style.description">
+                {{ description }}
             </div>
 
-            <Teleport :to="'body'">
-                <Transition :enter-active-class="scale.enterActive" :leave-active-class="scale.leaveActive"
-                    :enter-from-class="scale.enterFrom" :leave-to-class="scale.leaveTo">
-                    <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth"
-                        :aria-hidden="isOpen ? 'false' : 'true'" :data-element="`select-menu-overlay-${id}`">
+            <PopoverTrigger as-child :disabled="disabled || loading">
+                <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
+                    :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
+                    data-m-select-trigger="true"
+                    @focus="handleTriggerFocus" @blur="handleTriggerBlur" @keydown="handleKeyDown" :data-value="selected">
+                    <div :class="selectComputedClasses">
+                        <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+                            <MTag v-for="value in selectedMax" :key="value" :closeable="true"
+                                @close="event => removeSelected(event, value)" :size="size">
+                                {{ getSelectedLabel(value) }}
+                            </MTag>
+                            <template v-if="selectedCountNotShown > 0">
+                                <MTag :size="size">
+                                    +{{ selectedCountNotShown }} more
+                                </MTag>
+                            </template>
+                        </template>
+                        <template v-else-if="!multiple && selected">
+                            {{ getSelectedLabel(selected) }}
+                        </template>
+                        <template v-else>
+                            <div :class="style.placeholder">{{ placeholder }}</div>
+                        </template>
+                        <span :class="selectComputedArrowClasses">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
+                        </span>
+                    </div>
+                </div>
+            </PopoverTrigger>
+
+            <PopoverPortal :disabled="!portal">
+                <Transition type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
+                    :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
+                    <PopoverContent
+                        v-if="isOpen"
+                        ref="popper"
+                        :class="style.menu"
+                        :style="computedConsistentWidth"
+                        side="bottom"
+                        align="start"
+                        :side-offset="5"
+                        :collision-padding="8"
+                        :disable-outside-pointer-events="false"
+                        :aria-hidden="isOpen ? 'false' : 'true'"
+                        :data-element="`select-menu-overlay-${id}`"
+                        @keydown.capture="handleKeyDown"
+                        @open-auto-focus.prevent
+                        @close-auto-focus.prevent
+                    >
                         <div v-if="searchable || (multiple && selectAll)" :class="style.search">
                             <div v-if="multiple && selectAll" :class="style.checkAll">
                                 <button role="button" type="button" :class="{
                                     [style.checkAllButton]: true,
-                                    [style.checkAllButtonActive]:
-                                        computedOptions.length > 0 &&
-                                        computedOptions.length ===
-                                        selected.length
+                                    [style.checkAllButtonActive]: computedOptions.length > 0 && computedOptions.length === selected.length
                                 }" @click.prevent="toggleAllItems" aria-description="Select all items">
-                                    <svg v-if="
-                                        computedOptions.length > 0 &&
-                                        computedOptions.length ===
-                                        selected.length
-                                    " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-                                        aria-hidden="true">
-                                        <path fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd"></path>
+                                    <svg v-if="computedOptions.length > 0 && computedOptions.length === selected.length" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
                                     </svg>
                                 </button>
                             </div>
@@ -70,42 +75,36 @@
                             <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef" :class="{
                                 [style.option]: true,
                                 [style.optionSelected]: option.active,
-                                [style.optionFocused]:
-                                    selectedIndex === index
-                            }" @click.prevent="option.onClick" @hover="selectedIndex = index"
-                                :data-element="`select-menu-option-${id}-${option.value}`"
-                            >
+                                [style.optionFocused]: selectedIndex === index
+                            }" @click.prevent="option.onClick" @mouseenter="selectedIndex = index"
+                                :data-element="`select-menu-option-${id}-${option.value}`">
                                 <span :class="style.optionIcon">
-                                    <svg v-if="option.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                                        fill="currentColor" aria-hidden="true">
-                                        <path fill-rule="evenodd"
-                                            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-                                            clip-rule="evenodd"></path>
+                                    <svg v-if="option.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
                                     </svg>
                                 </span>
-                                <span :class="style.optionLabel">{{
-                                    option.label
-                                    }}</span>
+                                <span :class="style.optionLabel">{{ option.label }}</span>
                             </div>
                             <template v-if="computedOptions.length === 0">
                                 <div :class="style.noResults">No results</div>
                             </template>
                         </div>
-                    </div>
+                    </PopoverContent>
                 </Transition>
-            </Teleport>
-        </div>
-        <div v-if="inputError" :class="style.errorMessage">
-            {{ inputError }}
+            </PopoverPortal>
+
+            <div v-if="inputError" :class="style.errorMessage">
+                {{ inputError }}
+            </div>
         </div>
-    </div>
+    </PopoverRoot>
 </template>
 
 <script lang="ts">
 import { useInput } from '../../composables/useInput';
-import { usePopper, type Placement } from '../../composables/usePopper';
 import type { MaybeArray, Size } from '../../types/props';
-import { onClickOutside, useEventListener } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import { useEventListener } from '@vueuse/core';
 import {
     computed,
     defineComponent,
@@ -113,16 +112,18 @@ import {
     ref,
     watch,
     watchEffect,
-    type PropType
+        type PropType
 } from 'vue';
 import MTag from '../tag/Tag.vue';
 import * as style from './style';
-import { scale } from '../../styles/transitions.css';
+import { fade } from '../../styles/transitions.css';
 import { useInteractive } from '../../composables/useInteractive';
 import type { OnUpdateValue, OnUpdateValueImpl } from './types';
 import { call } from "../../utils/call";
 import {useZIndex} from "../../composables/useZIndex";
 
+let shouldOpenNextFocusedSelect = false;
+
 export default defineComponent({
     name: 'MSelect',
     emits: {
@@ -197,6 +198,10 @@ export default defineComponent({
             type: Number,
             default: 5
         },
+        portal: {
+            type: Boolean,
+            default: false
+        },
         zIndex: {
             type: Number
         },
@@ -208,22 +213,28 @@ export default defineComponent({
         onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>,
     },
     components: {
-        MTag
+        MTag,
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger
     },
     setup(props, { emit, expose }) {
         const container = ref<HTMLElement | null>(null);
-        const wrapper = ref<HTMLElement>();
-        const optionsRef = ref<HTMLElement[]>();
-        const searchRef = ref<HTMLElement>();
+        const optionsRef = ref<HTMLElement[]>([]);
+        const searchRef = ref<HTMLInputElement>();
         const selectRef = ref<HTMLElement>();
+        const popper = ref<HTMLElement>();
         const selectedIndex = ref<number | undefined>(0);
         const open = ref<boolean>(false);
         const focused = ref<boolean>(false);
         const search = ref<string>('');
-        const placement = ref<Placement>('bottom-start');
-        const transfer = ref(false);
         const width = ref<number>(0);
         const keyboardNavigation = ref<boolean>(false);
+        const focusOpenedByKeyboard = ref<boolean>(false);
+        const pendingFocusDirection = ref<boolean | null>(null);
+        const restoreTriggerFocusOnClose = ref<boolean>(false);
+        const suppressOpenOnFocusOnce = ref<boolean>(false);
         const {nextZIndex} = useZIndex();
         function doUpdateValue(
             value: string | number | Array<string | number> | null,
@@ -254,14 +265,6 @@ export default defineComponent({
             formLoading
         } = useInput(props, { focus, emit, withListeners: false });
 
-        const { popper, updatePopper } = usePopper({
-            placement,
-            transfer,
-            reference: container,
-            wrapper,
-            offset: [0, 5]
-        });
-
         const disabled = computed(() => formDisabled || props.disabled);
         const loading = computed(() => formLoading || props.loading);
 
@@ -324,7 +327,7 @@ export default defineComponent({
 
             return {
                 ...styles,
-                zIndex: zIndex.value
+                zIndex: props.portal ? zIndex.value : 1
             };
         });
 
@@ -437,11 +440,16 @@ export default defineComponent({
             }
         }
 
-        function openSelect() {
+        function openSelect(forceOpen = false) {
             if (disabled.value || loading.value) {
                 return;
             }
 
+            if (forceOpen) {
+                open.value = true;
+                return;
+            }
+
             if (open.value) {
                 open.value = false;
                 return;
@@ -476,6 +484,88 @@ export default defineComponent({
             }
         }
 
+        function getFocusableElements() {
+            return Array.from(
+                document.querySelectorAll<HTMLElement>(
+                    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+                )
+            ).filter(element => {
+                return !element.matches(':disabled')
+                    && element.getAttribute('aria-disabled') !== 'true'
+                    && element.getAttribute('aria-hidden') !== 'true'
+                    && element.tabIndex >= 0
+                    && element.getClientRects().length > 0;
+            });
+        }
+
+        function getElementRef<T extends HTMLElement>(value: T | { $el?: T } | null | undefined) {
+            if (!value) {
+                return null;
+            }
+
+            if (value instanceof HTMLElement) {
+                return value;
+            }
+
+            if ('$el' in value && value.$el instanceof HTMLElement) {
+                return value.$el;
+            }
+
+            return null;
+        }
+
+        function getAdjacentFocusableElement(backwards = false) {
+            if (!container.value) {
+                return null;
+            }
+
+            const popperElement = getElementRef(popper.value);
+
+            const focusableElements = getFocusableElements();
+            const currentIndex = focusableElements.indexOf(container.value);
+
+            if (currentIndex === -1) {
+                return null;
+            }
+
+            const isInsideCurrentSelect = (element: HTMLElement) => {
+                return container.value?.contains(element)
+                    || popperElement?.contains(element)
+                    || selectRef.value?.contains(element);
+            };
+
+            let nextIndex = backwards ? currentIndex - 1 : currentIndex + 1;
+
+            while (nextIndex >= 0 && nextIndex < focusableElements.length) {
+                const nextElement = focusableElements[nextIndex];
+
+                if (!isInsideCurrentSelect(nextElement)) {
+                    return nextElement;
+                }
+
+                nextIndex += backwards ? -1 : 1;
+            }
+
+            return null;
+        }
+
+        function focusAdjacentElement(backwards = false) {
+            const nextElement = getAdjacentFocusableElement(backwards);
+
+            if (!nextElement) {
+                return;
+            }
+
+            shouldOpenNextFocusedSelect = nextElement.getAttribute('data-m-select-trigger') === 'true';
+
+            nextElement.focus();
+        }
+
+        function closeAndMoveFocus(backwards = false) {
+            pendingFocusDirection.value = backwards;
+            open.value = false;
+        }
+
         function handleOptionClick(value: string | number) {
             const option = computedOptions.value.find(
                 item => item.value === value
@@ -489,17 +579,15 @@ export default defineComponent({
                     const index = selected.value.indexOf(value);
 
                     if (index !== -1) {
-                        selected.value.splice(index, 1);
+                        selected.value = selected.value.filter(item => item !== value);
                     } else {
-                        selected.value.push(value);
-                        emit('update:modelValue', selected.value);
+                        selected.value = [...selected.value, value];
                     }
                 } else {
                     selected.value = [value];
                 }
-
-                updatePopper();
             } else {
+                restoreTriggerFocusOnClose.value = true;
                 selected.value = value;
                 open.value = false;
             }
@@ -513,13 +601,7 @@ export default defineComponent({
             }
 
             if (Array.isArray(selected.value)) {
-                const index = selected.value.indexOf(value);
-
-                if (index !== -1) {
-                    selected.value.splice(index, 1);
-                }
-
-                updatePopper();
+                selected.value = selected.value.filter(item => item !== value);
             }
         }
 
@@ -527,26 +609,58 @@ export default defineComponent({
             open.value = false;
         });
 
-        function handleKeyDown(e: Event) {
-            if (computedOptions.value.length === 0) {
-                return;
-            }
+        useEventListener('keydown', (event: KeyboardEvent) => {
+            focusOpenedByKeyboard.value = event.key === 'Tab';
+        });
+
+        useEventListener('pointerdown', () => {
+            focusOpenedByKeyboard.value = false;
+        });
 
+        function handleKeyDown(e: Event) {
             if (props.disabled) {
                 return;
             }
 
-            keyboardNavigation.value = true;
-
             const event: KeyboardEvent = e as KeyboardEvent;
 
-            switch (event.code) {
-                case 'Tab':
-                    if (open.value) {
+            if (event.key === 'Tab') {
+                if (open.value) {
+                    const activeElement = document.activeElement as HTMLElement | null;
+                    const popperElement = getElementRef(popper.value);
+                    const isFocusInsidePopup = !!activeElement && !!popperElement?.contains(activeElement);
+
+                    if (isFocusInsidePopup) {
+                        event.preventDefault();
+                        const nextElement = getAdjacentFocusableElement(event.shiftKey);
+
+                        pendingFocusDirection.value = null;
+                        restoreTriggerFocusOnClose.value = false;
+                        open.value = false;
+
+                        if (nextElement) {
+                            requestAnimationFrame(() => {
+                                shouldOpenNextFocusedSelect = nextElement.getAttribute('data-m-select-trigger') === 'true';
+
+                                nextElement.focus();
+                            });
+                        }
+                    } else {
+                        pendingFocusDirection.value = null;
+                        restoreTriggerFocusOnClose.value = false;
                         open.value = false;
                     }
-                    break;
+                }
+                return;
+            }
+
+            keyboardNavigation.value = true;
+
+            switch (event.key) {
                 case 'ArrowDown':
+                    if (computedOptions.value.length === 0) {
+                        return;
+                    }
                     e.preventDefault();
                     if (!open.value) {
                         open.value = true;
@@ -556,6 +670,9 @@ export default defineComponent({
                     getSelectedIndex(selectedIndex.value, 'down');
                     break;
                 case 'ArrowUp':
+                    if (computedOptions.value.length === 0) {
+                        return;
+                    }
                     e.preventDefault();
                     if (!open.value) {
                         return;
@@ -564,6 +681,9 @@ export default defineComponent({
                     getSelectedIndex(selectedIndex.value, 'up');
                     break;
                 case 'Enter':
+                    if (computedOptions.value.length === 0) {
+                        return;
+                    }
                     e.preventDefault();
                     e.stopPropagation();
 
@@ -572,9 +692,13 @@ export default defineComponent({
                         return;
                     }
 
-                    if (typeof selectedIndex.value !== 'undefined') {
+                    const activeIndex = typeof selectedIndex.value === 'undefined'
+                        ? 0
+                        : selectedIndex.value;
+
+                    if (computedOptions.value[activeIndex]) {
                         handleOptionClick(
-                            computedOptions.value[selectedIndex.value].value
+                            computedOptions.value[activeIndex].value
                         );
                         if (!props.multiple) {
                             open.value = false;
@@ -582,13 +706,14 @@ export default defineComponent({
                     }
                     break;
                 case 'Escape':
-                    e.preventDefault();
-                    e.stopPropagation();
-
                     if (!open.value) {
                         return;
                     }
 
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    restoreTriggerFocusOnClose.value = true;
                     open.value = false;
                     break;
             }
@@ -617,12 +742,7 @@ export default defineComponent({
         })
 
         const computedWrapperClasses = computed(() => {
-            return [
-                style.wrapper,
-                {
-                    [style.focused]: focused.value
-                }
-            ];
+            return [style.wrapper];
         });
 
         const selectComputedClasses = computed(() => {
@@ -633,10 +753,10 @@ export default defineComponent({
                         props.multiple &&
                         Array.isArray(selected.value) &&
                         selected.value.length > 0,
-                    [style.focused]: open.value,
+                    [style.focused]: open.value || focused.value,
                     // [`m-select--${props.size}`]: props.size,
                     'm-select--disabled': disabled.value || loading.value,
-                    'm-select--focused': open.value,
+                    'm-select--focused': open.value || focused.value,
                     'm-select--multiple': props.multiple,
                     'm-select--error': formError.value
                 }
@@ -654,17 +774,6 @@ export default defineComponent({
             return option[props.optionLabel];
         }
 
-        useEventListener(selectRef, 'keydown', handleKeyDown);
-        useEventListener(searchRef, 'keydown', handleKeyDown);
-
-        onClickOutside(
-            container,
-            () => {
-                open.value = false;
-            },
-            { ignore: [searchRef, popper] }
-        );
-
         watchEffect(() => {
             if (container.value && open.value) {
                 width.value = container.value.offsetWidth;
@@ -693,22 +802,46 @@ export default defineComponent({
                     zIndex.value = nextZIndex();
                 }
 
-                if (props.searchable && searchRef.value) {
+                if (value && props.searchable && searchRef.value) {
                     searchRef.value.focus();
+                } else if (value && container.value) {
+                    container.value.focus();
+                }
+
+                if (!value && restoreTriggerFocusOnClose.value && container.value) {
+                    restoreTriggerFocusOnClose.value = false;
+                    suppressOpenOnFocusOnce.value = true;
+                    requestAnimationFrame(() => {
+                        container.value?.focus();
+                    });
                 }
+
                 if (value && optionsRef.value) {
+                    const selectedValue = Array.isArray(selected.value)
+                        ? selected.value[0]
+                        : selected.value;
                     const index = computedOptions.value.findIndex(
-                        i => i.value === selected.value
+                        i => i.value === selectedValue
                     );
                     if (index !== -1) {
                         optionsRef.value[index].scrollIntoView({
                             block: 'nearest'
                         });
                         selectedIndex.value = index;
+                    } else if (computedOptions.value.length > 0) {
+                        selectedIndex.value = 0;
                     }
                 }
 
                 keyboardNavigation.value = false;
+
+                if (!value && pendingFocusDirection.value !== null) {
+                    const backwards = pendingFocusDirection.value;
+                    pendingFocusDirection.value = null;
+                    requestAnimationFrame(() => {
+                        focusAdjacentElement(backwards);
+                    });
+                }
             });
         });
 
@@ -727,20 +860,33 @@ export default defineComponent({
             return open.value;
         });
 
-        const focusSelect = (event: FocusEvent) => {
-            setTimeout(() => {
-                if (selectRef.value && !open.value) {
-                    openSelect();
-                }
-            }, 10);
+        const handleOpenChange = (value: boolean) => {
+            open.value = value;
         };
 
-        const onSelectClick = (event: MouseEvent) => {
-            event.preventDefault();
-            event.stopPropagation();
+        const handleTriggerFocus = () => {
+            focused.value = true;
+
+            if (suppressOpenOnFocusOnce.value) {
+                suppressOpenOnFocusOnce.value = false;
+                return;
+            }
+
+            const shouldOpenFromFocus = focusOpenedByKeyboard.value || shouldOpenNextFocusedSelect;
+
+            shouldOpenNextFocusedSelect = false;
+
+            if (!shouldOpenFromFocus || open.value) {
+                return;
+            }
+
             openSelect();
         };
 
+        const handleTriggerBlur = () => {
+            focused.value = false;
+        };
+
         expose({
             focus,
             blur
@@ -752,8 +898,10 @@ export default defineComponent({
             searchRef,
             selectRef,
             popper,
-            focusSelect,
-            onSelectClick,
+            handleTriggerFocus,
+            handleTriggerBlur,
+            handleKeyDown,
+            handleOpenChange,
 
             id,
             isOpen,
@@ -779,7 +927,7 @@ export default defineComponent({
             inputListeners,
             style,
             focused,
-            scale,
+            fade,
             toggleAllItems
         };
     }