feat: ui.checkbox, ui.button, ui.button_group, ui.radio, ui.radio_group, ui.icon

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

@@ -19,6 +19,8 @@
 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 .radio import radio
+from .radio_group import radio_group
 
 from . import html
 
@@ -52,6 +54,8 @@
     "number_field",
     "panel",
     "picker",
+    "radio",
+    "radio_group",
     "range_slider",
     "row",
     "section",

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

@@ -0,0 +1,14 @@
+from ..elements import BaseElement
+
+# TODO: Add pydocs #515
+def radio(*children, **props):
+    """
+    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.
+
+    Args:
+        children: The label for the Radio. Accepts any renderable node.
+        **props: Any other Radio props.
+    """
+    return BaseElement(f"deephaven.ui.components.Radio", *children, **props)

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

@@ -0,0 +1,14 @@
+from ..elements import BaseElement
+
+# TODO: Add pydocs #514
+def radio_group(*children, **props):
+    """
+    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.
+
+    Args:
+        children: The Radio(s) contained within the RadioGroup.
+        **props: Any other RadioGroup props.
+    """
+    return BaseElement(f"deephaven.ui.components.RadioGroup", *children, **props)

plugins/ui/src/js/package.json

@@ -41,7 +41,6 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "^3.34.1",
     "@deephaven/chart": "^0.81.1",
     "@deephaven/components": "^0.81.1",
     "@deephaven/dashboard": "^0.81.1",

plugins/ui/src/js/src/elements/ElementConstants.ts

@@ -31,6 +31,8 @@ export const ELEMENT_NAME = {
   listActionMenu: uiComponentName('ListActionMenu'),
   listView: uiComponentName('ListView'),
   picker: uiComponentName('Picker'),
+  radio: uiComponentName('Radio'),
+  radioGroup: uiComponentName('RadioGroup'),
   section: uiComponentName('Section'),
 } as const;
 

plugins/ui/src/js/src/elements/IconElementView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '@adobe/react-spectrum';
+import { Icon } from '@deephaven/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getIcon, IconElementNode } from './IconElementUtils';
 import { ELEMENT_KEY } from './ElementUtils';

plugins/ui/src/js/src/elements/Radio.tsx

@@ -0,0 +1,40 @@
+import {
+  Radio as DHRadio,
+  RadioProps as DHRadioProps,
+} from '@deephaven/components';
+import {
+  SerializedFocusEventProps,
+  SerializedKeyboardEventProps,
+} from './SerializedPropTypes';
+import { useFocusEventCallback } from './spectrum/useFocusEventCallback';
+import { useKeyboardEventCallback } from './spectrum/useKeyboardEventCallback';
+
+export type SerializedRadioProps = SerializedFocusEventProps<
+  SerializedKeyboardEventProps<DHRadioProps>
+>;
+
+function Radio({
+  onFocus: serializedOnFocus,
+  onBlur: serializedOnBlur,
+  onKeyDown: serializedOnKeyDown,
+  onKeyUp: serializedOnKeyUp,
+  ...props
+}: SerializedRadioProps): JSX.Element {
+  const onFocus = useFocusEventCallback(serializedOnFocus);
+  const onBlur = useFocusEventCallback(serializedOnBlur);
+  const onKeyDown = useKeyboardEventCallback(serializedOnKeyDown);
+  const onKeyUp = useKeyboardEventCallback(serializedOnKeyUp);
+
+  return (
+    <DHRadio
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+    />
+  );
+}
+
+export default Radio;

plugins/ui/src/js/src/elements/RadioGroup.tsx

@@ -0,0 +1,23 @@
+import {
+  RadioGroup as DHRadioGroup,
+  RadioGroupProps as DHRadioGroupProps,
+} from '@deephaven/components';
+import { SerializedFocusEventProps } from './SerializedPropTypes';
+import { useFocusEventCallback } from './spectrum/useFocusEventCallback';
+
+export type SerializedRadioGroupProps =
+  SerializedFocusEventProps<DHRadioGroupProps>;
+
+function RadioGroup({
+  onFocus: serializedOnFocus,
+  onBlur: serializedOnBlur,
+  ...props
+}: SerializedRadioGroupProps): JSX.Element {
+  const onFocus = useFocusEventCallback(serializedOnFocus);
+  const onBlur = useFocusEventCallback(serializedOnBlur);
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <DHRadioGroup {...props} onFocus={onFocus} onBlur={onBlur} />;
+}
+
+export default RadioGroup;

plugins/ui/src/js/src/elements/SerializedPropTypes.ts

@@ -0,0 +1,48 @@
+import { SerializedFocusEventCallback } from './spectrum/useFocusEventCallback';
+import { SerializedKeyboardEventCallback } from './spectrum/useKeyboardEventCallback';
+import { SerializedPressEventCallback } from './spectrum/usePressEventCallback';
+
+export type SerializedFocusEventProps<T> = Omit<T, 'onFocus' | 'onBlur'> & {
+  /** Handler that is called when the element receives focus. */
+  onFocus?: SerializedFocusEventCallback;
+
+  /** Handler that is called when the element loses focus. */
+  onBlur?: SerializedFocusEventCallback;
+};
+
+export type SerializedKeyboardEventProps<T> = Omit<
+  T,
+  'onKeyDown' | 'onKeyUp'
+> & {
+  /** Handler that is called when a key is pressed */
+  onKeyDown?: SerializedKeyboardEventCallback;
+
+  /** Handler that is called when a key is released */
+  onKeyUp?: SerializedKeyboardEventCallback;
+};
+
+export type SerializedPressEventProps<T> = Omit<
+  T,
+  'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressUp'
+> & {
+  /** Handler that is called when the press is released over the target. */
+  onPress?: SerializedPressEventCallback;
+
+  /** Handler that is called when a press interaction starts. */
+  onPressStart?: SerializedPressEventCallback;
+  /**
+   * Handler that is called when a press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onPressEnd?: SerializedPressEventCallback;
+
+  /**
+   * Handler that is called when a press is released over the target, regardless of
+   * whether it started on the target or not.
+   */
+  onPressUp?: SerializedPressEventCallback;
+};
+
+export type SerializedButtonEventProps<T> = SerializedFocusEventProps<
+  SerializedKeyboardEventProps<SerializedPressEventProps<T>>
+>;

plugins/ui/src/js/src/elements/SpectrumElementUtils.ts

@@ -1,8 +1,8 @@
-import { ButtonGroup, Checkbox } from '@adobe/react-spectrum';
 import { ValueOf } from '@deephaven/utils';
 import {
   ActionGroup,
   ActionMenu,
+  ButtonGroup,
   Content,
   ContextualHelp,
   Grid,
@@ -13,6 +13,8 @@ import {
   ListActionGroup,
   ListActionMenu,
   NumberField,
+  RadioGroup,
+  SpectrumCheckbox as Checkbox,
   Switch,
   Tabs,
   TabList,
@@ -53,6 +55,7 @@ export const SpectrumSupportedTypes = {
   ListActionMenu,
   NumberField,
   Item,
+  RadioGroup,
   RangeSlider,
   Slider,
   Switch,

plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx

@@ -3,10 +3,11 @@ import {
   ActionButton as DHCActionButton,
   ActionButtonProps as DHCActionButtonProps,
 } from '@deephaven/components';
-import { SerializedButtonEventProps, useButtonProps } from './useButtonProps';
+import { useButtonProps } from './useButtonProps';
+import { SerializedButtonEventProps } from '../SerializedPropTypes';
 
 function ActionButton(
-  props: DHCActionButtonProps & SerializedButtonEventProps
+  props: SerializedButtonEventProps<DHCActionButtonProps>
 ): JSX.Element {
   const buttonProps = useButtonProps(props);
 

plugins/ui/src/js/src/elements/spectrum/Button.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import {
-  Button as SpectrumButton,
-  SpectrumButtonProps,
-} from '@adobe/react-spectrum';
-import { SerializedButtonEventProps, useButtonProps } from './useButtonProps';
+import { SpectrumButton, SpectrumButtonProps } from '@deephaven/components';
+import { useButtonProps } from './useButtonProps';
+import { SerializedButtonEventProps } from '../SerializedPropTypes';
 
 function Button(
-  props: SpectrumButtonProps & SerializedButtonEventProps
+  props: SerializedButtonEventProps<SpectrumButtonProps>
 ): JSX.Element {
   const buttonProps = useButtonProps(props);
 

plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts

@@ -1,52 +1,11 @@
-import {
-  SerializedPressEventCallback,
-  usePressEventCallback,
-} from './usePressEventCallback';
-import {
-  SerializedFocusEventCallback,
-  useFocusEventCallback,
-} from './useFocusEventCallback';
-import {
-  SerializedKeyboardEventCallback,
-  useKeyboardEventCallback,
-} from './useKeyboardEventCallback';
+import { usePressEventCallback } from './usePressEventCallback';
+import { useFocusEventCallback } from './useFocusEventCallback';
+import { useKeyboardEventCallback } from './useKeyboardEventCallback';
 import { mapSpectrumProps } from './mapSpectrumProps';
-
-export type SerializedButtonEventProps = {
-  /** Handler that is called when the press is released over the target. */
-  onPress?: SerializedPressEventCallback;
-
-  /** Handler that is called when a press interaction starts. */
-  onPressStart?: SerializedPressEventCallback;
-  /**
-   * Handler that is called when a press interaction ends, either
-   * over the target or when the pointer leaves the target.
-   */
-  onPressEnd?: SerializedPressEventCallback;
-
-  /**
-   * Handler that is called when a press is released over the target, regardless of
-   * whether it started on the target or not.
-   */
-  onPressUp?: SerializedPressEventCallback;
-
-  /** Handler that is called when the element receives focus. */
-  onFocus?: SerializedFocusEventCallback;
-
-  /** Handler that is called when the element loses focus. */
-  onBlur?: SerializedFocusEventCallback;
-
-  /** Handler that is called when a key is pressed */
-  onKeyDown?: SerializedKeyboardEventCallback;
-
-  /** Handler that is called when a key is released */
-  onKeyUp?: SerializedKeyboardEventCallback;
-};
+import { SerializedButtonEventProps } from '../SerializedPropTypes';
 
 // returns SpectrumButtonProps
-export function useButtonProps<T>(
-  props: SerializedButtonEventProps & T
-): T & SerializedButtonEventProps {
+export function useButtonProps<T>(props: SerializedButtonEventProps<T>): T {
   const {
     onPress: propOnPress,
     onPressStart: propsOnPressStart,
@@ -78,5 +37,7 @@ export function useButtonProps<T>(
     onKeyDown,
     onKeyUp,
     ...mapSpectrumProps(otherProps),
-  } as T & SerializedButtonEventProps;
+  } as T;
 }
+
+export default useButtonProps;

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -34,6 +34,8 @@ import Dashboard from '../layout/Dashboard';
 import ListView from '../elements/ListView';
 import Picker from '../elements/Picker';
 import ActionGroup from '../elements/ActionGroup';
+import Radio from '../elements/Radio';
+import RadioGroup from '../elements/RadioGroup';
 
 /*
  * Map element node names to their corresponding React components
@@ -58,6 +60,8 @@ export const elementComponentMap = {
   [ELEMENT_NAME.listActionMenu]: ListActionMenu,
   [ELEMENT_NAME.listView]: ListView,
   [ELEMENT_NAME.picker]: Picker,
+  [ELEMENT_NAME.radio]: Radio,
+  [ELEMENT_NAME.radioGroup]: RadioGroup,
   [ELEMENT_NAME.section]: Section,
 } as const satisfies Record<ValueOf<ElementName>, unknown>;
 

plugins/ui/src/js/vite.config.ts

@@ -17,7 +17,6 @@ export default defineConfig(({ mode }) => ({
         'react-dom',
         'redux',
         'react-redux',
-        '@adobe/react-spectrum',
         '@deephaven/chart',
         '@deephaven/components',
         '@deephaven/dashboard',