@trackunit/react-date-and-time-components 1.5.17 → 1.6.0

package/index.cjs.js

@@ -219,18 +219,14 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
 const temporalArithmeticTypeMapping = {
     day: "days",
     days: "days",
-    week: "weeks",
-    weeks: "weeks",
-    month: "months",
-    months: "months",
 };
 
 /**
  * Calculate a date range based on a temporal period.
  *
  * @example
- * getDataRange({ direction: "next", count: 1, unit: "month" }); // { from: 2025-06-01, to: 2025-07-01 }
- * getDataRange({ direction: "last", count: 2, unit: "weeks" }); // { from: 2025-05-24, to: 2025-06-01 }
+ * getDataRange({ direction: "next", count: 7, unit: "days" }); // { from: 2025-06-01, to: 2025-07-01 }
+ * getDataRange({ direction: "last", count: 14, unit: "days" }); // { from: 2025-05-24, to: 2025-06-01 }
  */
 const useCalculateDateRange = () => {
     const { nowDate, startOf, endOf, subtract, add } = reactDateAndTimeHooks.useDateAndTime();
@@ -262,7 +258,7 @@ const useCalculateDateRange = () => {
  *
  * @example
  * formatTemporalPeriodLabel({ direction: "last", count: 2, unit: "days" }); // Last 2 days
- * formatTemporalPeriodLabel({ direction: "next", count: 1, unit: "week" }); // Next week
+ * formatTemporalPeriodLabel({ direction: "next", count: 7, unit: "days" }); // Next 7 days
  */
 const useFormatTemporalPeriodLabel = () => {
     const [t] = useTranslation();
@@ -366,12 +362,12 @@ const useCalculateCustomDateRangeDisabledDays = () => {
  * @example
  * getTemporalPeriodsInRange({
  *   temporalPeriods: [
- *     { direction: "next", count: 1, unit: "week" },
- *     { direction: "next", count: 1, unit: "month" },
+ *     { direction: "next", count: 7, unit: "days" },
+ *     { direction: "next", count: 30, unit: "days" },
  *   ],
  *   maxDaysInRange: 7,
  * });
- * ); // [{ direction: "next", count: 1, unit: "week" }]
+ * ); // [{ direction: "next", count: 7, unit: "days" }]
  */
 const useFilterTemporalPeriodsInRange = () => {
     const { difference } = reactDateAndTimeHooks.useDateAndTime();
@@ -416,10 +412,6 @@ const useFindTemporalUnit = () => {
     const temporalUnitsMap = react.useMemo(() => ({
         day: t("input.unit.day"),
         days: t("input.unit.days"),
-        week: t("input.unit.week"),
-        weeks: t("input.unit.weeks"),
-        month: t("input.unit.month"),
-        months: t("input.unit.months"),
     }), [t]);
     return react.useCallback((value) => {
         if (!value) {
@@ -435,7 +427,7 @@ const useFindTemporalUnit = () => {
  * @example
  * parseTemporalPeriodFromText("Last 2 days"); // { direction: "last", count: 2, unit: "days" }
  * parseTemporalPeriodFromText("next 3"); // { direction: "next", count: 3 }
- * parseTemporalPeriodFromText("1 month"); // {count: 1, unit: "month" }
+ * parseTemporalPeriodFromText("3 days"); // {count: 3, unit: "days" }
  */
 const useParseTemporalPeriodFromText = () => {
     const [t] = useTranslation();
@@ -447,8 +439,17 @@ const useParseTemporalPeriodFromText = () => {
         new RegExp(`${t("input.direction.next")}|${t("input.direction.last")}`, "i"))?.[0];
         const countMatch = value.match(/\d+/)?.[0];
         const unitMatch = value.match(
-        // Matches any of the translated time unit strings both plural and singular (days, day, weeks, week, months, month)
-        new RegExp(`${t("input.unit.days")}|${t("input.unit.day")}|${t("input.unit.weeks")}|${t("input.unit.week")}|${t("input.unit.months")}|${t("input.unit.month")}`, "i"))?.[0];
+        // Matches any of the translated time unit strings both plural and singular (days, day)
+        new RegExp(`${t("input.unit.days")}|${t("input.unit.day")}`, "i"))?.[0];
+        // Matches the string "today"
+        const todayMatch = value.match(new RegExp(`${t("input.today")}`, "i"))?.[0];
+        if (todayMatch) {
+            return {
+                direction: findTemporalDirection(directionMatch),
+                count: 1,
+                unit: "day",
+            };
+        }
         return {
             direction: findTemporalDirection(directionMatch),
             count: sharedUtils.nonNullable(countMatch) ? parseInt(countMatch) : undefined,
@@ -458,7 +459,7 @@ const useParseTemporalPeriodFromText = () => {
 };
 
 const DEFAULT_DIRECTIONS = ["last", "next"];
-const DEFAULT_COUNT = 1;
+const DEFAULT_COUNT = 7;
 /**
  * Generate all possible temporal period combinations for a given temporal period.
  * If direction is not provided, both "last" and "next" directions are used.
@@ -467,25 +468,20 @@ const DEFAULT_COUNT = 1;
  *
  * @example
  * createTemporalPeriodCombinations({ direction: "last", count: 2, unit: "days" }); // [{ direction: "last", count: 2, unit: "days" }]
- * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }, { direction: "next", count: 1, unit: "week" }, { direction: "next", count: 1, unit: "month" }]
+ * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }]
  */
 const createTemporalPeriodCombinations = ({ direction, count, unit, }) => {
     const directions = direction ? [direction] : DEFAULT_DIRECTIONS;
-    const isCountPlural = sharedUtils.nonNullable(count) ? count > 1 : false;
-    const units = unit
-        ? [unit]
-        : isCountPlural
-            ? ["days", "weeks", "months"]
-            : ["day", "week", "month"];
+    const _count = count ?? DEFAULT_COUNT;
+    const isCountPlural = _count > 1;
+    const _unit = isCountPlural ? "days" : "day";
     return (directions
-        .flatMap(_direction => {
-        return units.map((_unit) => {
-            return {
-                direction: _direction,
-                count: count ?? DEFAULT_COUNT,
-                unit: _unit,
-            };
-        });
+        .map((_direction) => {
+        return {
+            direction: _direction,
+            count: _count,
+            unit: _unit,
+        };
     })
         // If temporal direction isn't provided, filter out either of the 1 day options as they are both rendered as "Today"
         .filter((period, index, array) => {
@@ -537,9 +533,9 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         }
         const defaultCombinations = [
             { direction: allowedDirection ?? "last", count: 1, unit: "day" },
-            { direction: allowedDirection ?? "last", count: 1, unit: "week" },
-            { direction: allowedDirection ?? "last", count: 1, unit: "month" },
-            { direction: allowedDirection ?? "last", count: 12, unit: "months" },
+            { direction: allowedDirection ?? "last", count: 7, unit: "days" },
+            { direction: allowedDirection ?? "last", count: 30, unit: "days" },
+            { direction: allowedDirection ?? "last", count: 365, unit: "days" },
         ];
         return filterTemporalPeriodsInRange({ temporalPeriods: defaultCombinations, maxDaysInRange });
     }, [initialDateRangeOptions, filterTemporalPeriodsInRange, allowedDirection, maxDaysInRange]);

package/index.esm.js

@@ -217,18 +217,14 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, dataTestId,
 const temporalArithmeticTypeMapping = {
     day: "days",
     days: "days",
-    week: "weeks",
-    weeks: "weeks",
-    month: "months",
-    months: "months",
 };
 
 /**
  * Calculate a date range based on a temporal period.
  *
  * @example
- * getDataRange({ direction: "next", count: 1, unit: "month" }); // { from: 2025-06-01, to: 2025-07-01 }
- * getDataRange({ direction: "last", count: 2, unit: "weeks" }); // { from: 2025-05-24, to: 2025-06-01 }
+ * getDataRange({ direction: "next", count: 7, unit: "days" }); // { from: 2025-06-01, to: 2025-07-01 }
+ * getDataRange({ direction: "last", count: 14, unit: "days" }); // { from: 2025-05-24, to: 2025-06-01 }
  */
 const useCalculateDateRange = () => {
     const { nowDate, startOf, endOf, subtract, add } = useDateAndTime();
@@ -260,7 +256,7 @@ const useCalculateDateRange = () => {
  *
  * @example
  * formatTemporalPeriodLabel({ direction: "last", count: 2, unit: "days" }); // Last 2 days
- * formatTemporalPeriodLabel({ direction: "next", count: 1, unit: "week" }); // Next week
+ * formatTemporalPeriodLabel({ direction: "next", count: 7, unit: "days" }); // Next 7 days
  */
 const useFormatTemporalPeriodLabel = () => {
     const [t] = useTranslation();
@@ -364,12 +360,12 @@ const useCalculateCustomDateRangeDisabledDays = () => {
  * @example
  * getTemporalPeriodsInRange({
  *   temporalPeriods: [
- *     { direction: "next", count: 1, unit: "week" },
- *     { direction: "next", count: 1, unit: "month" },
+ *     { direction: "next", count: 7, unit: "days" },
+ *     { direction: "next", count: 30, unit: "days" },
  *   ],
  *   maxDaysInRange: 7,
  * });
- * ); // [{ direction: "next", count: 1, unit: "week" }]
+ * ); // [{ direction: "next", count: 7, unit: "days" }]
  */
 const useFilterTemporalPeriodsInRange = () => {
     const { difference } = useDateAndTime();
@@ -414,10 +410,6 @@ const useFindTemporalUnit = () => {
     const temporalUnitsMap = useMemo(() => ({
         day: t("input.unit.day"),
         days: t("input.unit.days"),
-        week: t("input.unit.week"),
-        weeks: t("input.unit.weeks"),
-        month: t("input.unit.month"),
-        months: t("input.unit.months"),
     }), [t]);
     return useCallback((value) => {
         if (!value) {
@@ -433,7 +425,7 @@ const useFindTemporalUnit = () => {
  * @example
  * parseTemporalPeriodFromText("Last 2 days"); // { direction: "last", count: 2, unit: "days" }
  * parseTemporalPeriodFromText("next 3"); // { direction: "next", count: 3 }
- * parseTemporalPeriodFromText("1 month"); // {count: 1, unit: "month" }
+ * parseTemporalPeriodFromText("3 days"); // {count: 3, unit: "days" }
  */
 const useParseTemporalPeriodFromText = () => {
     const [t] = useTranslation();
@@ -445,8 +437,17 @@ const useParseTemporalPeriodFromText = () => {
         new RegExp(`${t("input.direction.next")}|${t("input.direction.last")}`, "i"))?.[0];
         const countMatch = value.match(/\d+/)?.[0];
         const unitMatch = value.match(
-        // Matches any of the translated time unit strings both plural and singular (days, day, weeks, week, months, month)
-        new RegExp(`${t("input.unit.days")}|${t("input.unit.day")}|${t("input.unit.weeks")}|${t("input.unit.week")}|${t("input.unit.months")}|${t("input.unit.month")}`, "i"))?.[0];
+        // Matches any of the translated time unit strings both plural and singular (days, day)
+        new RegExp(`${t("input.unit.days")}|${t("input.unit.day")}`, "i"))?.[0];
+        // Matches the string "today"
+        const todayMatch = value.match(new RegExp(`${t("input.today")}`, "i"))?.[0];
+        if (todayMatch) {
+            return {
+                direction: findTemporalDirection(directionMatch),
+                count: 1,
+                unit: "day",
+            };
+        }
         return {
             direction: findTemporalDirection(directionMatch),
             count: nonNullable(countMatch) ? parseInt(countMatch) : undefined,
@@ -456,7 +457,7 @@ const useParseTemporalPeriodFromText = () => {
 };
 
 const DEFAULT_DIRECTIONS = ["last", "next"];
-const DEFAULT_COUNT = 1;
+const DEFAULT_COUNT = 7;
 /**
  * Generate all possible temporal period combinations for a given temporal period.
  * If direction is not provided, both "last" and "next" directions are used.
@@ -465,25 +466,20 @@ const DEFAULT_COUNT = 1;
  *
  * @example
  * createTemporalPeriodCombinations({ direction: "last", count: 2, unit: "days" }); // [{ direction: "last", count: 2, unit: "days" }]
- * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }, { direction: "next", count: 1, unit: "week" }, { direction: "next", count: 1, unit: "month" }]
+ * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }]
  */
 const createTemporalPeriodCombinations = ({ direction, count, unit, }) => {
     const directions = direction ? [direction] : DEFAULT_DIRECTIONS;
-    const isCountPlural = nonNullable(count) ? count > 1 : false;
-    const units = unit
-        ? [unit]
-        : isCountPlural
-            ? ["days", "weeks", "months"]
-            : ["day", "week", "month"];
+    const _count = count ?? DEFAULT_COUNT;
+    const isCountPlural = _count > 1;
+    const _unit = isCountPlural ? "days" : "day";
     return (directions
-        .flatMap(_direction => {
-        return units.map((_unit) => {
-            return {
-                direction: _direction,
-                count: count ?? DEFAULT_COUNT,
-                unit: _unit,
-            };
-        });
+        .map((_direction) => {
+        return {
+            direction: _direction,
+            count: _count,
+            unit: _unit,
+        };
     })
         // If temporal direction isn't provided, filter out either of the 1 day options as they are both rendered as "Today"
         .filter((period, index, array) => {
@@ -535,9 +531,9 @@ const DayRangeSelect = ({ className, dataTestId, disabled, selectedDateRange, on
         }
         const defaultCombinations = [
             { direction: allowedDirection ?? "last", count: 1, unit: "day" },
-            { direction: allowedDirection ?? "last", count: 1, unit: "week" },
-            { direction: allowedDirection ?? "last", count: 1, unit: "month" },
-            { direction: allowedDirection ?? "last", count: 12, unit: "months" },
+            { direction: allowedDirection ?? "last", count: 7, unit: "days" },
+            { direction: allowedDirection ?? "last", count: 30, unit: "days" },
+            { direction: allowedDirection ?? "last", count: 365, unit: "days" },
         ];
         return filterTemporalPeriodsInRange({ temporalPeriods: defaultCombinations, maxDaysInRange });
     }, [initialDateRangeOptions, filterTemporalPeriodsInRange, allowedDirection, maxDaysInRange]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.5.17",
+  "version": "1.6.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,16 +8,16 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.5.11",
-    "@trackunit/react-date-and-time-hooks": "1.4.7",
+    "@trackunit/react-components": "1.5.12",
+    "@trackunit/react-date-and-time-hooks": "1.4.8",
     "@trackunit/date-and-time-utils": "1.4.6",
     "@trackunit/css-class-variance-utilities": "1.4.6",
     "@trackunit/ui-icons": "1.4.6",
     "@trackunit/ui-design-tokens": "1.4.8",
     "@trackunit/shared-utils": "1.6.6",
-    "@trackunit/i18n-library-translation": "1.4.7",
+    "@trackunit/i18n-library-translation": "1.4.8",
     "@trackunit/react-test-setup": "1.1.6",
-    "@trackunit/react-form-components": "1.4.12",
+    "@trackunit/react-form-components": "1.4.14",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/DayRangeSelect/hooks/useCalculateDateRange/useCalculateDateRange.d.ts

@@ -4,7 +4,7 @@ import { TemporalPeriod } from "../../types";
  * Calculate a date range based on a temporal period.
  *
  * @example
- * getDataRange({ direction: "next", count: 1, unit: "month" }); // { from: 2025-06-01, to: 2025-07-01 }
- * getDataRange({ direction: "last", count: 2, unit: "weeks" }); // { from: 2025-05-24, to: 2025-06-01 }
+ * getDataRange({ direction: "next", count: 7, unit: "days" }); // { from: 2025-06-01, to: 2025-07-01 }
+ * getDataRange({ direction: "last", count: 14, unit: "days" }); // { from: 2025-05-24, to: 2025-06-01 }
  */
 export declare const useCalculateDateRange: () => ({ direction, count, unit }: TemporalPeriod) => DateRange;

package/src/DayRangeSelect/hooks/useFilterTemporalPeriodsInRange/useFilterTemporalPeriodsInRange.d.ts

@@ -5,12 +5,12 @@ import { TemporalPeriod } from "../../types";
  * @example
  * getTemporalPeriodsInRange({
  *   temporalPeriods: [
- *     { direction: "next", count: 1, unit: "week" },
- *     { direction: "next", count: 1, unit: "month" },
+ *     { direction: "next", count: 7, unit: "days" },
+ *     { direction: "next", count: 30, unit: "days" },
  *   ],
  *   maxDaysInRange: 7,
  * });
- * ); // [{ direction: "next", count: 1, unit: "week" }]
+ * ); // [{ direction: "next", count: 7, unit: "days" }]
  */
 export declare const useFilterTemporalPeriodsInRange: () => ({ temporalPeriods, maxDaysInRange, }: {
     temporalPeriods: Array<TemporalPeriod>;

package/src/DayRangeSelect/hooks/useFormatTemporalPeriodLabel/useFormatTemporalPeriodLabel.d.ts

@@ -4,6 +4,6 @@ import { TemporalPeriod } from "../../types";
  *
  * @example
  * formatTemporalPeriodLabel({ direction: "last", count: 2, unit: "days" }); // Last 2 days
- * formatTemporalPeriodLabel({ direction: "next", count: 1, unit: "week" }); // Next week
+ * formatTemporalPeriodLabel({ direction: "next", count: 7, unit: "days" }); // Next 7 days
  */
 export declare const useFormatTemporalPeriodLabel: () => (option: TemporalPeriod) => string;

package/src/DayRangeSelect/hooks/useParseTemporalPeriodFromText/useParseTemporalPeriodFromText.d.ts

@@ -5,6 +5,6 @@ import { TemporalPeriod } from "../../types";
  * @example
  * parseTemporalPeriodFromText("Last 2 days"); // { direction: "last", count: 2, unit: "days" }
  * parseTemporalPeriodFromText("next 3"); // { direction: "next", count: 3 }
- * parseTemporalPeriodFromText("1 month"); // {count: 1, unit: "month" }
+ * parseTemporalPeriodFromText("3 days"); // {count: 3, unit: "days" }
  */
 export declare const useParseTemporalPeriodFromText: () => (value: string) => Partial<TemporalPeriod>;

package/src/DayRangeSelect/types.d.ts

@@ -1,6 +1,6 @@
 import { DateRange } from "@trackunit/date-and-time-utils";
 import { TemporalArithmeticType, TemporalSameType } from "@trackunit/react-date-and-time-hooks";
-export type TemporalUnit = Exclude<TemporalArithmeticType | TemporalSameType, "year" | "hours" | "minutes" | "years">;
+export type TemporalUnit = Extract<TemporalArithmeticType | TemporalSameType, "day" | "days">;
 export type TemporalDirection = "next" | "last";
 export type TemporalPeriod = {
     direction: TemporalDirection;

package/src/DayRangeSelect/utils/createTemporalPeriodCombinations/createTemporalPeriodCombinations.d.ts

@@ -7,6 +7,6 @@ import { TemporalPeriod } from "../../types";
  *
  * @example
  * createTemporalPeriodCombinations({ direction: "last", count: 2, unit: "days" }); // [{ direction: "last", count: 2, unit: "days" }]
- * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }, { direction: "next", count: 1, unit: "week" }, { direction: "next", count: 1, unit: "month" }]
+ * createTemporalPeriodCombinations({ direction: "next", count: 1 }); // [{ direction: "next", count: 1, unit: "day" }]
  */
 export declare const createTemporalPeriodCombinations: ({ direction, count, unit, }: Partial<TemporalPeriod>) => Array<TemporalPeriod>;

package/translation.cjs.js

@@ -12,7 +12,7 @@ var translation = {
 	"input.today": "Heute",
 	"input.unit.day": "Tag",
 	"input.unit.days": "Tage",
-	"input.unit.month": "monat",
+	"input.unit.month": "Monat",
 	"input.unit.months": "Monate",
 	"input.unit.week": "Woche",
 	"input.unit.weeks": "Wochen",

package/translation.esm.js

@@ -10,7 +10,7 @@ var translation = {
 	"input.today": "Heute",
 	"input.unit.day": "Tag",
 	"input.unit.days": "Tage",
-	"input.unit.month": "monat",
+	"input.unit.month": "Monat",
 	"input.unit.months": "Monate",
 	"input.unit.week": "Woche",
 	"input.unit.weeks": "Wochen",