@inglorious/ui 8.2.0 → 8.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -321,6 +321,7 @@
     "happy-dom": "^20.14.0",
     "jsdom": "^30.0.1",
     "prettier": "^3.9.6",
+    "remark-gfm": "^4.0.1",
     "storybook": "^10.6.0",
     "vite": "^8.2.2",
     "vitest": "^5.0.0"

package/src/data-display/icon/icon-utf8.stories.js

@@ -9,7 +9,7 @@ import {
 } from "../../stories/notifyStory.js"
 import { Icon } from "."
 
-const unicodeList = {
+const UnicodeList = {
   ...VirtualList,
 
   create(entity) {
@@ -38,7 +38,7 @@ const unicodeList = {
   render(entity, api) {
     return VirtualList.render(entity, {
       ...api,
-      getType: () => unicodeList,
+      getType: () => UnicodeList,
     })
   },
 
@@ -88,7 +88,7 @@ const unicodeList = {
 
 export default {
   title: "Data Display/Icon",
-  render: createEntityRender({ unicodeList }),
+  render: createEntityRender({ UnicodeList }),
   argTypes: {
     ...notifyActionArgType,
     start: {

package/src/data-display/virtual-list/handlers.js

@@ -45,12 +45,17 @@ export function scroll(entity, containerEl) {
  */
 export function mount(entity, containerEl) {
   const firstItem = containerEl.querySelector("[data-index]")
-  if (!firstItem) return
+  // A list not laid out yet, such as one rendered into a detached element,
+  // measures 0: keep the estimate, and measure again on a later render.
+  if (!firstItem?.offsetHeight) return
 
   entity.itemHeight = firstItem.offsetHeight
   entity.visibleRange = {
     start: 0,
-    end: Math.ceil(entity.viewportHeight / entity.itemHeight),
+    end: Math.min(
+      Math.ceil(entity.viewportHeight / entity.itemHeight),
+      entity.items?.length ?? Infinity,
+    ),
   }
 }
 

package/src/data-display/virtual-list/template.js

@@ -11,6 +11,31 @@ import { styleMap } from "@inglorious/web/directives/style-map"
 
 const PRETTY_INDEX = 1
 
+// The list elements already being measured. Every update re-renders, and
+// measuring is an update, so measuring on each render would loop forever.
+const measured = new WeakSet()
+
+/**
+ * Notifies `mount` once per list element, after a frame and once it is in the
+ * document: before that it has no layout to measure.
+ * @param {HTMLElement} el
+ * @param {VirtualListEntity} entity
+ * @param {Api} api
+ */
+function measureOnce(el, entity, api) {
+  if (measured.has(el)) return
+  measured.add(el)
+
+  const measure = () => {
+    if (!el.isConnected) {
+      requestAnimationFrame(measure)
+      return
+    }
+    api.notify(`#${entity.id}:mount`, el)
+  }
+  requestAnimationFrame(measure)
+}
+
 /**
  * Renders a virtualized list that only mounts visible items for performance.
  * Uses item height estimates to compute scroll ranges and notifies on mount/scroll.
@@ -49,11 +74,7 @@ export function render(entity, api) {
       style=${styleMap({ height: `${viewportHeight}px`, overflow: "auto" })}
       @scroll=${(e) => api.notify(`#${entity.id}:scroll`, e.currentTarget)}
       ${ref((el) => {
-        if (el && !itemHeight) {
-          queueMicrotask(() => {
-            api.notify(`#${entity.id}:mount`, el)
-          })
-        }
+        if (el && !itemHeight) measureOnce(el, entity, api)
       })}
     >
       <div