@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/select/Select.svelte

@@ -0,0 +1,705 @@
+<script lang="ts">
+	import {
+		autoUpdate,
+		computePosition,
+		flip,
+		offset,
+		type Placement,
+		shift
+	} from '@floating-ui/dom';
+	import debounce from 'just-debounce';
+	import { v4 as uuidv4 } from 'uuid';
+
+	import { CheckIcon, ChevronIcon, UndoIcon } from '../../icons';
+
+	import { Text } from '../text';
+	import type { DropdownInstance, SelectInstanceManager, SelectProps } from './types.js';
+
+	let {
+		id = uuidv4(),
+		defaultText = 'Select',
+		label = '',
+		dialog = true,
+		hide = false,
+		enableSearch = false,
+		tooltipMessage = '',
+		ref = '',
+		width = '200px',
+		tooltipWidth = '150px',
+		dropdownWidth = '200px',
+		dropdownHeight = '200px',
+		options,
+		selected = $bindable(null),
+		preventNoSelection = false,
+		disabled = false,
+		placement = 'bottom',
+		className = '',
+		onchange,
+		children
+	}: SelectProps = $props();
+
+	// State variables
+	// eslint-disable-next-line svelte/prefer-writable-derived -- optionsStore is mutated by search functionality
+	let optionsStore = $state<typeof options>([]);
+	let showConfirmDialog = $state(false);
+	let selectedLabel = $state(defaultText);
+	let lastHoveredItem = $state<HTMLElement | null>(null);
+	let activeElement = $state<HTMLElement | null>(null);
+	let isOpen = $state(false);
+	let isHovered = $state(false);
+	let isFocused = $state(false);
+	let hasError = $state(false);
+
+	// Element bindings with proper Svelte 5 state management
+	let confirmDialogElement = $state<HTMLElement>();
+	let dropdownWrapper = $state<HTMLElement>();
+	let target = $state<HTMLDivElement>();
+	let dropdownItems = $state<HTMLDivElement>();
+	let instances = $state<SelectInstanceManager | undefined>();
+
+	// Reactive updates
+	$effect(() => {
+		optionsStore = options;
+	});
+
+	$effect(() => {
+		if (!disabled) {
+			init();
+		}
+
+		const selectedOption = options?.find((option) => option?.value === selected);
+		if (selectedOption) {
+			selectedLabel = selectedOption.label;
+		} else {
+			selectedLabel = defaultText;
+		}
+	});
+
+	$effect(() => {
+		if (showConfirmDialog) {
+			setTimeout(() => {
+				document?.addEventListener('click', dismissPopupDialog);
+			}, 300);
+		} else {
+			document?.removeEventListener('click', dismissPopupDialog);
+		}
+	});
+
+	// Computed styles based on state
+	const dropdownStyles = $derived(() => {
+		const base = {
+			borderRadius: 'var(--border-radius, 4px)',
+			background:
+				'var(--Action-actionSecondaryBackground, linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.10) 100%), rgba(255, 255, 255, 0.08))',
+			boxShadow: '0px 0.5px 1px 0px #000, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset'
+		};
+
+		if (disabled) {
+			return {
+				...base,
+				opacity: '0.4'
+			};
+		}
+
+		if (hasError) {
+			return {
+				...base,
+				border: '1px solid var(--redBorder)'
+			};
+		}
+
+		if (isFocused) {
+			return {
+				...base,
+				border: '1px solid var(--blueBorder)'
+			};
+		}
+
+		if (isHovered) {
+			return {
+				...base,
+				background:
+					'var(--Action-actionSecondaryBackgroundHover, linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%), rgba(255, 255, 255, 0.14))'
+			};
+		}
+
+		return base;
+	});
+
+	/**
+	 * Handles the option selection.
+	 */
+	const handleSelect = (value: string, label = defaultText, element: HTMLButtonElement) => {
+		if (disabled) return;
+		updateActiveElement(element);
+
+		if (selected === value && !preventNoSelection) {
+			resetDropdown();
+			return;
+		}
+
+		selected = value;
+		selectedLabel = label;
+		closeDropdown();
+
+		onchange?.({ value });
+	};
+
+	/**
+	 * Dismiss dropdown when clicking outside of it.
+	 */
+	const dismissTooltip = (event: Event): void => {
+		const isClickInside = dropdownWrapper?.contains(event.target as Node);
+
+		if (!isClickInside) {
+			closeDropdown();
+		}
+	};
+
+	/**
+	 * Closes the dropdown.
+	 */
+	const closeDropdown = () => {
+		isOpen = false;
+		isFocused = false;
+
+		if (!dropdownItems) return;
+
+		dropdownItems.style.display = 'none';
+		dropdownItems.setAttribute('aria-hidden', 'true');
+	};
+
+	/**
+	 * Resets the dropdown.
+	 */
+	const resetDropdown = (): void => {
+		selected = null;
+		selectedLabel = defaultText;
+		closeDropdown();
+		showConfirmDialog = false;
+
+		onchange?.({ value: null });
+	};
+
+	/**
+	 * Dismiss dropdown confirm dialog when clicking outside of it.
+	 */
+	const dismissPopupDialog = (event: Event): void => {
+		const { target } = event;
+		const popups = document?.querySelectorAll<HTMLDivElement>(`.dropdown-wrapper .popup`);
+
+		if (popups && popups.length > 0 && showConfirmDialog) {
+			popups.forEach((popup) => {
+				if (popup && !popup.contains(target as Node)) {
+					popup.style.display = 'none';
+				}
+			});
+
+			showConfirmDialog = false;
+		}
+	};
+
+	/**
+	 * Updates the active element.
+	 */
+	const updateActiveElement = (newActiveElement: HTMLButtonElement) => {
+		if (activeElement) {
+			activeElement.setAttribute('aria-hidden', 'true');
+		}
+
+		if (newActiveElement) {
+			newActiveElement.setAttribute('aria-hidden', 'false');
+		}
+
+		activeElement = newActiveElement;
+	};
+
+	/**
+	 * Handles keyboard navigation for the dropdown.
+	 */
+	const handleKeyDown = (event: KeyboardEvent): void => {
+		if (!isOpen || !dropdownItems) return;
+
+		const items = Array.from(dropdownItems.querySelectorAll('.dropdown-item'));
+		let currentIndex = lastHoveredItem ? items.indexOf(lastHoveredItem) : -1;
+		let newIndex = -1;
+
+		switch (event.key) {
+			case 'ArrowDown':
+				newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+				break;
+			case 'ArrowUp':
+				newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+				break;
+			case 'Enter': {
+				const selectedItem = items[currentIndex] as HTMLButtonElement;
+				selectedItem.click();
+				break;
+			}
+			case 'Escape':
+				closeDropdown();
+				break;
+		}
+
+		if (newIndex > -1) {
+			if (lastHoveredItem) {
+				lastHoveredItem.classList.remove('hover-state');
+				lastHoveredItem.setAttribute('tabindex', '-1');
+			}
+			lastHoveredItem = items[newIndex] as HTMLElement;
+			lastHoveredItem.classList.add('hover-state');
+			lastHoveredItem.setAttribute('tabindex', '0');
+			lastHoveredItem.focus();
+			event.preventDefault();
+		}
+	};
+
+	/**
+	 * Sets focus to the hovered dropdown item.
+	 */
+	const handleMouseEnter = (event: MouseEvent): void => {
+		const target = event.currentTarget as HTMLElement;
+
+		if (lastHoveredItem && lastHoveredItem !== target) {
+			lastHoveredItem.classList.remove('hover-state');
+			lastHoveredItem.setAttribute('tabindex', '-1');
+		}
+
+		target.classList.add('hover-state');
+		target.setAttribute('tabindex', '0');
+		lastHoveredItem = target;
+	};
+
+	type EventOption = [string, () => void];
+
+	/**
+	 * Inits the dropdown.
+	 */
+	const initDropdown = (): DropdownInstance[] => {
+		const instances: DropdownInstance[] = [];
+
+		if (!dropdownItems || !target) return instances;
+
+		document?.addEventListener('click', dismissTooltip);
+		instances.push(setupDropdown(target, dropdownItems));
+
+		return instances;
+	};
+
+	/**
+	 * Cleans up the dropdown instances.
+	 */
+	const cleanupDropdownInstances = (instances: DropdownInstance[]) => {
+		instances.forEach((instance) => instance.cleanup());
+	};
+
+	/**
+	 * Inits the attribute.
+	 */
+	export const init = async () => {
+		if (disabled) return;
+
+		const DropdownInstances = initDropdown();
+
+		return {
+			result: DropdownInstances,
+			destroy() {
+				cleanupDropdownInstances(DropdownInstances);
+			}
+		};
+	};
+
+	/**
+	 * Sets up the dropdown.
+	 */
+	const setupDropdown = (toggle: HTMLElement, tooltip: HTMLElement): DropdownInstance => {
+		const update = () => {
+			computePosition(toggle, tooltip, {
+				placement,
+				middleware: [offset(-24), flip(), shift({ padding: 5 })]
+			}).then(({ x, y }) => {
+				Object.assign(tooltip.style, {
+					left: `${x}px`,
+					top: `${y}px`
+				});
+			});
+		};
+
+		const showDropdown = () => {
+			if (disabled) return;
+
+			tooltip.setAttribute('aria-hidden', 'false');
+			update();
+
+			const selectedItemButton = tooltip.querySelector(
+				`.dropdown-item[aria-selected="true"]`
+			) as HTMLElement;
+			const firstItemButton = tooltip.querySelector('.dropdown-item') as HTMLElement;
+			const itemToFocus = selectedItemButton || firstItemButton;
+
+			const searchInput = tooltip?.querySelector<HTMLInputElement>('input[type="text"]');
+			if (searchInput && enableSearch) {
+				searchInput.focus();
+			} else {
+				if (itemToFocus) {
+					itemToFocus.focus();
+
+					if (lastHoveredItem) {
+						lastHoveredItem.classList.remove('hover-state');
+						lastHoveredItem.setAttribute('tabindex', '-1');
+					}
+					lastHoveredItem = itemToFocus;
+					lastHoveredItem.classList.add('hover-state');
+					lastHoveredItem.setAttribute('tabindex', '0');
+				}
+			}
+
+			tooltip.style.display = 'flex';
+			isOpen = true;
+			isFocused = true;
+		};
+
+		const options: EventOption[] = [['click', showDropdown]].filter(Boolean) as EventOption[];
+
+		options.forEach(([event, listener]) => {
+			toggle.addEventListener(event, listener);
+		});
+
+		const cleanup = autoUpdate(toggle, tooltip, update);
+
+		return { toggle, tooltip, cleanup };
+	};
+
+	/**
+	 * Debounces the filter options.
+	 */
+	const debouncedFilterOptions = debounce((searchValue: string, data: typeof options) => {
+		const filteredOptions = data.filter((option) =>
+			option.label.toLowerCase().includes(searchValue.toLowerCase())
+		);
+		optionsStore = filteredOptions;
+	}, 50);
+
+	/**
+	 * Handles the search input.
+	 */
+	const handleSearch = (event: Event) => {
+		const searchValue = (event.target as HTMLInputElement).value;
+
+		if (!options) {
+			return;
+		}
+
+		debouncedFilterOptions(searchValue, options);
+	};
+
+	// Lifecycle cleanup
+	$effect(() => {
+		return () => {
+			if (instances) instances.destroy();
+		};
+	});
+</script>
+
+<div
+	class="dropdown-wrapper {className}"
+	bind:this={dropdownWrapper}
+	style="{hide ? 'display:none;' : ''} width: {width};"
+>
+	<div
+		class="dropdown"
+		class:disabled
+		{id}
+		style="width:{width}; {Object.entries(dropdownStyles())
+			.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+			.join('; ')}"
+		aria-disabled={disabled}
+		tabindex={disabled || isOpen ? -1 : 0}
+		role="button"
+		aria-haspopup="listbox"
+		aria-labelledby={id}
+		bind:this={target}
+		onmouseenter={() => (isHovered = true)}
+		onmouseleave={() => (isHovered = false)}
+		onfocus={() => (isFocused = true)}
+		onblur={() => (isFocused = false)}
+	>
+		<div class="dropdown-header" aria-disabled={disabled}>
+			<div class="label">
+				{selected ? selectedLabel || defaultText : defaultText}
+			</div>
+			<div class="arrow" style="transform:rotate({isOpen ? '270deg' : '90deg'})">
+				<ChevronIcon />
+			</div>
+		</div>
+
+		<div
+			tabindex={disabled || isOpen ? -1 : 0}
+			class="dropdown-list"
+			role="listbox"
+			style="width:{dropdownWidth}; max-height:{dropdownHeight};"
+			onkeydown={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				handleKeyDown(e);
+			}}
+			bind:this={dropdownItems}
+		>
+			{#if selectedLabel}
+				<div class="selected">
+					<div class="label">
+						<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+					</div>
+				</div>
+			{/if}
+
+			{#if enableSearch}
+				<div class="search-container">
+					<input
+						type="text"
+						placeholder="Search"
+						oninput={(e) => {
+							e.stopPropagation();
+							e.preventDefault();
+							handleSearch(e);
+						}}
+						onkeydown={(e) => e.stopPropagation()}
+					/>
+				</div>
+			{/if}
+
+			{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
+				{@const indexId = index + 1}
+				{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
+				<button
+					aria-posinset={indexId}
+					aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
+					id={`${itemId}-list-${indexId}-${id}`}
+					data-value={value}
+					class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+					role="option"
+					onclick={(e) => {
+						e.stopPropagation();
+						if (isDisabled) return;
+						handleSelect(value, label, e.currentTarget);
+					}}
+					onkeydown={(e) => {
+						e.stopPropagation();
+						e.preventDefault();
+					}}
+					onmouseenter={handleMouseEnter}
+					aria-hidden={!isOpen}
+					tabindex={value === selected ? 0 : -1}
+					style={description ? 'align-items:start;' : ''}
+				>
+					<div class="icon" aria-label={label}>
+						{#if value === selected && selected?.trim() !== ''}
+							<CheckIcon />
+						{/if}
+					</div>
+					<div class="label">
+						{#if description || descriptionTitle || labelIcon}
+							<div class="label-content">
+								<div class="label-name">
+									<Text {label} />
+									{#if labelIcon}
+										{@const IconComponent = labelIcon}
+										<IconComponent />
+									{/if}
+								</div>
+								<div class="label-description-title">
+									<Text
+										label={descriptionTitle || ''}
+										fontColor="var(--greenText)"
+										fontSize="10px"
+									/>
+								</div>
+								<div class="label-description">
+									<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
+								</div>
+							</div>
+						{:else}
+							<Text {label} fontSize="normal" />
+						{/if}
+					</div>
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.dropdown-item.disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+	.label .label-description-title,
+	.label .label-description {
+		height: max-content;
+	}
+
+	.search-container {
+		display: flex;
+		align-items: center;
+		align-self: stretch;
+		gap: 4px;
+		padding: 4px;
+	}
+	.search-container input {
+		flex: 1 0 0;
+		align-self: stretch;
+		height: 25px;
+		width: 100%;
+	}
+	.label .label-name {
+		color: var(--text1);
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.label .label-description {
+		color: var(--text2, #bdbdbd);
+		font-family: Inter;
+		font-size: 10px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		white-space: normal;
+		overflow-wrap: break-word;
+	}
+	.label .label-content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		flex: 1 0 0;
+	}
+	.popup :global(.wrapper) {
+		width: 200px;
+	}
+
+	:global(.dropdown-label.active .labels:not(.dropdown-label.active [role='tooltip'] .labels)) {
+		color: rgb(138, 194, 255);
+		background: rgba(0, 132, 255, 0.18);
+		cursor: pointer;
+		border-radius: 4px;
+	}
+	.dropdown-wrapper {
+		display: flex;
+		gap: 0;
+		align-items: center;
+	}
+	.dropdown-item :global(.labels .text) {
+		line-height: normal !important;
+	}
+	.dropdown {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+	.dropdown.disabled {
+		cursor: not-allowed !important;
+	}
+
+	.dropdown-header[aria-disabled='true'] {
+		cursor: not-allowed !important;
+	}
+	.dropdown-header {
+		display: flex;
+		align-items: center;
+		padding: 4px;
+		cursor: pointer;
+		width: 100%;
+	}
+
+	.dropdown-list :global(.dropdown-item.hover-state) {
+		border: 1px solid var(--blueBorder);
+	}
+
+	.dropdown-list {
+		display: none;
+		padding: 0;
+		width: 100%;
+		position: absolute;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		border-radius: 4px;
+		border: 1px solid var(--border-border-1, #363636);
+		background: var(--background3, #383838);
+		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+
+		overflow-y: auto;
+		z-index: 99999;
+	}
+	.dropdown-list .selected {
+		display: flex;
+		padding: 4px 8px;
+		align-items: center;
+		gap: 4px;
+		align-self: stretch;
+		color: var(--text2, #bdbdbd);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 16px;
+	}
+
+	.label {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		flex: 1 0 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.popup {
+		position: absolute;
+		z-index: 9999999;
+		top: 100px;
+		left: 73px;
+	}
+
+	.dropdown-item {
+		all: unset;
+		cursor: pointer;
+		display: grid;
+		grid-template-columns: 16px 1fr;
+		align-items: center;
+		padding: 4px 8px;
+		gap: 4px;
+		align-self: stretch;
+		color: var(--text-text-1, #d9d9d9);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		border: 1px solid transparent;
+	}
+	.dropdown-item .icon,
+	.dropdown-list .selected .icon {
+		display: flex;
+		width: 16px;
+		height: 16px;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.arrow {
+		width: 12px;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/ui/components/select/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DropdownInstance, SelectProps } from './types.js';
+declare const Select: import("svelte").Component<SelectProps, {
+    /**
+         * Inits the attribute.
+         */ init: () => Promise<{
+        result: DropdownInstance[];
+        destroy(): void;
+    } | undefined>;
+}, "selected">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/ui/components/select/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Select } from './Select.svelte';
+export type { SelectOption, SelectProps, SelectChangeEvent, SelectChangeHandler, SelectState, DropdownInstance, DropdownConfig, SelectStyles, NavigationKey, KeyboardNavigationEvent, SearchConfig, FilterFunction, SelectElementRefs, SelectInstanceManager } from './types.js';

package/dist/ui/components/select/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';