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>;