Fix typecheck

Author: OEvgeny

packages/component/src/Icon/ComponentIcon.tsx

@@ -39,7 +39,7 @@ function BaseComponentIcon(props: InferInput<typeof baseComponentIconPropsSchema
 
 const { component: ComponentIcon, modifierPropsSchema: componentIconModifiersPropsSchema } = createIconComponent(
   styles,
-  ['appearance', 'direction', 'icon'],
+  ['appearance', 'direction', 'icon'] as const,
   BaseComponentIcon
 );
 

packages/component/src/Utils/createIconComponent.tsx

@@ -12,15 +12,19 @@ type ModifierMap<T> = {
   [P in Prefixes<keyof T>]?: SuffixesOf<P, keyof T>;
 };
 
+type SafeModifierList<TCSSModfuleClasses> = keyof ModifierMap<TCSSModfuleClasses> extends never
+  ? string
+  : keyof ModifierMap<TCSSModfuleClasses>;
+
 function createPropsSchema<
   const TCSSModfuleClasses extends CSSModuleClasses,
-  const TModifiers extends Array<keyof ModifierMap<TCSSModfuleClasses>>
->(styles: TCSSModfuleClasses, modifiers: TModifiers) {
+  const TModifiers extends SafeModifierList<TCSSModfuleClasses>
+>(styles: TCSSModfuleClasses, modifiers: TModifiers[]) {
   type CSSModuleModifiers = ModifierMap<TCSSModfuleClasses>;
 
   const props = Object.keys(styles).reduce((acc, key) => {
     const [base, modifier] = key.split('--') as [keyof CSSModuleModifiers, string | undefined];
-    if (modifier && modifiers.includes(base)) {
+    if (modifier && modifiers.includes(base as unknown as TModifiers)) {
       acc.has(base) || acc.set(base, new Set());
       acc.get(base).add(modifier);
     }
@@ -32,8 +36,8 @@ function createPropsSchema<
       Object.fromEntries(
         Array.from(props.entries()).map(([base, modifiers]) => [base, optional(picklist(Array.from(modifiers)))])
       ) as unknown as {
-        [key in TModifiers[number]]: OptionalSchema<
-          PicklistSchema<Array<CSSModuleModifiers[key]>, undefined>,
+        [key in TModifiers]: OptionalSchema<
+          PicklistSchema<Array<key extends keyof CSSModuleModifiers ? CSSModuleModifiers[key] : string>, undefined>,
           undefined
         >;
       }
@@ -44,15 +48,15 @@ function createPropsSchema<
 
 export default function createIconComponent<
   const TProps extends { className?: string | undefined },
-  const TModifiers extends Array<keyof ModifierMap<TCSSModfuleClasses>>,
+  const TModifiers extends SafeModifierList<TCSSModfuleClasses>,
   const TCSSModfuleClasses extends CSSModuleClasses
->(styles: TCSSModfuleClasses, modifiers: TModifiers, BaseIcon: ComponentType<TProps>) {
+>(styles: TCSSModfuleClasses, modifiers: TModifiers[], BaseIcon: ComponentType<TProps>) {
   type CSSModuleModifiers = ModifierMap<TCSSModfuleClasses>;
 
   // Do not bail if no CSS modules TypeScript plugin is provided.
-  type FinalCSSModuleModifiers = keyof CSSModuleModifiers extends never
-    ? Record<keyof TModifiers[number], string>
-    : Pick<CSSModuleModifiers, TModifiers[number]>;
+  type FinalCSSModuleModifiers = TModifiers extends keyof CSSModuleModifiers
+    ? Pick<CSSModuleModifiers, TModifiers>
+    : Partial<Record<TModifiers, string>>;
 
   const modifierPropsSchema = createPropsSchema(styles, modifiers);