@lavalogic/scoria 0.37.23 → 0.37.25

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

@@ -24,6 +24,37 @@
 		cell.column.columnDef.getDisplayValue?.(cell.row.original, cell.row.originalIndex) ?? value
 	);
 
+	/** For Date-typed display columns, expose both the local-time and UTC
+	 *  representations of the raw accessor value as a multi-line tooltip.
+	 *  The cell's body shows the locale-formatted value (via
+	 *  `getDisplayValue`); the title attribute below lets users hover to
+	 *  see Local + UTC side-by-side without expanding the column. */
+	const dateTooltip: string | undefined = $derived.by(() => {
+		if (cell.column.columnDef.filterValueType !== 'Date') {
+			return undefined;
+		}
+		if (value == null || value === '' || value instanceof Promise) {
+			return undefined;
+		}
+		let d: Date | undefined;
+		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 undefined;
+		}
+		// Use `toLocaleString` for both lines so the visual format matches
+		// (only the time zone differs). The `timeZone: 'UTC'` override on
+		// the second call renders the same date / time but reinterpreted
+		// in UTC, which is what the user expects to see on hover.
+		return `Local: ${d.toLocaleString()}\nUTC: ${d.toLocaleString(undefined, { timeZone: 'UTC' })}`;
+	});
+
 	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const options: Array<SelectOption<unknown>> = $derived(
@@ -106,6 +137,7 @@
 	class:has-modal={!!modalComponent}
 	tabIndex={hasValue ? 0 : undefined}
 	class="focusable"
+	title={dateTooltip}
 	style={focusDetails.outline}
 	class:multifocus={hasValue && focusDetails.isMultiFocused}
 	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}

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

@@ -325,26 +325,33 @@ 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.
+            // For Date-typed display columns, leave the accessor returning
+            // the raw Date / ISO string (filter / sort logic still operates
+            // on the raw value) and surface the formatted local-time
+            // string via `getDisplayValue`. The cell renders
+            // `getDisplayValue` for visible text and reads the raw value
+            // from `accessorFn` to compose the hover tooltip showing both
+            // the local-time and UTC representations.
             const rawValue = opts.value;
-            const valueAccessor = opts.filterValueType === 'Date'
+            const valueAccessor = rawValue;
+            const dateDisplayValue = opts.filterValueType === 'Date'
                 ? (row, index) => {
                     const v = rawValue(row, index);
                     if (v instanceof Promise) {
-                        return v.then(formatLocaleDate);
+                        return v.then((resolved) => {
+                            const formatted = formatLocaleDate(resolved);
+                            return formatted == null ? null : String(formatted);
+                        });
                     }
-                    return formatLocaleDate(v);
+                    const formatted = formatLocaleDate(v);
+                    return formatted == null ? null : String(formatted);
                 }
-                : rawValue;
+                : undefined;
             const def = new DisplayDef({
                 id,
                 ...commonProps(opts, inferredKind),
                 accessorFn: valueAccessor,
+                getDisplayValue: dateDisplayValue,
                 modal: opts.modal,
                 // Display columns have no implicit filter type (unlike the
                 // typed kinds where the factory pins one based on the

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

@@ -359,7 +359,8 @@
   --button-padding-vertical: 0.42rem;
 }
 .spread_row .block.records-per-page {
-  --input-width: 2.75rem;
+  --input-min-width: 3.5rem;
+  --input-width: 3.5rem;
 }
 .spread_row span,
 .spread_row label {

package/dist/Helpers/dropdownPortal.js

@@ -146,6 +146,10 @@ export function attachDropdownPortal(options) {
         }
         originalParent = dropdown.parentNode;
         originalNextSibling = dropdown.nextSibling;
+        // Clear any `display: none` left over from a previous portalIn
+        // (see the defensive hide there) so the dropdown is visible
+        // once teleported into the new host.
+        dropdown.style.display = '';
         // Append the dropdown to the nearest open native `<dialog>` ancestor
         // when one exists, otherwise to `document.body`. A `<dialog>` opened
         // via `showModal()` renders in the browser's top layer, which sits
@@ -200,6 +204,18 @@ export function attachDropdownPortal(options) {
         dropdown.style.maxHeight = '';
         dropdown.style.zIndex = '';
         dropdown.removeAttribute('data-scoria-portal-dropdown');
+        // Defensive: if Svelecte left the dropdown without its own
+        // `display: none` (e.g. on certain transition-cancel race paths
+        // the open/close class flip and the inline style update arrive
+        // out of order), the dropdown would now be `position: static;
+        // display: block` in `document.body` and contribute its option
+        // list's height to the body scroll size - which is what surfaces
+        // as a stray page-level vertical scrollbar after toggling a
+        // select. Force `display: none` here; Svelecte will restore the
+        // inline style on next open via its own class-driven render.
+        if (!dropdown.classList.contains('is-open')) {
+            dropdown.style.display = 'none';
+        }
         if (originalParent != null) {
             if (originalNextSibling != null && originalNextSibling.parentNode === originalParent) {
                 originalParent.insertBefore(dropdown, originalNextSibling);

package/package.json

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