@lavalogic/scoria 0.37.8 → 0.37.10

package/dist/Components/NumberInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Icon from './Icon.svelte';
@@ -28,7 +28,10 @@
 
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 		oninput,
 
 		inputRef = $bindable(),

package/dist/Components/PasswordInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { ColourSet } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Action from './Action.svelte';
@@ -19,7 +19,10 @@
 		autocomplete = 'current-password',
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the input on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 	}: PasswordInputProps = $props();
 
 	function toggleVisibility(): void {

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

@@ -67,14 +67,41 @@ function makeSpec(kind, def, internals = {}) {
     });
     return Object.freeze(spec);
 }
+/** Sensible per-kind default widths so a freshly-built table without explicit
+ *  per-column `width` overrides ends up visually differentiated (rather than
+ *  every column collapsing to the shared `minSize` fallback of 48px and then
+ *  taking equal `1fr` shares of any remaining track space). Numbers chosen
+ *  to roughly match what the legacy `<table>` element produced via the
+ *  browser auto-layout algorithm for typical FloWMS column content. */
+const KIND_DEFAULT_WIDTHS = {
+    text: 200,
+    number: 100,
+    checkbox: 80,
+    date: 140,
+    select: 160,
+    query: 160,
+    display: 150,
+    bubble: 150,
+    progress: 140,
+    validity: 60,
+    actions: 120,
+    rowSelection: 40,
+    expand: 40,
+    filterOnly: 0,
+};
 /** Returns the common Def props for an option object, excluding `id`.
  *  Callers pass `id` directly at the construction site so its strict
- *  literal-key narrowing survives the object spread. */
-function commonProps(opts) {
+ *  literal-key narrowing survives the object spread.
+ *
+ *  `kind` selects the per-kind default width from `KIND_DEFAULT_WIDTHS`. The
+ *  caller's `minWidth` / `width` values still win - the default is only
+ *  applied if the consumer left the field undefined. */
+function commonProps(opts, kind) {
+    const defaultWidth = KIND_DEFAULT_WIDTHS[kind];
     return {
         header: opts.header,
         minSize: opts.minWidth,
-        width: opts.width,
+        width: opts.width ?? defaultWidth,
         allowSorting: opts.allowSorting,
         allowFiltering: opts.allowFiltering,
         defaultHidden: opts.defaultHidden,
@@ -123,7 +150,7 @@ export function createColumnFactory() {
         text(opts) {
             const def = new TextInputDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'text'),
                 accessorFn: opts.accessor,
                 getDisplayValue: opts.getDisplayValue,
                 filterValueType: FilterValueType.String,
@@ -136,7 +163,7 @@ export function createColumnFactory() {
         number(opts) {
             const def = new NumberInputDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'number'),
                 accessorFn: opts.accessor,
                 getDisplayValue: opts.getDisplayValue,
                 min: opts.min ?? Number.MIN_SAFE_INTEGER,
@@ -151,7 +178,7 @@ export function createColumnFactory() {
         checkbox(opts) {
             const def = new CheckboxDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'checkbox'),
                 accessorFn: opts.accessor,
                 getDisplayValue: opts.getDisplayValue,
                 filterValueType: FilterValueType.Bool,
@@ -164,7 +191,7 @@ export function createColumnFactory() {
         date(opts) {
             const def = new DateInputDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'date'),
                 accessorFn: opts.accessor,
                 getDisplayValue: opts.getDisplayValue,
                 showTime: opts.withTime ?? false,
@@ -178,7 +205,7 @@ export function createColumnFactory() {
         select(opts) {
             const def = new SelectDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'select'),
                 accessorFn: opts.accessor,
                 getOptions: normaliseOptionsLoader(opts.options),
                 getDisplayValue: opts.getDisplayValue ?? ((row) => String(row[opts.id] ?? '')),
@@ -199,7 +226,7 @@ export function createColumnFactory() {
         query(opts) {
             const def = new QueryDef({
                 id: opts.id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'query'),
                 accessorFn: opts.accessor,
                 // Forward the row to the consumer's query callback so it
                 // may scope results by row-level context (e.g. a `pod`
@@ -224,7 +251,7 @@ export function createColumnFactory() {
                 : undefined;
             const def = new DisplayDef({
                 id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'display'),
                 accessorFn: opts.value,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
@@ -241,7 +268,7 @@ export function createColumnFactory() {
             const id = mintSyntheticId('bubble', opts.idHint);
             const def = new BubbleDef({
                 id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'bubble'),
                 accessorFn: opts.value,
                 getColour: opts.colour,
                 filterValueType: opts.filterValueType,
@@ -267,7 +294,7 @@ export function createColumnFactory() {
                 : () => 'grey';
             const def = new ProgressBarDef({
                 id,
-                ...commonProps(opts),
+                ...commonProps(opts, 'progress'),
                 accessorFn: tupleAccessor,
                 getColour,
                 filterValueType: opts.filterValueType,
@@ -281,7 +308,7 @@ export function createColumnFactory() {
                 id,
                 header: opts?.header ?? '',
                 minSize: opts?.minWidth,
-                width: opts?.width,
+                width: opts?.width ?? KIND_DEFAULT_WIDTHS.validity,
                 defaultHidden: opts?.defaultHidden,
                 resizable: opts?.resizable ?? false,
                 debug: opts?.debug,
@@ -295,6 +322,11 @@ export function createColumnFactory() {
             const def = new RowSelectionDef({
                 isSelectable: opts?.isSelectable ?? (() => true),
             });
+            // RowSelection has no public width option - apply the per-kind
+            // default so the column does not collapse to the 48px ColumnDef
+            // fallback and share equal `1fr` track space with wider columns.
+            def.width = KIND_DEFAULT_WIDTHS.rowSelection;
+            def.minSize = KIND_DEFAULT_WIDTHS.rowSelection;
             return makeSpec('rowSelection', def);
         },
         actions(opts) {
@@ -317,6 +349,8 @@ export function createColumnFactory() {
                 actions: wrapped,
                 isEnabled: isEnabledFn ? (item) => isEnabledFn(item) : undefined,
             });
+            // Actions has no public width option - apply the per-kind default.
+            def.width = KIND_DEFAULT_WIDTHS.actions;
             return makeSpec('actions', def);
         },
         expand(opts) {
@@ -359,6 +393,9 @@ export function createColumnFactory() {
                     allowCopy: opts.inner?.allowCopy,
                 },
             });
+            // Expand has no public width option - apply the per-kind default.
+            def.width = KIND_DEFAULT_WIDTHS.expand;
+            def.minSize = KIND_DEFAULT_WIDTHS.expand;
             return makeSpec('expand', def);
         },
         filterOnly(opts) {

package/dist/Components/Table/Table.svelte

@@ -105,8 +105,19 @@
 		untrack(() => {
 			if (tableContext.focusStart && ref) {
 				const { row, column: index } = tableContext.focusStart;
+				// `columnDefs[index]` can be undefined when the focus
+				// coordinate references a memory slot that no longer
+				// exists (e.g. inner expand tables remount with a
+				// different column count, or a preset hydration races
+				// the column-layout init). Guard before destructuring
+				// so an out-of-range index degrades to "no focus
+				// restored" instead of a hard crash.
+				const def = tableContext.columnDefs[index];
+				if (!def) {
+					return;
+				}
 				let element = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+					`#${tableContext.tableName}-cell-${row}-${def.id}`
 				) as HTMLElement | undefined;
 
 				if (element?.tabIndex == -1) {
@@ -136,8 +147,13 @@
 		untrack(() => {
 			if (tableContext.focusEnd && ref) {
 				const { row, column: index } = tableContext.focusEnd;
+				// Same out-of-range guard as the focusStart effect above.
+				const def = tableContext.columnDefs[index];
+				if (!def) {
+					return;
+				}
 				const cell = ref.querySelector(
-					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+					`#${tableContext.tableName}-cell-${row}-${def.id}`
 				) as HTMLElement | undefined;
 
 				cell?.scrollIntoView({

package/dist/Components/TextArea.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
 	import Icon from './Icon.svelte';
@@ -33,7 +33,10 @@
 		spellcheck,
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the textarea on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
 		oninput,
 	}: TextAreaProps = $props();
 

package/dist/Components/TextInput.svelte

@@ -1,7 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
-	import { cssLength, isValidEmailAddress, passthrough } from '../Helpers/Helpers.svelte.js';
+	import { cssLength, isValidEmailAddress } from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
 	import { InputVariant } from '../Types/Internal/InputVariant.js';
 	import { Size } from '../Types/Internal/Size.js';
@@ -34,7 +34,17 @@
 		spellcheck,
 		onblur,
 		onfocus,
-		onkeydown = passthrough,
+		// No default `onkeydown`. The legacy default was `passthrough`,
+		// a helper that BLURS the target on every alphanumeric key (it is
+		// a barcode-scanner aid intended for buttons - note the
+		// `as HTMLButtonElement` cast inside it). Applied to a text input
+		// it makes the field unusable: each keystroke blurs the input
+		// before the value can update, so users see nothing as they type.
+		// Inputs should accept keystrokes by default; consumers that want
+		// the barcode-blur behaviour explicitly pass
+		// `onkeydown={passthrough}` (preferably renamed to
+		// `blurOnAlphanumeric` in a future patch).
+		onkeydown,
 		oninput,
 	}: TextInputProps = $props();
 

package/dist/Helpers/Helpers.svelte.d.ts

@@ -136,11 +136,21 @@ export declare function SQLFriendlyWithLocalTime(date: InputDate | InputDateWith
  */
 export declare const localTimeFormat: Intl.DateTimeFormat;
 /**
- * Default `onkeydown` handler that blurs the focused element when
- * the user presses an alphanumeric key. Used on input wrappers
- * and buttons so that scanner-driven barcode characters do not
- * accumulate inside the focused field; instead the buffer goes
- * to `UntypedInputContext`.
+ * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
+ * other non-text focusable elements** that should yield focus when a
+ * scanner-driven keystream begins. On every alphanumeric key it
+ * calls `e.target.blur()` so the buffered keystrokes flow up to
+ * `UntypedInputContext` instead of being captured by the focused
+ * element.
+ *
+ * Do NOT apply to text inputs / textareas. Blurring the field on each
+ * keypress makes it impossible to type into - the field deselects
+ * before the browser commits the character.
+ *
+ * Despite the name, this is not a "pass the event through" no-op; it
+ * actively blurs the target. Renaming is deferred for backwards
+ * compatibility, but consumer-facing prop docs should describe the
+ * behaviour as "blur on alphanumeric".
  */
 export declare function passthrough(e: KeyboardEvent): void;
 /**

package/dist/Helpers/Helpers.svelte.js

@@ -248,11 +248,21 @@ export const localTimeFormat = new Intl.DateTimeFormat('en-GB', {
     timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 });
 /**
- * Default `onkeydown` handler that blurs the focused element when
- * the user presses an alphanumeric key. Used on input wrappers
- * and buttons so that scanner-driven barcode characters do not
- * accumulate inside the focused field; instead the buffer goes
- * to `UntypedInputContext`.
+ * Barcode-scanner helper. Wire as an `onkeydown` on **buttons and
+ * other non-text focusable elements** that should yield focus when a
+ * scanner-driven keystream begins. On every alphanumeric key it
+ * calls `e.target.blur()` so the buffered keystrokes flow up to
+ * `UntypedInputContext` instead of being captured by the focused
+ * element.
+ *
+ * Do NOT apply to text inputs / textareas. Blurring the field on each
+ * keypress makes it impossible to type into - the field deselects
+ * before the browser commits the character.
+ *
+ * Despite the name, this is not a "pass the event through" no-op; it
+ * actively blurs the target. Renaming is deferred for backwards
+ * compatibility, but consumer-facing prop docs should describe the
+ * behaviour as "blur on alphanumeric".
  */
 export function passthrough(e) {
     if (!e.key.match(/^[a-zA-Z0-9[\]]$/gm)) {

package/package.json

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