@lavalogic/scoria 0.37.18 → 0.37.20

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -724,10 +724,11 @@
 div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
-  overflow: visible;
+  overflow-x: clip;
+  overflow-y: visible;
   padding-left: 0;
   padding-right: 0;
-  border-right: solid 1px #cbd4da !important;
+  border-right: none;
   box-sizing: border-box;
 }
 div.input-cell div.stick-right {

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -7,7 +7,6 @@
 	import Action from '../../../Action.svelte';
 	import Checkbox from '../../../Checkbox.svelte';
 	import ThreeStateRadio from '../../../ThreeStateRadio.svelte';
-	import { ColumnType } from '../../Types/Columns/ColumnType.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
 	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 	import { Size } from '../../../../Types/Internal/Size.js';
@@ -18,7 +17,6 @@
 
 	const { columnDef }: ColumnListRowProps<T> = $props();
 
-	const isExpandColumn = $derived(columnDef?.columnType === ColumnType.Expand);
 
 	/**
 	 * Position of this column inside the sorted column list, used to
@@ -412,13 +410,9 @@
 						Expand columns can never be pinned, so the group goes
 						fully disabled for them.
 					-->
-					<div
-						class="pin-selector"
-						class:disabled={isExpandColumn}
-					>
+					<div class="pin-selector">
 						<ThreeStateRadio
 							value={pinSide}
-							disabled={isExpandColumn}
 							noLabel="Pin to left"
 							neutralLabel="Unpinned"
 							yesLabel="Pin to right"

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

@@ -83,11 +83,17 @@
 >
 	<div class="bubble-parent">
 		{#await values then values}
-			<!-- The label string itself is not guaranteed unique so the key combines
-			     index and value; both pieces are required because duplicate labels
-			     would otherwise collapse and reordering with identical labels
-			     would force unrelated bubbles to swap. -->
-			{#each values as value, index (`${index}:${value}`)}
+			<!-- `maxBubbles` (default 3) caps how many pills render inline;
+			     anything beyond gets a single `"+N more"` overflow chip with
+			     the hidden labels as a hover tooltip. Key combines index and
+			     value because duplicate labels would otherwise collapse and
+			     reordering with identical labels would force unrelated
+			     bubbles to swap. -->
+			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
+			{@const visibleBubbles = values.slice(0, maxBubbles)}
+			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
+			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
+			{#each visibleBubbles as value, index (`${index}:${value}`)}
 				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
 					cell.row.original,
 					cell.row.originalIndex,
@@ -105,6 +111,12 @@
 					{/await}
 				{/if}
 			{/each}
+			{#if overflowCount > 0}
+				<span
+					class="bubble-overflow"
+					title={overflowTitle}
+				>+{overflowCount} more</span>
+			{/if}
 		{/await}
 	</div>
 </div>
@@ -186,7 +198,7 @@
 
 div.bubble-parent {
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: row nowrap;
   max-width: 100%;
   height: 100%;
   overflow-x: clip;
@@ -194,4 +206,16 @@ div.bubble-parent {
   align-items: center;
   gap: 0.75rem;
   --line-height: 1;
+}
+
+.bubble-overflow {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background-color: #e9ecf1;
+  color: #647d8e;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: default;
 }</style>

package/dist/Components/Table/Body/TableBody.svelte

@@ -183,6 +183,11 @@
   font-size: 0.875rem;
 }
 
+.datatable-row.quick-filter-row > .cell {
+  border-right: solid 1px #cbd4da;
+  box-sizing: border-box;
+}
+
 .datatable-row.quick-filter-row {
   transition: line-height 0.2s ease, height 0.2s ease;
   height: 61px;

package/dist/Components/Table/ColumnFactory.svelte.d.ts

@@ -28,16 +28,4 @@ export interface ColumnSpecInternals<TRow extends object> {
  *  spec was not produced by `createColumnFactory(...)` (defensive; the
  *  public type's `_scoriaColumnSpec` brand prevents this at compile time). */
 export declare function unwrapColumnSpec<TRow extends object>(spec: ColumnSpec<TRow>): ColumnSpecInternals<TRow>;
-/**
- * Construct a `ColumnFactory<TRow>` for use inside the `columns:` closure of
- * `createTable({ ... })`. Each method on the returned object is a typed
- * builder that wraps the matching internal `<Name>Def` constructor and
- * returns a public `ColumnSpec` whose internal payload is hidden behind a
- * symbol-keyed property.
- *
- * Consumers do not call this directly. It is exported so the `createTable`
- * implementation can instantiate it inside the user-supplied closure and so
- * tests can exercise individual factory methods without round-tripping
- * through a full `createTable(...)` call.
- */
 export declare function createColumnFactory<TRow extends object>(): ColumnFactory<TRow>;

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

@@ -178,6 +178,30 @@ function normaliseOptionsLoader(options) {
  * tests can exercise individual factory methods without round-tripping
  * through a full `createTable(...)` call.
  */
+/** Format a Date or ISO-8601 date string for display using the browser
+ *  locale. Returns null / empty input unchanged. Used by `col.display` when
+ *  the column declares `filterValueType: 'Date'` so backend timestamps
+ *  surface as a properly localised date+time string instead of the raw
+ *  ISO payload (`2026-04-16T09:44:11+01:00`). */
+function formatLocaleDate(value) {
+    if (value == null || value === '') {
+        return value;
+    }
+    let d;
+    if (value instanceof Date) {
+        d = value;
+    }
+    else if (typeof value === 'string' || typeof value === 'number') {
+        const parsed = new Date(value);
+        if (!Number.isNaN(parsed.getTime())) {
+            d = parsed;
+        }
+    }
+    if (d == null) {
+        return value;
+    }
+    return d.toLocaleString();
+}
 export function createColumnFactory() {
     const factory = {
         // ─── Accessor kinds ─────────────────────────────────────────
@@ -301,10 +325,26 @@ export function createColumnFactory() {
                             : opts.filterValueType === 'String'
                                 ? 'text'
                                 : 'display';
+            // When the consumer flagged the column as a Date filter, auto-
+            // format the displayed value via `toLocaleString` so timestamps
+            // surface in the user's locale rather than the raw ISO 8601
+            // payload returned by the server. Promise / scalar / null
+            // inputs are all handled. Filter / sort logic still operates
+            // on the raw accessor value below.
+            const rawValue = opts.value;
+            const valueAccessor = opts.filterValueType === 'Date'
+                ? (row, index) => {
+                    const v = rawValue(row, index);
+                    if (v instanceof Promise) {
+                        return v.then(formatLocaleDate);
+                    }
+                    return formatLocaleDate(v);
+                }
+                : rawValue;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
-                accessorFn: opts.value,
+                accessorFn: valueAccessor,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
                 // typed kinds where the factory pins one based on the
@@ -330,6 +370,7 @@ export function createColumnFactory() {
                 id,
                 ...commonProps(opts, 'bubble'),
                 accessorFn: opts.value,
+                maxBubbles: opts.maxBubbles,
                 getColour: opts.colour,
                 // Default to a string-typed filter so bubble columns appear in
                 // the quick-filter row and advanced filter panel by default

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

@@ -35,6 +35,24 @@
 
 	const customFilter = $derived(customFilters?.get(def.id));
 
+	/** Human-readable label used by every inner input (QuerySelect /
+	 *  MultiSelect / SingleSelect / etc.). Priority:
+	 *  1. The column's `header` (when it is a plain string, which is the
+	 *     usual case in flowms migrations).
+	 *  2. The customFilter's `label` (set on the remoteFilters entry).
+	 *  3. The raw `customFilter.id` (last-ditch fallback).
+	 *  Avoids surfacing dotted-path / camelCase IDs like
+	 *  `orderLines.allowSplitFulfilment` as the visible label. */
+	const displayLabel: string = $derived.by(() => {
+		if (typeof def.header === 'string' && def.header.length > 0) {
+			return def.header;
+		}
+		if (customFilter?.label) {
+			return customFilter.label;
+		}
+		return customFilter?.id ?? def.id;
+	});
+
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 
 	let value: unknown = $state(null);
@@ -263,7 +281,7 @@
 {#if isSearchable}
 	<!-- TODO remove this check once datePicker is supported -->
 	{#if def instanceof DateInputDef || def instanceof CheckboxDef}
-		<label for={inputId}>{def.header}</label>
+		<label for={inputId}>{displayLabel}</label>
 	{/if}
 	<div class="row">
 		{#if def instanceof DateInputDef}
@@ -353,7 +371,7 @@
 				{#await options then options}
 					{#if hasQuery(customFilter)}
 						{#if customFilter.valueAsObject !== true}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -370,7 +388,7 @@
 								onchange={generateOnChangePrimitive(label)}
 							/>
 						{:else}
-							{@const label = customFilter.id}
+							{@const label = displayLabel}
 
 							<!-- TODO: multiselect -->
 
@@ -389,7 +407,7 @@
 						{/if}
 					{:else}
 						<MultiSelect
-							label={customFilter.id}
+							label={displayLabel}
 							labelProp="label"
 							valueProp="value"
 							name={customFilter.objectName ?? 'Item'}

package/dist/Components/Table/NestedTable.svelte

@@ -28,7 +28,12 @@
 	> = Object.freeze({
 		allowCopy: false,
 		enableResize: false,
-		allowColumnReordering: false,
+		// Was `false`; flipped to `true` so nested-table columns can be
+		// reordered and pinned by default like the outer table. The
+		// `inner.allowReorder` option on `col.expand` (and the matching
+		// `allowReorder` on top-level `createTable`) still lets callers
+		// opt out per inner table when they want to lock the layout.
+		allowColumnReordering: true,
 		allowQuickFiltering: true,
 		allowAdvancedFiltering: true,
 		toolbar: ToolbarPosition.None,

package/dist/Components/Table/Table.svelte

@@ -129,10 +129,21 @@
 				}
 
 				element?.focus({ preventScroll: true });
+				// Same pinned-cell horizontal-scroll skip as the focusEnd
+				// effect below. Sticky-pinned cells are always visually
+				// in view, but their underlying layout position is at
+				// their real column track, so an unconditional
+				// `inline: 'nearest'` here scrolls the table sideways
+				// every time focus lands inside a pinned column (e.g.
+				// every click on a right-pinned Actions button).
+				const startCell = element?.closest('[role="cell"]');
+				const isStartPinned =
+					startCell?.classList.contains('pinned-left') ||
+					startCell?.classList.contains('pinned-right');
 				element?.scrollIntoView({
 					behavior: 'instant',
 					block: 'nearest',
-					inline: 'nearest',
+					inline: isStartPinned ? undefined : 'nearest',
 				});
 			}
 		});

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

@@ -14,6 +14,10 @@ import { AbstractDisplayDef, type AbstractDisplayDefProps } from './AbstractDisp
 export interface BubbleDefProps<T extends object, in FilterValueType, out FilterOptionsType> extends AbstractDisplayDefProps<T, FilterValueType, FilterOptionsType> {
     /** Per-bubble colour mapper. Invoked per bubble value per render. */
     getColour?: (item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>;
+    /** Maximum number of pills shown per cell before the overflow chip
+     *  kicks in. Pills beyond this cap are hidden and a single
+     *  `"+N more"` chip is rendered in their place. Defaults to 3. */
+    maxBubbles?: number;
 }
 /**
  * `BubbleDef<T, FilterValueType, FilterOptionsType>` renders the cell
@@ -29,4 +33,6 @@ export declare class BubbleDef<T extends object, in FilterValueType = StringFilt
     set filterFn(v: FilterFn<T, FilterValueType> | undefined);
     /** Per-bubble colour mapper. */
     readonly getColour: ((item: T, index: number, value: string) => BubbleColour | Promise<BubbleColour | null | undefined>) | undefined;
+    /** Cap on rendered pills before the overflow chip. */
+    readonly maxBubbles: number;
 }

package/dist/Components/Table/Types/Columns/Definitions/Display/BubbleDef.svelte.js

@@ -15,6 +15,7 @@ export class BubbleDef extends AbstractDisplayDef {
         // props.getColour re-derives the wrapper and discards the stale cache.
         this.getColour = $derived(memoiseRowValueAccessor(props.getColour));
         this._filterFn = $state(props.filterFn);
+        this.maxBubbles = $derived(props.maxBubbles ?? 3);
     }
     _filterFn;
     /** Filter predicate. Reassignable. */
@@ -26,4 +27,6 @@ export class BubbleDef extends AbstractDisplayDef {
     }
     /** Per-bubble colour mapper. */
     getColour;
+    /** Cap on rendered pills before the overflow chip. */
+    maxBubbles;
 }

package/dist/Components/Table/Types/Public/ColumnOptions.d.ts

@@ -208,6 +208,12 @@ export interface BubbleColumnOptions<TRow extends object, TValue = unknown> exte
      * supported (scoria internally wraps it in `Promise.resolve`).
      */
     getOptions?: () => ReadonlyArray<SelectOption<TValue>> | Promise<ReadonlyArray<SelectOption<TValue>>>;
+    /**
+     * Maximum number of pills rendered before they collapse into an
+     * overflow chip (`"+N more"`). Defaults to 3. Set a larger number
+     * to show more pills inline; set `Infinity` to disable the cap.
+     */
+    maxBubbles?: number;
 }
 /** Options for `col.progress({ header, value, ... })`. Renders a horizontal
  *  progress bar from a numeric ratio. */

package/dist/scss/_mixins.scss

@@ -1866,19 +1866,22 @@
 	div.input-cell {
 		background-color: colours.$ui-blue-1;
 		height: var(--height);
-		overflow: visible;
+		// `overflow-x: clip` so a narrow filter cell's internal widget
+		// (select chevron, filter-mode funnel, etc.) cannot paint past
+		// the column boundary. The column-separator border now lives on
+		// the outer grid item (`.quick-filter-row > .cell` in
+		// `TableBody.svelte`), so clipping here keeps both the widget
+		// AND the cell's own background inside the track and the border
+		// stays visible. `overflow-y: visible` preserves the inline
+		// dropdown spillage for select / date popups.
+		overflow-x: clip;
+		overflow-y: visible;
 		padding-left: 0;
 		padding-right: 0;
-		// Reassert the column-separator border-right here so it survives
-		// even when a narrow select-filter cell's internal widget (the
-		// SingleSelect / MultiSelect dropdown trigger) paints flush to
-		// the right edge. Without this rule, two adjacent select filters
-		// visually merge because the inner widget's background covers
-		// the cell's table-cell-basic border. `!important` is here to
-		// override the more-specific .focusable rule from
-		// table-cell-basic that occasionally re-paints the right edge
-		// transparent during focus.
-		border-right: solid 1px colours.$ui-blue-4 !important;
+		// Inner widget no longer paints a border-right - the outer cell
+		// wrapper owns the column divider so adjacent filters cannot
+		// visually merge regardless of what the widget paints inside.
+		border-right: none;
 		box-sizing: border-box;
 
 		div.stick-right {

package/package.json

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