draft: refactored useDisclosure

.changeset/eleven-eyes-type.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": major
+---
+
+Renamed menu and popover render props from open, onClose to opened and close

.changeset/light-crabs-hunt.md

@@ -0,0 +1,7 @@
+---
+"@chakra-ui/react": major
+"@chakra-ui/hooks": major
+---
+
+Updated the useDisclosure api, now returns a tupple in the format of
+`[opened, handlers]`

MIGRATION.md

@@ -83,7 +83,8 @@ Renamed all `container` parts to `root`. Kindly update your theme to reflect
 ### Removed Components and Packages
 
 - Removed `ControlBox` component
-- Removed `@chakra-ui/icons` package. Prefer to use [`lucide-react`](https://lucide.dev/guide/packages/lucide-react) or
+- Removed `@chakra-ui/icons` package. Prefer to use
+  [`lucide-react`](https://lucide.dev/guide/packages/lucide-react) or
   `react-icons` instead.
 
 ### Root component and types

packages/hooks/src/use-disclosure.ts

@@ -81,15 +81,17 @@ export function useDisclosure(props: UseDisclosureProps = {}) {
     }
   }
 
-  return {
+  return [
     open,
-    onOpen,
-    onClose,
-    onToggle,
-    isControlled,
-    getButtonProps,
-    getDisclosureProps,
-  }
+    {
+      open: onOpen,
+      close: onClose,
+      toggle: onToggle,
+      controlled: isControlled,
+      getButtonProps,
+      getDisclosureProps,
+    },
+  ] as const
 }
 
 export type UseDisclosureReturn = ReturnType<typeof useDisclosure>

packages/react/__stories__/dialog.stories.tsx

@@ -12,13 +12,13 @@ export default {
 }
 
 export const Basic = () => {
-  const { open, onOpen, onClose } = useDisclosure()
+  const [open, handlers] = useDisclosure()
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Dialog.Root open={open} onClose={onClose} centered>
+      <Dialog.Root open={open} onClose={handlers.close} centered>
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -34,7 +34,7 @@ export const Basic = () => {
               irure nisi.
             </Dialog.Body>
             <Dialog.Footer>
-              <Button onClick={onClose}>Cancel</Button>
+              <Button onClick={handlers.close}>Cancel</Button>
               <Button variant="solid">Save</Button>
             </Dialog.Footer>
           </Dialog.Content>
@@ -45,20 +45,24 @@ export const Basic = () => {
 }
 
 export const FinalFocusRef = () => {
-  const { open, onOpen, onClose } = useDisclosure()
-  const finalRef = React.useRef<HTMLDivElement>(null)
+  const [open, handlers] = useDisclosure()
+  const finalRef = React.useRef<any>()
 
   return (
     <>
       <Box ref={finalRef} tabIndex={-1} aria-label="Focus moved to this box">
         Some other content that'll receive focus on close.
       </Box>
 
-      <Button mt={4} onClick={onOpen}>
+      <Button mt={4} onClick={handlers.open}>
         Open Dialog.
       </Button>
 
-      <Dialog.Root finalFocusRef={finalRef} open={open} onClose={onClose}>
+      <Dialog.Root
+        finalFocusRef={finalRef}
+        open={open}
+        onClose={handlers.close}
+      >
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -76,7 +80,7 @@ export const FinalFocusRef = () => {
             </Dialog.Body>
 
             <Dialog.Footer>
-              <Button onClick={onClose}>Close</Button>
+              <Button onClick={handlers.close}>Close</Button>
               <Button>Secondary Action</Button>
             </Dialog.Footer>
           </Dialog.Content>
@@ -87,13 +91,13 @@ export const FinalFocusRef = () => {
 }
 
 export const NestedDialogs = () => {
-  const first = useDisclosure()
-  const second = useDisclosure()
+  const [firstOpen, first] = useDisclosure()
+  const [secondOpen, second] = useDisclosure()
 
   return (
     <>
-      <Button onClick={first.onOpen}>Open</Button>
-      <Dialog.Root open={first.open} onClose={first.onClose}>
+      <Button onClick={first.open}>Open</Button>
+      <Dialog.Root open={firstOpen} onClose={first.close}>
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -107,10 +111,10 @@ export const NestedDialogs = () => {
             <Dialog.Footer>
               <chakra.div flex="1" />
               <Button>Button 2</Button>
-              <Button onClick={second.onOpen}>Open Nested</Button>
+              <Button onClick={second.open}>Open Nested</Button>
             </Dialog.Footer>
 
-            <Dialog.Root open={second.open} onClose={second.onClose}>
+            <Dialog.Root open={secondOpen} onClose={second.close}>
               <Dialog.Backdrop />
               <Dialog.Positioner>
                 <Dialog.Content>
@@ -130,13 +134,13 @@ export const NestedDialogs = () => {
 }
 
 export const InsideScroll = () => {
-  const { open, onClose, onOpen } = useDisclosure()
+  const [open, handlers] = useDisclosure()
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Dialog.Root onClose={onClose} open={open} scrollBehavior="inside">
+      <Dialog.Root onClose={handlers.close} open={open} scrollBehavior="inside">
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -150,7 +154,7 @@ export const InsideScroll = () => {
               <Lorem size={5} />
             </Dialog.Body>
             <Dialog.Footer>
-              <Button onClick={onClose}>Close</Button>
+              <Button onClick={handlers.close}>Close</Button>
             </Dialog.Footer>
           </Dialog.Content>
         </Dialog.Positioner>
@@ -160,13 +164,13 @@ export const InsideScroll = () => {
 }
 
 export const AnimationDisabled = () => {
-  const { open, onOpen, onClose } = useDisclosure()
+  const [open, handlers] = useDisclosure()
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Dialog.Root onClose={onClose} open={open} motionPreset="none">
+      <Dialog.Root onClose={handlers.close} open={open} motionPreset="none">
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -180,7 +184,7 @@ export const AnimationDisabled = () => {
               <Lorem size={5} />
             </Dialog.Body>
             <Dialog.Footer>
-              <Button onClick={onClose}>Close</Button>
+              <Button onClick={handlers.close}>Close</Button>
             </Dialog.Footer>
           </Dialog.Content>
         </Dialog.Positioner>
@@ -189,14 +193,14 @@ export const AnimationDisabled = () => {
   )
 }
 
-export const WithContentOverflow = () => {
-  const { open, onOpen, onClose } = useDisclosure()
+export const FullWithLongContent = () => {
+  const [open, handlers] = useDisclosure()
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Dialog.Root onClose={onClose} open={open} size="full">
+      <Dialog.Root onClose={handlers.close} open={open} size="full">
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content>
@@ -210,7 +214,7 @@ export const WithContentOverflow = () => {
               <Lorem count={30} />
             </Dialog.Body>
             <Dialog.Footer>
-              <Button onClick={onClose}>Close</Button>
+              <Button onClick={handlers.close}>Close</Button>
             </Dialog.Footer>
           </Dialog.Content>
         </Dialog.Positioner>
@@ -220,13 +224,13 @@ export const WithContentOverflow = () => {
 }
 
 export function WithCustomMotionProps() {
-  const { open, onOpen, onClose } = useDisclosure()
+  const [open, handlers] = useDisclosure()
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Dialog.Root open={open} onClose={onClose} centered>
+      <Dialog.Root open={open} onClose={handlers.close}>
         <Dialog.Backdrop />
         <Dialog.Positioner>
           <Dialog.Content
@@ -252,7 +256,7 @@ export function WithCustomMotionProps() {
               irure nisi.
             </Dialog.Body>
             <Dialog.Footer>
-              <Button onClick={onClose}>Cancel</Button>
+              <Button onClick={handlers.close}>Cancel</Button>
               <Button>Save</Button>
             </Dialog.Footer>
           </Dialog.Content>

packages/react/__stories__/drawer.stories.tsx

@@ -71,14 +71,19 @@ export const WithCustomMotion = () => {
 }
 
 export const WithLongContent = () => {
-  const { open, onOpen, onClose } = useDisclosure()
+  const [open, handlers] = useDisclosure()
 
   return (
     <>
-      <Button variant="solid" onClick={onOpen}>
+      <Button variant="solid" onClick={handlers.open}>
         Open
       </Button>
-      <Drawer.Root placement="bottom" onClose={onClose} open={open} size="md">
+      <Drawer.Root
+        placement="bottom"
+        onClose={handlers.close}
+        open={open}
+        size="md"
+      >
         <Drawer.Backdrop />
         <Drawer.Positioner>
           <Drawer.Content>

packages/react/__stories__/popper.stories.tsx

@@ -7,7 +7,7 @@ export default {
 }
 
 export const Basic = () => {
-  const { open, onToggle } = useDisclosure()
+  const [opened, { toggle }] = useDisclosure()
 
   const { referenceRef, popperRef } = usePopper({
     placement: "bottom-start",
@@ -16,11 +16,11 @@ export const Basic = () => {
 
   return (
     <>
-      <button ref={referenceRef} style={{ margin: 400 }} onClick={onToggle}>
+      <button ref={referenceRef} style={{ margin: 400 }} onClick={toggle}>
         Reference Tooltip Trigger
       </button>
 
-      {open && (
+      {opened && (
         <div
           ref={popperRef}
           style={{
@@ -42,7 +42,7 @@ export const Basic = () => {
 }
 
 export const WithTransition = () => {
-  const { open, onToggle } = useDisclosure()
+  const [opened, { toggle }] = useDisclosure()
 
   const { referenceRef, popperRef } = usePopper({
     placement: "bottom-start",
@@ -57,7 +57,7 @@ export const WithTransition = () => {
 
   return (
     <>
-      <button ref={referenceRef} onClick={onToggle}>
+      <button ref={referenceRef} onClick={toggle}>
         Toggle
       </button>
       <div ref={popperRef} style={{ ["--popper-arrow-bg" as string]: "red" }}>
@@ -68,7 +68,7 @@ export const WithTransition = () => {
           }}
           variants={slide}
           initial={false}
-          animate={open ? "enter" : "exit"}
+          animate={opened ? "enter" : "exit"}
           style={{
             background: bg,
             width: 200,
@@ -87,7 +87,7 @@ export const WithTransition = () => {
 }
 
 export const WithMatchWidth = () => {
-  const { onToggle } = useDisclosure()
+  const [, { toggle }] = useDisclosure()
 
   const { getPopperProps, getReferenceProps } = usePopper({
     placement: "bottom-start",
@@ -100,7 +100,7 @@ export const WithMatchWidth = () => {
     <>
       <button
         {...getReferenceProps()}
-        onClick={onToggle}
+        onClick={toggle}
         style={{ width: "400px", margin: 400 }}
       >
         Toggle

packages/react/__tests__/popover.test.tsx

@@ -17,7 +17,7 @@ const PopoverDemo = (props: UsePopoverProps) => {
           })}
         ></div>
       </div>
-      <button type="button" onClick={api.onClose}>
+      <button type="button" onClick={api.close}>
         Close
       </button>
     </div>
@@ -92,7 +92,7 @@ describe("Popover", () => {
             })}
           ></div>
         </div>
-        <button type="button" onClick={api.onClose}>
+        <button type="button" onClick={api.close}>
           Close
         </button>
       </div>
@@ -192,7 +192,7 @@ describe("Popover", () => {
             })}
           />
         </div>
-        <button type="button" onClick={api.onClose}>
+        <button type="button" onClick={api.close}>
           Close
         </button>
       </div>

packages/react/src/components/menu/menu-content.tsx

@@ -57,7 +57,7 @@ export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
       <StyledDiv
         variants={motionVariants}
         initial={false}
-        animate={api.open ? "enter" : "exit"}
+        animate={api.opened ? "enter" : "exit"}
         {...(motionProps as any)}
         {...api.getContentProps(restProps, ref)}
         css={[styles.content, props.css]}

packages/react/src/components/menu/menu-root.tsx

@@ -42,10 +42,10 @@ export function MenuRoot({ unstyled, ...props }: MenuRootProps) {
   const { lazyMount, lazyBehavior = "unmount", ...restProps } = localProps
   const api = useMenu(restProps)
 
-  const menuState = pick(api, ["open", "onClose", "forceUpdate"])
+  const menuState = pick(api, ["opened", "close", "forceUpdate"])
 
   const animationState = useAnimationState({
-    open: api.open,
+    open: api.opened,
     ref: api.contentRef,
   })