@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/virtual-list/index.js

@@ -26,7 +26,7 @@ import"@lostgradient/cinder/virtual-list/styles";
 
 // src/components/virtual-list/virtual-list.svelte
 import"svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
+import * as $2 from "svelte/internal/client";
 import { tick } from "svelte";
 
 // src/utilities/class-names.ts
@@ -34,6 +34,41 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// src/utilities/use-resize-observer.svelte.ts
+import * as $ from "svelte/internal/client";
+function useResizeObserver(onResize, options = {}) {
+  const { box, enabled = () => true } = options;
+  return (node) => {
+    if (typeof ResizeObserver === "undefined") {
+      return () => {};
+    }
+    let observer = null;
+    const disconnectObserver = () => {
+      observer?.disconnect();
+      observer = null;
+    };
+    $.user_effect(() => {
+      if (!enabled()) {
+        disconnectObserver();
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        if (!enabled()) {
+          return;
+        }
+        onResize(entries);
+      });
+      observer.observe(node, box !== undefined ? { box } : undefined);
+      return () => {
+        disconnectObserver();
+      };
+    });
+    return () => {
+      disconnectObserver();
+    };
+  };
+}
+
 // src/utilities/fixed-virtual-window.ts
 function resolveVirtualItemHeight(itemHeight, fallback = 1) {
   if (Number.isFinite(itemHeight) && itemHeight > 0)
@@ -106,11 +141,11 @@ function getFixedVirtualWindow({
 }
 
 // src/components/virtual-list/virtual-list.svelte
-var root_2 = $.from_html(`<div class="cinder-virtual-list__row"><!></div>`);
-var root_1 = $.from_html(`<div class="cinder-virtual-list__spacer"><div class="cinder-virtual-list__window"></div></div>`);
+var root_2 = $2.from_html(`<div class="cinder-virtual-list__row"><!></div>`);
+var root_1 = $2.from_html(`<div class="cinder-virtual-list__spacer"><div class="cinder-virtual-list__window"></div></div>`);
 function Virtual_list($$anchor, $$props) {
-  $.push($$props, true);
-  let overscan = $.prop($$props, "overscan", 3, 5), height = $.prop($$props, "height", 3, "20rem"), stickToBottom = $.prop($$props, "stickToBottom", 3, false), tabindex = $.prop($$props, "tabindex", 3, 0), role = $.prop($$props, "role", 3, "list"), rest = $.rest_props($$props, [
+  $2.push($$props, true);
+  let overscan = $2.prop($$props, "overscan", 3, 5), height = $2.prop($$props, "height", 3, "20rem"), stickToBottom = $2.prop($$props, "stickToBottom", 3, false), tabindex = $2.prop($$props, "tabindex", 3, 0), role = $2.prop($$props, "role", 3, "list"), rest = $2.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -126,60 +161,59 @@ function Virtual_list($$anchor, $$props) {
     "onscroll",
     "class"
   ]);
-  let scrollElement = $.state(undefined);
-  let scrollOffset = $.state(0);
-  let measuredViewportHeight = $.state(0);
+  let scrollElement = $2.state(undefined);
+  let scrollOffset = $2.state(0);
+  let measuredViewportHeight = $2.state(0);
   let previousItemCount = 0;
   let hasObservedItemCount = false;
   let shouldStickAfterAppend = false;
-  const resolvedItemHeight = $.derived(() => resolveVirtualItemHeight($$props.itemHeight));
-  const resolvedOverscan = $.derived(() => resolveVirtualOverscan(overscan()));
-  const viewportHeight = $.derived(() => $.get(measuredViewportHeight) || estimateViewportHeight(height(), $.get(resolvedItemHeight)));
-  const virtualWindow = $.derived(() => getFixedVirtualWindow({
+  const resolvedItemHeight = $2.derived(() => resolveVirtualItemHeight($$props.itemHeight));
+  const resolvedOverscan = $2.derived(() => resolveVirtualOverscan(overscan()));
+  const viewportHeight = $2.derived(() => $2.get(measuredViewportHeight) || estimateViewportHeight(height(), $2.get(resolvedItemHeight)));
+  const virtualWindow = $2.derived(() => getFixedVirtualWindow({
     itemCount: $$props.items.length,
-    itemHeight: $.get(resolvedItemHeight),
-    scrollOffset: $.get(scrollOffset),
-    viewportHeight: $.get(viewportHeight),
-    overscan: $.get(resolvedOverscan),
+    itemHeight: $2.get(resolvedItemHeight),
+    scrollOffset: $2.get(scrollOffset),
+    viewportHeight: $2.get(viewportHeight),
+    overscan: $2.get(resolvedOverscan),
     getKey: (index) => {
       const item = $$props.items[index];
       return item === undefined ? index : $$props.getKey?.(item, index) ?? index;
     }
   }));
-  const renderedItems = $.derived(() => $.get(virtualWindow).items.flatMap((virtualItem) => {
+  const renderedItems = $2.derived(() => $2.get(virtualWindow).items.flatMap((virtualItem) => {
     const item = $$props.items[virtualItem.index];
     return item === undefined ? [] : [{ ...virtualItem, item }];
   }));
-  $.user_effect(() => {
-    const element2 = $.get(scrollElement);
+  $2.user_effect(() => {
+    const element2 = $2.get(scrollElement);
     if (!element2)
       return;
     syncViewport(element2);
-    if (typeof ResizeObserver === "undefined")
-      return;
-    const observer = new ResizeObserver(() => syncViewport(element2));
-    observer.observe(element2);
-    return () => observer.disconnect();
   });
-  $.user_pre_effect(() => {
+  const observeResize = useResizeObserver(() => {
+    if ($2.get(scrollElement))
+      syncViewport($2.get(scrollElement));
+  });
+  $2.user_pre_effect(() => {
     const itemCount = $$props.items.length;
-    const element2 = $.get(scrollElement);
+    const element2 = $2.get(scrollElement);
     if (!hasObservedItemCount) {
       previousItemCount = itemCount;
       hasObservedItemCount = true;
       shouldStickAfterAppend = false;
       return;
     }
-    shouldStickAfterAppend = stickToBottom() && element2 !== undefined && itemCount > previousItemCount && isAtBottom(element2, previousItemCount * $.get(resolvedItemHeight), $.get(viewportHeight));
+    shouldStickAfterAppend = stickToBottom() && element2 !== undefined && itemCount > previousItemCount && isAtBottom(element2, previousItemCount * $2.get(resolvedItemHeight), $2.get(viewportHeight));
     previousItemCount = itemCount;
   });
-  $.user_effect(() => {
+  $2.user_effect(() => {
     const itemCount = $$props.items.length;
-    const element2 = $.get(scrollElement);
+    const element2 = $2.get(scrollElement);
     if (!stickToBottom() || !shouldStickAfterAppend || !element2)
       return;
     tick().then(() => {
-      element2.scrollTop = maxScrollOffset(itemCount * $.get(resolvedItemHeight), $.get(viewportHeight));
+      element2.scrollTop = maxScrollOffset(itemCount * $2.get(resolvedItemHeight), $2.get(viewportHeight));
       syncViewport(element2);
       shouldStickAfterAppend = false;
     });
@@ -189,14 +223,14 @@ function Virtual_list($$anchor, $$props) {
   }
   function syncViewport(element2) {
     const rect = element2.getBoundingClientRect();
-    $.set(measuredViewportHeight, rect.height || element2.clientHeight || parsePixelLength(height()) || $.get(resolvedItemHeight) * 10, true);
-    $.set(scrollOffset, Math.max(0, element2.scrollTop), true);
+    $2.set(measuredViewportHeight, rect.height || element2.clientHeight || parsePixelLength(height()) || $2.get(resolvedItemHeight) * 10, true);
+    $2.set(scrollOffset, Math.max(0, element2.scrollTop), true);
   }
   function handleScroll(event) {
     if (typeof $$props.onscroll === "function")
       $$props.onscroll(event);
     const element2 = event.currentTarget;
-    $.set(scrollOffset, Math.max(0, element2.scrollTop), true);
+    $2.set(scrollOffset, Math.max(0, element2.scrollTop), true);
   }
   function maxScrollOffset(totalSize, height2) {
     return Math.max(0, totalSize - height2);
@@ -204,52 +238,53 @@ function Virtual_list($$anchor, $$props) {
   function isAtBottom(element2, totalSize, height2) {
     return element2.scrollTop >= maxScrollOffset(totalSize, height2) - 1;
   }
-  var fragment = $.comment();
-  var node = $.first_child(fragment);
-  $.element(node, () => "div", false, ($$element, $$anchor2) => {
-    $.bind_this($$element, ($$value) => $.set(scrollElement, $$value, true), () => $.get(scrollElement));
-    $.attribute_effect($$element, ($0) => ({
+  var fragment = $2.comment();
+  var node = $2.first_child(fragment);
+  $2.element(node, () => "div", false, ($$element, $$anchor2) => {
+    $2.bind_this($$element, ($$value) => $2.set(scrollElement, $$value, true), () => $2.get(scrollElement));
+    $2.attach($$element, () => observeResize);
+    $2.attribute_effect($$element, ($0) => ({
       ...rest,
       class: $0,
       role: role(),
       tabindex: tabindex(),
       "data-cinder-stick-to-bottom": stickToBottom() ? "true" : undefined,
       onscroll: handleScroll,
-      [$.STYLE]: { "--cinder-virtual-list-height": height() }
+      [$2.STYLE]: { "--cinder-virtual-list-height": height() }
     }), [() => classNames("cinder-virtual-list", $$props.class)]);
     var div = root_1();
     let styles;
-    var div_1 = $.child(div);
+    var div_1 = $2.child(div);
     let styles_1;
-    $.each(div_1, 21, () => $.get(renderedItems), (virtualItem) => virtualItem.key, ($$anchor3, virtualItem) => {
+    $2.each(div_1, 21, () => $2.get(renderedItems), (virtualItem) => virtualItem.key, ($$anchor3, virtualItem) => {
       var div_2 = root_2();
       let styles_2;
-      var node_1 = $.child(div_2);
-      $.snippet(node_1, () => $$props.row, () => $.get(virtualItem).item, () => ({
-        index: $.get(virtualItem).index,
-        key: $.get(virtualItem).key,
-        start: $.get(virtualItem).start,
-        size: $.get(virtualItem).size
+      var node_1 = $2.child(div_2);
+      $2.snippet(node_1, () => $$props.row, () => $2.get(virtualItem).item, () => ({
+        index: $2.get(virtualItem).index,
+        key: $2.get(virtualItem).key,
+        start: $2.get(virtualItem).start,
+        size: $2.get(virtualItem).size
       }));
-      $.reset(div_2);
-      $.template_effect(() => {
-        $.set_attribute(div_2, "role", role() === "list" ? "listitem" : undefined);
-        $.set_attribute(div_2, "data-cinder-virtual-index", $.get(virtualItem).index);
-        styles_2 = $.set_style(div_2, "", styles_2, { height: `${$.get(virtualItem).size}px` });
+      $2.reset(div_2);
+      $2.template_effect(() => {
+        $2.set_attribute(div_2, "role", role() === "list" ? "listitem" : undefined);
+        $2.set_attribute(div_2, "data-cinder-virtual-index", $2.get(virtualItem).index);
+        styles_2 = $2.set_style(div_2, "", styles_2, { height: `${$2.get(virtualItem).size}px` });
       });
-      $.append($$anchor3, div_2);
+      $2.append($$anchor3, div_2);
     });
-    $.reset(div_1);
-    $.reset(div);
-    $.template_effect(() => {
-      $.set_attribute(div, "aria-hidden", $$props.items.length === 0 ? "true" : undefined);
-      styles = $.set_style(div, "", styles, { height: `${$.get(virtualWindow).totalSize}px` });
-      styles_1 = $.set_style(div_1, "", styles_1, { top: `${$.get(virtualWindow).leadingSize}px` });
+    $2.reset(div_1);
+    $2.reset(div);
+    $2.template_effect(() => {
+      $2.set_attribute(div, "aria-hidden", $$props.items.length === 0 ? "true" : undefined);
+      styles = $2.set_style(div, "", styles, { height: `${$2.get(virtualWindow).totalSize}px` });
+      styles_1 = $2.set_style(div_1, "", styles_1, { top: `${$2.get(virtualWindow).leadingSize}px` });
     });
-    $.append($$anchor2, div);
+    $2.append($$anchor2, div);
   });
-  $.append($$anchor, fragment);
-  $.pop();
+  $2.append($$anchor, fragment);
+  $2.pop();
 }
 
 // src/components/virtual-list/index.ts
@@ -263,4 +298,4 @@ export {
   Virtual_list as VirtualList
 };
 
-//# debugId=4FBBC3E464DC80F864756E2164756E21
+//# debugId=353339EC80776B4E64756E2164756E21