feat(utils): add a use getSelector utility

Author: codebender828

package.json

@@ -113,7 +113,7 @@
     "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.3",
-    "vite": "2.1.5",
+    "vite": "^2.2.3",
     "vite-plugin-components": "^0.8.3",
     "vite-plugin-pages": "^0.9.2",
     "vitepress": "^0.12.0",

packages/c-focus-lock/examples/with-focus-lock-component.vue

@@ -15,7 +15,6 @@
           @deactivate="handleDeactivate"
           :allow-outside-click="false"
           :initial-focus-ref="() => initialFocusRef"
-          :final-focus-ref="() => finalFocusRef"
           #default="{ hasFocus, deactivate }"
           pos="relative"
           v-if="isActive"

packages/c-focus-lock/examples/with-focus-lock-hook.vue

@@ -80,6 +80,7 @@ const {
 } = useFocusLock({
   escapeDeactivates: false,
   delayInitialFocus: true,
+  immediate: true,
 })
 
 const activate = async () => {

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

@@ -22,6 +22,7 @@ import {
   watch,
   withDirectives,
   unref,
+  watchEffect,
 } from 'vue'
 import {
   chakra,
@@ -212,19 +213,18 @@ export const CModal = defineComponent({
   setup(props, { slots, attrs, emit }) {
     const closeModal = () => {
       emit('update:is-open', false)
-      console.log('CLOSING MODAL =============')
     }
 
     const handleEscape = (event: KeyboardEvent) => {
       emit('escape', event)
     }
 
     const styles = useMultiStyleConfig('Modal', mergeProps(props, attrs))
-    const modalOptions = {
+    const modalOptions = reactive({
       ...toRefs(reactive(props)),
       closeModal,
       handleEscape,
-    }
+    })
     // @ts-expect-error
     const modal = useModal(modalOptions)
 
@@ -246,55 +246,16 @@ export const CModal = defineComponent({
   },
 })
 
-export const CModalFocusScope = defineComponent({
-  name: 'CModalFocusScope',
-  setup(_, { attrs, slots }) {
-    const {
-      isOpen,
-      initialFocusRef,
-      returnFocusOnClose,
-      finalFocusRef,
-      blockScrollOnMount,
-    } = useModalContext()
-
-    const finalFocusEl = computed(() =>
-      typeof finalFocusRef?.value === 'function'
-        ? finalFocusRef.value()
-        : finalFocusRef?.value
-    )
-
-    return () => {
-      return h(
-        CFocusLock,
-        {
-          finalFocusEl: finalFocusEl.value,
-          ...attrs,
-        },
-        () => [
-          h(
-            CScrollLock,
-            {
-              enabled: blockScrollOnMount?.value,
-            },
-            () => slots.default?.()
-          ),
-        ]
-      )
-    }
-  },
-})
-
 /**
  * ModalContent is used to group modal's content. It has all the
  * necessary `aria-*` properties to indicate that it is a modal
  */
 export const CModalContent = defineComponent({
   name: 'CModalContent',
   inheritAttrs: false,
-  emits: ['click'],
-  setup(_, { attrs, slots }) {
-    const context = useModalContext()
-
+  emits: ['click', 'mousedown', 'keydown'],
+  setup(_, { attrs, slots, emit }) {
+    const { dialogContainerProps, dialogProps } = unref(useModalContext())
     const styles = useStyles()
 
     const dialogContainerStyles = computed<SystemStyleObject>(() => ({
@@ -317,61 +278,25 @@ export const CModalContent = defineComponent({
     }))
 
     return () => {
-      return withDirectives(
-        h(
-          chakra('div', {
-            label: 'modal__content-container',
-            __css: dialogContainerStyles.value,
-          }),
-          context.value.dialogContainerProps.value,
-          () => [
-            h(
-              CFocusLock,
-              {
-                allowOutsideClick: true,
-                initialFocusRef: context.value.initialFocusRef?.value,
-                finalFocusRef: context.value.finalFocusRef?.value,
-                restoreFocus: context.value.returnFocusOnClose?.value,
-              },
-              () => [
-                withDirectives(
-                  h(
-                    chakra('section', {
-                      __css: dialogStyles.value,
-                      label: 'modal__content',
-                    }),
-                    {
-                      ...attrs,
-                      ...context.value.dialogProps.value,
-                    },
-                    slots
-                  ),
-                  [
-                    [
-                      MotionDirective,
-                      {
-                        initial: {
-                          scale: 0.5,
-                          opacity: 0,
-                        },
-                        enter: {
-                          scale: 1,
-                          opacity: 1,
-                          translateY: 0,
-                        },
-                        leave: {
-                          scale: 0.5,
-                          opacity: 0,
-                        },
-                      },
-                    ],
-                  ]
-                ),
-              ]
-            ),
-          ]
-        ),
-        [[BodyScrollLockDirective, context.value.blockScrollOnMount?.value]]
+      return h(
+        chakra('div', {
+          label: 'modal__content-container',
+          __css: dialogContainerStyles.value,
+        }),
+        dialogContainerProps.value({ emit }),
+        () => [
+          h(
+            chakra('section', {
+              __css: dialogStyles.value,
+              label: 'modal__content',
+            }),
+            {
+              ...attrs,
+              ...dialogProps.value({ emit }),
+            },
+            slots
+          ),
+        ]
       )
     }
   },