Expose DateInput component

packages/bento-design-system/package.json

@@ -127,7 +127,7 @@
     "react-select": "5.7.4",
     "react-table": "7.8.0",
     "recharts": "2.8.0",
-    "ts-pattern": "3.3.5"
+    "ts-pattern": "5.7.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.20",

packages/bento-design-system/src/DateField/BaseDateInput.tsx

@@ -0,0 +1,118 @@
+import { DatePickerAria, DateRangePickerAria } from "@react-aria/datepicker";
+import { DatePickerState, DateRangePickerState } from "@react-stately/datepicker";
+import React from "react";
+import { match } from "ts-pattern";
+import { Input } from "./Input";
+import { Calendar } from "./Calendar";
+import { Box } from "../Box/Box";
+import { Inline } from "../Layout/Inline";
+import { Button, FieldProps } from "..";
+import { SingleDateProps, RangeDateProps } from "./types";
+
+type BaseSingleDateProps = SingleDateProps & {
+  datePickerAria: DatePickerAria;
+  datePickerState: DatePickerState;
+} & Pick<FieldProps<Date | null>, "onChange" | "value">;
+
+type BaseRangeDateProps = RangeDateProps & {
+  dateRangePickerAria: DateRangePickerAria;
+  dateRangePickerState: DateRangePickerState;
+} & Pick<FieldProps<[Date, Date] | null>, "onChange" | "value">;
+
+type Props = (BaseSingleDateProps | BaseRangeDateProps) & {
+  inputRef: React.RefObject<HTMLInputElement>;
+};
+
+function BaseSingleDateInput(props: Extract<Props, { type?: "single" }>) {
+  const shortcuts = props.shortcuts && (
+    <Inline space={4}>
+      {props.shortcuts.map((shortcut) => (
+        <Button
+          key={shortcut.label}
+          kind="transparent"
+          hierarchy="secondary"
+          size="small"
+          label={shortcut.label}
+          onPress={() => {
+            props.onChange(shortcut.value);
+            props.datePickerState.close();
+          }}
+        />
+      ))}
+    </Inline>
+  );
+
+  return (
+    <>
+      <Box {...props.datePickerAria.groupProps} ref={props.inputRef}>
+        <Input
+          type="single"
+          fieldProps={props.datePickerAria.fieldProps}
+          buttonProps={props.datePickerAria.buttonProps}
+          isCalendarOpen={props.datePickerState.isOpen}
+        />
+      </Box>
+      {props.datePickerState.isOpen && (
+        <Calendar
+          type="single"
+          {...props.datePickerAria.calendarProps}
+          inputRef={props.inputRef}
+          onClose={props.datePickerState.close}
+          shortcuts={shortcuts}
+        />
+      )}
+    </>
+  );
+}
+
+function BaseRangeDateInput(props: Extract<Props, { type: "range" }>) {
+  const shortcuts = props.shortcuts && (
+    <Inline space={4}>
+      {props.shortcuts.map((shortcut) => (
+        <Button
+          key={shortcut.label}
+          kind="transparent"
+          hierarchy="secondary"
+          size="small"
+          label={shortcut.label}
+          onPress={() => {
+            props.onChange(shortcut.value);
+            props.dateRangePickerState.close();
+          }}
+        />
+      ))}
+    </Inline>
+  );
+
+  return (
+    <>
+      <Box {...props.dateRangePickerAria.groupProps} ref={props.inputRef}>
+        <Input
+          type="range"
+          fieldProps={{
+            start: props.dateRangePickerAria.startFieldProps,
+            end: props.dateRangePickerAria.endFieldProps,
+          }}
+          buttonProps={props.dateRangePickerAria.buttonProps}
+          isCalendarOpen={props.dateRangePickerState.isOpen}
+        />
+      </Box>
+      {props.dateRangePickerState.isOpen && (
+        <Calendar
+          type="range"
+          {...props.dateRangePickerAria.calendarProps}
+          inputRef={props.inputRef}
+          onClose={props.dateRangePickerState.close}
+          shortcuts={shortcuts}
+        />
+      )}
+    </>
+  );
+}
+
+export function BaseDateInput(props: Props) {
+  return match(props)
+    .with({ type: "single" }, { type: undefined }, (props) => <BaseSingleDateInput {...props} />)
+    .with({ type: "range" }, (props) => <BaseRangeDateInput {...props} />)
+    .exhaustive();
+}

packages/bento-design-system/src/DateField/DateField.tsx

@@ -1,130 +1,71 @@
 import { useDatePicker, useDateRangePicker } from "@react-aria/datepicker";
 import { useDatePickerState, useDateRangePickerState } from "@react-stately/datepicker";
 import { useRef } from "react";
+import { match } from "ts-pattern";
 import { FieldProps } from "../Field/FieldProps";
 import { CalendarDate, DateValue, getLocalTimeZone } from "@internationalized/date";
-import { Input } from "./Input";
-import { Calendar } from "./Calendar";
-import { Box } from "../Box/Box";
+import { BaseDateInput } from "./BaseDateInput";
 import { Field } from "../Field/Field";
-import { LocalizedString } from "../util/ConfigurableTypes";
 import { RangeValue } from "@react-types/shared";
-import { Inline } from "../Layout/Inline";
-import { Button } from "..";
+import { DateProps, SingleDateProps, RangeDateProps } from "./types";
+import { dateToCalendarDate } from "./utils";
 
-export type ShortcutProps<Value> = {
-  label: LocalizedString;
-  value: Value;
-};
-type SingleDateFieldProps = {
-  type?: "single";
-  shortcuts?: ShortcutProps<Date | null>[];
-} & FieldProps<Date | null>;
-type RangeDateFieldProps = {
-  type: "range";
-  shortcuts?: ShortcutProps<[Date, Date] | null>[];
-} & FieldProps<[Date, Date] | null>;
-type Props = (SingleDateFieldProps | RangeDateFieldProps) & {
-  minDate?: Date;
-  maxDate?: Date;
-  shouldDisableDate?: (date: Date) => boolean;
-  readOnly?: boolean;
-};
+type SingleDateFieldProps = SingleDateProps & FieldProps<Date | null> & DateProps;
+type RangeDateFieldProps = RangeDateProps & FieldProps<[Date, Date] | null> & DateProps;
 
-function dateToCalendarDate(date: Date): CalendarDate {
-  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
-}
-
-function SingleDateField({ disabled, readOnly, ...props }: Extract<Props, { type?: "single" }>) {
+function SingleDateField(props: SingleDateFieldProps) {
   const localTimeZone = getLocalTimeZone();
+  const ref = useRef(null);
 
   const internalProps = {
     ...props,
     value: props.value ? dateToCalendarDate(props.value) : props.value,
     onChange: (date: CalendarDate | null) => {
       props.onChange(date?.toDate(localTimeZone) ?? null);
     },
-    isDisabled: disabled,
-    isReadOnly: readOnly,
+    isDisabled: props.disabled,
+    isReadOnly: props.isReadOnly ?? props.readOnly,
     validationState: props.issues ? "invalid" : "valid",
     minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
     maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
     isDateUnavailable: props.shouldDisableDate
       ? (date: DateValue) => props.shouldDisableDate!(date.toDate(localTimeZone))
       : undefined,
     shouldForceLeadingZeros: true,
+    onBlur: props.onBlur,
+    autoFocus: props.autoFocus,
   } as const;
-  const state = useDatePickerState(internalProps);
-  const ref = useRef(null);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    descriptionProps,
-    errorMessageProps,
-    calendarProps,
-  } = useDatePicker(internalProps, state, ref);
 
-  const shortcuts = props.shortcuts && (
-    <Inline space={4}>
-      {props.shortcuts.map((shortcut) => (
-        <Button
-          key={shortcut.label}
-          kind="transparent"
-          hierarchy="secondary"
-          size="small"
-          label={shortcut.label}
-          onPress={() => {
-            props.onChange(shortcut.value);
-            state.close();
-          }}
-        />
-      ))}
-    </Inline>
-  );
+  const datePickerState = useDatePickerState(internalProps);
+  const datePickerAria = useDatePicker(internalProps, datePickerState, ref);
 
   return (
     <Field
       {...props}
-      disabled={disabled}
-      labelProps={labelProps}
-      assistiveTextProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      disabled={props.disabled}
+      labelProps={datePickerAria.labelProps}
+      assistiveTextProps={datePickerAria.descriptionProps}
+      errorMessageProps={datePickerAria.errorMessageProps}
     >
-      <Box {...groupProps} ref={ref}>
-        <Input
-          type="single"
-          fieldProps={fieldProps}
-          buttonProps={buttonProps}
-          isCalendarOpen={state.isOpen}
-        />
-      </Box>
-      {state.isOpen && (
-        <Calendar
-          type="single"
-          {...calendarProps}
-          inputRef={ref}
-          onClose={state.close}
-          shortcuts={shortcuts}
-        />
-      )}
+      <BaseDateInput
+        type="single"
+        value={props.value}
+        onChange={props.onChange}
+        shortcuts={props.shortcuts}
+        datePickerAria={datePickerAria}
+        datePickerState={datePickerState}
+        inputRef={ref}
+      />
     </Field>
   );
 }
 
-function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type: "range" }>) {
+function RangeDateField(props: RangeDateFieldProps) {
   const localTimeZone = getLocalTimeZone();
+  const ref = useRef(null);
+
   const internalProps = {
     ...props,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    validationState: props.issues ? "invalid" : "valid",
-    minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
-    maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
-    isDateUnavailable: props.shouldDisableDate
-      ? (date: DateValue) => props.shouldDisableDate!(date.toDate(localTimeZone))
-      : undefined,
     value: props.value
       ? {
           start: dateToCalendarDate(props.value[0]),
@@ -138,70 +79,52 @@ function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type:
         props.onChange([range.start.toDate(localTimeZone), range.end.toDate(localTimeZone)]);
       }
     },
+    isDisabled: props.disabled,
+    isReadOnly: props.isReadOnly ?? props.readOnly,
+    validationState: props.issues ? "invalid" : "valid",
+    minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
+    maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
+    isDateUnavailable: props.shouldDisableDate
+      ? (date: DateValue) => props.shouldDisableDate!(date.toDate(localTimeZone))
+      : undefined,
     shouldForceLeadingZeros: true,
+    onBlur: props.onBlur,
+    autoFocus: props.autoFocus,
   } as const;
-  const state = useDateRangePickerState(internalProps);
-  const ref = useRef(null);
-  const {
-    groupProps,
-    labelProps,
-    buttonProps,
-    descriptionProps,
-    errorMessageProps,
-    calendarProps,
-    startFieldProps,
-    endFieldProps,
-  } = useDateRangePicker(internalProps, state, ref);
 
-  const shortcuts = props.shortcuts && (
-    <Inline space={4}>
-      {props.shortcuts.map((shortcut) => (
-        <Button
-          key={shortcut.label}
-          kind="transparent"
-          hierarchy="secondary"
-          size="small"
-          label={shortcut.label}
-          onPress={() => {
-            props.onChange(shortcut.value);
-            state.close();
-          }}
-        />
-      ))}
-    </Inline>
-  );
+  const rangeDatePickerState = useDateRangePickerState(internalProps);
+  const rangeDatePickerAria = useDateRangePicker(internalProps, rangeDatePickerState, ref);
 
   return (
     <Field
       {...props}
-      disabled={disabled}
-      labelProps={labelProps}
-      assistiveTextProps={descriptionProps}
-      errorMessageProps={errorMessageProps}
+      disabled={props.disabled}
+      labelProps={rangeDatePickerAria.labelProps}
+      assistiveTextProps={rangeDatePickerAria.descriptionProps}
+      errorMessageProps={rangeDatePickerAria.errorMessageProps}
     >
-      <Box {...groupProps} ref={ref}>
-        <Input
-          type="range"
-          fieldProps={{ start: startFieldProps, end: endFieldProps }}
-          buttonProps={buttonProps}
-          isCalendarOpen={state.isOpen}
-        />
-      </Box>
-      {state.isOpen && (
-        <Calendar
-          type="range"
-          {...calendarProps}
-          inputRef={ref}
-          onClose={state.close}
-          shortcuts={shortcuts}
-        />
-      )}
+      <BaseDateInput
+        type="range"
+        value={props.value}
+        onChange={props.onChange}
+        shortcuts={props.shortcuts}
+        dateRangePickerAria={rangeDatePickerAria}
+        dateRangePickerState={rangeDatePickerState}
+        inputRef={ref}
+      />
     </Field>
   );
 }
 
-export function DateField(props: Props) {
-  return props.type === "range" ? <RangeDateField {...props} /> : <SingleDateField {...props} />;
-}
+export type DateFieldProps = SingleDateFieldProps | RangeDateFieldProps;
 
-export type { Props as DateFieldProps };
+export function DateField(props: DateFieldProps) {
+  // Note: checking this case in the pattern matching below doesn't work for some reason
+  if (props.type == null) {
+    return <SingleDateField {...props} />;
+  }
+  return match(props)
+    .with({ type: "single" }, (props) => <SingleDateField {...props} />)
+    .with({ type: "range" }, (props) => <RangeDateField {...props} />)
+    .exhaustive();
+}