[stable-4.2] fix: only render drop content when opened

packages/design-system/src/components/OcDrop/OcDrop.spec.ts

@@ -1,6 +1,5 @@
 import { defaultPlugins, mount, shallowMount } from '@opencloud-eu/web-test-helpers'
 import Drop from './OcDrop.vue'
-import { getTailwindPaddingClass, SizeType } from '../../helpers'
 import { computed, nextTick } from 'vue'
 import { useIsMobile } from '../../composables'
 
@@ -53,25 +52,6 @@ describe('OcDrop', () => {
     }
   })
 
-  it.each<SizeType | 'remove'>([
-    'xsmall',
-    'small',
-    'medium',
-    'large',
-    'xlarge',
-    'xxlarge',
-    'remove'
-  ])('handles padding size prop for value %s', async (size) => {
-    const { wrapper } = dom({ paddingSize: size })
-
-    const drop = wrapper.findComponent({ name: 'oc-drop' })
-    await nextTick()
-
-    const tailwindClassObj = getTailwindPaddingClass(size)
-    const tailwindClass = Object.entries(tailwindClassObj).find(([, v]) => v)?.[0]
-    expect(drop.html().includes(tailwindClass)).toBeTruthy()
-  })
-
   describe('tippy', () => {
     it('inits tippy', async () => {
       const { wrapper } = dom()

packages/design-system/src/components/OcDrop/OcDrop.vue

@@ -13,10 +13,10 @@
     <slot />
   </oc-bottom-drawer>
   <div v-else :id="dropId" ref="drop" class="oc-drop shadow-md/20 rounded-sm" @click="onClick">
-    <oc-card v-if="$slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
+    <oc-card v-if="isOpen && $slots.default" :body-class="[getTailwindPaddingClass(paddingSize)]">
       <slot />
     </oc-card>
-    <slot v-else name="special" />
+    <slot v-else-if="isOpen" name="special" />
   </div>
 </template>
 
@@ -140,6 +140,7 @@ const emit = defineEmits<Emits>()
 defineSlots<Slots>()
 
 const { isMobile } = useIsMobile()
+const isOpen = ref(false)
 
 const useBottomDrawer = computed(() => unref(isMobile) && !enforceDropOnMobile)
 const bottomDrawerRef = useTemplateRef<typeof OcBottomDrawer>('bottomDrawerRef')
@@ -182,10 +183,6 @@ const onFocusOut = (event: FocusEvent) => {
   }
 }
 
-onBeforeUnmount(() => {
-  drop.value?.removeEventListener('focusout', onFocusOut)
-})
-
 const triggerMapping = computed(() => {
   return (
     {
@@ -211,6 +208,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  unref(drop)?.removeEventListener('focusout', onFocusOut)
   destroy(unref(tippyInstance))
 })
 
@@ -236,15 +234,17 @@ const initializeTippy = () => {
     theme: 'none',
     maxWidth: 416,
     offset,
-    ...(!isNestedElement && {
-      onShow: (instance) => {
-        emit('showDrop')
+    onShow: (instance) => {
+      isOpen.value = true
+      emit('showDrop')
+      if (!isNestedElement) {
         hideAll({ exclude: instance })
-      },
-      onHide: () => {
-        emit('hideDrop')
       }
-    }),
+    },
+    onHide: () => {
+      isOpen.value = false
+      emit('hideDrop')
+    },
     popperOptions: {
       ...popperOptions,
       modifiers: [

packages/design-system/src/components/OcDrop/__snapshots__/OcDrop.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: visible; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden;"
   >
     <div
@@ -32,7 +32,7 @@ exports[`OcDrop > tippy > renders tippy 1`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
           <div
             class="oc-card"
@@ -68,7 +68,7 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: hidden; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden; pointer-events: none;"
   >
     <div
@@ -90,25 +90,9 @@ exports[`OcDrop > tippy > renders tippy 2`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
-          <div
-            class="oc-card"
-          >
-            <!--v-if-->
-
-            <div
-              class="oc-card-body p-4"
-            >
-
-
-              show
-
-
-            </div>
-
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div>
     </div>
@@ -126,7 +110,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
   </p>
   <div
     data-tippy-root=""
-    id="tippy-10"
+    id="tippy-3"
     style="z-index: 9999; visibility: visible; position: absolute; left: 0px; top: auto; margin: 0px; right: auto; bottom: 0px; transform: translate(0px, 0px); max-height: -20px; overflow-y: auto; overflow-x: hidden;"
   >
     <div
@@ -148,7 +132,7 @@ exports[`OcDrop > tippy > renders tippy 3`] = `
       >
         <div
           class="oc-drop shadow-md/20 rounded-sm"
-          id="oc-drop-15"
+          id="oc-drop-8"
         >
           <div
             class="oc-card"

packages/design-system/src/helpers/tailwind.spec.ts

@@ -0,0 +1,15 @@
+import { getTailwindPaddingClass } from './tailwind'
+import { SizeType } from './types'
+
+it.each<{ size: SizeType | 'remove'; class: string }>([
+  { size: 'xsmall', class: 'p-1' },
+  { size: 'small', class: 'p-2' },
+  { size: 'medium', class: 'p-4' },
+  { size: 'large', class: 'p-6' },
+  { size: 'xlarge', class: 'p-12' },
+  { size: 'xxlarge', class: 'p-24' },
+  { size: 'remove', class: 'p-0' }
+])('gets the correct tailwind padding class for a given size', ({ size, class: tailwindClass }) => {
+  const tailwindClassObj = getTailwindPaddingClass(size) as Record<string, boolean>
+  expect(tailwindClassObj[tailwindClass]).toBeTruthy()
+})

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -171,11 +171,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-1" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card">
-                  <!--v-if-->
-                  <div class="oc-card-body p-2"></div>
-                  <!--v-if-->
-                </div>
+                <!--v-if-->
               </div>
             </button></div>
         </td>
@@ -233,11 +229,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
               <div id="context-menu-drop-2" class="oc-drop shadow-md/20 rounded-sm">
-                <div class="oc-card">
-                  <!--v-if-->
-                  <div class="oc-card-body p-2"></div>
-                  <!--v-if-->
-                </div>
+                <!--v-if-->
               </div>
             </button></div>
         </td>

packages/web-app-files/src/components/Search/List.vue

@@ -114,9 +114,9 @@
             />
             <!--eslint-enable-->
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -30,9 +30,9 @@
       @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
       @sort="sortHandler"
     >
-      <template #contextMenu="{ resource, isOpen }">
+      <template #contextMenu="{ resource }">
         <context-actions
-          v-if="isOpen && isResourceInSelection(resource)"
+          v-if="isResourceInSelection(resource)"
           :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
         />
       </template>

packages/web-app-files/src/views/Favorites.vue

@@ -27,9 +27,9 @@
           <template #quickActions="props">
             <quick-actions class="hidden sm:block" :item="props.resource" />
           </template>
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -31,9 +31,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>

packages/web-app-files/src/views/shares/SharedWithOthers.vue

@@ -54,9 +54,9 @@
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space: getMatchingSpace(resource), resources: selectedResources }"
             />
           </template>

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -78,9 +78,9 @@
               @item-visible="loadPreview({ space, resource: $event })"
               @sort="handleSort"
             >
-              <template #contextMenu="{ resource, isOpen }">
+              <template #contextMenu="{ resource }">
                 <context-actions
-                  v-if="isOpen && isResourceInSelection(resource)"
+                  v-if="isResourceInSelection(resource)"
                   :action-options="{ space, resources: selectedResources }"
                 />
               </template>

packages/web-app-files/src/views/spaces/GenericTrash.vue

@@ -56,9 +56,9 @@
           :view-size="viewSize"
           @sort="handleSort"
         >
-          <template #contextMenu="{ resource, isOpen }">
+          <template #contextMenu="{ resource }">
             <context-actions
-              v-if="isOpen && isResourceInSelection(resource)"
+              v-if="isResourceInSelection(resource)"
               :action-options="{ space, resources: selectedResources }"
             />
           </template>

packages/web-app-files/src/views/spaces/Projects.vue

@@ -106,9 +106,9 @@
                 <oc-icon name="group" fill-type="line" />
               </oc-button>
             </template>
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <space-context-actions
-                v-if="isOpen && isResourceInSelection(resource)"
+                v-if="isResourceInSelection(resource)"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />

packages/web-app-files/src/views/trash/Overview.vue

@@ -47,9 +47,8 @@
             @sort="handleSort"
             @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           >
-            <template #contextMenu="{ resource, isOpen }">
+            <template #contextMenu="{ resource }">
               <trash-context-actions
-                v-if="isOpen"
                 :loading="resource.graphPermissions === undefined"
                 :action-options="{ resources: [resource] as SpaceResource[] }"
               />

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/EditDropdown.spec.ts

@@ -78,9 +78,10 @@ function getWrapper(props: PartialComponentProps<typeof EditDropdown> = {}) {
         ...props
       },
       global: {
+        renderStubDefaultSlot: true,
         plugins: [...defaultPlugins()],
         provide: { resource: mock<Resource>() },
-        stubs: { OcDrop: false, OcCard: false, OcList: false, ContextMenuItem: false }
+        stubs: { OcCard: false, OcList: false, ContextMenuItem: false }
       }
     })
   }

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts

@@ -42,7 +42,7 @@ describe('RoleDropdown', () => {
     expect(wrapper.find(selectors.recipientRoleBtn).exists()).toBeFalsy()
   })
   it('emits "optionChange"-event on role click', async () => {
-    const { wrapper } = getWrapper()
+    const { wrapper } = getWrapper({ mountType: shallowMount })
     ;(wrapper.vm.$refs.rolesDrop as any).tippy = { hide: vi.fn() }
     await wrapper.find(selectors.roleButton).trigger('click')
     expect(wrapper.emitted('optionChange')).toBeTruthy()

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -19,11 +19,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -64,11 +60,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
@@ -111,11 +103,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
         </button>
         <div id="space-context-drop" class="oc-drop shadow-md/20 rounded-sm" options="[object Object]">
-          <div class="oc-card">
-            <!--v-if-->
-            <div class="oc-card-body p-2"></div>
-            <!--v-if-->
-          </div>
+          <!--v-if-->
         </div>
       </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->