refactor: disclosure hook to package

.changeset/sharp-llamas-rush.md

@@ -1,5 +1,6 @@
 ---
 "@chakra-ui/react-use-size": patch
+"@chakra-ui/react-use-disclosure": patch
 ---
 
 Initial release

hooks/use-callback-ref/package.json

@@ -21,7 +21,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/react-use-callback-ref"
+    "directory": "hooks/react-use-callback-ref"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"

hooks/use-controllable-state/package.json

@@ -21,7 +21,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/react-use-callback-ref"
+    "directory": "hooks/react-use-callback-ref"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"

hooks/use-disclosure/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/use-disclosure
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/use-disclosure
+# or
+npm i @chakra-ui/use-disclosure
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-disclosure/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-disclosure/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/react-use-disclosure",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "use-disclosure"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "hooks/use-disclosure"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "dependencies": {
+    "@chakra-ui/react-use-callback-ref": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
+  }
+}

hooks/use-disclosure/src/index.ts

@@ -0,0 +1,86 @@
+import { useCallbackRef } from "@chakra-ui/react-use-callback-ref"
+import React, { useCallback, useState, useId } from "react"
+
+export interface UseDisclosureProps {
+  isOpen?: boolean
+  defaultIsOpen?: boolean
+  onClose?(): void
+  onOpen?(): void
+  id?: string
+}
+
+type HTMLProps = React.HTMLAttributes<HTMLElement>
+
+export function useDisclosure(props: UseDisclosureProps = {}) {
+  const {
+    onClose: onCloseProp,
+    onOpen: onOpenProp,
+    isOpen: isOpenProp,
+    id: idProp,
+  } = props
+
+  const handleOpen = useCallbackRef(onOpenProp)
+  const handleClose = useCallbackRef(onCloseProp)
+
+  const [isOpenState, setIsOpen] = useState(props.defaultIsOpen || false)
+
+  const isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState
+
+  const isControlled = isOpenProp !== undefined
+
+  const id = idProp ?? `disclosure-${useId()}`
+
+  const onClose = useCallback(() => {
+    if (!isControlled) {
+      setIsOpen(false)
+    }
+    handleClose?.()
+  }, [isControlled, handleClose])
+
+  const onOpen = useCallback(() => {
+    if (!isControlled) {
+      setIsOpen(true)
+    }
+    handleOpen?.()
+  }, [isControlled, handleOpen])
+
+  const onToggle = useCallback(() => {
+    if (isOpen) {
+      onClose()
+    } else {
+      onOpen()
+    }
+  }, [isOpen, onOpen, onClose])
+
+  function getButtonProps(props: HTMLProps = {}): HTMLProps {
+    return {
+      ...props,
+      "aria-expanded": isOpen,
+      "aria-controls": id,
+      onClick(event) {
+        props.onClick?.(event)
+        onToggle()
+      },
+    }
+  }
+
+  function getDisclosureProps(props: HTMLProps = {}): HTMLProps {
+    return {
+      ...props,
+      hidden: !isOpen,
+      id,
+    }
+  }
+
+  return {
+    isOpen,
+    onOpen,
+    onClose,
+    onToggle,
+    isControlled,
+    getButtonProps,
+    getDisclosureProps,
+  }
+}
+
+export type UseDisclosureReturn = ReturnType<typeof useDisclosure>

hooks/use-event-listener/package.json

@@ -21,7 +21,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/use-event-listener"
+    "directory": "hooks/use-event-listener"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"

hooks/use-size/package.json

@@ -21,7 +21,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/react-use-size"
+    "directory": "hooks/react-use-size"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"

hooks/use-update-effect/package.json

@@ -21,7 +21,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui.git",
-    "directory": "packages/use-update-effect"
+    "directory": "hooks/use-update-effect"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/chakra-ui/issues"