feat: add "name" prop to componentItem override

measuredco · Jan 22, 2024 · 45bbceb · 45bbceb
1 parent 60198ab
commit 45bbceb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 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
@@ -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
@@ -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,15 +57,15 @@ const DrawerItem = ({
   const CustomInner = useMemo(
     () =>
       children ||
-      (({ children }: { children: ReactNode }) => (
+      (({ children, name }: { children: ReactNode; name: string }) => (
         <div className={getClassNameItem("default")}>{children}</div>
       )),
     [children]
   );
 
   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
@@ -44,7 +44,7 @@ export type Overrides = OverridesGeneric<{
     className?: string;
   }>;
   components: RenderFunc;
-  componentItem: RenderFunc;
+  componentItem: RenderFunc<{ children: ReactNode; name: string }>;
   outline: RenderFunc;
   puck: RenderFunc;
 }>;