From dc1db1c6aa1a46e28b5b5f63e1509ce948a14081 Mon Sep 17 00:00:00 2001
From: Quek Ruo Ling <ruoling.quek@ufinity.com>
Date: Thu, 18 May 2023 16:07:17 +0800
Subject: [PATCH] [MISC][RL] Restore onSelectionCancel for range input

---
 src/time-range-picker/time-range-picker.tsx         | 2 ++
 src/time-range-picker/types.ts                      | 4 ++++
 stories/form/form-time-range-picker/props-table.tsx | 6 ++++++
 3 files changed, 12 insertions(+)

diff --git a/src/time-range-picker/time-range-picker.tsx b/src/time-range-picker/time-range-picker.tsx
index 9af01fe6d..afd88d10f 100644
--- a/src/time-range-picker/time-range-picker.tsx
+++ b/src/time-range-picker/time-range-picker.tsx
@@ -19,6 +19,7 @@ export const TimeRangePicker = ({
     readOnly,
     onChange,
     onBlur,
+    onSelectionCancel,
     ...otherProps
 }: TimeRangePickerProps) => {
     // =============================================================================
@@ -89,6 +90,7 @@ export const TimeRangePicker = ({
     const handleSelectionDropdownCancel = () => {
         setShowEndTimeSelector(false);
         setShowStartTimeSelector(false);
+        onSelectionCancel && onSelectionCancel();
     };
 
     const handleStartTime = (value: string) => {
diff --git a/src/time-range-picker/types.ts b/src/time-range-picker/types.ts
index ef5f52429..443897de2 100644
--- a/src/time-range-picker/types.ts
+++ b/src/time-range-picker/types.ts
@@ -35,4 +35,8 @@ export interface TimeRangePickerProps {
      * Called when a defocus is made on the field
      */
     onBlur?: (() => void) | undefined;
+    /**
+     * Called when the "Cancel" button is clicked
+     */
+    onSelectionCancel?: (() => void) | undefined;
 }
diff --git a/stories/form/form-time-range-picker/props-table.tsx b/stories/form/form-time-range-picker/props-table.tsx
index ccce0bba3..ea6f27ae7 100644
--- a/stories/form/form-time-range-picker/props-table.tsx
+++ b/stories/form/form-time-range-picker/props-table.tsx
@@ -71,6 +71,12 @@ const DATA: ApiTableSectionProps[] = [
                 description: "Called when a defocus happens",
                 propTypes: ["() => void"],
             },
+            {
+                name: "onSelectionCancel",
+                description:
+                    "Called when the user clicks on the 'Cancel' button in the time selection box. Any changes will not be applied",
+                propTypes: ["() => void"],
+            },
         ],
     },
     {