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

package/src/components/modal/Modal.vue

@@ -1,66 +1,98 @@
 <template>
-    <Teleport :to="'body'">
-        <TransitionGroup type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
-            :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
-            <div :class="style.mask" :style="{ zIndex: zIndex }" v-if="isOpen"></div>
-            <div tabIndex="-1" v-if="isOpen" @keydown="onWrapperKeyDown" ref="wrapperRef" role="dialog"
-                :class="computedWrapperClasses" :style="computedWrapperStyles" @click="onOutsideClick">
-                <!--                    <Transition-->
-                <!--                        type="animation"-->
-                <!--                        :enter-active-class="modalScale.enterActive"-->
-                <!--                        :leave-active-class="modalScale.leaveActive"-->
-                <!--                        :enter-from-class="modalScale.enterFrom"-->
-                <!--                        :leave-to-class="modalScale.leaveTo">-->
-                <div :class="computedModalClasses" role="document" v-bind="$attrs" :style="contentStyleRef">
-                    <div :class="computedContainerClasses" @mousedown="onContentMouseDown" @mouseup="onContentMouseUp"
-                        ref="target">
-                        <template v-if="loading">
-                            <slot name="loading"> Loading...</slot>
-                        </template>
-                        <template v-else>
-                            <div :class="style.sidebar" v-if="hasSidebar">
-                                <slot name="sidebar"></slot>
-                            </div>
-                            <div :class="style.content">
-                                <div v-if="title || showClose" :class="style.header">
-                                    <div :class="style.title" v-if="title">
-                                        <div>{{ title }}</div>
+    <DialogRoot :open="isOpen" modal @update:open="handleOpenChange">
+        <DialogPortal to="body">
+            <Transition appear type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
+                <DialogOverlay v-if="isOpen" force-mount :class="style.mask" :style="{ zIndex }" />
+            </Transition>
+            <Transition appear type="animation" :enter-active-class="modalScale.enterActive" :leave-active-class="modalScale.leaveActive"
+                :enter-from-class="modalScale.enterFrom" :leave-to-class="modalScale.leaveTo">
+                <div tabIndex="-1" v-if="isOpen" ref="wrapperRef"
+                    :class="computedWrapperClasses" :style="computedWrapperStyles">
+                    <DialogContent
+                        force-mount
+                        :class="computedModalClasses"
+                        v-bind="$attrs"
+                        :style="contentStyleRef"
+                        :disable-outside-pointer-events="true"
+                        @open-auto-focus="handleOpenAutoFocus"
+                        @escape-key-down="onEscapeKeyDown"
+                        @pointer-down-outside="onPointerDownOutside"
+                        @interact-outside="onInteractOutside"
+                    >
+                        <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                            <div :class="computedContainerClasses" ref="target">
+                                <template v-if="loading">
+                                    <slot name="loading"> Loading...</slot>
+                                </template>
+                                <template v-else>
+                                    <div :class="style.sidebar" v-if="hasSidebar">
+                                        <slot name="sidebar"></slot>
+                                    </div>
+                                    <div :class="style.content">
+                                        <div v-if="title || showClose" :class="style.header">
+                                            <DialogTitle as-child v-if="title">
+                                                <div :class="style.title">
+                                                    <div>{{ title }}</div>
+                                                </div>
+                                            </DialogTitle>
+                                        </div>
+                                        <DialogClose as-child v-if="showClose">
+                                            <button :class="style.close"></button>
+                                        </DialogClose>
+                                        <div :class="style.body" ref="bodyRef">
+                                            <slot name="body"></slot>
+                                            <slot></slot>
+                                        </div>
+                                        <div :class="style.footer" v-if="hasFooter">
+                                            <slot name="footer"></slot>
+                                        </div>
                                     </div>
-                                </div>
-                                <button v-if="showClose" :class="style.close" @click="close"></button>
-                                <div :class="style.body">
-                                    <slot name="body"></slot>
-                                    <slot></slot>
-                                </div>
-                                <div :class="style.footer" v-if="hasFooter">
-                                    <slot name="footer"></slot>
-                                </div>
+                                </template>
                             </div>
-                        </template>
-                    </div>
+                        </FocusScope>
+                    </DialogContent>
                 </div>
-                <!--                    </Transition>-->
-            </div>
-        </TransitionGroup>
-    </Teleport>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script lang="ts">
 import type { CSSProperties, PropType } from 'vue';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    FocusScope,
+} from 'reka-ui';
 import {
     computed,
     defineComponent,
     nextTick,
+    provide,
     ref,
     shallowRef,
     watch
 } from 'vue';
 import * as style from './style';
 import { fade, modalScale } from '../../styles/transitions.css';
-import { useZIndex } from '../../composables/useZIndex';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
 
 export default defineComponent({
     name: 'MModal',
+    components: {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        FocusScope,
+    },
     props: {
         open: {
             type: Boolean,
@@ -106,15 +138,21 @@ export default defineComponent({
         centered: {
             type: Boolean,
             default: true
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
         }
     },
-    emits: ['open', 'update:open'],
+    emits: ['open', 'close', 'update:open'],
     setup(props, { emit, slots }) {
         const { nextZIndex } = useZIndex();
 
         const target = ref();
+        const bodyRef = ref<HTMLElement | null>(null);
         const wrapperRef = shallowRef<HTMLDivElement>();
         const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
         const hasSidebar = computed(() => !!slots.sidebar);
         const hasFooter = computed(() => !!slots.footer);
         const transformOrigin = ref<string>();
@@ -194,43 +232,78 @@ export default defineComponent({
             };
         });
 
-        const contentClickRef = shallowRef(false);
-        const contentTimeoutRef = shallowRef<any>();
+        const canCloseOutside = computed(() => props.canClickOutside || props.outsideClose);
+
+        const focusableBodySelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
+        function getFirstFocusableBodyElement() {
+            if (!bodyRef.value) {
+                return null;
+            }
+
+            return Array.from(
+                bodyRef.value.querySelectorAll<HTMLElement>(focusableBodySelector)
+            ).find(element => {
+                return !element.matches(':disabled')
+                    && element.getAttribute('aria-disabled') !== 'true'
+                    && element.getAttribute('aria-hidden') !== 'true'
+                    && element.getClientRects().length > 0;
+            }) ?? null;
+        }
+
+        const handleOpenAutoFocus = (event: Event) => {
+            const firstFocusableBodyElement = getFirstFocusableBodyElement();
+
+            if (!firstFocusableBodyElement) {
+                return;
+            }
 
-        const onContentMouseDown = () => {
-            clearTimeout(contentTimeoutRef.value);
-            contentClickRef.value = true;
+            event.preventDefault();
+            firstFocusableBodyElement.focus();
         };
 
-        const onContentMouseUp = () => {
-            contentTimeoutRef.value = setTimeout(() => {
-                contentClickRef.value = false;
-            }, 0);
+        const onEscapeKeyDown = (e: KeyboardEvent) => {
+            e.stopPropagation();
+            close(e);
         };
 
-        const onOutsideClick = (e: MouseEvent) => {
-            if (!(props.canClickOutside || props.outsideClose)) {
-                return null;
+        const onPointerDownOutside = (e: Event) => {
+            if (!canCloseOutside.value) {
+                e.preventDefault();
             }
+        };
 
-            if (contentClickRef.value) {
-                contentClickRef.value = false;
-            } else if (wrapperRef.value === e.target) {
-                close(e);
+        const onInteractOutside = (e: Event) => {
+            if (!canCloseOutside.value) {
+                e.preventDefault();
+                return;
             }
+
+            close(e as MouseEvent | KeyboardEvent);
         };
 
-        const onWrapperKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                close(e);
+        const handleOpenChange = (value: boolean) => {
+            if (!value && isOpen.value) {
+                close(undefined);
                 return;
             }
+
+            isOpen.value = value;
         };
 
         const close = (e: MouseEvent | KeyboardEvent | undefined) => {
             props.onClose?.(e);
             ownerScrollbarClose();
+            emit('close', e);
             isOpen.value = false;
         };
 
@@ -283,12 +356,14 @@ export default defineComponent({
 
         return {
             close,
-            onOutsideClick,
             open,
-            onContentMouseDown,
-            onContentMouseUp,
-            onWrapperKeyDown,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onInteractOutside,
+            handleOpenChange,
+            handleOpenAutoFocus,
             target,
+            bodyRef,
             style,
             isOpen,
             computedWrapperStyles,

package/src/components/modal/style/Modal.css.ts

@@ -79,7 +79,16 @@ export const modal = style({
     top: 100,
     paddingBottom: '24px',
     maxWidth: `calc(100vw - 32px)`,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }
 });
 
 export const centeredWrapper = style({
@@ -113,7 +122,17 @@ export const container = style({
     flexDirection: 'column',
     position: 'relative',
     gap: themeVars.space[2],
-    pointerEvents: 'auto'
+    pointerEvents: 'auto',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow:
+                '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)'
+        }
+    }
 });
 
 export const hasSidebar = style({
@@ -159,6 +178,11 @@ export const close = style([
         ':focus': {
             backgroundColor: themeVars.color.gray[150]
         },
+        ':focus-visible': {
+            outline: 'none',
+            boxShadow: 'none',
+            backgroundColor: themeVars.color.gray[150]
+        },
         '::before': {
             content: '""',
             position: 'absolute',

package/src/components/radio/Radio.vue

@@ -1,20 +1,19 @@
 <template>
     <label :class="style.base">
-        <input
-            v-model="pick"
-            :value="value"
-            type="radio"
-            :aria-checked="checked ? 'true' : 'false'"
-            :aria-disabled="(disabled || loading) ? 'true' : 'false'"
-            :aria-labelledby="`${id}-label`"
-            :disabled="disabled || loading"
-            :name="name"
-            :id="id"
-            v-bind="$attrs"
-            v-on="inputListeners"
-            :class="style.input"
-        />
-        <span :class="classes"></span>
+        <RadioGroupRoot v-model="pick" :name="name" :disabled="disabled || loading">
+            <RadioGroupItem
+                :value="value"
+                :id="id"
+                :disabled="disabled || loading"
+                :aria-checked="checked ? 'true' : 'false'"
+                :aria-disabled="(disabled || loading) ? 'true' : 'false'"
+                :aria-labelledby="`${id}-label`"
+                v-bind="$attrs"
+                :class="classes"
+                @blur="onBlur"
+                @focus="onFocus"
+            />
+        </RadioGroupRoot>
         <span :class="style.label" :id="`${id}-label`">
             <template v-if="hasSlot">
                 <slot/>
@@ -29,6 +28,7 @@
 
 <script lang="ts">
 import type {PropType} from 'vue';
+import { RadioGroupItem, RadioGroupRoot } from 'reka-ui';
 import {computed, defineComponent, ref, toRef} from 'vue';
 import {useInput} from '../../composables/useInput';
 import {useInteractive} from "../../composables/useInteractive";
@@ -37,6 +37,10 @@ import * as style from './style';
 
 export default defineComponent({
     name: "Radio",
+    components: {
+        RadioGroupItem,
+        RadioGroupRoot
+    },
     emits: useInput.emits(),
     props: {
         ...useInput.props(),
@@ -76,7 +80,7 @@ export default defineComponent({
             formDisabled,
             formLoading,
             inputListeners
-        } = useInput(props, {focus, emit});
+        } = useInput(props, {focus, emit, withListeners: false});
 
         const disabled = computed(() => formDisabled || formLoading || props.disabled || props.loading);
         const name = toRef(props, 'name');
@@ -106,6 +110,14 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        function onFocus(event: FocusEvent) {
+            emit('focus', event);
+        }
+
+        function onBlur(event: FocusEvent) {
+            emit('blur', event);
+        }
+
         expose({
             focus,
             blur,
@@ -129,7 +141,9 @@ export default defineComponent({
             hasSlot,
             inputListeners,
             focus,
-            blur
+            blur,
+            onFocus,
+            onBlur
         }
     }
 })

package/src/components/radiobutton/RadioButton.vue

@@ -1,14 +1,24 @@
 <template>
-    <label :class="computedClasses" :disabled="disabled" @click="handleClick" v-bind="$attrs" :aria-selected="selected" :aria-disabled="disabled">
+    <RadioGroupItem
+        :class="computedClasses"
+        :disabled="disabled"
+        :value="id"
+        :name="name"
+        v-bind="$attrs"
+        :aria-selected="selected"
+        :aria-disabled="disabled"
+        @click="handleClick"
+    >
         <input type="radio" :class="computedRadioClasses" :name="name" :value="id" :disabled="disabled">
         <span>
             <slot />
         </span>
-    </label>
+    </RadioGroupItem>
 </template>
 
 <script lang="ts">
 import type {PropType} from "vue";
+import { RadioGroupItem } from 'reka-ui';
 import {computed, defineComponent, inject, ref } from "vue";
 import type {Size} from "../../types/props";
 import * as style from "./style";
@@ -18,6 +28,9 @@ import {RADIO_BUTTON_GROUP_STATE} from "../radiobuttongroup/symbol";
 
 export default defineComponent({
     name: "MRadioButton",
+    components: {
+        RadioGroupItem
+    },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),

package/src/components/radiobuttongroup/RadioButtonGroup.vue

@@ -1,12 +1,15 @@
 <template>
-    <div
+    <RadioGroupRoot
+        v-model="selectedValue"
+        :name="name"
         :class="computedClasses"
     >
         <slot/>
-    </div>
+    </RadioGroupRoot>
 </template>
 
 <script lang="ts">
+import { RadioGroupRoot } from 'reka-ui';
 import {computed, defineComponent, type PropType, provide, reactive, toRef} from "vue";
 import type {Size} from '../../types/props';
 import * as style from "./style";
@@ -15,6 +18,9 @@ import {RADIO_BUTTON_GROUP_STATE} from "./symbol";
 
 export default defineComponent({
     name: "MRadioButtonGroup",
+    components: {
+        RadioGroupRoot
+    },
     props: {
         modelValue: {
             type: [String, Number],
@@ -68,8 +74,9 @@ export default defineComponent({
         })
 
         return {
-            computedClasses
+            computedClasses,
+            selectedValue
         }
     }
 });
-</script>
+</script>