fix(date-picker): filter out non-DOM props to prevent console errors (#2833)

* fix(date-picker): filter out non-DOM props to prevent console errors

* chore: added test to confirm no warning

.changeset/stale-cats-sell.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/date-picker": patch
+---
+
+Fixed console errors for non-DOM props in DatePicker (#2823)

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -372,8 +372,17 @@ describe("DatePicker", () => {
   describe("Calendar popover", function () {
     it("should emit onChange when selecting a date in the calendar in controlled mode", function () {
       let onChange = jest.fn();
+      const consoleWarnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+      const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
       let {getByRole, getAllByRole, queryByLabelText} = render(
-        <DatePicker label="Date" value={new CalendarDate(2019, 2, 3)} onChange={onChange} />,
+        <DatePicker
+          hideTimeZone
+          isRequired
+          label="Date"
+          value={new CalendarDate(2019, 2, 3)}
+          onChange={onChange}
+        />,
       );
 
       let combobox = getAllByRole("group")[0];
@@ -406,6 +415,11 @@ describe("DatePicker", () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenCalledWith(new CalendarDate(2019, 2, 4));
       expect(getTextValue(combobox)).toBe("2/3/2019"); // controlled
+
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+      expect(consoleErrorSpy).not.toHaveBeenCalled();
+      consoleWarnSpy.mockRestore();
+      consoleErrorSpy.mockRestore();
     });
 
     it("should emit onChange when selecting a date in the calendar in uncontrolled mode", function () {

packages/components/date-picker/src/use-date-picker-base.ts

@@ -229,10 +229,11 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     hideTimeZone: props.hideTimeZone,
   } as TimeInputProps;
 
-  const popoverProps = {
-    ...mergeProps(slotsProps.popoverProps, props),
+  const popoverProps: PopoverProps = {
+    ...slotsProps.popoverProps,
+    children: slotsProps.popoverProps?.children ?? [],
     triggerRef: domRef,
-  } as PopoverProps;
+  };
 
   const calendarProps = {
     ...slotsProps.calendarProps,

packages/components/date-picker/src/use-date-picker.ts

@@ -131,7 +131,7 @@ export function useDatePicker<T extends DateValue>({
     } as DateInputProps;
   };
 
-  const getTimeInputProps = () => {
+  const getTimeInputProps = (): TimeInputProps => {
     if (!showTimeField) return {};
 
     return {
@@ -139,8 +139,8 @@ export function useDatePicker<T extends DateValue>({
       value: state.timeValue,
       onChange: state.setTimeValue,
       granularity: timeGranularity,
-      minValue: timeMinValue,
-      maxValue: timeMaxValue,
+      minValue: timeMinValue ?? undefined,
+      maxValue: timeMaxValue ?? undefined,
       classNames: {
         base: slots.timeInput({
           class: clsx(classNames?.timeInput, userTimeInputProps?.classNames?.base),
@@ -149,15 +149,14 @@ export function useDatePicker<T extends DateValue>({
           class: clsx(classNames?.timeInputLabel, userTimeInputProps?.classNames?.label),
         }),
       },
-    } as TimeInputProps;
+    };
   };
 
-  const getPopoverProps = (props: DOMAttributes = {}) => {
+  const getPopoverProps = (props: DOMAttributes = {}): PopoverProps => {
     return {
       state,
       dialogProps,
       ...popoverProps,
-      ...props,
       classNames: {
         content: slots.popoverContent({
           class: clsx(
@@ -167,10 +166,10 @@ export function useDatePicker<T extends DateValue>({
           ),
         }),
       },
-    } as PopoverProps;
+    };
   };
 
-  const getCalendarProps = () => {
+  const getCalendarProps = (): CalendarProps => {
     return {
       ...ariaCalendarProps,
       ...calendarProps,
@@ -178,15 +177,15 @@ export function useDatePicker<T extends DateValue>({
         base: slots.calendar({class: classNames?.calendar}),
         content: slots.calendarContent({class: classNames?.calendarContent}),
       },
-    } as CalendarProps;
+    };
   };
 
-  const getSelectorButtonProps = () => {
+  const getSelectorButtonProps = (): ButtonProps => {
     return {
       ...buttonProps,
       ...selectorButtonProps,
       className: slots.selectorButton({class: classNames?.selectorButton}),
-    } as ButtonProps;
+    };
   };
 
   const getSelectorIconProps = () => {