Add callback for onDayClick to DatePicker

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [22.3.4] - 2023-10-03
+
+### Added
+
+`DatePicker`: `onDayClick` callback. ([@BeirlaenAaron](https://https://github.com/BeirlaenAaron) in [#2778](https://github.com/teamleadercrm/ui/pull/2778))
+
 ## [22.3.3] - 2023-09-13
 
 - - `luxon`: Bump luxon from 3.0.3 to 3.4.3 ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2518](https://github.com/teamleadercrm/ui/pull/2764)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "22.3.3",
+  "version": "22.3.4",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/datepicker/DatePicker.tsx

@@ -13,7 +13,8 @@ import localeUtils from './localeUtils';
 import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
 
-export interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size' | 'onChange' | 'modifiers' | 'ref'> {
+export interface DatePickerProps
+  extends Omit<BoxProps & DayPickerProps, 'size' | 'onChange' | 'modifiers' | 'ref' | 'onDayClick'> {
   /** If true we give a border to our wrapper. */
   bordered?: boolean;
   /** A class name for the DatePicker to give custom styles. */
@@ -32,6 +33,8 @@ export interface DatePickerProps extends Omit<BoxProps & DayPickerProps, 'size'
   showWeekNumbers?: boolean;
   /** The initial month to display if no date is selected. */
   initialMonth?: Date;
+  /** Callback function that is fired when a day is clicked. */
+  onDayClick?: (day: Date, modifiers: DayModifiers, event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 const DatePicker: GenericComponent<DatePickerProps> = ({
@@ -43,6 +46,7 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
   showWeekNumbers,
   initialMonth,
   onChange,
+  onDayClick,
   ...others
 }) => {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(others.selectedDate);
@@ -53,13 +57,14 @@ const DatePicker: GenericComponent<DatePickerProps> = ({
     setSelectedMonth(others.selectedDate);
   }, [others.selectedDate]);
 
-  const handleDayClick = (day: Date, modifiers: DayModifiers) => {
+  const handleDayClick = (day: Date, modifiers: DayModifiers, event: React.MouseEvent<HTMLDivElement>) => {
     if (modifiers[theme['disabled']]) {
       return;
     }
 
     setSelectedDate(day);
     onChange && onChange(day);
+    onDayClick && onDayClick(day, modifiers, event);
   };
 
   const handleYearMonthChange = (selectedMonth: Date) => {