From 6863cffd0ae969463027d9bd78a25d9035e5aedc Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Mon, 13 Nov 2023 07:57:10 -0500
Subject: [PATCH] Fix #5296: Tailwind dialog mask props

---
 components/doc/dialog/theming/tailwinddoc.js | 4 ++--
 components/lib/dialog/Dialog.js              | 2 +-
 components/lib/passthrough/tailwind/index.js | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/doc/dialog/theming/tailwinddoc.js b/components/doc/dialog/theming/tailwinddoc.js
index 93a55ed31a..5c2b8516f0 100644
--- a/components/doc/dialog/theming/tailwinddoc.js
+++ b/components/doc/dialog/theming/tailwinddoc.js
@@ -35,8 +35,8 @@ const Tailwind = {
         footer: {
             className: classNames('shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80')
         },
-        mask: ({ props }) => ({
-            className: classNames('transition duration-200', { 'bg-black/40': props.modal })
+        mask: ({ state }) => ({
+            className: classNames('transition duration-200', { 'bg-black/40': state.containerVisible })
         }),
         transition: ({ props }) => {
             return props.position === 'top'
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index def3fc697a..2bc136a4f1 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -638,7 +638,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
             {
                 ref: maskRef,
                 style: sx('mask'),
-                className: cx('mask', { maskVisibleState }),
+                className: cx('mask'),
                 onPointerUp: onMaskPointerUp
             },
             ptm('mask')
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 927ff95585..d886bb9bde 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -326,8 +326,8 @@ const Tailwind = {
         footer: {
             className: classNames('flex gap-2 shrink-0 justify-end align-center', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80')
         },
-        mask: ({ props }) => ({
-            className: classNames('transition duration-200', { 'bg-black/40': props.modal })
+        mask: ({ state }) => ({
+            className: classNames('transition duration-200', { 'bg-black/40': state.containerVisible })
         }),
         transition: ({ props }) => {
             return {