fix: The compoundSlots does not accept an array in the property

nextui-org · Sep 5, 2023 · de08348 · de08348
1 parent a9753ac
commit de08348
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/__tests__/tv.test.ts b/src/__tests__/tv.test.ts
@@ -766,6 +766,35 @@ describe("Tailwind Variants (TV) - Slots", () => {
     expectTv(subtitle({color: "secondary"}), ["text-xl", "color--secondary-subtitle", "truncate"]);
   });
 
+  test("should support slot level variant and array variants overrides - compoundSlots", () => {
+    const menu = tv({
+      slots: {
+        base: "flex flex-wrap",
+        cursor: ["absolute", "flex", "overflow-visible"],
+      },
+      variants: {
+        size: {
+          xs: {},
+          sm: {},
+        },
+      },
+      compoundSlots: [
+        {
+          slots: ["base"],
+          size: ["xs", "sm"],
+          class: "w-7 h-7 text-xs",
+        },
+      ],
+    });
+
+    const {base, cursor} = menu();
+
+    expect(base()).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({size: "xs"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(base({size: "sm"})).toEqual("flex flex-wrap w-7 h-7 text-xs");
+    expect(cursor()).toEqual("absolute flex overflow-visible");
+  });
+
   test("should support slot level variant overrides - compoundVariants", () => {
     const menu = tv({
       base: "text-3xl",

diff --git a/src/index.js b/src/index.js
@@ -347,6 +347,11 @@ export const tv = (options, configProp) => {
         className: slotClassName,
         ...slotVariants
       } of compoundSlots) {
+        for (const slotName of slots) {
+          result[slotName] = result[slotName] || [];
+          result[slotName].push([slotClass, slotClassName]);
+        }
+
         if (!isEmptyObject(slotVariants)) {
           let isValid = true;
 
@@ -363,11 +368,6 @@ export const tv = (options, configProp) => {
             continue;
           }
         }
-
-        for (const slotName of slots) {
-          result[slotName] = result[slotName] || [];
-          result[slotName].push([slotClass, slotClassName]);
-        }
       }
 
       return result;