From 66cfbe54fc8e7a5c647dfa742713f3cfe4f5bf5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 19 Sep 2023 13:23:50 +0300
Subject: [PATCH] Refactor #4433 - OverlayPanel

---
 api-generator/components/overlaypanel.js      |  4 ++++
 components/lib/overlaypanel/OverlayPanel.d.ts | 15 +++++++++++++++
 components/lib/overlaypanel/OverlayPanel.vue  | 19 +++++++++++--------
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/api-generator/components/overlaypanel.js b/api-generator/components/overlaypanel.js
index b71692020..eeb74c637 100644
--- a/api-generator/components/overlaypanel.js
+++ b/api-generator/components/overlaypanel.js
@@ -76,6 +76,10 @@ const OverlayPanelEvents = [
     {
         name: 'hide',
         description: 'Callback to invoke before the overlay is hidden.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 
diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
index b7ce6c8cf..17b271679 100755
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -191,6 +191,21 @@ export interface OverlayPanelEmits {
      * Callback to invoke when the overlay is hidden.
      */
     hide(): void;
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close overlay panel function.
+         */
+        onClose: () => void;
+        /**
+         * Close button keydown function.
+         * @param {Event} event - Browser event
+         */
+        onKeydown: (event: Event) => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index 97dadcef5..1dd4a2789 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -2,14 +2,17 @@
     <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
             <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
-                <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
-                    <slot></slot>
-                </div>
-                <button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
-                    <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
-                    </slot>
-                </button>
+                <slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)"></slot>
+                <template v-else>
+                    <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
+                        <slot></slot>
+                    </div>
+                    <button v-if="showCloseIcon" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown" v-bind="ptm('closeButton')">
+                        <slot name="closeicon">
+                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
+                        </slot>
+                    </button>
+                </template>
             </div>
         </transition>
     </Portal>