feat: PopoverTrigger can only contain one child

demo/src/components/site_header.rs

@@ -135,7 +135,7 @@ pub fn SiteHeader() -> impl IntoView {
                         display: none !important;
                     }
                     .demo-header__menu-mobile {
-                        display: block !important;
+                        display: inline-block !important;
                     }
                 }
             "
@@ -187,8 +187,9 @@ pub fn SiteHeader() -> impl IntoView {
                         _ => navigate_signal.get()(&value, Default::default()),
                     }
                 >
-                    <MenuTrigger slot class="demo-header__menu-mobile">
+                    <MenuTrigger slot>
                         <Button
+                            class="demo-header__menu-mobile"
                             appearance=ButtonAppearance::Subtle
                             icon=icondata::AiUnorderedListOutlined
                             attr:style="font-size: 22px; padding: 0px 6px;"

thaw/src/auto_complete/mod.rs

@@ -49,7 +49,6 @@ pub fn AutoComplete(
     mount_style("auto-complete", include_str!("./auto-complete.css"));
     let input_ref = ComponentRef::<InputRef>::new();
     let listbox_ref = NodeRef::<html::Div>::new();
-    let auto_complete_ref = NodeRef::<html::Div>::new();
     let open_listbox = RwSignal::new(false);
     let options = StoredValue::new(HashMap::<String, String>::new());
 
@@ -110,10 +109,9 @@ pub fn AutoComplete(
     comp_ref.load(AutoCompleteRef { input_ref });
 
     view! {
-        <Binder target_ref=auto_complete_ref>
+        <Binder>
             <div
                 class=class_list!["thaw-auto-complete", class]
-                node_ref=auto_complete_ref
                 on:keydown=on_keydown
             >
                 <Input

thaw/src/color_picker/mod.rs

@@ -133,7 +133,7 @@ pub fn ColorPicker(
     }
 
     view! {
-        <Binder target_ref=trigger_ref>
+        <Binder>
             <div
                 class=class_list!["thaw-color-picker-trigger", class]
                 on:click=show_popover

thaw/src/combobox/combobox.rs

@@ -32,7 +32,6 @@ pub fn Combobox(
     mount_style("combobox", include_str!("./combobox.css"));
     let (id, name) = FieldInjection::use_id_and_name(id, name);
     let validate = Rule::validate(rules, selected_options, name);
-    let trigger_ref = NodeRef::<html::Div>::new();
     let input_ref = NodeRef::<html::Input>::new();
     let listbox_ref = NodeRef::<html::Div>::new();
     let is_show_listbox = RwSignal::new(false);
@@ -167,14 +166,13 @@ pub fn Combobox(
     };
 
     view! {
-        <Binder target_ref=trigger_ref>
+        <Binder>
             <div
                 class=class_list![
                     "thaw-combobox",
                     ("thaw-combobox--disabled", move || disabled.get()),
                     class
                 ]
-                node_ref=trigger_ref
             >
                 <input
                     type="text"

thaw/src/date_picker/mod.rs

@@ -90,7 +90,7 @@ pub fn DatePicker(
     };
 
     view! {
-        <Binder target_ref=date_picker_ref>
+        <Binder>
             <div
                 node_ref=date_picker_ref
                 class=class_list!["thaw-date-picker", class]

thaw/src/menu/docs/mod.md

@@ -162,10 +162,9 @@ view! {
 
 ### MenuTriger Props
 
-| Name     | Type                | Default              | Description |
-| -------- | ------------------- | -------------------- | ----------- |
-| class    | `MaybeProp<String>` | `Default::default()` |             |
-| children | `Children`          |                      |             |
+| Name     | Type                                        | Default | Description |
+| -------- | ------------------------------------------- | ------- | ----------- |
+| children | `T: AddAnyAttr + IntoView + Send + 'static` |         |             |
 
 ### MenuItem Props
 

thaw/src/menu/mod.rs

@@ -3,7 +3,14 @@ mod menu_item;
 pub use menu_item::*;
 
 use crate::ConfigInjection;
-use leptos::{context::Provider, ev, html::Div, leptos_dom::helpers::TimeoutHandle, prelude::*};
+use leptos::{
+    context::Provider,
+    ev::{self, on},
+    html::Div,
+    leptos_dom::helpers::TimeoutHandle,
+    prelude::*,
+    tachys::html::{class::class as tachys_class, node_ref::node_ref},
+};
 use std::time::Duration;
 use thaw_components::{Binder, CSSTransition, Follower, FollowerPlacement};
 use thaw_utils::{
@@ -12,17 +19,15 @@ use thaw_utils::{
 };
 
 #[slot]
-pub struct MenuTrigger {
-    #[prop(optional, into)]
-    class: MaybeProp<String>,
-    children: Children,
+pub struct MenuTrigger<T> {
+    children: TypedChildren<T>,
 }
 
 #[component]
-pub fn Menu(
+pub fn Menu<T>(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// The element or component that triggers menu.
-    menu_trigger: MenuTrigger,
+    menu_trigger: MenuTrigger<T>,
     /// Action that displays the menu.
     #[prop(optional)]
     trigger_type: MenuTriggerType,
@@ -34,12 +39,15 @@ pub fn Menu(
     on_select: BoxOneCallback<String>,
     #[prop(optional, into)] appearance: MaybeProp<MenuAppearance>,
     children: Children,
-) -> impl IntoView {
+) -> impl IntoView
+where
+    T: AddAnyAttr + IntoView + Send + 'static,
+{
     mount_style("menu", include_str!("./menu.css"));
     let config_provider = ConfigInjection::expect_context();
 
     let menu_ref = NodeRef::<Div>::new();
-    let target_ref = NodeRef::<Div>::new();
+    let target_ref = NodeRef::<thaw_utils::Element>::new();
     let is_show_menu = RwSignal::new(false);
     let show_menu_handle = StoredValue::new(None::<TimeoutHandle>);
 
@@ -91,7 +99,6 @@ pub fn Menu(
     });
 
     let MenuTrigger {
-        class: trigger_class,
         children: trigger_children,
     } = menu_trigger;
 
@@ -104,15 +111,14 @@ pub fn Menu(
     };
 
     view! {
-        <Binder target_ref>
-            <div
-                class=class_list!["thaw-menu-trigger", trigger_class]
-                node_ref=target_ref
-                on:mouseenter=on_mouse_enter
-                on:mouseleave=on_mouse_leave
-            >
-                {trigger_children()}
-            </div>
+        <Binder>
+            {trigger_children
+                .into_inner()()
+                .into_inner()
+                .add_any_attr(tachys_class(("thaw-menu-trigger", true)))
+                .add_any_attr(node_ref(target_ref))
+                .add_any_attr(on(ev::mouseenter, on_mouse_enter))
+                .add_any_attr(on(ev::mouseleave, on_mouse_leave))}
             <Follower slot show=is_show_menu placement=position>
                 <Provider value=menu_injection>
                     <CSSTransition

thaw/src/popover/docs/mod.md

@@ -1,5 +1,25 @@
 # Popover
 
+```rust
+/// Prerequisite
+/// PopoverTrigger can only contain one child.
+view!{
+    // ✅
+    <PopoverTrigger slot>
+        <button>"Click"</button>
+    </PopoverTrigger>
+    // ✅
+    <PopoverTrigger slot>
+        <Button>"Click"</Button>
+    </PopoverTrigger>
+    // 🙅
+    <PopoverTrigger slot>
+        <button>"Click"</button>
+        <button>"Click"</button>
+    </PopoverTrigger>
+}
+```
+
 ```rust demo
 view! {
     <Space>
@@ -165,7 +185,6 @@ view! {
 
 ### PopoverTrigger Props
 
-| Name     | Type                | Default              | Description |
-| -------- | ------------------- | -------------------- | ----------- |
-| class    | `MaybeProp<String>` | `Default::default()` |             |
-| children | `Children`          |                      |             |
+| Name     | Type                                        | Default | Description |
+| -------- | ------------------------------------------- | ------- | ----------- |
+| children | `T: AddAnyAttr + IntoView + Send + 'static` |         |             |

thaw/src/popover/mod.rs

@@ -3,19 +3,25 @@ mod types;
 pub use types::*;
 
 use crate::ConfigInjection;
-use leptos::{ev, html, leptos_dom::helpers::TimeoutHandle, prelude::*};
+use leptos::{
+    ev::{self, on},
+    html,
+    leptos_dom::helpers::TimeoutHandle,
+    prelude::*,
+    tachys::html::{class::class as tachys_class, node_ref::node_ref},
+};
 use std::time::Duration;
 use thaw_components::{Binder, CSSTransition, Follower};
 use thaw_utils::{add_event_listener, class_list, mount_style, BoxCallback};
 
 #[component]
-pub fn Popover(
+pub fn Popover<T>(
     #[prop(optional, into)] class: MaybeProp<String>,
     /// Action that displays the popover.
     #[prop(optional)]
     trigger_type: PopoverTriggerType,
     /// The element or component that triggers popover.
-    popover_trigger: PopoverTrigger,
+    popover_trigger: PopoverTrigger<T>,
     /// Configures the position of the Popover.
     #[prop(optional)]
     position: PopoverPosition,
@@ -27,12 +33,15 @@ pub fn Popover(
     #[prop(optional, into)] on_open: Option<BoxCallback>,
     #[prop(optional, into)] on_close: Option<BoxCallback>,
     children: Children,
-) -> impl IntoView {
+) -> impl IntoView
+where
+    T: AddAnyAttr + IntoView + Send + 'static,
+{
     mount_style("popover", include_str!("./popover.css"));
     let config_provider = ConfigInjection::expect_context();
 
     let popover_ref = NodeRef::<html::Div>::new();
-    let target_ref = NodeRef::<html::Div>::new();
+    let target_ref = NodeRef::<thaw_utils::Element>::new();
     let is_show_popover = RwSignal::new(false);
     let show_popover_handle = StoredValue::new(None::<TimeoutHandle>);
 
@@ -130,24 +139,21 @@ pub fn Popover(
     });
 
     let PopoverTrigger {
-        class: trigger_class,
         children: trigger_children,
     } = popover_trigger;
 
     view! {
-        <Binder target_ref>
-            <div
-                class=class_list![
-                    "thaw-popover-trigger",
-                    move || is_show_popover.get().then(|| "thaw-popover-trigger--open".to_string()),
-                    trigger_class
-                ]
-                node_ref=target_ref
-                on:mouseenter=on_mouse_enter
-                on:mouseleave=on_mouse_leave
-            >
-                {trigger_children()}
-            </div>
+        <Binder>
+            {trigger_children
+                .into_inner()()
+                .into_inner()
+                .add_any_attr(tachys_class(("thaw-popover-trigger", true)))
+                .add_any_attr(
+                    tachys_class(("thaw-popover-trigger--open", move || is_show_popover.get())),
+                )
+                .add_any_attr(node_ref(target_ref))
+                .add_any_attr(on(ev::mouseenter, on_mouse_enter))
+                .add_any_attr(on(ev::mouseleave, on_mouse_leave))}
             <Follower slot show=is_show_popover placement=position>
                 <CSSTransition
                     node_ref=popover_ref

thaw/src/popover/popover.css

@@ -39,10 +39,6 @@ div.thaw-popover-surface--inverted {
     height: 10px;
 }
 
-.thaw-popover-trigger {
-    display: inline-block;
-}
-
 [data-thaw-placement="top-start"] > .thaw-popover-surface,
 [data-thaw-placement="top-end"] > .thaw-popover-surface,
 [data-thaw-placement="top"] > .thaw-popover-surface {

thaw/src/popover/types.rs

@@ -80,8 +80,6 @@ impl From<PopoverPosition> for FollowerPlacement {
 }
 
 #[slot]
-pub struct PopoverTrigger {
-    #[prop(optional, into)]
-    class: MaybeProp<String>,
-    children: Children,
+pub struct PopoverTrigger<T> {
+    children: TypedChildren<T>,
 }

thaw/src/tag_picker/tag_picker.rs

@@ -84,7 +84,7 @@ pub fn TagPicker(
         );
     };
     view! {
-        <Binder target_ref=trigger_ref>
+        <Binder>
             <div
                 class=class_list!["thaw-tag-picker-control", class]
                 node_ref=trigger_ref

thaw/src/time_picker/mod.rs

@@ -93,7 +93,7 @@ pub fn TimePicker(
     };
 
     view! {
-        <Binder target_ref=time_picker_ref>
+        <Binder>
             <div
                 node_ref=time_picker_ref
                 class=class_list!["thaw-time-picker", class]

thaw/src/tooltip/docs/mod.md

@@ -22,12 +22,11 @@ view! {
 }
 ```
 
-### Textarea Props
+### Tooltip Props
 
-| Name       | Type                        | Default                   | Description                            |
-| ---------- | --------------------------- | ------------------------- | -------------------------------------- |
-| class      | `MaybeProp<String>`         | `Default::default()`      |                                        |
-| content    | `Option<Signal<String>>`    | `None`                    | The text of the tooltip.               |
-| position   | `TooltipPosition`           | `TooltipPosition::Top`    | Configure the position of the tooltip. |
-| appearance | `Signal<TooltipAppearance>` | `TooltipAppearance::None` | The tooltip's visual appearance.       |
-| children   | `Children`                  |                           |                                        |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| content | `Option<Signal<String>>` | `None` | The text of the tooltip. |
+| position | `TooltipPosition` | `TooltipPosition::Top` | Configure the position of the tooltip. |
+| appearance | `Signal<TooltipAppearance>` | `TooltipAppearance::None` | The tooltip's visual appearance. |
+| children | `T: AddAnyAttr + IntoView + Send + 'static` |  |  |

thaw/src/tooltip/tooltip.css

@@ -32,10 +32,6 @@ div.thaw-tooltip-content--inverted {
     height: 8px;
 }
 
-.thaw-tooltip {
-    display: inline-block;
-}
-
 [data-thaw-placement="top-start"] > .thaw-tooltip-content,
 [data-thaw-placement="top-end"] > .thaw-tooltip-content,
 [data-thaw-placement="top"] > .thaw-tooltip-content {