fix: dropdown button state handling

Author: abelflopes

package-lock.json

@@ -3,19 +3,21 @@ import { Dropdown, type DropdownProps } from "./Dropdown";
 
 export interface DropdownButtonRenderProps {
   ref: React.RefObject<HTMLButtonElement>;
-  open: boolean;
-  onOpen: () => void;
-  onClose: () => void;
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
 }
 
 export interface DropdownButtonProps extends Omit<DropdownProps, "anchorRef"> {
-  readonly renderButton: (props: DropdownButtonRenderProps) => React.ReactNode;
+  renderButton: (props: DropdownButtonRenderProps) => React.ReactNode;
+  onOpenChange?: (open: boolean) => void;
 }
 
-export const DropdownButton: React.FC<DropdownButtonProps> = ({
+export const DropdownButton: React.FC<Readonly<DropdownButtonProps>> = ({
   renderButton,
   open = false,
   onClose,
+  onOpenChange,
   children,
   ...props
 }) => {
@@ -27,19 +29,25 @@ export const DropdownButton: React.FC<DropdownButtonProps> = ({
     onClose?.();
   }, [onClose]);
 
+  const internalOnOpen = useCallback(() => {
+    setInternalOpen(true);
+  }, []);
+
   const button = useMemo(
     () =>
       renderButton({
         ref: buttonRef,
-        open: internalOpen,
-        onOpen: () => {
-          setInternalOpen(true);
-        },
-        onClose: internalOnClose,
+        isOpen: internalOpen,
+        open: internalOnOpen,
+        close: internalOnClose,
       }),
-    [renderButton, internalOpen, internalOnClose],
+    [renderButton, internalOpen, internalOnOpen, internalOnClose],
   );
 
+  useEffect(() => {
+    onOpenChange?.(internalOpen);
+  }, [internalOpen, onOpenChange]);
+
   useEffect(() => {
     setInternalOpen(open);
   }, [open]);

packages/components/base/src/dropdown/DropdownButton.tsx

@@ -26,7 +26,7 @@
     "@react-ck/layers": "^1.4.1",
     "@react-ck/manager": "^1.3.12",
     "@react-ck/misc-utils": "^1.0.2",
-    "@react-ck/base-components": "^5.0.3",
+    "@react-ck/base-components": "^6.0.1",
     "@react-ck/react-hooks": "^1.0.9",
     "@react-ck/react-utils": "^1.4.0",
     "@react-ck/scss-utils": "^1.1.13",

packages/docs/stories/package.json

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { type Meta, type StoryObj } from "@storybook/react";
 import { Manager } from "@react-ck/manager";
 import { configureStory } from "@react-ck/story-config";
@@ -10,20 +10,26 @@ type Story = StoryObj<typeof Dropdown>;
 
 const meta: Meta<typeof Dropdown> = {
   title: "Generic/Dropdown",
-  ...configureStory(Dropdown, {
-    parameters: {
-      source: {
-        type: "code",
+  ...configureStory(
+    Dropdown,
+    {
+      parameters: {
+        source: {
+          type: "code",
+        },
       },
+      decorators: [
+        (Story): React.ReactElement => (
+          <Manager usePortal={false}>
+            <Story />
+          </Manager>
+        ),
+      ],
     },
-    decorators: [
-      (Story): React.ReactElement => (
-        <Manager usePortal={false}>
-          <Story />
-        </Manager>
-      ),
-    ],
-  }),
+    {
+      subComponents: [DropdownButton],
+    },
+  ),
 };
 
 export default meta;
@@ -36,8 +42,8 @@ export const Component: Story = {
     <Flex>
       <DropdownButton
         open={props.open}
-        renderButton={({ ref, onOpen }) => (
-          <Button rootRef={ref} onClick={onOpen}>
+        renderButton={({ ref, open }) => (
+          <Button rootRef={ref} onClick={open}>
             Dropdown 1
           </Button>
         )}>
@@ -53,8 +59,8 @@ export const Component: Story = {
       </DropdownButton>
 
       <DropdownButton
-        renderButton={({ ref, onOpen }) => (
-          <Button rootRef={ref} onClick={onOpen}>
+        renderButton={({ ref, open }) => (
+          <Button rootRef={ref} onClick={open}>
             Button 2
           </Button>
         )}>
@@ -72,12 +78,51 @@ export const Component: Story = {
   ),
 };
 
+export const ExternalState: Story = {
+  args: {
+    open: false,
+  },
+  render: ({ ...props }): React.ReactElement => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is a story
+    const [open, setOpen] = useState(props.open);
+
+    return (
+      <DropdownButton
+        open={open}
+        renderButton={({ ref, open }) => (
+          <Button rootRef={ref} onClick={open}>
+            Dropdown 1
+          </Button>
+        )}
+        onOpenChange={setOpen}>
+        Content Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nulla est, quidem
+        enim a molestias accusantium quo officia provident maxime voluptatem, beatae delectus
+        aliquid ipsa perferendis accusamus! Eius, laborum quisquam. Eius soluta deserunt aspernatur
+        tenetur, laudantium quod corrupti natus facilis est ab esse sunt dolore magni cum accusamus
+        nemo. Optio adipisci itaque exercitationem quo nulla, odit eligendi natus est cupiditate
+        aperiam nemo, vero explicabo. Non eveniet ipsum, dolores suscipit sit deserunt doloribus.
+        Dolorum aspernatur iusto, aliquid officiis illo modi vitae. Exercitationem laudantium
+        inventore nemo harum commodi doloribus totam porro aliquam. Quae aliquam iusto neque ipsam
+        non? Consequuntur saepe inventore aliquam!
+        <Button
+          skin="negative"
+          skinVariation="ghost"
+          onClick={() => {
+            setOpen(false);
+          }}>
+          close
+        </Button>
+      </DropdownButton>
+    );
+  },
+};
+
 export const IconButton: Story = {
   render: ({ ...props }): React.ReactElement => (
     <Flex>
       <DropdownButton
         open={props.open}
-        renderButton={({ ref, onOpen }) => (
+        renderButton={({ ref, open }) => (
           <Button
             rootRef={ref}
             skin="secondary"
@@ -87,7 +132,7 @@ export const IconButton: Story = {
                 <IconVerticalDots />
               </Icon>
             }
-            onClick={onOpen}
+            onClick={open}
           />
         )}>
         Content Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nulla est, quidem
@@ -102,7 +147,7 @@ export const IconButton: Story = {
       </DropdownButton>
       <DropdownButton
         open={props.open}
-        renderButton={({ ref, onOpen }) => (
+        renderButton={({ ref, open }) => (
           <Button
             rootRef={ref}
             skin="secondary"
@@ -112,7 +157,7 @@ export const IconButton: Story = {
                 <IconVerticalDots />
               </Icon>
             }
-            onClick={onOpen}
+            onClick={open}
           />
         )}>
         Content Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nulla est, quidem