From 12d1a100d1bc1345ed9330b32559b580533d524e Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Tue, 14 May 2024 16:09:44 +0200
Subject: [PATCH] allow shortcuts with null value

---
 .../src/DateField/DateField.tsx                 |  5 +++--
 .../bento-design-system/src/DateField/Input.tsx | 17 +++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/bento-design-system/src/DateField/DateField.tsx b/packages/bento-design-system/src/DateField/DateField.tsx
index 6f5e4ce14..1148cba9a 100644
--- a/packages/bento-design-system/src/DateField/DateField.tsx
+++ b/packages/bento-design-system/src/DateField/DateField.tsx
@@ -18,11 +18,11 @@ export type ShortcutProps<Value> = {
 };
 type SingleDateFieldProps = {
   type?: "single";
-  shortcuts?: ShortcutProps<Date>[];
+  shortcuts?: ShortcutProps<Date | null>[];
 } & FieldProps<Date | null>;
 type RangeDateFieldProps = {
   type: "range";
-  shortcuts?: ShortcutProps<[Date, Date]>[];
+  shortcuts?: ShortcutProps<[Date, Date] | null>[];
 } & FieldProps<[Date, Date] | null>;
 type Props = (SingleDateFieldProps | RangeDateFieldProps) & {
   minDate?: Date;
@@ -138,6 +138,7 @@ function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type:
         props.onChange([range.start.toDate(localTimeZone), range.end.toDate(localTimeZone)]);
       }
     },
+    shouldForceLeadingZeros: true,
   } as const;
   const state = useDateRangePickerState(internalProps);
   const ref = useRef(null);
diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
index c14d50cfa..37fecc06d 100644
--- a/packages/bento-design-system/src/DateField/Input.tsx
+++ b/packages/bento-design-system/src/DateField/Input.tsx
@@ -1,5 +1,10 @@
-import { CalendarDate, createCalendar } from "@internationalized/date";
-import { AriaDateFieldOptions, useDateField, useDateSegment } from "@react-aria/datepicker";
+import { createCalendar } from "@internationalized/date";
+import {
+  AriaDatePickerProps,
+  DateValue,
+  useDateField,
+  useDateSegment,
+} from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import {
   DateFieldState,
@@ -25,12 +30,12 @@ import { ValidationState } from "@react-types/shared";
 import { Column, Columns } from "../Layout/Columns";
 
 type Props = (
-  | { type: "single"; fieldProps: AriaDateFieldOptions<CalendarDate> }
+  | { type: "single"; fieldProps: AriaDatePickerProps<DateValue> }
   | {
       type: "range";
       fieldProps: {
-        start: AriaDateFieldOptions<CalendarDate>;
-        end: AriaDateFieldOptions<CalendarDate>;
+        start: AriaDatePickerProps<DateValue>;
+        end: AriaDatePickerProps<DateValue>;
       };
     }
 ) & {
@@ -60,7 +65,7 @@ function DateSegment({ segment, state }: { segment: DateSegmentType; state: Date
   );
 }
 
-function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions<CalendarDate> }) {
+function DateField({ fieldProps }: { fieldProps: AriaDatePickerProps<DateValue> }) {
   const { locale } = useLocale();
   const ref = useRef(null);
   const state = useDateFieldState({