@trackunit/react-date-and-time-components 1.13.38 → 1.14.0

package/index.cjs.js

@@ -137,6 +137,90 @@ const DateTimeHumanized = ({ value }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx(DateTime, { format: tooltipFormat, value: value }), children: jsxRuntime.jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
 };
 
+const temporalArithmeticTypeMapping = {
+    day: "days",
+    days: "days",
+    hour: "hours",
+    hours: "hours",
+    month: "months",
+    months: "months",
+};
+
+/**
+ * Calculate a date range based on a temporal period.
+ *
+ * @example
+ * 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();
+    return react.useCallback(({ direction, count, unit }) => {
+        const unitType = temporalArithmeticTypeMapping[unit];
+        if (direction === "next") {
+            // To get the right number of days, calculate the end date and subtract 1 day
+            const endDate = add(nowDate, count, unitType);
+            const adjustedEndDate = subtract(endDate, 1, "days");
+            return {
+                start: startOf(nowDate, "day"),
+                end: endOf(adjustedEndDate, "day"),
+            };
+        }
+        else {
+            // To get the right number of days, calculate the start date and add 1 day
+            const startDate = subtract(nowDate, count, unitType);
+            const adjustedStartDate = add(startDate, 1, "days");
+            return {
+                start: startOf(adjustedStartDate, "day"),
+                end: endOf(nowDate, "day"),
+            };
+        }
+    }, [nowDate, startOf, endOf, subtract, add]);
+};
+
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ 
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {ReactElement} DayPicker component
+ */
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
+    const { subtract } = reactDateAndTimeHooks.useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
+    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                if (value) {
+                    onDaySelect?.(value);
+                }
+            }, selectRange: false, tileDisabled: ({ date, view }) => {
+                if (view === "month") {
+                    if (typeof disabledDays === "function") {
+                        return disabledDays(date);
+                    }
+                    if (Array.isArray(disabledDays)) {
+                        return disabledDays.some(dateToCheck => {
+                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
+                        });
+                    }
+                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                        return !(date.getTime() >
+                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                    }
+                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                        const dateRange = calculateDateRange({
+                            direction: "last",
+                            count: disabledDays.furtherBackThanDays,
+                            unit: "day",
+                        });
+                        if (dateRange.start && dateRange.end) {
+                            return date < dateRange.start || date > dateRange.end;
+                        }
+                    }
+                }
+                return false;
+            }, value: selectedDay ?? null }) }));
+};
+
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
@@ -216,47 +300,6 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
                 newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsxRuntime.jsx(reactComponents.Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
 };
 
-const temporalArithmeticTypeMapping = {
-    day: "days",
-    days: "days",
-    hour: "hours",
-    hours: "hours",
-    month: "months",
-    months: "months",
-};
-
-/**
- * Calculate a date range based on a temporal period.
- *
- * @example
- * 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();
-    return react.useCallback(({ direction, count, unit }) => {
-        const unitType = temporalArithmeticTypeMapping[unit];
-        if (direction === "next") {
-            // To get the right number of days, calculate the end date and subtract 1 day
-            const endDate = add(nowDate, count, unitType);
-            const adjustedEndDate = subtract(endDate, 1, "days");
-            return {
-                start: startOf(nowDate, "day"),
-                end: endOf(adjustedEndDate, "day"),
-            };
-        }
-        else {
-            // To get the right number of days, calculate the start date and add 1 day
-            const startDate = subtract(nowDate, count, unitType);
-            const adjustedStartDate = add(startDate, 1, "days");
-            return {
-                start: startOf(adjustedStartDate, "day"),
-                end: endOf(nowDate, "day"),
-            };
-        }
-    }, [nowDate, startOf, endOf, subtract, add]);
-};
-
 /**
  * Format a temporal period into a label.
  *
@@ -650,49 +693,6 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, select
                 } })] }));
 };
 
-/**
- * The DayPicker component is used when the user needs to select a date.
- 
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {ReactElement} DayPicker component
- */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
-    const { subtract } = reactDateAndTimeHooks.useDateAndTime();
-    const calculateDateRange = useCalculateDateRange();
-    return (jsxRuntime.jsx("div", { "data-testid": dataTestId, children: jsxRuntime.jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: tailwindMerge.twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
-                if (value) {
-                    onDaySelect?.(value);
-                }
-            }, selectRange: false, tileDisabled: ({ date, view }) => {
-                if (view === "month") {
-                    if (typeof disabledDays === "function") {
-                        return disabledDays(date);
-                    }
-                    if (Array.isArray(disabledDays)) {
-                        return disabledDays.some(dateToCheck => {
-                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
-                        });
-                    }
-                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
-                        return !(date.getTime() >
-                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
-                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
-                    }
-                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
-                        const dateRange = calculateDateRange({
-                            direction: "last",
-                            count: disabledDays.furtherBackThanDays,
-                            unit: "day",
-                        });
-                        if (dateRange.start && dateRange.end) {
-                            return date < dateRange.start || date > dateRange.end;
-                        }
-                    }
-                }
-                return false;
-            }, value: selectedDay ?? null }) }));
-};
-
 const cvaTimelineElement = cssClassVarianceUtilities.cvaMerge(["flex", "group/timeline"], {
     variants: {
         selected: {

package/index.esm.js

@@ -135,6 +135,90 @@ const DateTimeHumanized = ({ value }) => {
     return (jsx(Tooltip, { label: jsx(DateTime, { format: tooltipFormat, value: value }), children: jsx(DateTime, { className: "underline decoration-neutral-300 decoration-dotted", fromNow: true, value: value }) }));
 };
 
+const temporalArithmeticTypeMapping = {
+    day: "days",
+    days: "days",
+    hour: "hours",
+    hours: "hours",
+    month: "months",
+    months: "months",
+};
+
+/**
+ * Calculate a date range based on a temporal period.
+ *
+ * @example
+ * 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();
+    return useCallback(({ direction, count, unit }) => {
+        const unitType = temporalArithmeticTypeMapping[unit];
+        if (direction === "next") {
+            // To get the right number of days, calculate the end date and subtract 1 day
+            const endDate = add(nowDate, count, unitType);
+            const adjustedEndDate = subtract(endDate, 1, "days");
+            return {
+                start: startOf(nowDate, "day"),
+                end: endOf(adjustedEndDate, "day"),
+            };
+        }
+        else {
+            // To get the right number of days, calculate the start date and add 1 day
+            const startDate = subtract(nowDate, count, unitType);
+            const adjustedStartDate = add(startDate, 1, "days");
+            return {
+                start: startOf(adjustedStartDate, "day"),
+                end: endOf(nowDate, "day"),
+            };
+        }
+    }, [nowDate, startOf, endOf, subtract, add]);
+};
+
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ 
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {ReactElement} DayPicker component
+ */
+const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
+    const { subtract } = useDateAndTime();
+    const calculateDateRange = useCalculateDateRange();
+    return (jsx("div", { "data-testid": dataTestId, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
+                if (value) {
+                    onDaySelect?.(value);
+                }
+            }, selectRange: false, tileDisabled: ({ date, view }) => {
+                if (view === "month") {
+                    if (typeof disabledDays === "function") {
+                        return disabledDays(date);
+                    }
+                    if (Array.isArray(disabledDays)) {
+                        return disabledDays.some(dateToCheck => {
+                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
+                        });
+                    }
+                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
+                        return !(date.getTime() >
+                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
+                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
+                    }
+                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
+                        const dateRange = calculateDateRange({
+                            direction: "last",
+                            count: disabledDays.furtherBackThanDays,
+                            unit: "day",
+                        });
+                        if (dateRange.start && dateRange.end) {
+                            return date < dateRange.start || date > dateRange.end;
+                        }
+                    }
+                }
+                return false;
+            }, value: selectedDay ?? null }) }));
+};
+
 /**
  * The DayRangePicker component should be used when the user needs to select a range of dates.
  *
@@ -214,47 +298,6 @@ const DayRangePicker = ({ onRangeSelect, selectedDays, disabledDays, "data-testi
                 newRange.end ? [newRange.start ?? null, newRange.end ?? null] : (newRange.start ?? null) }), jsx("hr", {}), jsxs("div", { className: "flex w-full justify-between gap-2 px-4 py-3", children: [jsx(Button, { className: "mr-auto", "data-testid": "range-popover-clear-button", onClick: clearSelectedDays, size: "small", variant: "secondary", children: t("layout.actions.clear") }), jsxs("div", { children: [jsx(Button, { "data-testid": "range-popover-cancel-button", onClick: () => handleCancel(), size: "small", variant: "ghost-neutral", children: cancelButtonLabel ? cancelButtonLabel : t("layout.actions.cancel") }), jsx(Button, { "data-testid": "range-popover-apply-button", disabled: !newRange.start || !newRange.end, onClick: () => handleApply(), size: "small", children: t("layout.actions.apply") })] })] })] }));
 };
 
-const temporalArithmeticTypeMapping = {
-    day: "days",
-    days: "days",
-    hour: "hours",
-    hours: "hours",
-    month: "months",
-    months: "months",
-};
-
-/**
- * Calculate a date range based on a temporal period.
- *
- * @example
- * 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();
-    return useCallback(({ direction, count, unit }) => {
-        const unitType = temporalArithmeticTypeMapping[unit];
-        if (direction === "next") {
-            // To get the right number of days, calculate the end date and subtract 1 day
-            const endDate = add(nowDate, count, unitType);
-            const adjustedEndDate = subtract(endDate, 1, "days");
-            return {
-                start: startOf(nowDate, "day"),
-                end: endOf(adjustedEndDate, "day"),
-            };
-        }
-        else {
-            // To get the right number of days, calculate the start date and add 1 day
-            const startDate = subtract(nowDate, count, unitType);
-            const adjustedStartDate = add(startDate, 1, "days");
-            return {
-                start: startOf(adjustedStartDate, "day"),
-                end: endOf(nowDate, "day"),
-            };
-        }
-    }, [nowDate, startOf, endOf, subtract, add]);
-};
-
 /**
  * Format a temporal period into a label.
  *
@@ -648,49 +691,6 @@ const DayRangeSelect = ({ className, "data-testid": dataTestId, disabled, select
                 } })] }));
 };
 
-/**
- * The DayPicker component is used when the user needs to select a date.
- 
- * @param {DayPickerProps} props - The props for the DayPicker component
- * @returns {ReactElement} DayPicker component
- */
-const DayPicker = ({ onDaySelect, disabledDays, selectedDay, language, className, "data-testid": dataTestId, }) => {
-    const { subtract } = useDateAndTime();
-    const calculateDateRange = useCalculateDateRange();
-    return (jsx("div", { "data-testid": dataTestId, children: jsx(Calendar, { activeStartDate: selectedDay ?? undefined, allowPartialRange: true, className: twMerge("custom-day-picker", "range-picker", className, "p-0"), locale: language, onChange: value => {
-                if (value) {
-                    onDaySelect?.(value);
-                }
-            }, selectRange: false, tileDisabled: ({ date, view }) => {
-                if (view === "month") {
-                    if (typeof disabledDays === "function") {
-                        return disabledDays(date);
-                    }
-                    if (Array.isArray(disabledDays)) {
-                        return disabledDays.some(dateToCheck => {
-                            return dateToCheck instanceof Date && dateToCheck.toDateString() === date.toDateString();
-                        });
-                    }
-                    if (typeof disabledDays === "object" && "after" in disabledDays && "before" in disabledDays) {
-                        return !(date.getTime() >
-                            (disabledDays.before ? subtract(disabledDays.before, 1, "days").getTime() : date.getTime()) &&
-                            date.getTime() < (disabledDays.after?.getTime() ?? date.getTime()));
-                    }
-                    if (typeof disabledDays === "object" && "furtherBackThanDays" in disabledDays) {
-                        const dateRange = calculateDateRange({
-                            direction: "last",
-                            count: disabledDays.furtherBackThanDays,
-                            unit: "day",
-                        });
-                        if (dateRange.start && dateRange.end) {
-                            return date < dateRange.start || date > dateRange.end;
-                        }
-                    }
-                }
-                return false;
-            }, value: selectedDay ?? null }) }));
-};
-
 const cvaTimelineElement = cvaMerge(["flex", "group/timeline"], {
     variants: {
         selected: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-date-and-time-components",
-  "version": "1.13.38",
+  "version": "1.14.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,14 +8,14 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.14.33",
-    "@trackunit/date-and-time-utils": "1.10.26",
-    "@trackunit/react-date-and-time-hooks": "1.10.35",
-    "@trackunit/css-class-variance-utilities": "1.10.26",
-    "@trackunit/ui-icons": "1.10.26",
-    "@trackunit/shared-utils": "1.12.26",
-    "@trackunit/i18n-library-translation": "1.10.28",
-    "@trackunit/react-form-components": "1.11.33",
+    "@trackunit/react-components": "1.15.0",
+    "@trackunit/date-and-time-utils": "1.11.0",
+    "@trackunit/react-date-and-time-hooks": "1.11.0",
+    "@trackunit/css-class-variance-utilities": "1.11.0",
+    "@trackunit/ui-icons": "1.11.0",
+    "@trackunit/shared-utils": "1.13.0",
+    "@trackunit/i18n-library-translation": "1.11.0",
+    "@trackunit/react-form-components": "1.12.0",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
     "react-calendar": "^6.0.0"

package/src/index.d.ts

@@ -1,4 +1,11 @@
-export * from "./dateTime";
+export * from "./dateTime/DateTime";
+export * from "./dateTime/DateTimeHumanized";
 export * from "./DayPicker";
-export * from "./DayRangeSelect";
-export * from "./Timeline";
+export * from "./DayRangeSelect/DayRangeSelect";
+export * from "./DayRangeSelect/hooks/useCalculateDateRange/useCalculateDateRange";
+export * from "./DayRangeSelect/hooks/useFormatTemporalPeriodLabel/useFormatTemporalPeriodLabel";
+export * from "./DayRangeSelect/types";
+export * from "./DayRangeSelect/utils/formatCustomDateRangeLabel/formatCustomDateRangeLabel";
+export * from "./DayRangeSelect/utils/isTemporalPeriod/isTemporalPeriod";
+export * from "./Timeline/Timeline";
+export * from "./Timeline/TimelineElement";

package/translation.cjs6.js

@@ -13,7 +13,7 @@ var translation = {
 	"input.unit.day": "päivä",
 	"input.unit.days": "päivää",
 	"input.unit.hour": "tuntiin",
-	"input.unit.hours": "hours",
+	"input.unit.hours": "tuntia",
 	"input.unit.month": "kuukausi",
 	"input.unit.months": "kuukautta",
 	"input.unit.week": "viikko",

package/translation.esm6.js

@@ -11,7 +11,7 @@ var translation = {
 	"input.unit.day": "päivä",
 	"input.unit.days": "päivää",
 	"input.unit.hour": "tuntiin",
-	"input.unit.hours": "hours",
+	"input.unit.hours": "tuntia",
 	"input.unit.month": "kuukausi",
 	"input.unit.months": "kuukautta",
 	"input.unit.week": "viikko",

package/src/DayRangeSelect/index.d.ts

@@ -1,6 +0,0 @@
-export * from "./DayRangeSelect";
-export * from "./hooks/useCalculateDateRange/useCalculateDateRange";
-export * from "./hooks/useFormatTemporalPeriodLabel/useFormatTemporalPeriodLabel";
-export * from "./types";
-export * from "./utils/formatCustomDateRangeLabel/formatCustomDateRangeLabel";
-export * from "./utils/isTemporalPeriod/isTemporalPeriod";

package/src/Timeline/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Timeline';
-export * from './TimelineElement';

package/src/dateTime/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./DateTime";
-export * from "./DateTimeHumanized";