use indexmap within FocusState for tab_index and disabled state

Author: knoxfighter

Cargo.lock

@@ -92,7 +92,7 @@ pub fn SelectOption<T: Clone + PartialEq + 'static>(props: SelectOptionProps<T>)
             text_value: props.text_value,
             disabled: props.disabled,
             id: props.id,
-            index: props.index,
+            tab_index: props.tab_index,
             aria_label: props.aria_label,
             aria_roledescription: props.aria_roledescription,
             attributes: props.attributes,

preview/src/components/select/component.rs

@@ -36,7 +36,7 @@ pub fn Demo() -> Element {
     let fruits = Fruit::iter().enumerate().map(|(i, f)| {
         rsx! {
             SelectOption::<Option<Fruit>> {
-                index: i,
+                tab_index: i,
                 value: f,
                 text_value: "{f}",
                 disabled: f.disabled(),
@@ -57,7 +57,7 @@ pub fn Demo() -> Element {
                 SelectGroup {
                     SelectGroupLabel { "Other" }
                     SelectOption::<Option<Fruit>> {
-                        index: Fruit::COUNT,
+                        tab_index: Fruit::COUNT,
                         value: None,
                         text_value: "Other",
                         disabled: true,

preview/src/components/select/variants/disabled/mod.rs

@@ -27,7 +27,7 @@ impl Fruit {
 pub fn Demo() -> Element {
     let fruits = Fruit::iter().enumerate().map(|(i, f)| {
         rsx! {
-            SelectOption::<Option<Fruit>> { index: i, value: f, text_value: "{f}",
+            SelectOption::<Option<Fruit>> { tab_index: i, value: f, text_value: "{f}",
                 {format!("{} {f}", f.emoji())}
                 SelectItemIndicator {}
             }
@@ -46,7 +46,7 @@ pub fn Demo() -> Element {
                 SelectGroup {
                     SelectGroupLabel { "Other" }
                     SelectOption::<Option<Fruit>> {
-                        index: Fruit::COUNT,
+                        tab_index: Fruit::COUNT,
                         value: None,
                         text_value: "Other",
                         "Other"

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

@@ -17,6 +17,7 @@ dioxus-sdk-time = "0.7.0"
 time = { version = "0.3.41", features = ["std", "macros", "parsing"] }
 num-integer = "0.1.46"
 tracing.workspace = true
+indexmap = "2.12.1"
 
 [build-dependencies]
 lazy-js-bundle = "0.6.2"

primitives/Cargo.toml

@@ -463,7 +463,7 @@ pub fn ContextMenuItem(props: ContextMenuItemProps) -> Element {
     let focused = move || ctx.focus.is_focused(props.index.cloned());
 
     // Handle settings focus
-    let onmounted = use_focus_controlled_item(props.index);
+    let onmounted = use_focus_controlled_item(props.index.cloned(), props.index);
 
     // Determine if this item is currently focused
     let tab_index = use_memo(move || if focused() { "0" } else { "-1" });

primitives/src/context_menu.rs

@@ -550,7 +550,7 @@ fn DateSegment<T: Clone + Copy + Integer + FromStr + Display + 'static>(
         }
     };
 
-    let onmounted = use_focus_controlled_item(props.index);
+    let onmounted = use_focus_controlled_item(props.index.cloned(), props.index);
 
     let span_id = use_unique_id();
     let id = use_memo(move || format!("span-{span_id}"));

primitives/src/date_picker.rs

@@ -416,7 +416,7 @@ pub fn DropdownMenuItem<T: Clone + PartialEq + 'static>(
     let disabled = move || (ctx.disabled)() || (props.disabled)();
     let focused = move || ctx.focus.is_focused((props.index)());
 
-    let onmounted = use_focus_controlled_item(props.index);
+    let onmounted = use_focus_controlled_item(props.index.cloned(), props.index);
 
     rsx! {
         div {