Skip to content

fix(types): add correct types for react 19 codemod changes #4266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 10, 2025
Merged

fix(types): add correct types for react 19 codemod changes #4266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7be0897
fix(types): add correct types for react 19 codemod changes
krisantrobus Mar 7, 2025
f08ee40
feat(progress-bar): add interval type
PixeledCode Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/paste-core/components/ai-chat-log/src/useAIChatLogger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { AIMessageVariants } from "./AIMessageContext";
export type AIChat = {
id: string;
variant: AIMessageVariants;
content: React.ReactElement<any>;
content: React.ReactElement<HTMLElement>;
};

export type AIPartialIDChat = Omit<AIChat, "id"> & Partial<Pick<AIChat, "id">>;
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/alert/src/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export interface AlertProps extends HTMLPasteProps<"div"> {
element?: BoxProps["element"];
}

const renderAlertIcon = (variant: AlertVariants, element: string, title: string): React.ReactElement<any> => {
const renderAlertIcon = (variant: AlertVariants, element: string, title: string): React.ReactElement<HTMLElement> => {
switch (variant) {
case AlertVariants.ERROR:
return (
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/components/badge/stories/customization.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import * as React from "react";
import { Badge } from "../src";
import type { BadgeVariants } from "../src/constants";

export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement<any> => (
export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement<HTMLElement> => (
<Badge as="span" element={element} variant={variant} data-testid={`${variant}_badge`}>
HelloWorld
</Badge>
Expand Down Expand Up @@ -39,7 +39,7 @@ export const getStyles = (element = "BADGE"): { [key: string]: PasteCustomCSS }

const CustomizationWrapper: React.FC<
React.PropsWithChildren<{ variant: typeof BadgeVariants[number]; isTestEnvironment: boolean }>
> = ({ variant, isTestEnvironment }): React.ReactElement<any> => {
> = ({ variant, isTestEnvironment }): React.ReactElement<HTMLElement> => {
const theme = useTheme();
const customElement = "FOO";
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/breadcrumb/src/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const Breadcrumb = React.forwardRef<HTMLDivElement, BreadcrumbProps>(
() => [
React.Children.count(children),
React.Children.toArray(children).filter(
(child): child is React.ReactElement<any> => React.isValidElement(child) || typeof child === "string",
(child): child is React.ReactElement<HTMLElement> => React.isValidElement(child) || typeof child === "string",
),
],
[children],
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/button-group/src/ButtonGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export interface ButtonGroupProps extends HTMLPasteProps<"div"> {
* @memberof ButtonGroupProps
*/
justifyContent?: JustifyOptions;
children: React.ReactElement<any>[];
children: React.ReactNode;
}

export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/callout/src/Callout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
},
};

const variantIcons: Record<CalloutVariants, React.ReactElement<any>> = {
const variantIcons: Record<CalloutVariants, React.ReactElement<HTMLElement>> = {
success: <SuccessIcon decorative color="colorTextIconSuccess" />,
error: <ErrorIcon decorative color="colorTextIconError" />,
warning: <WarningIcon decorative color="colorTextIconWarning" />,
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/chat-log/src/useChatLogger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type PopChat = (id?: string) => void;
export type Chat = {
id: string;
variant?: MessageVariants;
content: React.ReactElement<any>;
content: React.ReactElement<HTMLElement>;
};

export type PartialIDChat = Omit<Chat, "id"> & Partial<Pick<Chat, "id">>;
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio
);
};

const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement<any> => (
const ComboboxToTest = ({ element = "COMBOBOX" }): React.ReactElement<HTMLElement> => (
<Combobox
items={[
{ letter: "a", number: 1 },
Expand Down
2 changes: 1 addition & 1 deletion ...ages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const items = [
{ letter: "b", number: 3 },
];

const MultiselectComboboxToTest = ({ element = "MULTISELECT_COMBOBOX" }): React.ReactElement<any> => (
const MultiselectComboboxToTest = ({ element = "MULTISELECT_COMBOBOX" }): React.ReactElement<HTMLElement> => (
<MultiselectCombobox
items={items}
initialSelectedItems={[items[0], items[2]]}
Expand Down
4 changes: 2 additions & 2 deletions packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const groupedItems = [
const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
children,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const currentTheme = useTheme();
return (
<Stack orientation="vertical" spacing="space50">
Expand Down Expand Up @@ -77,7 +77,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
FOO_SUFFIX: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
}}
>
{React.cloneElement(children as React.ReactElement<any>, { element: "FOO" })}
{React.cloneElement(children as React.ReactElement<HTMLElement>, { element: "FOO" })}
</CustomizationProvider>
</Card>
</Stack>
Expand Down
4 changes: 2 additions & 2 deletions ...ages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const initialSelectedGroupedItems = [groupedItems[0], groupedItems[1], groupedIt
const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
children,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const currentTheme = useTheme();
return (
<Stack orientation="vertical" spacing="space50">
Expand Down Expand Up @@ -89,7 +89,7 @@ const ShowCustomization: React.FC<React.PropsWithChildren<{ isTestEnvironment: b
FOO_SUFFIX: { backgroundColor: "colorBackgroundSubaccount", borderRadius: "borderRadiusCircle" },
}}
>
{React.cloneElement(children as React.ReactElement<any>, { element: "FOO" })}
{React.cloneElement(children as React.ReactElement<HTMLElement>, { element: "FOO" })}
</CustomizationProvider>
</Card>
</Stack>
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/file-picker/src/FilePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface FilePickerProps extends HTMLPasteProps<"input"> {
* @memberof FilePickerProps
*/
accept?: string;
children: React.ReactElement<any>;
children: React.ReactElement<HTMLElement>;
/**
* Overrides the default element name to apply unique styles with the Customization Provider
*
Expand Down
12 changes: 6 additions & 6 deletions packages/paste-core/components/keyboard-key/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default {
component: KeyboardKey,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
Expand Down Expand Up @@ -52,7 +52,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const Inverse = (): React.ReactElement<any> => {
export const Inverse = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
Expand Down Expand Up @@ -88,7 +88,7 @@ export const Inverse = (): React.ReactElement<any> => {
);
};

export const ForcePressed = (): React.ReactElement<any> => {
export const ForcePressed = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
Expand All @@ -114,7 +114,7 @@ export const ForcePressed = (): React.ReactElement<any> => {
);
};

export const MultipleCombinations = (): React.ReactElement<any> => {
export const MultipleCombinations = (): React.ReactElement<HTMLElement> => {
const [textToDisplay, setTextToDisplay] = React.useState<string>("");

const stateCtrB = useKeyCombination({
Expand Down Expand Up @@ -184,7 +184,7 @@ export const MultipleCombinations = (): React.ReactElement<any> => {
);
};

export const TriggerModal = (): React.ReactElement<any> => {
export const TriggerModal = (): React.ReactElement<HTMLElement> => {
const [isOpen, setIsOpen] = React.useState(false);
const state = useKeyCombination({
keys: ["Control", "k"],
Expand Down Expand Up @@ -229,7 +229,7 @@ export const TriggerModal = (): React.ReactElement<any> => {
);
};

export const Customization = (): React.ReactElement<any> => {
export const Customization = (): React.ReactElement<HTMLElement> => {
const state = useKeyCombination({
keys: ["Control", "b"],
onCombinationPress: (): void => {
Expand Down
22 changes: 11 additions & 11 deletions packages/paste-core/components/meter/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {
component: Meter,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
Expand All @@ -25,7 +25,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const Full = (): React.ReactElement<any> => {
export const Full = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
Expand All @@ -37,7 +37,7 @@ export const Full = (): React.ReactElement<any> => {
);
};

export const Empty = (): React.ReactElement<any> => {
export const Empty = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
Expand All @@ -49,7 +49,7 @@ export const Empty = (): React.ReactElement<any> => {
);
};

export const MinMax = (): React.ReactElement<any> => {
export const MinMax = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size40">
Expand All @@ -61,7 +61,7 @@ export const MinMax = (): React.ReactElement<any> => {
);
};

export const MinOnly = (): React.ReactElement<any> => {
export const MinOnly = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
Expand All @@ -73,7 +73,7 @@ export const MinOnly = (): React.ReactElement<any> => {
);
};

export const MaxOnly = (): React.ReactElement<any> => {
export const MaxOnly = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size20">
Expand All @@ -85,7 +85,7 @@ export const MaxOnly = (): React.ReactElement<any> => {
);
};

export const AriaLabel = (): React.ReactElement<any> => {
export const AriaLabel = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
return (
<Box width="size30">
Expand All @@ -94,7 +94,7 @@ export const AriaLabel = (): React.ReactElement<any> => {
);
};

export const CustomLabel = (): React.ReactElement<any> => {
export const CustomLabel = (): React.ReactElement<HTMLElement> => {
const labelId = useUID();
const meterId = useUID();
return (
Expand All @@ -105,7 +105,7 @@ export const CustomLabel = (): React.ReactElement<any> => {
);
};

export const WithHelpText = (): React.ReactElement<any> => {
export const WithHelpText = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
const helpTextId = useUID();
return (
Expand All @@ -127,7 +127,7 @@ export const WithHelpText = (): React.ReactElement<any> => {
);
};

export const Wrapped = (): React.ReactElement<any> => {
export const Wrapped = (): React.ReactElement<HTMLElement> => {
const meterId = useUID();
const helpTextId = useUID();
return (
Expand All @@ -149,7 +149,7 @@ export const Wrapped = (): React.ReactElement<any> => {
);
};

export const Customized = (): React.ReactElement<any> => {
export const Customized = (): React.ReactElement<HTMLElement> => {
const theme = useTheme();
const meterOneId = useUID();
const meterTwoId = useUID();
Expand Down
14 changes: 7 additions & 7 deletions packages/paste-core/components/page-header/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default {
component: PageHeader,
};

export const Default = (): React.ReactElement<any> => {
export const Default = (): React.ReactElement<HTMLElement> => {
return (
<PageHeader size="default">
<PageHeaderSetting>
Expand Down Expand Up @@ -86,7 +86,7 @@ export const Default = (): React.ReactElement<any> => {
);
};

export const SeparatorVersusNav = (): React.ReactElement<any> => {
export const SeparatorVersusNav = (): React.ReactElement<HTMLElement> => {
return (
<Box display="flex" columnGap="space200">
<Box width="size70" backgroundColor="colorBackground" height="min-content">
Expand Down Expand Up @@ -161,7 +161,7 @@ export const SeparatorVersusNav = (): React.ReactElement<any> => {
);
};

export const Compact = (): React.ReactElement<any> => {
export const Compact = (): React.ReactElement<HTMLElement> => {
return (
<Box maxWidth="size50">
<PageHeader size="compact">
Expand Down Expand Up @@ -204,7 +204,7 @@ export const Compact = (): React.ReactElement<any> => {
);
};

export const Wizard = (): React.ReactElement<any> => {
export const Wizard = (): React.ReactElement<HTMLElement> => {
return (
<Box maxWidth="size70">
<PageHeader>
Expand Down Expand Up @@ -238,7 +238,7 @@ export const Wizard = (): React.ReactElement<any> => {
);
};

export const Wrapped = (): React.ReactElement<any> => {
export const Wrapped = (): React.ReactElement<HTMLElement> => {
return (
<PageHeader size="default">
<PageHeaderSetting>
Expand Down Expand Up @@ -296,7 +296,7 @@ export const Wrapped = (): React.ReactElement<any> => {
);
};

export const TwilioExamples = (): React.ReactElement<any> => {
export const TwilioExamples = (): React.ReactElement<HTMLElement> => {
return (
<Box display="flex" flexDirection="column" rowGap="space150" maxWidth="size70">
<PageHeader>
Expand Down Expand Up @@ -381,7 +381,7 @@ export const TwilioExamples = (): React.ReactElement<any> => {
);
};

export const Customized = (): React.ReactElement<any> => {
export const Customized = (): React.ReactElement<HTMLElement> => {
const theme = useTheme();
return (
<CustomizationProvider
Expand Down
5 changes: 2 additions & 3 deletions packages/paste-core/components/progress-bar/stories/customization.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Button } from "@twilio-paste/button";
import { CustomizationProvider } from "@twilio-paste/customization";
import { Form, FormControl } from "@twilio-paste/form";
import { HelpText } from "@twilio-paste/help-text";
import { Label } from "@twilio-paste/label";
import { useUID } from "@twilio-paste/uid-library";
import * as React from "react";

Expand All @@ -18,7 +17,7 @@ const NumberFormatter = new Intl.NumberFormat("en-US");

export const CustomizationWrapper: React.FC<React.PropsWithChildren<{ isTestEnvironment: boolean }>> = ({
isTestEnvironment,
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
const progressBarId = useUID();
const customProgressBarId = useUID();
const helpTextId = useUID();
Expand All @@ -27,7 +26,7 @@ export const CustomizationWrapper: React.FC<React.PropsWithChildren<{ isTestEnvi

// Randomly updates the value of the progress bar to simulate a real progress bar
React.useEffect(() => {
let interval;
let interval: NodeJS.Timeout;
if (rerun) {
interval = setInterval(() => {
setValue((previousValue) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/progress-bar/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const Default = (): React.ReactNode => {

// Randomly updates the value of the progress bar to simulate a real progress bar
React.useEffect(() => {
let interval;
let interval: NodeJS.Timeout;
if (rerun) {
interval = setInterval(() => {
setValue((previousValue) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/paste-core/components/select/__tests__/option.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface ExampleOptionProps extends OptionProps {
const ExampleOption: React.FC<React.PropsWithChildren<ExampleOptionProps>> = ({
suffix = "test",
...props
}): React.ReactElement<any> => {
}): React.ReactElement<HTMLElement> => {
return (
<Option data-testid={`option-${suffix}`} {...props}>
Option 1
Expand Down
Loading
Loading