@redseed/redseed-ui-vue3 10.3.1 → 10.3.3

package/package.json

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

package/src/components/Disclosure/Disclosure.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, watchEffect, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, shallowRef, watch, watchEffect, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import { ChevronDownIcon } from '@heroicons/vue/24/outline'
 import { ButtonTertiary } from '../Button'
 import Icon from '../Icon/Icon.vue'
@@ -50,6 +50,8 @@ async function setContentMaxHeight() {
 
     await nextTick()
 
+    if (!contentRef.value) return
+
     contentRef.value.style.minHeight = contentRef.value.scrollHeight + 'px'
 }
 
@@ -58,6 +60,8 @@ async function resetContentMaxHeight() {
 
     await nextTick()
 
+    if (!contentRef.value) return
+
     contentRef.value.style.removeProperty('min-height')
 }
 
@@ -88,7 +92,7 @@ watch(isOpen, (open, wasOpen) => {
 }, { flush: 'sync' })
 
 /**
- * Whether each teleport target currently exists.
+ * Each teleport target's current element, or null while it is absent.
  *
  * Re-checked rather than latched. These used to only ever flip true, and the
  * observer disconnected once both had been found — so a consumer that removed a
@@ -96,15 +100,23 @@ watch(isOpen, (open, wasOpen) => {
  * `SectionHeader` does exactly that: it width-gates the slots a target is
  * mounted into, so narrowing a header past 640px took the trigger away and the
  * section could no longer be opened. See #372.
+ *
+ * The element itself goes to `to`, not an `#id` selector. Vue resolves a
+ * selector once, when the Teleport mounts, and never again when only
+ * `disabled` flips. A Disclosure mounted inside a subtree that is not yet in the
+ * document resolved null there, and enabling it then threw "Cannot read
+ * properties of null (reading 'insertBefore')" and wedged the whole page. A
+ * changed `to` is re-resolved, so a target that appears late or is re-created
+ * gets the content moved into the live element.
  */
-const canTeleportTrigger = ref(false)
-const canTeleportContent = ref(false)
+const triggerTarget = shallowRef(null)
+const contentTarget = shallowRef(null)
 
 let observer = null
 
 function setTeleport() {
-    canTeleportTrigger.value = Boolean(document.getElementById(triggerId))
-    canTeleportContent.value = Boolean(document.getElementById(contentId))
+    triggerTarget.value = document.getElementById(triggerId)
+    contentTarget.value = document.getElementById(contentId)
 }
 
 onMounted(() => {
@@ -149,8 +161,8 @@ onBeforeUnmount(() => {
         Vue's own `disabled` keeps this as one definition rendered in one of two
         places, rather than two copies that can drift.
     -->
-    <Teleport :to="`#${triggerId}`"
-        :disabled="!canTeleportTrigger"
+    <Teleport :to="triggerTarget"
+        :disabled="!triggerTarget"
     >
         <slot name="trigger"
             :handleTrigger="handleTrigger"
@@ -184,8 +196,8 @@ onBeforeUnmount(() => {
     </Teleport>
 
     <!-- Same reasoning as the trigger above: in place rather than nowhere. -->
-    <Teleport :to="`#${contentId}`"
-        :disabled="!canTeleportContent"
+    <Teleport :to="contentTarget"
+        :disabled="!contentTarget"
     >
         <div ref="contentRef"
             :class="[

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