List action support in ListViewNormalized (#1913)

bmingles · bmingles · commit 709d10d18b6b · 2024-05-01T14:19:31.000-05:00
diff --git a/packages/code-studio/src/styleguide/ListViews.tsx b/packages/code-studio/src/styleguide/ListViews.tsx
@@ -15,8 +15,9 @@ import {
   RadioGroup,
   RadioItem,
   useSpectrumThemeProvider,
+  ListActionGroup,
 } from '@deephaven/components';
-import { vsAccount, vsPerson } from '@deephaven/icons';
+import { vsAccount, vsEdit, vsPerson, vsTrash } from '@deephaven/icons';
 import { LIST_VIEW_ROW_HEIGHTS } from '@deephaven/utils';
 import { generateNormalizedItems, sampleSectionIdAndClasses } from './utils';
 
@@ -90,6 +91,13 @@ export function ListViews(): JSX.Element {
   );
 
   const [showIcons, setShowIcons] = useState(true);
+  const [lastActionKey, setLastActionKey] = useState<ItemKey>('');
+  const [lastActionItemKey, setLastActionItemKey] = useState<ItemKey>('');
+
+  const onAction = useCallback((actionKey: ItemKey, itemKey: ItemKey): void => {
+    setLastActionKey(actionKey);
+    setLastActionItemKey(itemKey);
+  }, []);
 
   const onChange = useCallback((keys: 'all' | Iterable<ItemKey>): void => {
     setSelectedKeys(keys);
@@ -211,7 +219,7 @@ export function ListViews(): JSX.Element {
           </Checkbox>
         </Flex>
 
-        <LabeledFlexContainer label="Controlled">
+        <LabeledFlexContainer label="Controlled" gridColumn="span 2">
           <ListViewNormalized
             aria-label="Controlled"
             density={density}
@@ -220,7 +228,29 @@ export function ListViews(): JSX.Element {
             selectedKeys={selectedKeys}
             showItemIcons={showIcons}
             onChange={onChange}
+            actions={
+              <ListActionGroup
+                overflowMode="collapse"
+                buttonLabelBehavior="collapse"
+                maxWidth={80}
+                onAction={onAction}
+              >
+                <Item key="Edit">
+                  <Icon>
+                    <FontAwesomeIcon icon={vsEdit} />
+                  </Icon>
+                  <Text>Edit</Text>
+                </Item>
+                <Item key="Delete">
+                  <Icon>
+                    <FontAwesomeIcon icon={vsTrash} />
+                  </Icon>
+                  <Text>Delete</Text>
+                </Item>
+              </ListActionGroup>
+            }
           />
+          {lastActionKey} {lastActionItemKey}
         </LabeledFlexContainer>
       </Grid>
     </div>
diff --git a/packages/components/src/spectrum/ListActionGroup.tsx b/packages/components/src/spectrum/ListActionGroup.tsx
@@ -1,8 +1,11 @@
-import { ActionGroupProps } from '../ActionGroup';
-import { ItemKey, ItemSelection } from '../utils';
+import { ActionGroupProps } from './ActionGroup';
+import { ItemKey, ItemSelection } from './utils';
 
 export interface ListActionGroupProps<T>
-  extends Omit<ActionGroupProps<T>, 'onAction' | 'onChange'> {
+  extends Omit<
+    ActionGroupProps<T>,
+    'onAction' | 'onChange' | 'onSelectionChange'
+  > {
   /**
    * Handler that is called when an item is pressed.
    */
diff --git a/packages/components/src/spectrum/index.ts b/packages/components/src/spectrum/index.ts
@@ -18,6 +18,7 @@ export * from './status';
  * Custom DH components wrapping React Spectrum components.
  */
 export * from './ActionGroup';
+export * from './ListActionGroup';
 export * from './listView';
 export * from './picker';
 export * from './Heading';
diff --git a/packages/components/src/spectrum/listView/ListViewNormalized.tsx b/packages/components/src/spectrum/listView/ListViewNormalized.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import cl from 'classnames';
 import {
+  ListActions,
   NormalizedItem,
   normalizeTooltipOptions,
   useRenderNormalizedItem,
@@ -13,6 +14,7 @@ export interface ListViewNormalizedProps
   extends Omit<ListViewProps, 'children'> {
   normalizedItems: NormalizedItem[];
   showItemIcons: boolean;
+  actions?: ListActions<unknown>;
 }
 
 /**
@@ -34,6 +36,7 @@ export function ListViewNormalized({
   defaultSelectedKeys,
   disabledKeys,
   showItemIcons,
+  actions,
   UNSAFE_className,
   onChange,
   onSelectionChange,
@@ -53,6 +56,7 @@ export function ListViewNormalized({
     showItemDescriptions: false,
     showItemIcons,
     tooltipOptions,
+    actions,
   });
 
   // Spectrum doesn't re-render if only the `renderNormalizedItems` function
diff --git a/packages/components/src/spectrum/listView/ListViewWrapper.scss b/packages/components/src/spectrum/listView/ListViewWrapper.scss
@@ -28,21 +28,21 @@
 }
 
 .dh-list-view-wrapper-density-compact {
-  svg[class*='react-spectrum-ListViewItem-thumbnail'] {
+  svg[class*='spectrum-Icon'] {
     height: var(--dh-list-view-item-icon-compact);
     width: var(--dh-list-view-item-icon-compact);
   }
 }
 
 .dh-list-view-wrapper-density-regular {
-  svg[class*='react-spectrum-ListViewItem-thumbnail'] {
+  svg[class*='spectrum-Icon'] {
     height: var(--dh-list-view-item-icon-regular);
     width: var(--dh-list-view-item-icon-regular);
   }
 }
 
 .dh-list-view-wrapper-density-spacious {
-  svg[class*='react-spectrum-ListViewItem-thumbnail'] {
+  svg[class*='spectrum-Icon'] {
     height: var(--dh-list-view-item-icon-spacious);
     width: var(--dh-list-view-item-icon-spacious);
   }
diff --git a/packages/components/src/spectrum/shared.ts b/packages/components/src/spectrum/shared.ts
@@ -37,28 +37,6 @@ export type ItemsOrPrimitiveChildren<T> =
   | ItemElementOrPrimitive<T>[]
   | ItemRenderer<T>;
 
-// export type AugmentItemChildrenWithPrimitives<
-//   T,
-//   U extends T extends {
-//     children: ItemsChildren<infer A>;
-//   }
-//     ? A
-//     : never = T extends {
-//     children: ItemsChildren<infer A>;
-//   }
-//     ? A
-//     : never,
-// > = Omit<T, 'children'> & {
-//   children: ItemsOrPrimitiveChildren<U>;
-// };
-
-// /**
-//  * Spectrum SectionProps augmented with support for primitive item children.
-//  */
-// export type SectionProps<T> = AugmentItemChildrenWithPrimitives<
-//   SpectrumSectionProps<T>
-// >;
-
 /**
  * Spectrum SectionProps augmented with support for primitive item children.
  */
diff --git a/packages/components/src/spectrum/utils/itemUtils.test.tsx b/packages/components/src/spectrum/utils/itemUtils.test.tsx
@@ -9,14 +9,13 @@ import {
   NormalizedItem,
   NormalizedSection,
   normalizeTooltipOptions,
-  ItemElementOrPrimitive,
   ItemOrSection,
   SectionElement,
   itemSelectionToStringSet,
   getPositionOfSelectedItemElement,
   isItemElementWithDescription,
 } from './itemUtils';
-import { Item, Section } from '../shared';
+import { Item, ItemElementOrPrimitive, Section } from '../shared';
 import { Text } from '../Text';
 import ItemContent from '../ItemContent';
 
@@ -29,9 +28,7 @@ describe('getItemKey', () => {
     [{ key: 'top-level.key', item: { key: 'item.key' } }, 'item.key'],
     [{ key: 'top-level.key', item: {} }, 'top-level.key'],
     [{ key: 'top-level.key' }, 'top-level.key'],
-    [{ item: { key: 'item.key' } }, 'item.key'],
-    [{}, undefined],
-  ] as NormalizedItem[])(
+  ] as [NormalizedItem, string][])(
     'should return the item.key or fallback to the top-level key: %s, %s',
     (given, expected) => {
       const actual = getItemKey(given);
@@ -224,8 +221,8 @@ describe('isItemOrSection', () => {
 
 describe('isNormalizedSection', () => {
   it.each([
-    [{ item: {} } as NormalizedItem, false],
-    [{ item: { items: [] } } as NormalizedSection, true],
+    [{ key: 'mock.key', item: {} } as NormalizedItem, false],
+    [{ key: 'mock.key', item: { items: [] } } as NormalizedSection, true],
   ])('should return true for a normalized section: %s', (obj, expected) => {
     expect(isNormalizedSection(obj)).toBe(expected);
   });
diff --git a/packages/components/src/spectrum/utils/itemUtils.ts b/packages/components/src/spectrum/utils/itemUtils.ts
@@ -101,12 +101,9 @@ export interface NormalizedSectionData {
  * `KeyedItem` interface to be compatible with Windowed data utils
  * (e.g. `useViewportData`).
  */
-export type NormalizedItem = KeyedItem<NormalizedItemData, ItemKey | undefined>;
+export type NormalizedItem = KeyedItem<NormalizedItemData, ItemKey>;
 
-export type NormalizedSection = KeyedItem<
-  NormalizedSectionData,
-  Key | undefined
->;
+export type NormalizedSection = KeyedItem<NormalizedSectionData, Key>;
 
 export type NormalizedItemOrSection<TItemOrSection extends ItemOrSection> =
   TItemOrSection extends SectionElement ? NormalizedSection : NormalizedItem;
@@ -127,9 +124,9 @@ export type TooltipOptions = { placement: PopperOptions['placement'] };
 export function getItemKey<
   TItem extends NormalizedItem | NormalizedSection,
   TKey extends TItem extends NormalizedItem
-    ? ItemKey | undefined
+    ? ItemKey
     : TItem extends NormalizedSection
-    ? Key | undefined
+    ? Key
     : undefined,
 >(item: TItem | null | undefined): TKey {
   return (item?.item?.key ?? item?.key) as TKey;
diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx
@@ -1,5 +1,7 @@
-import { Key, useCallback } from 'react';
+import { Key, ReactElement, useCallback } from 'react';
+import ActionGroup from '../ActionGroup';
 import { ItemContent } from '../ItemContent';
+import { ListActionGroupProps } from '../ListActionGroup';
 import { Item } from '../shared';
 import {
   getItemKey,
@@ -10,11 +12,14 @@ import {
 } from './itemUtils';
 import { wrapIcon, wrapPrimitiveWithText } from './itemWrapperUtils';
 
+export type ListActions<T> = ReactElement<ListActionGroupProps<T>>;
+
 export interface UseRenderNormalizedItemOptions {
   itemIconSlot: ItemIconSlot;
   showItemDescriptions: boolean;
   showItemIcons: boolean;
   tooltipOptions: TooltipOptions | null;
+  actions?: ListActions<unknown>;
 }
 
 /**
@@ -24,19 +29,21 @@ export interface UseRenderNormalizedItemOptions {
  * @param showItemDescriptions Whether to show item descriptions
  * @param showItemIcons Whether to show item icons
  * @param tooltipOptions Tooltip options to use when rendering the item
+ * @param actions Optional actions to render with the item
  * @returns Render function for normalized items
  */
 export function useRenderNormalizedItem({
   itemIconSlot,
   showItemDescriptions,
   showItemIcons,
   tooltipOptions,
+  actions,
 }: UseRenderNormalizedItemOptions): (
   normalizedItem: NormalizedItem
 ) => JSX.Element {
   return useCallback(
     (normalizedItem: NormalizedItem) => {
-      const key = getItemKey(normalizedItem);
+      const itemKey = getItemKey(normalizedItem);
       const content = wrapPrimitiveWithText(normalizedItem.item?.content);
       const textValue = normalizedItem.item?.textValue ?? '';
 
@@ -57,7 +64,7 @@ export function useRenderNormalizedItem({
           // key. We can't really get around setting in order to support Windowed
           // data, so we'll need to do some manual conversion of keys to strings
           // in other components that use this hook.
-          key={key as Key}
+          key={itemKey as Key}
           // The `textValue` prop gets used to provide the content of `<option>`
           // elements that back the Spectrum Picker. These are not visible in the UI,
           // but are used for accessibility purposes, so we set to an arbitrary
@@ -70,11 +77,19 @@ export function useRenderNormalizedItem({
             {icon}
             {content}
             {description}
+            {actions?.props == null ? null : (
+              <ActionGroup
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...actions.props}
+                onAction={key => actions.props.onAction(key, itemKey)}
+                onChange={keys => actions.props.onChange?.(keys, itemKey)}
+              />
+            )}
           </ItemContent>
         </Item>
       );
     },
-    [itemIconSlot, showItemDescriptions, showItemIcons, tooltipOptions]
+    [actions, itemIconSlot, showItemDescriptions, showItemIcons, tooltipOptions]
   );
 }
 

Original file line number	Diff line number	Diff line change
`@@ -28,21 +28,21 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.dh-list-view-wrapper-density-compact {`
`31`		`- svg[class*='react-spectrum-ListViewItem-thumbnail'] {`
	`31`	`+ svg[class*='spectrum-Icon'] {`
`32`	`32`	`height: var(--dh-list-view-item-icon-compact);`
`33`	`33`	`width: var(--dh-list-view-item-icon-compact);`
`34`	`34`	`}`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`.dh-list-view-wrapper-density-regular {`
`38`		`- svg[class*='react-spectrum-ListViewItem-thumbnail'] {`
	`38`	`+ svg[class*='spectrum-Icon'] {`
`39`	`39`	`height: var(--dh-list-view-item-icon-regular);`
`40`	`40`	`width: var(--dh-list-view-item-icon-regular);`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.dh-list-view-wrapper-density-spacious {`
`45`		`- svg[class*='react-spectrum-ListViewItem-thumbnail'] {`
	`45`	`+ svg[class*='spectrum-Icon'] {`
`46`	`46`	`height: var(--dh-list-view-item-icon-spacious);`
`47`	`47`	`width: var(--dh-list-view-item-icon-spacious);`
`48`	`48`	`}`