Refactor DateSeparator using MVVM and move to shared-components (#32482)

* Refactor DateSeparator using MVVM and move to shared-components

* Add a few more stories, tests and screenshots

* Use the shared component and viewmodel in element-web

* Renaming custom content property an updating snapshots

* Fix lint errors and update snapshot after merge

* Change lifecycle handling for DateSeparatoreViewModel in components where manual handling is preferrable over wrapper component.

* Move context menu from viewmodel to shared components - step 1

* Create a jump to date picker component in shared components

* Add tests for coverage and fix layout issues and roving indexes

* Make element-web use the new component

* Simplify context menu and adjusting tests

* The HTMLExport now render shared components and need a I18nContext.Provider

* Updating unit tests for context menu

* Changed to {translate: _t} to let scripts pick up translations

* Fix lint issue and updating screenshots after merge

* Update snaps for element web components

* Renaming MVVM view components with suffix View.

* Fixing problem with input date calendar icon and system dark theme

* Changed the rendering of the menu and added a separate button component

* Handle input control with useRef in onKeyDown

* Updating DateSeparator snapshots on unit tests

* Updating layout after compound Menu got a className property

* Move files to new subfolder after merge

* Updated snapshot after merge

* Updating lock file

* Updates to styling from PR review

* Updates to focus/blur functionality

* Fixed tabbing and export documentation to stories

* Updated snapshots

---------

Co-authored-by: Zack <zazi21@student.bth.se>

packages/shared-components/src/utils/DateUtils.test.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { describe, it, expect } from "vitest";
+
+import { formatSeconds, formatDateForInput } from "./DateUtils";
+
+describe("formatSeconds", () => {
+    it("correctly formats time with hours", () => {
+        expect(formatSeconds(60 * 60 * 3 + 60 * 31 + 55)).toBe("03:31:55");
+        expect(formatSeconds(60 * 60 * 3 + 60 * 0 + 55)).toBe("03:00:55");
+        expect(formatSeconds(60 * 60 * 3 + 60 * 31 + 0)).toBe("03:31:00");
+        expect(formatSeconds(-(60 * 60 * 3 + 60 * 31 + 0))).toBe("-03:31:00");
+    });
+
+    it("correctly formats time without hours", () => {
+        expect(formatSeconds(60 * 60 * 0 + 60 * 31 + 55)).toBe("31:55");
+        expect(formatSeconds(60 * 60 * 0 + 60 * 0 + 55)).toBe("00:55");
+        expect(formatSeconds(60 * 60 * 0 + 60 * 31 + 0)).toBe("31:00");
+        expect(formatSeconds(-(60 * 60 * 0 + 60 * 31 + 0))).toBe("-31:00");
+    });
+});
+
+describe("formatDateForInput", () => {
+    it.each([["1993-11-01"], ["1066-10-14"], ["0571-04-22"], ["0062-02-05"]])(
+        "should format %s",
+        (dateString: string) => {
+            expect(formatDateForInput(new Date(dateString))).toBe(dateString);
+        },
+    );
+});

packages/shared-components/src/utils/DateUtils.ts

@@ -33,3 +33,17 @@ export function formatSeconds(inSeconds: number): string {
 
     return output;
 }
+
+/**
+ * Formats dates to be compatible with attributes of a `<input type="date">`. Dates
+ * should be formatted like "2020-06-23" (formatted according to ISO8601).
+ *
+ * @param date The date to format.
+ * @returns The date string in ISO8601 format ready to be used with an `<input>`
+ */
+export function formatDateForInput(date: Date): string {
+    const year = `${date.getFullYear()}`.padStart(4, "0");
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const day = `${date.getDate()}`.padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}

packages/shared-components/src/utils/humanize.ts

@@ -53,3 +53,7 @@ export function humanizeTime(timeMillis: number, i18nApi?: I18nApi): string {
         return _t("time|in_n_days", { num: days });
     }
 }
+
+export function humanizeRelativeTime(i18nApi?: I18nApi): Intl.RelativeTimeFormat {
+    return new Intl.RelativeTimeFormat(i18nApi?.language, { style: "long", numeric: "auto" });
+}