allow shortcuts with null value

buildo · May 15, 2024 · d15b693 · d15b693
1 parent 4934146
commit d15b693
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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({