incorrect type inheritance in CalendarContainerProps causes TypeScript errors

[iskkiri]

Incorrect type inheritance in CalendarContainer props

Description

The CalendarContainerProps interface currently extends React.PropsWithChildren<HTMLDivElement>, which is incorrect for React component props. This attempts to inherit from the DOM element interface itself rather than its valid HTML attributes.

Current Behavior

export interface CalendarContainerProps
  extends React.PropsWithChildren<HTMLDivElement> {
  showTimeSelectOnly?: boolean;
  showTime?: boolean;
}

Expected Behavior

The interface should extend React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> instead, which properly includes all valid HTML attributes that can be passed to a div element:

export interface CalendarContainerProps
  extends React.PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
  showTimeSelectOnly?: boolean;
  showTime?: boolean;
}

Technical Explanation

• HTMLDivElement represents the actual DOM element interface, not its props
• React.HTMLAttributes<HTMLDivElement> represents all valid HTML attributes that can be passed to a div element
• The current implementation might cause TypeScript to miss valid props or incorrectly type-check props that should be valid for a div element

Impact

This typing issue affects type checking for any consumer of the component trying to pass standard HTML attributes to the calendar container. For example, when trying to create a custom calendar container:

import { CalendarContainer } from 'react-datepicker';
import type { CalendarContainerProps } from 'react-datepicker/dist/calendar_container';

interface Props extends CalendarContainerProps {
  onCancel: () => void;
  onComplete: () => void;
}

export default function DatepickerCustomContainer({ children, onCancel, onComplete }: Props) {
  return (
    <CalendarContainer>
      {children}

      <div>
        <button onClick={onCancel}>Cancel</button>
        <button onClick={onComplete}>Complete</button>
      </div>
    </CalendarContainer>
  );
}

This code results in TypeScript errors: