From 45bbceb1d2805455fa38f5bce91d892f6acacfbf Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Sat, 20 Jan 2024 22:33:22 +0100
Subject: [PATCH] feat: add "name" prop to componentItem override

---
 .../pages/docs/api-reference/overrides/component-item.mdx  | 7 ++++++-
 packages/core/components/Drawer/index.tsx                  | 6 +++---
 packages/core/types/Overrides.ts                           | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/docs/pages/docs/api-reference/overrides/component-item.mdx b/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
index 07ef9cc98c..b91c558154 100644
--- a/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
+++ b/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
@@ -8,7 +8,7 @@ Override an individual item within the component list.
 
 ```tsx copy
 const overrides = {
-  componentList: ({ children }) => <div>{children}</div>,
+  componentList: ({ name }) => <div>{name}</div>,
 };
 ```
 
@@ -17,7 +17,12 @@ const overrides = {
 | Prop                    | Example     | Type      |
 | ----------------------- | ----------- | --------- |
 | [`children`](#children) | `<input />` | ReactNode |
+| [`name`](#name)         | `"Button"`  | ReactNode |
 
 ### `children`
 
 The default node for the component item.
+
+### `name`
+
+THe name of the component item.
diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
index 20228a6fa7..dc0c63b687 100644
--- a/packages/core/components/Drawer/index.tsx
+++ b/packages/core/components/Drawer/index.tsx
@@ -46,7 +46,7 @@ const DrawerItem = ({
   index,
 }: {
   name: string;
-  children?: (props: { children: ReactNode }) => ReactElement;
+  children?: (props: { children: ReactNode; name: string }) => ReactElement;
   id?: string;
   index: number;
 }) => {
@@ -57,7 +57,7 @@ const DrawerItem = ({
   const CustomInner = useMemo(
     () =>
       children ||
-      (({ children }: { children: ReactNode }) => (
+      (({ children, name }: { children: ReactNode; name: string }) => (
         <div className={getClassNameItem("default")}>{children}</div>
       )),
     [children]
@@ -65,7 +65,7 @@ const DrawerItem = ({
 
   return (
     <DrawerDraggable id={resolvedId} index={index}>
-      <CustomInner>
+      <CustomInner name={name}>
         <div className={getClassNameItem("draggableWrapper")}>
           <div className={getClassNameItem("draggable")}>
             <div className={getClassNameItem("name")}>{name}</div>
diff --git a/packages/core/types/Overrides.ts b/packages/core/types/Overrides.ts
index 90bad86fa7..f621abfbae 100644
--- a/packages/core/types/Overrides.ts
+++ b/packages/core/types/Overrides.ts
@@ -44,7 +44,7 @@ export type Overrides = OverridesGeneric<{
     className?: string;
   }>;
   components: RenderFunc;
-  componentItem: RenderFunc;
+  componentItem: RenderFunc<{ children: ReactNode; name: string }>;
   outline: RenderFunc;
   puck: RenderFunc;
 }>;