diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/__init__.py b/plugins/ui/src/deephaven/ui/components/spectrum/__init__.py index a24465acd..becbde521 100644 --- a/plugins/ui/src/deephaven/ui/components/spectrum/__init__.py +++ b/plugins/ui/src/deephaven/ui/components/spectrum/__init__.py @@ -1,4 +1,6 @@ from .action_button import * from .basic import * +from .button_group import * from .button import * +from .text_field import * from .flex import * diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/accessibility.py b/plugins/ui/src/deephaven/ui/components/spectrum/accessibility.py index 1f2184791..92c671840 100644 --- a/plugins/ui/src/deephaven/ui/components/spectrum/accessibility.py +++ b/plugins/ui/src/deephaven/ui/components/spectrum/accessibility.py @@ -4,6 +4,8 @@ # Accessibility typings BoolLiteral = Union[Literal["true", "false"], bool] + AriaExpanded = BoolLiteral AriaHasPopup = Union[BoolLiteral, Literal["menu", "listbox", "tree", "grid", "dialog"]] AriaPressed = Union[BoolLiteral, Literal["mixed"]] +AriaAutoComplete = Union[BoolLiteral, Literal["inline", "list", "both", "none"]] diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/basic.py b/plugins/ui/src/deephaven/ui/components/spectrum/basic.py index 3df2b47dd..a9e113279 100644 --- a/plugins/ui/src/deephaven/ui/components/spectrum/basic.py +++ b/plugins/ui/src/deephaven/ui/components/spectrum/basic.py @@ -11,14 +11,6 @@ def spectrum_element(name: str, /, *children: Any, **props: Any) -> BaseElement: return BaseElement(f"deephaven.ui.spectrum.{name}", *children, **props) -def button_group(*children, **props): - """ - Python implementation for the Adobe React Spectrum ButtonGroup component. - https://react-spectrum.adobe.com/react-spectrum/ButtonGroup.html - """ - return spectrum_element("ButtonGroup", *children, **props) - - def checkbox(*children, **props): """ Python implementation for the Adobe React Spectrum Checkbox component. @@ -157,14 +149,6 @@ def text(*children, **props): return spectrum_element("Text", *children, **props) -def text_field(*children, **props): - """ - Python implementation for the Adobe React Spectrum TextField component. - https://react-spectrum.adobe.com/react-spectrum/TextField.html - """ - return spectrum_element("TextField", *children, **props) - - def toggle_button(*children, **props): """ Python implementation for the Adobe React Spectrum ToggleButton component. diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/button_group.py b/plugins/ui/src/deephaven/ui/components/spectrum/button_group.py new file mode 100644 index 000000000..0751aa7e8 --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/spectrum/button_group.py @@ -0,0 +1,157 @@ +from __future__ import annotations +from typing import Any, Callable +from .accessibility import AriaExpanded, AriaHasPopup, AriaPressed +from .events import ( + ButtonType, + FocusEventCallable, + KeyboardEventCallable, + PressEventCallable, + StaticColor, + Orientation, +) +from .layout import ( + AlignSelf, + CSSProperties, + DimensionValue, + JustifySelf, + LayoutFlex, + Number, + Position, +) +from .basic import spectrum_element +from ...elements import Element + + +def button_group( + *children: Any, + is_disabled: bool | None = None, + orientation: Orientation = "horizontal", + alignment: AlignSelf = "start", + flex: LayoutFlex | None = None, + flex_grow: Number | None = None, + flex_shrink: Number | None = None, + flex_basis: DimensionValue | None = None, + align_self: AlignSelf | None = None, + justify_self: JustifySelf | None = None, + order: Number | None = None, + grid_area: str | None = None, + grid_row: str | None = None, + grid_column: str | None = None, + grid_row_start: str | None = None, + grid_row_end: str | None = None, + grid_column_start: str | None = None, + grid_column_end: str | None = None, + margin: DimensionValue | None = None, + margin_top: DimensionValue | None = None, + margin_bottom: DimensionValue | None = None, + margin_start: DimensionValue | None = None, + margin_end: DimensionValue | None = None, + margin_x: DimensionValue | None = None, + margin_y: DimensionValue | None = None, + width: DimensionValue | None = None, + height: DimensionValue | None = None, + min_width: DimensionValue | None = None, + min_height: DimensionValue | None = None, + max_width: DimensionValue | None = None, + max_height: DimensionValue | None = None, + position: Position | None = None, + top: DimensionValue | None = None, + bottom: DimensionValue | None = None, + left: DimensionValue | None = None, + right: DimensionValue | None = None, + start: DimensionValue | None = None, + end: DimensionValue | None = None, + z_index: Number | None = None, + is_hidden: bool | None = None, + id: str | None = None, + UNSAFE_class_name: str | None = None, + UNSAFE_style: CSSProperties | None = None, +) -> Element: + """ + A button group is a grouping of button whose actions are related to each other. + + Args: + *children: The children of the button group. + is_disabled: Whether the button group is disabled. + orientation: The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent any switching behaviours between 'vertical' and horizontal'. + alignment: The alignment of the buttons within the ButtonGroup. + flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available. + flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available. + flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available. + flex_basis: When used in a flex layout, specifies the initial main size of the element. + align_self: Overrides the alignItems property of a flex or grid container. + justify_self: Species how the element is justified inside a flex or grid container. + order: The layout order for the element within a flex or grid container. + grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid. + grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid. + grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid. + grid_row_start: When used in a grid layout, specifies the starting row to span within the grid. + grid_row_end: When used in a grid layout, specifies the ending row to span within the grid. + grid_column_start: When used in a grid layout, specifies the starting column to span within the grid. + grid_column_end: When used in a grid layout, specifies the ending column to span within the grid. + margin: The margin for all four sides of the element. + margin_top: The margin for the top side of the element. + margin_bottom: The margin for the bottom side of the element. + margin_start: The margin for the logical start side of the element, depending on layout direction. + margin_end: The margin for the logical end side of the element, depending on layout direction. + margin_x: The margin for the left and right sides of the element. + margin_y: The margin for the top and bottom sides of the element. + position: Specifies how the element is position. + top: The top position of the element. + bottom: The bottom position of the element. + left: The left position of the element. + right: The right position of the element. + start: The logical start position of the element, depending on layout direction. + end: The logical end position of the element, depending on layout direction. + z_index: The stacking order for the element + is_hidden: Hides the element. + id: The unique identifier of the element. + UNSAFE_class_name: Set the CSS className for the element. Only use as a last resort. Use style props instead. + UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead. + """ + return spectrum_element( + "ButtonGroup", + *children, + is_disabled=is_disabled, + orientation=orientation, + alignment=alignment, + flex=flex, + flex_grow=flex_grow, + flex_shrink=flex_shrink, + flex_basis=flex_basis, + align_self=align_self, + justify_self=justify_self, + order=order, + grid_area=grid_area, + grid_row=grid_row, + grid_column=grid_column, + grid_row_start=grid_row_start, + grid_row_end=grid_row_end, + grid_column_start=grid_column_start, + grid_column_end=grid_column_end, + margin=margin, + margin_top=margin_top, + margin_bottom=margin_bottom, + margin_start=margin_start, + margin_end=margin_end, + margin_x=margin_x, + margin_y=margin_y, + width=width, + height=height, + min_width=min_width, + min_height=min_height, + max_width=max_width, + max_height=max_height, + position=position, + top=top, + bottom=bottom, + left=left, + right=right, + start=start, + end=end, + z_index=z_index, + is_hidden=is_hidden, + id=id, + UNSAFE_class_name=UNSAFE_class_name, + UNSAFE_style=UNSAFE_style, + ) diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/events.py b/plugins/ui/src/deephaven/ui/components/spectrum/events.py index 36e7e7b8d..eaf61adee 100644 --- a/plugins/ui/src/deephaven/ui/components/spectrum/events.py +++ b/plugins/ui/src/deephaven/ui/components/spectrum/events.py @@ -103,6 +103,7 @@ class PressEvent(TypedDict): ] ButtonStyle = Literal["fill", "outline"] ElementTypes = Literal["div", "button", "a"] +Orientation = Literal["horizontal", "vertical"] FocusEventCallable = Callable[[FocusEvent], None] KeyboardEventCallable = Callable[[KeyboardEvent], None] diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/layout.py b/plugins/ui/src/deephaven/ui/components/spectrum/layout.py index 9d203262a..febde194f 100644 --- a/plugins/ui/src/deephaven/ui/components/spectrum/layout.py +++ b/plugins/ui/src/deephaven/ui/components/spectrum/layout.py @@ -101,3 +101,5 @@ """ A dictionary of CSS properties. """ +LabelPosition = Literal["top", "side"] +LabelAlign = Literal["start", "end"] diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/text_field.py b/plugins/ui/src/deephaven/ui/components/spectrum/text_field.py new file mode 100644 index 000000000..2ac2de9a4 --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/spectrum/text_field.py @@ -0,0 +1,275 @@ +from __future__ import annotations +from typing import Any, Callable +from .accessibility import AriaExpanded, AriaHasPopup, AriaAutoComplete +from .events import ( + ButtonType, + FocusEventCallable, + KeyboardEventCallable, + PressEventCallable, + StaticColor, + Orientation, +) +from .layout import ( + AlignSelf, + CSSProperties, + DimensionValue, + JustifySelf, + LayoutFlex, + Number, + Position, + LabelPosition, + LabelAlign, +) +from .validate import ( + InputType, + TextFieldType, + TextFieldInputMode, + TextFieldValidationState, + TextFieldNecessityIndicator, +) +from .basic import spectrum_element +from ...elements import Element + + +def text_field( + icon: Element | None = None, + is_quiet: bool | None = None, + is_disabled: bool | None = None, + is_read_only: bool | None = None, + is_required: bool | None = None, + description: Any | None = None, + error_message: Any | None = None, + auto_focus: bool | None = None, + value: str | None = None, + default_value: str | None = None, + label: Any | None = None, + auto_complete: str | None = None, + max_length: int | None = None, + min_length: int | None = None, + pattern: str | None = None, + type: TextFieldType | None = None, + input_mode: TextFieldInputMode | None = None, + name: str | None = None, + validation_state: TextFieldValidationState | None = None, + label_position: LabelPosition = "top", + label_align: LabelAlign = "start", + necessity_indicator: TextFieldNecessityIndicator = "icon", + contextual_help: Any | None = None, + on_focus: FocusEventCallable | None = None, + on_blur: FocusEventCallable | None = None, + on_focus_change: Callable[[bool], None] | None = None, + on_key_down: KeyboardEventCallable | None = None, + on_key_up: KeyboardEventCallable | None = None, + on_change: Callable[[str], None] | None = None, + flex: LayoutFlex | None = None, + flex_grow: Number | None = None, + flex_shrink: Number | None = None, + flex_basis: DimensionValue | None = None, + align_self: AlignSelf | None = None, + justify_self: JustifySelf | None = None, + order: Number | None = None, + grid_area: str | None = None, + grid_row: str | None = None, + grid_row_start: str | None = None, + grid_row_end: str | None = None, + grid_column: str | None = None, + grid_column_start: str | None = None, + grid_column_end: str | None = None, + margin: DimensionValue | None = None, + margin_top: DimensionValue | None = None, + margin_bottom: DimensionValue | None = None, + margin_start: DimensionValue | None = None, + margin_end: DimensionValue | None = None, + margin_x: DimensionValue | None = None, + margin_y: DimensionValue | None = None, + width: DimensionValue | None = None, + height: DimensionValue | None = None, + min_width: DimensionValue | None = None, + min_height: DimensionValue | None = None, + max_width: DimensionValue | None = None, + max_height: DimensionValue | None = None, + position: Position | None = None, + top: DimensionValue | None = None, + bottom: DimensionValue | None = None, + start: DimensionValue | None = None, + end: DimensionValue | None = None, + left: DimensionValue | None = None, + right: DimensionValue | None = None, + z_index: Number | None = None, + is_hidden: bool | None = None, + id: str | None = None, + exclude_from_tab_order: bool | None = None, + aria_active_descendant: str | None = None, + aria_auto_complete: AriaAutoComplete | None = None, + aria_haspopup: AriaHasPopup | None = None, + aria_label: str | None = None, + aria_labelledby: str | None = None, + aria_describedby: str | None = None, + aria_details: str | None = None, + aria_errormessage: str | None = None, + UNSAFE_class_name: str | None = None, + UNSAFE_style: CSSProperties | None = None, + # missing properties that are clipboard or composition events +) -> Element: + """ + TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements. + + Args: + icon: An icon to display at the start of the input + is_quiet: Whether the input should be displayed with a quiet style + is_disabled: Whether the input should be disabled + is_read_only: Whether the input scan be selected but not changed by the user + is_required: Whether the input is required before form submission + description: A description for the field. Provides a hint such as specific requirements for what to choose. + error_message: An error message to display when the field is invalid + auto_focus: Whether the input should be focused on page load + value: The current value of the input + default_value: The default value of the input + label: The label for the input + auto_complete: Describes the type of autocomplete functionality the input should provide + max_length: The maximum number of characters the input can accept + min_length: The minimum number of characters the input can accept + pattern: A regular expression that the input's value must match + type: The type of input to display + input_mode: Hints at the tpye of data that might be entered by the user while editing the element or its contents + name: The name of the input, used when submitting an HTML form + validation_state: Whether the input should display its "valid" or "invalid" state + label_position: The position of the label relative to the input + label_align: The alignment of the label relative to the input + necessity_indicator: Whether the required state should be shown as an icon or text + contextual_help: A ContentualHelp element to place next to the label + on_focus: Function called when the button receives focus. + on_blur: Function called when the button loses focus. + on_focus_change: Function called when the focus state changes. + on_key_down: Function called when a key is pressed. + on_key_up: Function called when a key is released. + on_change: Function called when the input value changes + flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available. + flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available. + flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available. + flex_basis: When used in a flex layout, specifies the initial main size of the element. + align_self: Overrides the alignItems property of a flex or grid container. + justify_self: Species how the element is justified inside a flex or grid container. + order: The layout order for the element within a flex or grid container. + grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid. + grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid. + grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid. + grid_row_start: When used in a grid layout, specifies the starting row to span within the grid. + grid_row_end: When used in a grid layout, specifies the ending row to span within the grid. + grid_column_start: When used in a grid layout, specifies the starting column to span within the grid. + grid_column_end: When used in a grid layout, specifies the ending column to span within the grid. + margin: The margin for all four sides of the element. + margin_top: The margin for the top side of the element. + margin_bottom: The margin for the bottom side of the element. + margin_start: The margin for the logical start side of the element, depending on layout direction. + margin_end: The margin for the logical end side of the element, depending on layout direction. + margin_x: The margin for the left and right sides of the element. + margin_y: The margin for the top and bottom sides of the element. + width: The width of the element. + min_width: The minimum width of the element. + max_width: The maximum width of the element. + height: The height of the element. + min_height: The minimum height of the element. + max_height: The maximum height of the element. + position: The position of the element. + top: The distance from the top of the containing element. + bottom: The distance from the bottom of the containing element. + left: The distance from the left of the containing element. + right: The distance from the right of the containing element. + start: The distance from the start of the containing element, depending on layout direction. + end: The distance from the end of the containing element, depending on layout direction. + z_index: The stack order of the element. + is_hidden: Whether the element is hidden. + id: The unique identifier of the element. + exclude_from_tab_order: Whether the element should be excluded from the tab order. + aria_active_descendant: Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. + aria_auto_complete: Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. + aria_label: The label for the element. + aria_labelled_by: The id of the element that labels the current element. + aria_described_by: The id of the element that describes the current element. + aria_details: The id of the element that provides additional information about the current element. + aria_errormessage: The id of the element that provides an error message for the current element. + UNSAFE_class_name: A CSS class to apply to the element. + UNSAFE_style: A CSS style to apply to the element. + """ + + return spectrum_element( + "TextField", + icon=icon, + is_quiet=is_quiet, + is_disabled=is_disabled, + is_read_only=is_read_only, + is_required=is_required, + description=description, + error_message=error_message, + auto_focus=auto_focus, + value=value, + default_value=default_value, + label=label, + auto_complete=auto_complete, + max_length=max_length, + min_length=min_length, + pattern=pattern, + type=type, + input_mode=input_mode, + name=name, + validation_state=validation_state, + label_position=label_position, + label_align=label_align, + necessity_indicator=necessity_indicator, + contextual_help=contextual_help, + on_focus=on_focus, + on_blur=on_blur, + on_focus_change=on_focus_change, + on_key_down=on_key_down, + on_key_up=on_key_up, + on_change=on_change, + flex=flex, + flex_grow=flex_grow, + flex_shrink=flex_shrink, + flex_basis=flex_basis, + align_self=align_self, + justify_self=justify_self, + order=order, + grid_area=grid_area, + grid_row=grid_row, + grid_row_start=grid_row_start, + grid_row_end=grid_row_end, + grid_column=grid_column, + grid_column_start=grid_column_start, + grid_column_end=grid_column_end, + margin=margin, + margin_top=margin_top, + margin_bottom=margin_bottom, + margin_start=margin_start, + margin_end=margin_end, + margin_x=margin_x, + margin_y=margin_y, + width=width, + height=height, + min_width=min_width, + min_height=min_height, + max_width=max_width, + max_height=max_height, + position=position, + top=top, + bottom=bottom, + start=start, + end=end, + left=left, + right=right, + z_index=z_index, + is_hidden=is_hidden, + id=id, + exclude_from_tab_order=exclude_from_tab_order, + aria_active_descendant=aria_active_descendant, + aria_auto_complete=aria_auto_complete, + aria_haspopup=aria_haspopup, + aria_label=aria_label, + aria_labelledby=aria_labelledby, + aria_describedby=aria_describedby, + aria_details=aria_details, + aria_errormessage=aria_errormessage, + UNSAFE_class_name=UNSAFE_class_name, + UNSAFE_style=UNSAFE_style, + ) diff --git a/plugins/ui/src/deephaven/ui/components/spectrum/validate.py b/plugins/ui/src/deephaven/ui/components/spectrum/validate.py new file mode 100644 index 000000000..222ec33c7 --- /dev/null +++ b/plugins/ui/src/deephaven/ui/components/spectrum/validate.py @@ -0,0 +1,11 @@ +from __future__ import annotations +from typing import Any, Dict, Literal, Union + +InputType = Literal["text", "serach", "url", "tel", "email", "password"] + +TextFieldType = Literal["text", "search", "url", "tel", "email", "password"] +TextFieldInputMode = Literal[ + "none", "text", "decimal", "numeric", "tel", "search", "email", "url" +] +TextFieldValidationState = Literal["valid", "invalid"] +TextFieldNecessityIndicator = Literal["icon", "label"]