clava 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # clava
 
+## 0.1.4
+
+### Patch Changes
+
+- 6d821f2: Updated component props to support `null` as `class`, `className`, and `style` values.
+
 ## 0.1.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import * as CSS from "csstype";
 type ClassValue = string | number | boolean | null | undefined | void | ClassValue[];
 type JSXCSSProperties = CSS.Properties<string | number>;
 type HTMLCSSProperties = CSS.PropertiesHyphen<string | number>;
+type StyleProperty = JSXCSSProperties | HTMLCSSProperties | string;
 interface JSXProps {
   className: string;
   style: JSXCSSProperties;
@@ -23,7 +24,10 @@ interface StyleProps {
   htmlObj: HTMLObjProps;
 }
 type ComponentResult = JSXProps | HTMLProps | HTMLObjProps;
-type ComponentProps<V$1 = {}> = VariantValues<V$1> & Partial<ComponentResult>;
+type AllComponentResultKeys = keyof JSXProps | keyof HTMLProps | keyof HTMLObjProps;
+type ComponentResultValue<K$1 extends AllComponentResultKeys> = K$1 extends "style" ? StyleProperty : K$1 extends "className" ? string : K$1 extends "class" ? string : never;
+type NullableComponentResult = { [K in AllComponentResultKeys]?: ComponentResultValue<K> | null };
+type ComponentProps<V$1 = {}> = VariantValues<V$1> & NullableComponentResult;
 type GetVariants<V$1> = (variants?: VariantValues<V$1>) => VariantValues<V$1>;
 type KeySourceArray = readonly string[];
 type KeySourceComponent = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clava",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Clava library",
   "keywords": [
     "class variance",
@@ -36,8 +36,8 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "csstype": "^3.2.3"
+    "clsx": "^2.0.0",
+    "csstype": "^3.0.0"
   },
   "scripts": {
     "build": "rolldown -c",

package/src/test.ts

@@ -336,6 +336,18 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
+    test("merge null class from props", () => {
+      const component = getModalComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ class: null });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar") });
+    });
+
+    test("merge null className from props", () => {
+      const component = getModalComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ className: null });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar") });
+    });
+
     test("empty style", () => {
       const component = getModalComponent(mode, cv({ style: {} }));
       const props = component();
@@ -439,6 +451,18 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
+    test("merge null style from props", () => {
+      const component = getModalComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: null });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+      });
+    });
+
     test("variant no value empty class", () => {
       const component = getModalComponent(
         mode,

package/src/types.ts

@@ -40,8 +40,24 @@ export interface StyleProps {
 
 export type ComponentResult = JSXProps | HTMLProps | HTMLObjProps;
 
-export type ComponentProps<V = {}> = VariantValues<V> &
-  Partial<ComponentResult>;
+type AllComponentResultKeys =
+  | keyof JSXProps
+  | keyof HTMLProps
+  | keyof HTMLObjProps;
+
+type ComponentResultValue<K extends AllComponentResultKeys> = K extends "style"
+  ? StyleProperty
+  : K extends "className"
+    ? string
+    : K extends "class"
+      ? string
+      : never;
+
+export type NullableComponentResult = {
+  [K in AllComponentResultKeys]?: ComponentResultValue<K> | null;
+};
+
+export type ComponentProps<V = {}> = VariantValues<V> & NullableComponentResult;
 
 export type GetVariants<V> = (variants?: VariantValues<V>) => VariantValues<V>;