fix(16740): DatePicker calendar close issue on clickAway, DatePicker not running onChange events, DatePicker setting and clearing date in range issues

[2nikhiltom]

Closes #16740
Closes #16710
Closes #17071
Closes #16991

Changelog

(a) Sets up a mousedown event listener on the document.
(b) Addes a handleMouseDown function which checks if any click is made outside the calendar(icon) and InputFields.

• If click is made outside closeCalendar function is called immediately
• (which basically closes the flat picker instance calendarRef.current.close() and removes the focus from inputField)
• Adds event type clickOutside while calling onCalendarClose (to capture it and return without processing )

(c) Deprecates the use of setTimeout

• Moved the logic from inside of setTimeout to handleCalendarClose function.
• a new useEffect is add to call handleCalendarClose whenever calendar closes

useEffect(() => {
  if (calendarCloseEvent) {
    const { selectedDates, dateStr, instance } = calendarCloseEvent;
   //handleCalendarClose handles the core logic of setTImeout 
    handleCalendarClose(selectedDates, dateStr, instance);
    setCalendarCloseEvent(null);
  }
}, [calendarCloseEvent, handleCalendarClose]);

Would love some review on usage of this interface

 interface CalendarCloseEvent {
    selectedDates: Date[];
    dateStr: string;
    instance: object; //This is `Intance` of flatpicker
  }

Testing / Reviewing

Open deploy preview and visit all the storybook examples

Each has demonstration on existing bugs fix (make sure calendar closes on clickaway, dates are rested on clear option, onchange events happens as expected )
Storybook examples needs to be restored or older version before merging

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	3779dc1
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66b072bdeb80dd000839a14e
😎 Deploy Preview	https://deploy-preview-17072--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	3779dc1
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66b072bd8182b00008a5fdc3
😎 Deploy Preview	https://deploy-preview-17072--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tay1orjones]

The storybook interaction looks good, but I'm concerned this change as is could have some unintended effects due to how the code is modifying how savedOnClose is used.

[guidari]

Hey Nikhil, looks like the overview page is not loading

[guidari]

I pulled down locally to test and looks good!
You can also close this issue #16991, It's working fine now!
🚀

[emyarod]

looks good to me! I think we can update the stories to remove the console.logs now

[riddhybansal]

Great Work !! 🚀