Bump @mui/x-date-pickers to 7.17.0 for updated validation import paths

Author: sadik-malik

apps/nextjs/package.json

@@ -18,7 +18,7 @@
     "@mui/icons-material": "6.0.1",
     "@mui/material": "6.0.1",
     "@mui/system": "6.0.1",
-    "@mui/x-date-pickers": "7.15.0",
+    "@mui/x-date-pickers": "7.17.0",
     "eslint": "^8",
     "next": "14.2.10",
     "react": "18.3.1",

apps/storybook/package.json

@@ -41,7 +41,7 @@
     "@mui/icons-material": "6.0.1",
     "@mui/material": "6.0.1",
     "@mui/system": "6.0.1",
-    "@mui/x-date-pickers": "7.15.0",
+    "@mui/x-date-pickers": "7.17.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form-mui": "portal:../../packages/rhf-mui"

packages/rhf-mui/package.json

@@ -3,15 +3,26 @@
   "license": "MIT",
   "repository": "https://github.com/dohomi/react-hook-form-mui",
   "homepage": "https://react-hook-form-material-ui.vercel.app",
-  "keywords": ["react", "mui", "material-ui", "react-hook-form"],
-  "workspaces": ["apps/*", "packages/*"],
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "react-hook-form"
+  ],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
   "name": "react-hook-form-mui",
   "author": "Dominic Garms",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/index.d.ts",
-  "files": ["dist/**", "src/**"],
+  "files": [
+    "dist/**",
+    "src/**"
+  ],
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -46,7 +57,7 @@
   "peerDependencies": {
     "@mui/icons-material": ">= 5.x <7",
     "@mui/material": ">= 5.x <7",
-    "@mui/x-date-pickers": ">=7.0.0 <8",
+    "@mui/x-date-pickers": ">=7.17.0 <8",
     "react": ">=17 <19",
     "react-hook-form": ">=7.33.1"
   },
@@ -66,7 +77,7 @@
     "@mui/icons-material": "6.0.1",
     "@mui/material": "6.0.1",
     "@mui/system": "6.0.1",
-    "@mui/x-date-pickers": "7.15.0",
+    "@mui/x-date-pickers": "7.17.0",
     "@swc/core": "^1.3.17",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",

packages/rhf-mui/src/DatePickerElement.tsx

@@ -1,8 +1,3 @@
-import {
-  DatePicker,
-  DatePickerProps,
-  DatePickerSlotProps,
-} from '@mui/x-date-pickers/DatePicker'
 import {
   Control,
   FieldError,
@@ -11,51 +6,52 @@ import {
   PathValue,
   useController,
   UseControllerProps,
-} from 'react-hook-form'
-import {TextFieldProps, useForkRef} from '@mui/material'
-import {useFormError} from './FormErrorProvider'
-import {forwardRef, ReactNode, Ref, RefAttributes} from 'react'
+} from "react-hook-form";
+import { TextFieldProps, useForkRef } from "@mui/material";
+import { useFormError } from "./FormErrorProvider";
+import { forwardRef, ReactNode, Ref, RefAttributes } from "react";
 import {
+  DatePicker,
+  DatePickerProps,
+  DatePickerSlotProps,
   DateValidationError,
   PickerChangeHandlerContext,
-} from '@mui/x-date-pickers'
-import {defaultErrorMessages} from './messages/DatePicker'
-import {
-  useLocalizationContext,
   validateDate,
-} from '@mui/x-date-pickers/internals'
-import {useTransform} from './useTransform'
-import {getTimezone} from './utils'
-import {PickerValidDate} from '@mui/x-date-pickers/models'
+} from "@mui/x-date-pickers";
+import { useLocalizationContext } from "@mui/x-date-pickers/internals";
+import { defaultErrorMessages } from "./messages/DatePicker";
+import { useTransform } from "./useTransform";
+import { getTimezone } from "./utils";
+import { PickerValidDate } from "@mui/x-date-pickers/models";
 
 export type DatePickerElementProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
   TValue extends PickerValidDate = PickerValidDate,
   TEnableAccessibleFieldDOMStructure extends boolean = false,
-> = Omit<DatePickerProps<TValue>, 'value' | 'slotProps'> & {
-  name: TName
-  required?: boolean
-  isDate?: boolean
-  parseError?: (error: FieldError | DateValidationError) => ReactNode
-  rules?: UseControllerProps<TFieldValues, TName>['rules']
-  control?: Control<TFieldValues>
-  inputProps?: TextFieldProps
-  helperText?: TextFieldProps['helperText']
-  textReadOnly?: boolean
+> = Omit<DatePickerProps<TValue>, "value" | "slotProps"> & {
+  name: TName;
+  required?: boolean;
+  isDate?: boolean;
+  parseError?: (error: FieldError | DateValidationError) => ReactNode;
+  rules?: UseControllerProps<TFieldValues, TName>["rules"];
+  control?: Control<TFieldValues>;
+  inputProps?: TextFieldProps;
+  helperText?: TextFieldProps["helperText"];
+  textReadOnly?: boolean;
   slotProps?: Omit<
     DatePickerSlotProps<TValue, TEnableAccessibleFieldDOMStructure>,
-    'textField'
-  >
-  overwriteErrorMessages?: typeof defaultErrorMessages
+    "textField"
+  >;
+  overwriteErrorMessages?: typeof defaultErrorMessages;
   transform?: {
-    input?: (value: PathValue<TFieldValues, TName>) => TValue | null
+    input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
     output?: (
       value: TValue | null,
       context: PickerChangeHandlerContext<DateValidationError>
-    ) => PathValue<TFieldValues, TName>
-  }
-}
+    ) => PathValue<TFieldValues, TName>;
+  };
+};
 
 type DatePickerElementComponent = <
   TFieldValues extends FieldValues = FieldValues,
@@ -64,7 +60,7 @@ type DatePickerElementComponent = <
 >(
   props: DatePickerElementProps<TFieldValues, TName, TValue> &
     RefAttributes<HTMLDivElement>
-) => JSX.Element
+) => JSX.Element;
 
 const DatePickerElement = forwardRef(function DatePickerElement<
   TFieldValues extends FieldValues = FieldValues,
@@ -87,23 +83,23 @@ const DatePickerElement = forwardRef(function DatePickerElement<
     inputRef,
     transform,
     ...rest
-  } = props
+  } = props;
 
-  const adapter = useLocalizationContext()
+  const adapter = useLocalizationContext();
 
-  const errorMsgFn = useFormError()
-  const customErrorFn = parseError || errorMsgFn
+  const errorMsgFn = useFormError();
+  const customErrorFn = parseError || errorMsgFn;
 
   const errorMessages = {
     ...defaultErrorMessages,
     ...overwriteErrorMessages,
-  }
+  };
 
   const rulesTmp = {
     ...rules,
     ...(required &&
       !rules.required && {
-        required: 'This field is required',
+        required: "This field is required",
       }),
     validate: {
       internal: (value: TValue | null) => {
@@ -116,54 +112,54 @@ const DatePickerElement = forwardRef(function DatePickerElement<
             disableFuture: Boolean(rest.disableFuture),
             minDate: rest.minDate,
             maxDate: rest.maxDate,
-            timezone: rest.timezone ?? getTimezone(adapter, value) ?? 'default',
           },
+          timezone: rest.timezone ?? getTimezone(adapter, value) ?? "default",
           value,
           adapter,
-        })
-        return internalError == null || errorMessages[internalError]
+        });
+        return internalError == null || errorMessages[internalError];
       },
       ...rules.validate,
     },
-  }
+  };
 
   const {
     field,
-    fieldState: {error},
+    fieldState: { error },
   } = useController({
     name,
     control,
     rules: rulesTmp,
     disabled: rest.disabled,
     defaultValue: null as PathValue<TFieldValues, TName>,
-  })
+  });
 
-  const {value, onChange} = useTransform<TFieldValues, TName, TValue | null>({
+  const { value, onChange } = useTransform<TFieldValues, TName, TValue | null>({
     value: field.value,
     onChange: field.onChange,
     transform: {
       input:
-        typeof transform?.input === 'function'
+        typeof transform?.input === "function"
           ? transform.input
           : (newValue) => {
-              return newValue && typeof newValue === 'string'
+              return newValue && typeof newValue === "string"
                 ? (adapter.utils.date(newValue) as unknown as TValue) // need to see if this works for all localization adaptors
-                : newValue
+                : newValue;
             },
       output:
-        typeof transform?.output === 'function'
+        typeof transform?.output === "function"
           ? transform.output
           : (newValue) => newValue,
     },
-  })
+  });
 
-  const handleInputRef = useForkRef(field.ref, inputRef)
+  const handleInputRef = useForkRef(field.ref, inputRef);
 
   const errorMessage = error
-    ? typeof customErrorFn === 'function'
+    ? typeof customErrorFn === "function"
       ? customErrorFn(error)
       : error.message
-    : null
+    : null;
 
   return (
     <DatePicker
@@ -173,15 +169,15 @@ const DatePickerElement = forwardRef(function DatePickerElement<
       ref={ref}
       inputRef={handleInputRef}
       onClose={(...args) => {
-        field.onBlur()
+        field.onBlur();
         if (rest.onClose) {
-          rest.onClose(...args)
+          rest.onClose(...args);
         }
       }}
       onChange={(newValue, context) => {
-        onChange(newValue, context)
-        if (typeof rest.onChange === 'function') {
-          rest.onChange(newValue, context)
+        onChange(newValue, context);
+        if (typeof rest.onChange === "function") {
+          rest.onChange(newValue, context);
         }
       }}
       slotProps={{
@@ -190,9 +186,9 @@ const DatePickerElement = forwardRef(function DatePickerElement<
           ...inputProps,
           required,
           onBlur: (event) => {
-            field.onBlur()
-            if (typeof inputProps?.onBlur === 'function') {
-              inputProps.onBlur(event)
+            field.onBlur();
+            if (typeof inputProps?.onBlur === "function") {
+              inputProps.onBlur(event);
             }
           },
           error: !!errorMessage,
@@ -206,7 +202,7 @@ const DatePickerElement = forwardRef(function DatePickerElement<
         },
       }}
     />
-  )
-})
-DatePickerElement.displayName = 'DatePickerElement'
-export default DatePickerElement as DatePickerElementComponent
+  );
+});
+DatePickerElement.displayName = "DatePickerElement";
+export default DatePickerElement as DatePickerElementComponent;