@lavalogic/scoria 0.37.49 → 0.37.50

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

@@ -717,8 +717,7 @@
 div.input-cell {
   background-color: #f4f7f9;
   height: var(--height);
-  overflow-x: clip;
-  overflow-y: visible;
+  overflow: visible;
   padding-left: 0;
   padding-right: 0;
   border-right: none;
@@ -780,6 +779,8 @@ div.input-wrapper-parent {
   gap: 0.25rem;
   flex-grow: 1;
   --input-border: none;
+  overflow-x: clip;
+  overflow-y: visible;
 }
 div.input-wrapper-parent div.input-wrapper {
   position: relative;

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

@@ -8,7 +8,12 @@
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
 	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
+	import {
+		devCatch,
+		formatDateTime,
+		isValidityTuple,
+		loadingText,
+	} from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext, tick } from 'svelte';
@@ -47,11 +52,10 @@
 		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' })}`;
+		// Both lines go through `formatDateTime` so the tooltip matches
+		// every other date surface in the app; only the timezone differs —
+		// the second call overrides it to UTC.
+		return `Local: ${formatDateTime(d)}\nUTC: ${formatDateTime(d, undefined, 'UTC')}`;
 	});
 
 	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);

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

@@ -148,8 +148,12 @@ export declare const defaultDateLocale = "en-GB";
  * `'de-DE'`) selects the display conventions: it drives the
  * day/month/year ordering and separators — `en-GB` → `19/05/2026,
  * 14:30`, `en-US` → `05/19/2026, 14:30`. It defaults to
- * {@link defaultDateLocale}. The clock is always 24-hour and the
- * timezone is the runtime-resolved one regardless of locale.
+ * {@link defaultDateLocale}. The clock is always 24-hour.
+ *
+ * The optional `timeZone` (an IANA zone such as `'UTC'`) overrides the
+ * zone the timestamp is rendered in; it defaults to the runtime-resolved
+ * zone. Pass `'UTC'` to render a value in UTC — e.g. for a Local-vs-UTC
+ * tooltip.
  *
  * - `Date` values format directly.
  * - `string` / `number` values are parsed via `new Date(...)`. An
@@ -161,7 +165,7 @@ export declare const defaultDateLocale = "en-GB";
  * no time use {@link formatDate}; for the SQL-backend serialisation
  * shapes use {@link SQLFriendly} / {@link SQLFriendlyWithLocalTime}.
  */
-export declare function formatDateTime(value: Date | string | number | null | undefined, locale?: string): string;
+export declare function formatDateTime(value: Date | string | number | null | undefined, locale?: string, timeZone?: string): string;
 /**
  * Canonical date-only display formatter. Use this for values that carry
  * no meaningful time component — due dates, expiry dates, pod-line date

package/dist/Helpers/Helpers.svelte.js

@@ -252,24 +252,29 @@ export const localTimeFormat = new Intl.DateTimeFormat('en-GB', {
  */
 export const defaultDateLocale = 'en-GB';
 /**
- * Per-locale caches of `Intl.DateTimeFormat` instances. Constructing a
- * formatter is comparatively expensive, so the first call for a given
- * locale builds it and every later call for that locale reuses it. The
- * caches only ever grow and hold immutable formatters, so they are safe
- * to share across SSR requests.
+ * The runtime-resolved IANA timezone, read once per environment. The
+ * default timezone for {@link formatDate} / {@link formatDateTime}.
+ */
+const runtimeTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+/**
+ * Caches of `Intl.DateTimeFormat` instances — keyed by `locale` (and, for
+ * date+time, also by timezone). Constructing a formatter is comparatively
+ * expensive, so the first call for a given key builds it and every later
+ * call reuses it. The caches only ever grow and hold immutable
+ * formatters, so they are safe to share across SSR requests.
  */
 const dateTimeFormatters = {};
 const dateFormatters = {};
-/** Build (and cache) a full date + time formatter for `locale`. */
-function dateTimeFormatterFor(locale) {
-    return (dateTimeFormatters[locale] ??= new Intl.DateTimeFormat(locale, {
+/** Build (and cache) a full date + time formatter for `locale` / `timeZone`. */
+function dateTimeFormatterFor(locale, timeZone) {
+    return (dateTimeFormatters[`${locale}|${timeZone}`] ??= new Intl.DateTimeFormat(locale, {
         day: '2-digit',
         month: '2-digit',
         year: 'numeric',
         hour: '2-digit',
         hourCycle: 'h23',
         minute: '2-digit',
-        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        timeZone,
     }));
 }
 /** Build (and cache) a date-only formatter for `locale`. */
@@ -278,7 +283,7 @@ function dateFormatterFor(locale) {
         day: '2-digit',
         month: '2-digit',
         year: 'numeric',
-        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        timeZone: runtimeTimeZone,
     }));
 }
 /**
@@ -290,8 +295,12 @@ function dateFormatterFor(locale) {
  * `'de-DE'`) selects the display conventions: it drives the
  * day/month/year ordering and separators — `en-GB` → `19/05/2026,
  * 14:30`, `en-US` → `05/19/2026, 14:30`. It defaults to
- * {@link defaultDateLocale}. The clock is always 24-hour and the
- * timezone is the runtime-resolved one regardless of locale.
+ * {@link defaultDateLocale}. The clock is always 24-hour.
+ *
+ * The optional `timeZone` (an IANA zone such as `'UTC'`) overrides the
+ * zone the timestamp is rendered in; it defaults to the runtime-resolved
+ * zone. Pass `'UTC'` to render a value in UTC — e.g. for a Local-vs-UTC
+ * tooltip.
  *
  * - `Date` values format directly.
  * - `string` / `number` values are parsed via `new Date(...)`. An
@@ -303,7 +312,7 @@ function dateFormatterFor(locale) {
  * no time use {@link formatDate}; for the SQL-backend serialisation
  * shapes use {@link SQLFriendly} / {@link SQLFriendlyWithLocalTime}.
  */
-export function formatDateTime(value, locale = defaultDateLocale) {
+export function formatDateTime(value, locale = defaultDateLocale, timeZone = runtimeTimeZone) {
     if (value == null || value === '') {
         return '';
     }
@@ -312,7 +321,7 @@ export function formatDateTime(value, locale = defaultDateLocale) {
     if (Number.isNaN(date.getTime())) {
         return typeof value === 'string' ? value : '';
     }
-    return dateTimeFormatterFor(locale).format(date);
+    return dateTimeFormatterFor(locale, timeZone).format(date);
 }
 /**
  * Canonical date-only display formatter. Use this for values that carry

package/dist/scss/_mixins.scss

@@ -1905,16 +1905,13 @@
 	div.input-cell {
 		background-color: colours.$ui-blue-1;
 		height: var(--height);
-		// `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;
+		// The cell itself must NOT clip: the filter-mode popup
+		// (`div.floating`) is an absolutely-positioned child that spills
+		// past the column boundary on purpose. Internal-widget overflow
+		// (a select wider than a narrow column, chevrons, etc.) is clipped
+		// one level in, on `div.input-wrapper-parent`, so the popup still
+		// escapes while widgets stay inside their track.
+		overflow: visible;
 		padding-left: 0;
 		padding-right: 0;
 		// Inner widget no longer paints a border-right - the outer cell
@@ -1982,6 +1979,13 @@
 		gap: 0.25rem;
 		flex-grow: 1;
 		--input-border: none;
+		// Clip internal widget overflow (a select min-width wider than a
+		// narrow column, chevrons, etc.) at the column boundary here
+		// rather than on `div.input-cell` — clipping the cell would also
+		// clip the filter-mode popup. `overflow-y: visible` keeps select
+		// option dropdowns spilling downward.
+		overflow-x: clip;
+		overflow-y: visible;
 
 		div.input-wrapper {
 			position: relative;

package/package.json

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