[Bug]: TypeScript error for Theme's theme prop

[ecrvich]

Package

@carbon/react

Browser

No response

Package version

1.40

React version

17

Description

Here's a piece of my own code:

const [userTheme, setUserTheme] = useState<string>("white");
...
<Theme theme={userTheme}>

This is now a TS error because the theme prop is typed as a list of specific strings, but sadly is not exported anywhere that I can find. Here is the only place I've found it defined in your source:

interface GlobalThemeProps {
    theme?: 'white' | 'g10' | 'g90' | 'g100';
    children?: React.ReactNode;
}

To workaround this, end users have to make their own type definition by copy/pasting the string values, like this:

export type CarbonThemeType = "white" | "g10" | "g90" | "g100";

And then to get rid of the error:

const [userTheme, setUserTheme] = useState<CarbonThemeType>("white");

Reproduction/example

see description

Steps to reproduce

see description

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

CDD Hub

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ecrvich]

Exact same problem for the id prop of TableBatchActions.defaultProps.translateWithId(), although I can find no existence of the allowed strings anywhere in the @carbon source folder. So now we have this defined locally as well:

export type CarbonTranslateIds = "carbon.table.batch.cancel" | "carbon.table.batch.items.selected" | "carbon.table.batch.item.selected" | "carbon.table.batch.selectAll";

[lee-chase]

Is there a reason Carbon does not simply export a type for this?