handle extra props

Author: zemd

.changeset/mighty-chefs-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@zemd/react-slottable": patch
+---
+
+handle extra props from useSlot options

src/use-slot.test.tsx

@@ -87,4 +87,32 @@ describe("useSlot", () => {
 
     expect(container.querySelector("[data-testid='option-div']")).toBeTruthy();
   });
+
+  test("should merge extraProps from third argument", () => {
+    const CustomDiv = (props: React.HTMLProps<HTMLDivElement>) => (
+      <div data-testid="extra-props-div" id="initial-id" {...props} />
+    );
+
+    const props = { slotProps: { root: { id: "props-id" } } };
+
+    const { result } = renderHook(() =>
+      useSlot("root", props, {
+        slot: CustomDiv,
+        id: "custom-id",
+        "aria-label": "custom-label",
+      }),
+    );
+
+    const Component = result.current;
+    const { container } = render(
+      <Component id="default-id">Test Content</Component>,
+    );
+    const element = container.querySelector(
+      "[data-testid='extra-props-div']",
+    ) as HTMLElement;
+
+    expect(element).toHaveAttribute("id", "custom-id");
+    expect(element).toHaveAttribute("aria-label", "custom-label");
+    expect(element).toHaveTextContent("Test Content");
+  });
 });

src/use-slot.tsx

@@ -32,7 +32,8 @@ type SlotPropsProps<T extends Record<string, any>> = {
  */
 export function useSlot<
   ArgSlotType extends ElementType,
-  ArgSlotOptions extends SlotOptions<ArgSlotType>,
+  ArgExtraProps extends Partial<ComponentProps<ArgSlotType>>,
+  ArgSlotOptions extends SlotOptions<ArgSlotType> & ArgExtraProps,
   ReturnComponent extends ArgSlotOptions extends SlotOptions<infer T>
     ? T
     : ElementType,
@@ -42,13 +43,13 @@ export function useSlot<
   props: Prettify<
     SlotsProps<ArgSlotsKeys> & SlotPropsProps<Record<keyof ArgSlotsKeys, any>> // & { [k: string]: any }
   >,
-  options: ArgSlotOptions = {} as ArgSlotOptions,
+  { slot, ...extraProps }: ArgSlotOptions = {} as ArgSlotOptions,
 ): ReturnComponent {
   const { slots, slotProps } = props;
 
   const Slot = React.useMemo(() => {
-    return (slots?.[name] ?? options.slot ?? SlotFragment) as ReturnComponent;
-  }, [name, slots, options.slot]);
+    return (slots?.[name] ?? slot ?? SlotFragment) as ReturnComponent;
+  }, [name, slots, slot]);
 
   return React.useMemo<ReturnComponent>(() => {
     const WrappedComponent: FC<ComponentProps<ReturnComponent>> = (
@@ -57,9 +58,10 @@ export function useSlot<
       const mergedProps: ComponentProps<ReturnComponent> = {
         ...wrappedProps,
         ...slotProps?.[name],
+        ...extraProps,
       };
       return <Slot {...mergedProps} />;
     };
     return WrappedComponent as ReturnComponent;
-  }, [Slot, name, slotProps]);
+  }, [Slot, name, slotProps, extraProps]);
 }