From 0e442f3e9721fad13b11dc0cd25dff873851e5f1 Mon Sep 17 00:00:00 2001
From: Powerplex <julien.bonnin.dev@gmail.com>
Date: Tue, 28 Nov 2023 16:31:14 +0100
Subject: [PATCH] feat(dropdown): controlled open state

---
 .../components/dropdown/src/Dropdown.doc.mdx  |  6 ++-
 .../dropdown/src/Dropdown.stories.tsx         | 37 +++++++++++++++++++
 .../dropdown/src/DropdownContext.tsx          | 36 ++++++++++++++++--
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/packages/components/dropdown/src/Dropdown.doc.mdx b/packages/components/dropdown/src/Dropdown.doc.mdx
index aefa3faab..4978a3fac 100644
--- a/packages/components/dropdown/src/Dropdown.doc.mdx
+++ b/packages/components/dropdown/src/Dropdown.doc.mdx
@@ -33,10 +33,14 @@ import { Dropdown } from '@spark-ui/dropdown'
 
 <Canvas of={stories.Default} />
 
-### Controlled
+### Controlled value
 
 <Canvas of={stories.Controlled} />
 
+### Controlled open state
+
+<Canvas of={stories.ControlledOpenState} />
+
 ### Custom item
 
 <Canvas of={stories.CustomItem} />
diff --git a/packages/components/dropdown/src/Dropdown.stories.tsx b/packages/components/dropdown/src/Dropdown.stories.tsx
index 2003ab3b4..ae38bc7b7 100644
--- a/packages/components/dropdown/src/Dropdown.stories.tsx
+++ b/packages/components/dropdown/src/Dropdown.stories.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@spark-ui/button'
 import { FormField } from '@spark-ui/form-field'
 import { Tag } from '@spark-ui/tag'
 import { Meta, StoryFn } from '@storybook/react'
@@ -60,6 +61,42 @@ export const Controlled: StoryFn = () => {
   )
 }
 
+export const ControlledOpenState: StoryFn = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="flex flex-col gap-lg">
+      <div className="flex gap-md">
+        <Button design="outlined" intent="success" disabled={open} onClick={() => setOpen(true)}>
+          Open
+        </Button>
+        <Button design="outlined" intent="danger" disabled={!open} onClick={() => setOpen(false)}>
+          Close
+        </Button>
+      </div>
+
+      <div className="w-sz-480 pb-[300px]">
+        <Dropdown open={open} onIsOpenChange={setOpen}>
+          <Dropdown.Trigger aria-label="Book">
+            <Dropdown.Value placeholder="Pick a book" />
+          </Dropdown.Trigger>
+
+          <Dropdown.Popover>
+            <Dropdown.Items>
+              <Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
+              <Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
+              <Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
+              <Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
+              <Dropdown.Item value="book-5">1984</Dropdown.Item>
+              <Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
+            </Dropdown.Items>
+          </Dropdown.Popover>
+        </Dropdown>
+      </div>
+    </div>
+  )
+}
+
 export const CustomItem: StoryFn = _args => {
   return (
     <div className="w-sz-480 pb-[300px]">
diff --git a/packages/components/dropdown/src/DropdownContext.tsx b/packages/components/dropdown/src/DropdownContext.tsx
index 45c15d5f6..fb3b2da16 100644
--- a/packages/components/dropdown/src/DropdownContext.tsx
+++ b/packages/components/dropdown/src/DropdownContext.tsx
@@ -23,9 +23,30 @@ export interface DropdownContextState extends DownshiftState {
 }
 
 export type DropdownContextProps = PropsWithChildren<{
+  /**
+   * The value of the select when initially rendered. Use when you do not need to control the state of the select.
+   */
   defaultValue?: string
+  /**
+   * The controlled value of the select. Should be used in conjunction with `onValueChange`.
+   */
   value?: string
+  /**
+   * Event handler called when the value changes.
+   */
   onValueChange?: (value: string) => void
+  /**
+   * The controlled open state of the select. Must be used in conjunction with `onOpenChange`.
+   */
+  open?: boolean
+  /**
+   * Event handler called when the open state of the select changes.
+   */
+  onIsOpenChange?: (isOpen: boolean) => void
+  /**
+   * The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean
 }>
 
 const DropdownContext = createContext<DropdownContextState | null>(null)
@@ -35,6 +56,9 @@ export const DropdownProvider = ({
   defaultValue,
   value,
   onValueChange,
+  open,
+  onIsOpenChange,
+  defaultOpen,
 }: DropdownContextProps) => {
   const [computedItems, setComputedItems] = useState<ItemsMap>(getItemsFromChildren(children))
   const [hasPopover, setHasPopover] = useState<boolean>(false)
@@ -46,6 +70,7 @@ export const DropdownProvider = ({
 
   const controlledSelectedItem = value ? computedItems.get(value) : undefined
   const controlledDefaultSelectedItem = defaultValue ? computedItems.get(defaultValue) : undefined
+  const controlledDefaultOpen = defaultOpen != null ? defaultOpen : false
 
   const downshift = useSelect({
     items: Array.from(computedItems.values()),
@@ -62,10 +87,13 @@ export const DropdownProvider = ({
         onValueChange?.(selectedItem?.value)
       }
     },
-    // onIsOpenChange?: (changes: UseSelectStateChange<Item>) => void
-    // onHighlightedIndexChange?: (changes: UseSelectStateChange<Item>) => void
-    // onStateChange?: (changes: UseSelectStateChange<Item>) => void
-    // environment?: Environment
+    isOpen: open,
+    onIsOpenChange: ({ isOpen }) => {
+      if (isOpen != null) {
+        onIsOpenChange?.(isOpen)
+      }
+    },
+    initialIsOpen: controlledDefaultOpen,
   })
 
   /**