fix: re-write focus lock with simpler promitives

Author: codebender828

packages/c-focus-lock/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./c-focus-lock"
 export * from "./use-focus-lock"
+export * from "./use-focus-trap"

packages/c-focus-lock/src/use-focus-trap.ts

@@ -0,0 +1,137 @@
+import {
+  onUnmounted,
+  onUpdated,
+  ref,
+  watchEffect,
+
+  // Types
+  Ref,
+  ComputedRef,
+} from "vue"
+
+import {
+  contains,
+  Focus,
+  focusElement,
+  focusIn,
+  FocusResult,
+  Keys,
+} from "@chakra-ui/vue-utils"
+import { useWindowEvent } from "@chakra-ui/vue-composables"
+
+export function useFocusTrap(
+  containers: Ref<Set<HTMLElement>> | ComputedRef<Set<HTMLElement>>,
+  enabled: Ref<boolean> | ComputedRef<boolean> = ref(true),
+  options:
+    | Ref<{ initialFocus?: HTMLElement | null }>
+    | ComputedRef<{ initialFocus?: HTMLElement | null }> = ref({})
+) {
+  let restoreElement = ref<HTMLElement | null>(
+    typeof window !== "undefined"
+      ? (document.activeElement as HTMLElement)
+      : null
+  )
+  let previousActiveElement = ref<HTMLElement | null>(null)
+
+  function handleFocus() {
+    if (!enabled.value) return
+    if (containers.value.size !== 1) return
+    let { initialFocus } = options.value
+
+    let activeElement = document.activeElement as HTMLElement
+
+    if (initialFocus) {
+      if (initialFocus === activeElement) {
+        return // Initial focus ref is already the active element
+      }
+    } else if (contains(containers.value, activeElement)) {
+      return // Already focused within Dialog
+    }
+
+    restoreElement.value = activeElement
+
+    // Try to focus the initialFocus ref
+    if (initialFocus) {
+      focusElement(initialFocus)
+    } else {
+      let couldFocus = false
+      for (let container of containers.value) {
+        let result = focusIn(container, Focus.First)
+        if (result === FocusResult.Success) {
+          couldFocus = true
+          break
+        }
+      }
+
+      if (!couldFocus)
+        console.warn("There are no focusable elements inside the <FocusTrap />")
+    }
+
+    previousActiveElement.value = document.activeElement as HTMLElement
+  }
+
+  // Restore when `enabled` becomes false
+  function restore() {
+    focusElement(restoreElement.value)
+    restoreElement.value = null
+    previousActiveElement.value = null
+  }
+
+  // Handle initial focus
+  watchEffect(handleFocus)
+
+  onUpdated(() => {
+    enabled.value ? handleFocus() : restore()
+  })
+  onUnmounted(restore)
+
+  // Handle Tab & Shift+Tab keyboard events
+  useWindowEvent("keydown", (event) => {
+    if (!enabled.value) return
+    if (event.key !== Keys.Tab) return
+    if (!document.activeElement) return
+    if (containers.value.size !== 1) return
+
+    event.preventDefault()
+
+    for (let element of containers.value) {
+      let result = focusIn(
+        element,
+        (event.shiftKey ? Focus.Previous : Focus.Next) | Focus.WrapAround
+      )
+
+      if (result === FocusResult.Success) {
+        previousActiveElement.value = document.activeElement as HTMLElement
+        break
+      }
+    }
+  })
+
+  // Prevent programmatically escaping
+  useWindowEvent(
+    "focus",
+    (event) => {
+      if (!enabled.value) return
+      if (containers.value.size !== 1) return
+
+      let previous = previousActiveElement.value
+      if (!previous) return
+
+      let toElement = event.target as HTMLElement | null
+
+      if (toElement && toElement instanceof HTMLElement) {
+        if (!contains(containers.value, toElement)) {
+          event.preventDefault()
+          event.stopPropagation()
+          focusElement(previous)
+        } else {
+          previousActiveElement.value = toElement
+          focusElement(toElement)
+        }
+      } else {
+        focusElement(previousActiveElement.value)
+      }
+    },
+    true
+  )
+}

packages/c-modal/examples/modal-simple.vue

@@ -13,7 +13,7 @@
       >Other button</c-button
     >
     <!-- eslint-disable-next-line -->
-    <c-modal v-model="isOpen" :initial-focus-ref="() => $refs.initialFocus" :blockScrollOnMount="false" :final-focus-ref="() => $refs.finalFocus">
+    <c-modal v-model="isOpen" :initial-focus-ref="() => $refs.initialFocus" :final-focus-ref="() => $refs.finalFocus">
       <c-modal-overlay />
       <c-modal-content>
         <c-modal-header>Modal header</c-modal-header>
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue"
 const isOpen = ref(false)
 const finalFocus = ref()
 const initialFocus = ref()

packages/c-modal/src/c-drawer.tsx

@@ -7,8 +7,6 @@ import {
   unref,
   withDirectives,
   watch,
-  ref,
-  Ref,
   watchEffect,
 } from 'vue'
 import {
@@ -127,6 +125,7 @@ export const CDrawerContent: ComponentWithProps<
       dialogContainerProps: rawDialogContainerProps,
       dialogProps: rawDialogProps,
       modelValue,
+      blockScrollOnMount
     } = unref(useModalContext())
     const transitionId = useId('drawer-transition')
 
@@ -157,6 +156,27 @@ export const CDrawerContent: ComponentWithProps<
       ...styles.value.dialog,
     }))
 
+        // Scroll lock
+    watchEffect((onInvalidate: VoidFunction) => {
+      if (!blockScrollOnMount.value) return
+      if (modelValue.value !== true) return
+
+      let overflow = document.documentElement.style.overflow
+      let paddingRight = document.documentElement.style.paddingRight
+
+      let scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth
+
+      document.documentElement.style.overflow = "hidden"
+      document.documentElement.style.paddingRight = `${scrollbarWidth}px`
+
+      onInvalidate(() => {
+        document.documentElement.style.overflow = overflow
+        document.documentElement.style.paddingRight = paddingRight
+        console.log("invalidating", document.documentElement.style.overflow)
+      })
+    })
+
     /** Handles exit transition */
     const leave = (done: VoidFunction) => {
       const motions = useMotions()

packages/c-modal/src/c-modal.ts

@@ -22,7 +22,7 @@ import {
   watch,
   unref,
   withDirectives,
-  Component,
+  watchEffect,
   onErrorCaptured,
   Ref,
 } from "vue"
@@ -46,7 +46,7 @@ import { useModal, UseModalOptions, UseModalReturn } from "./use-modal"
 import { DialogMotionPreset, dialogMotionPresets } from "./modal-transitions"
 import { Dict } from "@chakra-ui/utils"
 import { useId } from "@chakra-ui/vue-composables"
-import { CPortalProps } from "@chakra-ui/c-portal/dist/types/portal"
+import { CPortalProps } from "@chakra-ui/c-portal"
 
 type ScrollBehavior = "inside" | "outside"
 
@@ -163,15 +163,13 @@ interface CModalContext extends IUseModalOptions, UseModalReturn {
 
 type CModalReactiveContext = ComputedRef<CModalContext>
 
-const [
-  ModalContextProvider,
-  useModalContext,
-] = createContext<CModalReactiveContext>({
-  strict: true,
-  name: "ModalContext",
-  errorMessage:
-    "useModalContext: `context` is undefined. Seems you forgot to wrap modal components in `<CModal />`",
-})
+const [ModalContextProvider, useModalContext] =
+  createContext<CModalReactiveContext>({
+    strict: true,
+    name: "ModalContext",
+    errorMessage:
+      "useModalContext: `context` is undefined. Seems you forgot to wrap modal components in `<CModal />`",
+  })
 
 export { ModalContextProvider, useModalContext }
 
@@ -298,12 +296,8 @@ export const CModalContent: ComponentWithProps<
   inheritAttrs: false,
   emits: ["click", "mousedown", "keydown"],
   setup(_, { attrs, slots, emit }) {
-    const {
-      dialogContainerProps,
-      dialogProps,
-      modelValue,
-      motionPreset,
-    } = unref(useModalContext())
+    const { dialogContainerProps, dialogProps, blockScrollOnMount, modelValue, motionPreset } =
+      unref(useModalContext())
     const styles = useStyles()
     const transitionId = useId("modal-content")
 
@@ -322,6 +316,27 @@ export const CModalContent: ComponentWithProps<
       }
     })
 
+    // Scroll lock
+    watchEffect((onInvalidate: VoidFunction) => {
+      if (!blockScrollOnMount.value) return
+      if (modelValue.value !== true) return
+
+      let overflow = document.documentElement.style.overflow
+      let paddingRight = document.documentElement.style.paddingRight
+
+      let scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth
+
+      document.documentElement.style.overflow = "hidden"
+      document.documentElement.style.paddingRight = `${scrollbarWidth}px`
+
+      onInvalidate(() => {
+        document.documentElement.style.overflow = overflow
+        document.documentElement.style.paddingRight = paddingRight
+        console.log("invalidating", document.documentElement.style.overflow)
+      })
+    })
+
     const dialogContainerStyles = computed<SystemStyleObject>(() => ({
       display: "flex",
       width: "100vw",