fix value/default_value in accordion (#2616)

* fix value/default_value in accordion

* fix for 3.8 compat

* update comment

reflex/components/radix/primitives/accordion.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from types import SimpleNamespace
-from typing import Any, Dict, List, Literal, Optional
+from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.core.match import Match
@@ -16,7 +16,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -315,10 +315,10 @@ class AccordionRoot(AccordionComponent):
     type_: Var[LiteralAccordionType]
 
     # The value of the item to expand.
-    value: Var[str]
+    value: Var[Optional[Union[str, List[str]]]]
 
     # The default value of the item to expand.
-    default_value: Var[str]
+    default_value: Var[Optional[Union[str, List[str]]]]
 
     # Whether or not the accordion is collapsible.
     collapsible: Var[bool]
@@ -490,15 +490,19 @@ class AccordionItem(AccordionComponent):
         Returns:
             The accordion item.
         """
-        # The item requires a value to toggle (use the header as the default value).
-        value = props.pop("value", header if isinstance(header, Var) else str(header))
+        # The item requires a value to toggle (use a random unique name if not provided).
+        value = props.pop("value", get_unique_variable_name())
 
         if (header is not None) and (content is not None):
             children = [
                 AccordionHeader.create(
                     AccordionTrigger.create(
                         header,
-                        Icon.create(tag="chevron_down", class_name="AccordionChevron"),
+                        Icon.create(
+                            tag="chevron_down",
+                            class_name="AccordionChevron",
+                            display="inline-block",
+                        ),
                         class_name="AccordionTrigger",
                     ),
                 ),

reflex/components/radix/primitives/accordion.pyi

@@ -8,7 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from types import SimpleNamespace
-from typing import Any, Dict, List, Literal, Optional
+from typing import Any, Dict, List, Literal, Optional, Union
 from reflex.components.component import Component
 from reflex.components.core.match import Match
 from reflex.components.lucide.icon import Icon
@@ -20,7 +20,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -129,8 +129,12 @@ class AccordionRoot(AccordionComponent):
         type_: Optional[
             Union[Var[Literal["single", "multiple"]], Literal["single", "multiple"]]
         ] = None,
-        value: Optional[Union[Var[str], str]] = None,
-        default_value: Optional[Union[Var[str], str]] = None,
+        value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
+        default_value: Optional[
+            Union[Var[Union[str, List[str]]], Union[str, List[str]]]
+        ] = None,
         collapsible: Optional[Union[Var[bool], bool]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         dir: Optional[Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]] = None,