@lavalogic/scoria 0.37.20 → 0.37.22

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

@@ -115,11 +115,32 @@
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="slot-wrapper"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}
 		bind:this={cellRef}
+		onmousedown={(e) => {
+			// Suppress the click-side effects that cause the table to
+			// jump horizontally on Action button clicks:
+			//   1. `preventDefault()` cancels the browser's default
+			//      mousedown -> focus on the inner `<button>`, which
+			//      otherwise calls `scrollIntoView` against the button's
+			//      underlying position (far right of the row, since the
+			//      Actions column is sticky-pinned right).
+			//   2. `stopPropagation()` keeps the event out of the outer
+			//      `.focusable` cell handler, which would otherwise call
+			//      `tableContext.startFocus(...)` and trigger Table.svelte's
+			//      focusStart $effect -> another `scrollIntoView`. Even
+			//      with the pinned-cell-skip in that effect, focus state
+			//      changes feed back into other scroll-restore paths.
+			// The Action's own `onclick` fires regardless (click is dispatched
+			// on mouseup independent of mousedown handling), so the popup
+			// toggle still works.
+			e.preventDefault();
+			e.stopPropagation();
+		}}
 	>
 		<!-- TODO {isMultiFocusStart} -->
 		<Action

package/dist/Components/Table/Headers/TableHead.svelte

@@ -360,7 +360,11 @@
 							handler(e);
 						}}
 						ondblclick={() => {
-							tableContext.autoResize(header.column.columnDef).catch(devCatch);
+							// Reset the column back to its factory-default width
+							// (clears the user-resized flag too, so the grid
+							// track returns to its original `minmax(W, 1fr)` /
+							// fixed-`${W}px` branch as configured).
+							header.column.columnDef.resetWidth();
 						}}
 						class="resizer right"
 						class:isResizing={header.column.getIsResizing()}

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -358,6 +358,9 @@
   --button-padding-horizontal: 0.6rem;
   --button-padding-vertical: 0.42rem;
 }
+.spread_row .block.records-per-page {
+  --input-width: 3.5rem;
+}
 .spread_row span,
 .spread_row label {
   white-space: nowrap;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -162,6 +162,17 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
      *  track, false = `minmax(width, 1fr)` flex track. */
     get widthIsFixed(): boolean;
     set widthIsFixed(v: boolean);
+    private readonly _originalWidth;
+    private readonly _originalMaxWidth;
+    private readonly _originalWidthIsFixed;
+    /**
+     * Reset this column's width-related state back to the values the
+     * factory created it with. Clears `userResized` so the grid track
+     * goes back to its flexible / fixed branch as originally configured.
+     * Used by the header resize handle's double-click to give consumers
+     * a single-action "restore default size" affordance.
+     */
+    resetWidth(): void;
     private _isResizing;
     /** Whether the resize handle is currently active. */
     get isResizing(): boolean;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -36,9 +36,12 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
+        this._originalWidth = props.width ?? props.minSize ?? 48;
         this._maxWidth = $state(props.maxWidth);
+        this._originalMaxWidth = props.maxWidth;
         this._wrapValue = $state(props.wrapValue ?? false);
         this._widthIsFixed = $state(props.widthIsFixed ?? false);
+        this._originalWidthIsFixed = props.widthIsFixed ?? false;
         this.isEditable = $derived(props.isEditable ?? (() => Promise.resolve(false)));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
@@ -119,6 +122,26 @@ export class ColumnDef {
     set widthIsFixed(v) {
         this._widthIsFixed = v;
     }
+    // Snapshots of width / maxWidth / widthIsFixed taken at construction
+    // time. The user can revert any in-place mutation (drag-resize,
+    // programmatic write) back to these values via `resetWidth()`. They
+    // are plain fields (not `$state`) because they never change.
+    _originalWidth;
+    _originalMaxWidth;
+    _originalWidthIsFixed;
+    /**
+     * Reset this column's width-related state back to the values the
+     * factory created it with. Clears `userResized` so the grid track
+     * goes back to its flexible / fixed branch as originally configured.
+     * Used by the header resize handle's double-click to give consumers
+     * a single-action "restore default size" affordance.
+     */
+    resetWidth() {
+        this._width = this._originalWidth;
+        this._maxWidth = this._originalMaxWidth;
+        this._widthIsFixed = this._originalWidthIsFixed;
+        this._userResized = false;
+    }
     _isResizing = $state(false);
     /** Whether the resize handle is currently active. */
     get isResizing() {

package/dist/Components/Table/createTable.svelte.js

@@ -107,6 +107,44 @@ export function createTable(options) {
     if (options.initialState) {
         applyInitialState(ctx, options.initialState);
     }
+    // ── 9. Auto-pin structural columns ──────────────────────────────
+    // `col.actions` (the ellipsis menu) and `col.rowSelection` (the
+    // select-row checkbox) are conventionally pinned to the right and
+    // left respectively across every table in the app, so apply that
+    // pin automatically here. The caller can override either pin via
+    // `initialState.columnPinning` (which runs first above), or via
+    // the live `setColumnPinning` updater on the table context.
+    const autoPinLeft = new Map();
+    const autoPinRight = new Map();
+    for (const spec of specs) {
+        const d = specsById.get(spec.id);
+        if (!d) {
+            continue;
+        }
+        const def = unwrapColumnSpec(d).def;
+        if (spec.kind === 'actions') {
+            autoPinRight.set(spec.id, def.width);
+        }
+        else if (spec.kind === 'rowSelection') {
+            autoPinLeft.set(spec.id, def.width);
+        }
+    }
+    if (autoPinLeft.size > 0 || autoPinRight.size > 0) {
+        const current = ctx.columnPinning;
+        const nextLeft = new Map(current.left ?? []);
+        const nextRight = new Map(current.right ?? []);
+        for (const [id, width] of autoPinLeft) {
+            if (!nextLeft.has(id) && !nextRight.has(id)) {
+                nextLeft.set(id, width);
+            }
+        }
+        for (const [id, width] of autoPinRight) {
+            if (!nextLeft.has(id) && !nextRight.has(id)) {
+                nextRight.set(id, width);
+            }
+        }
+        ctx.columnPinning = { left: nextLeft, right: nextRight };
+    }
     // ── 9. Build the structured Table instance ─────────────────────
     const table = Object.freeze({
         get name() {

package/package.json

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