fix: align Drawer behaviour and docs with expectation

measuredco · May 30, 2024 · e2cd445 · e2cd445
1 parent 9a55489
commit e2cd445
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/apps/docs/pages/docs/api-reference/components/drawer.mdx b/apps/docs/pages/docs/api-reference/components/drawer.mdx
@@ -4,13 +4,17 @@ title: <Drawer>
 
 import { PuckPreview } from "@/docs/components/Preview";
 import { Drawer } from "@/core/components/Drawer";
+import { Puck } from "@/core/components/Puck";
 
 # \<Drawer\>
 
-A reference list of items that can be dragged into a droppable area, normally [`<Puck.Preview>`](puck-preview). Used for composing custom Puck UIs.
+A reference list of items that can be dragged into a [`<Puck.Preview>`](puck-preview). Used for composing custom Puck UIs.
 
-<PuckPreview config={{}} data={{ root: { props: {} }, content: [] }}>
-  <Drawer>
+<PuckPreview
+  config={{ components: { Orange: { render: () => <div>Orange</div> } } }}
+  data={{ root: { props: {} }, content: [] }}
+>
+  <Drawer droppableId="example">
     <Drawer.Item name="Orange" index={0} />
   </Drawer>
 </PuckPreview>
@@ -45,11 +49,11 @@ A React node representing the contents of the `<Drawer>`. Will likely contain [`
 
 ## Optional props
 
-### `id`
+### `droppableId`
 
 Set a custom ID for the underlying [Droppable](https://github.com/hello-pangea/dnd/blob/main/docs/api/droppable.md).
 
 - Must be unique.
-- When this id starts with `component-list`, its children can be dragged into a [`<Puck.Preview>`](puck-preview).
+- Will be prefixed with `component-list:`.
 
-Defaults to `component-list`.
+Defaults to `drawer`.
diff --git a/packages/core/components/ComponentList/index.tsx b/packages/core/components/ComponentList/index.tsx
@@ -66,7 +66,7 @@ const ComponentList = ({
         </button>
       )}
       <div className={getClassName("content")}>
-        <Drawer droppableId={`component-list${title ? `:${title}` : ""}`}>
+        <Drawer droppableId={title}>
           {children ||
             Object.keys(config.components).map((componentKey, i) => {
               return (

diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
@@ -83,13 +83,15 @@ const DrawerItem = ({
 
 export const Drawer = ({
   children,
-  droppableId = "component-list",
+  droppableId: _droppableId = "default",
   direction = "vertical",
 }: {
   children: ReactNode;
   droppableId?: string;
   direction?: "vertical" | "horizontal";
 }) => {
+  const droppableId = `component-list:${_droppableId}`;
+
   return (
     <drawerContext.Provider value={{ droppableId }}>
       <Droppable droppableId={droppableId} isDropDisabled direction={direction}>