Fix prod build?

(cherry picked from commit a8a9271)
agriculturegovau · Jan 8, 2025 · e489448 · e489448
1 parent 96ecb7e
commit e489448
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/packages/react/src/date-picker/Calendar.tsx b/packages/react/src/date-picker/Calendar.tsx
@@ -144,21 +144,12 @@ export function CalendarRange({
 
 				return (
 					<td
-						// @ts-expect-error: Type '(event: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<HTMLTableDataCellElement>'.
-						onKeyDown={handleKeyDown}
 						// @ts-expect-error: Type 'RefObject<HTMLButtonElement>' is not assignable to type 'LegacyRef<HTMLTableDataCellElement> | undefined'
 						ref={buttonRef}
 						tabIndex={-1}
 						{...(isHidden ? undefined : interactiveProps)}
-						onMouseEnter={
-							onHover && !isHidden
-								? () => {
-										clearHoveredDay?.cancel();
-										onHover(props.date);
-								  }
-								: undefined
-						}
-						onMouseLeave={onHover && !isHidden ? clearHoveredDay : undefined}
+						// @ts-expect-error: Type '(event: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<HTMLTableDataCellElement>'.
+						onKeyDown={handleKeyDown}
 					>
 						{/* Without this focusable span, left and right do not work in screen readers */}
 						<span
@@ -175,6 +166,17 @@ export function CalendarRange({
 									position: 'absolute',
 								},
 							}}
+							onMouseEnter={() => {
+								if (onHover && !isHidden) {
+									clearHoveredDay?.cancel();
+									onHover(props.date);
+								}
+							}}
+							onMouseLeave={() => {
+								if (onHover && !isHidden) {
+									clearHoveredDay?.();
+								}
+							}}
 							tabIndex={-1}
 						>
 							{isHidden ? undefined : children}

diff --git a/packages/react/src/date-picker/reactDayPickerStyles.ts b/packages/react/src/date-picker/reactDayPickerStyles.ts
@@ -226,12 +226,8 @@ export const reactDayRangePickerStyles = (
 			'.rdp-day': {
 				...(inputMode === 'from' && startStyles),
 				...(inputMode === 'to' && endStyles),
-				'&:hover:not([disabled])::before': {
-					...(inputMode === 'from' && startStyles),
-					...(inputMode === 'to' && endStyles),
-					...highContrastOutlineStyles,
-					backgroundColor: boxPalette.backgroundShade,
-					borderColor: boxPalette.selected,
+				'&::before': {
+					borderColor: 'transparent',
 					borderStyle: 'solid',
 					borderWidth: tokens.borderWidth.lg,
 					content: '""',
@@ -240,6 +236,13 @@ export const reactDayRangePickerStyles = (
 					position: 'absolute',
 					zIndex: -1,
 				},
+				'&:hover:not([disabled])::before': {
+					...(inputMode === 'from' && startStyles),
+					...(inputMode === 'to' && endStyles),
+					...highContrastOutlineStyles,
+					backgroundColor: boxPalette.backgroundShade,
+					borderColor: boxPalette.selected,
+				},
 				'&:hover:not([disabled])': {
 					color: boxPalette.foregroundText,
 					textDecoration: 'underline',

diff --git a/packages/react/src/date-range-picker/DateRangePicker.tsx b/packages/react/src/date-range-picker/DateRangePicker.tsx
@@ -180,14 +180,11 @@ export const DateRangePicker = ({
 		[value]
 	);
 
-	const [hoveredDay, setHoveredDay] = useState<Date>();
+	const [hoveredDay, setHoveredDay] = useState<string>();
 
-	const onHover = useCallback(
-		(date: Date) => {
-			setHoveredDay(date);
-		},
-		[setHoveredDay]
-	);
+	const onHover = useCallback((date: Date) => {
+		setHoveredDay(date.toISOString());
+	}, []);
 
 	// From input state
 	const [fromInputValue, setFromInputValue] = useState(
@@ -427,7 +424,7 @@ export const DateRangePicker = ({
 						: valueAsDateOrUndefined.to,
 			},
 			modifiers: {
-				fromRange: (day: Date) => fromRange()[day.toDateString()],
+				fromRange: (day: Date) => fromRange()[day.toISOString()],
 			},
 			modifiersClassNames: {
 				fromRange: 'range',
@@ -557,12 +554,13 @@ export function useDateRangePickerIds(idProp?: string) {
 	return { fieldsetId, fromId, hintId, messageId, toId };
 }
 
-const getRange = (startDate?: Date, endDate?: Date) => {
+const getRange = (startDate?: Date | string, endDate?: Date | string) => {
 	const range: Record<string, boolean> = {};
 	if (startDate && endDate) {
-		let current = addDays(startDate, 1);
-		while (current < endDate) {
-			range[current.toDateString()] = true;
+		let current = addDays(new Date(startDate), 1);
+		const endDateAsDate = new Date(endDate);
+		while (current < endDateAsDate) {
+			range[current.toISOString()] = true;
 			current = addDays(current, 1);
 		}
 	}