fix(Scrim,Snackbar): forward renderless through the teleport hosts and expose the element contract in slot attrs (#335)

Author: johnleider

packages/0/src/components/Scrim/Scrim.vue

@@ -46,6 +46,11 @@
     isBlocking: boolean
     /** Dismiss this overlay */
     dismiss: () => void
+    /** Attributes to bind to the scrim element */
+    attrs: {
+      style: { zIndex: number }
+      onClick: () => void
+    }
   }
 </script>
 
@@ -57,7 +62,7 @@
   import { useStack } from '#v0/composables/useStack'
 
   // Utilities
-  import { computed, useAttrs } from 'vue'
+  import { computed, mergeProps, useAttrs } from 'vue'
 
   defineOptions({ name: 'Scrim', inheritAttrs: false })
 
@@ -67,6 +72,7 @@
 
   const {
     as = 'div',
+    renderless,
     transition = 'fade',
     teleport = true,
     teleportTo = 'body',
@@ -84,17 +90,18 @@
   }
 
   function getSlotProps (ticket: StackTicket): ScrimSlotProps {
+    const zIndex = ticket.zIndex.value - 1
     return {
       ticket,
-      zIndex: ticket.zIndex.value - 1,
+      zIndex,
       isBlocking: ticket.blocking,
       dismiss: () => onDismiss(ticket),
+      attrs: {
+        style: { zIndex },
+        onClick: () => onDismiss(ticket),
+      },
     }
   }
-
-  function getStyle (ticket: StackTicket) {
-    return { zIndex: ticket.zIndex.value - 1 }
-  }
 </script>
 
 <template>
@@ -107,9 +114,8 @@
         v-for="ticket in tickets"
         :key="ticket.id"
         :as
-        :style="getStyle(ticket)"
-        v-bind="attrs"
-        @click="() => onDismiss(ticket)"
+        :renderless
+        v-bind="mergeProps(attrs, getSlotProps(ticket).attrs)"
       >
         <slot v-bind="getSlotProps(ticket)" />
       </Atom>
@@ -124,9 +130,8 @@
       v-for="ticket in tickets"
       :key="ticket.id"
       :as
-      :style="getStyle(ticket)"
-      v-bind="attrs"
-      @click="() => onDismiss(ticket)"
+      :renderless
+      v-bind="mergeProps(attrs, getSlotProps(ticket).attrs)"
     >
       <slot v-bind="getSlotProps(ticket)" />
     </Atom>

packages/0/src/components/Scrim/index.test.ts

@@ -322,6 +322,64 @@ describe('scrim', () => {
     })
   })
 
+  describe('renderless', () => {
+    it('should render no wrapper and carry the element contract in slot attrs', async () => {
+      let captured: any
+      const ticket = createMockTicket({ zIndex: 2500 })
+      mockSelectedItems.value = new Set([ticket])
+
+      const wrapper = mount(Scrim, {
+        props: { teleport: false, renderless: true },
+        slots: {
+          default: (props: any) => {
+            captured = props
+            return h('aside', { class: 'custom-scrim', ...props.attrs })
+          },
+        },
+      })
+
+      await nextTick()
+      const custom = wrapper.find('.custom-scrim')
+      expect(custom.exists()).toBe(true)
+      expect(wrapper.findAll('.custom-scrim')).toHaveLength(1)
+      expect(wrapper.findAll('div')).toHaveLength(0)
+      expect(captured.attrs.style.zIndex).toBe(2499)
+      expect((custom.element as HTMLElement).style.zIndex).toBe('2499')
+
+      await custom.trigger('click')
+      expect(ticket.dismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('should dismiss from the consumer element when teleported', async () => {
+      const target = document.createElement('div')
+      target.id = 'renderless-target'
+      document.body.append(target)
+
+      const ticket = createMockTicket({ zIndex: 3000 })
+      mockSelectedItems.value = new Set([ticket])
+
+      mount(Scrim, {
+        props: { teleportTo: '#renderless-target', renderless: true },
+        attachTo: document.body,
+        slots: {
+          default: (props: any) => h('aside', { class: 'custom-scrim', ...props.attrs }),
+        },
+      })
+
+      await nextTick()
+      const custom = target.querySelector('.custom-scrim') as HTMLElement
+      expect(custom).toBeTruthy()
+      expect(target.contains(custom)).toBe(true)
+      expect(target.querySelector('div')).toBeNull()
+      expect(custom.style.zIndex).toBe('2999')
+
+      custom.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      expect(ticket.dismiss).toHaveBeenCalledTimes(1)
+
+      target.remove()
+    })
+  })
+
   describe('transition', () => {
     it('should use fade transition by default', async () => {
       const ticket = createMockTicket()

packages/0/src/components/Snackbar/SnackbarPortal.vue

@@ -16,6 +16,9 @@
   import { Atom } from '#v0/components/Atom'
   import { Portal } from '#v0/components/Portal'
 
+  // Utilities
+  import { mergeProps } from 'vue'
+
   // Types
   import type { AtomProps } from '#v0/components/Atom'
 
@@ -27,6 +30,10 @@
   export interface SnackbarPortalSlotProps {
     /** Calculated z-index from useStack */
     zIndex: number
+    /** Attributes to bind to the portal element */
+    attrs: {
+      style: { zIndex: number }
+    }
   }
 </script>
 
@@ -39,15 +46,25 @@
 
   const {
     as = 'div',
+    renderless,
     teleport = 'body',
   } = defineProps<SnackbarPortalProps>()
+
+  function getSlotProps (zIndex: number): SnackbarPortalSlotProps {
+    return {
+      zIndex,
+      attrs: {
+        style: { zIndex },
+      },
+    }
+  }
 </script>
 
 <template>
   <Portal :disabled="teleport === false" :to="teleport || 'body'">
     <template #default="{ zIndex }">
-      <Atom :as :style="{ zIndex }" v-bind="$attrs">
-        <slot v-bind="{ zIndex }" />
+      <Atom :as :renderless v-bind="mergeProps($attrs, getSlotProps(zIndex).attrs)">
+        <slot v-bind="getSlotProps(zIndex)" />
       </Atom>
     </template>
   </Portal>

packages/0/src/components/Snackbar/index.test.ts

@@ -470,6 +470,27 @@ describe('snackbar', () => {
   })
 
   describe('renderless', () => {
+    it('should render no wrapper and carry zIndex style in slot attrs on portal', () => {
+      let captured: any
+
+      const wrapper = mountWithStack(Snackbar.Portal, {
+        props: { teleport: false, renderless: true },
+        slots: {
+          default: (props: any) => {
+            captured = props
+            return h('section', { 'data-testid': 'custom-portal', ...props.attrs }, 'Toasts')
+          },
+        },
+      })
+
+      const custom = wrapper.find('[data-testid="custom-portal"]')
+      expect(custom.exists()).toBe(true)
+      expect(wrapper.findAll('[data-testid="custom-portal"]')).toHaveLength(1)
+      expect(wrapper.findAll('div')).toHaveLength(0)
+      expect(captured.attrs.style.zIndex).toBe(captured.zIndex)
+      expect((custom.element as HTMLElement).style.zIndex).toBe(String(captured.zIndex))
+    })
+
     it('should render no wrapper and carry role in slot attrs on root', () => {
       let captured: any