nit: FontSize.Small is just a string (it's a class name), so use it simply as a string

These options do not change for different renders, so you can define them outside of the component, so that they're defined just once. They're quite expensive to instanciate.

Just create a toplevel:

const DATE_FORMATTER = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' });

Because you'll have to use the same date formatter in SearchOverTime (see above), it would be a good idea to move the format part to another file. I'd suggest a new file src/utils/format.js.

In it you could have:

const DATE_FORMATTER = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' });

export function formatDate(date: Date) {
  return dateFormatter.format(date);
}

export function formatDateRange(date1: Date, date2: Date) {
  return formatDate(date1) + " - " + formatDate(date2);
}

And then from TimeRangeDropdown you could use formatDateRange and just add the parentheses and the extra space.

In the future formatDateRange could be improved to not display useless things (maybe), for example when the same year we wouldn't display it. But don't bother with that now.

Great idea!

I went ahead and moved the formatting logic into src/utils/format.ts as suggested. This will definitely help keep things clean and reusable.

Thanks for the feedback! 👍

you don't need the extra div, just add the space-between to the MenuItem directly.

Adding space-between directly to MenuItem does the job well for menu items only and leads to unexpected behavior for SelectedItem, as the children do not render as flexbox items. This is because MenuItem has display: flex set by default while SelectedItem does not.

SelectedItem	MenuItem

To maintain consistent flexbox behavior across both MenuItems and SelectedItem, I applied the following workaround:

1- Wrapped content within a flex container: Enclose the content of MenuItem within a flex container (i.e. a div with display: 'flex' and justifyContent: 'space-between').

2- Disabled display: flex on MenuItem by setting display: block on MenuItem to override its default flex display.
These changes ensure that both MenuItems and SelectedItem are displayed as flexbox items, preserving the intended layout and spacing.

Alertnatively, we could ditch the flex behaviour altogether and keep them inline only like this.

What do you think ?

thanks for the explanation, let's keep it like you did it, but please add a comment before line 47 with this explanation:

// This extra flexible div is needed, so that the information looks the same in 
// both the MenuItem (in the dropdown options) and the SelectedItem (in
// the dropdown, when the dropdown is closed).

you know what, I just realized that Intl.DateTimeFormat knows how to format ranges (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange).
But I'm not sure we want that in this context.

From my test, the best formatter would be:

const dateRangeFormatter = new Intl.DateTimeFormat('en-US', {
  month: "short",
  day: "numeric"
});
// then
export function formatDateRange(date1: Date, date2: Date) {
  return dateRangeFormatter.formatRange(date1, date2);
}

By not specifying the year, it would show up only when needed.

Can you please try that and see how this looks?

@julienw
For comparison, here is how it looks:

month: "short", day: "numeric"	dateStyle: 'medium'

I like how concise this format is while still conveying the complete information.

Yeah, I'd like the concise format better if this was showing up separate from the others.
But in this case, I find the format at the right easier to parse visually, because the same operation is present at the same location for every rows.
So let's keep dateStyle: medium, but thanks for trying it!