web: allow deselecting items using ctrl+click (#1433)

Signed-off-by: Muhammad Ali <alihamuh@gmail.com>
Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

apps/web/src/components/list-container/index.tsx

@@ -74,6 +74,7 @@ function ListContainer(props: ListContainerProps) {
 
   const [announcements, removeAnnouncement] = useAnnouncements();
   const setSelectedItems = useSelectionStore((store) => store.setSelectedItems);
+  const isSelected = useSelectionStore((store) => store.isSelected);
   const selectItem = useSelectionStore((store) => store.selectItem);
   const deselectItem = useSelectionStore((store) => store.deselectItem);
   const toggleSelection = useSelectionStore(
@@ -98,7 +99,10 @@ function ListContainer(props: ListContainerProps) {
     length: items.length,
     reset: () => toggleSelection(false),
     deselect: (index) => deselectItem(items[index]),
-    select: (index) => selectItem(items[index]),
+    select: (index) =>
+      isSelected(items[index])
+        ? deselectItem(items[index])
+        : selectItem(items[index]),
     bulkSelect: (indices) => setSelectedItems(indices.map((i) => items[i])),
     focusItemAt: (index) => {
       const item = items[index];

apps/web/src/components/list-item/index.js

@@ -145,7 +145,7 @@ function ListItem(props) {
         }
       }}
       onClick={(e) => {
-        if (props.onClick) {
+        if (!e.metaKey && !e.shiftKey && !e.ctrlKey && props.onClick) {
           props.onClick();
         }
       }}

apps/web/src/hooks/use-keyboard-list-navigation.ts

@@ -52,7 +52,6 @@ export function useKeyboardListNavigation(
   } = options;
   const cursor = useRef(-1);
   const anchor = useRef(-1);
-
   // const { reset, select, deselect } = useSelection();
 
   const direction = useCallback(() => {

apps/web/src/stores/selection-store.js

@@ -57,6 +57,10 @@ class SelectionStore extends BaseStore {
     }
   };
 
+  isSelected = (item) => {
+    return this.get().selectedItems.indexOf(item) > -1;
+  };
+
   setSelectedItems = (items) => {
     this.set((state) => (state.selectedItems = items));
   };