fixup! fixup! fixup! fixup! fixup! fixup! Re-implement Modal compon…

…ent using HTMLDialogElement (#461)

src/components/Modal/_helpers/dialogOnCancelHandler.js

@@ -1,19 +1,28 @@
 // Disable coverage for the following function
-/* istanbul ignore next line */
-export const dialogOnCancelHandler = (e, closeButtonRef, onCancel = undefined) => {
+/* istanbul ignore next */
+
+/**
+ * Handles the cancel event of the dialog which is fired when the user presses the Escape key or triggers cancel event
+ * by native dialog mechanism.
+ *
+ * It prevents the default behaviour of the native dialog and closes the dialog manually by clicking the close button,
+ * if the close button is not disabled.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param onCancelHandler
+ */
+export const dialogOnCancelHandler = (e, closeButtonRef, onCancelHandler = undefined) => {
   // Prevent the default behaviour of the event as we want to close dialog manually.
   e.preventDefault();
 
   // If the close button is not disabled, close the modal.
-  if (
-    closeButtonRef?.current != null
-    && closeButtonRef?.current?.disabled === false
-  ) {
+  if (closeButtonRef?.current != null && closeButtonRef?.current?.disabled === false) {
     closeButtonRef.current.click();
   }
 
   // This is a custom handler that is passed as a prop to the Modal component
-  if (onCancel) {
-    onCancel(e);
+  if (onCancelHandler) {
+    onCancelHandler(e);
   }
 };

src/components/Modal/_helpers/dialogOnClickHandler.js

@@ -1,5 +1,17 @@
 // Disable coverage for the following function
-/* istanbul ignore next line */
+/* istanbul ignore next */
+
+/**
+ * Handles the click event of the dialog which is fired when the user clicks on the dialog or on its descendants.
+ *
+ * This handler is used to close the dialog when the user clicks on the backdrop, if it is allowed to close
+ * on backdrop click and the close button is not disabled.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param dialogRef
+ * @param allowCloseOnBackdropClick
+ */
 export const dialogOnClickHandler = (
   e,
   closeButtonRef,

src/components/Modal/_helpers/dialogOnCloseHandler.js

@@ -1,5 +1,17 @@
 // Disable coverage for the following function
-/* istanbul ignore next line */
+/* istanbul ignore next */
+
+/**
+ * Handles the close event of the dialog which is fired when the user presses the Escape key or triggers close event
+ * by native dialog mechanism.
+ *
+ * It prevents the default behaviour of the native dialog and closes the dialog manually by clicking the close button,
+ * if the close button is not disabled.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param onCloseHandler
+ */
 export const dialogOnCloseHandler = (e, closeButtonRef, onCloseHandler = undefined) => {
   // Prevent the default behaviour of the event as we want to close dialog manually.
   e.preventDefault();

src/components/Modal/_helpers/dialogOnKeyDownHandler.js

@@ -1,5 +1,23 @@
 // Disable coverage for the following function
-/* istanbul ignore next line */
+/* istanbul ignore next */
+
+/**
+ * Handles the keydown event of the dialog which is fired when the user presses a key within the dialog.
+ *
+ * This handler is used to stop propagation of the Escape key press, if it is not allowed to close
+ * on Escape key and the close button is disabled.
+ *
+ * It is also used to trigger the primary action when the user presses the Enter key, if it is allowed to trigger
+ * the primary action on Enter key and the primary button is not disabled. This applies only when the focused
+ * element is an input or select as other elements should not trigger the primary action. Textarea is omitted
+ * as Enter key is used for new line.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param primaryButtonRef
+ * @param allowCloseOnEscapeKey
+ * @param allowPrimaryActionOnEnterKey
+ */
 export const dialogOnKeyDownHandler = (
   e,
   closeButtonRef,