From 6925f7482f09abdd5b52a2bb708376176392838b Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Wed, 10 Aug 2022 17:13:15 +0400 Subject: [PATCH] refactor: disclosure hook to package --- .changeset/sharp-llamas-rush.md | 1 + hooks/use-callback-ref/package.json | 2 +- hooks/use-controllable-state/package.json | 2 +- hooks/use-disclosure/README.md | 24 +++++++ hooks/use-disclosure/index.ts | 1 + hooks/use-disclosure/package.json | 45 ++++++++++++ hooks/use-disclosure/src/index.ts | 86 +++++++++++++++++++++++ hooks/use-event-listener/package.json | 2 +- hooks/use-size/package.json | 2 +- hooks/use-update-effect/package.json | 2 +- pnpm-lock.yaml | 9 +++ 11 files changed, 171 insertions(+), 5 deletions(-) create mode 100644 hooks/use-disclosure/README.md create mode 100644 hooks/use-disclosure/index.ts create mode 100644 hooks/use-disclosure/package.json create mode 100644 hooks/use-disclosure/src/index.ts diff --git a/.changeset/sharp-llamas-rush.md b/.changeset/sharp-llamas-rush.md index 0ea07b3bd97..b4df6b77e80 100644 --- a/.changeset/sharp-llamas-rush.md +++ b/.changeset/sharp-llamas-rush.md @@ -1,5 +1,6 @@ --- "@chakra-ui/react-use-size": patch +"@chakra-ui/react-use-disclosure": patch --- Initial release diff --git a/hooks/use-callback-ref/package.json b/hooks/use-callback-ref/package.json index aa5ab9df07d..5127c0d41bc 100644 --- a/hooks/use-callback-ref/package.json +++ b/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" diff --git a/hooks/use-controllable-state/package.json b/hooks/use-controllable-state/package.json index 633943584c0..179e1485399 100644 --- a/hooks/use-controllable-state/package.json +++ b/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" diff --git a/hooks/use-disclosure/README.md b/hooks/use-disclosure/README.md new file mode 100644 index 00000000000..1e735e4ee7f --- /dev/null +++ b/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). diff --git a/hooks/use-disclosure/index.ts b/hooks/use-disclosure/index.ts new file mode 100644 index 00000000000..46e72b16a1b --- /dev/null +++ b/hooks/use-disclosure/index.ts @@ -0,0 +1 @@ +export * from "./src" diff --git a/hooks/use-disclosure/package.json b/hooks/use-disclosure/package.json new file mode 100644 index 00000000000..4e26e765965 --- /dev/null +++ b/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 ", + "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" + } +} diff --git a/hooks/use-disclosure/src/index.ts b/hooks/use-disclosure/src/index.ts new file mode 100644 index 00000000000..387fd9f8b0f --- /dev/null +++ b/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 + +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 diff --git a/hooks/use-event-listener/package.json b/hooks/use-event-listener/package.json index 43c6621591e..357787d8c77 100644 --- a/hooks/use-event-listener/package.json +++ b/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" diff --git a/hooks/use-size/package.json b/hooks/use-size/package.json index 6e560a8f611..ad536820d6f 100644 --- a/hooks/use-size/package.json +++ b/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" diff --git a/hooks/use-update-effect/package.json b/hooks/use-update-effect/package.json index 405a9ce7d9c..d4c425ff8f9 100644 --- a/hooks/use-update-effect/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 34b9af92653..6afbc1b9217 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -338,6 +338,15 @@ importers: devDependencies: react: 18.2.0 + hooks/use-disclosure: + specifiers: + '@chakra-ui/react-use-callback-ref': workspace:* + react: ^18.2.0 + dependencies: + '@chakra-ui/react-use-callback-ref': link:../use-callback-ref + devDependencies: + react: 18.2.0 + hooks/use-event-listener: specifiers: '@chakra-ui/react-use-callback-ref': workspace:*