feat: add displayTimezone option to datetime input

[EoinFalconer]

Remaining work

• Replace momentjs with date-fns but maintain backwards compatibility.
• Load the time zone list using Intl.DateTimeFormat instead of the large dependency.
• Land the UI of displayTimeZone option on datetime.
• Add timeZoneScope as a concept to the codebase so that many different time zone scopes can be held.
• Add allowTimeZoneSwitch to let devs decide whether the timezone is fixed or user decided.
• Move useTimeZone out of the scheduledPublishing folder.
• Fix Calendar.tsx to ensure month and year are respecting the time zone.
• Fix the dropdown list of timezones to be more user friendly.

Description

Adding the ability to add a `displayTimezone` option to the `datetime` input. This allows you to specify the timezone in which the stored UTC string from content lake will be displayed. When enabled, a tooltip is shown at the bottom left of the input field which indicates the timezone the field is representing. When you start editing this disappears.

A common use case here could be anything local that you would be working on in another timezone, for example concert times, apartment viewing times etc. etc. which are hard to work with today as the studio (just like the Date API) respects only the browsers relative display of the UTC string.

We have lots of signal on this one in this thread, as well as directly from users.

In addition to this, I decided to give it a go of removing moment from the @sanity/util package as a testbed how we should go about removing it across the entire codebase.

I am using the new date-fns/tz and date-fns/utc packages from date-fns. The reason for these is that they are very lightweight, TZDateMini which I am using here is only 916 B, which is a whopper difference from the locale bloat from moment-timezone dep we would need to make this work with moment.

As we have the ability to add custom date formats via the options on the datetime input and this is documented as support moment.js formats, I decided to write a formatter that would use the Intl.DateTimeFormat.format functionality instead by mapping the moment formatting to that format object.

What to review

* The naming of `displayTimezone` is worth a discussion. * The UI that I have chosen, with the text below should also be taken into consideration as to whether that is the best approach. * Browser support, not baking locales and timezones into the package and instead relying on the `Intl.DateTimeFormat` browser API means that browser versions [outside the widely supported](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#browser_compatibility) will not work.

Testing

Notes for release

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	❌ Failed (Inspect)			Mar 25, 2025 11:37am
performance-studio	❌ Failed (Inspect)			Mar 25, 2025 11:37am
test-studio	❌ Failed (Inspect)			Mar 25, 2025 11:37am

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Mar 25, 2025 11:37am
test-next-studio	⬜️ Ignored (Inspect)	Visit Preview		Mar 25, 2025 11:37am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Mar 6, 2025 5:40 PM (UTC)

❌ Failed Tests (3) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 7s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	❌ Failed (Inspect)	1m 56s	4	0	2
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	39s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	23s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	❌ Failed (Inspect)	1m 42s	14	0	1
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 34s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 42s	21	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	12s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	26s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 36s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[github-actions]

⚡️ Editor Performance Report

Updated Tue, 14 Jan 2025 16:40:44 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
synthetic (title)	18.5 efps (54ms)	19.2 efps (52ms)	-2ms (-3.7%)	✅
synthetic (string inside object)	18.5 efps (54ms)	18.9 efps (53ms)	-1ms (-1.9%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
synthetic (title)	54ms	57ms	59ms	267ms	1033ms	12.9s
synthetic (string inside object)	54ms	56ms	67ms	528ms	1313ms	8.6s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
synthetic (title)	52ms	55ms	65ms	289ms	902ms	13.3s
synthetic (string inside object)	53ms	55ms	64ms	476ms	1229ms	8.5s

📚 Glossary

column definitions

• benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
• latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
• p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
• p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
• p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
• blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
• test duration — how long the test run took to complete.