fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error

change/@fluentui-react-datepicker-compat-f7349def-c3e5-4ea0-9ca7-e2be0c852515.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix: Make onValidationError onValidationResult so the error is updated when there's no longer an error.",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-datepicker-compat/etc/react-datepicker-compat.api.md

@@ -153,9 +153,7 @@ export const DatePicker: ForwardRefComponent<DatePickerProps>;
 export const datePickerClassNames: SlotClassNames<DatePickerSlots>;
 
 // @public
-export type DatePickerErrorData = {
-    error: 'invalid-input' | 'out-of-bounds' | 'required-input';
-};
+export type DatePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';
 
 // @public (undocumented)
 export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'defaultValue' | 'value'> & {
@@ -172,7 +170,7 @@ export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'de
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    onValidationError?: (data: DatePickerErrorData) => void;
+    onValidationResult?: (data: DatePickerValidationResultData) => void;
     inlinePopup?: boolean;
     positioning?: PositioningProps;
     placeholder?: string;
@@ -196,6 +194,11 @@ export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'de
     showCloseButton?: boolean;
 };
 
+// @public
+export type DatePickerValidationResultData = {
+    error?: DatePickerErrorType;
+};
+
 // @public
 export enum DateRangeType {
     // (undocumented)
@@ -230,7 +233,7 @@ export enum DayOfWeek {
 export const DAYS_IN_WEEK = 7;
 
 // @public (undocumented)
-export const defaultDatePickerErrorStrings: Record<DatePickerErrorData['error'], string>;
+export const defaultDatePickerErrorStrings: Record<DatePickerErrorType, string>;
 
 // @public (undocumented)
 export const defaultDatePickerStrings: CalendarStrings;

packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.types.ts

@@ -105,9 +105,9 @@ export type DatePickerProps = Omit<ComponentProps<Partial<DatePickerSlots>>, 'de
   onOpenChange?: (open: boolean) => void;
 
   /**
-   * Callback to run when the DatePicker encounters an error when validating the input
+   * Callback to run after the DatePicker's input has been validated
    */
-  onValidationError?: (data: DatePickerErrorData) => void;
+  onValidationResult?: (data: DatePickerValidationResultData) => void;
 
   /**
    * Whether the DatePicker should render the popup as inline or in a portal
@@ -238,9 +238,14 @@ export type DatePickerState = ComponentState<DatePickerSlots> & {
 };
 
 /**
- * Data passed to the `onValidationError` callback.
+ * Data passed to the `onValidationResult` callback.
  */
-export type DatePickerErrorData = {
+export type DatePickerValidationResultData = {
   /** The error found when validating the input. */
-  error: 'invalid-input' | 'out-of-bounds' | 'required-input';
+  error?: DatePickerErrorType;
 };
+
+/**
+ * Error types returned by the `onValidationResult` callback.
+ */
+export type DatePickerErrorType = 'invalid-input' | 'out-of-bounds' | 'required-input';

packages/react-components/react-datepicker-compat/src/components/DatePicker/defaults.ts

@@ -1,6 +1,6 @@
 import { defaultCalendarStrings } from '../Calendar/defaults';
 import type { CalendarStrings } from '../../utils/index';
-import type { DatePickerErrorData } from './DatePicker.types';
+import type { DatePickerErrorType } from './DatePicker.types';
 
 export const defaultDatePickerStrings: CalendarStrings = {
   ...defaultCalendarStrings,
@@ -11,7 +11,7 @@ export const defaultDatePickerStrings: CalendarStrings = {
   closeButtonAriaLabel: 'Close date picker',
 };
 
-export const defaultDatePickerErrorStrings: Record<DatePickerErrorData['error'], string> = {
+export const defaultDatePickerErrorStrings: Record<DatePickerErrorType, string> = {
   'invalid-input': 'Invalid date format',
   'out-of-bounds': 'Date is out of bounds',
   'required-input': 'Field is required',

packages/react-components/react-datepicker-compat/src/components/DatePicker/useDatePicker.tsx

@@ -20,7 +20,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';
 import { usePopupPositioning } from '../../utils/usePopupPositioning';
 import type { CalendarProps, ICalendar } from '../Calendar/Calendar.types';
-import type { DatePickerProps, DatePickerState } from './DatePicker.types';
+import type { DatePickerProps, DatePickerState, DatePickerValidationResultData } from './DatePicker.types';
 import type { InputProps, InputOnChangeData } from '@fluentui/react-input';
 
 function isDateOutOfBounds(date: Date, minDate?: Date, maxDate?: Date): boolean {
@@ -129,7 +129,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
     onOpenChange,
     onSelectDate: onUserSelectDate,
     openOnClick = true,
-    onValidationError,
+    onValidationResult,
     parseDateFromString = defaultParseDateFromString,
     showCloseButton = false,
     showGoToToday = true,
@@ -155,6 +155,8 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
 
   const validateTextInput = React.useCallback(
     (date: Date | null = null): void => {
+      let error: DatePickerValidationResultData['error'] | undefined;
+
       if (allowTextInput) {
         if (formattedDate || date) {
           // Don't parse if the selected date has the same formatted string as what we're about to parse.
@@ -169,24 +171,26 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
           if (!date || isNaN(date.getTime())) {
             // Reset input if formatting is available
             setSelectedDate(selectedDate);
-            onValidationError?.({ error: 'invalid-input' });
+            error = 'invalid-input';
           } else {
             if (isDateOutOfBounds(date, minDate, maxDate)) {
-              onValidationError?.({ error: 'out-of-bounds' });
+              error = 'out-of-bounds';
             } else {
               setSelectedDate(date);
             }
           }
         } else {
           if (required) {
-            onValidationError?.({ error: 'required-input' });
+            error = 'required-input';
           }
 
           onUserSelectDate?.(date);
         }
       } else if (required && !formattedDate) {
-        onValidationError?.({ error: 'required-input' });
+        error = 'required-input';
       }
+
+      onValidationResult?.({ error });
     },
     [
       allowTextInput,
@@ -195,7 +199,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
       maxDate,
       minDate,
       onUserSelectDate,
-      onValidationError,
+      onValidationResult,
       parseDateFromString,
       required,
       selectedDate,

packages/react-components/react-datepicker-compat/src/index.ts

@@ -14,7 +14,7 @@ export {
   useDatePicker_unstable,
   useDatePickerStyles_unstable,
 } from './DatePicker';
-export type { DatePickerErrorData, DatePickerProps, IDatePicker } from './DatePicker';
+export type { DatePickerErrorType, DatePickerProps, DatePickerValidationResultData, IDatePicker } from './DatePicker';
 
 export {
   DAYS_IN_WEEK,

packages/react-components/react-datepicker-compat/stories/DatePicker/DatePickerErrorHandling.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { addMonths, addYears, DatePicker, defaultDatePickerErrorStrings } from '@fluentui/react-datepicker-compat';
 import { Field, makeStyles } from '@fluentui/react-components';
-import type { DatePickerErrorData } from '../../src/DatePicker';
+import type { DatePickerValidationResultData } from '@fluentui/react-datepicker-compat';
 
 const useStyles = makeStyles({
   control: {
@@ -15,7 +15,7 @@ const maxDate = addYears(today, 1);
 
 export const ErrorHandling = () => {
   const styles = useStyles();
-  const [error, setError] = React.useState<DatePickerErrorData['error'] | undefined>(undefined);
+  const [error, setError] = React.useState<DatePickerValidationResultData['error']>(undefined);
 
   return (
     <Field
@@ -31,9 +31,19 @@ export const ErrorHandling = () => {
         maxDate={maxDate}
         placeholder="Select a date..."
         allowTextInput
-        onValidationError={data => setError(data.error)}
+        onValidationResult={data => setError(data.error)}
         className={styles.control}
       />
     </Field>
   );
 };
+
+ErrorHandling.parameters = {
+  docs: {
+    description: {
+      story:
+        'To add error handling to a DatePicker, use `onValidationResult` along with Field. `onValidationResult`' +
+        'provides an error type string that can be used with defaultDatePickerErrorStrings to get default messages.',
+    },
+  },
+};