@invopop/popui 0.0.20 → 0.0.22

package/dist/BaseTable.svelte

@@ -16,6 +16,7 @@ let metaKeyPressed = false;
 let shiftKeyPressed = false;
 let lastSelected = {};
 let selectWithArrowPosition = -1;
+let selectionMode = "keyboard";
 export let sortBy = "";
 export let sortDirection = "";
 export let fields = [];
@@ -74,8 +75,11 @@ function unselectRow(row) {
     lastSelected = {};
   }
 }
+function rowIsSelected(row) {
+  return selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy]);
+}
 function toggleRow(row) {
-  if (selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy])) {
+  if (rowIsSelected(row)) {
     unselectRow(row);
   } else {
     selectRow(row);
@@ -96,15 +100,20 @@ function selectRange(to) {
 </script>
 
 <svelte:window
+  on:mousemove={() => {
+    selectionMode = 'mouse'
+  }}
   on:keydown={(event) => {
     event.preventDefault()
 
+    selectionMode = 'keyboard'
+
     if (event.key === 'Escape' || event.key === 'Esc') {
       selectedRows = []
       lastSelected = {}
     }
 
-    if ((event.code === 'Space' || event.key === ' ') && lastSelected) {
+    if ((event.code === 'Space' || event.key === ' ') && lastSelectedIndex >= 0) {
       toggleRow(lastSelected)
     }
 
@@ -129,17 +138,21 @@ function selectRange(to) {
 
       if (!to) return
 
-      const previousSelected = { ...lastSelected }
-      lastSelected = to
+      if (!shiftKeyPressed) {
+        lastSelected = to
+        return
+      }
 
-      if (!shiftKeyPressed) return
+      if (!rowIsSelected(lastSelected)) {
+        selectRow(lastSelected)
+      }
 
       if (toIndex < selectWithArrowPosition) {
-        selectRow(previousSelected)
         selectRow(to)
       } else {
         unselectRow(lastSelected)
       }
+      lastSelected = to
     }
 
     if (event.key === 'ArrowDown') {
@@ -156,17 +169,21 @@ function selectRange(to) {
 
       if (!to) return
 
-      const previousSelected = { ...lastSelected }
-      lastSelected = to
+      if (!shiftKeyPressed) {
+        lastSelected = to
+        return
+      }
 
-      if (!shiftKeyPressed) return
+      if (!rowIsSelected(lastSelected)) {
+        selectRow(lastSelected)
+      }
 
       if (toIndex > selectWithArrowPosition) {
-        selectRow(previousSelected)
         selectRow(to)
       } else {
         unselectRow(lastSelected)
       }
+      lastSelected = to
     }
   }}
   on:keyup={(event) => {
@@ -248,6 +265,7 @@ function selectRange(to) {
             {selectable}
             {selectedRows}
             {selectedTrackedBy}
+            {selectionMode}
             selected={lastSelected && row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
             on:click={() => {
               if (disableRowClick) return
@@ -273,6 +291,10 @@ function selectRange(to) {
                 unselectRow(row)
               }
             }}
+            on:hover={() => {
+              if (shiftKeyPressed) return
+              lastSelected = row
+            }}
             on:action
             on:copied
           />

package/dist/BaseTableRow.svelte

@@ -13,6 +13,7 @@ export let disableRowClick = false;
 export let freeWrap = false;
 export let selectable = false;
 export let selected = false;
+export let selectionMode = "keyboard";
 export let selectedTrackedBy = "id";
 export let selectedRows = [];
 $:
@@ -25,7 +26,7 @@ $:
     return field === row[selectedTrackedBy];
   });
 $:
-  if (selected) {
+  if (selectionMode === "keyboard" && selected) {
     scrollIntoView();
   }
 function scrollIntoView() {
@@ -37,13 +38,19 @@ function scrollIntoView() {
   class:cursor-pointer={!disableRowClick}
   class:bg-neutral-50={selected}
   class:bg-workspace-accent-50={checked && !selected}
-  class="hover:bg-neutral-50"
   on:click
   on:contextmenu|preventDefault={() => {
     if (!actionsDropdown) return
 
     actionsDropdown.toggle()
   }}
+  on:mouseover={() => {
+    if (selectionMode === 'keyboard') return
+    dispatch('hover')
+  }}
+  on:focus={() => {
+    dispatch('focus')
+  }}
 >
   {#if selectable}
     <td>

package/dist/BaseTableRow.svelte.d.ts

@@ -9,12 +9,15 @@ declare const __propDef: {
         freeWrap?: boolean | undefined;
         selectable?: boolean | undefined;
         selected?: boolean | undefined;
+        selectionMode?: string | undefined;
         selectedTrackedBy?: string | undefined;
         selectedRows?: TableDataRow[] | undefined;
     };
     events: {
         click: MouseEvent;
         copied: CustomEvent<any>;
+        hover: CustomEvent<any>;
+        focus: CustomEvent<any>;
         checked: CustomEvent<any>;
         action: CustomEvent<any>;
     } & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",