@casinogate/ui 1.10.6 → 1.10.7

package/dist/assets/css/root.css

@@ -369,6 +369,9 @@
   .cgui\:h-\(--cg-ui-max-content-height\) {
     height: var(--cg-ui-max-content-height);
   }
+  .cgui\:h-1 {
+    height: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -450,6 +453,9 @@
   .cgui\:max-h-75 {
     max-height: calc(var(--cgui-spacing) * 75);
   }
+  .cgui\:max-h-80 {
+    max-height: calc(var(--cgui-spacing) * 80);
+  }
   .cgui\:min-h-7\.5 {
     min-height: calc(var(--cgui-spacing) * 7.5);
   }

package/dist/components/combobox/combobox.async.svelte

@@ -4,9 +4,10 @@
 
   import { boolAttr } from '../../internal/utils/attrs.js';
   import { cn } from '../../internal/utils/common.js';
-  import { watch } from 'runed';
+  import { Debounced, watch } from 'runed';
   import type { AnyFn } from 'svelte-toolbelt';
   import { onMountEffect } from 'svelte-toolbelt';
+  import type { Attachment } from 'svelte/attachments';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import { CommandApi, CommandPrimitive } from '../command/index.js';
@@ -49,13 +50,14 @@
 
   let items = $state<CommandItem[]>(initialItems);
   let isLoading = $state(false);
-  let hasMore = $state(true);
+  let isSearching = $state(false);
+  let hasMore = $state(false);
   let currentPage = $state(1);
   let error = $state<string | null>(null);
-  let viewportRef = $state<HTMLElement | null>(null);
-  let searchTimeout = $state<ReturnType<typeof setTimeout> | null>(null);
   let lastSearch = $state('');
 
+  let listRef = $state<HTMLElement | null>(null);
+
   const createCollection = (itemList: CommandItem[]): CommandCollection => {
     const groupOrderMap = new Map<string, number>();
     groups.forEach((g, index) => {
@@ -93,6 +95,7 @@
     if (isLoading) return;
 
     isLoading = true;
+    isSearching = !append;
     error = null;
 
     try {
@@ -107,53 +110,34 @@
       currentPage = page;
       hasMore = result.hasMore;
       lastSearch = search;
-
-      // Check if viewport needs more items after render
-      requestAnimationFrame(() => {
-        checkNeedMoreItems();
-      });
     } catch (err) {
       error = err instanceof Error ? err.message : 'Failed to fetch data';
     } finally {
       isLoading = false;
-    }
-  };
-
-  // Auto-fill viewport if content doesn't overflow
-  const checkNeedMoreItems = () => {
-    if (!viewportRef || isLoading || !hasMore) return;
-
-    const { scrollHeight, clientHeight } = viewportRef;
-
-    // If content doesn't fill viewport, load more
-    if (scrollHeight <= clientHeight) {
-      loadMore();
+      isSearching = false;
     }
   };
 
   // Debounced search handler
-  const debouncedSearch = (search: string) => {
-    if (searchTimeout) {
-      clearTimeout(searchTimeout);
-    }
+  const debouncedSearchValue = new Debounced(() => searchValue, searchDebounce);
 
-    searchTimeout = setTimeout(() => {
-      currentPage = 1;
-      fetchData(1, search, false);
-    }, searchDebounce);
+  const search = (search: string) => {
+    currentPage = 1;
+    fetchData(1, search, false);
   };
 
   // Watch for search value changes
   watch(
-    () => searchValue,
+    () => debouncedSearchValue.current,
     () => {
-      if (searchValue !== lastSearch) {
-        debouncedSearch(searchValue);
-      }
+      search(debouncedSearchValue.current);
+    },
+    {
+      lazy: true,
     }
   );
 
-  // Fetch on first open or check viewport fill
+  // Fetch on first open
   watch(
     () => open,
     () => {
@@ -164,11 +148,6 @@
         fetchData(1, searchValue);
         return;
       }
-
-      // If already have items, check if viewport needs more after it renders
-      requestAnimationFrame(() => {
-        checkNeedMoreItems();
-      });
     }
   );
 
@@ -181,9 +160,6 @@
   $effect(() => {
     return () => {
       currentPage = 1;
-      if (searchTimeout) {
-        clearTimeout(searchTimeout);
-      }
     };
   });
 
@@ -221,13 +197,21 @@
     }
   };
 
-  const handleScroll = (event: Event) => {
-    const viewport = event.target as HTMLElement;
-    const scrollBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+  const anchorAttachment: Attachment = (el) => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMore();
+        }
+      },
+      { threshold: 0 }
+    );
 
-    if (scrollBottom < 100 && hasMore && !isLoading) {
-      loadMore();
-    }
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+    };
   };
 
   const retry = () => {
@@ -236,9 +220,9 @@
   };
 
   const scrollToTop = () => {
-    if (!viewportRef) return;
+    if (!listRef) return;
 
-    viewportRef.scrollTo({
+    listRef.scrollTo({
       top: 0,
       behavior: 'smooth',
     });
@@ -343,14 +327,14 @@
 
   <PopoverPrimitive.Portal disabled={portalDisabled}>
     <PopoverPrimitive.Content class="cgui:overflow-hidden cgui:rounded-md">
-      <CommandPrimitive.Root shouldFilter={false}>
+      <CommandPrimitive.Root shouldFilter={false} class="cgui:max-h-80">
         <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
 
-        <CommandPrimitive.List class="cgui:rounded-inherit">
-          <CommandPrimitive.Viewport onscroll={handleScroll} bind:ref={viewportRef}>
+        <CommandPrimitive.List class="cgui:rounded-inherit" bind:ref={listRef} style={{ maxHeight: maxContentHeight }}>
+          <CommandPrimitive.Viewport class={cn('cgui:relative')}>
             {#if error}
               {@render errorState()}
-            {:else if isLoading && !hasResults}
+            {:else if isSearching}
               {#if loadingSnippet}
                 {@render loadingSnippet()}
               {:else}
@@ -380,22 +364,29 @@
                 {/if}
               {/each}
 
-              {#if isLoading}
-                {@render loadingMore()}
+              {#if hasMore}
+                {#key items.length}
+                  <div class="cgui:h-1 cgui:w-full" {@attach anchorAttachment}></div>
+                {/key}
               {/if}
 
-              {#if !hasMore && items.length > pageSize}
-                <button
-                  class="cgui:w-full cgui:flex cgui:justify-center cgui:cursor-pointer cgui:items-center cgui:text-xs cgui:text-icon-default cgui:underline cgui:hover:no-underline"
-                  onclick={scrollToTop}
-                >
-                  <IconComponent.ChevronUp />
-                </button>
+              {#if isLoading}
+                {@render loadingMore()}
               {/if}
             {:else}
               <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
             {/if}
           </CommandPrimitive.Viewport>
+
+          {#if !hasMore && items.length > pageSize}
+            <button
+              type="button"
+              class="cgui:w-full cgui:flex cgui:justify-center cgui:cursor-pointer cgui:items-center cgui:text-xs cgui:text-icon-default cgui:underline cgui:hover:no-underline"
+              onclick={scrollToTop}
+            >
+              <IconComponent.ChevronUp />
+            </button>
+          {/if}
         </CommandPrimitive.List>
       </CommandPrimitive.Root>
     </PopoverPrimitive.Content>

package/dist/components/combobox/combobox.svelte

@@ -29,6 +29,7 @@
     rounded = 'default',
     fullWidth = true,
     closeOnSelect = true,
+    maxContentHeight,
     ...restProps
   }: ComboboxProps = $props();
 
@@ -126,7 +127,7 @@
       <CommandPrimitive.Root>
         <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
 
-        <CommandPrimitive.List class="cgui:rounded-inherit">
+        <CommandPrimitive.List class="cgui:rounded-inherit" style={{ maxHeight: maxContentHeight }}>
           <CommandPrimitive.Viewport>
             <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
 

package/dist/components/combobox/types.d.ts

@@ -14,6 +14,7 @@ export type ComboboxProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsP
     allowDeselect?: boolean;
     triggerClass?: string;
     closeOnSelect?: boolean;
+    maxContentHeight?: string;
     trigger?: Snippet<[{
         props: Record<string, unknown>;
         displayValue: string;

package/dist/components/select/select.async.svelte

@@ -7,6 +7,7 @@
   import { cn } from '../../internal/utils/common.js';
   import { watch } from 'runed';
   import { onMountEffect } from 'svelte-toolbelt';
+  import type { Attachment } from 'svelte/attachments';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import Content from './components/select.content.svelte';
@@ -208,15 +209,32 @@
     }
   };
 
-  const handleScroll = (event: Event) => {
-    const viewport = event.target as HTMLElement;
-    const scrollBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+  const anchorAttachment: Attachment = (el) => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMore();
+        }
+      },
+      { threshold: 0 }
+    );
 
-    if (scrollBottom < 100 && hasMore && !isLoading) {
-      loadMore();
-    }
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+    };
   };
 
+  // const handleScroll = (event: Event) => {
+  //   const viewport = event.target as HTMLElement;
+  //   const scrollBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+
+  //   if (scrollBottom < 100 && hasMore && !isLoading) {
+  //     loadMore();
+  //   }
+  // };
+
   const retry = () => {
     error = null;
     fetchData(currentPage);
@@ -272,6 +290,12 @@
   </div>
 {/snippet}
 
+{#if hasMore}
+  {#key items.length}
+    <div class="cgui:h-1 cgui:w-full" {@attach anchorAttachment}></div>
+  {/key}
+{/if}
+
 {#snippet loadingMore()}
   <div class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-icon-default">
     <Spinner />
@@ -302,7 +326,7 @@
 
   <Portal>
     <Content bind:ref={contentRef} class={cn(contentClass)} {...contentProps}>
-      <Viewport onscroll={handleScroll} bind:ref={viewportRef}>
+      <Viewport bind:ref={viewportRef}>
         {#if error}
           {@render errorState()}
         {:else if isLoading && !hasResults}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",