@wallarm-org/design-system 1.22.2 → 1.22.3-rc-fix-date-utils-honour-format-context.1

package/dist/components/FormatDateTime/FormatDateTime.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isValid } from "date-fns";
 import { cn } from "../../utils/cn.js";
 import { formatAbsoluteDate, formatAbsoluteTime, formatRelativeTime, formatTimeOnly } from "../../utils/formatDateTime.js";
+import { useDateFormat } from "../DateFormatProvider/useDateFormat.js";
 import { Text } from "../Text/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/index.js";
 const toDate = (value)=>{
@@ -9,6 +10,7 @@ const toDate = (value)=>{
     return new Date(value);
 };
 const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSeconds = true, ref, ...props })=>{
+    const dateFormat = useDateFormat();
     if (null == value) return /*#__PURE__*/ jsxs(Tooltip, {
         children: [
             /*#__PURE__*/ jsx(TooltipTrigger, {
@@ -42,7 +44,8 @@ const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSe
     });
     const isoString = date.toISOString();
     const tooltipText = formatAbsoluteTime(date, {
-        showSeconds
+        showSeconds,
+        ...dateFormat
     });
     if ('relative' === format) return /*#__PURE__*/ jsxs(Tooltip, {
         children: [
@@ -57,7 +60,7 @@ const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSe
                         size: "sm",
                         children: /*#__PURE__*/ jsx("span", {
                             className: cn('whitespace-nowrap border-b-1 border-dashed border-border-strong-primary'),
-                            children: formatRelativeTime(date)
+                            children: formatRelativeTime(date, void 0, dateFormat)
                         })
                     })
                 })
@@ -76,12 +79,12 @@ const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSe
         children: [
             /*#__PURE__*/ jsx(Text, {
                 size: "sm",
-                children: formatAbsoluteDate(date)
+                children: formatAbsoluteDate(date, void 0, dateFormat)
             }),
             /*#__PURE__*/ jsx(Text, {
                 size: "sm",
                 color: "secondary",
-                children: formatTimeOnly(date)
+                children: formatTimeOnly(date, dateFormat)
             })
         ]
     });
@@ -93,7 +96,7 @@ const FormatDateTime = ({ value, format = 'relative', layout = 'stacked', showSe
         ...props,
         children: /*#__PURE__*/ jsx(Text, {
             size: "sm",
-            children: formatAbsoluteDate(date)
+            children: formatAbsoluteDate(date, void 0, dateFormat)
         })
     });
 };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.22.1",
-  "generatedAt": "2026-09-24T06:31:30.327Z",
+  "version": "1.22.2",
+  "generatedAt": "2026-09-24T08:10:05.373Z",
   "components": [
     {
       "name": "Accordion",

package/dist/utils/formatDateTime.d.ts

@@ -1,3 +1,16 @@
+import type { DateOrder } from '../components/DateFormatProvider/context';
+/**
+ * App-level date preferences, as `DateFormatProvider` models them.
+ *
+ * The formatters below take them as an argument rather than reading the
+ * context, so they stay pure and usable outside React; `FormatDateTime` is
+ * what feeds them the active values. Omitted, each falls back to the shape
+ * these functions have always produced — day-first, 24-hour.
+ */
+export interface DateTimeFormatOptions {
+    order?: DateOrder;
+    hourCycle?: 12 | 24;
+}
 /**
  * Format a date as relative time for table cells.
  *
@@ -15,13 +28,13 @@
  *
  * Future dates are treated as "Just now" (clock skew tolerance).
  */
-export declare const formatRelativeTime: (date: Date, now?: Date) => string;
+export declare const formatRelativeTime: (date: Date, now?: Date, options?: DateTimeFormatOptions) => string;
 /**
  * Format a date as absolute time for tooltips.
  *
  * Output: "11 Feb, 2026 14:32:07 GMT+2"
  */
-export declare const formatAbsoluteTime: (date: Date, options?: {
+export declare const formatAbsoluteTime: (date: Date, options?: DateTimeFormatOptions & {
     showSeconds?: boolean;
 }) => string;
 /**
@@ -29,13 +42,13 @@ export declare const formatAbsoluteTime: (date: Date, options?: {
  *
  * Output: "11 Feb, 2026"
  */
-export declare const formatAbsoluteDate: (date: Date, now?: Date) => string;
+export declare const formatAbsoluteDate: (date: Date, now?: Date, options?: DateTimeFormatOptions) => string;
 /**
  * Format only the time portion for cells.
  *
  * Output: "14:32 GMT+2"
  */
-export declare const formatTimeOnly: (date: Date) => string;
+export declare const formatTimeOnly: (date: Date, options?: DateTimeFormatOptions) => string;
 /**
  * Format timezone as "GMT+N" or "UTC".
  */

package/dist/utils/formatDateTime.js

@@ -1,5 +1,11 @@
 import { differenceInDays, differenceInHours, differenceInMinutes, differenceInMonths, differenceInSeconds, differenceInWeeks, differenceInYears, format, isValid } from "date-fns";
-const formatRelativeTime = (date, now = new Date())=>{
+const dayMonth = (order)=>'month-first' === order ? 'MMM d' : 'd MMM';
+const dayMonthYear = (order)=>`${dayMonth(order)}, yyyy`;
+const timePattern = (hourCycle, showSeconds)=>{
+    const seconds = showSeconds ? ':ss' : '';
+    return 12 === hourCycle ? `hh:mm${seconds} a` : `HH:mm${seconds}`;
+};
+const formatRelativeTime = (date, now = new Date(), options = {})=>{
     if (!isValid(date)) return '—';
     const seconds = differenceInSeconds(now, date);
     if (seconds < 0) return 'Just now';
@@ -9,32 +15,31 @@ const formatRelativeTime = (date, now = new Date())=>{
     const hours = differenceInHours(now, date);
     if (hours < 24) return 1 === hours ? '1 hour ago' : `${hours} hours ago`;
     const days = differenceInDays(now, date);
-    if (days < 2) return `Yesterday, ${format(date, 'HH:mm')}`;
+    if (days < 2) return `Yesterday, ${format(date, timePattern(options.hourCycle, false))}`;
     if (days < 7) return `${days} days ago`;
     const weeks = differenceInWeeks(now, date);
     if (days < 14) return '1 week ago';
     if (days < 28) return `${weeks} weeks ago`;
     const months = differenceInMonths(now, date);
     if (days < 150) return 1 === months ? '1 month ago' : `${months} months ago`;
-    if (differenceInYears(now, date) < 1) return format(date, 'd MMM');
-    return format(date, 'd MMM, yyyy');
+    if (differenceInYears(now, date) < 1) return format(date, dayMonth(options.order));
+    return format(date, dayMonthYear(options.order));
 };
 const formatAbsoluteTime = (date, options = {})=>{
     if (!isValid(date)) return '—';
     const { showSeconds = true } = options;
-    const timePattern = showSeconds ? 'HH:mm:ss' : 'HH:mm';
-    const formatted = format(date, `d MMM, yyyy ${timePattern}`);
+    const formatted = format(date, `${dayMonthYear(options.order)} ${timePattern(options.hourCycle, showSeconds)}`);
     const tz = formatTimezone(date);
     return `${formatted} ${tz}`;
 };
-const formatAbsoluteDate = (date, now = new Date())=>{
+const formatAbsoluteDate = (date, now = new Date(), options = {})=>{
     if (!isValid(date)) return '—';
-    if (date.getFullYear() === now.getFullYear()) return format(date, 'd MMM');
-    return format(date, 'd MMM, yyyy');
+    if (date.getFullYear() === now.getFullYear()) return format(date, dayMonth(options.order));
+    return format(date, dayMonthYear(options.order));
 };
-const formatTimeOnly = (date)=>{
+const formatTimeOnly = (date, options = {})=>{
     if (!isValid(date)) return '—';
-    return `${format(date, 'HH:mm')} ${formatTimezone(date)}`;
+    return `${format(date, timePattern(options.hourCycle, false))} ${formatTimezone(date)}`;
 };
 const formatTimezone = (date)=>{
     const offset = -date.getTimezoneOffset();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.22.2",
+  "version": "1.22.3-rc-fix-date-utils-honour-format-context.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",