chore: rename and refactor

packages/checkbox/src/Checkbox.hook.tsx

@@ -1,7 +1,7 @@
 import {
   useBooleanState,
   useControllableProp,
-  useIsomorphicEffect,
+  useSafeLayoutEffect,
 } from "@chakra-ui/hooks"
 import { callAllHandlers, attr, mergeRefs } from "@chakra-ui/utils"
 import { visuallyHiddenStyle } from "@chakra-ui/visually-hidden"
@@ -127,7 +127,7 @@ export function useCheckbox(props: CheckboxHookProps) {
     ],
   )
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (!ref.current) return
     ref.current.indeterminate = Boolean(isIndeterminate)
   }, [isIndeterminate])

packages/color-mode/src/color-mode.hooks.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { useIsomorphicEffect, useEventListener } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect, useEventListener } from "@chakra-ui/hooks"
 import { storage, syncBodyClassName, storageKey } from "./color-mode.utils"
 
 export function useUpdateBodyClassName(isDark: boolean) {
@@ -8,7 +8,7 @@ export function useUpdateBodyClassName(isDark: boolean) {
     syncBodyClassName(isDark)
   }, [isDark])
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     const mode = storage.get()
     syncBodyClassName(mode ? mode === "dark" : isDark)
   }, [])

packages/descendant/src/Descendant.ts

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { useIsomorphicEffect, useForceUpdate } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect, useForceUpdate } from "@chakra-ui/hooks"
 
 export type Descendant<T extends HTMLElement, P = {}> = P & {
   element: T | null
@@ -43,7 +43,7 @@ export function useDescendant<T extends HTMLElement, P>(
   const forceUpdate = useForceUpdate()
   const { register, unregister, descendants } = context
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (!element) forceUpdate()
 
     // Don't register this descendant if it's disabled and not focusable

packages/dialog/src/Dialog.tsx

@@ -1,6 +1,6 @@
 import { CloseButton, CloseButtonProps } from "@chakra-ui/close-button"
 import { FocusLock } from "@chakra-ui/focus-lock"
-import { useIsomorphicEffect } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect } from "@chakra-ui/hooks"
 import { Portal } from "@chakra-ui/portal"
 import { chakra, PropsOf } from "@chakra-ui/system"
 import { createContext } from "@chakra-ui/utils"
@@ -142,7 +142,7 @@ export type DialogHeaderProps = PropsOf<typeof StyledHeader>
 export const DialogHeader = (props: DialogHeaderProps) => {
   const { headerId, setHeaderMounted } = useDialogContext()
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     setHeaderMounted(true)
     return () => setHeaderMounted(false)
   }, [])
@@ -159,7 +159,7 @@ export type DialogBodyProps = PropsOf<"div">
 export const DialogBody = (props: DialogBodyProps) => {
   const { bodyId, setBodyMounted } = useDialogContext()
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     setBodyMounted(true)
     return () => setBodyMounted(false)
   }, [])

packages/form-control/src/FormControl.tsx

@@ -1,4 +1,4 @@
-import { useBooleanState, useId, useIsomorphicEffect } from "@chakra-ui/hooks"
+import { useBooleanState, useId, useSafeLayoutEffect } from "@chakra-ui/hooks"
 import { PropsOf, chakra, useColorModeValue } from "@chakra-ui/system"
 import { callAllHandlers, createContext, attr } from "@chakra-ui/utils"
 import * as React from "react"
@@ -235,7 +235,7 @@ export function FormHelperText(props: HelpTextProps) {
    * Notify the field context when the help text is rendered on
    * screen, so we can apply the correct `aria-describedby` to the field (e.g. input, textarea)
    */
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     field.setHasHelpText(true)
     return () => {
       field.setHasHelpText(false)

packages/hooks/package.json

@@ -51,7 +51,7 @@
     "@types/body-scroll-lock": "2.6.1",
     "body-scroll-lock": "^3.0.1",
     "compute-scroll-into-view": "1.0.11",
-    "react-uid": "2.2.0",
+    "@reach/auto-id": "0.9.0",
     "copy-to-clipboard": "3.3.1"
   },
   "peerDependencies": {

packages/hooks/src/index.ts

@@ -4,7 +4,7 @@ export * from "./useDisclosure"
 export * from "./useFocusEffect"
 export * from "./useId"
 export * from "./useInterval"
-export * from "./useIsomorphicEffect"
+export * from "./useSafeLayoutEffect"
 export * from "./useLockBodyScroll"
 export * from "./useLogger"
 export * from "./useMergeRefs"

packages/hooks/src/useDimensions.ts

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { getBox, BoxModel } from "@chakra-ui/utils"
-import { useIsomorphicEffect } from "./useIsomorphicEffect"
+import { useSafeLayoutEffect } from "./useSafeLayoutEffect"
 
 /**
  * Reack hook to measure a component's dimensions
@@ -15,7 +15,7 @@ export function useDimensions(
   const [dimensions, setDimensions] = React.useState<BoxModel | null>(null)
   const rafId = React.useRef<number>()
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (!ref.current) return
 
     const node = ref.current
@@ -34,14 +34,18 @@ export function useDimensions(
       window.addEventListener("scroll", measure)
 
       return () => {
-        rafId.current && cancelAnimationFrame(rafId.current)
+        if (rafId.current) {
+          cancelAnimationFrame(rafId.current)
+        }
         window.removeEventListener("resize", measure)
         window.removeEventListener("scroll", measure)
       }
     }
 
     return () => {
-      rafId.current && cancelAnimationFrame(rafId.current)
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current)
+      }
     }
   }, [ref, observe])
 

packages/hooks/src/useEventListener.ts

@@ -2,31 +2,35 @@ import * as React from "react"
 import { isBrowser, FunctionArguments } from "@chakra-ui/utils"
 import { useLatestRef } from "./useLatestRef"
 
-type AddEventLister = FunctionArguments<typeof document.addEventListener>
+type AddEventListener = FunctionArguments<typeof document.addEventListener>
 
 /**
  * React hook to manage browser event listeners
  *
  * @param event the event name
  * @param handler the event handler function to execute
- * @param environment the dom environment to execurte against (defaults to `document`)
+ * @param doc the dom environment to execute against (defaults to `document`)
  * @param options the event listener options
  */
 export function useEventListener(
   event: keyof WindowEventMap,
   handler: (event: any) => void,
-  environment: Document | null = isBrowser ? document : null,
-  options?: AddEventLister[2],
+  doc: Document | null = isBrowser ? document : null,
+  options?: AddEventListener[2],
 ) {
   const savedHandler = useLatestRef(handler)
 
   React.useEffect(() => {
-    if (environment == null) return
-    const eventListener = (event: any) => savedHandler.current(event)
-    environment.addEventListener(event, eventListener, options)
+    if (!doc) return
+
+    const listener = (event: any) => {
+      savedHandler.current(event)
+    }
+
+    doc.addEventListener(event, listener, options)
 
     return () => {
-      environment.removeEventListener(event, eventListener, options)
+      doc.removeEventListener(event, listener, options)
     }
-  }, [event, environment, options, savedHandler])
+  }, [event, doc, options, savedHandler])
 }

packages/hooks/src/useId.ts

@@ -1,4 +1,4 @@
-import { useUID } from "react-uid"
+import { useId as useUID } from "@reach/auto-id"
 
 function generatePrefix(prefix: string, id: string) {
   return `${prefix}-${id}`
@@ -11,7 +11,7 @@ function generatePrefix(prefix: string, id: string) {
  * @param prefix prefix to append before the id
  */
 export function useId(idProp?: string, prefix?: string) {
-  const uuid = useUID()
+  const uuid = useUID() as string
   const id = idProp ?? uuid
   const result = prefix ? generatePrefix(prefix, id) : id
   return result as string
@@ -27,6 +27,7 @@ export function useId(idProp?: string, prefix?: string) {
  *
  * ```js
  * const [buttonId, menuId] = useIds("52", "button", "menu")
+ *
  * // buttonId will be `button-52`
  * // menuId will be `menu-52`
  * ```

packages/hooks/src/useMediaQuery.ts

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { isBrowser } from "@chakra-ui/utils"
-import { useIsomorphicEffect } from "./useIsomorphicEffect"
+import { useSafeLayoutEffect } from "./useSafeLayoutEffect"
 
 const isSupported = (api: string) => isBrowser && api in window
 
@@ -15,7 +15,7 @@ export function useMediaQuery(query: string) {
     return !!window.matchMedia(query).matches
   })
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (!isSupported("matchMedia")) return
 
     const mediaQueryList = window.matchMedia(query)

packages/hooks/src/useIsomorphicEffect.ts → packages/hooks/src/useSafeLayoutEffect.ts

@@ -1,5 +1,8 @@
+import * as React from "react"
+import { isBrowser } from "@chakra-ui/utils"
+
 /**
- * useIsomorphicEffect enables us to safely call `useLayoutEffect` on the browser
+ * useSafeLayoutEffect enables us to safely call `useLayoutEffect` on the browser
  * (for SSR reasons)
  *
  * React currently throws a warning when using useLayoutEffect on the server.
@@ -8,10 +11,6 @@
  *
  * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
  */
-
-import * as React from "react"
-import { isBrowser } from "@chakra-ui/utils"
-
-export const useIsomorphicEffect = isBrowser
+export const useSafeLayoutEffect = isBrowser
   ? React.useLayoutEffect
   : React.useEffect

packages/image/src/Image.hook.tsx

@@ -1,4 +1,4 @@
-import { useIsomorphicEffect } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect } from "@chakra-ui/hooks"
 import { useCallback, useRef, useState } from "react"
 
 export type ImageHookProps = {
@@ -89,7 +89,7 @@ export function useImage(props: ImageHookProps) {
     }
   }
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (status === "loading") {
       load()
     }

packages/input/src/Input.element.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { useInputGroup } from "./Input.group"
 import { chakra, useComponentStyle, PropsOf } from "@chakra-ui/system"
-import { useIsomorphicEffect } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect } from "@chakra-ui/hooks"
 
 export type InputElementProps = PropsOf<typeof chakra.div> & {
   placement?: "left" | "right"
@@ -46,7 +46,7 @@ export const InputLeftElement = React.forwardRef(
   (props: PropsOf<typeof InputElement>, ref: React.Ref<HTMLDivElement>) => {
     const group = useInputGroup()
 
-    useIsomorphicEffect(() => {
+    useSafeLayoutEffect(() => {
       group.setHasLeftElement(true)
       return () => {
         group.setHasLeftElement(false)
@@ -63,7 +63,7 @@ export const InputRightElement = React.forwardRef(
   (props: PropsOf<typeof InputElement>, ref: React.Ref<HTMLDivElement>) => {
     const group = useInputGroup()
 
-    useIsomorphicEffect(() => {
+    useSafeLayoutEffect(() => {
       group.setHasRightElement(true)
       return () => {
         group.setHasRightElement(false)

packages/popper/src/Popper.hook.ts

@@ -3,7 +3,7 @@ import { Placement, Instance, createPopper } from "@popperjs/core"
 import { getArrowStyles } from "./Popper.utils"
 
 const isBrowser = typeof window !== "undefined"
-const useIsomorphicEffect = isBrowser ? React.useLayoutEffect : React.useEffect
+const useSafeLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect
 
 export { Placement }
 
@@ -53,7 +53,7 @@ export function usePopper(props: PopperHookProps) {
     return false
   }, [])
 
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (referenceRef.current && popoverRef.current) {
       popper.current = createPopper(referenceRef.current, popoverRef.current, {
         placement: originalPlacement,

packages/portal/src/Portal.manager.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { createContext } from "@chakra-ui/utils"
-import { useIsomorphicEffect, useForceUpdate } from "@chakra-ui/hooks"
+import { useSafeLayoutEffect, useForceUpdate } from "@chakra-ui/hooks"
 
 export interface PortalManagerContext {
   node: HTMLElement
@@ -43,7 +43,7 @@ export function PortalManager(props: PortalManagerProps) {
   const forceUpdate = useForceUpdate()
 
   // force an update on mount so the Provider works correctly
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     forceUpdate()
   }, [])
 

packages/tabs/src/Tabs.hook.tsx

@@ -1,6 +1,6 @@
 import {
   useId,
-  useIsomorphicEffect,
+  useSafeLayoutEffect,
   useControllableState,
 } from "@chakra-ui/hooks"
 import { TabbableHookProps, useTabbable } from "@chakra-ui/tabbable"
@@ -334,7 +334,7 @@ export function useTabIndicator(): React.CSSProperties {
   const [hasMeasured, setHasMeasured] = React.useState(false)
 
   // Update the selected tab rect when the selectedIndex changes
-  useIsomorphicEffect(() => {
+  useSafeLayoutEffect(() => {
     if (isUndefined(tabs.selectedIndex)) return
 
     const selectedTabNode = tabs.tabNodesRef.current[tabs.selectedIndex]

yarn.lock

@@ -2174,6 +2174,14 @@
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
+"@reach/auto-id@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.9.0.tgz#73b5d34bcf432f3e73b235b9dcaa89ea05a0d4db"
+  integrity sha512-9/aXl+dT0pOenvpkB2kkmQnpMDlmSk8ZkBYmYFzFz3eA4PZFNuXcHVzQevFRhc0HVlskPjxwPNf92EkI9rdFOw==
+  dependencies:
+    "@reach/utils" "^0.9.0"
+    tslib "^1.10.0"
+
 "@reach/router@^1.2.1":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
@@ -2192,6 +2200,14 @@
     tslib "^1.10.0"
     warning "^4.0.3"
 
+"@reach/utils@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.9.0.tgz#ee47c25c79eb2f98e6c0e728a2672075cc9991d5"
+  integrity sha512-cmiykRaxuCysVTsSY3PgrLjySnEIt1PLiSYKh5rAH8nYyEmaOCtw0vaNItFAiqQIjfrxkixmcUE8dyD8kqVuJA==
+  dependencies:
+    tslib "^1.10.0"
+    warning "^4.0.3"
+
 "@reach/visually-hidden@^0.8.6":
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.8.6.tgz#0370bd444ea767761059e377cc0b40cdbee3975f"
@@ -12221,11 +12237,6 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-uid@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.2.0.tgz#0f77e1e0594fbf29fc4fe528cc9aa415c5bf9159"
-  integrity sha512-z+g5+hFOQ08hCfrGcJ1PNs+cmvH8Uq2CVzCmPeWBsUi5A4W4NWXR5jouledzy3oSKGMU9HOzf8zFuGi15TXJoQ==
-
 react@16.13.0, react@^16.13.0, react@^16.8.3:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"