Skip to content

Commit 38913e5

Browse files
KRTirthoKRTirtho
authored
fix: autocomplete for string enums with dynamic value not working (themesberg#1484)
* fix: typescript autocomplete for string enums accepting dynamic values not working * chore: add missing imports * chore: format and lint changes * chore: add changeset
1 parent a044264 commit 38913e5

File tree

22 files changed

+64
-50
lines changed

22 files changed

+64
-50
lines changed

‎.changeset/plenty-lemons-bow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"flowbite-react": patch
3+
---
4+
5+
fix: autocomplete for string enums with dynamic value not working

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { HiX } from "react-icons/hi";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteColors } from "../Flowbite";
88

99
export interface FlowbiteAlertTheme {
@@ -24,7 +24,7 @@ export interface FlowbiteAlertCloseButtonTheme {
2424

2525
export interface AlertProps extends Omit<ComponentProps<"div">, "color"> {
2626
additionalContent?: ReactNode;
27-
color?: keyof FlowbiteColors;
27+
color?: DynamicStringEnumKeysOf<FlowbiteColors>;
2828
icon?: FC<ComponentProps<"svg">>;
2929
onDismiss?: boolean | (() => void);
3030
rounded?: boolean;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps, FC, ReactElement } from "react";
22
import { twMerge } from "tailwind-merge";
33
import { mergeDeep } from "../../helpers/merge-deep";
44
import { getTheme } from "../../theme-store";
5-
import type { DeepPartial } from "../../types";
5+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
66
import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
77
import type { FlowbiteAvatarGroupTheme } from "./AvatarGroup";
88
import { AvatarGroup } from "./AvatarGroup";
@@ -65,9 +65,9 @@ export interface AvatarProps extends Omit<ComponentProps<"div">, "color"> {
6565
alt?: string;
6666
bordered?: boolean;
6767
img?: string | ((props: AvatarImageProps) => ReactElement);
68-
color?: keyof AvatarColors;
68+
color?: DynamicStringEnumKeysOf<AvatarColors>;
6969
rounded?: boolean;
70-
size?: keyof AvatarSizes;
70+
size?: DynamicStringEnumKeysOf<AvatarSizes>;
7171
stacked?: boolean;
7272
status?: "away" | "busy" | "offline" | "online";
7373
statusPosition?: keyof FlowbitePositions;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
22
import { twMerge } from "tailwind-merge";
33
import { mergeDeep } from "../../helpers/merge-deep";
44
import { getTheme } from "../../theme-store";
5-
import type { DeepPartial } from "../../types";
5+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
66
import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
77

88
export interface FlowbiteBadgeTheme {
@@ -26,10 +26,10 @@ export interface BadgeSizes extends Pick<FlowbiteSizes, "xs" | "sm"> {
2626
}
2727

2828
export interface BadgeProps extends Omit<ComponentProps<"span">, "color"> {
29-
color?: keyof FlowbiteColors;
29+
color?: DynamicStringEnumKeysOf<FlowbiteColors>;
3030
href?: string;
3131
icon?: FC<ComponentProps<"svg">>;
32-
size?: keyof BadgeSizes;
32+
size?: DynamicStringEnumKeysOf<BadgeSizes>;
3333
theme?: DeepPartial<FlowbiteBadgeTheme>;
3434
}
3535

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
44
import type { PolymorphicComponentPropWithRef, PolymorphicRef } from "../../helpers/generic-as-prop";
55
import { mergeDeep } from "../../helpers/merge-deep";
66
import { getTheme } from "../../theme-store";
7-
import type { DeepPartial } from "../../types";
7+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
88
import type {
99
FlowbiteBoolean,
1010
FlowbiteColors,
@@ -71,10 +71,10 @@ export type ButtonProps<T extends ElementType = "button"> = PolymorphicComponent
7171
T,
7272
{
7373
href?: string;
74-
color?: keyof FlowbiteColors;
74+
color?: DynamicStringEnumKeysOf<FlowbiteColors>;
7575
fullSized?: boolean;
76-
gradientDuoTone?: keyof ButtonGradientDuoToneColors;
77-
gradientMonochrome?: keyof ButtonGradientColors;
76+
gradientDuoTone?: DynamicStringEnumKeysOf<ButtonGradientDuoToneColors>;
77+
gradientMonochrome?: DynamicStringEnumKeysOf<ButtonGradientColors>;
7878
target?: string;
7979
isProcessing?: boolean;
8080
processingLabel?: string;
@@ -83,7 +83,7 @@ export type ButtonProps<T extends ElementType = "button"> = PolymorphicComponent
8383
outline?: boolean;
8484
pill?: boolean;
8585
positionInGroup?: keyof PositionInButtonGroup;
86-
size?: keyof ButtonSizes;
86+
size?: DynamicStringEnumKeysOf<ButtonSizes>;
8787
theme?: DeepPartial<FlowbiteButtonTheme>;
8888
}
8989
>;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteColors } from "../Flowbite";
88

99
export interface FlowbiteCheckboxTheme {
@@ -16,7 +16,7 @@ export interface FlowbiteCheckboxRootTheme {
1616

1717
export interface CheckboxProps extends Omit<ComponentProps<"input">, "type" | "ref" | "color"> {
1818
theme?: DeepPartial<FlowbiteCheckboxTheme>;
19-
color?: keyof FlowbiteColors;
19+
color?: DynamicStringEnumKeysOf<FlowbiteColors>;
2020
}
2121

2222
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import { HelperText } from "../HelperText";
88
import type { FlowbiteTextInputColors, FlowbiteTextInputSizes } from "../TextInput";
99

@@ -28,9 +28,9 @@ export interface FlowbiteFileInputFieldInputTheme {
2828
}
2929

3030
export interface FileInputProps extends Omit<ComponentProps<"input">, "type" | "ref" | "color"> {
31-
color?: keyof FlowbiteTextInputColors;
31+
color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
3232
helperText?: ReactNode;
33-
sizing?: keyof FlowbiteTextInputSizes;
33+
sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
3434
theme?: DeepPartial<FlowbiteFileInputTheme>;
3535
}
3636

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
22
import { twMerge } from "tailwind-merge";
33
import { mergeDeep } from "../../helpers/merge-deep";
44
import { getTheme } from "../../theme-store";
5-
import type { DeepPartial } from "../../types";
5+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
66
import type { FlowbiteColors } from "../Flowbite";
77

88
export interface FlowbiteHelperTextTheme {
@@ -19,7 +19,7 @@ export interface HelperColors extends Pick<FlowbiteColors, "gray" | "info" | "fa
1919
}
2020

2121
export interface HelperTextProps extends Omit<ComponentProps<"p">, "color"> {
22-
color?: keyof HelperColors;
22+
color?: DynamicStringEnumKeysOf<HelperColors>;
2323
theme?: DeepPartial<FlowbiteHelperTextTheme>;
2424
value?: string;
2525
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
22
import { twMerge } from "tailwind-merge";
33
import { mergeDeep } from "../../helpers/merge-deep";
44
import { getTheme } from "../../theme-store";
5-
import type { DeepPartial } from "../../types";
5+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
66
import type { FlowbiteStateColors } from "../Flowbite";
77

88
export interface FlowbiteLabelTheme {
@@ -21,7 +21,7 @@ export interface LabelColors extends FlowbiteStateColors {
2121
}
2222

2323
export interface LabelProps extends Omit<ComponentProps<"label">, "color"> {
24-
color?: keyof LabelColors;
24+
color?: DynamicStringEnumKeysOf<LabelColors>;
2525
disabled?: boolean;
2626
theme?: DeepPartial<FlowbiteLabelTheme>;
2727
value?: string;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
1616
import { twMerge } from "tailwind-merge";
1717
import { mergeDeep } from "../../helpers/merge-deep";
1818
import { getTheme } from "../../theme-store";
19-
import type { DeepPartial } from "../../types";
19+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
2020
import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
2121
import type { FlowbiteModalBodyTheme } from "./ModalBody";
2222
import { ModalBody } from "./ModalBody";
@@ -56,11 +56,11 @@ export interface ModalSizes extends Omit<FlowbiteSizes, "xs"> {
5656

5757
export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
5858
onClose?: () => void;
59-
position?: keyof ModalPositions;
59+
position?: DynamicStringEnumKeysOf<ModalPositions>;
6060
popup?: boolean;
6161
root?: HTMLElement;
6262
show?: boolean;
63-
size?: keyof ModalSizes;
63+
size?: DynamicStringEnumKeysOf<ModalSizes>;
6464
dismissible?: boolean;
6565
theme?: DeepPartial<FlowbiteModalTheme>;
6666
initialFocus?: number | MutableRefObject<HTMLElement | null>;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useId } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
88

99
export interface FlowbiteProgressTheme {
@@ -31,7 +31,7 @@ export interface ProgressProps extends ComponentProps<"div"> {
3131
labelText?: boolean;
3232
progress: number;
3333
progressLabelPosition?: "inside" | "outside";
34-
size?: keyof ProgressSizes;
34+
size?: DynamicStringEnumKeysOf<ProgressSizes>;
3535
textLabel?: string;
3636
textLabelPosition?: "inside" | "outside";
3737
theme?: DeepPartial<FlowbiteProgressTheme>;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteTextInputSizes } from "../TextInput";
88

99
export interface FlowbiteRangeSliderTheme {
@@ -24,7 +24,7 @@ export interface FlowbiteRangeSliderFieldTheme {
2424
}
2525

2626
export interface RangeSliderProps extends Omit<ComponentProps<"input">, "ref" | "type"> {
27-
sizing?: keyof FlowbiteTextInputSizes;
27+
sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
2828
theme?: DeepPartial<FlowbiteRangeSliderTheme>;
2929
}
3030

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { ComponentProps, FC } from "react";
44
import { twMerge } from "tailwind-merge";
55
import { mergeDeep } from "../../helpers/merge-deep";
66
import { getTheme } from "../../theme-store";
7-
import type { DeepPartial } from "../../types";
7+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
88
import { RatingAdvanced } from "./RatingAdvanced";
99
import { RatingContext } from "./RatingContext";
1010
import type { FlowbiteRatingStarTheme, FlowbiteStarSizes } from "./RatingStar";
@@ -18,7 +18,7 @@ export interface FlowbiteRatingTheme {
1818
}
1919

2020
export interface RatingProps extends ComponentProps<"div"> {
21-
size?: keyof FlowbiteStarSizes;
21+
size?: DynamicStringEnumKeysOf<FlowbiteStarSizes>;
2222
theme?: DeepPartial<FlowbiteRatingTheme>;
2323
}
2424

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
"use client";
22

33
import { createContext, useContext } from "react";
4+
import { DynamicStringEnumKeysOf } from "../../types";
45
import type { FlowbiteRatingTheme } from "./Rating";
56
import type { FlowbiteStarSizes } from "./RatingStar";
67

78
export type RatingContext = {
89
theme: FlowbiteRatingTheme;
9-
size?: keyof FlowbiteStarSizes;
10+
size?: DynamicStringEnumKeysOf<FlowbiteStarSizes>;
1011
};
1112

1213
export const RatingContext = createContext<RatingContext | undefined>(undefined);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
88
import { HelperText } from "../HelperText";
99

@@ -37,11 +37,11 @@ export interface SelectSizes extends Pick<FlowbiteSizes, "sm" | "md" | "lg"> {
3737

3838
export interface SelectProps extends Omit<ComponentProps<"select">, "color" | "ref"> {
3939
addon?: ReactNode;
40-
color?: keyof SelectColors;
40+
color?: DynamicStringEnumKeysOf<SelectColors>;
4141
helperText?: ReactNode;
4242
icon?: FC<ComponentProps<"svg">>;
4343
shadow?: boolean;
44-
sizing?: keyof SelectSizes;
44+
sizing?: DynamicStringEnumKeysOf<SelectSizes>;
4545
theme?: DeepPartial<FlowbiteSelectTheme>;
4646
}
4747

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { ComponentProps, FC } from "react";
44
import { twMerge } from "tailwind-merge";
55
import { mergeDeep } from "../../helpers/merge-deep";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteColors } from "../Flowbite";
88
import { useSidebarContext } from "./SidebarContext";
99

@@ -13,7 +13,7 @@ export interface FlowbiteSidebarCTATheme {
1313
}
1414

1515
export interface SidebarCTAProps extends Omit<ComponentProps<"div">, "color"> {
16-
color?: keyof FlowbiteSidebarCTAColors;
16+
color?: DynamicStringEnumKeysOf<FlowbiteSidebarCTAColors>;
1717
theme?: DeepPartial<FlowbiteSidebarCTATheme>;
1818
}
1919

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { ComponentProps, ElementType, FC, PropsWithChildren, ReactNode } fr
44
import { forwardRef, useId } from "react";
55
import { twMerge } from "tailwind-merge";
66
import { mergeDeep } from "../../helpers/merge-deep";
7-
import type { DeepPartial } from "../../types";
7+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
88
import { Badge } from "../Badge";
99
import type { FlowbiteColors } from "../Flowbite";
1010
import { Tooltip } from "../Tooltip";
@@ -35,7 +35,7 @@ export interface SidebarItemProps extends Omit<ComponentProps<"div">, "ref">, Re
3535
href?: string;
3636
icon?: FC<ComponentProps<"svg">>;
3737
label?: string;
38-
labelColor?: keyof SidebarItemLabelColors;
38+
labelColor?: DynamicStringEnumKeysOf<SidebarItemLabelColors>;
3939
theme?: DeepPartial<FlowbiteSidebarItemTheme>;
4040
}
4141

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ComponentProps, FC } from "react";
22
import { twMerge } from "tailwind-merge";
33
import { mergeDeep } from "../../helpers/merge-deep";
44
import { getTheme } from "../../theme-store";
5-
import type { DeepPartial } from "../../types";
5+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
66
import type { FlowbiteColors, FlowbiteSizes } from "../Flowbite";
77

88
export interface FlowbiteSpinnerTheme {
@@ -31,9 +31,9 @@ export interface SpinnerSizes extends Pick<FlowbiteSizes, "xs" | "sm" | "md" | "
3131
}
3232

3333
export interface SpinnerProps extends Omit<ComponentProps<"span">, "color"> {
34-
color?: keyof SpinnerColors;
34+
color?: DynamicStringEnumKeysOf<SpinnerColors>;
3535
light?: boolean;
36-
size?: keyof SpinnerSizes;
36+
size?: DynamicStringEnumKeysOf<SpinnerSizes>;
3737
theme?: DeepPartial<FlowbiteSpinnerTheme>;
3838
}
3939

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from "../Flowbite";
88
import { HelperText } from "../HelperText";
99

@@ -43,12 +43,12 @@ export interface FlowbiteTextInputSizes extends Pick<FlowbiteSizes, "sm" | "md"
4343

4444
export interface TextInputProps extends Omit<ComponentProps<"input">, "ref" | "color"> {
4545
addon?: ReactNode;
46-
color?: keyof FlowbiteTextInputColors;
46+
color?: DynamicStringEnumKeysOf<FlowbiteTextInputColors>;
4747
helperText?: ReactNode;
4848
icon?: FC<ComponentProps<"svg">>;
4949
rightIcon?: FC<ComponentProps<"svg">>;
5050
shadow?: boolean;
51-
sizing?: keyof FlowbiteTextInputSizes;
51+
sizing?: DynamicStringEnumKeysOf<FlowbiteTextInputSizes>;
5252
theme?: DeepPartial<FlowbiteTextInputTheme>;
5353
}
5454

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { forwardRef } from "react";
33
import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
6-
import type { DeepPartial } from "../../types";
6+
import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
77
import type { FlowbiteBoolean, FlowbiteColors } from "../Flowbite";
88
import { HelperText } from "../HelperText";
99

@@ -18,7 +18,7 @@ export interface TextareaColors extends Pick<FlowbiteColors, "gray" | "info" | "
1818
}
1919

2020
export interface TextareaProps extends Omit<ComponentProps<"textarea">, "color" | "ref"> {
21-
color?: keyof TextareaColors;
21+
color?: DynamicStringEnumKeysOf<TextareaColors>;
2222
helperText?: ReactNode;
2323
shadow?: boolean;
2424
theme?: DeepPartial<FlowbiteTextareaTheme>;

0 commit comments

Comments
 (0)