[*] DatePicker: fix Test Suite

Author: ddudenin

preview/src/components/date_picker/component.rs

@@ -3,12 +3,10 @@ use dioxus::prelude::*;
 use dioxus_primitives::{
     calendar::CalendarProps,
     date_picker::{self, DatePickerInputProps, DatePickerProps},
-    popover::{PopoverContent, PopoverContentProps, PopoverRootProps, PopoverTrigger},
-    ContentAlign,
+    popover::{PopoverContentProps, PopoverRootProps, PopoverTriggerProps},
 };
 
 use crate::components::calendar::component::*;
-use time::UtcDateTime;
 
 #[component]
 pub fn DatePicker(props: DatePickerProps) -> Element {
@@ -57,14 +55,11 @@ pub fn DatePickerPopover(props: PopoverRootProps) -> Element {
 }
 
 #[component]
-pub fn DatePickerPopoverTrigger(
-    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
-) -> Element {
+pub fn DatePickerPopoverTrigger(props: PopoverTriggerProps) -> Element {
     rsx! {
-        PopoverTrigger {
+        date_picker::DatePickerPopoverTrigger {
             class: "date-picker-trigger",
-            aria_label: "trigger",
-            attributes,
+            attributes: props.attributes,
             svg {
                 class: "date-picker-expand-icon",
                 view_box: "0 0 24 24",
@@ -78,11 +73,11 @@ pub fn DatePickerPopoverTrigger(
 #[component]
 pub fn DatePickerPopoverContent(props: PopoverContentProps) -> Element {
     rsx! {
-        PopoverContent {
+        date_picker::DatePickerPopoverContent {
             class: "popover-content",
             id: props.id,
             side: props.side,
-            align: ContentAlign::End,
+            align: props.align,
             attributes: props.attributes,
             {props.children}
         }
@@ -91,23 +86,16 @@ pub fn DatePickerPopoverContent(props: PopoverContentProps) -> Element {
 
 #[component]
 pub fn DatePickerCalendar(props: CalendarProps) -> Element {
-    let mut view_date = use_signal(|| UtcDateTime::now().date());
-
-    use_effect(move || {
-        if let Some(date) = (props.selected_date)() {
-            view_date.set(date);
-        }
-    });
-
     rsx! {
-        Calendar {
+        date_picker::DatePickerCalendar {
+            class: "calendar",
             selected_date: props.selected_date,
             on_date_change: props.on_date_change,
             on_format_weekday: props.on_format_weekday,
             on_format_month: props.on_format_month,
-            view_date: view_date(),
+            view_date: props.view_date,
             today: props.today,
-            on_view_change: move |date| view_date.set(date),
+            on_view_change: props.on_view_change,
             disabled: props.disabled,
             first_day_of_week: props.first_day_of_week,
             min_date: props.min_date,

preview/src/components/date_picker/docs.md

@@ -3,4 +3,34 @@ The DatePicker component is used to display a date input and a Calendar popover,
 ## Component Structure
 
 ```rust
+DatePicker {
+    // The currently value in the date picker (type DatePickerValue).
+    value,
+    // The currently selected date in the date picker (if any).
+    selected_date,
+    on_value_change: move |v: DatePickerValue| {
+        // This callback is triggered when a date is selected in the
+        // calendar or the user entered it from the keyboard.
+        // The date parameter contains the selected date.
+    },
+    // Allows the user to enter a date using the keyboard. 
+    // The input field should contain a button to display the calendar and the calendar itself.
+    DatePickerInput {
+        // The DatePickerPopover is the root popover component that contains the trigger and Calendar.
+        DatePickerPopover {
+            // The DatePickerPopoverTrigger contains the elements that will trigger the popover 
+            // to display Calendar when clicked.
+            DatePickerPopoverTrigger {}
+            // The DatePickerPopoverContent contains the Calendar that will be displayed when
+            // the user clicks on the trigger.
+            DatePickerPopoverContent {
+                // The alignment of the DatePickerPopoverContent relative to the DatePickerPopoverTrigger. 
+                // Can be one of Start, Center, or End. Recommended use End for default value.
+                align: ContentAlign::End,
+                // Customized Calendar components
+                DatePickerCalendar {}
+            }
+        }
+    }
+}
 ```

preview/src/components/date_picker/variants/main/mod.rs

@@ -2,7 +2,7 @@ use super::super::component::*;
 use dioxus::prelude::*;
 
 use dioxus_i18n::tid;
-use dioxus_primitives::date_picker::DatePickerValue;
+use dioxus_primitives::{date_picker::DatePickerValue, ContentAlign};
 
 use time::{Date, Month, Weekday};
 
@@ -19,17 +19,18 @@ pub fn Demo() -> Element {
                 value: value(),
                 selected_date: selected_date(),
                 on_value_change: move |v| {
-                    tracing::info!("Selected: {v}");
+                    tracing::info!("Date changed to: {v}");
                     value.set(v);
                     selected_date.set(v.date());
                 },
                 DatePickerInput {
                     on_format_day_placeholder: || tid!("D_Abbr"),
                     on_format_month_placeholder: || tid!("M_Abbr"),
                     on_format_year_placeholder: || tid!("Y_Abbr"),
-                    DatePickerPopover { 
+                    DatePickerPopover {
                         DatePickerPopoverTrigger {}
                         DatePickerPopoverContent {
+                            align: ContentAlign::End,
                             DatePickerCalendar {
                                 selected_date: selected_date(),
                                 on_date_change: move |date| selected_date.set(date),