Allow undefined value for class name prop (#8)

* allowing undefined and null values as valid className prop

Author: zemd

.changeset/little-panthers-fetch.md

@@ -0,0 +1,5 @@
+---
+"@zemd/react-slottable": patch
+---
+
+allowing undefined and null values as a valid values for className prop

src/slottable.test.tsx

@@ -1,19 +1,19 @@
 import { slottable } from "./slottable";
 import { render } from "@testing-library/react";
-import type { TSlottablePropsFactory } from "dist";
+import type { TSlottablePropsFactory } from "./types";
 import { describe, test, expect } from "vitest";
 
 describe("slottable", () => {
   test("should render children in specific slots", () => {
     const Component = slottable<"div", TSlottablePropsFactory<object>>(
       ({ children }) => {
         return <div>{children}</div>;
-      },
+      }
     );
     const { getByText } = render(
       <Component>
         <div data-testid="test-child">Test child</div>
-      </Component>,
+      </Component>
     );
     expect(typeof Component).toBe("object"); // slottable returns Exotic component
     expect(getByText("Test child")).toBeInTheDocument();
@@ -24,8 +24,38 @@ describe("slottable", () => {
       ({ children }) => {
         return <div>{children}</div>;
       },
-      "TestComponent",
+      "TestComponent"
     );
     expect(Component.displayName).toBe("TestComponent");
   });
+
+  test("should accept undefined as a valid value for className prop", () => {
+    const Component = slottable<"div", TSlottablePropsFactory<object>>(
+      ({ children }) => {
+        return <div>{children}</div>;
+      }
+    );
+    const { getByText } = render(
+      <Component className={undefined}>
+        <div data-testid="test-child">Test child 1</div>
+      </Component>
+    );
+    expect(typeof Component).toBe("object"); // slottable returns Exotic component
+    expect(getByText("Test child 1")).toBeInTheDocument();
+  });
+
+  test("should accept null as a valid value for className prop", () => {
+    const Component = slottable<"div", TSlottablePropsFactory<object>>(
+      ({ children }) => {
+        return <div>{children}</div>;
+      }
+    );
+    const { getByText } = render(
+      <Component className={null}>
+        <div data-testid="test-child">Test child 2</div>
+      </Component>
+    );
+    expect(typeof Component).toBe("object"); // slottable returns Exotic component
+    expect(getByText("Test child 2")).toBeInTheDocument();
+  });
 });

src/types.ts

@@ -168,7 +168,7 @@ export type PropsWithComponent<
  * Common props for components that usually all components have.
  */
 export interface TCommonProps {
-  className?: string;
+  className?: string | undefined | null;
   style?: CSSProperties;
   ref?: Ref<any>;
 }