windmill-components 1.623.2 → 1.642.0

package/package/components/select/Select.svelte

@@ -11,7 +11,8 @@ import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
 import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../text_input/TextInput.svelte';
 import { ButtonType } from '../common/button/model';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
+import Tooltip from '../Tooltip.svelte';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, tooltip, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let iconSize = $derived(ButtonType.UnifiedIconSizes[size]);
 let inputEl = $state();
@@ -27,7 +28,7 @@ $effect(() => {
     if (!open)
         filterText = '';
 });
-let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)));
+let valueEntry = $derived(value != null ? processedItems?.find((item) => deepEqual(item.value, value)) : undefined);
 function setValue(item) {
     if (item.__is_create && onCreateItem) {
         onCreateItem(item.value);
@@ -47,12 +48,12 @@ function clearValue() {
 }
 let inputText = $derived.by(() => {
     let text = valueEntry?.label ?? getLabel({ value }) ?? '';
-    return transformInputSelectedText?.(text) ?? text;
+    return transformInputSelectedText?.(text, value) ?? text;
 });
 </script>
 
 <div
-	class={`relative ${className}`}
+	class={`relative h-fit ${className}`}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}
 	onpointerdown={() => onFocus?.()}
 	onfocus={() => onFocus?.()}
@@ -76,6 +77,13 @@ let inputText = $derived.by(() => {
 			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
+
+	{#if tooltip}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Tooltip>{tooltip}</Tooltip>
+		</div>
+	{/if}
+
 	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{autofocus}
@@ -101,6 +109,11 @@ let inputText = $derived.by(() => {
 			inputClass ?? ''
 		)}
 		autocomplete="off"
+		oninput={(e) => {
+			// Explicitly open dropdown if closed and update filterText
+			if (!open) open = true
+			filterText = e.currentTarget.value
+		}}
 		onpointerdown={() => (open = true)}
 		bind:this={inputEl}
 		{id}

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

@@ -25,12 +25,13 @@ declare function $$render<Item extends {
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
+        tooltip?: string;
         id?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
         size?: "sm" | "md" | "lg";
         showPlaceholderOnOpen?: boolean;
-        transformInputSelectedText?: (text: string) => string;
+        transformInputSelectedText?: (text: string, value: Item["value"]) => string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;

package/package/components/select/SelectDropdown.svelte

@@ -1,95 +1,29 @@
-<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
-import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
-import { untrack } from 'svelte';
+<script lang="ts" generics="T">import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { PlusIcon } from 'lucide-svelte';
-import { useReducedMotion } from '../../svelte5Utils.svelte';
-import { watch } from 'runed';
-let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet } = $props();
+import GenericDropdown from './GenericDropdown.svelte';
+import { Debounced } from 'runed';
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', maxHeight = 256, header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet, highlightFirstOnOpen = false } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
-let listEl = $state();
-let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
-let reducedMotion = useReducedMotion();
-function computeDropdownPos() {
-    if (!getInputRect || !listEl)
-        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
-    let inputR = getInputRect();
-    const listR = listEl.getBoundingClientRect();
-    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
-    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
-    if (isBelow)
-        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
-    else {
-        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
-    }
-}
-$effect(() => {
-    function updateDropdownPos() {
-        let nPos = computeDropdownPos();
-        if (!deepEqual(nPos, dropdownPos))
-            dropdownPos = nPos;
-        if (open)
-            requestAnimationFrame(updateDropdownPos);
-    }
-    if (open)
-        untrack(() => updateDropdownPos());
-});
 $effect(() => {
     ;
     [open, processedItems];
-    untrack(() => (keyArrowPos = open && filterText ? 0 : undefined));
-});
-// We do not want to render the dropdown when it is closed for performance reasons
-// but we want to keep it in the DOM for a short time to allow for transitions to finish
-//
-// We do not use Svelte transitions because they can not animate in the opposite direction
-// when the dropdown is opens above the input
-// Also CSS transitions are smoother because they do not rely on JS / animation frames
-let uiState = $state({ domExists: open, visible: open, timeout: null });
-let initial = true;
-watch(() => open && !disabled, (isOpen) => {
-    untrack(() => {
-        if (initial) {
-            initial = false;
-            return;
-        }
-        if (reducedMotion.val) {
-            uiState = {
-                domExists: open && !disabled,
-                visible: open && !disabled,
-                timeout: null
-            };
-            return;
-        }
-        if (uiState.timeout)
-            clearTimeout(uiState.timeout);
-        uiState = {
-            domExists: true,
-            visible: !isOpen,
-            timeout: setTimeout(() => {
-                if (isOpen) {
-                    uiState.visible = true;
-                    uiState.timeout = null;
-                }
-                else if (!isOpen) {
-                    uiState.visible = false;
-                    uiState.timeout = setTimeout(() => {
-                        uiState.domExists = false;
-                        uiState.timeout = null;
-                    }, 500); // leave time for transition to finish
-                }
-            }, 0) // We need the height to be 0 then change immediately for the transition to play
-        };
-    });
+    untrack(() => (keyArrowPos = open && (filterText || highlightFirstOnOpen) ? 0 : undefined));
 });
+// Expose whether the dropdown is visually open for keyboard nav guard.
+// We mirror the same logic GenericDropdown uses: open && !disabled.
+let isVisible = $derived(open && !disabled);
+// Dirty fix to prevent a rendering bug where the ul is present in the layout but
+// displays as empty. It only happens with overflow-y-auto set.
+let enableOverflowYAuto = new Debounced(() => isVisible, 15);
 </script>
 
 <svelte:window
 	on:keydown={(e) => {
-		if (!uiState.visible || !processedItems?.length) return
+		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -108,81 +42,68 @@ watch(() => open && !disabled, (isOpen) => {
 	}}
 />
 
-<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if uiState.domExists}
-		<div
-			class={twMerge(
-				open ? 'select-dropdown-open' : 'select-dropdown-closed',
-				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
-				'text-primary text-sm select-none',
-				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
-				uiState.visible ? '' : 'pointer-events-none',
-				className
-			)}
-			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
-				? `min-width: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
-				: ''}"
-		>
-			<div
-				class={twMerge(
-					'overflow-clip rounded-md drop-shadow-base',
-					!reducedMotion.val ? 'transition-height' : '',
-					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
-				)}
-				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
-			>
-				<div bind:this={listEl} class="flex flex-col max-h-64 rounded-md bg-surface-input">
-					{@render header?.()}
-					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
-					{/if}
-					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-						{#each processedItems ?? [] as item, itemIndex}
-							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-								<li
-									class={twMerge(
-										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
-										itemIndex === 0 ? 'mt-3' : 'mt-6'
-									)}
-								>
-									{item.__select_group}
-								</li>
-							{/if}
-							<li>
-								<button
-									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
-										itemIndex === keyArrowPos || item.value === value
-											? 'bg-surface-secondary dark:bg-surface-tertiary'
-											: 'hover:bg-surface-hover',
-										endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
-										itemButtonWrapperClasses,
-										item.disabled ? 'cursor-not-allowed text-disabled' : ''
-									)}
-									onclick={(e) => {
-										e.stopImmediatePropagation()
-										if (!item.disabled) onSelectValue(item)
-									}}
-								>
-									{@render startSnippet?.({ item, close: () => (open = false) })}
-									<span class={itemLabelWrapperClasses}>
-										{item.label || '\xa0'}
-									</span>
-									{#if item.__is_create}
-										<PlusIcon class="inline ml-auto" size={16} />
-									{:else}
-										{@render endSnippet?.({ item, close: () => (open = false) })}
-									{/if}
-									{#if item.subtitle}
-										<div class="text-2xs text-secondary">{item.subtitle}</div>
-									{/if}
-								</button>
-							</li>
-						{/each}
-					</ul>
-					{@render bottomSnippet?.({ close: () => (open = false) })}
-				</div>
-			</div>
-		</div>
+<GenericDropdown
+	{listAutoWidth}
+	{disablePortal}
+	{open}
+	{disabled}
+	{maxHeight}
+	{getInputRect}
+	class={className}
+>
+	{@render header?.()}
+	{#if processedItems?.length === 0}
+		<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 	{/if}
-</ConditionalPortal>
+	<ul
+		class={twMerge(
+			'flex-1 flex flex-col',
+			enableOverflowYAuto.current ? 'overflow-y-auto' : '',
+			ulClass
+		)}
+	>
+		{#each processedItems ?? [] as item, itemIndex (item.value)}
+			{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+				<li
+					class={twMerge(
+						'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
+						itemIndex === 0 ? 'mt-3' : 'mt-6'
+					)}
+				>
+					{item.__select_group}
+				</li>
+			{/if}
+			<li>
+				<button
+					class={twMerge(
+						'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+						itemIndex === keyArrowPos || item.value === value
+							? 'bg-surface-secondary dark:bg-surface-tertiary'
+							: 'hover:bg-surface-hover',
+						endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
+						itemButtonWrapperClasses,
+						item.disabled ? 'cursor-not-allowed text-disabled' : ''
+					)}
+					onclick={(e) => {
+						e.stopImmediatePropagation()
+						if (!item.disabled) onSelectValue(item)
+					}}
+				>
+					{@render startSnippet?.({ item, close: () => (open = false) })}
+					<span class={itemLabelWrapperClasses}>
+						{item.label || '\xa0'}
+					</span>
+					{#if item.__is_create}
+						<PlusIcon class="inline ml-auto" size={16} />
+					{:else}
+						{@render endSnippet?.({ item, close: () => (open = false) })}
+					{/if}
+					{#if item.subtitle}
+						<div class="text-2xs text-secondary">{item.subtitle}</div>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{@render bottomSnippet?.({ close: () => (open = false) })}
+</GenericDropdown>

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -5,7 +5,7 @@ declare function $$render<T>(): {
         processedItems?: ProcessedItem<T>[];
         value: T | undefined;
         filterText?: string;
-        listAutoWidth?: Boolean;
+        listAutoWidth?: boolean;
         disabled?: boolean;
         disablePortal?: boolean;
         open: boolean;
@@ -14,6 +14,7 @@ declare function $$render<T>(): {
         ulClass?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
+        maxHeight?: number;
         header?: Snippet;
         getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
@@ -28,6 +29,8 @@ declare function $$render<T>(): {
         bottomSnippet?: Snippet<[{
             close: () => void;
         }]>;
+        /** When true, the first item is highlighted when the dropdown opens (even without filterText) */
+        highlightFirstOnOpen?: boolean;
     };
     exports: {};
     bindings: "";

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -43,11 +43,14 @@ async function changeWorkspaceColor() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace color</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace color</p>
+	<p class="text-xs text-secondary font-normal">
+		Color to identify the current workspace in the list of workspaces
+	</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		{#if $workspaceColor}
 			<div
-				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
+				class="w-10 h-6 rounded-md border border-gray-300 dark:border-gray-600"
 				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
@@ -57,18 +60,14 @@ async function changeWorkspaceColor() {
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
+			variant="subtle"
 			iconOnly
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-	<p class="text-2xs text-secondary font-normal">
-		Color to identify the current workspace in the list of workspaces
-	</p>
 </div>
 
 <Modal bind:open title="Change workspace color">

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -53,7 +53,8 @@ export let open = false;
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace ID</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace ID</p>
+	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
@@ -61,9 +62,8 @@ export let open = false;
 				on:click={() => {
 					open = true
 				}}
-				size="xs"
-				spacingSize="xs2"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				iconOnly
 				startIcon={{
 					icon: Pen
@@ -71,7 +71,6 @@ export let open = false;
 			/>
 		{/if}
 	</div>
-	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">
@@ -102,7 +101,6 @@ export let open = false;
 
 	{#snippet actions()}
 		<Button
-			size="sm"
 			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -31,24 +31,22 @@ async function renameWorkspace() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace name</p>
-	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-xs font-normal text-primary">{currentName}</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace name</p>
+	<p class="text-xs text-secondary font-normal">Displayable name</p>
+	<div class="flex flex-row gap-2 items-center">
+		<p class="text-primary text-xs">{currentName}</p>
 		<Button
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
 			iconOnly
+			variant="subtle"
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-
-	<p class="text-2xs text-secondary font-normal"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">