Merge pull request #852 from buildo/datepicker-fixes

[DateField] Allow shortcuts for null values + fix style defect

Author: veej

Diff for: 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 for: packages/bento-design-system/src/DateField/Day.tsx

@@ -47,7 +47,9 @@ function computeStyle(props: {
       return "focused";
     } else return "default";
   } else {
-    if (props.isStartDate) {
+    if (props.isInHoverRange) {
+      return "inHoverRange";
+    } else if (props.isStartDate) {
       if (props.isEndDate) {
         return "selected";
       }
@@ -56,8 +58,6 @@ function computeStyle(props: {
       return "selectedEnd";
     } else if (props.isInRange) {
       return "selectedRange";
-    } else if (props.isInHoverRange) {
-      return "inHoverRange";
     } else if (props.isFocused) {
       return "focused";
     } else {

Diff for: 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({

Diff for: packages/bento-design-system/stories/Components/DateField.stories.tsx

@@ -67,6 +67,7 @@ export const SingleWithShortcuts = {
   args: {
     value: null,
     shortcuts: [
+      { label: "Clear", value: null },
       {
         label: "Today",
         value: new Date(),
@@ -132,6 +133,10 @@ export const RangeWithShortcuts = {
     value: null,
     type: "range",
     shortcuts: [
+      {
+        label: "Clear all",
+        value: null,
+      },
       {
         label: "This Week",
         value: [startOfWeek(today), endOfWeek(today)],