Merge branch 'main' of https://github.com/themesberg/flowbite-react

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "all"

app/docs/layout.tsx

@@ -208,7 +208,7 @@ function NewBadge({ children }: PropsWithChildren) {
   return (
     <span className="flex items-center gap-2">
       {children}
-      <Badge color="cyan" className="px-1.5 h-4">
+      <Badge color="cyan" className="h-4 px-1.5">
         New
       </Badge>
     </span>

content/docs/components/datepicker.mdx

@@ -39,13 +39,13 @@ The `weekStart` prop can be used to set the first day of the week inside the dat
 
 ```json
 {
-  "0": "Saturday",
-  "1": "Sunday",
-  "2": "Monday",
-  "3": "Tuesday",
-  "4": "Wednesday",
-  "5": "Thursday",
-  "6": "Friday"
+  "0": "Sunday",
+  "1": "Monday",
+  "2": "Tuesday",
+  "3": "Wednesday",
+  "4": "Thursday",
+  "5": "Friday",
+  "6": "Saturday"
 }
 ```
 

content/docs/components/forms.mdx

@@ -35,7 +35,7 @@ Use this example of a form component with `<TextInput>`, `<Checkbox>`, `<Label>`
 
 ## Input sizing
 
-Use the `sizing` prop on the `<TextInput>` form component from React to set the size of the input fields. You can hoose from the `sm`, `md`, and `lg` size options.
+Use the `sizing` prop on the `<TextInput>` form component from React to set the size of the input fields. You can choose from the `sm`, `md`, and `lg` size options.
 
 <Example name="forms.inputSizing" />
 

data/docs-sidebar.ts

@@ -79,6 +79,9 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
   {
     title: 'typography',
     href: '/typography/',
-    items: [{ title: 'Blockquote', href: '/docs/typography/blockquote', isNew: true }],
+    items: [
+      { title: 'Blockquote', href: '/docs/typography/blockquote', isNew: true },
+      { title: 'List', href: '/docs/typography/list', isNew: true },
+    ],
   },
 ];

examples/button/button.loading.tsx

@@ -8,7 +8,7 @@ import { Button } from 'flowbite-react';
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs" isProcessing>
         Click me!
       </Button>
@@ -34,7 +34,7 @@ import { Button } from 'flowbite-react';
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs" isProcessing>
         Click me!
       </Button>
@@ -57,7 +57,7 @@ function Component() {
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs" isProcessing>
         Click me!
       </Button>

examples/button/button.sizes.tsx

@@ -8,7 +8,7 @@ import { Button } from 'flowbite-react';
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs">Extra small</Button>
       <Button size="sm">Small</Button>
       <Button size="md">Base</Button>
@@ -24,7 +24,7 @@ import { Button } from 'flowbite-react';
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs">Extra small</Button>
       <Button size="sm">Small</Button>
       <Button size="md">Base</Button>
@@ -37,7 +37,7 @@ function Component() {
 
 function Component() {
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-start gap-2">
       <Button size="xs">Extra small</Button>
       <Button size="sm">Small</Button>
       <Button size="md">Base</Button>

examples/datepicker/datepicker.weekStart.tsx

@@ -9,7 +9,7 @@ import { Datepicker } from 'flowbite-react';
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }
@@ -21,7 +21,7 @@ import { Datepicker } from 'flowbite-react';
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }
@@ -30,7 +30,7 @@ function Component() {
 function Component() {
   return (
     <Datepicker
-      weekStart={2} // Monday
+      weekStart={1} // Monday
     />
   );
 }

examples/fileInput/index.ts

@@ -1,5 +1,5 @@
-export { root } from './fileInput.root';
+export { dropzone } from './fileInput.dropzone';
 export { helper } from './fileInput.helper';
 export { multiple } from './fileInput.multiple';
+export { root } from './fileInput.root';
 export { sizes } from './fileInput.sizes';
-export { dropzone } from './fileInput.dropzone';

examples/forms/forms.rangeSlider.tsx

@@ -4,7 +4,7 @@ import { Label, RangeSlider } from '~/src';
 const code = `
 'use client';
 
-import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
+import { Label, RangeSlider } from 'flowbite-react';
 
 function Component() {
   return (
@@ -45,7 +45,7 @@ function Component() {
 `;
 
 const codeRSC = `
-import { Button, Checkbox, Label, TextInput } from 'flowbite-react';
+import { Label, RangeSlider } from 'flowbite-react';
 
 function Component() {
   return (

examples/index.ts

@@ -16,8 +16,8 @@ export * as floatingLabel from './floatingLabel';
 export * as footer from './footer';
 export * as forms from './forms';
 export * as kbd from './kbd';
-export * as listGroup from './listGroup';
 export * as list from './list';
+export * as listGroup from './listGroup';
 export * as modal from './modal';
 export * as navbar from './navbar';
 export * as pagination from './pagination';

examples/list/index.ts

@@ -1,4 +1,4 @@
-export { root } from './list.root';
-export { unstyled } from './list.unstyled';
 export { nested } from './list.nested';
 export { ordered } from './list.ordered';
+export { root } from './list.root';
+export { unstyled } from './list.unstyled';

src/components/Banner/Banner.spec.tsx

@@ -0,0 +1,22 @@
+import userEvent from '@testing-library/user-event';
+import { Banner } from './Banner';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+describe('Components / Banner', () => {
+  it('should close when collapse button is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <div>
+        <Banner>
+          <Banner.CollapseButton>Click me</Banner.CollapseButton>
+        </Banner>
+      </div>,
+    );
+
+    await user.tab();
+    await user.keyboard('[Space]');
+
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+  });
+});

src/components/Checkbox/theme.ts

@@ -4,7 +4,7 @@ export const checkboxTheme: FlowbiteCheckboxTheme = {
   root: {
     base: 'h-4 w-4 rounded focus:ring-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 bg-gray-100',
     color: {
-      default: 'focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600 text-cyan-600',
+      default: 'focus:ring-cyan-600 dark:ring-offset-gray-800 dark:focus:ring-cyan-600 text-cyan-600',
       dark: 'focus:ring-gray-800 dark:ring-offset-gray-800 dark:focus:ring-gray-800 text-gray-800',
       failure: 'focus:ring-red-900 dark:ring-offset-red-900 dark:focus:ring-red-900 text-red-900',
       gray: 'focus:ring-gray-900 dark:ring-offset-gray-900 dark:focus:ring-gray-900 text-gray-900',

src/components/DarkThemeToggle/DarkThemeToggle.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps, FC } from 'react';
 import type { IconBaseProps } from 'react-icons';
 import { HiMoon, HiSun } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
+import { useIsMounted } from '~/src/hooks/use-is-mounted';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { useThemeMode } from '../../hooks/use-theme-mode';
 import { getTheme } from '../../theme-store';
@@ -31,6 +32,7 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
   iconLight: IconLight = HiMoon,
   ...props
 }) => {
+  const isMounted = useIsMounted();
   const { computedMode, toggleMode } = useThemeMode();
 
   const theme = mergeDeep(getTheme().darkThemeToggle, customTheme);
@@ -46,12 +48,12 @@ export const DarkThemeToggle: FC<DarkThemeToggleProps> = ({
     >
       <IconDark
         aria-label="Currently dark mode"
-        data-active={computedMode === 'dark'}
+        data-active={isMounted && computedMode === 'dark'}
         className={twMerge(theme.root.icon, 'hidden dark:block')}
       />
       <IconLight
         aria-label="Currently light mode"
-        data-active={computedMode === 'light'}
+        data-active={isMounted && computedMode === 'light'}
         className={twMerge(theme.root.icon, 'dark:hidden')}
       />
     </button>

src/components/Datepicker/Datepicker.spec.tsx

@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Datepicker } from './Datepicker';
+import { getFormattedDate } from './helpers';
+import userEvent from '@testing-library/user-event';
+
+describe('Components / Datepicker', () => {
+  it("should display today's date by default", () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+
+    render(<Datepicker />);
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it('should update date when a different day is clicked', async () => {
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+
+    expect((screen.getByRole('textbox') as HTMLInputElement).value?.includes(`${anotherDay}`)).toBeTruthy();
+  });
+
+  it("should reset to today's date when Clear button is clicked", async () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getByText('Clear'));
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it("should use today's date when Today button is clicked", async () => {
+    const todaysDateInDefaultLanguage = getFormattedDate('en', new Date());
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getByText('Today'));
+
+    expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
+  });
+
+  it('should call `onSelectedDateChange` when a new date is selected', async () => {
+    const onSelectedDateChange = vi.fn();
+    const todaysDayOfMonth = new Date().getDate();
+    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+    render(<Datepicker onSelectedDateChanged={onSelectedDateChange} />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(screen.getAllByText(anotherDay)[0]);
+
+    expect(onSelectedDateChange).toHaveBeenCalledOnce();
+  });
+
+  it('should close month overlay when user clicks outside of it', async () => {
+    render(<Datepicker />);
+
+    await userEvent.click(screen.getByRole('textbox'));
+    await userEvent.click(document.body);
+  });
+});

src/components/Datepicker/Views/Days.tsx

@@ -52,7 +52,7 @@ export const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: custo
       </div>
       <div className={theme.items.base}>
         {[...Array(42)].map((_date, index) => {
-          const currentDate = addDays(startDate, index - 1);
+          const currentDate = addDays(startDate, index);
           const day = getFormattedDate(language, currentDate, { day: 'numeric' });
 
           const isSelected = isDateEqual(selectedDate, currentDate);