Merge pull request #5305 from melloware/PR5296

Fix #5296: Tailwind dialog mask props
primefaces · Nov 13, 2023 · c270c51 · c270c51
2 parents 9cc43fb + 6863cff
commit c270c51
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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 {