Add long-press / shift-click item popup to item picker

docs/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Next
 
+* In the item picker, you can long-press or shift-click an item to see its item details. A regular click still pulls that item.
 * `breaker:` searches now match items that can have that breaker type granted by this season's artifact (whether or not the correct artifact mods are enabled). The effective breaker type from artifact mods also now shows up on item tiles and in the Armory.
 
 ## 8.35.1 <span class="changelog-date">(2024-09-01)</span>

package.json

@@ -228,6 +228,7 @@
     "memoize-one": "^6.0.0",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",
+    "react-aria": "^3.34.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",

src/app/inventory/ItemPopupTrigger.tsx

@@ -12,17 +12,6 @@ import {
 import { clearNewItem } from './actions';
 import { DimItem } from './item-types';
 
-interface Props {
-  item: DimItem;
-  extraData?: ItemPopupExtraInfo;
-  /** Don't allow adding to compare */
-  noCompare?: boolean;
-  children: (
-    ref: React.Ref<HTMLDivElement>,
-    onClick: (e: React.MouseEvent) => void,
-  ) => React.ReactNode;
-}
-
 /**
  * This provides a ref and onclick function for a component that will show the move popup for the provided item.
  */
@@ -31,7 +20,16 @@ export default function ItemPopupTrigger({
   extraData,
   children,
   noCompare,
-}: Props): JSX.Element {
+}: {
+  item: DimItem;
+  extraData?: ItemPopupExtraInfo;
+  /** Don't allow adding to compare */
+  noCompare?: boolean;
+  children: (
+    ref: React.Ref<HTMLDivElement>,
+    onClick: (e: React.MouseEvent) => void,
+  ) => React.ReactNode;
+}): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const dispatch = useThunkDispatch();
 

src/app/item-picker/ItemPicker.scss → src/app/item-picker/ItemPicker.m.scss

@@ -2,21 +2,17 @@
 
 // These classes are used in item-picker, mod-picker, exotic-picker and search results
 
-.item-picker {
-  .item {
-    cursor: pointer;
-  }
-}
-
-.item-picker-grid {
+.grid {
+  composes: sub-bucket from global;
   margin: 10px;
 }
 
-.item-picker-item {
+.itemPickerItem {
+  composes: resetButton from '../dim-ui/common.m.scss';
   position: relative;
 }
 
-.item-picker-item-class-icon {
+.classIcon {
   box-sizing: border-box;
   width: calc(var(--item-size) / 4) !important;
   height: calc(var(--item-size) / 4) !important;

src/app/item-picker/ItemPicker.tsx

@@ -1,19 +1,20 @@
 import ClassIcon from 'app/dim-ui/ClassIcon';
 import { t } from 'app/i18next-t';
+import { hideItemPopup, showItemPopup, showItemPopup$ } from 'app/item-popup/item-popup';
 import SearchBar from 'app/search/SearchBar';
 import { filterFactorySelector } from 'app/search/items/item-search-filter';
 import { uniqBy } from 'app/utils/collections';
-import clsx from 'clsx';
 import { BucketHashes } from 'data/d2/generated-enums';
 import _ from 'lodash';
-import { useCallback, useDeferredValue, useMemo, useState } from 'react';
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
+import { mergeProps, useKeyboard, useLongPress, usePress } from 'react-aria';
 import { useSelector } from 'react-redux';
 import Sheet from '../dim-ui/Sheet';
 import ConnectedInventoryItem from '../inventory/ConnectedInventoryItem';
 import { DimItem } from '../inventory/item-types';
 import { allItemsSelector } from '../inventory/selectors';
 import { itemSorterSelector } from '../settings/item-sort';
-import './ItemPicker.scss';
+import styles from './ItemPicker.m.scss';
 import { ItemPickerState } from './item-picker';
 
 export default function ItemPicker({
@@ -79,11 +80,11 @@ export default function ItemPicker({
     <Sheet
       onClose={onSheetClosedFn}
       header={header}
-      sheetClassName="item-picker"
       freezeInitialHeight={true}
+      allowClickThrough={true}
     >
       {({ onClose }) => (
-        <div className={clsx('sub-bucket', 'item-picker-grid')}>
+        <div className={styles.grid}>
           {items.map((item) => (
             <ItemPickerItem
               key={item.index}
@@ -107,23 +108,59 @@ function ItemPickerItem({
   onClose: () => void;
   onItemSelectedFn: (item: DimItem, onClose: () => void) => void;
 }) {
-  const handleClick = useCallback(
-    () => onItemSelectedFn(item, onClose),
-    [item, onClose, onItemSelectedFn],
+  const ref = useRef<HTMLButtonElement>(null);
+  const { longPressProps } = useLongPress({
+    onLongPress: () => {
+      showItemPopup(item, ref.current!);
+    },
+  });
+  const { pressProps } = usePress({
+    onPress: (e) => {
+      if (e.shiftKey) {
+        showItemPopup(item, ref.current!);
+      } else if (showItemPopup$.getCurrentValue()?.item) {
+        hideItemPopup();
+      } else {
+        onItemSelectedFn(item, onClose);
+      }
+    },
+  });
+
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      if (e.key === 'i') {
+        showItemPopup(item, ref.current!);
+      }
+    },
+  });
+
+  // Close the popup if this component is unmounted
+  useEffect(
+    () => () => {
+      if (showItemPopup$.getCurrentValue()?.item?.index === item.index) {
+        hideItemPopup();
+      }
+    },
+    [item.index],
   );
 
   return (
-    <div className="item-picker-item">
+    <button
+      type="button"
+      ref={ref}
+      className={styles.itemPickerItem}
+      aria-keyshortcuts="i"
+      {...mergeProps(pressProps, longPressProps, keyboardProps)}
+    >
       <ConnectedInventoryItem
         item={item}
-        onClick={handleClick}
         // don't show the selected Super ability on subclasses in the item picker because the active Super
         // ability is never relevant in the context that item picker is used
         hideSelectedSuper
       />
       {item.bucket.hash === BucketHashes.Subclass && (
-        <ClassIcon classType={item.classType} className="item-picker-item-class-icon" />
+        <ClassIcon classType={item.classType} className={styles.classIcon} />
       )}
-    </div>
+    </button>
   );
 }

src/app/item-popup/SocketDetails.tsx

@@ -284,14 +284,12 @@ export default function SocketDetails({
         {requiresEnergy && <EnergyCostIcon className={styles.energyElement} />}
         <div>{socketCategory.displayProperties.name}</div>
       </h1>
-      <div className="item-picker-search">
-        <SearchInput
-          query={query}
-          onQueryChanged={setQuery}
-          placeholder={t('Sockets.Search')}
-          autoFocus
-        />
-      </div>
+      <SearchInput
+        query={query}
+        onQueryChanged={setQuery}
+        placeholder={t('Sockets.Search')}
+        autoFocus
+      />
     </div>
   );
 

src/app/loadout-builder/filter/ExoticPicker.tsx

@@ -177,14 +177,12 @@ export default function ExoticPicker({
       header={
         <div>
           <h1>{t('LB.ChooseAnExotic')}</h1>
-          <div className="item-picker-search">
-            <SearchInput
-              query={query}
-              onQueryChanged={setQuery}
-              placeholder={t('LB.SearchAnExotic')}
-              autoFocus
-            />
-          </div>
+          <SearchInput
+            query={query}
+            onQueryChanged={setQuery}
+            placeholder={t('LB.SearchAnExotic')}
+            autoFocus
+          />
         </div>
       }
       onClose={onClose}

src/app/loadout/plug-drawer/PlugDrawer.tsx

@@ -11,7 +11,6 @@ import { produce } from 'immer';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import Sheet from '../../dim-ui/Sheet';
-import '../../item-picker/ItemPicker.scss';
 import Footer from './Footer';
 import PlugSection from './PlugSection';
 import { PlugSelectionType, PlugSet } from './types';
@@ -206,25 +205,17 @@ export default function PlugDrawer({
   const header = (
     <div>
       <h1>{title}</h1>
-      <div className="item-picker-search">
-        <SearchInput
-          query={query}
-          onQueryChanged={setQuery}
-          placeholder={searchPlaceholder}
-          autoFocus={nativeAutoFocus}
-        />
-      </div>
+      <SearchInput
+        query={query}
+        onQueryChanged={setQuery}
+        placeholder={searchPlaceholder}
+        autoFocus={nativeAutoFocus}
+      />
     </div>
   );
 
   return (
-    <Sheet
-      onClose={onClose}
-      header={header}
-      footer={footer}
-      sheetClassName="item-picker"
-      freezeInitialHeight={true}
-    >
+    <Sheet onClose={onClose} header={header} footer={footer} freezeInitialHeight={true}>
       {queryFilteredPlugSets.map((plugSet) => (
         <PlugSection
           key={plugSet.plugSetHash}