dara-components 1.8.5__py3-none-any.whl → 1.22.1__py3-none-any.whl

dara/components/common/__init__.py

@@ -14,6 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 """
+# ruff: noqa: F401, F403
 
 from dara.components.common.accordion import Accordion, AccordionItem
 from dara.components.common.anchor import Anchor
@@ -33,8 +34,12 @@ from dara.components.common.card import Card
 from dara.components.common.carousel import Carousel
 from dara.components.common.checkbox_group import CheckboxGroup
 from dara.components.common.code import Code
-from dara.components.common.component_select_list import ComponentSelectList
+from dara.components.common.component_select_list import (
+    ComponentItem,
+    ComponentSelectList,
+)
 from dara.components.common.datepicker import Datepicker
+from dara.components.common.dropdown_menu import DropdownMenu, MenuItem
 from dara.components.common.dropzone import UploadDropzone
 from dara.components.common.form import Form
 from dara.components.common.form_page import FormPage
@@ -51,7 +56,7 @@ from dara.components.common.modal import Modal
 from dara.components.common.overlay import Overlay
 from dara.components.common.paragraph import Paragraph
 from dara.components.common.progress_bar import ProgressBar
-from dara.components.common.radio_group import RadioGroup
+from dara.components.common.radio_group import RadioGroup, RadioItem
 from dara.components.common.select import ListSection, Select
 from dara.components.common.slider import Slider
 from dara.components.common.spacer import Spacer
@@ -80,8 +85,10 @@ __all__ = [
     'CheckboxGroup',
     'Code',
     'ComponentSelectList',
+    'ComponentItem',
     'Datepicker',
     'Direction',
+    'DropdownMenu',
     'Form',
     'FormPage',
     'Grid',
@@ -95,6 +102,7 @@ __all__ = [
     'ItemBadge',
     'Label',
     'ListSection',
+    'MenuItem',
     'Markdown',
     'Modal',
     'Overlay',
@@ -106,6 +114,7 @@ __all__ = [
     'Stack',
     'Switch',
     'RadioGroup',
+    'RadioItem',
     'Text',
     'Textarea',
     'Tab',

dara/components/common/accordion.py

@@ -15,15 +15,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import Any, List, Optional, Union
+from typing import Any
 
-from pydantic import BaseModel, validator
+from pydantic import field_validator
 
 from dara.components.common.base_component import LayoutComponent
 from dara.components.common.utils import ItemBadge
 from dara.core.base_definitions import Action
+from dara.core.base_definitions import DaraBaseModel as BaseModel
 from dara.core.definitions import ComponentInstance
-from dara.core.interactivity import UrlVariable, Variable
+from dara.core.interactivity import Variable
 from dara.core.logging import dev_logger
 
 
@@ -78,9 +79,9 @@ class AccordionItem(BaseModel):
     :param content: Optional content to render
     """
 
-    badge: Optional[ItemBadge]
-    label: Union[str, ComponentInstance]
-    content: Optional[ComponentInstance]
+    badge: ItemBadge | None = None
+    label: str | ComponentInstance
+    content: ComponentInstance | None = None
 
 
 class Accordion(LayoutComponent):
@@ -163,7 +164,7 @@ class Accordion(LayoutComponent):
     For these components you can set a height, for example:
 
     ```python
-    from dara.core import get_icon, ConfigurationBuilder, DataVariable
+    from dara.core import get_icon, ConfigurationBuilder, ServerVariable
     from dara.components.common import ComponentInstance, Table, Accordion, AccordionItem
     from dara.components.graphs import CausalGraphViewer
     from dara.components.graphs.graph_layout import PlanarLayout
@@ -184,7 +185,7 @@ class Accordion(LayoutComponent):
 
 
     # creates Table data
-    table_data = DataVariable(
+    table_data = ServerVariable(
         DataFrame(
             [
                 {
@@ -232,7 +233,7 @@ class Accordion(LayoutComponent):
 
 
     config = ConfigurationBuilder()
-    config.add_page(name='Accordion Page', content=accordion(), icon=get_icon('chart-line'))
+    config.router.add_page(path='accordion', content=accordion)
     ```
 
      For more examples check the AccordionItem documentation.
@@ -244,29 +245,22 @@ class Accordion(LayoutComponent):
      :param onchange: An action to triggered when the component's state changes
     """
 
-    initial: Optional[Union[int, List[int]]] = 0
-    value: Optional[
-        Union[
-            Variable[Union[int, List[int]]],
-            UrlVariable[Union[int, List[int]]],
-            int,
-            List[int],
-        ]
-    ] = 0
-    onchange: Optional[Action] = None
-    items: List[AccordionItem]
-    multi: Optional[bool] = True
-
-    @validator('initial', pre=True)
+    initial: int | list[int] | None = 0
+    value: Variable[int | list[int]] | int | list[int] | None = 0
+    onchange: Action | None = None
+    items: list[AccordionItem]
+    multi: bool | None = True
+
+    @field_validator('initial', mode='before')
     @classmethod
-    def validate_initial(cls, initial: Any) -> Union[int, List[int]]:
+    def validate_initial(cls, initial: Any) -> int | list[int]:
         if initial is not None:
             dev_logger.warning("Accordion's initial prop is now deprecated, please use value instead.")
         return initial
 
-    @validator('items', pre=True)
+    @field_validator('items', mode='before')
     @classmethod
-    def validate_items(cls, items: Any) -> List[AccordionItem]:
+    def validate_items(cls, items: Any) -> list[AccordionItem]:
         if not isinstance(items, list):
             raise ValueError('AccordionItems must be passed as a list to the Accordion component')
         if len(items) == 0:

dara/components/common/anchor.py

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import List, Optional, Union
+from typing_extensions import deprecated
 
 from dara.components.common.base_component import (
     ContentComponent,
@@ -23,10 +23,11 @@ from dara.components.common.base_component import (
     ModifierComponent,
 )
 from dara.components.common.text import Text
-from dara.core.definitions import TemplateMarker, discover
+from dara.core.definitions import discover
 from dara.core.interactivity import AnyVariable, DerivedVariable, Variable
 
 
+@deprecated('Use `dara.core.Link` instead')
 @discover
 class Anchor(ModifierComponent):
     """
@@ -60,19 +61,17 @@ class Anchor(ModifierComponent):
     :param new_tab: whether to open the link in a new tab
     """
 
-    href: Optional[str] = None
-    name: Optional[str] = None
+    href: str | None = None
+    name: str | None = None
     clean: bool = False
     new_tab: bool = False
 
-    def __init__(
-        self, child: Union[ContentComponent, str, Variable[str], DerivedVariable[str], TemplateMarker], **kwargs
-    ):
-        if isinstance(child, (ContentComponent, Variable, DerivedVariable, TemplateMarker, str)) is False:
+    def __init__(self, child: ContentComponent | str | Variable[str] | DerivedVariable[str], **kwargs):
+        if isinstance(child, (ContentComponent, Variable, DerivedVariable, str)) is False:
             raise LayoutError(f'Only a single ContentComponent may be passed as an Anchors child, passed : {child}')
 
         # Handle a string or Variable being passed directly to an anchor
-        if isinstance(child, (str, AnyVariable, TemplateMarker)):
+        if isinstance(child, (str, AnyVariable)):
             child = Text(child)
-        parsed_args: List[ContentComponent] = [child]
+        parsed_args: list[ContentComponent] = [child]
         super().__init__(*parsed_args, **kwargs)

dara/components/common/base_component.py

@@ -15,7 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import Literal, Optional
+from typing import Literal
+
+from pydantic import ConfigDict
 
 from dara.core.definitions import ComponentInstance, StyledComponentInstance
 
@@ -40,25 +42,6 @@ JustifyContent = Literal[
     None,
 ]
 
-AlignItems = Literal[
-    '-moz-initial',
-    'baseline',
-    'center',
-    'end',
-    'flex-end',
-    'flex-start',
-    'inherit',
-    'initial',
-    'normal',
-    'revert',
-    'self-end',
-    'self-start',
-    'start',
-    'stretch',
-    'unset',
-    None,
-]
-
 
 class LayoutError(Exception):
     """An Error type for when the layout is invalid"""
@@ -69,16 +52,20 @@ class BaseDashboardComponent(StyledComponentInstance):
     The base Component class for all other dashboarding components to extend from.
     """
 
+    model_config = ConfigDict(extra='forbid', use_enum_values=True)
+
     # Define JS module on the base component so we don't have to repeat that on each component
     js_module = '@darajs/components'
 
-    class Config:
-        smart_union = True
-        extra = 'forbid'
-        use_enum_values = True
+    def __init__(self, *args: ComponentInstance | None, **kwargs):
+        if len(args) > 0 and len(kwargs.get('children') or []) == 0:
+            kwargs['children'] = list(arg for arg in args if arg is not None)
 
-    def __init__(self, *args: ComponentInstance, **kwargs):
-        super().__init__(children=list(args), **kwargs)
+        # Fallback
+        if 'children' not in kwargs:
+            kwargs['children'] = []
+
+        super().__init__(**kwargs)
 
 
 class LayoutComponent(BaseDashboardComponent):
@@ -91,9 +78,9 @@ class LayoutComponent(BaseDashboardComponent):
     :param align: the align-items value to be passed to the component
     """
 
-    position: str = 'relative'
-    justify: Optional[JustifyContent] = None
-    align: Optional[AlignItems] = None
+    position: str | None = 'relative'
+
+    justify: JustifyContent | None = None
 
     def append(self, component: ComponentInstance):
         """
@@ -102,18 +89,18 @@ class LayoutComponent(BaseDashboardComponent):
 
         :param component: the component to add, can be any type of BaseComponent
         """
-        if isinstance(component, ComponentInstance) is False:
+        if ComponentInstance.isinstance(component) is False:
             name = self.__class__.__name__
             raise TypeError(f'You may only append other components to a {name} component. Not: {component}')
-        self.children.append(component)   # type: ignore
+        self.children.append(component)  # type: ignore
 
     def pop(self):
         """
         Pops the last child from the list of children and returns it. Raises an IndexError if the parent is empty
         """
-        if len(self.children) == 0:   # type: ignore
+        if len(self.children) == 0:  # type: ignore
             raise IndexError(f'{self.__class__.__name__} is empty')
-        return self.children.pop()   # type: ignore
+        return self.children.pop()  # type: ignore
 
 
 class ContentComponent(BaseDashboardComponent):
@@ -127,8 +114,8 @@ class ContentComponent(BaseDashboardComponent):
         super().__init__(*args, **kwargs)
 
         cmp_name = self.__class__.__name__
-        if len(self.children) != 0:   # type: ignore
-            for child in self.children:   # type: ignore # pylint: disable=not-an-iterable
+        if len(self.children) != 0:  # type: ignore
+            for child in self.children:  # type: ignore
                 if isinstance(child, LayoutComponent):
                     raise LayoutError(f'A {child.__class__.__name__} component cannot be nested inside a {cmp_name}')
 
@@ -151,4 +138,4 @@ class FormComponent(InteractiveComponent):
     A subset of InteractiveComponents which must subscribe to the Form context.
     """
 
-    id: Optional[str] = None
+    id: str | None = None

dara/components/common/bullet_list.py

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import List, Union
-
 from dara.components.common.base_component import ContentComponent
 from dara.core.interactivity import DerivedVariable, Variable
 
@@ -42,5 +40,5 @@ class BulletList(ContentComponent):
     :param numbered: Boolean, if True then number the bullets
     """
 
-    items: Union[List[str], Variable, DerivedVariable]
+    items: list[str] | Variable | DerivedVariable
     numbered: bool = False

dara/components/common/button.py

@@ -16,14 +16,14 @@ limitations under the License.
 """
 
 from enum import Enum
-from typing import Optional, Union
+from typing import cast
 
 from dara.components.common.base_component import LayoutComponent
 from dara.components.common.text import Text
 from dara.core import ComponentInstance
 from dara.core.base_definitions import Action
-from dara.core.definitions import TemplateMarker, discover
-from dara.core.interactivity import Condition, NonDataVariable
+from dara.core.definitions import discover
+from dara.core.interactivity import ClientVariable, Condition
 
 
 class ButtonStyle(str, Enum):
@@ -48,18 +48,20 @@ class Button(LayoutComponent):
     A button component with an icon and styling:
 
     ```python
-
-    from dara.core import NavigateTo
+    from dara.core import action
     from dara.components import Button, ButtonStyle
 
+    @action
+    async def navigate_to(ctx: action.Ctx, url: str):
+        await ctx.navigate(url)
+
     Button(
         'Click',
-        onclick=NavigateTo('/test'),
+        onclick=navigate_to('/test'),
         icon='Pen',
         styling=ButtonStyle.SECONDARY,
         outline=True,
     )
-
     ```
 
     The different button styles supported are: 'error', 'ghost', 'plain', 'primary' and 'secondary'. Other styling option
@@ -69,17 +71,20 @@ class Button(LayoutComponent):
 
     ```python
 
-    from dara.core import Variable, NavigateTo
+    from dara.core import Variable, action
     from dara.components import Button
 
     disabled = Variable(True)
 
+    @action
+    async def navigate_to(ctx: action.Ctx, url: str):
+        await ctx.navigate(url)
+
     Button(
         'Click',
         disabled=disabled,
-        onclick=NavigateTo('/test),
+        onclick=navigate_to('/test'),
     )
-
     ```
 
     A button component can also take any component inside of it to make it into some clickable component.
@@ -87,49 +92,53 @@ class Button(LayoutComponent):
 
     ```python
 
-    from dara.core import NavigateTo
+    from dara.core import action
     from dara.components import Button, Stack, Text
 
+    @action
+    async def navigate_to(ctx: action.Ctx, url: str):
+        await ctx.navigate(url)
+
     Button(
         Stack(
             Text(
                 'Stack passed to button, when clicked I navigate to test page',
             ),
         ),
-        onclick=NavigateTo('/test'),
+        onclick=navigate_to('/test'),
     )
-
     ```
 
     :param disabled: A variable, condition, or bool to disabled the button when true
+    :param loading: A variable, condition, or bool to set the button to a loading state, showing a spinner.
+       By default, the button will automatically be set to loading=True while the onclick action is running,
+       equivalent to `Button(..., onclick=my_action, loading=my_action.loading)`. You can opt out of this behaviour by
+       simply setting `loading=False`.
     :param onclick: An Action that is triggered by clicking the button
     :param icon: An optional icon to display, see dara.core.css.get_icon for details
     :param styling: A style of the button, can be 'primary', 'secondary', 'error', 'plain' or 'ghost'
     :param outline: This allows to pick between two styles, if False the button is filled with a solid background color,
         if True it shows a transparent background with an outlined colored border. Filled buttons are more prominent and
         often used as primary actions, while outline buttons are more subtle and commonly used as secondary actions.
+    :param stop_click_propagation: Whether to stop the click event from propagating to the parent element, defaults to true
     """
 
-    disabled: Optional[Union[Condition, NonDataVariable, bool]] = None
-    onclick: Optional[Action] = None
-    icon: Optional[str] = None
-    styling: Optional[ButtonStyle] = None
+    disabled: Condition | ClientVariable | bool | None = None
+    loading: Condition | ClientVariable | bool | None = None
+    onclick: Action | None = None
+    icon: str | None = None
+    styling: ButtonStyle | None = None
     outline: bool = False
-
-    class Config:
-        smart_union = True
+    stop_click_propagation: bool = True
 
     def __init__(
-        self,
-        children: Union[str, ComponentInstance, NonDataVariable, TemplateMarker],
-        styling: Optional[ButtonStyle] = None,
-        **kwargs
+        self, children: str | ComponentInstance | ClientVariable, styling: ButtonStyle | None = None, **kwargs
     ):
         child = children
         style = styling if styling is not None else ButtonStyle.PRIMARY
-        if isinstance(children, (str, NonDataVariable, TemplateMarker)):
+        if isinstance(children, (str, ClientVariable)):
             child = Text(text=children)
         if not styling and isinstance(children, ComponentInstance) and not isinstance(children, Text):
             style = ButtonStyle.PLAIN
 
-        super().__init__(child, styling=style, **kwargs)
+        super().__init__(cast(ComponentInstance, child), styling=style, **kwargs)

dara/components/common/button_bar.py

@@ -16,14 +16,14 @@ limitations under the License.
 """
 
 from enum import Enum
-from typing import Any, List, Optional, Union
+from typing import Any
 
-from pydantic import validator
+from pydantic import field_validator
 
 from dara.components.common.base_component import FormComponent
 from dara.components.common.utils import Item
 from dara.core.base_definitions import Action
-from dara.core.interactivity import UrlVariable, Variable
+from dara.core.interactivity import Variable
 
 
 class ButtonBarStyle(str, Enum):
@@ -41,57 +41,62 @@ class ButtonBar(FormComponent):
     A simple button bar component:
 
     ```python
-
     from dara.core import Variable
     from dara.components.common import ButtonBar, Item
 
+    bar_var = Variable('val2')
+
     ButtonBar(
         items=[
             Item(label='Value 1', value='val1'),
             Item(label='Value 2', value='val2'),
             Item(label='Value 3', value='val3'),
         ],
-        value=Variable('val2')
+        value=bar_var,
     )
-
     ```
 
     A ButtonBar component with onchange:
 
     ```python
-
-    from dara.core import Variable, Notify
+    from dara.core import Variable, action
     from dara.components.common import ButtonBar, Item
 
+    bar_var = Variable('val2')
+
+    @action
+    async def notify_change(ctx: action.Ctx):
+        bar = ctx.input
+        await ctx.notify(title='Alert', message=f'ButtonBar value changed to {bar}', status='SUCCESS')
+
     ButtonBar(
         items=[
             Item(label='Value 1', value='val1'),
             Item(label='Value 2', value='val2'),
             Item(label='Value 3', value='val3'),
         ],
-        value=Variable('val2')
-        onchange=Notify(message='ButtonBar value changed'),
+        value=bar_var,
+        onchange=notify_change(),
     )
-
     ```
 
     A button bar component with styling:
 
     ```python
-
     from dara.core import Variable
     from dara.components.common import ButtonBar, ButtonBarStyle, Item
 
+    bar_var = Variable('val2')
+
     ButtonBar(
         items=[
             Item(label='Value 1', value='val1'),
             Item(label='Value 2', value='val2'),
             Item(label='Value 3', value='val3'),
         ],
-        value=Variable('val2'),
+        value=bar_var,
         styling=ButtonBarStyle.SECONDARY
     )
-
     ```
 
     :param items: An Item list that defines the button labels
@@ -101,15 +106,15 @@ class ButtonBar(FormComponent):
     :param styling: A style of the ButtonBar, can be 'primary' or 'secondary'
     """
 
-    items: List[Item]
-    value: Optional[Union[Variable, UrlVariable]] = None
-    onchange: Optional[Action] = None
-    id: Optional[str] = None
+    items: list[Item]
+    value: Variable | None = None
+    onchange: Action | None = None
+    id: str | None = None
     styling: ButtonBarStyle = ButtonBarStyle.PRIMARY
 
-    @validator('items', pre=True)
+    @field_validator('items', mode='before')
     @classmethod
-    def validate_items(cls, items: Any) -> List[Item]:
+    def validate_items(cls, items: Any) -> list[Item]:
         if not isinstance(items, list):
             raise ValueError('Items must be passed as a list to the button bar component')
         if len(items) == 0:

dara/components/common/card.py

@@ -15,9 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import Optional
-
 from dara.components.common.base_component import LayoutComponent
+from dara.core import ClientVariable
 from dara.core.definitions import ComponentInstance
 
 
@@ -52,9 +51,9 @@ class Card(LayoutComponent):
     :param align: How to align the content of the card, accepts any flexbox alignments
     """
 
-    subtitle: Optional[str] = None
-    title: Optional[str] = None
+    subtitle: str | ClientVariable | None = None
+    title: str | ClientVariable | None = None
     accent: bool = False
 
-    def __init__(self, *args: ComponentInstance, **kwargs):
+    def __init__(self, *args: ComponentInstance | None, **kwargs):
         super().__init__(*args, **kwargs)

dara/components/common/carousel.py

@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 """
 
-from typing import Any, List, Optional, Union
+from typing import Any
 
-from pydantic import validator
+from pydantic import field_validator
 
 from dara.components.common.base_component import ContentComponent
 from dara.components.common.utils import CarouselItem
 from dara.core.base_definitions import Action
-from dara.core.interactivity import NonDataVariable, UrlVariable, Variable
+from dara.core.interactivity import ClientVariable, Variable
 
 
 class Carousel(ContentComponent):
@@ -118,14 +118,14 @@ class Carousel(ContentComponent):
     :param onchange: Action triggered when the component changes states
     """
 
-    items: Union[List[CarouselItem], NonDataVariable]
-    value: Optional[Union[Variable[int], UrlVariable[int]]] = None
-    onchange: Optional[Action] = None
+    items: list[CarouselItem] | ClientVariable
+    value: Variable[int] | None = None
+    onchange: Action | None = None
 
-    @validator('items', pre=True)
+    @field_validator('items', mode='before')
     @classmethod
-    def validate_items(cls, items: Any) -> Union[List[CarouselItem], NonDataVariable]:
-        if isinstance(items, NonDataVariable):
+    def validate_items(cls, items: Any) -> list[CarouselItem] | ClientVariable:
+        if isinstance(items, ClientVariable):
             return items
         if not isinstance(items, list):
             raise ValueError('CarouselItem must be passed as a list to the Carousel component')