From f104433bcad733b00fe9e284597bd84e864d7c4e Mon Sep 17 00:00:00 2001
From: Jared Scott <jared.scott@variable.team>
Date: Fri, 6 Sep 2024 13:59:52 +0800
Subject: [PATCH] feat: #6093 Fix Tailwind styles in unstyled mode

- Fix typos in tailwind style
- Remove `groupContainer` and `group` styles. They are not needed
- Fix panel styling
- In Calendar.js: remove minWidth when in unstyled mode. Calling `DomHandler.alignOverlay` force sets `minWidth`, so we need to back it out. See [Line 348](https://github.com/primefaces/primereact/blob/master/components/lib/utils/DomHandler.js#L348)
---
 components/lib/calendar/Calendar.js          |  5 +++++
 components/lib/passthrough/tailwind/index.js | 18 ++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 9950ab9196..c95f096cc6 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -1959,6 +1959,11 @@ export const Calendar = React.memo(
                     DomHandler.absolutePosition(overlayRef.current, inputRef.current);
                 }
             }
+
+            // #6093 Forcibly remove minWidth when in unstyled mode
+            if (isUnstyled()) {
+                overlayRef.current.style.minWidth = '';
+            }
         };
 
         const enableModality = () => {
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 15922964ce..9dbb1d41e2 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1207,9 +1207,9 @@ const Tailwind = {
             })
         },
         panel: ({ props }) => ({
-            className: classNames('bg-white dark:bg-gray-900', 'min-w-full', {
+            className: classNames('bg-white dark:bg-gray-900', 'top-0 left-0 w-auto min-w-min p-2 rounded-lg', {
                 'shadow-md border-0 absolute': !props.inline,
-                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
+                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40': props.inline
             })
         }),
         header: {
@@ -1237,7 +1237,7 @@ const Tailwind = {
             )
         },
         table: {
-            className: classNames('border-collapse w-full', 'my-2')
+            className: classNames('border-collapse w-full', 'my-2 mx-0')
         },
         tableHeaderCell: 'p-2',
         weekDay: 'text-gray-600 dark:text-white/70',
@@ -1252,7 +1252,7 @@ const Tailwind = {
                     'cursor-pointer': !context.disabled
                 },
                 {
-                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
                     'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
                 }
             )
@@ -1263,7 +1263,7 @@ const Tailwind = {
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'p-2 transition-shadow duration-200 rounded-lg',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+                { 'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
             )
         }),
         yearPicker: {
@@ -1275,7 +1275,7 @@ const Tailwind = {
                 'p-2 transition-shadow duration-200 rounded-lg',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
-                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
                     'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
                 }
             )
@@ -1302,10 +1302,8 @@ const Tailwind = {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupContainer: 'flex',
-        group: {
-            className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
-        },
+        groupContainer: '',
+        group: '',
         transition: TRANSITIONS.overlay
     },
     listbox: {