@redseed/redseed-ui-vue3 10.3.2 → 10.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "10.3.2",
+    "version": "10.3.3",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/MessageBox/MessageBox.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, computed, watch, watchEffect, useSlots, Comment, Fragment } from 'vue'
+import { ref, computed, watch, watchEffect, useSlots } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
+import { rendersContent } from '../../helpers/slots'
 
 const props = defineProps({
     closed: {
@@ -81,40 +82,6 @@ watch(() => props.closed, (value) => {
     isClosed.value = value
 })
 
-/**
- * A Fragment is a wrapper, so its own presence answers nothing — only what is
- * inside it does. Hence the recursion: a `v-for` compiles to a Fragment and
- * leaves a comment placeholder for each hidden item, so counting children
- * reported content for a list whose every action was filtered out (the usual
- * shape for permission-gated actions), and a nested `<template>` puts another
- * Fragment inside that one.
- *
- * `Array.isArray` rather than recursing straight into `children`, which is a raw
- * string on a Fragment built by hand as `h(Fragment, null, 'text')`. Vue's own
- * `ensureValidVNode` assumes the array and throws on that shape, so answering
- * "renders" here only hands it a slot it cannot render; treating it as empty
- * drops the row instead, which is the quieter of the two failures. Compiled
- * templates always produce the array.
- */
-function rendersNode(node) {
-    if (node.type === Comment) return false
-    if (node.type === Fragment) return Array.isArray(node.children) && node.children.some(rendersNode)
-
-    return true
-}
-
-/**
- * Whether a slot renders anything at all. Slot *presence* is not the same
- * question: a slot holding only a falsy `v-if` is still a truthy slot function
- * that renders a comment placeholder, which would put an empty padded row under
- * the message.
- */
-function rendersContent(slot) {
-    const nodes = slot?.()
-
-    return Boolean(nodes) && nodes.some(rendersNode)
-}
-
 /**
  * Announce the box as a live region so flash / MOTD content reaches assistive
  * tech (WCAG 4.1.3 Status Messages). `alert` is assertive — reserved for errors
@@ -195,7 +162,15 @@ function close() {
             text on a coloured tint is a contrast problem, and the action is a way
             out of the message rather than a restatement of its severity.
         -->
-        <div v-if="hasDismiss || rendersContent($slots.actions)" class="rsui-message-box__actions">
+        <!--
+            The scope is forwarded, and that is the whole of #331. `#actions` is declared
+            scoped below — `<slot name="actions" :close="close">` — so a consumer writing
+            the documented `<template #actions="{ close }">` compiles to a function that
+            destructures its only parameter. Probing it bare passed `undefined` and threw
+            `Cannot destructure property 'close' of 'undefined'`, taking the whole
+            MessageBox down. Shipped in 8.66.0.
+        -->
+        <div v-if="hasDismiss || rendersContent($slots.actions, { close })" class="rsui-message-box__actions">
             <button v-if="hasDismiss"
                 type="button"
                 class="rsui-message-box__dismiss"

package/src/helpers/slots.js

@@ -52,7 +52,15 @@ export function rendersContent(slot, scope) {
  * Comment vnodes are what a falsy `v-if` leaves behind. Fragments wrap lists and
  * `<template v-if>` blocks, so a truthy wrapper around a falsy child is a
  * Fragment whose only child is a Comment — counting length would treat that as
- * content.
+ * content. A `v-for` over a filtered list is the usual shape, and a nested
+ * `<template>` puts another Fragment inside that one.
+ *
+ * `Array.isArray` rather than recursing straight into `children`, which is a raw
+ * string on a Fragment built by hand as `h(Fragment, null, 'text')`. Vue's own
+ * `ensureValidVNode` assumes the array and throws on that shape, so answering
+ * "renders" there only hands it a slot it cannot render; treating it as empty
+ * drops the region instead, which is the quieter of the two failures. Compiled
+ * templates always produce the array.
  */
 function rendersNode(node) {
     if (node.type === Comment) return false