@trackunit/react-date-and-time-hooks 2.1.16-alpha-9d327375fc1.0 → 2.1.19

package/index.cjs.js

@@ -3,8 +3,8 @@
 var react = require('react');
 var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var sharedUtils = require('@trackunit/shared-utils');
-var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
+var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
 
 const AssetTimezoneContext = react.createContext({ assetTimeZone: null });
 /** Returns the resolved asset timezone from the nearest AssetTimezoneProvider in the component tree. */
@@ -25,6 +25,23 @@ const convertToLocale = (userPreferenceLanguage) => {
     return userPreferenceLanguage;
 };
 
+/**
+ * Resolves the hour cycle that should be forced based on the current user's time-format preference.
+ *
+ * Returns `undefined` when the user has chosen "let the language decide" (the default), so that
+ * locale-based formatting keeps deciding 12H/24H. Returns `"h12"` for a 12-hour preference and
+ * `"h23"` for a 24-hour preference.
+ *
+ * Pass the result to `formatDateUtil(..., hourCycleOverride)` (or use `useDateAndTime`, `DateTime`,
+ * and `DateTimeCell`, which already apply it) to make displayed times honor the preference.
+ *
+ * @returns {Intl.LocaleHourCycleKey | undefined} The forced hour cycle, or `undefined` to defer to the locale.
+ */
+const useHourCycle = () => {
+    const { timeFormat } = reactCoreHooks.useCurrentUserTimeFormat();
+    return react.useMemo(() => dateAndTimeUtils.timeFormatToHourCycle(timeFormat), [timeFormat]);
+};
+
 const LANG_STORAGE_KEY = "i18nextLng";
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 const BrowserLocale = navigator.language ?? "en";
@@ -135,6 +152,7 @@ const useTimezone = () => {
  */
 const useDateAndTime = () => {
     const currentLocale = useLocale();
+    const hourCycle = useHourCycle();
     const { current, assetTimeZone, preferred } = useTimezone();
     const currentTimeZone = react.useMemo(() => current.id || preferred.id || assetTimeZone?.id, [current, assetTimeZone, preferred]);
     const getNowDate = react.useCallback(() => {
@@ -150,8 +168,8 @@ const useDateAndTime = () => {
      * @returns {string}
      */
     const formatDate = react.useCallback((date, format) => {
-        return dateAndTimeUtils.formatDateUtil(date, format, currentTimeZone, currentLocale);
-    }, [currentLocale, currentTimeZone]);
+        return dateAndTimeUtils.formatDateUtil(date, format, currentTimeZone, currentLocale, hourCycle);
+    }, [currentLocale, currentTimeZone, hourCycle]);
     /**
      * Formats a date using the custom locale and custom timezone.
      *
@@ -162,8 +180,8 @@ const useDateAndTime = () => {
      * @returns {string}
      */
     const formatDateWithTimezone = react.useCallback((date, format, timezone, locale) => {
-        return dateAndTimeUtils.formatDateUtil(date, format, timezone ?? currentTimeZone, locale ?? currentLocale);
-    }, [currentLocale, currentTimeZone]);
+        return dateAndTimeUtils.formatDateUtil(date, format, timezone ?? currentTimeZone, locale ?? currentLocale, hourCycle);
+    }, [currentLocale, currentTimeZone, hourCycle]);
     /**
      * Formats a date range using the current locale and time zone.
      *
@@ -519,5 +537,6 @@ exports.AssetTimezoneContext = AssetTimezoneContext;
 exports.convertToLocale = convertToLocale;
 exports.useAssetTimezoneContext = useAssetTimezoneContext;
 exports.useDateAndTime = useDateAndTime;
+exports.useHourCycle = useHourCycle;
 exports.useLocale = useLocale;
 exports.useTimezone = useTimezone;

package/index.esm.js

@@ -1,8 +1,8 @@
-import { createContext, useContext, useState, useCallback, useMemo } from 'react';
-import { Temporal, getTimeZone, toDateUtil, toZonedDateTimeUtil, formatDateUtil, formatRangeUtil, subtractYearsUtil, subtractMonthsUtil, subtractWeeksUtil, subtractDaysUtil, subtractHoursUtil, subtractMinutesUtil, addYearsUtil, addMonthsUtil, addWeeksUtil, addDaysUtil, addHoursUtil, addMinutesUtil, startOfMonthUtil, startOfWeekUtil, startOfDayUtil, startOfHourUtil, startOfMinuteUtil, endOfMonthUtil, endOfWeekUtil, endOfDayUtil, endOfHourUtil, endOfMinuteUtil, differenceInYearsUtil, differenceInMonthsUtil, differenceInWeeksUtil, differenceInDaysUtil, differenceInHoursUtil, differenceInMinutesUtil, differenceInSecondsUtil, isBetweenUtil, isTodayUtil, isFutureUtil, isPastUtil, isSameYearUtil, isSameMonthUtil, isSameWeekUtil, isSameDayUtil, timeSinceInYears, timeSinceInMonths, timeSinceInDays, timeSinceInHours, timeSinceInMinutes, timeSinceInSeconds, timeSinceAuto, toDuration, getDurationFormat, convertMillisecondsUtil, convertSecondsUtil, convertMinutesUtil, convertHoursUtil, dayNameUtil, daysUtil, monthNameUtil, monthsUtil, getUTCFromTimeZonedUtil, isEqualUtil } from '@trackunit/date-and-time-utils';
+import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { timeFormatToHourCycle, Temporal, getTimeZone, toDateUtil, toZonedDateTimeUtil, formatDateUtil, formatRangeUtil, subtractYearsUtil, subtractMonthsUtil, subtractWeeksUtil, subtractDaysUtil, subtractHoursUtil, subtractMinutesUtil, addYearsUtil, addMonthsUtil, addWeeksUtil, addDaysUtil, addHoursUtil, addMinutesUtil, startOfMonthUtil, startOfWeekUtil, startOfDayUtil, startOfHourUtil, startOfMinuteUtil, endOfMonthUtil, endOfWeekUtil, endOfDayUtil, endOfHourUtil, endOfMinuteUtil, differenceInYearsUtil, differenceInMonthsUtil, differenceInWeeksUtil, differenceInDaysUtil, differenceInHoursUtil, differenceInMinutesUtil, differenceInSecondsUtil, isBetweenUtil, isTodayUtil, isFutureUtil, isPastUtil, isSameYearUtil, isSameMonthUtil, isSameWeekUtil, isSameDayUtil, timeSinceInYears, timeSinceInMonths, timeSinceInDays, timeSinceInHours, timeSinceInMinutes, timeSinceInSeconds, timeSinceAuto, toDuration, getDurationFormat, convertMillisecondsUtil, convertSecondsUtil, convertMinutesUtil, convertHoursUtil, dayNameUtil, daysUtil, monthNameUtil, monthsUtil, getUTCFromTimeZonedUtil, isEqualUtil } from '@trackunit/date-and-time-utils';
 import { exhaustiveCheck } from '@trackunit/shared-utils';
+import { useCurrentUserTimeFormat, useCurrentUserTimeZonePreference } from '@trackunit/react-core-hooks';
 import { TimeZonePreference } from '@trackunit/iris-app-runtime-core-api';
-import { useCurrentUserTimeZonePreference } from '@trackunit/react-core-hooks';
 
 const AssetTimezoneContext = createContext({ assetTimeZone: null });
 /** Returns the resolved asset timezone from the nearest AssetTimezoneProvider in the component tree. */
@@ -23,6 +23,23 @@ const convertToLocale = (userPreferenceLanguage) => {
     return userPreferenceLanguage;
 };
 
+/**
+ * Resolves the hour cycle that should be forced based on the current user's time-format preference.
+ *
+ * Returns `undefined` when the user has chosen "let the language decide" (the default), so that
+ * locale-based formatting keeps deciding 12H/24H. Returns `"h12"` for a 12-hour preference and
+ * `"h23"` for a 24-hour preference.
+ *
+ * Pass the result to `formatDateUtil(..., hourCycleOverride)` (or use `useDateAndTime`, `DateTime`,
+ * and `DateTimeCell`, which already apply it) to make displayed times honor the preference.
+ *
+ * @returns {Intl.LocaleHourCycleKey | undefined} The forced hour cycle, or `undefined` to defer to the locale.
+ */
+const useHourCycle = () => {
+    const { timeFormat } = useCurrentUserTimeFormat();
+    return useMemo(() => timeFormatToHourCycle(timeFormat), [timeFormat]);
+};
+
 const LANG_STORAGE_KEY = "i18nextLng";
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 const BrowserLocale = navigator.language ?? "en";
@@ -133,6 +150,7 @@ const useTimezone = () => {
  */
 const useDateAndTime = () => {
     const currentLocale = useLocale();
+    const hourCycle = useHourCycle();
     const { current, assetTimeZone, preferred } = useTimezone();
     const currentTimeZone = useMemo(() => current.id || preferred.id || assetTimeZone?.id, [current, assetTimeZone, preferred]);
     const getNowDate = useCallback(() => {
@@ -148,8 +166,8 @@ const useDateAndTime = () => {
      * @returns {string}
      */
     const formatDate = useCallback((date, format) => {
-        return formatDateUtil(date, format, currentTimeZone, currentLocale);
-    }, [currentLocale, currentTimeZone]);
+        return formatDateUtil(date, format, currentTimeZone, currentLocale, hourCycle);
+    }, [currentLocale, currentTimeZone, hourCycle]);
     /**
      * Formats a date using the custom locale and custom timezone.
      *
@@ -160,8 +178,8 @@ const useDateAndTime = () => {
      * @returns {string}
      */
     const formatDateWithTimezone = useCallback((date, format, timezone, locale) => {
-        return formatDateUtil(date, format, timezone ?? currentTimeZone, locale ?? currentLocale);
-    }, [currentLocale, currentTimeZone]);
+        return formatDateUtil(date, format, timezone ?? currentTimeZone, locale ?? currentLocale, hourCycle);
+    }, [currentLocale, currentTimeZone, hourCycle]);
     /**
      * Formats a date range using the current locale and time zone.
      *
@@ -513,4 +531,4 @@ const useDateAndTime = () => {
     ]);
 };
 
-export { AssetTimezoneContext, convertToLocale, useAssetTimezoneContext, useDateAndTime, useLocale, useTimezone };
+export { AssetTimezoneContext, convertToLocale, useAssetTimezoneContext, useDateAndTime, useHourCycle, useLocale, useTimezone };

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@trackunit/react-date-and-time-hooks",
-  "version": "2.1.16-alpha-9d327375fc1.0",
+  "version": "2.1.19",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/date-and-time-utils": "1.13.25-alpha-9d327375fc1.0",
-    "@trackunit/iris-app-runtime-core-api": "1.16.25-alpha-9d327375fc1.0",
-    "@trackunit/shared-utils": "1.15.24-alpha-9d327375fc1.0",
-    "@trackunit/react-core-hooks": "1.17.29-alpha-9d327375fc1.0"
+    "@trackunit/date-and-time-utils": "1.13.28",
+    "@trackunit/iris-app-runtime-core-api": "1.16.28",
+    "@trackunit/shared-utils": "1.15.26",
+    "@trackunit/react-core-hooks": "1.17.32"
   },
   "devDependencies": {
-    "@trackunit/react-core-contexts-test": "1.17.25-alpha-9d327375fc1.0"
+    "@trackunit/react-core-contexts-test": "1.17.28"
   },
   "peerDependencies": {
     "react": "^19.0.0"

package/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./AssetTimezoneContext";
 export * from "./localeUtils";
 export * from "./useDateAndTime";
+export * from "./useHourCycle";
 export * from "./useLocale";
 export * from "./useTimezone";

package/src/useHourCycle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolves the hour cycle that should be forced based on the current user's time-format preference.
+ *
+ * Returns `undefined` when the user has chosen "let the language decide" (the default), so that
+ * locale-based formatting keeps deciding 12H/24H. Returns `"h12"` for a 12-hour preference and
+ * `"h23"` for a 24-hour preference.
+ *
+ * Pass the result to `formatDateUtil(..., hourCycleOverride)` (or use `useDateAndTime`, `DateTime`,
+ * and `DateTimeCell`, which already apply it) to make displayed times honor the preference.
+ *
+ * @returns {Intl.LocaleHourCycleKey | undefined} The forced hour cycle, or `undefined` to defer to the locale.
+ */
+export declare const useHourCycle: () => Intl.LocaleHourCycleKey | undefined;