Fixed #8053 - Add showCloseIcon props to Dialog

Author: mertsincan

components/landing/blocksection.js

@@ -1,6 +1,6 @@
+import { Tag } from '@/components/lib/tag/Tag';
 import { classNames } from '@/components/lib/utils/ClassNames';
 import { useEffect, useState } from 'react';
-import { Tag } from '@/components/lib/tag/Tag';
 
 const BlockSection = () => {
     const [animation, setAnimation] = useState(false);
@@ -11,7 +11,7 @@ const BlockSection = () => {
 
     return (
         <section id="blocks-section" className="landing-blocks pt-8 overflow-hidden">
-            <div className="section-header" style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'center', gap: '1rem' }}>
+            <div className="section-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
                 PrimeBlocks
                 <Tag value="Coming Soon" severity="warning"></Tag>
             </div>

components/lib/dialog/Dialog.js

@@ -75,7 +75,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
         let activeElement = document.activeElement;
         let isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
 
-        if (!isActiveElementInDialog && props.closable && props.showHeader && closeRef.current) {
+        if (!isActiveElementInDialog && props.closable && props.showCloseIcon && props.showHeader && closeRef.current) {
             closeRef.current.focus();
         }
     };
@@ -428,7 +428,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
     }));
 
     const createCloseIcon = () => {
-        if (props.closable) {
+        if (props.closable && props.showCloseIcon) {
             const labelAria = props.ariaCloseIconLabel || ariaLabel('close');
 
             const closeButtonIconProps = mergeProps(

components/lib/dialog/DialogBase.js

@@ -295,6 +295,7 @@ export const DialogBase = ComponentBase.extend({
         resizable: true,
         rtl: false,
         showHeader: true,
+        showCloseIcon: true,
         style: null,
         transitionOptions: null,
         visible: false,

components/lib/dialog/dialog.d.ts

@@ -219,7 +219,7 @@ export interface DialogProps {
      */
     className?: string | undefined;
     /**
-     * Adds a close icon to the header to hide the dialog.
+     * When enabled, the dialog can be closed by clicking the close icon, pressing escape key or clicking the modal background.
      * @defaultValue true
      */
     closable?: boolean | undefined;
@@ -337,6 +337,11 @@ export interface DialogProps {
      * @defaultValue true
      */
     showHeader?: boolean | undefined;
+    /**
+     * When enabled, the close icon is displayed in the header.
+     * @defaultValue true
+     */
+    showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is not maximized.
      */