From 5b3a5d817929fa1e73665e8c5ef4b501d5948749 Mon Sep 17 00:00:00 2001
From: Thodoris Greasidis <thgreasi@gmail.com>
Date: Thu, 21 Dec 2023 15:37:58 +0200
Subject: [PATCH] Update date-fns to v3.0.5

Change-type: patch
---
 package.json                                   |  2 +-
 .../Renderer/widgets/DurationWidget.tsx        | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 57f22b3c6..a981b3f0b 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "color": "^3.2.1",
     "color-hash": "^1.1.1",
     "copy-to-clipboard": "^3.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^3.0.5",
     "grommet": "~2.18.0",
     "hast-util-sanitize": "^3.0.2",
     "json-e": "^4.4.3",
diff --git a/src/components/Renderer/widgets/DurationWidget.tsx b/src/components/Renderer/widgets/DurationWidget.tsx
index 54578ef7c..90d08816a 100644
--- a/src/components/Renderer/widgets/DurationWidget.tsx
+++ b/src/components/Renderer/widgets/DurationWidget.tsx
@@ -22,23 +22,25 @@ export const DurationWidget = widgetFactory('Duration', {}, [JsonTypes.object])(
 				return '';
 			}
 			const customInterval: { [key: string]: string } = {};
-			Object.entries(interval).forEach(([key, value]) => {
-				if (value != null && value < 10) {
-					customInterval[key] = `0${value}`;
-				} else {
-					customInterval[key] = `${value}`;
+			for (const [key, value] of Object.entries(interval)) {
+				if (value == null) {
+					continue;
 				}
-			});
+				customInterval[key] = value < 10 ? `0${value}` : `${value}`;
+			}
 			let durationText = '';
 			if (!!interval.years) {
 				durationText += `${customInterval.years}y `;
 			}
-			if (!!interval.years || !!interval.months) {
+			if (durationText.length > 0 || !!interval.months) {
 				durationText += `${customInterval.months}m `;
 			}
-			if (!!interval.years || !!interval.months || !!interval.days) {
+			if (durationText.length > 0 || !!interval.days) {
 				durationText += `${customInterval.days}d `;
 			}
+			customInterval.hours ??= '00';
+			customInterval.minutes ??= '00';
+			customInterval.seconds ??= '00';
 			durationText += `${customInterval.hours}:${customInterval.minutes}:${customInterval.seconds}`;
 			return durationText;
 		}, []);