Accordion Items unique Value (#2663)

* Accordion Items unique Value

use crypto.randomUUID to generate accordion item value at runtime instead of compile time

* use generateUUID in state.js instead of crypto.randomUUID()

reflex/.templates/web/utils/state.js

@@ -40,7 +40,7 @@ const upload_controllers = {};
  * Taken from: https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
  * @returns A UUID.
  */
-const generateUUID = () => {
+export const generateUUID = () => {
   let d = new Date().getTime(),
     d2 = (performance && performance.now && performance.now() * 1000) || 0;
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {

reflex/components/radix/primitives/accordion.py

@@ -15,7 +15,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
+from reflex.vars import BaseVar, Var, VarData, get_uuid_string_var
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
@@ -515,7 +515,7 @@ class AccordionItem(AccordionComponent):
             The accordion item.
         """
         # The item requires a value to toggle (use a random unique name if not provided).
-        value = props.pop("value", get_unique_variable_name())
+        value = props.pop("value", get_uuid_string_var())
 
         if "AccordionItem" not in (
             cls_name := props.pop("class_name", "AccordionItem")

reflex/components/radix/primitives/accordion.pyi

@@ -19,7 +19,7 @@ from reflex.style import (
     format_as_emotion,
 )
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData, get_unique_variable_name
+from reflex.vars import BaseVar, Var, VarData, get_uuid_string_var
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]

reflex/vars.py

@@ -2003,3 +2003,20 @@ class CallableVar(BaseVar):
             The Var returned from calling the function.
         """
         return self.fn(*args, **kwargs)
+
+
+def get_uuid_string_var() -> Var:
+    """Return a var that generates UUIDs via .web/utils/state.js.
+
+    Returns:
+        the var to generate UUIDs at runtime.
+    """
+    from reflex.utils.imports import ImportVar
+
+    unique_uuid_var_data = VarData(
+        imports={f"/{constants.Dirs.STATE_PATH}": {ImportVar(tag="generateUUID")}}  # type: ignore
+    )
+
+    return BaseVar(
+        _var_name="generateUUID()", _var_type=str, _var_data=unique_uuid_var_data
+    )

reflex/vars.pyi

@@ -157,3 +157,5 @@ def cached_var(fget: Callable[[Any], Any]) -> ComputedVar: ...
 class CallableVar(BaseVar):
     def __init__(self, fn: Callable[..., BaseVar]): ...
     def __call__(self, *args, **kwargs) -> BaseVar: ...
+
+def get_uuid_string_var() -> Var: ...