From cba43b310b75be1d6e437ca3b532fd41b4ba4946 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 9 Nov 2023 17:18:51 +0300
Subject: [PATCH] Fixed #4784 - Collision Enhancements

---
 .../lib/cascadeselect/CascadeSelectSub.vue    |  37 +++--
 .../cascadeselect/style/CascadeSelectStyle.js |   9 ++
 components/lib/contextmenu/ContextMenuSub.vue |  17 +--
 .../lib/contextmenu/style/ContextMenuStyle.js |   3 +-
 components/lib/tieredmenu/TieredMenu.vue      |   7 +-
 components/lib/tieredmenu/TieredMenuSub.vue   | 138 ++++++++++--------
 .../lib/tieredmenu/style/TieredMenuStyle.js   |   9 ++
 components/lib/utils/DomHandler.js            |  29 ++++
 components/lib/utils/Utils.d.ts               |   1 +
 9 files changed, 155 insertions(+), 95 deletions(-)

diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index dc2838c8e..73585619b 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
@@ -45,6 +45,7 @@
                     @option-change="onOptionChange"
                     :pt="pt"
                     :unstyled="unstyled"
+                    :isParentMount="mounted"
                 />
             </li>
         </template>
@@ -62,6 +63,7 @@ export default {
     hostName: 'CascadeSelect',
     extends: BaseComponent,
     emits: ['option-change'],
+    container: null,
     props: {
         selectId: String,
         focusedOptionId: String,
@@ -74,12 +76,25 @@ export default {
         optionGroupChildren: Array,
         activeOptionPath: Array,
         level: Number,
-        templates: null
+        templates: null,
+        isParentMount: Boolean
+    },
+    data() {
+        return {
+            mounted: false
+        };
+    },
+    watch: {
+        isParentMount: {
+            handler(newValue) {
+                newValue && DomHandler.nestedPosition(this.container, this.level);
+            }
+        }
     },
     mounted() {
-        if (ObjectUtils.isNotEmpty(this.parentKey)) {
-            this.position();
-        }
+        // entering order correction when an item is selected
+        (this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
+        this.mounted = true;
     },
     methods: {
         getOptionId(processedOption) {
@@ -121,16 +136,8 @@ export default {
         onOptionChange(event) {
             this.$emit('option-change', event);
         },
-        position() {
-            const parentItem = this.$el.parentElement;
-            const containerOffset = DomHandler.getOffset(parentItem);
-            const viewport = DomHandler.getViewport();
-            const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
-            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
-            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-                this.$el.style.left = '-100%';
-            }
+        containerRef(el) {
+            this.container = el;
         }
     },
     directives: {
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index e1efbe54d..385d5a01a 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -82,6 +82,15 @@ const css = `
         left: 100%;
         top: 0;
     }
+
+    .p-cascadeselect-enter-from,
+    .p-cascadeselect-leave-active {
+        opacity: 0;
+    }
+
+    .p-cascadeselect-enter-active {
+        transition: opacity 150ms;
+    }
 }
 `;
 
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 2830b621c..b1b3336be 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -169,22 +169,7 @@ export default {
             return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
         },
         onEnter() {
-            this.position();
-        },
-        position() {
-            const parentItem = this.$refs.container.parentElement;
-            const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
-            const viewport = DomHandler.getViewport();
-            const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
-            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
-            this.$refs.container.style.top = '0px';
-
-            if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-                this.$refs.container.style.left = -1 * sublistWidth + 'px';
-            } else {
-                this.$refs.container.style.left = itemOuterWidth + 'px';
-            }
+            DomHandler.nestedPosition(this.$refs.container, this.level);
         },
         getMenuItemProps(processedItem, index) {
             return {
diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
index f704a325f..889867a9b 100644
--- a/components/lib/contextmenu/style/ContextMenuStyle.js
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -35,7 +35,8 @@ const css = `
         margin-left: auto;
     }
 
-    .p-contextmenu-enter-from {
+    .p-contextmenu-enter-from,
+    .p-contextmenu-leave-active {
         opacity: 0;
     }
 
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index cbd6cc83d..ee187ec0b 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -21,6 +21,7 @@
                     :templates="$slots"
                     :activeItemPath="activeItemPath"
                     :level="0"
+                    :visible="submenuVisible"
                     :pt="pt"
                     :unstyled="unstyled"
                     @focus="onFocus"
@@ -64,6 +65,7 @@ export default {
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
             visible: !this.popup,
+            submenuVisible: false,
             dirty: false
         };
     },
@@ -240,7 +242,10 @@ export default {
 
             const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
 
-            grouped && activeItemPath.push(processedItem);
+            if (grouped) {
+                activeItemPath.push(processedItem);
+                this.submenuVisible = true;
+            }
 
             this.focusedItemInfo = { index, level, parentKey };
             this.activeItemPath = activeItemPath;
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index 76e2a9dcb..19e5fcdde 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -1,72 +1,75 @@
 <template>
-    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
-        <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
-            <li
-                v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
-                :id="getItemId(processedItem)"
-                :style="getItemProp(processedItem, 'style')"
-                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
-                role="menuitem"
-                :aria-label="getItemLabel(processedItem)"
-                :aria-disabled="isItemDisabled(processedItem) || undefined"
-                :aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
-                :aria-haspopup="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
-                :aria-level="level + 1"
-                :aria-setsize="getAriaSetSize()"
-                :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, index, 'menuitem')"
-                :data-p-highlight="isItemActive(processedItem)"
-                :data-p-focused="isItemFocused(processedItem)"
-                :data-p-disabled="isItemDisabled(processedItem)"
-            >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
-                    <template v-if="!templates.item">
-                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
-                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
-                            <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
-                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
-                            </template>
-                        </a>
-                    </template>
-                    <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
-                </div>
-                <TieredMenuSub
-                    v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
-                    :id="getItemId(processedItem) + '_list'"
-                    :style="sx('submenu', true, { processedItem })"
-                    role="menu"
-                    :menuId="menuId"
-                    :focusedItemId="focusedItemId"
-                    :items="processedItem.items"
-                    :templates="templates"
-                    :activeItemPath="activeItemPath"
-                    :level="level + 1"
-                    :pt="pt"
-                    :unstyled="unstyled"
-                    @item-click="$emit('item-click', $event)"
-                    @item-mouseenter="$emit('item-mouseenter', $event)"
-                />
-            </li>
-            <li
-                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
-                :id="getItemId(processedItem)"
-                :style="getItemProp(processedItem, 'style')"
-                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
-                role="separator"
-                v-bind="ptm('separator')"
-            ></li>
-        </template>
-    </ul>
+    <transition name="p-tieredmenu" @enter="onEnter" v-bind="ptm('menu.transition')">
+        <ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+            <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
+                <li
+                    v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
+                    :id="getItemId(processedItem)"
+                    :style="getItemProp(processedItem, 'style')"
+                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                    role="menuitem"
+                    :aria-label="getItemLabel(processedItem)"
+                    :aria-disabled="isItemDisabled(processedItem) || undefined"
+                    :aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
+                    :aria-haspopup="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
+                    :aria-level="level + 1"
+                    :aria-setsize="getAriaSetSize()"
+                    :aria-posinset="getAriaPosInset(index)"
+                    v-bind="getPTOptions(processedItem, index, 'menuitem')"
+                    :data-p-highlight="isItemActive(processedItem)"
+                    :data-p-focused="isItemFocused(processedItem)"
+                    :data-p-disabled="isItemDisabled(processedItem)"
+                >
+                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                        <template v-if="!templates.item">
+                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <template v-if="getItemProp(processedItem, 'items')">
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
+                                    <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
+                                </template>
+                            </a>
+                        </template>
+                        <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                    </div>
+                    <TieredMenuSub
+                        v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                        :id="getItemId(processedItem) + '_list'"
+                        :style="sx('submenu', true, { processedItem })"
+                        role="menu"
+                        :menuId="menuId"
+                        :focusedItemId="focusedItemId"
+                        :items="processedItem.items"
+                        :templates="templates"
+                        :activeItemPath="activeItemPath"
+                        :level="level + 1"
+                        :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
+                        :pt="pt"
+                        :unstyled="unstyled"
+                        @item-click="$emit('item-click', $event)"
+                        @item-mouseenter="$emit('item-mouseenter', $event)"
+                    />
+                </li>
+                <li
+                    v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                    :id="getItemId(processedItem)"
+                    :style="getItemProp(processedItem, 'style')"
+                    :class="[cx('separator'), getItemProp(processedItem, 'class')]"
+                    role="separator"
+                    v-bind="ptm('separator')"
+                ></li>
+            </template>
+        </ul>
+    </transition>
 </template>
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-import { ObjectUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
 export default {
@@ -74,6 +77,7 @@ export default {
     hostName: 'TieredMenu',
     extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
+    container: null,
     props: {
         menuId: {
             type: String,
@@ -87,6 +91,10 @@ export default {
             type: Array,
             default: null
         },
+        visible: {
+            type: Boolean,
+            default: false
+        },
         level: {
             type: Number,
             default: 0
@@ -143,6 +151,9 @@ export default {
         isItemGroup(processedItem) {
             return ObjectUtils.isNotEmpty(processedItem.items);
         },
+        onEnter() {
+            DomHandler.nestedPosition(this.container, this.level);
+        },
         onItemClick(event, processedItem) {
             this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
             this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });
@@ -185,6 +196,9 @@ export default {
                     this.getPTOptions(processedItem, index, 'submenuIcon')
                 )
             };
+        },
+        containerRef(el) {
+            this.container = el;
         }
     },
     components: {
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
index 58b13be5c..a441de1e1 100644
--- a/components/lib/tieredmenu/style/TieredMenuStyle.js
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -41,6 +41,15 @@ const css = `
         left: 100%;
         top: 0;
     }
+
+    .p-tieredmenu-enter-from,
+    .p-tieredmenu-leave-active {
+        opacity: 0;
+    }
+
+    .p-tieredmenu-enter-active {
+        transition: opacity 250ms;
+    }
 }
 `;
 
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index f1dc0e175..e9b688f10 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -363,6 +363,35 @@ export default {
         }
     },
 
+    nestedPosition(element, level) {
+        if (element) {
+            const parentItem = element.parentElement;
+            const elementOffset = this.getOffset(parentItem);
+            const viewport = this.getViewport();
+            const sublistWidth = element.offsetParent ? element.offsetWidth : this.getHiddenElementOuterWidth(element);
+            const itemOuterWidth = this.getOuterWidth(parentItem.children[0]);
+            let left;
+
+            if (parseInt(elementOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - this.calculateScrollbarWidth()) {
+                if (parseInt(elementOffset.left, 10) < sublistWidth) {
+                    // for too small screens
+                    if (level % 2 === 1) {
+                        left = parseInt(elementOffset.left, 10) ? '-' + parseInt(elementOffset.left, 10) + 'px' : '100%';
+                    } else if (level % 2 === 0) {
+                        left = viewport.width - sublistWidth - this.calculateScrollbarWidth() + 'px';
+                    }
+                } else {
+                    left = '-100%';
+                }
+            } else {
+                left = '100%';
+            }
+
+            element.style.top = '0px';
+            element.style.left = left;
+        }
+    },
+
     getParents(element, parents = []) {
         return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
     },
diff --git a/components/lib/utils/Utils.d.ts b/components/lib/utils/Utils.d.ts
index 01c9feb8b..90b2223dc 100644
--- a/components/lib/utils/Utils.d.ts
+++ b/components/lib/utils/Utils.d.ts
@@ -34,6 +34,7 @@ export declare class DomHandler {
     static getWidth(el: HTMLElement): number;
     static absolutePosition(el: HTMLElement, target: HTMLElement): void;
     static relativePosition(el: HTMLElement, target: HTMLElement): void;
+    static nestedPosition(el: HTMLElement, level: number): void;
     static getParents(el: HTMLElement, parents?: any[]): any[];
     static getScrollableParents(el: HTMLElement): any[];
     static getHiddenElementOuterHeight(el: HTMLElement): number;