Merge pull request #127 from chakra-ui/develop

release: `@chakra-ui/vue-styled`

Author: codebender828

.changeset/pre.json

@@ -55,6 +55,7 @@
     "quiet-bananas-develop",
     "rare-ads-impress",
     "selfish-mice-lay",
+    "shy-eels-approve",
     "slimy-bugs-give",
     "spotty-trains-type",
     "sweet-lamps-brake",

.changeset/shy-eels-approve.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/c-modal": patch
+---
+
+chore: remove unused logs

.changeset/twelve-poems-scream.md

@@ -0,0 +1,11 @@
+---
+"@chakra-ui/c-modal": minor
+"@chakra-ui/c-portal": minor
+"@chakra-ui/vue-next": minor
+"@chakra-ui/vue-styled": minor
+"@chakra-ui/vue-utils": minor
+"@chakra-ui/vue-a11y": minor
+"@chakra-ui/vue-auto-import": minor
+---
+
+Create @chakra-ui/vue-styled package"

components.d.ts

@@ -1,12 +1,12 @@
 /**
- * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.10 auto-imported
+ * Typescript support for @@chakra-ui/vue-next1.0.0-alpha.13 auto-imported
  * components using `unplugin-vue-components,`
  *
  * @see: https://github.com/antfu/unplugin-vue-components/#typescript
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-01-31T09:57:50.931Z
+ * This file was generated on 2022-02-15T20:12:51.041Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -37,13 +37,15 @@ type JsxComponentCustomProps = {
     innerHTML?: JsxNode
   }
 
+declare var chakra: typeof import("@chakra-ui/vue-next")["chakra"]
+
 declare module "@vue/runtime-core" {
   import { chakra } from "@chakra-ui/vue-next"
   export { chakra }
 
   /* Global component types for Volar auto-complete */
   export interface GlobalComponents {
-    // chakra: typeof import("@chakra-ui/vue-next")["chakra"]
+    chakra: typeof import("@chakra-ui/vue-next")["chakra"]
 
     CAlert: typeof import("@chakra-ui/vue-next")["CAlert"]
     CAlertDescription: typeof import("@chakra-ui/vue-next")["CAlertDescription"]

package.json

@@ -65,6 +65,7 @@
     "@cypress/vue": "^3.0.3",
     "@docusaurus/utils": "^2.0.0-beta.3",
     "@emotion/css": "^11.1.3",
+    "@emotion/jest": "^11.7.1",
     "@emotion/server": "^11.0.0",
     "@manypkg/cli": "^0.17.0",
     "@mdx-js/rollup": "^2.0.0-rc.2",

packages/c-modal/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @chakra-ui/c-modal
 
+## 1.1.0-alpha.10
+
+### Patch Changes
+
+- chore: remove unused logs
+
 ## 1.1.0-alpha.9
 
 ### Patch Changes

packages/c-modal/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chakra-ui/c-modal",
   "description": "Chakra UI Vue | An accessible dialog modal component for chakra ui vue component",
-  "version": "1.1.0-alpha.9",
+  "version": "1.1.0-alpha.10",
   "main": "dist/chakra-ui-c-modal.cjs.js",
   "module": "dist/chakra-ui-c-modal.esm.js",
   "author": "Jonathan Bakebwa <[email protected]>",

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

@@ -169,7 +169,6 @@ export const CDrawerContent: ComponentWithProps<DrawerContentProps> = defineComp
       onInvalidate(() => {
         document.documentElement.style.overflow = overflow
         document.documentElement.style.paddingRight = paddingRight
-        console.log("invalidating", document.documentElement.style.overflow)
       })
     })
 

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

@@ -296,8 +296,13 @@ export const CModalContent: ComponentWithProps<
   inheritAttrs: false,
   emits: ["click", "mousedown", "keydown"],
   setup(_, { attrs, slots, emit }) {
-    const { dialogContainerProps, dialogProps, blockScrollOnMount, modelValue, motionPreset } =
-      unref(useModalContext())
+    const {
+      dialogContainerProps,
+      dialogProps,
+      blockScrollOnMount,
+      modelValue,
+      motionPreset,
+    } = unref(useModalContext())
     const styles = useStyles()
     const transitionId = useId("modal-content")
 
@@ -317,8 +322,8 @@ export const CModalContent: ComponentWithProps<
     })
 
     // Scroll lock
-    watchEffect((onInvalidate: VoidFunction) => {
-      if (!blockScrollOnMount.value) return
+    watchEffect((onInvalidate) => {
+      if (!blockScrollOnMount!.value) return
       if (modelValue.value !== true) return
 
       let overflow = document.documentElement.style.overflow
@@ -333,7 +338,6 @@ export const CModalContent: ComponentWithProps<
       onInvalidate(() => {
         document.documentElement.style.overflow = overflow
         document.documentElement.style.paddingRight = paddingRight
-        console.log("invalidating", document.documentElement.style.overflow)
       })
     })
 

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

@@ -1,12 +1,9 @@
 import {
   computed,
   getCurrentInstance,
-  onBeforeMount,
-  onBeforeUnmount,
   ref,
   Ref,
   ToRefs,
-  toRefs,
   unref,
   VNodeProps,
   watch,
@@ -24,7 +21,7 @@ import {
   getSelector,
   TemplateRef,
 } from "@chakra-ui/vue-utils"
-import { hideOthers, Undo, useInertOthers } from "@chakra-ui/vue-a11y"
+import { useInertOthers } from "@chakra-ui/vue-a11y"
 import { focus, FocusableElement, isFunction } from "@chakra-ui/utils"
 
 export interface UseModalOptions {
@@ -99,8 +96,7 @@ export function useModal(options: UseModalOptions) {
     initialFocusRef,
     finalFocusRef,
     useInert,
-    blockScrollOnMount,
-  } = toRefs(options)
+  } = options
 
   const instance = getCurrentInstance()
 
@@ -301,33 +297,3 @@ export type UseModalReturn = Omit<
   ToRefs<ReturnType<typeof useModal>>,
   "dialogRef" | "overlayRef" | "closeModal"
 >
-
-/**
- * Modal hook to polyfill `aria-modal`.
- *
- * It applies `aria-hidden` to elements behind the modal
- * to indicate that they're `inert`.
- *
- * @param ref ref of the node to be excluded from aria-hidden
- * @param shouldHide whether `aria-hidden` should be applied
- */
-export function useAriaHidden(
-  node: Ref<HTMLElement | undefined | null>,
-  shouldHide: Ref<boolean>
-) {
-  let undo: Undo | null = null
-
-  watchEffect(
-    () => {
-      // await nextTick()
-      if (shouldHide.value && node.value) {
-        undo = hideOthers(node.value)
-      } else {
-        undo?.()
-      }
-    },
-    {
-      flush: "post",
-    }
-  )
-}