TreeItem: Support Cmd + Enter callback prop (#1556)

* Added onMetaEnter prop to TreeItem to catch CMD + Enter key

* Added docs for onMetaEnterKeyDown

* Added proper prop name

* Change prop name from onMetaEnterKeyDown to onMetaEnter

* Modified handleKeyDown to trigger onClick on Cmd + Enter when onMetaEnter is NOT provided

* Removed fallback behavior of cmd+enter to onClick and updated event.keyCode usages to event.key

* Combined enter and cmd+enter checks in handleKeyDown

* Replaced passed-in handler undefined checks with noop default value assign

* Added better explanation of onMetaEnter on tree docs

Author: Elliot

packages/components/src/Tree/TreeItem.tsx

@@ -44,6 +44,7 @@ import {
   uiTransparencyBlend,
 } from '@looker/design-tokens'
 import Omit from 'lodash/omit'
+import noop from 'lodash/noop'
 import { Space, FlexItem } from '../Layout'
 import { Icon, IconNames } from '../Icon'
 import { useHovered } from '../utils/useHovered'
@@ -89,6 +90,11 @@ export interface TreeItemProps
    * onClick callback
    */
   onClick?: () => void
+  /**
+   * Callback that is triggered on CMD + Enter on Mac
+   * or Windows key + Enter on PC
+   */
+  onMetaEnter?: () => void
   /**
    * Determines if this TreeItem is in a selected state or not
    */
@@ -103,6 +109,7 @@ const TreeItemLayout: FC<TreeItemProps> = ({
   children,
   className,
   gapSize = 'xsmall',
+  onMetaEnter = noop,
   selected,
   truncate,
   ...props
@@ -113,7 +120,13 @@ const TreeItemLayout: FC<TreeItemProps> = ({
   const [isHovered] = useHovered(itemRef)
   const [isFocusVisible, setFocusVisible] = useState(false)
 
-  const { onBlur, onClick, onKeyDown, onKeyUp, ...restProps } = Omit(props, [
+  const {
+    onBlur = noop,
+    onClick = noop,
+    onKeyDown = noop,
+    onKeyUp = noop,
+    ...restProps
+  } = Omit(props, [
     'color',
     'detail',
     'detailAccessory',
@@ -142,14 +155,14 @@ const TreeItemLayout: FC<TreeItemProps> = ({
     }
 
     setFocusVisible(false)
-    onClick && onClick()
+    onClick()
   }
 
   const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.keyCode === 9 && event.currentTarget === event.target)
+    if (event.key === 'Tab' && event.currentTarget === event.target)
       setFocusVisible(true)
 
-    onKeyUp && onKeyUp(event)
+    onKeyUp(event)
   }
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
@@ -162,16 +175,16 @@ const TreeItemLayout: FC<TreeItemProps> = ({
       return
     }
 
-    if (event.keyCode === 13 && event.target === event.currentTarget) {
-      onClick && onClick()
+    if (event.key === 'Enter') {
+      event.metaKey ? onMetaEnter() : onClick()
     }
 
-    onKeyDown && onKeyDown(event)
+    onKeyDown(event)
   }
 
   const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
     setFocusVisible(false)
-    onBlur && onBlur(event)
+    onBlur(event)
   }
 
   const defaultIconSize = 12
@@ -185,6 +198,7 @@ const TreeItemLayout: FC<TreeItemProps> = ({
   )
 
   const TextWrapper = truncate ? Truncate : Fragment
+  const isTreeItemTabbable = onClick || onMetaEnter ? 0 : -1
 
   return (
     <HoverDisclosureContext.Provider value={{ visible: isHovered }}>
@@ -197,7 +211,7 @@ const TreeItemLayout: FC<TreeItemProps> = ({
         onKeyDown={handleKeyDown}
         onKeyUp={handleKeyUp}
         ref={itemRef}
-        tabIndex={onClick ? 0 : -1}
+        tabIndex={isTreeItemTabbable}
         {...restProps}
       >
         <TreeItemLabel gap={gapSize} hovered={isHovered} selected={selected}>

packages/components/src/Tree/stories/FieldPicker.story.tsx

@@ -114,6 +114,7 @@ const PickerItem = ({ children = 'Cost', truncate = false }) => {
           }
           detailHoverDisclosure={!overlay}
           onClick={() => alert('Clicked on cost!')}
+          onMetaEnter={() => alert("Cmd + Enter'ed on cost!")}
           selected={!!overlay}
           icon="FieldNumber"
         >

www/src/documentation/components/content/tree.mdx

@@ -181,12 +181,17 @@ Use the `gapSize` prop to control the distance between elements in your `TreeIte
 
 Use the `selected` prop to display a light grey background on a given `TreeItem`.
 
+Use the `onClick` prop to trigger a callback on click or when pressing the "Enter" key on a focused `TreeItem`.
+
+Use the `onMetaEnter` prop to trigger a callback when pressing the "Enter" key in combination with the meta key (i.e. "Command" or "Windows" key) on a focused `TreeItem`.
+
 ```jsx
 <Tree label="Cheeses" defaultOpen>
   <TreeItem
     icon="LogoRings"
     detail={<Text variant="text2">is great</Text>}
     onClick={() => alert('Clicked Swiss')}
+    onMetaEnter={() => alert('Clicked Swiss while holding meta key')}
     selected
   >
     Swiss