fix: autocomplete for string enums with dynamic value not working (#1484

)

* fix: typescript autocomplete for string enums accepting dynamic values not working

* chore: add missing imports

* chore: format and lint changes

* chore: add changeset

.changeset/plenty-lemons-bow.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+fix: autocomplete for string enums with dynamic value not working

packages/ui/src/components/Alert/Alert.tsx

@@ -3,7 +3,7 @@ import { HiX } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors } from "../Flowbite";
 
 export interface FlowbiteAlertTheme {
@@ -24,7 +24,7 @@ export interface FlowbiteAlertCloseButtonTheme {
 
 export interface AlertProps extends Omit<ComponentProps<"div">, "color"> {
   additionalContent?: ReactNode;
-  color?: keyof FlowbiteColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteColors>;
   icon?: FC<ComponentProps<"svg">>;
   onDismiss?: boolean | (() => void);
   rounded?: boolean;

packages/ui/src/components/Avatar/Avatar.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, FC, ReactElement } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
 import type { FlowbiteAvatarGroupTheme } from "./AvatarGroup";
 import { AvatarGroup } from "./AvatarGroup";
@@ -65,9 +65,9 @@ export interface AvatarProps extends Omit<ComponentProps<"div">, "color"> {
   alt?: string;
   bordered?: boolean;
   img?: string | ((props: AvatarImageProps) => ReactElement);
-  color?: keyof AvatarColors;
+  color?: DynamicStringEnumKeysOf<AvatarColors>;
   rounded?: boolean;
-  size?: keyof AvatarSizes;
+  size?: DynamicStringEnumKeysOf<AvatarSizes>;
   stacked?: boolean;
   status?: "away" | "busy" | "offline" | "online";
   statusPosition?: keyof FlowbitePositions;

packages/ui/src/components/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
 
 export interface FlowbiteBadgeTheme {
@@ -26,10 +26,10 @@ export interface BadgeSizes extends Pick<FlowbiteSizes, "xs" | "sm"> {
 }
 
 export interface BadgeProps extends Omit<ComponentProps<"span">, "color"> {
-  color?: keyof FlowbiteColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteColors>;
   href?: string;
   icon?: FC<ComponentProps<"svg">>;
-  size?: keyof BadgeSizes;
+  size?: DynamicStringEnumKeysOf<BadgeSizes>;
   theme?: DeepPartial<FlowbiteBadgeTheme>;
 }
 

packages/ui/src/components/Button/Button.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import type { PolymorphicComponentPropWithRef, PolymorphicRef } from "../../helpers/generic-as-prop";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type {
   FlowbiteBoolean,
   FlowbiteColors,
@@ -71,10 +71,10 @@ export type ButtonProps<T extends ElementType = "button"> = PolymorphicComponent
   T,
   {
     href?: string;
-    color?: keyof FlowbiteColors;
+    color?: DynamicStringEnumKeysOf<FlowbiteColors>;
     fullSized?: boolean;
-    gradientDuoTone?: keyof ButtonGradientDuoToneColors;
-    gradientMonochrome?: keyof ButtonGradientColors;
+    gradientDuoTone?: DynamicStringEnumKeysOf<ButtonGradientDuoToneColors>;
+    gradientMonochrome?: DynamicStringEnumKeysOf<ButtonGradientColors>;
     target?: string;
     isProcessing?: boolean;
     processingLabel?: string;
@@ -83,7 +83,7 @@ export type ButtonProps<T extends ElementType = "button"> = PolymorphicComponent
     outline?: boolean;
     pill?: boolean;
     positionInGroup?: keyof PositionInButtonGroup;
-    size?: keyof ButtonSizes;
+    size?: DynamicStringEnumKeysOf<ButtonSizes>;
     theme?: DeepPartial<FlowbiteButtonTheme>;
   }
 >;

packages/ui/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors } from "../Flowbite";
 
 export interface FlowbiteCheckboxTheme {
@@ -16,7 +16,7 @@ export interface FlowbiteCheckboxRootTheme {
 
 export interface CheckboxProps extends Omit<ComponentProps<"input">, "type" | "ref" | "color"> {
   theme?: DeepPartial<FlowbiteCheckboxTheme>;
-  color?: keyof FlowbiteColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteColors>;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(

packages/ui/src/components/FileInput/FileInput.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { HelperText } from "../HelperText";
 import type { FlowbiteTextInputColors, FlowbiteTextInputSizes } from "../TextInput";
 
@@ -28,9 +28,9 @@ export interface FlowbiteFileInputFieldInputTheme {
 }
 
 export interface FileInputProps extends Omit<ComponentProps<"input">, "type" | "ref" | "color"> {
-  color?: keyof FlowbiteTextInputColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
   helperText?: ReactNode;
-  sizing?: keyof FlowbiteTextInputSizes;
+  sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
   theme?: DeepPartial<FlowbiteFileInputTheme>;
 }
 

packages/ui/src/components/HelperText/HelperText.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors } from "../Flowbite";
 
 export interface FlowbiteHelperTextTheme {
@@ -19,7 +19,7 @@ export interface HelperColors extends Pick<FlowbiteColors, "gray" | "info" | "fa
 }
 
 export interface HelperTextProps extends Omit<ComponentProps<"p">, "color"> {
-  color?: keyof HelperColors;
+  color?: DynamicStringEnumKeysOf<HelperColors>;
   theme?: DeepPartial<FlowbiteHelperTextTheme>;
   value?: string;
 }

packages/ui/src/components/Label/Label.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteStateColors } from "../Flowbite";
 
 export interface FlowbiteLabelTheme {
@@ -21,7 +21,7 @@ export interface LabelColors extends FlowbiteStateColors {
 }
 
 export interface LabelProps extends Omit<ComponentProps<"label">, "color"> {
-  color?: keyof LabelColors;
+  color?: DynamicStringEnumKeysOf<LabelColors>;
   disabled?: boolean;
   theme?: DeepPartial<FlowbiteLabelTheme>;
   value?: string;

packages/ui/src/components/Modal/Modal.tsx

@@ -16,7 +16,7 @@ import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
 import type { FlowbiteModalBodyTheme } from "./ModalBody";
 import { ModalBody } from "./ModalBody";
@@ -56,11 +56,11 @@ export interface ModalSizes extends Omit<FlowbiteSizes, "xs"> {
 
 export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
   onClose?: () => void;
-  position?: keyof ModalPositions;
+  position?: DynamicStringEnumKeysOf<ModalPositions>;
   popup?: boolean;
   root?: HTMLElement;
   show?: boolean;
-  size?: keyof ModalSizes;
+  size?: DynamicStringEnumKeysOf<ModalSizes>;
   dismissible?: boolean;
   theme?: DeepPartial<FlowbiteModalTheme>;
   initialFocus?: number | MutableRefObject<HTMLElement | null>;

packages/ui/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
 
 export interface FlowbiteProgressTheme {
@@ -31,7 +31,7 @@ export interface ProgressProps extends ComponentProps<"div"> {
   labelText?: boolean;
   progress: number;
   progressLabelPosition?: "inside" | "outside";
-  size?: keyof ProgressSizes;
+  size?: DynamicStringEnumKeysOf<ProgressSizes>;
   textLabel?: string;
   textLabelPosition?: "inside" | "outside";
   theme?: DeepPartial<FlowbiteProgressTheme>;

packages/ui/src/components/RangeSlider/RangeSlider.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteTextInputSizes } from "../TextInput";
 
 export interface FlowbiteRangeSliderTheme {
@@ -24,7 +24,7 @@ export interface FlowbiteRangeSliderFieldTheme {
 }
 
 export interface RangeSliderProps extends Omit<ComponentProps<"input">, "ref" | "type"> {
-  sizing?: keyof FlowbiteTextInputSizes;
+  sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
   theme?: DeepPartial<FlowbiteRangeSliderTheme>;
 }
 

packages/ui/src/components/Rating/Rating.tsx

@@ -4,7 +4,7 @@ import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { RatingAdvanced } from "./RatingAdvanced";
 import { RatingContext } from "./RatingContext";
 import type { FlowbiteRatingStarTheme, FlowbiteStarSizes } from "./RatingStar";
@@ -18,7 +18,7 @@ export interface FlowbiteRatingTheme {
 }
 
 export interface RatingProps extends ComponentProps<"div"> {
-  size?: keyof FlowbiteStarSizes;
+  size?: DynamicStringEnumKeysOf<FlowbiteStarSizes>;
   theme?: DeepPartial<FlowbiteRatingTheme>;
 }
 

packages/ui/src/components/Rating/RatingContext.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { createContext, useContext } from "react";
+import { DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteRatingTheme } from "./Rating";
 import type { FlowbiteStarSizes } from "./RatingStar";
 
 export type RatingContext = {
   theme: FlowbiteRatingTheme;
-  size?: keyof FlowbiteStarSizes;
+  size?: DynamicStringEnumKeysOf<FlowbiteStarSizes>;
 };
 
 export const RatingContext = createContext<RatingContext | undefined>(undefined);

packages/ui/src/components/Select/Select.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
 import { HelperText } from "../HelperText";
 
@@ -37,11 +37,11 @@ export interface SelectSizes extends Pick<FlowbiteSizes, "sm" | "md" | "lg"> {
 
 export interface SelectProps extends Omit<ComponentProps<"select">, "color" | "ref"> {
   addon?: ReactNode;
-  color?: keyof SelectColors;
+  color?: DynamicStringEnumKeysOf<SelectColors>;
   helperText?: ReactNode;
   icon?: FC<ComponentProps<"svg">>;
   shadow?: boolean;
-  sizing?: keyof SelectSizes;
+  sizing?: DynamicStringEnumKeysOf<SelectSizes>;
   theme?: DeepPartial<FlowbiteSelectTheme>;
 }
 

packages/ui/src/components/Sidebar/SidebarCTA.tsx

@@ -3,7 +3,7 @@
 import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors } from "../Flowbite";
 import { useSidebarContext } from "./SidebarContext";
 
@@ -13,7 +13,7 @@ export interface FlowbiteSidebarCTATheme {
 }
 
 export interface SidebarCTAProps extends Omit<ComponentProps<"div">, "color"> {
-  color?: keyof FlowbiteSidebarCTAColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteSidebarCTAColors>;
   theme?: DeepPartial<FlowbiteSidebarCTATheme>;
 }
 

packages/ui/src/components/Sidebar/SidebarItem.tsx

@@ -4,7 +4,7 @@ import type { ComponentProps, ElementType, FC, PropsWithChildren, ReactNode } fr
 import { forwardRef, useId } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import { Badge } from "../Badge";
 import type { FlowbiteColors } from "../Flowbite";
 import { Tooltip } from "../Tooltip";
@@ -35,7 +35,7 @@ export interface SidebarItemProps extends Omit<ComponentProps<"div">, "ref">, Re
   href?: string;
   icon?: FC<ComponentProps<"svg">>;
   label?: string;
-  labelColor?: keyof SidebarItemLabelColors;
+  labelColor?: DynamicStringEnumKeysOf<SidebarItemLabelColors>;
   theme?: DeepPartial<FlowbiteSidebarItemTheme>;
 }
 

packages/ui/src/components/Spinner/Spinner.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
 
 export interface FlowbiteSpinnerTheme {
@@ -31,9 +31,9 @@ export interface SpinnerSizes extends Pick<FlowbiteSizes, "xs" | "sm" | "md" | "
 }
 
 export interface SpinnerProps extends Omit<ComponentProps<"span">, "color"> {
-  color?: keyof SpinnerColors;
+  color?: DynamicStringEnumKeysOf<SpinnerColors>;
   light?: boolean;
-  size?: keyof SpinnerSizes;
+  size?: DynamicStringEnumKeysOf<SpinnerSizes>;
   theme?: DeepPartial<FlowbiteSpinnerTheme>;
 }
 

packages/ui/src/components/TextInput/TextInput.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
 import { HelperText } from "../HelperText";
 
@@ -43,12 +43,12 @@ export interface FlowbiteTextInputSizes extends Pick<FlowbiteSizes, "sm" | "md"
 
 export interface TextInputProps extends Omit<ComponentProps<"input">, "ref" | "color"> {
   addon?: ReactNode;
-  color?: keyof FlowbiteTextInputColors;
+  color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
   helperText?: ReactNode;
   icon?: FC<ComponentProps<"svg">>;
   rightIcon?: FC<ComponentProps<"svg">>;
   shadow?: boolean;
-  sizing?: keyof FlowbiteTextInputSizes;
+  sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
   theme?: DeepPartial<FlowbiteTextInputTheme>;
 }
 

packages/ui/src/components/Textarea/Textarea.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
-import type { DeepPartial } from "../../types";
+import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
 import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite";
 import { HelperText } from "../HelperText";
 
@@ -18,7 +18,7 @@ export interface TextareaColors extends Pick<FlowbiteColors, "gray" | "info" | "
 }
 
 export interface TextareaProps extends Omit<ComponentProps<"textarea">, "color" | "ref"> {
-  color?: keyof TextareaColors;
+  color?: DynamicStringEnumKeysOf<TextareaColors>;
   helperText?: ReactNode;
   shadow?: boolean;
   theme?: DeepPartial<FlowbiteTextareaTheme>;