Merge branch 'main' into enhancement/on-right-icon-click-prop

Author: ahsankhan26

.changeset/plenty-lemons-bow.md

@@ -69,6 +69,12 @@ Use the `inline` prop to show the datepicker component without having to click i
 
 <Example name="datepicker.inline" />
 
+## Controlled Date/Datepicker.
+
+Use `<Datepicker value={}` to create a controlled `<Datepicker />`. Pass `null` to clear the input.
+
+<Example name="datepicker.value" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

apps/web/content/docs/components/datepicker.mdx

@@ -1,5 +1,30 @@
 # Changelog
 
+## 0.10.2
+
+### Patch Changes
+
+- [#1190](https://github.com/themesberg/flowbite-react/pull/1190) [`25bb353`](https://github.com/themesberg/flowbite-react/commit/25bb353685c595c2b05f1a355a381c28fd57526a) Thanks [@ddiasfront](https://github.com/ddiasfront)! - ### Datepicker Component Updates
+
+  The Datepicker has been enhanced with several improvements:
+
+  1. **Controlled Inputs**: Supports controlled inputs via `value` and `defaultValue` props, enabling programmatic date updates without manual clicks.
+  2. **State Management**: Optimized internal state management using `useMemo` and `useEffect`.
+  3. **Documentation**: Added sections in documentation for controlled usage and handling `null` values.
+  4. **Test Cases**: Comprehensive unit tests added for date handling.
+  5. **Storybook**: Improved stories, showcasing different states (controlled/uncontrolled).
+
+  ### Files Updated:
+
+  - `apps/web/content/docs/components/datepicker.mdx`: Added controlled usage section.
+  - `Datepicker.spec.tsx`: Added unit tests.
+  - `Datepicker.stories.tsx`: Enhanced story variants.
+  - `Datepicker.tsx`: Expanded `DatepickerProps`.
+  - `DatepickerContext.tsx`: Adjusted `selectedDate` type.
+  - `Decades.tsx`, `Months.tsx`, `Years.tsx`: Updated logic to check for `selectedDate`.
+
+- [#1484](https://github.com/themesberg/flowbite-react/pull/1484) [`38913e5`](https://github.com/themesberg/flowbite-react/commit/38913e51536ecf1c8e924a6de571880cb91d2ea0) Thanks [@KRTirtho](https://github.com/KRTirtho)! - fix: autocomplete for string enums with dynamic value not working
+
 ## 0.10.1
 
 ### Patch Changes

packages/ui/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-react",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Official React components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",

packages/ui/package.json

@@ -57,17 +57,17 @@ describe("Components / Datepicker", () => {
     expect(screen.getByDisplayValue(todaysDateInDefaultLanguage)).toBeInTheDocument();
   });
 
-  it("should call `onSelectedDateChange` when a new date is selected", async () => {
-    const onSelectedDateChange = vi.fn();
+  it("should call `onChange` when a new date is selected", async () => {
+    const onChange = vi.fn();
     const todaysDayOfMonth = new Date().getDate();
     const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
 
-    render(<Datepicker onSelectedDateChanged={onSelectedDateChange} />);
+    render(<Datepicker onChange={onChange} />);
 
     await userEvent.click(screen.getByRole("textbox"));
     await userEvent.click(screen.getAllByText(anotherDay)[0]);
 
-    expect(onSelectedDateChange).toHaveBeenCalledOnce();
+    expect(onChange).toHaveBeenCalledOnce();
   });
 
   // TODO: fix
@@ -80,7 +80,7 @@ describe("Components / Datepicker", () => {
 
   it("should render 1990 - 2100 year range when selecting decade", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -96,7 +96,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting earlier decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -113,7 +113,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting later decades when setting max date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} maxDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} maxDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -130,7 +130,7 @@ describe("Components / Datepicker", () => {
 
   it("should disallow selecting earlier decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -147,7 +147,7 @@ describe("Components / Datepicker", () => {
 
   it("should allow selecting later decades when setting min date", async () => {
     const testDate = new Date(2024, 6, 20);
-    render(<Datepicker defaultDate={testDate} minDate={testDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={testDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);
@@ -167,7 +167,7 @@ describe("Components / Datepicker", () => {
     const maxDate = new Date(2030, 1, 1);
     const testDate = new Date(2024, 6, 1);
 
-    render(<Datepicker defaultDate={testDate} minDate={minDate} maxDate={maxDate} />);
+    render(<Datepicker defaultValue={testDate} minDate={minDate} maxDate={maxDate} />);
 
     const textBox = screen.getByRole("textbox");
     await userEvent.click(textBox);

packages/ui/src/components/Datepicker/Datepicker.spec.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { useEffect, useState } from "react";
 import type { DatepickerProps } from "./Datepicker";
 import { Datepicker } from "./Datepicker";
 import { getFirstDateInRange, WeekStart } from "./helpers";
@@ -13,6 +14,9 @@ export default {
         options: ["en", "pt-BR"],
       },
     },
+    value: { control: { type: "date", format: "MM/DD/YYYY" } },
+    defaultValue: { control: { type: "date", format: "MM/DD/YYYY" } },
+    label: { control: { type: "text" } },
     weekStart: {
       options: Object.values(WeekStart).filter((x) => typeof x === "string"),
       mapping: Object.entries(WeekStart)
@@ -28,6 +32,36 @@ export default {
   },
 } as Meta;
 
+const ControlledTemplate: StoryFn<DatepickerProps> = (args) => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(args.value ?? null);
+
+  const handleChange = (date: Date | null) => {
+    setSelectedDate(date);
+  };
+
+  useEffect(() => {
+    const date = args.value && new Date(args.value);
+    setSelectedDate(date ?? null);
+  }, [args.value]);
+
+  // https://github.com/storybookjs/storybook/issues/11822
+  if (args.minDate) {
+    args.minDate = new Date(args.minDate);
+  }
+  if (args.maxDate) {
+    args.maxDate = new Date(args.maxDate);
+  }
+
+  // update defaultValue based on the range
+  if (args.minDate && args.maxDate) {
+    if (args.defaultValue) {
+      args.defaultValue = getFirstDateInRange(args.defaultValue, args.minDate, args.maxDate);
+    }
+  }
+
+  return <Datepicker {...args} value={selectedDate} onChange={handleChange} />;
+};
+
 const Template: StoryFn<DatepickerProps> = (args) => {
   // https://github.com/storybookjs/storybook/issues/11822
   if (args.minDate) {
@@ -37,27 +71,80 @@ const Template: StoryFn<DatepickerProps> = (args) => {
     args.maxDate = new Date(args.maxDate);
   }
 
-  // update defaultDate based on the range
+  // update defaultValue based on the range
   if (args.minDate && args.maxDate) {
-    if (args.defaultDate) {
-      // https://github.com/storybookjs/storybook/issues/11822
-      args.defaultDate = getFirstDateInRange(new Date(args.defaultDate), args.minDate, args.maxDate);
+    if (args.defaultValue) {
+      args.defaultValue = getFirstDateInRange(args.defaultValue, args.minDate, args.maxDate);
     }
   }
 
   return <Datepicker {...args} />;
 };
 
+export const ControlledDefaultEmpty = ControlledTemplate.bind({});
+ControlledDefaultEmpty.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  value: null,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+  label: "No date selected",
+};
+
 export const Default = Template.bind({});
 Default.args = {
   open: false,
   autoHide: true,
   showClearButton: true,
   showTodayButton: true,
-  defaultDate: new Date(),
+  value: undefined,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+};
+
+export const NullDateValue = Template.bind({});
+NullDateValue.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  theme: {},
+};
+
+export const DateValueSet = Template.bind({});
+DateValueSet.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  minDate: undefined,
+  maxDate: undefined,
+  language: "en",
+  defaultValue: new Date(),
+  theme: {},
+};
+
+export const EmptyDates = Template.bind({});
+EmptyDates.args = {
+  open: false,
+  autoHide: true,
+  showClearButton: true,
+  showTodayButton: true,
+  defaultValue: undefined,
+  value: undefined,
   minDate: undefined,
   maxDate: undefined,
   language: "en",
   weekStart: WeekStart.Sunday,
   theme: {},
+  label: "No date selected",
 };