fix: extended tv without slots (#137)

nextui-org · Jan 3, 2024 · 4eab714 · 4eab714
1 parent 0ff1820
commit 4eab714
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -2837,6 +2837,22 @@ describe("Tailwind Variants (TV) - Extends", () => {
     expect(emptyResultWithoutMerge).toBe(undefined);
     expect(emptyResultWithMerge).toBe(undefined);
   });
+
+  test("should support parent w/slots when base does not have slots", () => {
+    const menuBase = tv({base: "menuBase"});
+    const menu = tv({
+      extend: menuBase,
+      base: "menu",
+      slots: {
+        title: "title",
+      },
+    });
+
+    const {base, title} = menu();
+
+    expectTv(base(), ["menuBase", "menu"]);
+    expectTv(title(), ["title"]);
+  });
 });
 
 describe("Tailwind Variants (TV) - Tailwind Merge", () => {

diff --git a/src/index.js b/src/index.js
@@ -81,24 +81,25 @@ export const tv = (options, configProp) => {
     cachedTwMergeConfig = config.twMergeConfig;
   }
 
+  const isExtendedSlotsEmpty = isEmptyObject(extend?.slots);
   const componentSlots = !isEmptyObject(slotProps)
     ? {
         // add "base" to the slots object
-        base: options?.base,
+        base: cnBase(options?.base, isExtendedSlotsEmpty && extend?.base),
         ...slotProps,
       }
     : {};
 
   // merge slots with the "extended" slots
-  const slots = isEmptyObject(extend?.slots)
+  const slots = isExtendedSlotsEmpty
     ? componentSlots
     : joinObjects(
         {...extend?.slots},
         isEmptyObject(componentSlots) ? {base: options?.base} : componentSlots,
       );
 
   const component = (props) => {
-    if (isEmptyObject(variants) && isEmptyObject(slotProps) && isEmptyObject(extend?.slots)) {
+    if (isEmptyObject(variants) && isEmptyObject(slotProps) && isExtendedSlotsEmpty) {
       return cn(base, props?.class, props?.className)(config);
     }
 
@@ -379,7 +380,7 @@ export const tv = (options, configProp) => {
     };
 
     // with slots
-    if (!isEmptyObject(slotProps) || !isEmptyObject(extend?.slots)) {
+    if (!isEmptyObject(slotProps) || !isExtendedSlotsEmpty) {
       const slotsFns = {};
 
       if (typeof slots === "object" && !isEmptyObject(slots)) {