@finsweet/webflow-apps-utils 1.0.55 → 1.0.57

package/dist/ui/components/copy-text/CopyText.stories.js

@@ -78,7 +78,10 @@ export const RawContentWithComment = {
         content: '<script>\n  // Your custom code here\n  console.log("Hello from script!");\n</script>',
         title: 'Script with Comment',
         raw: true,
-        comment: 'Add this script to your site'
+        comment: 'Add this script to your site',
+        onCopy: (content) => {
+            console.log('Copied content:', content);
+        }
     }
 };
 export const MultilineContent = {

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

@@ -84,6 +84,18 @@ declare const meta: {
             control: string;
             description: string;
         };
+        onOpen: {
+            action: string;
+            description: string;
+        };
+        itemsDisabled: {
+            control: string;
+            description: string;
+        };
+        itemsDisabledMessage: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -119,4 +131,7 @@ export declare const InvalidState: Story;
 export declare const InvalidWithAlert: Story;
 export declare const ValidationStates: Story;
 export declare const FormValidationExample: Story;
+export declare const ItemsDisabled: Story;
+export declare const ItemsDisabledWithSearch: Story;
+export declare const AsyncRefreshOnOpen: Story;
 export declare const WithFooter: Story;

package/dist/ui/components/select/Select.stories.js

@@ -1,5 +1,6 @@
 import { CheckIcon, UndoIcon } from '../../icons';
 import Select from './Select.svelte';
+import SelectItemsDisabledStory from './SelectItemsDisabledStory.svelte';
 import SelectWithFooterStory from './SelectWithFooterStory.svelte';
 // Mock options for stories
 const basicOptions = [
@@ -131,6 +132,18 @@ const meta = {
         closeOnClickOutside: {
             control: 'boolean',
             description: 'Whether the dropdown closes when clicking outside the component'
+        },
+        onOpen: {
+            action: 'onOpen',
+            description: 'Callback fired when the dropdown opens'
+        },
+        itemsDisabled: {
+            control: 'boolean',
+            description: 'Disables all dropdown items and search while the dropdown remains open'
+        },
+        itemsDisabledMessage: {
+            control: 'text',
+            description: 'Overlay message shown when itemsDisabled is true'
         }
     }
 };
@@ -619,6 +632,61 @@ export const FormValidationExample = {
         }
     }
 };
+// Items disabled
+export const ItemsDisabled = {
+    args: {
+        options: basicOptions,
+        itemsDisabled: true,
+        itemsDisabledMessage: 'Items are currently unavailable',
+        defaultText: 'Items disabled'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disables all dropdown items and search input. The dropdown still opens and closes normally, but no selection or filtering can occur.'
+            }
+        }
+    }
+};
+export const ItemsDisabledWithSearch = {
+    args: {
+        options: basicOptions,
+        itemsDisabled: true,
+        enableSearch: true,
+        defaultText: 'Search disabled too'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When itemsDisabled is true, the search input is also disabled along with all items.'
+            }
+        }
+    }
+};
+// Async refresh on open example
+export const AsyncRefreshOnOpen = {
+    render: () => ({
+        Component: SelectItemsDisabledStory,
+        props: {
+            options: basicOptions,
+            defaultText: 'Open to refresh',
+            dropdownWidth: '250px',
+            dropdownHeight: '200px',
+            enableSearch: true
+        }
+    }),
+    args: {
+        options: basicOptions,
+        defaultText: 'Open to refresh'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates the `onOpen` + `itemsDisabled` pattern: opening the dropdown triggers a simulated 2s async refresh. Items and search are disabled during the refresh, then re-enabled with fresh data.'
+            }
+        }
+    }
+};
 // Footer snippet example
 const providerOptions = [
     { label: 'Facebook', value: 'facebook' },

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

@@ -44,6 +44,9 @@
 		className = '',
 		closeOnEscape = true,
 		closeOnClickOutside = true,
+		onOpen,
+		itemsDisabled = false,
+		itemsDisabledMessage = '',
 		onchange,
 		children,
 		footer
@@ -103,7 +106,6 @@
 				event.preventDefault();
 				event.stopPropagation();
 				closeDropdown();
-				// Remove focus to prevent focus ring after closing
 				if (document.activeElement instanceof HTMLElement) {
 					document.activeElement.blur();
 				}
@@ -165,7 +167,7 @@
 	 * Handles the option selection.
 	 */
 	const handleSelect = (value: string, label = defaultText, element: HTMLButtonElement) => {
-		if (disabled) return;
+		if (disabled || itemsDisabled) return;
 		updateActiveElement(element);
 
 		if (selected === value && !preventNoSelection) {
@@ -257,18 +259,21 @@
 	const handleKeyDown = (event: KeyboardEvent): void => {
 		if (!isOpen || !dropdownItems) return;
 
-		const items = Array.from(dropdownItems.querySelectorAll('.dropdown-item'));
+		const items = Array.from(dropdownItems.querySelectorAll('.dropdown-item:not(.items-disabled)'));
 		let currentIndex = lastHoveredItem ? items.indexOf(lastHoveredItem) : -1;
 		let newIndex = -1;
 
 		switch (event.key) {
 			case 'ArrowDown':
+				if (itemsDisabled) break;
 				newIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
 				break;
 			case 'ArrowUp':
+				if (itemsDisabled) break;
 				newIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
 				break;
 			case 'Enter': {
+				if (itemsDisabled) break;
 				const selectedItem = items[currentIndex] as HTMLButtonElement;
 				selectedItem.click();
 				break;
@@ -387,35 +392,42 @@
 		const showDropdown = () => {
 			if (disabled) return;
 
+			// Show the dropdown FIRST so elements are focusable before calling focus()
 			tooltip.setAttribute('aria-hidden', 'false');
+			tooltip.style.display = 'flex';
+			isOpen = true;
+			isFocused = true;
 			update();
 
+			onOpen?.();
+
 			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) {
+			if (selectedItemButton) {
+				selectedItemButton.focus();
+				if (lastHoveredItem) {
+					lastHoveredItem.classList.remove('hover-state');
+					lastHoveredItem.setAttribute('tabindex', '-1');
+				}
+				lastHoveredItem = selectedItemButton;
+				lastHoveredItem.classList.add('hover-state');
+				lastHoveredItem.setAttribute('tabindex', '0');
+			} else 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');
+			} else if (firstItemButton) {
+				firstItemButton.focus();
+				if (lastHoveredItem) {
+					lastHoveredItem.classList.remove('hover-state');
+					lastHoveredItem.setAttribute('tabindex', '-1');
 				}
+				lastHoveredItem = firstItemButton;
+				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[];
@@ -532,8 +544,20 @@
 				<div
 					class="dropdown-items-scroll"
 					style="max-height:{dropdownHeight};"
+					class:disabled={itemsDisabled}
 					onmouseleave={clearHoverState}
 				>
+					{#if itemsDisabled && itemsDisabledMessage}
+						<div class="items-disabled-overlay" role="status">
+							<Text
+								loading
+								class="items-disabled-text"
+								label={itemsDisabledMessage}
+								fontSize="normal"
+								fontColor="var(--text2)"
+							/>
+						</div>
+					{/if}
 					{#if selectedLabel}
 						<div class="selected">
 							<div class="label">
@@ -547,6 +571,7 @@
 							<input
 								type="text"
 								placeholder="Search"
+								disabled={itemsDisabled}
 								oninput={(e) => {
 									e.stopPropagation();
 									e.preventDefault();
@@ -565,16 +590,22 @@
 							aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
 							id={`${itemId}-list-${indexId}-${id}`}
 							data-value={value}
-							class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+							class="dropdown-item {isDisabled || itemsDisabled ? 'disabled' : ''} {itemsDisabled
+								? 'items-disabled'
+								: ''} {className}"
 							role="option"
+							aria-disabled={isDisabled || itemsDisabled}
 							onclick={(e) => {
 								e.stopPropagation();
-								if (isDisabled) return;
+								if (isDisabled || itemsDisabled) return;
 								handleSelect(value, label, e.currentTarget);
 							}}
 							onkeydown={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
+								if (e.key === 'Escape' && closeOnEscape) {
+									closeDropdown();
+								}
 							}}
 							onmouseenter={handleMouseEnter}
 							aria-hidden={!isOpen}
@@ -649,10 +680,6 @@
 		padding: 0;
 	}
 
-	.dropdown-item.disabled {
-		opacity: 0.75;
-		cursor: not-allowed;
-	}
 	.label .label-description-title,
 	.label .label-description {
 		height: max-content;
@@ -742,7 +769,7 @@
 		width: 100%;
 	}
 
-	.dropdown-list :global(.dropdown-item.hover-state) {
+	.dropdown-list :global(.dropdown-item.hover-state:not(.disabled):not(.items-disabled)) {
 		background: var(--background5);
 	}
 
@@ -766,6 +793,7 @@
 	}
 
 	.dropdown-items-scroll {
+		position: relative;
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
@@ -774,6 +802,18 @@
 		overflow-y: auto;
 	}
 
+	.items-disabled-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(0, 0, 0, 0.55);
+		z-index: 1;
+		padding: 12px;
+		text-align: center;
+	}
+
 	.dropdown-footer {
 		display: flex;
 		align-items: center;
@@ -854,4 +894,9 @@
 		width: 10px;
 		height: 10px;
 	}
+
+	.dropdown-item.disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
 </style>

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import Select from './Select.svelte';
+	import type { SelectOption } from './types.js';
+
+	interface Props {
+		options: SelectOption[];
+		defaultText?: string;
+		dropdownWidth?: string;
+		dropdownHeight?: string;
+		enableSearch?: boolean;
+	}
+
+	let {
+		options: initialOptions,
+		defaultText = 'Select',
+		dropdownWidth = '200px',
+		dropdownHeight = '200px',
+		enableSearch = false
+	}: Props = $props();
+
+	let itemsDisabled = $state(false);
+	let currentOptions = $state<SelectOption[]>(initialOptions);
+	let selected = $state<string | null>(null);
+	let statusText = $state('Idle');
+
+	const handleOpen = () => {
+		itemsDisabled = true;
+		statusText = 'Refreshing items...';
+
+		// Simulate an async refresh (e.g. fetching updated options from an API)
+		setTimeout(() => {
+			currentOptions = [
+				{ label: 'Refreshed Option A', value: 'refreshed-a' },
+				{ label: 'Refreshed Option B', value: 'refreshed-b' },
+				{ label: 'Refreshed Option C', value: 'refreshed-c' },
+				{ label: 'Refreshed Option D', value: 'refreshed-d' }
+			];
+			itemsDisabled = false;
+			statusText = 'Items refreshed!';
+		}, 4000);
+	};
+</script>
+
+<div class="story-container">
+	<div class="status">Status: {statusText}</div>
+	<Select
+		options={currentOptions}
+		{defaultText}
+		{dropdownWidth}
+		{dropdownHeight}
+		{enableSearch}
+		{itemsDisabled}
+		itemsDisabledMessage="Refreshing items..."
+		onOpen={handleOpen}
+		bind:selected
+	/>
+	<div class="info">
+		Open the dropdown to trigger a simulated 2s refresh. Items will be disabled during the refresh.
+	</div>
+</div>
+
+<style>
+	.story-container {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		align-items: flex-start;
+	}
+
+	.status {
+		font-size: 12px;
+		color: var(--text2);
+		padding: 4px 8px;
+		border-radius: 4px;
+		background: var(--background3);
+	}
+
+	.info {
+		font-size: 11px;
+		color: var(--text2);
+		max-width: 250px;
+		line-height: 1.4;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { SelectOption } from './types.js';
+interface Props {
+    options: SelectOption[];
+    defaultText?: string;
+    dropdownWidth?: string;
+    dropdownHeight?: string;
+    enableSearch?: boolean;
+}
+declare const SelectItemsDisabledStory: import("svelte").Component<Props, {}, "">;
+type SelectItemsDisabledStory = ReturnType<typeof SelectItemsDisabledStory>;
+export default SelectItemsDisabledStory;

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

@@ -64,6 +64,20 @@ export interface SelectProps {
      */
     invalid?: boolean;
     className?: string;
+    /**
+     * Callback fired when the dropdown opens
+     */
+    onOpen?: () => void;
+    /**
+     * When true, disables all dropdown items and search input.
+     * Useful for showing a loading/refreshing state while items are being updated.
+     */
+    itemsDisabled?: boolean;
+    /**
+     * Message displayed as an overlay when itemsDisabled is true.
+     * Helps communicate to users why items are unavailable (e.g. "Refreshing...").
+     */
+    itemsDisabledMessage?: string;
     onchange?: SelectChangeHandler;
     children?: Snippet;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -49,7 +49,7 @@
     "@storybook/addon-vitest": "9.1.8",
     "@storybook/sveltekit": "9.1.8",
     "@sveltejs/adapter-auto": "6.1.0",
-    "@sveltejs/kit": "2.43.2",
+    "@sveltejs/kit": "2.53.1",
     "@sveltejs/package": "2.5.4",
     "@sveltejs/vite-plugin-svelte": "5.1.1",
     "@testing-library/jest-dom": "6.8.0",
@@ -75,11 +75,11 @@
     "prettier-plugin-svelte": "3.4.0",
     "publint": "0.3.13",
     "storybook": "9.1.8",
-    "svelte": "5.39.5",
+    "svelte": "5.53.3",
     "svelte-check": "4.3.2",
     "typescript": "5.9.2",
     "typescript-eslint": "8.44.1",
-    "vite": "7.1.7",
+    "vite": "7.1.11",
     "vitest": "3.2.4"
   },
   "keywords": [
@@ -97,7 +97,6 @@
     "luxon": "3.7.2",
     "motion": "10.18.0",
     "svelte-routing": "2.13.0",
-    "swiper": "11.2.10",
     "terser": "5.44.0",
     "uuid": "11.1.0",
     "zod": "3.25.76"