How do I remove null as a valid variant?

[VapidLinus]

I'm typing a button that has a variant called "variant" for accent/primary/secondary etc. I've made "accent" the default variant.

However, the type now includes a null variant:

If I leave out the "variant" prop, the styling defaults to the "accent" variant which is what I expect. But if I enter null, no styling is applied for the variant.

I do not want null to be an option. I only expect undefined along with the other variants to be an option. I do not want to make the property required.

The null variant also shows up in Storybook which is not what I want:

Is there a way to get rid of the null variant?

[joe-bell]

Answered: #97 (comment)

[joe-bell]

Update: currently exploring "unset" keyword in cva@1.0.0

---

The behaviour of null was defined to reflect the behaviour in Stitches.js — to disable the variant altogether — however I agree with you this is fairly confusing without that prior context

Changing this would be a breaking change so I’ll need to figure out the best way to approach this and batch in with some other ideas I have

I’m thinking instead something like:

button({ variant: “unset” })

(which would be opt-in of course)

[JameelKhan9]

Having a similar issue as I am trying to use size as an index which null breaks, instead having to override the null type definition provided by CVA.

The current workaround is to use this typescript utility to wrap the VariantProps from CVA:
https://bobbyhadz.com/blog/typescript-remove-null-and-undefined-from-type#using-the-nonnullable-type-recursively

Edit: @joe-bell The current workaround for the null type causes issues with React Prop defaults, as typescript is no longer seeing the default value applied as optional.

[joe-bell]

Answered: #97 (comment)

[akomm]

I don't want any variants to be nullable and some to be required.

This is how I currently reduce the manual labor of doing it at once, without having to nest the types at place of usage:

import {VariantProps as CvaVariantProps} from "class-variance-authority"

type Require<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
type NonNullableProps<T> = {[P in keyof T]: NonNullable<T[P]>}

// 1. just make them all nonNullable
export type VariantProps<F extends (...args: any[]) => any> = NonNullableProps<
  CvaVariantProps<F>
>

// 2. also speficy the required props
export type RequiredVariantProps<
  F extends (...args: any[]) => any,
  K extends keyof CvaVariantProps<F>
> = NonNullableProps<Require<CvaVariantProps<F>, K>>

Not sure how efficient it is and whether TS optimizes calculations, when it has the same expression twice (CvaVariantProps<F> in 2.)
But I don't see another way to do it in order for K to have validation and auto completion.

usage:

// A all: non-nullable, "bar" and "foobar" required
type A = RequiredVariantProps<typeof foo, "bar" | "foobar">
// B all: non-nullable, none: required
type B = VariantProps<typeof foo>