@lavalogic/scoria 0.11.4 → 0.11.6

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.svelte

@@ -4,7 +4,7 @@
 	import Action from '../../../../Action.svelte';
 	import Portal from '../../../../Portal.svelte';
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
-	import { refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
+	import { asyncMap, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../../../../../scss/colours.js';
 	import { Size } from '../../../../../Types/Internal/Size.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
@@ -17,14 +17,13 @@
 </script>
 
 <script lang="ts" generics="T extends object">
-	import { getContext, tick, untrack } from 'svelte';
-	import TableAction, { type ActionsTableCell } from './TableAction.svelte';
 	import type { ActionsDef } from '../../../Types/Columns/Definitions/Actions/ActionsDef.svelte.js';
 	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { getContext, tick, untrack } from 'svelte';
+	import TableAction, { type ActionsTableCell } from './TableAction.svelte';
 
 	const { cell }: ActionsCellProps<T> = $props();
 
@@ -165,15 +164,23 @@
 		/>
 	</div>
 	{#if thisPopupIsVisibile}
-		<Portal>
-			<div bind:this={popupRef} class="popup" style="--y: {y}px; --x: {x}px;">
-				<div class="action-container">
-					{#each actions as action (action.getLabel(cell.row.original, cell.row.visibleIndex))}
-						<TableAction {action} {cell} />
-					{/each}
+		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
+			actions,
+			async (item) => {
+				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
+			}
+		)}
+		{#await awaitedActions then actions}
+			<Portal>
+				<div bind:this={popupRef} class="popup" style="--y: {y}px; --x: {x}px;">
+					<div class="action-container">
+						{#each actions as [action, label] (label)}
+							<TableAction {action} {cell} />
+						{/each}
+					</div>
 				</div>
-			</div>
-		</Portal>
+			</Portal>
+		{/await}
 	{/if}
 </td>
 

package/dist/Components/Table/Table.svelte

@@ -5,18 +5,18 @@
 		ContextMenuContext,
 		type IContextMenuOption
 	} from '../../Contexts/ContextMenuContext.svelte.js';
-	import { setContext, getContext, untrack, onMount, tick } from 'svelte';
+	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
+	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
+	import TableBody, { type HeightData } from './Body/TableBody.svelte';
+	import TableHead from './Headers/TableHead.svelte';
+	import TableFooter from './Misc/TableFooter.svelte';
+	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
+	import TableSidebar from './Misc/TableSidebar.svelte';
 	import { TableContext } from './Types/Context/TableContext.svelte.js';
 	import { PaginationType } from './Types/Pagination/PaginationType.js';
 	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
-	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
-	import TableSidebar from './Misc/TableSidebar.svelte';
-	import TableFooter from './Misc/TableFooter.svelte';
-	import TableHead from './Headers/TableHead.svelte';
-	import TableBody, { type HeightData } from './Body/TableBody.svelte';
-	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 
 	declare global {
 		interface HTMLElementEventMap {
@@ -247,20 +247,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (tableContext.dataRepo?.data) {
-			untrack(() => {
-				if (
-					tableContext.paginationRepo?.paginationState.pageIndex != undefined &&
-					tableContext.paginationRepo?.paginationState.pageSize != undefined
-				) {
-					tableContext.updateSelectedItems();
-					tableContext.resetHighlightedRows();
-				}
-			});
-		}
-	});
-
 	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
 	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
 	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1,6 +1,6 @@
 import { browser, dev } from '$app/environment';
 import { asyncAll, asyncFilterIndices, asyncSleep, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
-import { tick } from 'svelte';
+import { tick, untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
@@ -67,16 +67,27 @@ export class TableContext {
         this._dataRepo = $state(dataRepo);
         // this.dataRepo.forceRefresh = this.forceVisibilityUpdate;
         const [_currentPageData, _originalRowIndices] = $derived.by(() => {
-            const x = dataRepo.paginationType == PaginationType.Local
+            const cpd = dataRepo.paginationType == PaginationType.Local
                 ? this.sortedData.slice(dataRepo.pageStartIndex, dataRepo.pageEndIndexExclusive)
                 : (this.sortedData ?? []);
-            const y = new Map((dataRepo.data ?? []).map((item, index) => [item, index]));
-            return [x, y];
+            const ori = new Map((dataRepo.data ?? []).map((item, index) => [item, index]));
+            return [cpd, ori];
         });
         $effect(() => {
             this._currentPageData = _currentPageData;
             this._originalRowIndices = _originalRowIndices;
         });
+        $effect(() => {
+            if (_currentPageData) {
+                untrack(() => {
+                    if (this.paginationRepo?.paginationState.pageIndex != undefined &&
+                        this.paginationRepo?.paginationState.pageSize != undefined) {
+                        this.updateSelectedItems();
+                        this.resetHighlightedRows();
+                    }
+                });
+            }
+        });
         if (defaultColumnDefs.remoteFilters) {
             this.remoteFilters = defaultColumnDefs.remoteFilters;
         }
@@ -847,26 +858,35 @@ export class TableContext {
             ? Math.min(this.paginationRepo.pageEndIndexExclusive, this.sortedData.length)
             : this.sortedData.length;
         const selectableMethod = this.columnDefs.find((it) => it instanceof RowSelectionDef)?.isSelectable;
+        const updateSelectedItem = (item) => {
+            const key = this.selectionExtractor(item);
+            if (this.selectedItems.has(key)) {
+                //replace selected item with newer version of the same identity
+                this.selectedItems.set(key, item);
+            }
+        };
         if (selectableMethod) {
             for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
                 const item = this.sortedData[index];
+                // HACK: Please find why this is happening and fix it properly
+                if (!item) {
+                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exclusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
+                    return;
+                }
                 if (await selectableMethod(item, index)) {
-                    const key = this.selectionExtractor(item);
-                    if (this.selectedItems.has(key)) {
-                        //replace selected item with newer version of the same identity
-                        this.selectedItems.set(key, item);
-                    }
+                    updateSelectedItem(item);
                 }
             }
         }
         else {
             for (let index = pageStartIndex; index < pageEndIndexExclusive; index++) {
                 const item = this.sortedData[index];
-                const key = this.selectionExtractor(item);
-                if (this.selectedItems.has(key)) {
-                    //replace selected item with newer version of the same identity
-                    this.selectedItems.set(key, item);
+                // HACK: Please find why this is happening and fix it properly
+                if (!item) {
+                    console.warn(`skipping update because there is a data mismatch, page start index: ${pageStartIndex}, current index ${index}, page end index (exclusive) ${pageEndIndexExclusive}`, $state.snapshot(this.sortedData));
+                    return;
                 }
+                updateSelectedItem(item);
             }
         }
         this.recalculateAllSelectedInCurrentPage();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "publishConfig": {
     "access": "restricted"
   },