noph-ui 0.16.1 → 0.16.2

package/dist/select/Select.svelte

@@ -30,6 +30,7 @@
 		onchange,
 		oninput,
 		multiple,
+		clampMenuWidth = false,
 		...attributes
 	}: SelectProps = $props()
 
@@ -43,6 +44,8 @@
 	}
 	let selectedOption = $state(options.filter((option) => option.selected))
 
+	let useVirtualList = $derived(options.length > 500)
+
 	let errorTextRaw: string = $state(errorText)
 	let errorRaw = $state(error)
 	let selectElement: HTMLSelectElement | undefined = $state()
@@ -288,7 +291,7 @@
 	</div>
 </div>
 
-{#snippet item(option: SelectOption, width?: number)}
+{#snippet item(option: SelectOption)}
 	<Item
 		onclick={(event) => {
 			handleOptionSelect(event, option)
@@ -312,7 +315,6 @@
 			}
 		}}
 		variant="button"
-		style={width ? `width:${width}px` : ''}
 		selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
 		>{option.label}
 		{#snippet start()}
@@ -324,7 +326,9 @@
 {/snippet}
 
 <Menu
-	style="position-anchor:--{uid};min-width:{clientWidth}px;"
+	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
+		? 'width'
+		: 'min-width'}:{clientWidth}px"
 	popover="manual"
 	role="listbox"
 	--np-menu-justify-self="none"
@@ -343,10 +347,10 @@
 	}}
 	bind:element={menuElement}
 >
-	{#if options.length > 500}
-		<VirtualList width="{clientWidth}px" height="250px" itemHeight={56} items={options}>
+	{#if useVirtualList}
+		<VirtualList height="250px" itemHeight={56} items={options}>
 			{#snippet row(option)}
-				{@render item(option, clientWidth - 15)}
+				{@render item(option)}
 			{/snippet}
 		</VirtualList>
 	{:else}

package/dist/select/VirtualList.svelte

@@ -5,24 +5,21 @@
 	interface VitualListProps extends HTMLAttributes<HTMLDivElement> {
 		items: T[]
 		height?: string
-		width?: string
 		itemHeight?: number
 		start?: number
 		end?: number
 		row: Snippet<[T]>
 	}
-	// props
+
 	let {
 		items,
 		height = '100%',
-		width,
 		itemHeight,
 		start = $bindable(0),
 		end = $bindable(0),
 		row,
 	}: VitualListProps = $props()
 
-	// local state
 	let height_map: number[] = []
 	// eslint-disable-next-line no-undef
 	let rows: HTMLCollectionOf<HTMLElement> | undefined = $state()
@@ -52,7 +49,7 @@
 		}
 		const { scrollTop } = viewport
 
-		await tick() // wait until the DOM is up to date
+		await tick()
 
 		let content_height = top - scrollTop
 		let i = start
@@ -62,7 +59,7 @@
 
 			if (!row) {
 				end = i + 1
-				await tick() // render the newly visible row
+				await tick()
 				row = rows[i - start]
 			}
 
@@ -124,7 +121,6 @@
 		height_map.fill(average_height, i, items.length)
 		bottom = remaining * average_height
 
-		// prevent jumping if we scrolled up into unknown territory
 		if (start < old_start) {
 			await tick()
 
@@ -159,12 +155,9 @@
 	bind:this={viewport}
 	bind:offsetHeight={viewport_height}
 	onscroll={handle_scroll}
-	style="display:flex;height: {height};width: {width};"
+	style="height: {height};"
 >
-	<div
-		bind:this={contents}
-		style="flex:1;display:block;padding-top: {top}px; padding-bottom: {bottom}px;"
-	>
+	<div bind:this={contents} style="padding-top: {top}px; padding-bottom: {bottom}px;">
 		{#each visible as entry (entry.index)}
 			{@render row(entry.data)}
 		{/each}

package/dist/select/VirtualList.svelte.d.ts

@@ -4,7 +4,6 @@ declare class __sveltets_Render<T> {
     props(): HTMLAttributes<HTMLDivElement> & {
         items: T[];
         height?: string;
-        width?: string;
         itemHeight?: number;
         start?: number;
         end?: number;

package/dist/select/types.d.ts

@@ -17,4 +17,5 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autoco
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
     options: SelectOption[];
+    clampMenuWidth?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {