ActionGroup wrapper (#445)

Author: bmingles

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

@@ -0,0 +1,39 @@
+import {
+  ActionGroup as DHActionGroup,
+  ActionGroupProps as DHActionGroupProps,
+} from '@deephaven/components';
+import {
+  SerializedSelectionProps,
+  useSelectionProps,
+} from './spectrum/useSelectionProps';
+
+export type SerializedActionGroupProps<T> = Omit<
+  DHActionGroupProps<T>,
+  'selectionMode' | 'onChange' | 'onSelectionChange'
+> &
+  SerializedSelectionProps;
+
+function ActionGroup<T>({
+  selectionMode: selectionModeMaybeUppercase,
+  onChange: serializedOnChange,
+  onSelectionChange: serializedOnSelectionChange,
+  ...props
+}: SerializedActionGroupProps<T>): JSX.Element {
+  const { selectionMode, onChange, onSelectionChange } = useSelectionProps({
+    selectionMode: selectionModeMaybeUppercase,
+    onChange: serializedOnChange,
+    onSelectionChange: serializedOnSelectionChange,
+  });
+
+  return (
+    <DHActionGroup
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      selectionMode={selectionMode}
+      onChange={onChange}
+      onSelectionChange={onSelectionChange}
+    />
+  );
+}
+
+export default ActionGroup;

…ts/spectrum/useSelectionEventCallback.ts …c/elements/spectrum/useSelectionProps.tsplugins/ui/src/js/src/elements/spectrum/useSelectionEventCallback.ts renamed to plugins/ui/src/js/src/elements/spectrum/useSelectionProps.ts plugins/ui/src/js/src/elements/spectrum/useSelectionEventCallback.ts renamed to plugins/ui/src/js/src/elements/spectrum/useSelectionProps.ts

@@ -1,12 +1,32 @@
-import type { ItemKey, ItemSelection } from '@deephaven/components';
 import { useCallback } from 'react';
+import type { SelectionMode } from '@react-types/shared';
+import type { ItemKey, ItemSelection } from '@deephaven/components';
 
 export type SerializedSelection = 'all' | ItemKey[];
 
 export type SerializedSelectionEventCallback = (
   event: SerializedSelection
 ) => void;
 
+export interface SerializedSelectionProps {
+  selectionMode?: SelectionMode | Uppercase<SelectionMode>;
+
+  /** Handler that is called when selection changes */
+  onChange?: SerializedSelectionEventCallback;
+
+  /**
+   * Handler that is called when the selection changes.
+   * @deprecated Use `onChange` instead
+   */
+  onSelectionChange?: SerializedSelectionEventCallback;
+}
+
+export interface SelectionProps {
+  selectionMode?: SelectionMode;
+  onChange?: (selection: ItemSelection) => void;
+  onSelectionChange?: (selection: ItemSelection) => void;
+}
+
 /**
  * Selection can be 'all' or a Set of keys. If it is a Set, serialize it as an
  * array.
@@ -40,3 +60,22 @@ export function useSelectionEventCallback(
     [callback]
   );
 }
+
+export function useSelectionProps({
+  selectionMode,
+  onChange,
+  onSelectionChange,
+}: SerializedSelectionProps): SelectionProps {
+  const selectionModeLc = selectionMode?.toLowerCase() as SelectionMode;
+
+  const serializedOnChange = useSelectionEventCallback(onChange);
+  const serializedOnSelectionChange =
+    useSelectionEventCallback(onSelectionChange);
+
+  return {
+    selectionMode: selectionModeLc,
+    onChange: onChange == null ? undefined : serializedOnChange,
+    onSelectionChange:
+      onSelectionChange == null ? undefined : serializedOnSelectionChange,
+  };
+}

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

@@ -4,9 +4,9 @@ import { ListViewProps as DHListViewProps } from '@deephaven/components';
 import { ListViewProps as DHListViewJSApiProps } from '@deephaven/jsapi-components';
 import { ObjectViewProps } from './ObjectView';
 import {
-  SerializedSelectionEventCallback,
-  useSelectionEventCallback,
-} from './spectrum/useSelectionEventCallback';
+  SerializedSelectionProps,
+  useSelectionProps,
+} from './spectrum/useSelectionProps';
 
 type Density = Required<DHListViewProps>['density'];
 
@@ -25,22 +25,11 @@ type WrappedDHListViewProps = Omit<
   selectionMode?: SelectionMode | Uppercase<SelectionMode>;
 };
 
-export interface SerializedListViewEventProps {
-  /** Handler that is called when selection changes */
-  onChange?: SerializedSelectionEventCallback;
-
-  /**
-   * Handler that is called when the selection changes.
-   * @deprecated Use `onChange` instead
-   */
-  onSelectionChange?: SerializedSelectionEventCallback;
-}
-
 export type SerializedListViewProps = (
   | WrappedDHListViewProps
   | WrappedDHListViewJSApiProps
 ) &
-  SerializedListViewEventProps;
+  SerializedSelectionProps;
 
 /**
  * Wrap ListView props with the appropriate serialized event callbacks.
@@ -49,24 +38,24 @@ export type SerializedListViewProps = (
  */
 export function useListViewProps({
   density,
-  selectionMode,
-  onChange,
-  onSelectionChange,
+  selectionMode: selectionModeMaybeUppercase,
+  onChange: serializedOnChange,
+  onSelectionChange: serializedOnSelectionChange,
   ...otherProps
 }: SerializedListViewProps): DHListViewProps | WrappedDHListViewJSApiProps {
   const densityLc = density?.toLowerCase() as Density;
-  const selectionModeLc = selectionMode?.toLowerCase() as SelectionMode;
 
-  const serializedOnChange = useSelectionEventCallback(onChange);
-  const serializedOnSelectionChange =
-    useSelectionEventCallback(onSelectionChange);
+  const { selectionMode, onChange, onSelectionChange } = useSelectionProps({
+    selectionMode: selectionModeMaybeUppercase,
+    onChange: serializedOnChange,
+    onSelectionChange: serializedOnSelectionChange,
+  });
 
   return {
     density: densityLc,
-    selectionMode: selectionModeLc,
-    onChange: onChange == null ? undefined : serializedOnChange,
-    onSelectionChange:
-      onSelectionChange == null ? undefined : serializedOnSelectionChange,
+    selectionMode,
+    onChange,
+    onSelectionChange,
     // The @deephaven/components `ListView` has its own normalization logic that
     // handles primitive children types (string, number, boolean). It also
     // handles nested children inside of `Item` and `Section` components, so

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

@@ -4,7 +4,6 @@ import React, { ComponentType } from 'react';
 // Importing `Item` and `Section` compnents directly since they should not be
 // wrapped due to how Spectrum collection components consume them.
 import {
-  ActionGroup,
   ActionMenu,
   Item,
   ListActionGroup,
@@ -34,6 +33,7 @@ import Column from '../layout/Column';
 import Dashboard from '../layout/Dashboard';
 import ListView from '../elements/ListView';
 import Picker from '../elements/Picker';
+import ActionGroup from '../elements/ActionGroup';
 
 /*
  * Map element node names to their corresponding React components