diff --git a/src/docs/pages/AlertsPage.tsx b/src/docs/pages/AlertsPage.tsx index 7cf3768c92..ada3b77b3d 100644 --- a/src/docs/pages/AlertsPage.tsx +++ b/src/docs/pages/AlertsPage.tsx @@ -36,7 +36,7 @@ const AlertsPage: FC = () => { { title: 'Rounded', code: ( - + {alertText} ), diff --git a/src/docs/pages/NavbarPage.tsx b/src/docs/pages/NavbarPage.tsx index 9b97784111..441a71e47e 100644 --- a/src/docs/pages/NavbarPage.tsx +++ b/src/docs/pages/NavbarPage.tsx @@ -43,7 +43,7 @@ const NavbarPage: FC = () => { - + Home About diff --git a/src/docs/pages/TabsPage.tsx b/src/docs/pages/TabsPage.tsx index d933ef1271..16ec605b63 100644 --- a/src/docs/pages/TabsPage.tsx +++ b/src/docs/pages/TabsPage.tsx @@ -1,7 +1,9 @@ -import { FC, useRef, useState } from 'react'; +import type { FC } from 'react'; +import { useRef, useState } from 'react'; import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi'; import { MdDashboard } from 'react-icons/md'; -import { Button, Tabs, TabsRef } from '../../lib'; +import type { TabsRef } from '../../lib'; +import { Button, Tabs } from '../../lib'; import type { CodeExample } from './DemoPage'; import { DemoPage } from './DemoPage'; diff --git a/src/lib/components/Accordion/Accordion.spec.tsx b/src/lib/components/Accordion/Accordion.spec.tsx index a3919d44cc..ee123f0def 100644 --- a/src/lib/components/Accordion/Accordion.spec.tsx +++ b/src/lib/components/Accordion/Accordion.spec.tsx @@ -1,6 +1,6 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC } from 'react'; +import type { FC } from 'react'; import { HiOutlineArrowCircleDown } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; import { Flowbite } from '../Flowbite'; @@ -48,6 +48,7 @@ describe('Components / Accordion', () => { const user = userEvent.setup(); render(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars for (const _ of titles()) { await user.tab(); } @@ -61,6 +62,7 @@ describe('Components / Accordion', () => { const user = userEvent.setup(); render(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars for (const _ of titles()) { await user.tab(); } diff --git a/src/lib/components/Accordion/Accordion.tsx b/src/lib/components/Accordion/Accordion.tsx index a31f32c704..29762f8176 100644 --- a/src/lib/components/Accordion/Accordion.tsx +++ b/src/lib/components/Accordion/Accordion.tsx @@ -2,14 +2,16 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; import { Children, cloneElement, useMemo, useState } from 'react'; import { HiChevronDown } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; -import { AccordionContent, FlowbiteAccordionComponentTheme } from './AccordionContent'; +import type { FlowbiteAccordionComponentTheme } from './AccordionContent'; +import { AccordionContent } from './AccordionContent'; import type { AccordionPanelProps } from './AccordionPanel'; import { AccordionPanel } from './AccordionPanel'; -import { AccordionTitle, FlowbiteAccordionTitleTheme } from './AccordionTitle'; +import type { FlowbiteAccordionTitleTheme } from './AccordionTitle'; +import { AccordionTitle } from './AccordionTitle'; export interface FlowbiteAccordionTheme { root: FlowbiteAccordionRootTheme; diff --git a/src/lib/components/Accordion/AccordionContent.tsx b/src/lib/components/Accordion/AccordionContent.tsx index 4b80c7e914..440a6dcbe6 100644 --- a/src/lib/components/Accordion/AccordionContent.tsx +++ b/src/lib/components/Accordion/AccordionContent.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useAccordionContext } from './AccordionPanelContext'; diff --git a/src/lib/components/Accordion/AccordionTitle.tsx b/src/lib/components/Accordion/AccordionTitle.tsx index 39c04e3276..16e7f33f16 100644 --- a/src/lib/components/Accordion/AccordionTitle.tsx +++ b/src/lib/components/Accordion/AccordionTitle.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteHeadingLevel } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Alert/Alert.spec.tsx b/src/lib/components/Alert/Alert.spec.tsx index 2a314ab848..f91a31d541 100644 --- a/src/lib/components/Alert/Alert.spec.tsx +++ b/src/lib/components/Alert/Alert.spec.tsx @@ -1,11 +1,13 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import { HiEye, HiHeart, HiInformationCircle } from 'react-icons/hi'; import { describe, expect, it, vi } from 'vitest'; import { Flowbite } from '../Flowbite'; -import { Alert, AlertProps } from './Alert'; +import type { AlertProps } from './Alert'; +import { Alert } from './Alert'; describe.concurrent('Components / Alert', () => { describe.concurrent('A11y', () => { diff --git a/src/lib/components/Alert/Alert.tsx b/src/lib/components/Alert/Alert.tsx index ca0c8e0af5..886c5cd1ae 100644 --- a/src/lib/components/Alert/Alert.tsx +++ b/src/lib/components/Alert/Alert.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; import { HiX } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Avatar/Avatar.tsx b/src/lib/components/Avatar/Avatar.tsx index 48ad308a54..d5c07cbf5f 100644 --- a/src/lib/components/Avatar/Avatar.tsx +++ b/src/lib/components/Avatar/Avatar.tsx @@ -1,11 +1,13 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; -import AvatarGroup, { FlowbiteAvatarGroupTheme } from './AvatarGroup'; -import AvatarGroupCounter, { FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter'; +import type { FlowbiteAvatarGroupTheme } from './AvatarGroup'; +import AvatarGroup from './AvatarGroup'; +import type { FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter'; +import AvatarGroupCounter from './AvatarGroupCounter'; export interface FlowbiteAvatarTheme { root: FlowbiteAvatarRootTheme; diff --git a/src/lib/components/Avatar/AvatarGroup.tsx b/src/lib/components/Avatar/AvatarGroup.tsx index 6be8f61dbf..7d3081faae 100644 --- a/src/lib/components/Avatar/AvatarGroup.tsx +++ b/src/lib/components/Avatar/AvatarGroup.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, PropsWithChildren } from 'react'; import React from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Avatar/AvatarGroupCounter.tsx b/src/lib/components/Avatar/AvatarGroupCounter.tsx index c8d9b52403..88fd0e1d1f 100644 --- a/src/lib/components/Avatar/AvatarGroupCounter.tsx +++ b/src/lib/components/Avatar/AvatarGroupCounter.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, PropsWithChildren } from 'react'; import React from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Badge/Badge.tsx b/src/lib/components/Badge/Badge.tsx index 38543aff33..265a0c777c 100644 --- a/src/lib/components/Badge/Badge.tsx +++ b/src/lib/components/Badge/Badge.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx b/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx index 8e424e6892..149a8b86f9 100644 --- a/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx +++ b/src/lib/components/Breadcrumb/Breadcrumb.spec.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@testing-library/react'; -import { FC } from 'react'; +import type { FC } from 'react'; import { HiHome } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; import { Flowbite } from '../Flowbite'; diff --git a/src/lib/components/Breadcrumb/Breadcrumb.tsx b/src/lib/components/Breadcrumb/Breadcrumb.tsx index 21393b83dd..a30daa139b 100644 --- a/src/lib/components/Breadcrumb/Breadcrumb.tsx +++ b/src/lib/components/Breadcrumb/Breadcrumb.tsx @@ -1,9 +1,10 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; -import BreadcrumbItem, { FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem'; +import type { FlowbiteBreadcrumbItemTheme } from './BreadcrumbItem'; +import BreadcrumbItem from './BreadcrumbItem'; export interface FlowbiteBreadcrumbTheme { root: FlowbiteBreadcrumbRootTheme; diff --git a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx index cb262f1256..e9fb8465c9 100644 --- a/src/lib/components/Breadcrumb/BreadcrumbItem.tsx +++ b/src/lib/components/Breadcrumb/BreadcrumbItem.tsx @@ -1,9 +1,10 @@ import classNames from 'classnames'; -import { ComponentProps, FC, forwardRef, PropsWithChildren } from 'react'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import { forwardRef } from 'react'; import { HiOutlineChevronRight } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteBreadcrumbItemTheme { diff --git a/src/lib/components/Button/ButtonGroup.tsx b/src/lib/components/Button/ButtonGroup.tsx index 98e3fa46e5..2afa4cdaab 100644 --- a/src/lib/components/Button/ButtonGroup.tsx +++ b/src/lib/components/Button/ButtonGroup.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react'; import { Children, cloneElement, useMemo } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { ButtonProps } from '../Button'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Card/Card.tsx b/src/lib/components/Card/Card.tsx index 0e0043a9ab..9927a6f512 100644 --- a/src/lib/components/Card/Card.tsx +++ b/src/lib/components/Card/Card.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteCardTheme { diff --git a/src/lib/components/Carousel/Carousel.tsx b/src/lib/components/Carousel/Carousel.tsx index 63fa848cca..cc61bc1447 100644 --- a/src/lib/components/Carousel/Carousel.tsx +++ b/src/lib/components/Carousel/Carousel.tsx @@ -5,7 +5,7 @@ import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi'; import ScrollContainer from 'react-indiana-drag-scroll'; import { mergeDeep } from '../../helpers/mergeDeep'; import windowExists from '../../helpers/window-exists'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteCarouselTheme { diff --git a/src/lib/components/Checkbox/Checkbox.tsx b/src/lib/components/Checkbox/Checkbox.tsx index 4bd75a31f5..720bc55736 100644 --- a/src/lib/components/Checkbox/Checkbox.tsx +++ b/src/lib/components/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx b/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx index 59705cc0ce..390f924d60 100644 --- a/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx +++ b/src/lib/components/DarkThemeToggle/DarkThemeToggle.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; import { useContext } from 'react'; import { HiMoon, HiSun } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { ThemeContext, useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Dropdown/Dropdown.spec.tsx b/src/lib/components/Dropdown/Dropdown.spec.tsx index 9c123bb083..2b17dfa08a 100644 --- a/src/lib/components/Dropdown/Dropdown.spec.tsx +++ b/src/lib/components/Dropdown/Dropdown.spec.tsx @@ -1,6 +1,6 @@ import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC } from 'react'; +import type { FC } from 'react'; import { describe, expect, it } from 'vitest'; import { Dropdown } from './Dropdown'; diff --git a/src/lib/components/Dropdown/Dropdown.tsx b/src/lib/components/Dropdown/Dropdown.tsx index 996dfed954..17a039388d 100644 --- a/src/lib/components/Dropdown/Dropdown.tsx +++ b/src/lib/components/Dropdown/Dropdown.tsx @@ -1,7 +1,8 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ import type { ComponentProps, FC, PropsWithChildren, ReactElement, ReactNode } from 'react'; -import React, { Children, useMemo, useState } from 'react'; +import React, { Children, useCallback, useMemo, useState } from 'react'; import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { uuid } from '../../helpers/uuid'; import type { ButtonProps } from '../Button'; @@ -9,9 +10,12 @@ import { Button } from '../Button'; import type { FloatingProps, FlowbiteFloatingTheme } from '../Floating'; import { Floating } from '../Floating'; import { useTheme } from '../Flowbite/ThemeContext'; -import { DropdownDivider, FlowbiteDropdownDividerTheme } from './DropdownDivider'; -import { DropdownHeader, FlowbiteDropdownHeaderTheme } from './DropdownHeader'; -import { DropdownItem, FlowbiteDropdownItemTheme } from './DropdownItem'; +import type { FlowbiteDropdownDividerTheme } from './DropdownDivider'; +import { DropdownDivider } from './DropdownDivider'; +import type { FlowbiteDropdownHeaderTheme } from './DropdownHeader'; +import { DropdownHeader } from './DropdownHeader'; +import type { FlowbiteDropdownItemTheme } from './DropdownItem'; +import { DropdownItem } from './DropdownItem'; export interface FlowbiteDropdownFloatingTheme extends FlowbiteFloatingTheme, @@ -73,27 +77,32 @@ const DropdownComponent: FC = ({ const [closeRequestKey, setCloseRequestKey] = useState(undefined); // Extends DropdownItem's onClick to trigger a close request to the Floating component - const attachCloseListener: any = (node: ReactNode) => { - if (!React.isValidElement(node)) return node; - if ((node as ReactElement).type === DropdownItem) - return React.cloneElement(node, { - onClick: () => { - node.props.onClick?.(); - dismissOnClick && setCloseRequestKey(uuid()); - }, - } as any); - if (node.props.children && typeof node.props.children === 'object') { - return React.cloneElement(node, { - // @ts-ignore - children: Children.map(node.props.children, attachCloseListener), - }); - } - return node; - }; + const attachCloseListener = useCallback( + // @ts-ignore TODO: Rewrite Dropdown + (node: ReactNode) => { + if (!React.isValidElement(node)) return node; + if ((node as ReactElement).type === DropdownItem) + return React.cloneElement(node, { + // @ts-ignore TODO: Rewrite Dropdown + onClick: () => { + node.props.onClick?.(); + dismissOnClick && setCloseRequestKey(uuid()); + }, + }); + if (node.props.children && typeof node.props.children === 'object') { + return React.cloneElement(node, { + // @ts-ignore TODO: Rewrite Dropdown + children: Children.map(node.props.children, attachCloseListener), + }); + } + return node; + }, + [dismissOnClick], + ); const content = useMemo( () =>
    {Children.map(children, attachCloseListener)}
, - [children, theme], + [attachCloseListener, children, theme.content], ); const TriggerWrapper: FC = ({ children }): JSX.Element => diff --git a/src/lib/components/Dropdown/DropdownItem.tsx b/src/lib/components/Dropdown/DropdownItem.tsx index 624ed55105..00b56e4677 100644 --- a/src/lib/components/Dropdown/DropdownItem.tsx +++ b/src/lib/components/Dropdown/DropdownItem.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/FileInput/FileInput.tsx b/src/lib/components/FileInput/FileInput.tsx index 4af3d230a1..8cab23f1de 100644 --- a/src/lib/components/FileInput/FileInput.tsx +++ b/src/lib/components/FileInput/FileInput.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, ReactNode } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { HelperText } from '../HelperText'; @@ -35,7 +35,7 @@ export interface FileInputProps extends Omit, 'type' | ' } export const FileInput = forwardRef( - ({ sizing = 'md', helperText, color = 'gray', className, theme: customTheme = {}, ...props }, ref) => { + ({ className, color = 'gray', helperText, sizing = 'md', theme: customTheme = {}, ...props }, ref) => { const theme = mergeDeep(useTheme().theme.fileInput, customTheme); return ( diff --git a/src/lib/components/Flowbite/Flowbite.spec.tsx b/src/lib/components/Flowbite/Flowbite.spec.tsx index 36f56d96ce..3c3f915419 100644 --- a/src/lib/components/Flowbite/Flowbite.spec.tsx +++ b/src/lib/components/Flowbite/Flowbite.spec.tsx @@ -3,7 +3,7 @@ import { afterEach, describe, expect, it } from 'vitest'; import { mergeDeep } from '../../helpers/mergeDeep'; import defaultTheme from '../../theme/default'; import { Flowbite, useTheme } from '../Flowbite'; -import { ThemeContextProps } from './ThemeContext'; +import type { ThemeContextProps } from './ThemeContext'; afterEach(() => { localStorage.removeItem('theme'); diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts index 648b880048..180e304352 100644 --- a/src/lib/components/Flowbite/FlowbiteTheme.ts +++ b/src/lib/components/Flowbite/FlowbiteTheme.ts @@ -1,38 +1,38 @@ -import { DeepPartial } from '..'; -import { FlowbiteAccordionTheme } from '../Accordion'; -import { FlowbiteAlertTheme } from '../Alert'; -import { FlowbiteAvatarTheme } from '../Avatar'; -import { FlowbiteBadgeTheme } from '../Badge'; -import { FlowbiteBreadcrumbTheme } from '../Breadcrumb'; -import { FlowbiteButtonGroupTheme, FlowbiteButtonTheme } from '../Button'; -import { FlowbiteCardTheme } from '../Card'; -import { FlowbiteCarouselTheme } from '../Carousel'; -import { FlowbiteCheckboxTheme } from '../Checkbox'; -import { FlowbiteDarkThemeToggleTheme } from '../DarkThemeToggle'; -import { FlowbiteDropdownTheme } from '../Dropdown'; -import { FlowbiteFileInputTheme } from '../FileInput'; -import { FlowbiteFooterTheme } from '../Footer'; -import { FlowbiteHelperTextTheme } from '../HelperText'; -import { FlowbiteLabelTheme } from '../Label'; -import { FlowbiteListGroupTheme } from '../ListGroup'; -import { FlowbiteModalTheme } from '../Modal'; -import { FlowbiteNavbarTheme } from '../Navbar'; -import { FlowbitePaginationTheme } from '../Pagination'; -import { FlowbiteProgressTheme } from '../Progress'; -import { FlowbiteRadioTheme } from '../Radio'; -import { FlowbiteRangeSliderTheme } from '../RangeSlider'; -import { FlowbiteRatingTheme } from '../Rating'; -import { FlowbiteSelectTheme } from '../Select'; -import { FlowbiteSidebarTheme } from '../Sidebar'; -import { FlowbiteSpinnerTheme } from '../Spinner'; -import { FlowbiteTabTheme } from '../Tab'; -import { FlowbiteTableTheme } from '../Table'; -import { FlowbiteTextareaTheme } from '../Textarea'; -import { FlowbiteTextInputTheme } from '../TextInput'; -import { FlowbiteTimelineTheme } from '../Timeline'; -import { FlowbiteToastTheme } from '../Toast'; -import { FlowbiteToggleSwitchTheme } from '../ToggleSwitch'; -import { FlowbiteTooltipTheme } from '../Tooltip'; +import type { DeepPartial } from '..'; +import type { FlowbiteAccordionTheme } from '../Accordion'; +import type { FlowbiteAlertTheme } from '../Alert'; +import type { FlowbiteAvatarTheme } from '../Avatar'; +import type { FlowbiteBadgeTheme } from '../Badge'; +import type { FlowbiteBreadcrumbTheme } from '../Breadcrumb'; +import type { FlowbiteButtonGroupTheme, FlowbiteButtonTheme } from '../Button'; +import type { FlowbiteCardTheme } from '../Card'; +import type { FlowbiteCarouselTheme } from '../Carousel'; +import type { FlowbiteCheckboxTheme } from '../Checkbox'; +import type { FlowbiteDarkThemeToggleTheme } from '../DarkThemeToggle'; +import type { FlowbiteDropdownTheme } from '../Dropdown'; +import type { FlowbiteFileInputTheme } from '../FileInput'; +import type { FlowbiteFooterTheme } from '../Footer'; +import type { FlowbiteHelperTextTheme } from '../HelperText'; +import type { FlowbiteLabelTheme } from '../Label'; +import type { FlowbiteListGroupTheme } from '../ListGroup'; +import type { FlowbiteModalTheme } from '../Modal'; +import type { FlowbiteNavbarTheme } from '../Navbar'; +import type { FlowbitePaginationTheme } from '../Pagination'; +import type { FlowbiteProgressTheme } from '../Progress'; +import type { FlowbiteRadioTheme } from '../Radio'; +import type { FlowbiteRangeSliderTheme } from '../RangeSlider'; +import type { FlowbiteRatingTheme } from '../Rating'; +import type { FlowbiteSelectTheme } from '../Select'; +import type { FlowbiteSidebarTheme } from '../Sidebar'; +import type { FlowbiteSpinnerTheme } from '../Spinner'; +import type { FlowbiteTabTheme } from '../Tab'; +import type { FlowbiteTableTheme } from '../Table'; +import type { FlowbiteTextareaTheme } from '../Textarea'; +import type { FlowbiteTextInputTheme } from '../TextInput'; +import type { FlowbiteTimelineTheme } from '../Timeline'; +import type { FlowbiteToastTheme } from '../Toast'; +import type { FlowbiteToggleSwitchTheme } from '../ToggleSwitch'; +import type { FlowbiteTooltipTheme } from '../Tooltip'; export type CustomFlowbiteTheme = DeepPartial; diff --git a/src/lib/components/Flowbite/ThemeContext.tsx b/src/lib/components/Flowbite/ThemeContext.tsx index 92d2a77448..ddcead4807 100644 --- a/src/lib/components/Flowbite/ThemeContext.tsx +++ b/src/lib/components/Flowbite/ThemeContext.tsx @@ -1,6 +1,5 @@ -/* eslint-disable react-hooks/rules-of-hooks */ import type { FC, ReactNode } from 'react'; -import { createContext, useContext, useEffect, useState } from 'react'; +import { createContext, useCallback, useContext, useEffect, useState } from 'react'; import windowExists from '../../helpers/window-exists'; import defaultTheme from '../../theme/default'; import type { FlowbiteTheme } from './FlowbiteTheme'; @@ -34,16 +33,15 @@ export const useThemeMode = ( usePreferences: boolean, ): [Mode, React.Dispatch>, () => void] => { const [mode, setModeState] = useState('light'); + const savePreference = (mode: Mode) => localStorage.setItem('theme', mode); - const getPreference = (): Mode => (localStorage.getItem('theme') as Mode) || getPrefersColorScheme(); const userPreferenceIsDark = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches; - const getPrefersColorScheme = (): Mode => (userPreferenceIsDark() ? 'dark' : 'light'); const toggleMode = () => { const newMode = mode === 'dark' ? 'light' : 'dark'; setMode(newMode); setModeState(newMode); }; - const setMode = (mode: Mode) => { + const setMode = useCallback((mode: Mode) => { savePreference(mode); if (!windowExists()) { return; @@ -55,11 +53,22 @@ export const useThemeMode = ( } document.documentElement.classList.remove('dark'); - }; - if (usePreferences) { - useEffect(() => setModeState(getPreference()), []); - useEffect(() => setMode(mode), [mode]); - } + }, []); + + useEffect(() => { + if (usePreferences) { + const getPreference = (): Mode => (localStorage.getItem('theme') as Mode) || getPrefersColorScheme(); + const getPrefersColorScheme = (): Mode => (userPreferenceIsDark() ? 'dark' : 'light'); + + setModeState(getPreference()); + } + }, [usePreferences]); + + useEffect(() => { + if (usePreferences) { + setMode(mode); + } + }, [mode, setMode, usePreferences]); return [mode, setModeState, toggleMode]; }; diff --git a/src/lib/components/Footer/Footer.spec.tsx b/src/lib/components/Footer/Footer.spec.tsx index b8a77f7b88..120acfec6f 100644 --- a/src/lib/components/Footer/Footer.spec.tsx +++ b/src/lib/components/Footer/Footer.spec.tsx @@ -1,5 +1,5 @@ import { cleanup, render, screen } from '@testing-library/react'; -import { FC } from 'react'; +import type { FC } from 'react'; import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs'; import { describe, expect, it } from 'vitest'; import { Flowbite } from '../Flowbite'; @@ -189,10 +189,6 @@ describe('Components / Footer', () => { }); }); - it('should use `divider` classes', () => {}); - - it('should use `groupLink` classes', () => {}); - describe('`Footer.Icon`', () => { it('should use `icon` classes', () => { const theme = { diff --git a/src/lib/components/Footer/Footer.tsx b/src/lib/components/Footer/Footer.tsx index 656c0315da..2202b8c143 100644 --- a/src/lib/components/Footer/Footer.tsx +++ b/src/lib/components/Footer/Footer.tsx @@ -1,15 +1,21 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteFooterBrandTheme, FooterBrand } from './FooterBrand'; -import { FlowbiteFooterCopyrightTheme, FooterCopyright } from './FooterCopyright'; -import { FlowbiteFooterDividerTheme, FooterDivider } from './FooterDivider'; -import { FlowbiteFooterIconTheme, FooterIcon } from './FooterIcon'; +import type { FlowbiteFooterBrandTheme } from './FooterBrand'; +import { FooterBrand } from './FooterBrand'; +import type { FlowbiteFooterCopyrightTheme } from './FooterCopyright'; +import { FooterCopyright } from './FooterCopyright'; +import type { FlowbiteFooterDividerTheme } from './FooterDivider'; +import { FooterDivider } from './FooterDivider'; +import type { FlowbiteFooterIconTheme } from './FooterIcon'; +import { FooterIcon } from './FooterIcon'; import { FooterLink } from './FooterLink'; -import { FlowbiteFooterLinkGroupTheme, FooterLinkGroup } from './FooterLinkGroup'; -import { FlowbiteFooterTitleTheme, FooterTitle } from './FooterTitle'; +import type { FlowbiteFooterLinkGroupTheme } from './FooterLinkGroup'; +import { FooterLinkGroup } from './FooterLinkGroup'; +import type { FlowbiteFooterTitleTheme } from './FooterTitle'; +import { FooterTitle } from './FooterTitle'; export interface FlowbiteFooterTheme { brand: FlowbiteFooterBrandTheme; diff --git a/src/lib/components/Footer/FooterBrand.tsx b/src/lib/components/Footer/FooterBrand.tsx index 10ca0e3eab..c4dba856ca 100644 --- a/src/lib/components/Footer/FooterBrand.tsx +++ b/src/lib/components/Footer/FooterBrand.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Footer/FooterCopyright.tsx b/src/lib/components/Footer/FooterCopyright.tsx index 6dac16d3e2..d6dd5e45b0 100644 --- a/src/lib/components/Footer/FooterCopyright.tsx +++ b/src/lib/components/Footer/FooterCopyright.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Footer/FooterDivider.tsx b/src/lib/components/Footer/FooterDivider.tsx index 6f64073b52..bfd7188ab1 100644 --- a/src/lib/components/Footer/FooterDivider.tsx +++ b/src/lib/components/Footer/FooterDivider.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Footer/FooterIcon.tsx b/src/lib/components/Footer/FooterIcon.tsx index 27c4f6997a..b41e920736 100644 --- a/src/lib/components/Footer/FooterIcon.tsx +++ b/src/lib/components/Footer/FooterIcon.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Footer/FooterLink.tsx b/src/lib/components/Footer/FooterLink.tsx index e044684801..c047679a42 100644 --- a/src/lib/components/Footer/FooterLink.tsx +++ b/src/lib/components/Footer/FooterLink.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Footer/FooterLinkGroup.tsx b/src/lib/components/Footer/FooterLinkGroup.tsx index f6828ef78c..15824244e7 100644 --- a/src/lib/components/Footer/FooterLinkGroup.tsx +++ b/src/lib/components/Footer/FooterLinkGroup.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteFooterLinkTheme } from './FooterLink'; +import type { FlowbiteFooterLinkTheme } from './FooterLink'; export interface FlowbiteFooterLinkGroupTheme { base: string; diff --git a/src/lib/components/Footer/FooterTitle.tsx b/src/lib/components/Footer/FooterTitle.tsx index ca23d414c9..e970a46147 100644 --- a/src/lib/components/Footer/FooterTitle.tsx +++ b/src/lib/components/Footer/FooterTitle.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/HelperText/HelperText.tsx b/src/lib/components/HelperText/HelperText.tsx index a42933b409..ab74fcf18c 100644 --- a/src/lib/components/HelperText/HelperText.tsx +++ b/src/lib/components/HelperText/HelperText.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; @@ -25,11 +25,11 @@ export interface HelperTextProps extends PropsWithChildren = ({ - value, children, - color = 'default', className, + color = 'default', theme: customTheme = {}, + value, ...props }) => { const theme = mergeDeep(useTheme().theme.helperText, customTheme); diff --git a/src/lib/components/Label/Label.tsx b/src/lib/components/Label/Label.tsx index 84ead9190b..cebfeca9d5 100644 --- a/src/lib/components/Label/Label.tsx +++ b/src/lib/components/Label/Label.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteStateColors } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/ListGroup/ListGroup.spec.tsx b/src/lib/components/ListGroup/ListGroup.spec.tsx index 8da01f323f..9c9b4265aa 100644 --- a/src/lib/components/ListGroup/ListGroup.spec.tsx +++ b/src/lib/components/ListGroup/ListGroup.spec.tsx @@ -3,8 +3,9 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { HiCloudDownload } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; -import { DeepPartial } from '..'; -import { Flowbite, FlowbiteTheme } from '../Flowbite'; +import type { DeepPartial } from '..'; +import type { FlowbiteTheme } from '../Flowbite'; +import { Flowbite } from '../Flowbite'; import { ListGroup } from './ListGroup'; describe('Components / List group', () => { @@ -46,6 +47,7 @@ describe('Components / List group', () => { await user.tab(); + // eslint-disable-next-line @typescript-eslint/no-unused-vars for (const _ of items()) { await user.tab(); } diff --git a/src/lib/components/ListGroup/ListGroup.tsx b/src/lib/components/ListGroup/ListGroup.tsx index f3f99a87cf..fd97973a50 100644 --- a/src/lib/components/ListGroup/ListGroup.tsx +++ b/src/lib/components/ListGroup/ListGroup.tsx @@ -1,9 +1,10 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteListGroupItemTheme, ListGroupItem } from './ListGroupItem'; +import type { FlowbiteListGroupItemTheme } from './ListGroupItem'; +import { ListGroupItem } from './ListGroupItem'; export interface FlowbiteListGroupTheme { root: FlowbiteListGroupRootTheme; diff --git a/src/lib/components/ListGroup/ListGroupItem.tsx b/src/lib/components/ListGroup/ListGroupItem.tsx index fa0e1479d2..7cd87f253c 100644 --- a/src/lib/components/ListGroup/ListGroupItem.tsx +++ b/src/lib/components/ListGroup/ListGroupItem.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteListGroupItemTheme { diff --git a/src/lib/components/Modal/Modal.tsx b/src/lib/components/Modal/Modal.tsx index 4d144e6e7b..15228f0635 100644 --- a/src/lib/components/Modal/Modal.tsx +++ b/src/lib/components/Modal/Modal.tsx @@ -1,15 +1,19 @@ import classNames from 'classnames'; -import { ComponentProps, FC, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react'; +import type { ComponentProps, FC, MouseEvent, PropsWithChildren } from 'react'; +import { useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useKeyDown } from '../../hooks'; import type { FlowbiteBoolean, FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteModalBodyTheme, ModalBody } from './ModalBody'; +import type { FlowbiteModalBodyTheme } from './ModalBody'; +import { ModalBody } from './ModalBody'; import { ModalContext } from './ModalContext'; -import { FlowbiteModalFooterTheme, ModalFooter } from './ModalFooter'; -import { FlowbiteModalHeaderTheme, ModalHeader } from './ModalHeader'; +import type { FlowbiteModalFooterTheme } from './ModalFooter'; +import { ModalFooter } from './ModalFooter'; +import type { FlowbiteModalHeaderTheme } from './ModalHeader'; +import { ModalHeader } from './ModalHeader'; export interface FlowbiteModalTheme { root: FlowbiteModalRootTheme; diff --git a/src/lib/components/Modal/ModalBody.tsx b/src/lib/components/Modal/ModalBody.tsx index f54614a3ca..9a60853310 100644 --- a/src/lib/components/Modal/ModalBody.tsx +++ b/src/lib/components/Modal/ModalBody.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useModalContext } from './ModalContext'; diff --git a/src/lib/components/Modal/ModalFooter.tsx b/src/lib/components/Modal/ModalFooter.tsx index 5ada54d9ab..e82e95fbea 100644 --- a/src/lib/components/Modal/ModalFooter.tsx +++ b/src/lib/components/Modal/ModalFooter.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useModalContext } from './ModalContext'; diff --git a/src/lib/components/Modal/ModalHeader.tsx b/src/lib/components/Modal/ModalHeader.tsx index 8a8f5de3fb..c9c17324a1 100644 --- a/src/lib/components/Modal/ModalHeader.tsx +++ b/src/lib/components/Modal/ModalHeader.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { HiOutlineX } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useModalContext } from './ModalContext'; diff --git a/src/lib/components/Navbar/Navbar.spec.tsx b/src/lib/components/Navbar/Navbar.spec.tsx index 9259fcc664..ee70133911 100644 --- a/src/lib/components/Navbar/Navbar.spec.tsx +++ b/src/lib/components/Navbar/Navbar.spec.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC } from 'react'; +import type { FC } from 'react'; import { describe, expect, it } from 'vitest'; import { Navbar } from './Navbar'; diff --git a/src/lib/components/Navbar/Navbar.tsx b/src/lib/components/Navbar/Navbar.tsx index 99563aea66..89f928d82c 100644 --- a/src/lib/components/Navbar/Navbar.tsx +++ b/src/lib/components/Navbar/Navbar.tsx @@ -1,15 +1,19 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { useState } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteNavbarBrandTheme, NavbarBrand } from './NavbarBrand'; -import { FlowbiteNavbarCollapseTheme, NavbarCollapse } from './NavbarCollapse'; +import type { FlowbiteNavbarBrandTheme } from './NavbarBrand'; +import { NavbarBrand } from './NavbarBrand'; +import type { FlowbiteNavbarCollapseTheme } from './NavbarCollapse'; +import { NavbarCollapse } from './NavbarCollapse'; import { NavbarContext } from './NavbarContext'; -import { FlowbiteNavbarLinkTheme, NavbarLink } from './NavbarLink'; -import { FlowbiteNavbarToggleTheme, NavbarToggle } from './NavbarToggle'; +import type { FlowbiteNavbarLinkTheme } from './NavbarLink'; +import { NavbarLink } from './NavbarLink'; +import type { FlowbiteNavbarToggleTheme } from './NavbarToggle'; +import { NavbarToggle } from './NavbarToggle'; export interface FlowbiteNavbarTheme { root: FlowbiteNavbarRootTheme; diff --git a/src/lib/components/Navbar/NavbarBrand.tsx b/src/lib/components/Navbar/NavbarBrand.tsx index 2c4340bd9e..f62c4f7ff4 100644 --- a/src/lib/components/Navbar/NavbarBrand.tsx +++ b/src/lib/components/Navbar/NavbarBrand.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; import type { LinkProps } from 'react-router-dom'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Navbar/NavbarCollapse.tsx b/src/lib/components/Navbar/NavbarCollapse.tsx index 0a8e06ec70..542657b75e 100644 --- a/src/lib/components/Navbar/NavbarCollapse.tsx +++ b/src/lib/components/Navbar/NavbarCollapse.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; import { useNavbarContext } from './NavbarContext'; diff --git a/src/lib/components/Navbar/NavbarLink.tsx b/src/lib/components/Navbar/NavbarLink.tsx index d9e9014716..a2646187c1 100644 --- a/src/lib/components/Navbar/NavbarLink.tsx +++ b/src/lib/components/Navbar/NavbarLink.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react'; import type { LinkProps } from 'react-router-dom'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteNavbarLinkTheme { diff --git a/src/lib/components/Navbar/NavbarToggle.tsx b/src/lib/components/Navbar/NavbarToggle.tsx index 4422d68871..5d657ae603 100644 --- a/src/lib/components/Navbar/NavbarToggle.tsx +++ b/src/lib/components/Navbar/NavbarToggle.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; import { GoThreeBars } from 'react-icons/go'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useNavbarContext } from './NavbarContext'; diff --git a/src/lib/components/Pagination/Pagination.tsx b/src/lib/components/Pagination/Pagination.tsx index 0d153b0e5b..8a669b917f 100644 --- a/src/lib/components/Pagination/Pagination.tsx +++ b/src/lib/components/Pagination/Pagination.tsx @@ -1,11 +1,12 @@ import classNames from 'classnames'; import type { ComponentProps, PropsWithChildren, ReactNode } from 'react'; import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import range from '../../helpers/range'; import { useTheme } from '../Flowbite/ThemeContext'; -import PaginationButton, { FlowbitePaginationButtonTheme, PaginationButtonProps } from './PaginationButton'; +import type { FlowbitePaginationButtonTheme, PaginationButtonProps } from './PaginationButton'; +import PaginationButton from './PaginationButton'; export interface FlowbitePaginationTheme { base: string; diff --git a/src/lib/components/Pagination/PaginationButton.tsx b/src/lib/components/Pagination/PaginationButton.tsx index dacf1062b2..08b006a55e 100644 --- a/src/lib/components/Pagination/PaginationButton.tsx +++ b/src/lib/components/Pagination/PaginationButton.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; -import { ReactEventHandler, ReactNode } from 'react'; -import { DeepPartial } from '..'; +import type { ReactEventHandler, ReactNode } from 'react'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Progress/Progress.tsx b/src/lib/components/Progress/Progress.tsx index a422047c67..05d2a88157 100644 --- a/src/lib/components/Progress/Progress.tsx +++ b/src/lib/components/Progress/Progress.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { useId } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Radio/Radio.tsx b/src/lib/components/Radio/Radio.tsx index cd271c947f..8dfa6eee48 100644 --- a/src/lib/components/Radio/Radio.tsx +++ b/src/lib/components/Radio/Radio.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/RangeSlider/RangeSlider.tsx b/src/lib/components/RangeSlider/RangeSlider.tsx index 563f77a8ab..30afb76573 100644 --- a/src/lib/components/RangeSlider/RangeSlider.tsx +++ b/src/lib/components/RangeSlider/RangeSlider.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import type { TextInputSizes } from '../TextInput'; diff --git a/src/lib/components/Rating/Rating.tsx b/src/lib/components/Rating/Rating.tsx index b16652d4b5..99477cc38e 100644 --- a/src/lib/components/Rating/Rating.tsx +++ b/src/lib/components/Rating/Rating.tsx @@ -1,11 +1,13 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; -import { FlowbiteRatingAdvancedTheme, RatingAdvanced } from './RatingAdvanced'; +import type { FlowbiteRatingAdvancedTheme } from './RatingAdvanced'; +import { RatingAdvanced } from './RatingAdvanced'; import { RatingContext } from './RatingContext'; -import { FlowbiteRatingStarTheme, FlowbiteStarSizes, RatingStar } from './RatingStar'; +import type { FlowbiteRatingStarTheme, FlowbiteStarSizes } from './RatingStar'; +import { RatingStar } from './RatingStar'; export interface FlowbiteRatingTheme { root: { diff --git a/src/lib/components/Rating/RatingAdvanced.tsx b/src/lib/components/Rating/RatingAdvanced.tsx index 025988a6d4..5931034925 100644 --- a/src/lib/components/Rating/RatingAdvanced.tsx +++ b/src/lib/components/Rating/RatingAdvanced.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Rating/RatingContext.tsx b/src/lib/components/Rating/RatingContext.tsx index d51f8efb28..20fc965b17 100644 --- a/src/lib/components/Rating/RatingContext.tsx +++ b/src/lib/components/Rating/RatingContext.tsx @@ -1,5 +1,5 @@ import { createContext, useContext } from 'react'; -import { FlowbiteStarSizes } from './RatingStar'; +import type { FlowbiteStarSizes } from './RatingStar'; export type RatingContext = { size?: keyof FlowbiteStarSizes; diff --git a/src/lib/components/Rating/RatingStar.tsx b/src/lib/components/Rating/RatingStar.tsx index 56f117a09c..500ecac2ed 100644 --- a/src/lib/components/Rating/RatingStar.tsx +++ b/src/lib/components/Rating/RatingStar.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; import { HiStar } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; import { useRatingContext } from './RatingContext'; diff --git a/src/lib/components/Select/Select.tsx b/src/lib/components/Select/Select.tsx index 68ce5139d8..6dbfb2e3c0 100644 --- a/src/lib/components/Select/Select.tsx +++ b/src/lib/components/Select/Select.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Sidebar/Sidebar.spec.tsx b/src/lib/components/Sidebar/Sidebar.spec.tsx index 8d9b88abc3..636a6a39cf 100644 --- a/src/lib/components/Sidebar/Sidebar.spec.tsx +++ b/src/lib/components/Sidebar/Sidebar.spec.tsx @@ -1,10 +1,11 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC } from 'react'; +import type { FC } from 'react'; import { HiChartPie, HiInbox, HiShoppingBag } from 'react-icons/hi'; import { describe, expect, it } from 'vitest'; -import { DeepPartial } from '..'; -import { Flowbite, FlowbiteTheme } from '../Flowbite'; +import type { DeepPartial } from '..'; +import type { FlowbiteTheme } from '../Flowbite'; +import { Flowbite } from '../Flowbite'; import type { SidebarProps } from './Sidebar'; import { Sidebar } from './Sidebar'; diff --git a/src/lib/components/Sidebar/Sidebar.stories.tsx b/src/lib/components/Sidebar/Sidebar.stories.tsx index 56b651696f..ec4185082d 100644 --- a/src/lib/components/Sidebar/Sidebar.stories.tsx +++ b/src/lib/components/Sidebar/Sidebar.stories.tsx @@ -107,7 +107,6 @@ MultiLevelDropdown.args = { }; export const DefaultExpandedDropdown = Template.bind({}); -DefaultExpandedDropdown.storyName = 'Default Expanded Dropdown'; DefaultExpandedDropdown.args = { children: ( <> diff --git a/src/lib/components/Sidebar/Sidebar.tsx b/src/lib/components/Sidebar/Sidebar.tsx index 49ffa0b2a9..7ba338fc90 100644 --- a/src/lib/components/Sidebar/Sidebar.tsx +++ b/src/lib/components/Sidebar/Sidebar.tsx @@ -1,14 +1,18 @@ import classNames from 'classnames'; -import { ComponentProps, FC, PropsWithChildren } from 'react'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; -import SidebarCollapse, { FlowbiteSidebarCollapseTheme } from './SidebarCollapse'; +import type { FlowbiteSidebarCollapseTheme } from './SidebarCollapse'; +import SidebarCollapse from './SidebarCollapse'; import { SidebarContext } from './SidebarContext'; -import SidebarCTA, { FlowbiteSidebarCTATheme } from './SidebarCTA'; -import SidebarItem, { FlowbiteSidebarItemTheme } from './SidebarItem'; +import type { FlowbiteSidebarCTATheme } from './SidebarCTA'; +import SidebarCTA from './SidebarCTA'; +import type { FlowbiteSidebarItemTheme } from './SidebarItem'; +import SidebarItem from './SidebarItem'; import SidebarItemGroup from './SidebarItemGroup'; import SidebarItems from './SidebarItems'; -import SidebarLogo, { FlowbiteSidebarLogoTheme } from './SidebarLogo'; +import type { FlowbiteSidebarLogoTheme } from './SidebarLogo'; +import SidebarLogo from './SidebarLogo'; export interface FlowbiteSidebarTheme { root: { diff --git a/src/lib/components/Sidebar/SidebarCollapse.tsx b/src/lib/components/Sidebar/SidebarCollapse.tsx index 9d1637c8c2..8d1e498ef8 100644 --- a/src/lib/components/Sidebar/SidebarCollapse.tsx +++ b/src/lib/components/Sidebar/SidebarCollapse.tsx @@ -2,9 +2,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { useEffect, useId, useState } from 'react'; import { HiChevronDown } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; import { Tooltip } from '../Tooltip'; import { useSidebarContext } from './SidebarContext'; diff --git a/src/lib/components/Sidebar/SidebarItem.tsx b/src/lib/components/Sidebar/SidebarItem.tsx index 067742a0e2..9c9523bc0f 100644 --- a/src/lib/components/Sidebar/SidebarItem.tsx +++ b/src/lib/components/Sidebar/SidebarItem.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; -import { ComponentProps, ElementType, FC, forwardRef, PropsWithChildren, ReactNode, useId } from 'react'; -import { DeepPartial } from '..'; +import type { ComponentProps, ElementType, FC, PropsWithChildren, ReactNode } from 'react'; +import { forwardRef, useId } from 'react'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { Badge } from '../Badge'; import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme'; diff --git a/src/lib/components/Sidebar/SidebarLogo.tsx b/src/lib/components/Sidebar/SidebarLogo.tsx index e125af416d..654d3b5a87 100644 --- a/src/lib/components/Sidebar/SidebarLogo.tsx +++ b/src/lib/components/Sidebar/SidebarLogo.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { useId } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; import { useSidebarContext } from './SidebarContext'; diff --git a/src/lib/components/Spinner/Spinner.tsx b/src/lib/components/Spinner/Spinner.tsx index 0b266bf982..59d0a4ea32 100644 --- a/src/lib/components/Spinner/Spinner.tsx +++ b/src/lib/components/Spinner/Spinner.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Tab/Tabs.spec.tsx b/src/lib/components/Tab/Tabs.spec.tsx index 7f7751c544..9a2fd97dd4 100644 --- a/src/lib/components/Tab/Tabs.spec.tsx +++ b/src/lib/components/Tab/Tabs.spec.tsx @@ -1,11 +1,13 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { createRef, FC, forwardRef } from 'react'; +import type { FC } from 'react'; +import { createRef, forwardRef } from 'react'; import { act } from 'react-dom/test-utils'; import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi'; import { MdDashboard } from 'react-icons/md'; import { describe, expect, it, vi } from 'vitest'; -import { Tabs, TabsRef } from './Tabs'; +import type { TabsRef } from './Tabs'; +import { Tabs } from './Tabs'; describe('Components / Tabs', () => { it('should open tab when clicked', async () => { @@ -88,7 +90,7 @@ describe('Components / Tabs', () => { it('should call onActiveTabChanged when clicked', async () => { const user = userEvent.setup(); - const helper = { onActiveTabChange: (_activeTab: number) => {} }; + const helper = { onActiveTabChange: () => void 0 }; const spy = vi.spyOn(helper, 'onActiveTabChange'); render(); @@ -110,7 +112,7 @@ describe('Components / Tabs', () => { it('should open tab and call onActiveTabChanged when setActiveTab is called', async () => { const ref = createRef(); - const helper = { onActiveTabChange: (_activeTab: number) => {} }; + const helper = { onActiveTabChange: () => void 0 }; const spy = vi.spyOn(helper, 'onActiveTabChange'); render(); diff --git a/src/lib/components/Tab/Tabs.tsx b/src/lib/components/Tab/Tabs.tsx index e946a0dd79..cc4be61616 100644 --- a/src/lib/components/Tab/Tabs.tsx +++ b/src/lib/components/Tab/Tabs.tsx @@ -1,20 +1,7 @@ import classNames from 'classnames'; -import { - Children, - ComponentProps, - ForwardedRef, - forwardRef, - KeyboardEvent, - PropsWithChildren, - ReactElement, - useEffect, - useId, - useImperativeHandle, - useMemo, - useRef, - useState, -} from 'react'; -import { DeepPartial } from '..'; +import type { ComponentProps, ForwardedRef, KeyboardEvent, PropsWithChildren, ReactElement } from 'react'; +import { Children, forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Table/Table.tsx b/src/lib/components/Table/Table.tsx index e808160bf7..c749738af4 100644 --- a/src/lib/components/Table/Table.tsx +++ b/src/lib/components/Table/Table.tsx @@ -1,14 +1,18 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; import { TableBody } from './TableBody'; -import { FlowbiteTableCellTheme, TableCell } from './TableCell'; -import { TableContext, TableContextType } from './TableContext'; -import { FlowbiteTableHeadTheme, TableHead } from './TableHead'; +import type { FlowbiteTableCellTheme } from './TableCell'; +import { TableCell } from './TableCell'; +import type { TableContextType } from './TableContext'; +import { TableContext } from './TableContext'; +import type { FlowbiteTableHeadTheme } from './TableHead'; +import { TableHead } from './TableHead'; import { TableHeadCell } from './TableHeadCell'; -import { FlowbiteTableRowTheme, TableRow } from './TableRow'; +import type { FlowbiteTableRowTheme } from './TableRow'; +import { TableRow } from './TableRow'; export interface FlowbiteTableTheme { root: FlowbiteTableRootTheme; diff --git a/src/lib/components/Table/TableCell.tsx b/src/lib/components/Table/TableCell.tsx index f680b59429..b5af06d623 100644 --- a/src/lib/components/Table/TableCell.tsx +++ b/src/lib/components/Table/TableCell.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Table/TableHead.tsx b/src/lib/components/Table/TableHead.tsx index af5c7f4d23..0660009ae0 100644 --- a/src/lib/components/Table/TableHead.tsx +++ b/src/lib/components/Table/TableHead.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; -import { FlowbiteTableHeadCellTheme } from './TableHeadCell'; +import type { FlowbiteTableHeadCellTheme } from './TableHeadCell'; export interface FlowbiteTableHeadTheme { base: string; diff --git a/src/lib/components/Table/TableHeadCell.tsx b/src/lib/components/Table/TableHeadCell.tsx index 46b2d4888a..b1cc5c3f9c 100644 --- a/src/lib/components/Table/TableHeadCell.tsx +++ b/src/lib/components/Table/TableHeadCell.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Table/TableRow.tsx b/src/lib/components/Table/TableRow.tsx index 8868af217f..3cb6f97fb0 100644 --- a/src/lib/components/Table/TableRow.tsx +++ b/src/lib/components/Table/TableRow.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; import { useTableContext } from './TableContext'; diff --git a/src/lib/components/TextInput/TextInput.tsx b/src/lib/components/TextInput/TextInput.tsx index 397c51dc41..8d7d0bf736 100644 --- a/src/lib/components/TextInput/TextInput.tsx +++ b/src/lib/components/TextInput/TextInput.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, ReactNode } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Textarea/Textarea.tsx b/src/lib/components/Textarea/Textarea.tsx index d15cfaaa78..fd093bb3f9 100644 --- a/src/lib/components/Textarea/Textarea.tsx +++ b/src/lib/components/Textarea/Textarea.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, ReactNode } from 'react'; import { forwardRef } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import type { FlowbiteBoolean, FlowbiteColors } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; diff --git a/src/lib/components/Timeline/Timeline.spec.tsx b/src/lib/components/Timeline/Timeline.spec.tsx index b637a2293a..c9a8c5eecb 100644 --- a/src/lib/components/Timeline/Timeline.spec.tsx +++ b/src/lib/components/Timeline/Timeline.spec.tsx @@ -1,7 +1,8 @@ import { render, screen } from '@testing-library/react'; import type { FC } from 'react'; import { describe, expect, it } from 'vitest'; -import { Timeline, TimelineProps } from './Timeline'; +import type { TimelineProps } from './Timeline'; +import { Timeline } from './Timeline'; describe.concurrent('Components / Timeline', () => { describe('Rendering horizontal mode', () => { diff --git a/src/lib/components/Timeline/Timeline.tsx b/src/lib/components/Timeline/Timeline.tsx index 6833392a8d..e27c0e8c4f 100644 --- a/src/lib/components/Timeline/Timeline.tsx +++ b/src/lib/components/Timeline/Timeline.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; import { TimelineBody } from './TimelineBody'; import { TimelineContent } from './TimelineContent'; import { TimelineContext } from './TimelineContext'; -import { FlowbiteTimelineItemTheme, TimelineItem } from './TimelineItem'; +import type { FlowbiteTimelineItemTheme } from './TimelineItem'; +import { TimelineItem } from './TimelineItem'; import { TimelinePoint } from './TimelinePoint'; import { TimelineTime } from './TimelineTime'; import { TimelineTitle } from './TimelineTitle'; diff --git a/src/lib/components/Timeline/TimelineBody.tsx b/src/lib/components/Timeline/TimelineBody.tsx index ff977ec961..68e37f3b33 100644 --- a/src/lib/components/Timeline/TimelineBody.tsx +++ b/src/lib/components/Timeline/TimelineBody.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Timeline/TimelineContent.tsx b/src/lib/components/Timeline/TimelineContent.tsx index 428a69f25d..757bc51283 100644 --- a/src/lib/components/Timeline/TimelineContent.tsx +++ b/src/lib/components/Timeline/TimelineContent.tsx @@ -1,12 +1,12 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; -import { FlowbiteTimelineBodyTheme } from './TimelineBody'; +import type { FlowbiteTimelineBodyTheme } from './TimelineBody'; import { useTimelineContext } from './TimelineContext'; -import { FlowbiteTimelineTimeTheme } from './TimelineTime'; -import { FlowbiteTimelineTitleTheme } from './TimelineTitle'; +import type { FlowbiteTimelineTimeTheme } from './TimelineTime'; +import type { FlowbiteTimelineTitleTheme } from './TimelineTitle'; export interface FlowbiteTimelineContentTheme extends FlowbiteTimelineBodyTheme, diff --git a/src/lib/components/Timeline/TimelineItem.tsx b/src/lib/components/Timeline/TimelineItem.tsx index b2d90ae4ee..b9a598b35d 100644 --- a/src/lib/components/Timeline/TimelineItem.tsx +++ b/src/lib/components/Timeline/TimelineItem.tsx @@ -1,11 +1,11 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; -import { FlowbiteTimelineContentTheme } from './TimelineContent'; +import type { FlowbiteTimelineContentTheme } from './TimelineContent'; import { useTimelineContext } from './TimelineContext'; -import { FlowbiteTimelinePointTheme } from './TimelinePoint'; +import type { FlowbiteTimelinePointTheme } from './TimelinePoint'; export interface FlowbiteTimelineItemTheme { root: { diff --git a/src/lib/components/Timeline/TimelinePoint.tsx b/src/lib/components/Timeline/TimelinePoint.tsx index 9138fd963d..ac5596a992 100644 --- a/src/lib/components/Timeline/TimelinePoint.tsx +++ b/src/lib/components/Timeline/TimelinePoint.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; import { useTimelineContext } from './TimelineContext'; diff --git a/src/lib/components/Timeline/TimelineTime.tsx b/src/lib/components/Timeline/TimelineTime.tsx index 48d857a5cb..b1c021ffd5 100644 --- a/src/lib/components/Timeline/TimelineTime.tsx +++ b/src/lib/components/Timeline/TimelineTime.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; diff --git a/src/lib/components/Timeline/TimelineTitle.tsx b/src/lib/components/Timeline/TimelineTitle.tsx index 7b737fc811..7174dfc85d 100644 --- a/src/lib/components/Timeline/TimelineTitle.tsx +++ b/src/lib/components/Timeline/TimelineTitle.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite'; import type { FlowbiteHeadingLevel } from '../Flowbite/FlowbiteTheme'; diff --git a/src/lib/components/Toast/Toast.tsx b/src/lib/components/Toast/Toast.tsx index 106da55134..74aaabbb87 100644 --- a/src/lib/components/Toast/Toast.tsx +++ b/src/lib/components/Toast/Toast.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; import { useState } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import type { Duration } from './ToastContext'; diff --git a/src/lib/components/Toast/ToastToggle.tsx b/src/lib/components/Toast/ToastToggle.tsx index 43c459e287..022fb8dd7c 100644 --- a/src/lib/components/Toast/ToastToggle.tsx +++ b/src/lib/components/Toast/ToastToggle.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import type { ComponentProps, FC } from 'react'; import { HiX } from 'react-icons/hi'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; import { useTheme } from '../Flowbite/ThemeContext'; import { useToastContext } from './ToastContext'; diff --git a/src/lib/components/ToggleSwitch/ToggleSwitch.spec.tsx b/src/lib/components/ToggleSwitch/ToggleSwitch.spec.tsx index 0e4536908c..12cf533982 100644 --- a/src/lib/components/ToggleSwitch/ToggleSwitch.spec.tsx +++ b/src/lib/components/ToggleSwitch/ToggleSwitch.spec.tsx @@ -1,6 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { FC, useState } from 'react'; +import type { FC } from 'react'; +import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; import { Flowbite } from '../Flowbite'; import { TextInput } from '../TextInput'; diff --git a/src/lib/components/ToggleSwitch/ToggleSwitch.stories.tsx b/src/lib/components/ToggleSwitch/ToggleSwitch.stories.tsx index f96f4b628d..efa94a8e47 100644 --- a/src/lib/components/ToggleSwitch/ToggleSwitch.stories.tsx +++ b/src/lib/components/ToggleSwitch/ToggleSwitch.stories.tsx @@ -11,14 +11,14 @@ export default { component: ToggleSwitch, } as Meta; -const Template: Story = ({ checked, onChange, ...args }) => { +const Template: Story = ({ checked, ...args }) => { const [switchChecked, setSwitchChecked] = useState(checked); const handleChange = () => { setSwitchChecked((currentCheck) => !currentCheck); }; - return ; + return ; }; export const DefaultToggleSwitch = Template.bind({}); diff --git a/src/lib/components/ToggleSwitch/ToggleSwitch.tsx b/src/lib/components/ToggleSwitch/ToggleSwitch.tsx index dfddef27ee..cbb73db035 100644 --- a/src/lib/components/ToggleSwitch/ToggleSwitch.tsx +++ b/src/lib/components/ToggleSwitch/ToggleSwitch.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames'; import type { ComponentProps, FC, KeyboardEvent, MouseEvent } from 'react'; import { useId } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { FlowbiteBoolean, FlowbiteColors } from '../Flowbite/FlowbiteTheme'; +import type { FlowbiteBoolean, FlowbiteColors } from '../Flowbite/FlowbiteTheme'; import { useTheme } from '../Flowbite/ThemeContext'; export interface FlowbiteToggleSwitchTheme { diff --git a/src/lib/components/Tooltip/Tooltip.tsx b/src/lib/components/Tooltip/Tooltip.tsx index d7bc3f39b8..dd26c3eb14 100644 --- a/src/lib/components/Tooltip/Tooltip.tsx +++ b/src/lib/components/Tooltip/Tooltip.tsx @@ -1,11 +1,12 @@ import type { Placement } from '@floating-ui/core'; import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'; -import { DeepPartial } from '..'; +import type { DeepPartial } from '..'; import { mergeDeep } from '../../helpers/mergeDeep'; -import { Floating, FlowbiteFloatingTheme } from '../Floating'; +import type { FlowbiteFloatingTheme } from '../Floating'; +import { Floating } from '../Floating'; import { useTheme } from '../Flowbite/ThemeContext'; -export interface FlowbiteTooltipTheme extends FlowbiteFloatingTheme {} +export type FlowbiteTooltipTheme = FlowbiteFloatingTheme; export interface TooltipProps extends PropsWithChildren, 'style'>> { content: ReactNode; diff --git a/src/lib/helpers/mergeDeep.ts b/src/lib/helpers/mergeDeep.ts index 9fcc92c3aa..e271a7d04d 100644 --- a/src/lib/helpers/mergeDeep.ts +++ b/src/lib/helpers/mergeDeep.ts @@ -32,7 +32,7 @@ export function mergeDeep(target: T, source: return cloneDeep({ ...target, ...source }); } - let output = { ...target, ...source }; + const output = { ...target, ...source }; if (isObject(source) && isObject(target)) { Object.keys(source).forEach((key) => { diff --git a/src/lib/hooks/useKeyDown.ts b/src/lib/hooks/useKeyDown.ts index 44004e4b66..c373624e52 100644 --- a/src/lib/hooks/useKeyDown.ts +++ b/src/lib/hooks/useKeyDown.ts @@ -1,14 +1,15 @@ import { useEffect } from 'react'; const useKeyDown = (key: string, callback: () => void) => { - const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === key) { - callback(); - } - }; - useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === key) { + callback(); + } + }; + document.addEventListener('keydown', handleKeyDown); + return () => { document.removeEventListener('keydown', handleKeyDown); };