From 4e71583f7307df2303d71e0b5f5a4b94da716b47 Mon Sep 17 00:00:00 2001
From: Vadzim Hvazdovich <vadzim_hvazdovich@epam.com>
Date: Tue, 23 Jul 2024 15:24:27 +0300
Subject: [PATCH] EPMRPP-89804 || code review fixes - 1

---
 src/components/modal/README.md         |  3 +--
 src/components/modal/modal.stories.tsx |  3 ++-
 src/components/modal/modal.tsx         | 36 ++++++++++----------------
 3 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index 9247f72..b8ea51a 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -9,7 +9,6 @@ Default width - 480px, height 100%
 ### Props :
 
 - **title**: _string_, optional, default = ""
-- **headerNode**: _node_, optional, default = null
 - **children**: _node_, optional, default = null
 - **footerNode**: _node_, optional, default = null
 - **okButton**: _object_, optional, default = null
@@ -17,7 +16,7 @@ Default width - 480px, height 100%
 - **className**: _string_, optional, default = ""
 - **size**: _string_, optional, default = "default"
 - **onClose**: _function_, optional, default = () => {}
-- **contextHeight**: _boolean_, optional, default = undefined
+- **description**: _node_, optional, default = null
 
 ### Variants
 
diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx
index e544017..6544c13 100644
--- a/src/components/modal/modal.stories.tsx
+++ b/src/components/modal/modal.stories.tsx
@@ -37,7 +37,7 @@ export const Default: Story = {
 export const WithoutFooter: Story = {
   args: {
     withoutFooter: true,
-    headerDescription: 'title description',
+    description: 'title description',
   },
 };
 
@@ -98,6 +98,7 @@ export const OverlayLightCyan: Story = {
 export const Scrollable: Story = {
   args: {
     scrollable: true,
+    description: 'title description',
     children: (
       <>
         <p style={{ marginBlockEnd: 0, marginBlockStart: 0 }}>
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 5346f53..803dd7c 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -23,7 +23,6 @@ type ModalOverlay = 'default' | 'light-cyan';
 interface ModalProps {
   onClose?: () => void;
   title?: ReactNode;
-  headerNode?: ReactNode;
   children?: ReactNode;
   footerNode?: ReactNode;
   className?: string;
@@ -36,14 +35,12 @@ interface ModalProps {
   scrollable?: boolean;
   withoutFooter?: boolean;
   CustomFooter?: FC<{ closeHandler: () => void }>;
-  headerDescription?: string;
-  contextHeight?: number;
+  description?: ReactNode;
 }
 
 // TODO: Fix issue with modal positioning
 export const Modal: FC<ModalProps> = ({
   title,
-  headerNode,
   children,
   footerNode,
   okButton,
@@ -57,8 +54,7 @@ export const Modal: FC<ModalProps> = ({
   scrollable = false,
   withoutFooter = false,
   CustomFooter = null,
-  headerDescription = '',
-  contextHeight,
+  description = null,
 }) => {
   const [isShown, setShown] = useState(false);
   const [modalHeight, setModalHeight] = useState(0);
@@ -69,16 +65,12 @@ export const Modal: FC<ModalProps> = ({
   const modalMaxHeight = windowHeight * MODAL_MAX_RATIO;
   const modalMargin = (windowHeight - modalHeight) / 2;
   const getContentMaxHeight = () => {
-    if (contextHeight) {
-      return contextHeight;
-    }
-
     let contentMaxHeight = modalMaxHeight - MODAL_LAYOUT_PADDING;
     if (!withoutFooter) {
       contentMaxHeight = contentMaxHeight - MODAL_FOOTER_HEIGHT;
     }
 
-    if (headerDescription) {
+    if (description) {
       contentMaxHeight = contentMaxHeight - MODAL_HEADER_WITH_DESCRIPTION_HEIGHT;
     } else {
       contentMaxHeight = contentMaxHeight - MODAL_HEADER_HEIGHT;
@@ -129,23 +121,23 @@ export const Modal: FC<ModalProps> = ({
             animate={{ opacity: 1, marginTop: modalMargin }}
             exit={{ opacity: 0, marginTop: -modalMargin }}
             transition={{ duration: 0.3 }}
-            onAnimationComplete={() => modalRef.current?.focus()}
+            onAnimationStart={() => modalRef.current?.focus()}
           >
-            <ModalHeader
-              title={title}
-              onClose={closeModal}
-              withDescription={!!headerNode || !!headerDescription}
-            />
-            {headerNode && headerNode}
-            {headerDescription && (
-              <span className={cx('modal-header-description')}>{headerDescription}</span>
-            )}
+            <ModalHeader title={title} onClose={closeModal} withDescription={!!description} />
             {scrollable ? (
               <Scrollbars autoHeight autoHeightMax={getContentMaxHeight()} hideTracksWhenNotNeeded>
+                {description && (
+                  <span className={cx('modal-header-description')}>{description}</span>
+                )}
                 <ModalContent>{children}</ModalContent>
               </Scrollbars>
             ) : (
-              <ModalContent>{children}</ModalContent>
+              <>
+                {description && (
+                  <span className={cx('modal-header-description')}>{description}</span>
+                )}
+                <ModalContent>{children}</ModalContent>
+              </>
             )}
             {!withoutFooter &&
               (CustomFooter ? (