Update DatePicker: fix type errors.

src/components/forms/controls/DatePicker/DatePicker.stories.tsx

@@ -26,8 +26,7 @@ export default {
   ],
 } satisfies Meta<DatePickerArgs>;
 
-export const DatePickerStory: Story = {
-  name: 'Date Picker',
+export const Standard: Story = {
   render: (args) => {
     const [startDate, setStartDate] = React.useState<Date | null>(new Date());
 

src/components/forms/controls/DatePicker/DatePicker.tsx

@@ -7,31 +7,31 @@ import ReactDatePicker from 'react-datepicker';
 
 import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
 
+import { Input } from '../Input/Input.tsx';
+
 import 'react-datepicker/dist/react-datepicker.css';
 import cl from './DatePicker.module.scss';
 
-import { Input } from '../Input/Input.tsx';
-
 
 // TODO: eventually move this to a separate file, as this tends to be repeated on every component?
 type GenericProps = {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
   /** An optional class name to be appended to the class list. */
-  className?: ClassNameArgument,
+  className?: undefined | ClassNameArgument,
 }
 
 // copying props from react-datepicker and restricting them to specific versions
 // TODO: I would like to reuse this on DatePickerRange.tsx, how can I reuse it there without exporting it?
-type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'selectsRange' | 'selectsMultiple' | 'onChange'>;
+type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'>;
 
 type ReactDatePickerProps = GenericReactDatePickerOmittedProps & {
-  // TODO: considering we omitted them, do we still need to include it's properties as "never" (as defined on original library),
-  // or in this case is it redundant?
-  // selectsRange?: never,
-  // selectsMultiple?: never,
-  onChange?: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void,
+  // Note: need to disable the following features in order to use `ReactDatePicker` as a plain date picker.
+  selectsRange?: never,
+  selectsMultiple?: never,
+  showMonthYearDropdown?: never,
+  onChange?: undefined | ((date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void),
 };
 
 export type DatePickerProps = GenericProps & ReactDatePickerProps;
@@ -42,7 +42,9 @@ export const DatePicker = (props: DatePickerProps) => {
     className,
     ...propsRest
   } = props;
-
+
+  const onChangeDefault = React.useCallback(() => {}, []);
+
   return (
     <div className={cx(
       'bk',
@@ -51,12 +53,13 @@ export const DatePicker = (props: DatePickerProps) => {
     )}>
       <ReactDatePicker
         className={cx(
-          cl['bk-date-picker__date'],
+          //cl['bk-date-picker__date'],
         )}
         dateFormat="MM/dd/yyyy"
         placeholderText="MM/DD/YYYY"
         customInput={<Input />}
         {...propsRest}
+        onChange={props.onChange ?? onChangeDefault}
       />
     </div>
   );