Fix TypeScript error on Calendar component due to children

[haydenbleasel]

Problem

react-day-picker's DayPicker component takes a property called components, which in turn we are passing IconLeft and IconRight. The properties for these two components takes children, which Radix's icons do not like since they're typed as SVG elements. As such, you end up with the following TS error:

Type '{ style?: CSSProperties | undefined; children?: ReactNode; className: any; }' is not assignable to type 'IconProps'.
  Types of property 'children' are incompatible.
    Type 'ReactNode' is not assignable to type 'undefined'.
      Type 'null' is not assignable to type 'undefined'.ts(2322)

Fix

This pull request includes changes to two Calendar components to ensure that the IconLeft and IconRight components destructure children from the props before spreading them on to Radix's icons. This change was applied to both the default and New York versions of the calendar.

[vercel]

@haydenbleasel is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[youneshenniwrites]

This approach might be misleading since children are destructured but not actually used anywhere.

[youneshenniwrites]

Maybe try to explicitly type the IconLeft and IconRight like this:

type IconProps = React.SVGProps<SVGSVGElement> & {
  className?: string;
};

const IconLeft: FC<IconProps> = ({ className, ...props }) => (
  <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
);

const IconRight: FC<IconProps> = ({ className, ...props }) => (
  <ChevronRight className={cn("h-4 w-4", className)} {...props} />
);

components={{
  IconLeft,
  IconRight,
}}
{...props}
/>