Revert "revert: Revert some changes that are not compatible with v0.78 (

deephaven#550)"

This reverts commit 27414e1.

jest.config.base.cjs

@@ -5,7 +5,7 @@ module.exports = {
     '^.+\\.(ts|tsx|js|jsx)$': ['babel-jest', { rootMode: 'upward' }],
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!(@deephaven|monaco-editor|d3-interpolate|d3-color)/)',
+    '/node_modules/(?!(@deephaven|monaco-editor|d3-interpolate|d3-color|nanoid)/)',
   ],
   moduleNameMapper: {
     'theme-([^/]+?)\\.css(\\?(?:inline|raw))?$': path.join(

plugins/ui/docs/README.md

@@ -249,6 +249,36 @@ def ui_action_menu():
 my_action_menu = ui_action_menu()
 ```
 
+## ButtonGroup
+
+ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
+
+```python
+@ui.component
+def ui_button_group():
+    return ui.button_group(ui.button("One"), ui.button("Two"))
+
+
+my_button_group = ui_button_group()
+```
+
+## RadioGroup
+
+Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
+
+```python
+@ui.component
+def ui_radio_group():
+    return ui.radio_group(
+        ui.radio("One", value="one"),
+        ui.radio("Two", value="two"),
+        label="Radio Group",
+    )
+
+
+my_radio_group = ui_radio_group()
+```
+
 ## Picker (string values)
 
 The `ui.picker` component can be used to select from a list of items. Here's a basic example for selecting from a list of string values and displaying the selected key in a text field.

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -1,24 +1,52 @@
+from .action_button import action_button
 from .action_group import action_group
 from .action_menu import action_menu
+from .basic import (
+    component_element,
+    grid,
+    heading,
+    icon_wrapper,
+    illustrated_message,
+    form,
+    switch,
+    tabs,
+    tab_list,
+    tab_panels,
+    text,
+    view,
+)
+from .button import button
+from .button_group import button_group
+from .checkbox import checkbox
+from .column import column
+from .combo_box import combo_box
+from .content import content
+from .contextual_help import contextual_help
+from .dashboard import dashboard
+from .date_picker import date_picker
+from .flex import flex
+from .fragment import fragment
 from .icon import icon
+from .item import item
+from .item_table_source import item_table_source
+from .list_action_group import list_action_group
+from .list_action_menu import list_action_menu
+from .list_view import list_view
 from .make_component import make_component as component
-from .fragment import fragment
+from .number_field import number_field
 from .panel import panel
-from .spectrum import *
-from .table import table
-from .dashboard import dashboard
-from .row import row
-from .column import column
-from .stack import stack
 from .picker import picker
-from .action_group import action_group
+from .radio import radio
+from .radio_group import radio_group
+from .range_slider import range_slider
+from .row import row
 from .section import section
-from .action_menu import action_menu
-from .item import item
-from .list_view import list_view
-from .list_action_group import list_action_group
-from .list_action_menu import list_action_menu
-from .item_table_source import item_table_source
+from .slider import slider
+from .stack import stack
+from .table import table
+from .text_field import text_field
+from .toggle_button import toggle_button
+from .types import *
 
 from . import html
 
@@ -27,14 +55,17 @@
     "action_button",
     "action_group",
     "action_menu",
+    "component_element",
     "button",
     "button_group",
     "checkbox",
     "column",
+    "combo_box",
     "component",
     "content",
     "contextual_help",
     "dashboard",
+    "date_picker",
     "flex",
     "form",
     "fragment",
@@ -52,11 +83,12 @@
     "number_field",
     "panel",
     "picker",
+    "radio",
+    "radio_group",
     "range_slider",
     "row",
     "section",
     "slider",
-    "spectrum_element",
     "stack",
     "switch",
     "table",

plugins/ui/src/deephaven/ui/components/spectrum/action_button.py → plugins/ui/src/deephaven/ui/components/action_button.py

@@ -1,14 +1,17 @@
 from __future__ import annotations
 from typing import Any, Callable
-from .accessibility import AriaExpanded, AriaHasPopup, AriaPressed
-from .events import (
+from .types import (
+    # Accessibility
+    AriaExpanded,
+    AriaHasPopup,
+    AriaPressed,
+    # Events
     ButtonType,
     FocusEventCallable,
     KeyboardEventCallable,
     PressEventCallable,
     StaticColor,
-)
-from .layout import (
+    # Layout
     AlignSelf,
     CSSProperties,
     DimensionValue,
@@ -17,8 +20,9 @@
     Number,
     Position,
 )
-from .basic import spectrum_element
-from ...elements import Element
+
+from .basic import component_element
+from ..elements import Element
 
 ActionButtonElement = Element
 
@@ -159,7 +163,7 @@ def action_button(
         UNSAFE_class_name: A CSS class to apply to the element.
         UNSAFE_style: A CSS style to apply to the element.
     """
-    return spectrum_element(
+    return component_element(
         "ActionButton",
         *children,
         type=type,

plugins/ui/src/deephaven/ui/components/action_group.py

@@ -3,14 +3,12 @@
 from typing import Any, Callable, Iterable
 
 
-from ..components.spectrum.events import (
+from .types import (
+    # Events
     ButtonLabelBehavior,
     Orientation,
     StaticColor,
-)
-from ..elements import Element, BaseElement
-from ..types import ActionGroupDensity, SelectedKeys, SelectionMode, Key, Selection
-from .spectrum.layout import (
+    # Layout
     AlignSelf,
     CSSProperties,
     DimensionValue,
@@ -19,6 +17,9 @@
     OverflowMode,
     Position,
 )
+from .basic import component_element
+from ..elements import Element
+from ..types import ActionGroupDensity, SelectedKeys, SelectionMode, Key, Selection
 
 
 def action_group(
@@ -153,8 +154,8 @@ def action_group(
         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 BaseElement(
-        "deephaven.ui.components.ActionGroup",
+    return component_element(
+        "ActionGroup",
         *children,
         is_emphasized=is_emphasized,
         density=density,

plugins/ui/src/deephaven/ui/components/action_menu.py

@@ -5,11 +5,20 @@
 from .item import Item
 from .section import SectionElement
 
-from .spectrum.events import TriggerType
 from ..types import Key, ActionKey, ActionMenuDirection
-from ..elements import BaseElement, Element
+from .basic import component_element
+from ..elements import Element
 
-from .spectrum import (
+from ..types import (
+    Key,
+    ActionKey,
+    ActionMenuDirection,
+)
+
+from .types import (
+    # Events
+    TriggerType,
+    # Layout
     Alignment,
     AlignSelf,
     CSSProperties,
@@ -141,8 +150,8 @@ def action_menu(
         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 BaseElement(
-        f"deephaven.ui.components.ActionMenu",
+    return component_element(
+        f"ActionMenu",
         *children,
         is_disabled=is_disabled,
         is_quiet=is_quiet,

plugins/ui/src/deephaven/ui/components/spectrum/basic.py → plugins/ui/src/deephaven/ui/components/basic.py

@@ -1,30 +1,31 @@
 from __future__ import annotations
 from typing import Any
-from ...elements import BaseElement
+from ..elements import BaseElement
 
 
-def spectrum_element(name: str, /, *children: Any, **props: Any) -> BaseElement:
+def component_element(name: str, /, *children: Any, **props: Any) -> BaseElement:
     """
-    Base class for UI elements that are part of the Spectrum design system.
-    All names are automatically prefixed with "deephaven.ui.spectrum.", and all props are automatically camelCased.
+    Base class for UI elements.
+    All names are automatically prefixed with "deephaven.ui.components.", and
+    all props are automatically camelCased.
     """
-    return BaseElement(f"deephaven.ui.spectrum.{name}", *children, **props)
+    return BaseElement(f"deephaven.ui.components.{name}", *children, **props)
 
 
 def grid(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Grid component.
     https://react-spectrum.adobe.com/react-spectrum/Grid.html
     """
-    return spectrum_element("Grid", *children, **props)
+    return component_element("Grid", *children, **props)
 
 
 def heading(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Heading component.
     https://react-spectrum.adobe.com/react-spectrum/Heading.html
     """
-    return spectrum_element("Heading", *children, **props)
+    return component_element("Heading", *children, **props)
 
 
 def icon_wrapper(*children, **props):
@@ -33,69 +34,70 @@ def icon_wrapper(*children, **props):
     Named icon_wrapper so as not to conflict with the Deephaven icon component.
     TODO: This doesn't seem to work correctly. It throws an error saying `Cannot read properties of undefined (reading 'className')`.
     https://react-spectrum.adobe.com/react-spectrum/Icon.html
+    https://github.com/deephaven/deephaven-plugins/issues/526
     """
-    return spectrum_element("Icon", *children, **props)
+    return component_element("Icon", *children, **props)
 
 
 def illustrated_message(*children, **props):
     """
     Python implementation for the Adobe React Spectrum IllustratedMessage component.
     https://react-spectrum.adobe.com/react-spectrum/IllustratedMessage.html
     """
-    return spectrum_element("IllustratedMessage", *children, **props)
+    return component_element("IllustratedMessage", *children, **props)
 
 
 def form(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Form component.
     https://react-spectrum.adobe.com/react-spectrum/Form.html
     """
-    return spectrum_element("Form", *children, **props)
+    return component_element("Form", *children, **props)
 
 
 def switch(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Switch component.
     https://react-spectrum.adobe.com/react-spectrum/Switch.html
     """
-    return spectrum_element("Switch", *children, **props)
+    return component_element("Switch", *children, **props)
 
 
 def tabs(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Tabs component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("Tabs", *children, **props)
+    return component_element("Tabs", *children, **props)
 
 
 def tab_list(*children, **props):
     """
     Python implementation for the Adobe React Spectrum TabList component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("TabList", *children, **props)
+    return component_element("TabList", *children, **props)
 
 
 def tab_panels(*children, **props):
     """
     Python implementation for the Adobe React Spectrum TabPanels component.
     https://react-spectrum.adobe.com/react-spectrum/Tabs.html
     """
-    return spectrum_element("TabPanels", *children, **props)
+    return component_element("TabPanels", *children, **props)
 
 
 def text(*children, **props):
     """
     Python implementation for the Adobe React Spectrum Text component.
     https://react-spectrum.adobe.com/react-spectrum/Text.html
     """
-    return spectrum_element("Text", *children, **props)
+    return component_element("Text", *children, **props)
 
 
 def view(*children, **props):
     """
     Python implementation for the Adobe React Spectrum View component.
     https://react-spectrum.adobe.com/react-spectrum/View.html
     """
-    return spectrum_element("View", *children, **props)
+    return component_element("View", *children, **props)