Replace flatpickr with custom spectrum date picker

[aptkingston]

Description

This PR removes our existing date picker (flatpickr) and replaces it with one built from scratch, adhering to the spectrum design system to match our other components.

The main motivation for this was to attempt to fix issues with dates and timezones that have been around far too long, but we'll need lots of testing to confirm whether we've fixed those issues or not.

The new date picker has pretty much an identical API to the old one, with 2 small differences:

• If time is enabled, the time is now always displayed in the 24 hour format
• The range prop has been removed. The places we used range pickers were backups and audit logs, so I've added a new date range picker dedicated component for these use cases.

Parsing updates

I think I've resolved some issues where date only fields were being displayed as the day before, when used in combination with a timezone field in an external database. More testing will be needed to confirm, but I believe it's fixed.

I've also pulled out this parsing into an external util so other components can benefit from it (e.g. when being displayed inside grids).

Screenshots

Date + time

Date only

Repositioning as required

Theme support

Date range picker

A simple component which just combines 2 date pickers. It intelligently will set the first date to the start of the day, and the last date to the end of the day. Setting either will automatically set both, and clearing either will clear both. Setting the start date to after the end date, or the end date before the start date, will update the dates according to maintain proper order. As mentioned before, this is only used for audit log and backup filtering.

Grid updates

I've refactored significant portions of the grid so that it now supports overflow. There was a major restriction before that content could not overflow outside of the grid bounds, and this caused a few issues (e.g. the new row buttons are rendered on top of popovers) and other things users have complained about (e.g. large padding required at the bottom of the grid internally) and just other limitations (a very large minimum height was required).

My changes here allow popovers within the grid to overflow, solving those issues completely.

Full list of changes:

• All grid cells that use popovers when expanded will overflow the grid without issues. These are dates, options, multi options, long form text, JSON, attachments, relationships, user columns, signatures.
• Other grid popovers also overflow as expected - right click menu, edit column popover, add column popover etc.
• New row buttons now do not overlap popovers
• Rewrote position_dropdown.js logic entirely to be far more robust, customisable and maintainable. Popovers throughout the platform will now be much more intelligent about avoiding screen edges.
• These new grid popovers use new and improved repositioning logic to avoid screen edges. They will render themselves as close to the anchor as possible without blocking the anchor.
• Cell popovers disappear when scrolling or using the mouse wheel, so you shouldn't be able to ever see a popover that is not rendered in the correct place.
• Grid minimum height substantially reduced, as well as the internal padding:
  .
  The min height is now just enough to allow the new row component to be properly displayed:
  
• Sped up reordering speed when dragging columns

A few repositioning examples:
Rendering below when space allows:

Rendering centered beside the cell when there isn't room below:

Locked to screen bottom edge and positioned to the side, when no room to center align beside:

Locale awareness

The new date picker will display dates according to the user's locale.

en-GB locale (UK) using DD/MM/YYYY:

en-US locale (USA) using M/D/YYYY:

de-DE locale (Germany) using D.M.YYYY:

ko-KR locale (Korea) using yyyy. M. d:

Addresses

• https://linear.app/budibase/issue/BUDI-7561/replace-flatpickr
• [BUDI-7488] Make DateTime Picker follow selected Theme #11772
• [BUDI-7561] Replace flatpickr #11894
• [BUDI-7595] Date only external date field seems to be affected by time zoning. #11977

Launchcontrol

Replaced date picker with a new and improved spectrum-themed date picker.

Feature branch env

Feature Branch Link

[deanhannigan]

In general, LGTM! Really solid upgrades for the popover positioning! Queries and some minor issues below.

Bug - Context action menu in portal app list and app sidebar is squashing even after repositioning.

[aptkingston]

Bug - Context action menu in portal app list and app sidebar is squashing even after repositioning.

Nice - in general all action menus were prone to this. I've updated the core action menu component so that they'll never resize to fit (just reposition).

[deanhannigan]

LGTM! 🚀