@indielayer/ui 1.17.0 → 1.18.0

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.17.0";
+declare const _default: "1.18.0";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.17.0";
+const e = "1.18.0";
 export {
   e as default
 };

package/lib/virtual/components/virtualList/VirtualList.vue.js

@@ -1,11 +1,11 @@
-import { defineComponent as _, ref as $, computed as i, watch as h, openBlock as g, createBlock as k, resolveDynamicComponent as E, normalizeClass as B, normalizeStyle as f, withCtx as D, createElementBlock as V, Fragment as O, renderList as P, renderSlot as w, createElementVNode as L, unref as N } from "vue";
-import { useVirtualizer as X } from "../../core/useVirtualizer.js";
-import { isDynamicRowHeight as Y } from "./isDynamicRowHeight.js";
-import { DATA_ATTRIBUTE_LIST_INDEX as F } from "./useDynamicRowHeight.js";
-const G = {
+import { defineComponent as k, ref as E, computed as i, watch as h, openBlock as w, createBlock as B, resolveDynamicComponent as D, normalizeClass as V, normalizeStyle as f, withCtx as P, createElementBlock as L, Fragment as N, renderList as O, renderSlot as g, createElementVNode as X, unref as Y } from "vue";
+import { useVirtualizer as F } from "../../core/useVirtualizer.js";
+import { isDynamicRowHeight as G } from "./isDynamicRowHeight.js";
+import { DATA_ATTRIBUTE_LIST_INDEX as U } from "./useDynamicRowHeight.js";
+const j = {
   name: "XVirtualList"
-}, M = /* @__PURE__ */ _({
-  ...G,
+}, Q = /* @__PURE__ */ k({
+  ...j,
   props: {
     class: {},
     defaultHeight: { default: 0 },
@@ -19,7 +19,7 @@ const G = {
     tag: { default: "div" }
   },
   setup(v, { expose: y }) {
-    const t = v, n = $(null), p = i(() => t.rowProps || {}), H = i(() => t.rowCount), a = i(() => Y(t.rowHeight)), x = i(() => {
+    const t = v, n = E(null), p = i(() => t.rowProps || {}), x = i(() => t.rowCount), a = i(() => G(t.rowHeight)), H = i(() => {
       if (a.value) {
         const e = t.rowHeight, o = e.getAverageRowHeight();
         return (r) => e.getRowHeight(r) ?? o;
@@ -28,19 +28,19 @@ const G = {
     }), {
       getCellBounds: R,
       getEstimatedSize: C,
-      scrollToIndex: b,
+      scrollToIndex: I,
       startIndexOverscan: u,
-      startIndexVisible: I,
+      startIndexVisible: z,
       stopIndexOverscan: c,
-      stopIndexVisible: z
-    } = X({
+      stopIndexVisible: b
+    } = F({
       containerElement: n,
       containerStyle: t.style,
       defaultContainerSize: t.defaultHeight,
       direction: "vertical",
-      itemCount: H,
+      itemCount: x,
       itemProps: p,
-      itemSize: x,
+      itemSize: H,
       onResize: t.onResize,
       overscanCount: t.overscanCount
     });
@@ -54,7 +54,7 @@ const G = {
         index: r
       }) {
         var d, l;
-        const s = b({
+        const s = I({
           align: e,
           containerScrollOffset: ((d = n.value) == null ? void 0 : d.scrollTop) ?? 0,
           index: r
@@ -66,19 +66,21 @@ const G = {
       }
     }), h(
       [n, u, c, a, () => t.rowHeight],
-      ([e, o, r, s]) => !e || !s ? void 0 : (() => {
-        const l = Array.from(e.children).filter((m, T) => {
+      ([e, o, r, s], d, l) => {
+        if (!e || !s)
+          return;
+        const T = Array.from(e.children).filter((m, _) => {
           if (m.hasAttribute("aria-hidden"))
             return !1;
-          const S = `${o + T}`;
-          return m.setAttribute(F, S), !0;
-        });
-        return t.rowHeight.observeRowElements(l);
-      })(),
+          const $ = `${o + _}`;
+          return m.setAttribute(U, $), !0;
+        }), S = t.rowHeight;
+        l(S.observeRowElements(T));
+      },
       { flush: "post" }
       // Run after DOM updates
     ), h(
-      [u, I, c, z],
+      [u, z, c, b],
       ([e, o, r, s]) => {
         e >= 0 && r >= 0 && t.onRowsRendered && t.onRowsRendered(
           {
@@ -117,10 +119,10 @@ const G = {
         }
       return e;
     });
-    return (e, o) => (g(), k(E(e.tag), {
+    return (e, o) => (w(), B(D(e.tag), {
       ref_key: "element",
       ref: n,
-      class: B(e.$props.class),
+      class: V(e.$props.class),
       style: f({
         position: "relative",
         maxHeight: "100%",
@@ -130,19 +132,19 @@ const G = {
       }),
       role: "list"
     }, {
-      default: D(() => [
-        (g(!0), V(O, null, P(A.value, (r) => w(e.$slots, "row", {
+      default: P(() => [
+        (w(!0), L(N, null, O(A.value, (r) => g(e.$slots, "row", {
           key: r.key,
           index: r.index,
           style: f(r.style),
           ariaAttributes: r.ariaAttributes,
           props: p.value
         })), 128)),
-        w(e.$slots, "default"),
-        L("div", {
+        g(e.$slots, "default"),
+        X("div", {
           "aria-hidden": "",
           style: f({
-            height: `${N(C)}px`,
+            height: `${Y(C)}px`,
             width: "100%",
             zIndex: -1
           })
@@ -153,5 +155,5 @@ const G = {
   }
 });
 export {
-  M as default
+  Q as default
 };

package/lib/virtual/components/virtualList/useDynamicRowHeight.js

@@ -1,56 +1,55 @@
-import { ref as p, watch as d, onBeforeUnmount as H } from "vue";
-import { assert as R } from "../../utils/assert.js";
+import { ref as p, watch as d, getCurrentInstance as H, onBeforeUnmount as R } from "vue";
+import { assert as I } from "../../utils/assert.js";
 const b = "data-virtual-index";
-function x({
+function y({
   defaultRowHeight: v,
-  key: a
+  key: o
 }) {
-  const r = p(/* @__PURE__ */ new Map()), o = p(0);
-  a !== void 0 && typeof a == "object" && "value" in a && d(a, () => {
-    r.value = /* @__PURE__ */ new Map(), o.value++;
+  const r = p(/* @__PURE__ */ new Map()), a = p(0);
+  o !== void 0 && typeof o == "object" && "value" in o && d(o, () => {
+    r.value = /* @__PURE__ */ new Map(), a.value++;
   });
   const w = () => {
-    o.value;
+    a.value;
     let e = 0;
     return r.value.forEach((t) => {
       e += t;
     }), e === 0 ? v : e / r.value.size;
   }, m = (e) => {
-    o.value;
+    a.value;
     const t = r.value.get(e);
     return t !== void 0 ? t : v;
   }, A = (e, t) => {
     if (r.value.get(e) === t)
       return;
     const n = new Map(r.value);
-    n.set(e, t), r.value = n, o.value++;
+    n.set(e, t), r.value = n, a.value++;
   }, E = (e) => {
     if (e.length === 0)
       return;
     let t = !1;
     const n = [];
     if (e.forEach((s) => {
-      const { borderBoxSize: i, target: c } = s, h = c.getAttribute(b);
-      R(
-        h !== null,
+      const { borderBoxSize: i, target: c } = s, g = c.getAttribute(b);
+      I(
+        g !== null,
         `Invalid ${b} attribute value`
       );
-      const g = parseInt(h), { blockSize: l } = i[0];
+      const h = parseInt(g), { blockSize: l } = i[0];
       if (!l)
         return;
-      r.value.get(g) !== l && (n.push({ index: g, height: l }), t = !0);
+      r.value.get(h) !== l && (n.push({ index: h, height: l }), t = !0);
     }), t) {
       const s = new Map(r.value);
       n.forEach(({ index: i, height: c }) => {
         s.set(i, c);
-      }), r.value = s, o.value++;
+      }), r.value = s, a.value++;
     }
   }, u = new ResizeObserver(E);
-  H(f);
   function f() {
     u.disconnect();
   }
-  return {
+  return H() && R(f), {
     getAverageRowHeight: w,
     getRowHeight: m,
     setRowHeight: A,
@@ -65,5 +64,5 @@ function x({
 }
 export {
   b as DATA_ATTRIBUTE_LIST_INDEX,
-  x as useDynamicRowHeight
+  y as useDynamicRowHeight
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -50,12 +50,13 @@
   "devDependencies": {
     "@indielayer/stylelint-config": "^1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
+    "@unhead/vue": "^2.0.19",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.16.18",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/test-utils": "^2.4.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^11.1.0",
@@ -107,9 +108,13 @@
     "gen:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
     "gen:version": "node .scripts/gen-version.cjs",
     "gen:search": "node .scripts/gen-search.cjs",
+    "gen:llms": "node .scripts/gen-llms.cjs",
+    "gen:sitemap": "node .scripts/gen-sitemap.cjs",
     "test": "pnpm test:unit",
+    "test:ci": "vitest run --environment jsdom",
     "test:unit": "vitest --environment jsdom",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
+    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore",
+    "stylelint:fix": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore --fix"
   }
 }

package/src/components/container/theme/Container.base.theme.ts

@@ -5,7 +5,7 @@ const theme: ContainerTheme = {
     wrapper: ({ props }) => {
       const classes = ['px-4 md:px-6']
 
-      if (!props.fluid) classes.push('max-w-screen-lg mx-auto')
+      if (!props.fluid) classes.push('max-w-screen-xl mx-auto')
 
       return classes
     },

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,7 +4,7 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-sm text-secondary-600 dark:text-secondary-300',
+    label: 'font-medium text-xs text-slate-400 dark:text-secondary-300',
 
     line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
   },

package/src/components/input/Input.vue

@@ -152,14 +152,13 @@ defineExpose({ focus, blur, reset, validate, setError })
         ref="elRef"
         :class="[
           classes.input,
-          type === 'password' ? 'pr-10' : '',
           // error
           errorInternal
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
             '!pl-10': iconLeft || icon,
-            '!pr-10': iconRight,
+            '!pr-10': iconRight || showPasswordToggle || showClearIcon,
           },
         ]"
         :disabled="disabled"

package/src/components/select/Select.vue

@@ -17,6 +17,9 @@ const selectProps = {
     type: String,
     default: 'Filter by...',
   },
+  filterablePrefix: Boolean,
+  filterableSuffix: Boolean,
+  hideSelectedOptionSlots: Boolean,
   virtualList: Boolean,
   virtualListOffsetTop: Number,
   virtualListOffsetBottom: Number,
@@ -110,12 +113,35 @@ const selected = computed<any | any[]>({
   },
 })
 
-const labelCache = computed(() => {
-  if (!props.options) return new Map<SelectOption, string>()
+const optionsByValue = computed(() => {
+  if (!props.options) return new Map<string | number, SelectOption>()
 
-  return new Map(props.options.map((option) => [option, option.label.toLowerCase()]))
+  return new Map(props.options.map((option) => [option.value, option]))
 })
 
+const filterCache = computed(() => {
+  if (!props.options) return new Map<SelectOption, { label: string; prefix?: string; suffix?: string; }>()
+
+  return new Map(props.options.map((option) => [
+    option,
+    {
+      label: option.label.toLowerCase(),
+      prefix: props.filterablePrefix && option.prefix ? option.prefix.toLowerCase() : undefined,
+      suffix: props.filterableSuffix && option.suffix ? option.suffix.toLowerCase() : undefined,
+    },
+  ]))
+})
+
+function matchesFilter(option: SelectOption, filterLower: string) {
+  const cached = filterCache.value.get(option)
+
+  if (!cached) return false
+
+  return cached.label.includes(filterLower)
+    || cached.prefix?.includes(filterLower)
+    || cached.suffix?.includes(filterLower)
+}
+
 const internalOptions = computed(() => {
   if (!props.options || props.options.length === 0) return []
 
@@ -128,10 +154,9 @@ const internalOptions = computed(() => {
       : [],
   )
   const singleSelectedValue = !internalMultiple.value ? selected.value : null
-  const cache = labelCache.value
 
   return props.options
-    .filter((option) => !hasFilter || cache.get(option)?.includes(filterLower))
+    .filter((option) => !hasFilter || matchesFilter(option, filterLower))
     .map((option) => {
       const isActive = internalMultiple.value
         ? selectedSet.has(option.value)
@@ -265,7 +290,7 @@ function findSelectableIndex(start: number | undefined, direction = 'down') {
 }
 
 function handleOptionClick(value: string | number) {
-  const option = props.options?.find((i) => i.value === value)
+  const option = getItem(value)
 
   if (!option || option.disabled) return
 
@@ -326,8 +351,14 @@ function handleRemove(e: Event, value: string) {
   }
 }
 
+function getItem(value: string | number | []) {
+  if (Array.isArray(value)) return undefined
+
+  return optionsByValue.value.get(value)
+}
+
 function getLabel(value: string | number | []) {
-  const option = props.options?.find((i) => i.value === value)
+  const option = getItem(value)
 
   if (option) return option.label
 
@@ -542,15 +573,29 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                     :key="value"
                     size="xs"
                     removable
-                    :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
-                    :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
+                    :outlined="!(isDisabled || getItem(value)?.disabled)"
+                    :disabled="isDisabled || getItem(value)?.disabled"
                     :style="{ 'max-width': valueIndex === 0 && hiddenTagsCounterRef ? `calc(100% - ${hiddenTagsCounterRef.offsetWidth + 6 + 'px'})` : undefined }"
                     @remove="(e: Event) => { handleRemove(e, value) }"
                   >
-                    <template #prefix>
-                      <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                    <template v-if="!hideSelectedOptionSlots">
+                      <div class="flex items-center">
+                        <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
+                          <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                        </span>
+
+                        <span class="flex-1 truncate">
+                          {{ getLabel(value) }}
+                        </span>
+
+                        <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
+                          <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                        </span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      {{ getLabel(value) }}
                     </template>
-                    {{ getLabel(value) }}
                   </x-tag>
 
                   <div
@@ -562,7 +607,24 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 </div>
               </template>
               <template v-else-if="!internalMultiple && !isEmpty(selected) && getLabel(selected) !== ''">
-                {{ getLabel(selected) }}
+                <template v-if="!hideSelectedOptionSlots">
+                  <div class="flex items-center">
+                    <span v-if="$slots.prefix || getItem(selected)?.prefix" class="mr-2 shrink-0">
+                      <slot name="prefix" :item="getItem(selected)">{{ getItem(selected)?.prefix }}</slot>
+                    </span>
+
+                    <span class="flex-1 truncate">
+                      {{ getLabel(selected) }}
+                    </span>
+
+                    <span v-if="$slots.suffix || getItem(selected)?.suffix" class="ml-1 shrink-0">
+                      <slot name="suffix" :item="getItem(selected)">{{ getItem(selected)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(selected) }}
+                </template>
               </template>
 
               <template v-else>
@@ -636,14 +698,28 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                 :key="value"
                 size="xs"
                 removable
-                :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
-                :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
+                :outlined="!(isDisabled || getItem(value)?.disabled)"
+                :disabled="isDisabled || getItem(value)?.disabled"
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >
-                <template #prefix>
-                  <slot name="tag-prefix" :item="options?.find((i) => i.value === value)"></slot>
+                <template v-if="!hideSelectedOptionSlots">
+                  <div class="flex items-center">
+                    <span v-if="$slots.prefix || getItem(value)?.prefix" class="mr-2 shrink-0">
+                      <slot name="prefix" :item="getItem(value)">{{ getItem(value)?.prefix }}</slot>
+                    </span>
+
+                    <span class="flex-1 truncate">
+                      {{ getLabel(value) }}
+                    </span>
+
+                    <span v-if="$slots.suffix || getItem(value)?.suffix" class="ml-1 shrink-0">
+                      <slot name="suffix" :item="getItem(value)">{{ getItem(value)?.suffix }}</slot>
+                    </span>
+                  </div>
+                </template>
+                <template v-else>
+                  {{ getLabel(value) }}
                 </template>
-                {{ getLabel(value) }}
               </x-tag>
             </x-popover-container>
           </template>

package/src/version.ts

@@ -1 +1 @@
-export default '1.17.0'
+export default '1.18.0'

package/src/virtual/components/virtualList/VirtualList.test.ts

@@ -1,47 +1,164 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { h, type CSSProperties } from 'vue'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { h, nextTick, type CSSProperties } from 'vue'
 import VirtualList from './VirtualList.vue'
+import { useDynamicRowHeight, DATA_ATTRIBUTE_LIST_INDEX } from './useDynamicRowHeight'
+import { mockResizeObserver, setElementSize } from '../../test-utils/mockResizeObserver'
+import type { DynamicRowHeight } from './types'
 
 interface RowSlotProps {
   index: number;
   style: CSSProperties;
 }
 
+const listStyle = { height: '400px' } as const
+
+function mountVirtualList(
+  props: Record<string, unknown>,
+  dynamicRowHeight?: DynamicRowHeight,
+) {
+  return mount(VirtualList, {
+    props: {
+      rowCount: 100,
+      rowHeight: dynamicRowHeight ?? 50,
+      style: listStyle,
+      ...props,
+    },
+    slots: {
+      row: ({ index, style }: RowSlotProps) =>
+        h('div', { style, class: 'test-row' }, `Row ${index}`),
+    },
+  })
+}
+
+function createMockDynamicRowHeight(defaultRowHeight = 50) {
+  const unobserve = vi.fn<[], void>()
+
+  const dynamicRowHeight: DynamicRowHeight = {
+    getAverageRowHeight: vi.fn(() => defaultRowHeight),
+    getRowHeight: vi.fn(() => undefined),
+    setRowHeight: vi.fn(),
+    observeRowElements: vi.fn(() => unobserve),
+    cleanup: vi.fn(),
+  }
+
+  return { dynamicRowHeight, unobserve }
+}
+
 describe('VirtualList', () => {
   it('renders correctly', () => {
-    const wrapper = mount(VirtualList, {
-      props: {
-        rowCount: 100,
-        rowHeight: 50,
-        style: { height: '400px' },
-      },
-      slots: {
-        row: ({ index, style }: RowSlotProps) =>
-          h('div', { style }, `Row ${index}`),
-      },
-    })
+    const wrapper = mountVirtualList({})
 
     expect(wrapper.exists()).toBe(true)
     expect(wrapper.attributes('role')).toBe('list')
   })
 
   it('renders visible rows', () => {
-    const wrapper = mount(VirtualList, {
-      props: {
-        rowCount: 100,
-        rowHeight: 50,
-        style: { height: '400px' },
-      },
-      slots: {
-        row: ({ index, style }: RowSlotProps) =>
-          h('div', { style, class: 'test-row' }, `Row ${index}`),
-      },
-    })
+    const wrapper = mountVirtualList({})
 
-    // Should render some rows (visible + overscan)
     const rows = wrapper.findAll('.test-row')
 
     expect(rows.length).toBeGreaterThan(0)
   })
+
+  describe('dynamic row height watch', () => {
+    it('does not observe row elements when rowHeight is fixed', async () => {
+      const { dynamicRowHeight } = createMockDynamicRowHeight()
+
+      mountVirtualList({ rowHeight: 50 })
+
+      await flushPromises()
+      await nextTick()
+
+      expect(dynamicRowHeight.observeRowElements).not.toHaveBeenCalled()
+    })
+
+    it('observes visible row elements and sets data-virtual-index', async () => {
+      const { dynamicRowHeight } = createMockDynamicRowHeight()
+
+      const wrapper = mountVirtualList({ rowHeight: dynamicRowHeight })
+
+      await flushPromises()
+      await nextTick()
+
+      expect(dynamicRowHeight.observeRowElements).toHaveBeenCalled()
+
+      const observedElements = vi.mocked(dynamicRowHeight.observeRowElements).mock
+        .calls[0]?.[0] as Element[]
+
+      expect(observedElements.length).toBeGreaterThan(0)
+      expect(
+        observedElements.every((element) => !element.hasAttribute('aria-hidden')),
+      ).toBe(true)
+
+      const listElement = wrapper.element as HTMLElement
+      const rowElements = Array.from(listElement.children).filter(
+        (child) => !child.hasAttribute('aria-hidden'),
+      )
+
+      expect(rowElements.length).toBe(observedElements.length)
+      rowElements.forEach((element) => {
+        expect(element.hasAttribute(DATA_ATTRIBUTE_LIST_INDEX)).toBe(true)
+      })
+    })
+
+    it('runs previous unobserve when the observed range changes', async () => {
+      const { dynamicRowHeight, unobserve } = createMockDynamicRowHeight()
+
+      const wrapper = mountVirtualList({ rowHeight: dynamicRowHeight })
+
+      await flushPromises()
+      await nextTick()
+
+      expect(dynamicRowHeight.observeRowElements).toHaveBeenCalledTimes(1)
+      expect(unobserve).not.toHaveBeenCalled()
+
+      const listElement = wrapper.element as HTMLDivElement
+
+      listElement.scrollTop = 2500
+      listElement.dispatchEvent(new Event('scroll'))
+      await flushPromises()
+      await nextTick()
+
+      expect(unobserve).toHaveBeenCalledTimes(1)
+      expect(dynamicRowHeight.observeRowElements).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('dynamic row height integration', () => {
+    let unmockResizeObserver: (() => void) | undefined
+    let dynamicRowHeight: DynamicRowHeight | undefined
+
+    beforeEach(() => {
+      unmockResizeObserver = mockResizeObserver()
+      dynamicRowHeight = useDynamicRowHeight({ defaultRowHeight: 50 })
+    })
+
+    afterEach(() => {
+      dynamicRowHeight?.cleanup()
+      unmockResizeObserver?.()
+    })
+
+    it('updates measured heights when observed rows resize', async () => {
+      const wrapper = mountVirtualList({ rowHeight: dynamicRowHeight })
+
+      await flushPromises()
+      await nextTick()
+
+      const rowElement = wrapper.find('.test-row').element as HTMLElement
+
+      setElementSize({
+        element: rowElement,
+        width: 100,
+        height: 72,
+      })
+
+      await flushPromises()
+      await nextTick()
+
+      const index = Number(rowElement.getAttribute(DATA_ATTRIBUTE_LIST_INDEX))
+
+      expect(dynamicRowHeight?.getRowHeight(index)).toBe(72)
+    })
+  })
 })