@softwareone/spi-sv5-library 1.7.3 → 1.7.4

package/dist/Form/Select/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { type Snippet } from 'svelte';
 	import type { Action } from 'svelte/action';
+	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
 	import Label from '../Label.svelte';
@@ -20,6 +21,7 @@
 		disableValidationColor?: boolean;
 		value?: string | string[] | null;
 		error?: string | string[];
+		positionStrategy?: 'absolute' | 'fixed';
 		customSelection?: Snippet<[option: SelectOption]>;
 		customOption?: Snippet<[option: SelectOption]>;
 		onclear?: () => void;
@@ -41,6 +43,7 @@
 		disableValidationColor = false,
 		value = $bindable(),
 		error,
+		positionStrategy = 'absolute',
 		customSelection,
 		customOption,
 		onclear,
@@ -110,13 +113,43 @@
 		});
 	};
 
-	const autoDirection: Action = () => {
-		$effect(() => {
+	const autoDirection: Attachment<HTMLElement> = (element: HTMLElement) => {
+		const BOTTOM_SPACING_OFFSET = 300;
+		const DROPDOWN_GAP = 8;
+
+		const updatePosition = () => {
 			const rect = dropdown.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
-			const footer = 300;
 
-			showInTopPosition = rect.bottom + footer > viewportHeight;
+			showInTopPosition = rect.bottom + BOTTOM_SPACING_OFFSET > viewportHeight;
+
+			if (positionStrategy === 'fixed') {
+				setDropdownStyles(element, rect);
+			}
+		};
+
+		const setDropdownStyles = (element: HTMLElement, rect: DOMRect) => {
+			element.style.setProperty('--dropdown-width', `${rect.width}px`);
+			element.style.setProperty('--dropdown-left', `${rect.left}px`);
+
+			const topPosition = showInTopPosition
+				? rect.top - element.offsetHeight - DROPDOWN_GAP
+				: rect.bottom + DROPDOWN_GAP;
+
+			element.style.setProperty('--dropdown-top', `${topPosition}px`);
+		};
+
+		$effect(() => {
+			if (showListOptions) {
+				updatePosition();
+				window.addEventListener('scroll', updatePosition, true);
+				window.addEventListener('resize', updatePosition);
+			}
+
+			return () => {
+				window.removeEventListener('scroll', updatePosition, true);
+				window.removeEventListener('resize', updatePosition);
+			};
 		});
 	};
 
@@ -213,7 +246,14 @@
 		</section>
 
 		{#if showListOptions}
-			<section class="dropdown-list" class:upwards={showInTopPosition} use:autoDirection>
+			<section
+				class={[
+					'dropdown-list',
+					positionStrategy === 'absolute' && showInTopPosition && 'upwards',
+					positionStrategy === 'fixed' && 'position-fixed'
+				]}
+				{@attach autoDirection}
+			>
 				{#if searchable && !noOptionsAvailable}
 					<Search
 						placeholder="Search"
@@ -437,6 +477,13 @@
 		margin-bottom: 8px;
 	}
 
+	.dropdown > .dropdown-list.position-fixed {
+		position: fixed;
+		width: var(--dropdown-width);
+		left: var(--dropdown-left);
+		top: var(--dropdown-top);
+	}
+
 	.dropdown > .dropdown-list > .dropdown-list-options-container {
 		display: flex;
 		flex-direction: column;

package/dist/Form/Select/Select.svelte.d.ts

@@ -15,6 +15,7 @@ interface SelectProps {
     disableValidationColor?: boolean;
     value?: string | string[] | null;
     error?: string | string[];
+    positionStrategy?: 'absolute' | 'fixed';
     customSelection?: Snippet<[option: SelectOption]>;
     customOption?: Snippet<[option: SelectOption]>;
     onclear?: () => void;

package/dist/Home/Home.svelte

@@ -58,7 +58,7 @@
 
 	.home-container > .home-item {
 		display: flex;
-		max-height: 150px;
+		max-height: 190px;
 		max-width: 770px;
 		gap: 16px;
 		padding: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.7.3",
+	"version": "1.7.4",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",