diff --git a/src/BrandedNavBar/MobileMenu.tsx b/src/BrandedNavBar/MobileMenu.tsx index 8f25ee878..3003d3990 100644 --- a/src/BrandedNavBar/MobileMenu.tsx +++ b/src/BrandedNavBar/MobileMenu.tsx @@ -227,7 +227,7 @@ type BaseMobileMenuProps = { showNulogyLogo?: boolean; }; -const BaseMobileMenu: React.FC = ({ +const BaseMobileMenu: React.FC> = ({ menuData, closeMenu, subtext, diff --git a/src/BrandedNavBar/NavBar.tsx b/src/BrandedNavBar/NavBar.tsx index 3e31cf792..36020f62c 100644 --- a/src/BrandedNavBar/NavBar.tsx +++ b/src/BrandedNavBar/NavBar.tsx @@ -32,7 +32,7 @@ type MediumNavBarProps = { subtext?: string; }; -const MediumNavBar: React.FC = ({ +const MediumNavBar: React.FC> = ({ menuData, environment, logo, diff --git a/src/Branding/Branding.tsx b/src/Branding/Branding.tsx index bdebf1050..e9df1b134 100644 --- a/src/Branding/Branding.tsx +++ b/src/Branding/Branding.tsx @@ -39,7 +39,7 @@ const alignments = { const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue; const getAlignment = (alignment) => alignments[alignment] || alignments.left; -const BrandingWrap: React.FC = styled.div( +const BrandingWrap: React.FC> = styled.div( ({ alignment, size }: any): CSSObject => ({ width: "100%", display: "inline-flex", @@ -50,7 +50,7 @@ const BrandingWrap: React.FC = styled.div( }) ); -const Line: React.FC = styled.div( +const Line: React.FC> = styled.div( ({ logoColor }: any): CSSObject => ({ position: "relative", width: "100%", diff --git a/src/Branding/BrandingText.tsx b/src/Branding/BrandingText.tsx index 016a274e5..49706c5a1 100644 --- a/src/Branding/BrandingText.tsx +++ b/src/Branding/BrandingText.tsx @@ -13,22 +13,24 @@ const logoColors = { const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue; -const BrandingText: React.FC = styled.span(({ logoColor, size }: BrandingTextProps): any => ({ - color: getLogoColor(logoColor), - textDecoration: "none", - fontWeight: theme.fontWeights.medium, - letterSpacing: "0.0333em", - textTransform: "uppercase", - fontSize: size === "small" ? "10px" : "11px", - lineHeight: "12px", - whiteSpace: "nowrap", - active: { +const BrandingText: React.FC> = styled.span( + ({ logoColor, size }: BrandingTextProps): any => ({ color: getLogoColor(logoColor), - }, - visited: { - color: getLogoColor(logoColor), - }, -})); + textDecoration: "none", + fontWeight: theme.fontWeights.medium, + letterSpacing: "0.0333em", + textTransform: "uppercase", + fontSize: size === "small" ? "10px" : "11px", + lineHeight: "12px", + whiteSpace: "nowrap", + active: { + color: getLogoColor(logoColor), + }, + visited: { + color: getLogoColor(logoColor), + }, + }) +); BrandingText.defaultProps = { logoColor: "blue", }; diff --git a/src/Branding/LettermarkLogo.tsx b/src/Branding/LettermarkLogo.tsx index 957bb58a5..4bee112df 100644 --- a/src/Branding/LettermarkLogo.tsx +++ b/src/Branding/LettermarkLogo.tsx @@ -18,7 +18,7 @@ type LettermarkLogoProps = { letterFill?: string; size?: string; }; -const LettermarkLogo: React.FC = ({ size, letterFill, ...props }) => ( +const LettermarkLogo: React.FC> = ({ size, letterFill, ...props }) => ( = ({ size, logoFill, letterFill, ...props }) => ( +const WordmarkLogo: React.FC> = ({ + size, + logoFill, + letterFill, + ...props +}) => ( ( space ); -const Button: React.FC = React.forwardRef( +const Button: React.FC> = React.forwardRef( ({ children, iconSide = "right", icon, className, asLink, size, ...props }: ButtonProps, ref) => { const { lineHeights: { smallTextCompressed }, diff --git a/src/Button/ControlIcon.tsx b/src/Button/ControlIcon.tsx index 460430fc9..23e23e23f 100644 --- a/src/Button/ControlIcon.tsx +++ b/src/Button/ControlIcon.tsx @@ -24,7 +24,7 @@ const getIconColorByState = ({ toggled, disabled, theme }) => { return theme.colors.darkGrey; }; -const StyledButton: React.FC = styled.button( +const StyledButton: React.FC> = styled.button( ({ toggled, disabled, theme }: any) => ({ background: "transparent", border: "none", diff --git a/src/Button/PrimaryButton.tsx b/src/Button/PrimaryButton.tsx index c04375369..65b865f55 100644 --- a/src/Button/PrimaryButton.tsx +++ b/src/Button/PrimaryButton.tsx @@ -2,7 +2,7 @@ import styled, { CSSObject } from "styled-components"; import { darken } from "polished"; import Button, { ButtonProps } from "./Button"; -const PrimaryButton: React.FC = styled(Button)( +const PrimaryButton: React.FC> = styled(Button)( ({ disabled, theme }: ButtonProps): CSSObject => ({ color: theme.colors.white, borderColor: theme.colors.blue, diff --git a/src/ButtonGroup/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx index 2d7244e61..82ca5607d 100644 --- a/src/ButtonGroup/ButtonGroup.tsx +++ b/src/ButtonGroup/ButtonGroup.tsx @@ -32,7 +32,7 @@ const buttonSpacings = (theme) => ({ const getAlignment = (alignment) => alignments[alignment] || alignments.left; const getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left; -const ButtonGroup: React.FC = styled(Flex)(({ alignment, theme }: any) => ({ +const ButtonGroup: React.FC> = styled(Flex)(({ alignment, theme }: any) => ({ flexWrap: "wrap", marginBottom: `-${theme.space.x1}`, justifyContent: getAlignment(alignment), diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx index ad6cf496a..3634121b8 100644 --- a/src/Card/Card.tsx +++ b/src/Card/Card.tsx @@ -2,7 +2,7 @@ import styled from "styled-components"; import { Box } from "../Box"; import { BoxProps } from "../Box/Box"; -const Card: React.FC = styled(Box)({}); +const Card: React.FC> = styled(Box)({}); Card.defaultProps = { children: [], diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 9474b090f..1cf2f0cb1 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -127,7 +127,7 @@ const CheckboxInput = styled.input((props) => ({ }, })); -const Checkbox: React.FC = forwardRef((props, ref) => { +const Checkbox: React.FC> = forwardRef((props, ref) => { const { size, className, labelText, disabled, checked, required, error, indeterminate } = props; const componentSize = useComponentSize(size); diff --git a/src/Checkbox/CheckboxGroup.tsx b/src/Checkbox/CheckboxGroup.tsx index 73239732d..442b01d59 100644 --- a/src/Checkbox/CheckboxGroup.tsx +++ b/src/Checkbox/CheckboxGroup.tsx @@ -51,7 +51,7 @@ const Legend = styled.legend(({ theme }) => ({ marginBottom: theme.space.x1, })); -const CheckboxGroup: React.FC = ({ +const CheckboxGroup: React.FC> = ({ className, id, errorMessage, diff --git a/src/DatePicker/DatePickerHeader.tsx b/src/DatePicker/DatePickerHeader.tsx index aa3a6d3af..d0844bf85 100644 --- a/src/DatePicker/DatePickerHeader.tsx +++ b/src/DatePicker/DatePickerHeader.tsx @@ -13,7 +13,7 @@ type DatePickerHeaderProps = { locale?: string; }; -const DatePickerHeader: React.FC = ({ +const DatePickerHeader: React.FC> = ({ date, decreaseMonth, increaseMonth, diff --git a/src/DateRange/DateRange.tsx b/src/DateRange/DateRange.tsx index bf10a5524..2a48bba3e 100644 --- a/src/DateRange/DateRange.tsx +++ b/src/DateRange/DateRange.tsx @@ -46,7 +46,7 @@ type DateRangeProps = FieldProps & { const DEFAULT_LABEL = "Date Range"; -const DateRange: React.FC = forwardRef( +const DateRange: React.FC> = forwardRef( ( { dateFormat, diff --git a/src/DropdownMenu/DropdownItem.tsx b/src/DropdownMenu/DropdownItem.tsx index 4777c183b..02974c5cd 100644 --- a/src/DropdownMenu/DropdownItem.tsx +++ b/src/DropdownMenu/DropdownItem.tsx @@ -8,7 +8,7 @@ type DropdownItemProps = { bgHoverColor?: string; }; -const DropdownItem: React.FC = styled.div( +const DropdownItem: React.FC> = styled.div( ({ theme, color, hoverColor, bgHoverColor }: DropdownItemProps): CSSObject => ({ "*": { color: theme.colors[color], diff --git a/src/DropdownMenu/DropdownMenu.tsx b/src/DropdownMenu/DropdownMenu.tsx index 4284b1333..3d173a55f 100644 --- a/src/DropdownMenu/DropdownMenu.tsx +++ b/src/DropdownMenu/DropdownMenu.tsx @@ -47,7 +47,10 @@ const transformPropsToModifiers = ({ boundariesElement }) => ({ boundariesElement, }); -const DropdownMenu: React.FC = React.forwardRef( +const DropdownMenu: React.FC> = React.forwardRef< + Reference, + DropdownMenuProps +>( ( { trigger = () => , diff --git a/src/DropdownMenu/DropdownMenuContainer.tsx b/src/DropdownMenu/DropdownMenuContainer.tsx index ed24a2c10..17116e550 100644 --- a/src/DropdownMenu/DropdownMenuContainer.tsx +++ b/src/DropdownMenu/DropdownMenuContainer.tsx @@ -37,7 +37,7 @@ const getMenuMargin = (placement, showArrow) => { } }; -const DropdownMenuContainer: React.FC = styled(Box)( +const DropdownMenuContainer: React.FC> = styled(Box)( color, ({ dataPlacement, showArrow = true, backgroundColor = "white", theme }: DropdownMenuContainerProps): any => ({ borderRadius: theme.radii.medium, diff --git a/src/DropdownMenu/DropdownText.tsx b/src/DropdownMenu/DropdownText.tsx index 5e0904434..669d2e50a 100644 --- a/src/DropdownMenu/DropdownText.tsx +++ b/src/DropdownMenu/DropdownText.tsx @@ -4,7 +4,7 @@ import { Text } from "../Type"; import { TextProps } from "../Type/Text"; import { addStyledProps } from "../StyledProps"; -const DropdownText: React.FC = styled(Text)( +const DropdownText: React.FC> = styled(Text)( ({ theme }: TextProps): CSSObject => ({ color: theme.colors.darkGrey, fontWeight: theme.fontWeights.medium, diff --git a/src/Form/Fieldset.tsx b/src/Form/Fieldset.tsx index 94c0935f3..ba7984f57 100644 --- a/src/Form/Fieldset.tsx +++ b/src/Form/Fieldset.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; import { space } from "styled-system"; -const Fieldset: React.FC = styled.fieldset( +const Fieldset: React.FC> = styled.fieldset( { padding: 0, border: 0, diff --git a/src/Form/FormSection.tsx b/src/Form/FormSection.tsx index 25e2605be..6069c896d 100644 --- a/src/Form/FormSection.tsx +++ b/src/Form/FormSection.tsx @@ -12,7 +12,7 @@ const FormSectionTitle = styled(Heading3).attrs({ as: "legend", })({}); -const BaseFormSection: React.FC = ({ title, children, ...props }) => ( +const BaseFormSection: React.FC> = ({ title, children, ...props }) => (
{title != null && {title}} {children} diff --git a/src/Icon/LoadingIcon.tsx b/src/Icon/LoadingIcon.tsx index 6bbbff2ff..3a728a62c 100644 --- a/src/Icon/LoadingIcon.tsx +++ b/src/Icon/LoadingIcon.tsx @@ -2,7 +2,7 @@ import React from "react"; type LoadingIconProps = React.ComponentPropsWithoutRef<"svg">; -const LoadingIcon: React.FC = (props) => { +const LoadingIcon: React.FC> = (props) => { return ( = ({ +const Header: React.FC> = ({ background, renderBreadcrumbs, title, diff --git a/src/Layout/Page.tsx b/src/Layout/Page.tsx index 31424d1d0..fe3641ef6 100644 --- a/src/Layout/Page.tsx +++ b/src/Layout/Page.tsx @@ -13,7 +13,7 @@ type PageProps = FlexProps & { renderHeader?: () => JSX.Element; }; -export const Page: React.FC = ({ +export const Page: React.FC> = ({ breadcrumbs, title, children, diff --git a/src/List/List.tsx b/src/List/List.tsx index 5ab63f8c0..1d807d6e3 100644 --- a/src/List/List.tsx +++ b/src/List/List.tsx @@ -11,7 +11,7 @@ type ListProps = React.ComponentPropsWithRef<"ul"> & leftAlign?: boolean; listStyle?: string; }; -const List: React.FC = styled.ul( +const List: React.FC> = styled.ul( ({ compact, theme, leftAlign, listStyle }: ListProps) => ({ margin: 0, paddingLeft: leftAlign ? "18px" : undefined, diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx index 078ab0802..75deb4c3d 100644 --- a/src/List/ListItem.tsx +++ b/src/List/ListItem.tsx @@ -6,7 +6,7 @@ type ListItemProps = React.ComponentPropsWithRef<"li"> & TypographyProps & { className?: string; }; -const ListItem: React.FC = styled.li(space, color, typography, { +const ListItem: React.FC> = styled.li(space, color, typography, { "&:last-child": { marginBottom: 0, }, diff --git a/src/LoadingAnimation/LoadingAnimation.tsx b/src/LoadingAnimation/LoadingAnimation.tsx index 724feb234..75a00d6e0 100644 --- a/src/LoadingAnimation/LoadingAnimation.tsx +++ b/src/LoadingAnimation/LoadingAnimation.tsx @@ -4,7 +4,7 @@ import { useTheme } from "styled-components"; type LoadingAnimationProps = React.ComponentPropsWithRef<"svg"> & { inactive?: boolean; }; -const LoadingAnimation: React.FC = ({ inactive }) => { +const LoadingAnimation: React.FC> = ({ inactive }) => { const { colors } = useTheme(); const color1 = inactive ? colors.grey : colors.blue; diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 78067f0cc..776aae83f 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -82,7 +82,9 @@ type ModalProps = { parentSelector?: (...args: any) => HTMLElement; }; -const Modal: React.FC & { setAppElement: (element: string | HTMLElement) => void } = ({ +const Modal: React.FC> & { + setAppElement: (element: string | HTMLElement) => void; +} = ({ isOpen, children, title, diff --git a/src/Modal/ModalContent.tsx b/src/Modal/ModalContent.tsx index 0d4ee5b39..f44806218 100644 --- a/src/Modal/ModalContent.tsx +++ b/src/Modal/ModalContent.tsx @@ -7,14 +7,16 @@ type ModalContentProps = React.ComponentPropsWithRef<"div"> & { theme?: DefaultNDSThemeType; }; -const ModalContent: React.FC = styled.div(({ hasFooter, theme }: ModalContentProps) => ({ - marginTop: "-64px", - marginBottom: hasFooter ? "-72px" : 0, - overflow: "auto", - paddingTop: "88px", - paddingBottom: hasFooter ? "96px" : theme.space.x2, - paddingLeft: theme.space.x3, - paddingRight: theme.space.x3, -})); +const ModalContent: React.FC> = styled.div( + ({ hasFooter, theme }: ModalContentProps) => ({ + marginTop: "-64px", + marginBottom: hasFooter ? "-72px" : 0, + overflow: "auto", + paddingTop: "88px", + paddingBottom: hasFooter ? "96px" : theme.space.x2, + paddingLeft: theme.space.x3, + paddingRight: theme.space.x3, + }) +); export default ModalContent; diff --git a/src/NDSProvider/ComponentSizeContext.tsx b/src/NDSProvider/ComponentSizeContext.tsx index 8a1a6e59c..cce41be0c 100644 --- a/src/NDSProvider/ComponentSizeContext.tsx +++ b/src/NDSProvider/ComponentSizeContext.tsx @@ -17,7 +17,10 @@ export function useComponentSize(selectedSize?: ComponentSize) { return selectedSize ?? context.size; } -const ComponentSizeContextProvider: React.FC = ({ size, children }) => { +const ComponentSizeContextProvider: React.FC> = ({ + size, + children, +}) => { return {children}; }; diff --git a/src/NDSProvider/NDSProvider.tsx b/src/NDSProvider/NDSProvider.tsx index e61d7e46c..2814334b5 100644 --- a/src/NDSProvider/NDSProvider.tsx +++ b/src/NDSProvider/NDSProvider.tsx @@ -48,7 +48,7 @@ const AllNDSGlobalStyles = ({ theme, locale, disableGlobalStyles, children }: Al children ); -const NDSProvider: React.FC = ({ +const NDSProvider: React.FC> = ({ theme, children, disableGlobalStyles = false, diff --git a/src/NavBar/NavBar.tsx b/src/NavBar/NavBar.tsx index b35f9b0cb..c982f9495 100644 --- a/src/NavBar/NavBar.tsx +++ b/src/NavBar/NavBar.tsx @@ -62,7 +62,7 @@ type MediumNavBarProps = { environment?: "development" | "training"; }; -const MediumNavBar: React.FC = ({ +const MediumNavBar: React.FC> = ({ menuData, themeColor, subtext, diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index e03ef310d..cf70c12eb 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -10,14 +10,16 @@ type OverlayProps = FlexProps & { theme?: DefaultNDSThemeType; }; -const Overlay: React.FC = styled(Flex)(({ dark, theme }: OverlayProps) => ({ - top: 0, - left: 0, - right: 0, - bottom: 0, - zIndex: theme.zIndices.overlay, - backgroundColor: dark ? transparentize(0.5, theme.colors.blackBlue) : transparentize(0.05, theme.colors.white), -})); +const Overlay: React.FC> = styled(Flex)( + ({ dark, theme }: OverlayProps) => ({ + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: theme.zIndices.overlay, + backgroundColor: dark ? transparentize(0.5, theme.colors.blackBlue) : transparentize(0.05, theme.colors.white), + }) +); Overlay.defaultProps = { position: "fixed", justifyContent: "center", diff --git a/src/Popper/Popper.tsx b/src/Popper/Popper.tsx index 6cc907af0..23eda1ec1 100644 --- a/src/Popper/Popper.tsx +++ b/src/Popper/Popper.tsx @@ -28,7 +28,7 @@ type PopperProps = { openAriaLabel?: string; closeAriaLabel?: string; }; -const Popper: React.FC = React.forwardRef( +const Popper: React.FC> = React.forwardRef( ( { popperPlacement, diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index d5394c006..db27f325d 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -113,7 +113,7 @@ type RadioProps = NativeInputProps & error?: boolean; }; -const Radio: React.FC = forwardRef( +const Radio: React.FC> = forwardRef( ({ className, labelText, disabled, checked, required, error, size, ...props }, ref) => { const componentSize = useComponentSize(size); const spaceProps = getSubset(props, propTypes.space); diff --git a/src/RangeContainer/RangeContainer.tsx b/src/RangeContainer/RangeContainer.tsx index 4cc4dd92d..344bbcbdc 100644 --- a/src/RangeContainer/RangeContainer.tsx +++ b/src/RangeContainer/RangeContainer.tsx @@ -16,7 +16,7 @@ type RangeContainerProps = { errorMessages?: (string | undefined)[]; }; -const RangeContainer: React.FC = ({ +const RangeContainer: React.FC> = ({ labelProps, startComponent, endComponent, diff --git a/src/Summary/Summary.tsx b/src/Summary/Summary.tsx index 5ef8ac3b7..3a24c55e3 100644 --- a/src/Summary/Summary.tsx +++ b/src/Summary/Summary.tsx @@ -32,7 +32,11 @@ const SummaryWrapper = styled(Box)<{ breakpoint: number }>(({ theme, breakpoint const DEFAULT_BREAKPOINT = theme.breakpoints.medium; -const Summary: React.FC = ({ breakpoint = DEFAULT_BREAKPOINT, children, ...rest }) => { +const Summary: React.FC> = ({ + breakpoint = DEFAULT_BREAKPOINT, + children, + ...rest +}) => { const breakpointPx = numberFromDimension(breakpoint); return ( diff --git a/src/Summary/SummaryContext.tsx b/src/Summary/SummaryContext.tsx index ca31b598a..16f9add62 100644 --- a/src/Summary/SummaryContext.tsx +++ b/src/Summary/SummaryContext.tsx @@ -14,7 +14,10 @@ export function useSummaryContext() { return context; } -export const SummaryContextProvider: React.FC = ({ breakpoint, children }) => { +export const SummaryContextProvider: React.FC> = ({ + breakpoint, + children, +}) => { return ( (({ theme, breakp }, })); -const SummaryItem: React.FC = ({ value, status, ...rest }) => { +const SummaryItem: React.FC> = ({ value, status, ...rest }) => { const { breakpoint } = useSummaryContext(); const matches = useMediaQuery(`(max-width: ${breakpoint}px)`); diff --git a/src/Switcher/Switcher.tsx b/src/Switcher/Switcher.tsx index 2a8d2d6ad..66302c2a3 100644 --- a/src/Switcher/Switcher.tsx +++ b/src/Switcher/Switcher.tsx @@ -13,7 +13,7 @@ type SwitcherProps = { onChange?: (value: string) => void; }; -const Switcher: React.FC = ({ size, selected, onChange, ...rest }) => { +const Switcher: React.FC> = ({ size, selected, onChange, ...rest }) => { const componentSize = useComponentSize(size); const optionRefs = []; diff --git a/src/Table/TableBody.tsx b/src/Table/TableBody.tsx index caf86afb7..1e92e2bb1 100644 --- a/src/Table/TableBody.tsx +++ b/src/Table/TableBody.tsx @@ -18,7 +18,7 @@ type StyledTrProps = React.ComponentProps<"tr"> & { className?: string; }; -const StyledTr: React.FC = styled.tr(({ rowHovers, theme }: StyledTrProps) => ({ +const StyledTr: React.FC> = styled.tr(({ rowHovers, theme }: StyledTrProps) => ({ "&:hover": { backgroundColor: rowHovers ? theme.colors.whiteGrey : null, }, diff --git a/src/Table/TableCell.tsx b/src/Table/TableCell.tsx index 0b029e668..17b57651f 100644 --- a/src/Table/TableCell.tsx +++ b/src/Table/TableCell.tsx @@ -7,7 +7,7 @@ type StyledTableCellProps = { compact?: boolean; theme?: DefaultNDSThemeType; }; -const StyledTableCell: React.FC = styled.td( +const StyledTableCell: React.FC> = styled.td( ({ align, compact, theme }: StyledTableCellProps): CSSObject => { const padding = compact ? theme.space.x1 : theme.space.x2; return { @@ -28,7 +28,7 @@ type TableCellProps = { cellData?: object | React.ReactNode | boolean; compact?: boolean; }; -const TableCell: React.FC = ({ row, column, colSpan, cellData, compact }) => { +const TableCell: React.FC> = ({ row, column, colSpan, cellData, compact }) => { const cellRenderer = row.cellRenderer || column.cellRenderer; const { cellFormatter } = column; const isCustomCell = Boolean(cellRenderer); diff --git a/src/Tabs/Tab.tsx b/src/Tabs/Tab.tsx index 708dc28ce..3a765f6cc 100644 --- a/src/Tabs/Tab.tsx +++ b/src/Tabs/Tab.tsx @@ -101,7 +101,7 @@ type TabProps = TabButtonProps & { label?: React.ReactNode; }; -const Tab: React.FC = React.forwardRef(({ label, ...props }, ref) => ( +const Tab: React.FC> = React.forwardRef(({ label, ...props }, ref) => ( {label} diff --git a/src/Tabs/TabScrollIndicator.tsx b/src/Tabs/TabScrollIndicator.tsx index 5f6a13a7f..c35ac5888 100644 --- a/src/Tabs/TabScrollIndicator.tsx +++ b/src/Tabs/TabScrollIndicator.tsx @@ -47,7 +47,7 @@ type TabScrollIndicatorProps = { ariaLabelLeft?: string; ariaLabelRight?: string; }; -const TabScrollIndicator: React.FC = ({ +const TabScrollIndicator: React.FC> = ({ onClick, side, ariaLabelLeft, diff --git a/src/TimePicker/TimePicker.tsx b/src/TimePicker/TimePicker.tsx index 1376f187c..31e45112b 100644 --- a/src/TimePicker/TimePicker.tsx +++ b/src/TimePicker/TimePicker.tsx @@ -126,7 +126,7 @@ export const getTimeOptions = (interval, timeFormat, minTime, maxTime, locale) = .slice(startingInterval, finalInterval); }; -const TimePicker: React.FC = forwardRef( +const TimePicker: React.FC> = forwardRef( ( { timeFormat, diff --git a/src/ToastContainer/ToastFunction.tsx b/src/ToastContainer/ToastFunction.tsx index 0d671a0b4..318f48f5f 100644 --- a/src/ToastContainer/ToastFunction.tsx +++ b/src/ToastContainer/ToastFunction.tsx @@ -21,7 +21,7 @@ type ToastFunctions = { type CustomToastProps = { id: string; isVisible: boolean } & AlertProps; -const CustomToast: React.FC = ({ isVisible, id, children, ...props }) => { +const CustomToast: React.FC> = ({ isVisible, id, children, ...props }) => { const handleClose = () => { _toast.dismiss(id); }; diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx index 858a47130..5bb969d7c 100644 --- a/src/Toggle/Toggle.tsx +++ b/src/Toggle/Toggle.tsx @@ -25,7 +25,7 @@ type MaybeToggleTitleProps = React.ComponentPropsWithRef<"div"> & { helpText?: string; children?: any; }; -const MaybeToggleTitle: React.FC = ({ +const MaybeToggleTitle: React.FC> = ({ labelText, requirementText, helpText, diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx index 266670ed8..febf07ad8 100644 --- a/src/Toggle/ToggleButton.tsx +++ b/src/Toggle/ToggleButton.tsx @@ -48,7 +48,7 @@ const animationConfig: AnimationConfig = { scale: 1.08, }; -const Switch: React.FC = ({ children, disabled, toggled, onClick }) => ( +const Switch: React.FC> = ({ children, disabled, toggled, onClick }) => ( = ({ children, disabled, toggled, onClick }) ); -const Slider: React.FC = ({ disabled, children }) => ( +const Slider: React.FC> = ({ disabled, children }) => ( = React.forwardRef((props, ref) => { +const ToggleButton: React.FC> = React.forwardRef((props, ref) => { const { disabled, defaultToggled, toggled } = props; const inputRef = useRef(null); diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx index 0d54c60fd..c90fd3736 100644 --- a/src/Tooltip/Tooltip.tsx +++ b/src/Tooltip/Tooltip.tsx @@ -26,7 +26,7 @@ export type TooltipProps = { children?: React.ReactNode; }; -const Tooltip: React.FC = React.forwardRef( +const Tooltip: React.FC> = React.forwardRef( ({ className, tooltip, maxWidth, children, placement, showDelay, hideDelay, defaultOpen }, ref) => ( = ({ +const InlineValidation: React.FC> = ({ className, errorMessage, errorList, diff --git a/src/utils/PopperArrow.tsx b/src/utils/PopperArrow.tsx index e13006c26..70dabe8da 100644 --- a/src/utils/PopperArrow.tsx +++ b/src/utils/PopperArrow.tsx @@ -118,7 +118,7 @@ const drawArrow = (placement, borderColor, backgroundColor) => { } }; -const PopperArrow: React.FC = styled.div( +const PopperArrow: React.FC> = styled.div( { position: "absolute", height: theme.space.x1, diff --git a/src/utils/ts/FocusManager.tsx b/src/utils/ts/FocusManager.tsx index 4cc0a6bae..3b25e9686 100644 --- a/src/utils/ts/FocusManager.tsx +++ b/src/utils/ts/FocusManager.tsx @@ -17,7 +17,11 @@ type FocusManagerProps = { children: (handlers: ChildrenHandlers) => ReactNode; }; -const FocusManager: React.FC = ({ children, refs = undefined, defaultFocusedIndex }) => { +const FocusManager: React.FC> = ({ + children, + refs = undefined, + defaultFocusedIndex, +}) => { const [focusedIndex, setFocusedIndex] = useState(defaultFocusedIndex ?? 0); const prevFocusedIndex = useRef(focusedIndex);