fix: button state reset

Author: ObservedObserver

Home.py

@@ -10,15 +10,13 @@
 
 ui_result = ui.button("Button", key="btn")
 st.write("UI Button Clicked:", ui_result)
+st.write(st.session_state.get("btn"))
 
-st.write("before", st.session_state)
-
-st_result = st.button("Button", key="btn2")
+st_result = ui.button("Button", key="btn2")
 st.write("ST Button Clicked:", st_result)
+st.write(st.session_state.get("btn2"))
 
 
-st.write("after", st.session_state)
-
 
 # Slider Component
 slider_value = slider(default_value=[20], min_value=0, max_value=100, step=2, label="Select a Range", key="slider1")
@@ -49,9 +47,21 @@
 trigger_btn = ui.button(text="Trigger Button", key="trigger_btn")
 ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1")
 
-with ui.element("card", key="base_ele") as card:
-    with ui.element("card", key="base_ele2") as card2:
-        card2.add_child(ui.element("input", key="nst2_input", label="Value"))
-        card2.add_child(ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline"))
-        card.add_child(card2)
-    card.add_child(ui.element("button", key="nst_btn", text="Hello World"))
+st.header("Nest Element 1")
+
+with ui.card(key="base_ele_card_l1"):
+    with ui.card(key="base_ele_card_l2"):
+    # with ui.element("card", key="base_ele1") as card2:
+        ui.element("input", key="nst2_input", label="Value")
+        ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline")
+
+    ui.element("button", key="nst_btn", text="Hello World")
+
+st.header("Nest Element 2")
+card = ui.element("card", key="base_ele_2")
+card2 = ui.element("card", key="base_ele2_2")
+card2.add_child(ui.element("input", key="nst2_input_2", label="Value"))
+card2.add_child(ui.element("button", key="nst2_btn_2", text="Nest Submmit", variant="outline"))
+card.add_child(card2)
+card.add_child(ui.element("button", key="nst_btn_2", text="Hello World"))
+card.render()

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "streamlit-shadcn-ui"
-version = "0.1.11"
+version = "0.1.12"
 readme = "README.md"
 keywords = ["streamlit", "shadcn", "ui", "components"]
 description = "Using shadcn components in Streamlit"

streamlit_shadcn_ui/components/packages/frontend/package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
     "lucide-react": "^0.292.0",
+    "nanoid": "^5.0.3",
     "react": "^18.2.0",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/button.tsx

@@ -1,33 +1,30 @@
 import { Button, ButtonProps } from "@/components/ui/button";
+import { StComponentValue } from "@/interfaces";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
 import { Streamlit } from "streamlit-component-lib";
+import { nanoid } from 'nanoid'
+
 
 interface StButtonProps {
     text?: string;
     variant?: ButtonProps['variant'];
     disabled?: boolean;
     className?: string;
 }
+
+type StButtonValue = StComponentValue<boolean, undefined>;
+
+
 export const StButton = forwardRef<HTMLButtonElement, StButtonProps>((props: StButtonProps, ref) => {
     const { text, disabled, variant, className } = props;
 
     const queue = useRef<(() => void)[]>([]);
 
     const clickHandler = useCallback(() => {
         queue.current = [];
-        Streamlit.setComponentValue(true);
-        queue.current.push(() => {})
-        queue.current.push(() => {
-            Streamlit.setComponentValue(false);
-        })
-    }, [])
+        Streamlit.setComponentValue({ value: true, event_id: nanoid() } as StButtonValue);
 
-    useEffect(() => {
-        if (queue.current.length > 0) {
-            const fn = queue.current.shift();
-            fn?.();
-        }
-    })
+    }, [])
 
     return (
         <Button className={className} variant={variant} ref={ref} disabled={disabled} onClick={clickHandler}>

streamlit_shadcn_ui/components/packages/frontend/src/interfaces.ts

@@ -0,0 +1,9 @@
+export type StComponentValue<T = any, S = undefined> = {
+    st_key: string;
+    event_id: string;
+    value: T;
+} & (S extends undefined ? Record<string, never> : S);
+
+export interface StComponentProps {
+    st_key: string;
+}

streamlit_shadcn_ui/components/yarn.lock

@@ -4668,6 +4668,11 @@ nanoid@^3.3.6:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+nanoid@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-5.0.3.tgz#6c97f53d793a7a1de6a38ebb46f50f95bf9793c7"
+  integrity sha512-I7X2b22cxA4LIHXPSqbBCEQSL+1wv8TuoefejsX4HFWyC6jc5JG7CEaxOltiKjc1M+YCS2YkrZZcj4+dytw9GA==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"

streamlit_shadcn_ui/py_components/base/__init__.py

@@ -0,0 +1 @@
+from .element import element, init_default_state

streamlit_shadcn_ui/py_components/base/context.py

@@ -3,7 +3,7 @@
 def get_context():
     if (st.session_state.get("_shadcn_ui_context", None) is None):
         st.session_state["_shadcn_ui_context"] = {
-            "in_render": False,
+            "current_element": None,
         }
     ctx = st.session_state.get("_shadcn_ui_context")
     return ctx

streamlit_shadcn_ui/py_components/base/element.py

@@ -5,38 +5,69 @@
 __RELEASE = True
 component_func = declare_component("element_renderer", release=__RELEASE)
 
+def init_default_state(key: str = None, default_value: Any = None, **component_state):
+    return {
+        "st_key": key,
+        "value": default_value,
+        "event_id": f"{key}_init",
+        **component_state,
+    }
+
 class UIElement:
-    def __init__(self, name: str, props: Optional[Dict[str, Any]] = None, key: Optional[str] = None):
+    def __init__(self, name: str, props: Optional[Dict[str, Any]] = None, key: Optional[str] = None, default_value: Any = None, default_component_state: Any = None):
         self.key = key
         self.props = props if props is not None else {}
         self.name = name
         self.children: List['UIElement'] = []
-        self.is_root = False
+        self.parent = None
+        default_state = init_default_state(key, default_value, default_component_state)
+        self.state = default_state
+        self.default_state = default_state
+        ctx = get_context()
+        current_element = ctx.get("current_element")
+        if current_element:
+            current_element.add_child(self)
+            self.parent = current_element
 
     def render_tree(self, tree: Dict[str, Any]) -> Any:
-        return component_func(comp="element_renderer", props={"tree": tree}, key=self.key, default=None)
+        self.state = component_func(comp="element_renderer", props={"tree": tree}, key=self.key, default=self.default_state)
+        return self.state
 
-    def render(self) -> Dict[str, Any]:
+    def render_props(self) -> Dict[str, Any]:
         return {
             "name": self.name,
             "props": self.props,
-            "children": [child.render() for child in self.children]
+            "children": [child.render_props() for child in self.children]
         }
+
+    def render(self) -> Any:
+        return self.render_tree(self.render_props())
 
     def __enter__(self) -> 'UIElement':
         ctx = get_context()
-        if not ctx["in_render"]:
-            ctx["in_render"] = True
-            self.is_root = True
+        ctx["current_element"] = self
         return self
 
     def __exit__(self, exc_type, exc_val, exc_tb) -> None:
-        if self.is_root:
-            get_context()["in_render"] = False
-            self.render_tree(self.render())
+        ctx = get_context()
+        if self.parent is None:
+            self.render_tree(self.render_props())
+
+        # Reset the current element to this element's parent
+        ctx["current_element"] = self.parent
 
     def add_child(self, child: 'UIElement') -> None:
+        child.parent = self
         self.children.append(child)
+    
+    def __getattr__(self, item: str) -> Any:
+        if item in self.props:
+            return self.props[item]
+        raise AttributeError(f"'{self.__class__.__name__}' object has no attribute '{item}'")
+    
+    @property
+    def value(self) -> Any:
+        return self.state["value"]
 
-def element(name: str, key: Optional[str] = None, **props) -> UIElement:
-    return UIElement(name=name, props=props, key=key)
+def element(name: str, key: Optional[str] = None , default_value: Any = None, default_component_state: Any = None, **props) -> UIElement:
+    return UIElement(name=name, props=props, key=key, default_value=default_value, default_component_state=default_component_state)

streamlit_shadcn_ui/py_components/button.py

@@ -1,10 +1,28 @@
+from streamlit_shadcn_ui.py_components.base.element import element, init_default_state
+from streamlit_shadcn_ui.py_components.utils.callback import register_callback
+from streamlit_shadcn_ui.py_components.utils.session import init_session
 from .utils import declare_component
+import streamlit as st
+
 _RELEASE = True
 
 _component_func = declare_component("button", release=_RELEASE)
 
 # variant "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
 def button(text: str, variant: str = "default", class_name: str = None, key = None):
     props = {"text": text, "variant": variant, "className": class_name}
-    clicked = _component_func(comp="button", props=props, key=key, default=False)
+    default_state = init_default_state(key, default_value=False, default_component_state={})
+    non_resettable_state_key = f"{key}__non_resettable_state"
+    init_session(key, default_state)
+    init_session(non_resettable_state_key, default_value=default_state)
+
+    if (st.session_state[non_resettable_state_key]['event_id'] != st.session_state[key]['event_id']):
+        st.session_state[non_resettable_state_key]['value'] = st.session_state[key]['value']
+        st.session_state[non_resettable_state_key]['event_id'] = st.session_state[key]['event_id']
+        
+    else:
+        st.session_state[non_resettable_state_key]['value'] = False
+    
+    _component_func(comp="button", props=props, key=key, default=default_state)
+    clicked = st.session_state[non_resettable_state_key]['value']
     return clicked