SUR-370, SRML-64 - Date Picker component issues and improvements

changelog.txt

@@ -2,6 +2,8 @@ Version 1.3.4 - 27th December, 2024
 - Improvement - Enhanced the UI of the Table and Line chart component for responsive design.
 - Improvement - Added option group to the Select component.
 - Improvement - Updated the Table component design.
+- Improvement - Added support for controlling selected dates through the 'selected' prop in DatePicker component.
+- Fixed - DatePicker component crash when navigating through years.
 
 Version 1.3.3 - 20th December, 2024
 - Fixed - React `Each child in a list should have a unique "key" prop` console warning.

src/components/accordion/accordion.stories.tsx

@@ -11,9 +11,9 @@ export default {
 	},
 	tags: [ 'autodocs' ],
 	subcomponents: {
-		Item: Accordion.Item,
-		Trigger: Accordion.Trigger,
-		Content: Accordion.Content,
+		'Accordion.Item': Accordion.Item,
+		'Accordion.Trigger': Accordion.Trigger,
+		'Accordion.Content': Accordion.Content,
 	},
 	decorators: [
 		( Story ) => (

src/components/datepicker/datepicker-component.tsx

@@ -175,7 +175,7 @@ const DatePickerComponent = ( {
 			}
 		};
 
-		const handleYearClick = ( { yearValue }: { yearValue: number } ) => {
+		const handleYearClick = ( yearValue: number ) => {
 			setSelectedYear( yearValue );
 			setShowYearSelect( false );
 			setShowMonthSelect( true );
@@ -245,13 +245,7 @@ const DatePickerComponent = ( {
 							<Button
 								key={ yearValue }
 								variant="ghost"
-								onClick={ () =>
-									handleYearClick(
-										yearValue as unknown as {
-											yearValue: number;
-										}
-									)
-								}
+								onClick={ () => handleYearClick( yearValue ) }
 								className={ cn(
 									'h-10 w-full text-center font-normal relative',
 									yearValue === selectedYear &&

src/components/datepicker/datepicker.tsx

@@ -11,6 +11,7 @@ import {
 	subWeeks,
 	subMonths,
 } from 'date-fns';
+import { getDefaultSelectedValue } from './utils';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -33,6 +34,8 @@ export interface DatePickerProps {
 	showOutsideDays?: boolean;
 	/** Show or hide the footer. */
 	isFooter?: boolean;
+	/** Selected date value. */
+	selected?: Date | Date[] | TDateRange | null;
 }
 
 const DatePicker = ( {
@@ -46,17 +49,30 @@ const DatePicker = ( {
 	cancelButtonText = 'Cancel',
 	showOutsideDays = true,
 	isFooter = true,
+	selected,
 	...props
 }: DatePickerProps ) => {
 	const [ selectedDates, setSelectedDates ] = useState<
 		TDateRange | Date | Date[] | null
 	>( () => {
-		if ( selectionType === 'multiple' ) {
-			return [];
-		} else if ( selectionType === 'range' ) {
-			return { from: null, to: null };
+		if ( ! selected ) {
+			return getDefaultSelectedValue( selectionType );
 		}
-		return null;
+
+		// Type guards for different selection types
+		const isValidMultiple =
+			selectionType === 'multiple' && Array.isArray( selected );
+		const isValidRange =
+			selectionType === 'range' && 'from' in selected && 'to' in selected;
+		const isValidSingle =
+			selectionType === 'single' && selected instanceof Date;
+
+		// Return selected if valid, otherwise return default value
+		if ( isValidMultiple || isValidRange || isValidSingle ) {
+			return selected;
+		}
+
+		return getDefaultSelectedValue( selectionType );
 	} );
 
 	const handleSelect = ( selectedDate: Date | Date[] | TDateRange | null ) => {

src/components/datepicker/utils.tsx

@@ -13,3 +13,13 @@ export const formatWeekdayName = ( date: Date ) => {
 export const generateYearRange = ( start: number, count = 24 ) => {
 	return Array.from( { length: count }, ( _, i ) => start + i );
 };
+
+export const getDefaultSelectedValue = ( type: string ) => {
+	if ( type === 'multiple' ) {
+		return [];
+	}
+	if ( type === 'range' ) {
+		return { from: null, to: null };
+	}
+	return null;
+};