+
{items.map((item) => (
void;
onItemSelectedFn: (item: DimItem, onClose: () => void) => void;
}) {
- const handleClick = useCallback(
- () => onItemSelectedFn(item, onClose),
- [item, onClose, onItemSelectedFn],
+ const ref = useRef(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 (
-
+
+
);
}
diff --git a/src/app/item-popup/SocketDetails.tsx b/src/app/item-popup/SocketDetails.tsx
index 9f27dab26a..3b9142e255 100644
--- a/src/app/item-popup/SocketDetails.tsx
+++ b/src/app/item-popup/SocketDetails.tsx
@@ -284,14 +284,12 @@ export default function SocketDetails({
{requiresEnergy && }
{socketCategory.displayProperties.name}
-
-
-
+
);
diff --git a/src/app/loadout-builder/filter/ExoticPicker.tsx b/src/app/loadout-builder/filter/ExoticPicker.tsx
index 24e811a3ff..6859c840f9 100644
--- a/src/app/loadout-builder/filter/ExoticPicker.tsx
+++ b/src/app/loadout-builder/filter/ExoticPicker.tsx
@@ -177,14 +177,12 @@ export default function ExoticPicker({
header={
{t('LB.ChooseAnExotic')}
-
-
-
+
}
onClose={onClose}
diff --git a/src/app/loadout/plug-drawer/PlugDrawer.tsx b/src/app/loadout/plug-drawer/PlugDrawer.tsx
index 8977f7ced5..ba3a88b3f2 100644
--- a/src/app/loadout/plug-drawer/PlugDrawer.tsx
+++ b/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 = (
);
return (
-
+
{queryFilteredPlugSets.map((plugSet) => (