From 3b5109526ea44128f2586a2c51fc19eefa9fdb6e Mon Sep 17 00:00:00 2001
From: Dmytro Shcherbonos <dmytro.sh@code-care.pro>
Date: Thu, 24 Aug 2023 14:28:25 +0300
Subject: [PATCH 1/2] Dialog: add style prop

---
 .../core/src/components/ui/Dialog/Dialog.Modal.js     | 11 ++++++++++-
 .../core/src/components/ui/Dialog/Dialog.Wrapper.js   |  8 ++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/ui/Dialog/Dialog.Modal.js b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
index 019763e3..0df1dcef 100644
--- a/packages/core/src/components/ui/Dialog/Dialog.Modal.js
+++ b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
@@ -21,6 +21,7 @@ const Modal = forwardRef(({
   width,
   height,
   textAlign,
+  style,
 }, ref) => {
   const titleRef = useRef()
   return (
@@ -47,7 +48,9 @@ const Modal = forwardRef(({
             'is-mobile-fullscreen': isFullscreenInMobile,
           })}
           ref={ref}
-          style={{ maxWidth: width, height, textAlign }}
+          style={{
+            maxWidth: width, height, textAlign, ...style,
+          }}
         >
           {title && (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
@@ -137,6 +140,11 @@ Modal.propTypes = {
    * Need to disable if modal contains iframe, to avoid conflicts
    */
   isFocusTrapEnabled: PropTypes.bool.isRequired,
+  /**
+   * Style object of the Modal
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.object,
 }
 
 Modal.defaultProps = {
@@ -150,6 +158,7 @@ Modal.defaultProps = {
   width: 460,
   height: 'auto',
   textAlign: 'center',
+  style: {},
 }
 
 export default Modal
diff --git a/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js b/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js
index fec144b3..d712d9b2 100644
--- a/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js
+++ b/packages/core/src/components/ui/Dialog/Dialog.Wrapper.js
@@ -26,6 +26,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
     height,
     textAlign,
     isFocusTrapEnabled,
+    style,
   } = props
 
   useEffect(() => {
@@ -77,6 +78,7 @@ const Dialog = forwardRef(function Dialog(props, ref) {
             width={width}
             height={height}
             textAlign={textAlign}
+            style={style}
           >
             {children}
           </Modal>
@@ -166,6 +168,11 @@ Dialog.propTypes = {
    * Need to disable if modal contains iframe, to avoid conflicts
    */
   isFocusTrapEnabled: PropTypes.bool,
+  /**
+   * Style object of the Modal
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.object,
 }
 
 Dialog.defaultProps = {
@@ -182,6 +189,7 @@ Dialog.defaultProps = {
   height: 'auto',
   textAlign: 'center',
   onSubmit: () => {},
+  style: {},
 }
 
 export default Dialog

From fb481ac6afcf00b925e47f74e91f591493711347 Mon Sep 17 00:00:00 2001
From: Dmytro Shcherbonos <dmytro.sh@code-care.pro>
Date: Thu, 24 Aug 2023 14:46:05 +0300
Subject: [PATCH 2/2] Dialog.Modal: add useMemo, formated

---
 .../core/src/components/ui/Dialog/Dialog.Modal.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/ui/Dialog/Dialog.Modal.js b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
index 0df1dcef..dd269bf9 100644
--- a/packages/core/src/components/ui/Dialog/Dialog.Modal.js
+++ b/packages/core/src/components/ui/Dialog/Dialog.Modal.js
@@ -1,10 +1,10 @@
 import cx from 'classnames'
 import FocusTrap from 'focus-trap-react'
 import PropTypes from 'prop-types'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useMemo, useRef } from 'react'
 
-import * as Classes from '../../../common/classes'
 import { DIALOG_CONTAINER_ID } from './Dialog.constants'
+import * as Classes from '../../../common/classes'
 
 const Modal = forwardRef(({
   state,
@@ -24,6 +24,13 @@ const Modal = forwardRef(({
   style,
 }, ref) => {
   const titleRef = useRef()
+  const modalStyle = useMemo(() => ({
+    maxWidth: width,
+    height,
+    textAlign,
+    ...style,
+  }), [width, height, textAlign, style])
+
   return (
     /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
     <FocusTrap
@@ -48,9 +55,7 @@ const Modal = forwardRef(({
             'is-mobile-fullscreen': isFullscreenInMobile,
           })}
           ref={ref}
-          style={{
-            maxWidth: width, height, textAlign, ...style,
-          }}
+          style={modalStyle}
         >
           {title && (
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex