@asteby/metacore-runtime-react 18.0.0 → 18.2.0

package/src/dynamic-columns-shim.ts

@@ -30,6 +30,7 @@ export type GetDynamicColumns = (
     t: (key: string, options?: any) => string,
     language: string,
     columnFilterConfigs: Map<string, ColumnFilterConfig>,
+    timeZone?: string,
 ) => ColumnDef<any>[]
 
 /** Signature for the host-provided `DynamicIcon` renderer. */

package/src/dynamic-columns.tsx

@@ -369,16 +369,60 @@ export const DATE_CELL_TYPES = ['date', 'datetime', 'timestamp', 'timestamptz']
  *   - `date`: day only (`PPP`), no tooltip.
  *   - `datetime`/`timestamp(tz)`: day + time (`Pp`) with a full-precision
  *     tooltip (`PPpp`) — the 7Leguas pattern.
+ *
+ * When a `timeZone` (IANA, e.g. the org's `America/Mexico_City`) is provided,
+ * instants are rendered in that zone via the native `Intl.DateTimeFormat` so
+ * the displayed day/time never shifts with the viewer's browser timezone:
+ *   - instant (datetime/timestamp(tz)): `dateStyle:'medium' timeStyle:'short'`
+ *     in the org zone, with a `dateStyle:'long' timeStyle:'medium'` +
+ *     `timeZoneName:'short'` tooltip.
+ *   - `date` (pure calendar day): rendered pinned to UTC so it never rolls to
+ *     the previous/next day, no tooltip.
+ * Without a `timeZone`, the exact date-fns behavior is preserved (back-compat).
  */
 export function formatDateCell(
     value: unknown,
     renderAs: string | undefined,
     locale: Locale,
+    timeZone?: string,
 ): { display: string; title?: string } | null {
     if (value === null || value === undefined || value === '') return null
     const date = new Date(value as any)
     if (isNaN(date.getTime()) || date.getFullYear() <= 1) return null
     const withTime = renderAs !== 'date'
+    if (timeZone) {
+        // `locale.code` is the BCP-47 tag date-fns ships (e.g. 'es', 'en-US').
+        const localeTag = locale?.code || undefined
+        if (withTime) {
+            return {
+                display: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    dateStyle: 'medium',
+                    timeStyle: 'short',
+                }).format(date),
+                // `dateStyle`/`timeStyle` can't be combined with explicit
+                // component options like `timeZoneName`, so spell the tooltip
+                // out: long date + seconds + the zone abbreviation.
+                title: new Intl.DateTimeFormat(localeTag, {
+                    timeZone,
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit',
+                    timeZoneName: 'short',
+                }).format(date),
+            }
+        }
+        // Pure calendar date: pin to UTC so it never shifts across zones.
+        return {
+            display: new Intl.DateTimeFormat(localeTag, {
+                timeZone: 'UTC',
+                dateStyle: 'long',
+            }).format(date),
+        }
+    }
     if (withTime) {
         return {
             display: format(date, 'Pp', { locale }),
@@ -514,6 +558,7 @@ export function makeDefaultGetDynamicColumns(
         t?: (key: string, options?: any) => string,
         currentLanguage?: string,
         filterConfigs?: Map<string, ColumnFilterConfig>,
+        timeZone?: string,
     ): ColumnDef<any>[] {
         const dateLocale = currentLanguage === 'en' ? enUS : es
         const columns: ColumnDef<any>[] = [
@@ -665,7 +710,7 @@ export function makeDefaultGetDynamicColumns(
                         case 'datetime':
                         case 'timestamp':
                         case 'timestamptz': {
-                            const formatted = formatDateCell(value, renderAs, dateLocale)
+                            const formatted = formatDateCell(value, renderAs, dateLocale, timeZone)
                             if (!formatted)
                                 return <span className="text-muted-foreground">-</span>
                             return (

package/src/dynamic-select-field.tsx

@@ -48,7 +48,7 @@ import type { ActionFieldDef } from './types'
  * not a gallery). Inline style for the box dimensions: arbitrary Tailwind
  * classes from a federated addon don't always survive the host's class scan.
  */
-function OptionThumb({ image, size = 20 }: { image?: string | null; size?: number }) {
+export function OptionThumb({ image, size = 20 }: { image?: string | null; size?: number }) {
     const box = { width: size, height: size }
     if (!image) {
         return (
@@ -83,7 +83,7 @@ function OptionThumb({ image, size = 20 }: { image?: string | null; size?: numbe
  * else a declared icon, else a color dot (enum/status options with a color).
  * Returns null when the option carries none, so plain text options stay plain.
  */
-function OptionLead({
+export function OptionLead({
     option,
     size = 20,
 }: {

package/src/dynamic-table.tsx

@@ -90,6 +90,13 @@ interface DynamicTableProps {
      * Optional — a sensible default maps each column to { accessorKey, header }.
      */
     getDynamicColumns?: GetDynamicColumns
+    /**
+     * IANA timezone (e.g. the org's `America/Mexico_City`) used to render
+     * datetime/timestamp cells. When provided, instants are displayed in this
+     * zone instead of the viewer's browser zone, so the day/time never shifts.
+     * Optional — omitting it preserves the legacy browser-local formatting.
+     */
+    timeZone?: string
 }
 
 export function DynamicTable({
@@ -102,6 +109,7 @@ export function DynamicTable({
     defaultFilters,
     extraColumns = [],
     getDynamicColumns = defaultGetDynamicColumns,
+    timeZone,
 }: DynamicTableProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
@@ -590,12 +598,12 @@ export function DynamicTable({
         const rowMetadata = metadata.actions?.some((a) => a.placement === 'table' || a.placement === 'create')
             ? { ...metadata, actions: metadata.actions.filter((a) => !a.placement || a.placement === 'row') }
             : metadata
-        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs)
+        const baseColumns = getDynamicColumns(rowMetadata, handleInternalAction, t, i18n.language, columnFilterConfigs, timeZone)
         const filteredBase = baseColumns.filter((col: ColumnDef<any>) => !hiddenColumns.includes(col.id as string))
         const actionsCol = filteredBase.find((c: ColumnDef<any>) => c.id === 'actions')
         const otherCols = filteredBase.filter((c: ColumnDef<any>) => c.id !== 'actions')
         return [...otherCols, ...extraColumns, ...(actionsCol ? [actionsCol] : [])]
-    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns])
+    }, [metadata, handleInternalAction, hiddenColumns, extraColumns, t, i18n.language, columnFilterConfigs, getDynamicColumns, timeZone])
 
     const filters = useMemo(() => [], [])
 

package/src/index.ts

@@ -68,7 +68,8 @@ export {
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid'
-export { DynamicRecordDialog } from './dialogs/dynamic-record'
+export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record'
+export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } from './dialogs/dynamic-record'
 export { CreateRecordDialog } from './dialogs/create-record-dialog'
 export { ViewRecordDialog } from './dialogs/view-record-dialog'
 export type {