@finsweet/webflow-apps-utils 1.0.52 → 1.0.54

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

@@ -76,6 +76,14 @@ declare const meta: {
             control: string;
             description: string;
         };
+        closeOnEscape: {
+            control: string;
+            description: string;
+        };
+        closeOnClickOutside: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -90,6 +98,9 @@ export declare const CustomDimensions: Story;
 export declare const CompactSelect: Story;
 export declare const WideSelect: Story;
 export declare const PreventDeselection: Story;
+export declare const DisableEscapeClose: Story;
+export declare const DisableClickOutsideClose: Story;
+export declare const DisableAllCloseBehaviors: Story;
 export declare const MixedOptions: Story;
 export declare const TopPlacement: Story;
 export declare const LeftPlacement: Story;

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

@@ -123,6 +123,14 @@ const meta = {
         invalid: {
             control: 'boolean',
             description: 'Whether the select is in an invalid state'
+        },
+        closeOnEscape: {
+            control: 'boolean',
+            description: 'Whether the dropdown closes when pressing the Escape key'
+        },
+        closeOnClickOutside: {
+            control: 'boolean',
+            description: 'Whether the dropdown closes when clicking outside the component'
         }
     }
 };
@@ -241,6 +249,49 @@ export const PreventDeselection = {
         }
     }
 };
+export const DisableEscapeClose = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Press Escape (disabled)',
+        closeOnEscape: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Prevents the dropdown from closing when the Escape key is pressed. Users must select an option or click the button again to close.'
+            }
+        }
+    }
+};
+export const DisableClickOutsideClose = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Click outside (disabled)',
+        closeOnClickOutside: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Prevents the dropdown from closing when clicking outside the component. Users must select an option or click the button again to close.'
+            }
+        }
+    }
+};
+export const DisableAllCloseBehaviors = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Must select to close',
+        closeOnEscape: false,
+        closeOnClickOutside: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disables both Escape key and click outside behaviors. The dropdown can only be closed by selecting an option or clicking the select button. Useful for modal-like contexts where you want to force a selection.'
+            }
+        }
+    }
+};
 export const MixedOptions = {
     args: {
         options: mixedOptions,

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

@@ -42,6 +42,8 @@
 		alert = null,
 		invalid = false,
 		className = '',
+		closeOnEscape = true,
+		closeOnClickOutside = true,
 		onchange,
 		children,
 		footer
@@ -94,6 +96,28 @@
 		}
 	});
 
+	// Handle global Escape key when dropdown is open
+	$effect(() => {
+		const handleGlobalKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape' && closeOnEscape && isOpen) {
+				event.preventDefault();
+				closeDropdown();
+				// Remove focus to prevent focus ring after closing
+				if (document.activeElement instanceof HTMLElement) {
+					document.activeElement.blur();
+				}
+			}
+		};
+
+		if (isOpen) {
+			document?.addEventListener('keydown', handleGlobalKeyDown);
+		}
+
+		return () => {
+			document?.removeEventListener('keydown', handleGlobalKeyDown);
+		};
+	});
+
 	// Computed states
 	let hasAlert = $derived(alert?.message);
 
@@ -159,6 +183,8 @@
 	 * Dismiss dropdown when clicking outside of it.
 	 */
 	const dismissTooltip = (event: Event): void => {
+		if (!closeOnClickOutside) return;
+
 		const isClickInside = dropdownWrapper?.contains(event.target as Node);
 
 		if (!isClickInside) {
@@ -247,7 +273,13 @@
 				break;
 			}
 			case 'Escape':
-				closeDropdown();
+				if (closeOnEscape) {
+					closeDropdown();
+					// Remove focus to prevent focus ring after closing
+					if (document.activeElement instanceof HTMLElement) {
+						document.activeElement.blur();
+					}
+				}
 				break;
 		}
 
@@ -301,7 +333,9 @@
 
 		if (!dropdownItems || !target) return instances;
 
-		document?.addEventListener('click', dismissTooltip);
+		if (closeOnClickOutside) {
+			document?.addEventListener('click', dismissTooltip);
+		}
 		instances.push(setupDropdown(target, dropdownItems));
 
 		return instances;
@@ -312,6 +346,9 @@
 	 */
 	const cleanupDropdownInstances = (instances: DropdownInstance[]) => {
 		instances.forEach((instance) => instance.cleanup());
+		if (closeOnClickOutside) {
+			document?.removeEventListener('click', dismissTooltip);
+		}
 	};
 
 	/**
@@ -679,6 +716,10 @@
 		display: flex;
 		align-items: center;
 		gap: 4px;
+		outline: none; /* Remove default focus outline since we have custom focus styling */
+	}
+	.dropdown:focus-visible {
+		outline: none; /* Prevent browser's default focus ring */
 	}
 	.dropdown.disabled {
 		cursor: not-allowed !important;
@@ -712,6 +753,10 @@
 		background: var(--background3);
 		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
 		z-index: 99999;
+		outline: none; /* Remove focus outline */
+	}
+	.dropdown-list:focus-visible {
+		outline: none; /* Prevent browser's default focus ring */
 	}
 
 	.dropdown-items-scroll {
@@ -778,6 +823,10 @@
 		font-weight: 400;
 		line-height: 16px;
 		border: 1px solid transparent;
+		outline: none; /* Remove focus outline */
+	}
+	.dropdown-item:focus-visible {
+		outline: none; /* Prevent browser's default focus ring */
 	}
 	.dropdown-item .icon,
 	.dropdown-list .selected .icon {

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

@@ -49,6 +49,16 @@ export interface SelectProps {
      * Alert configuration for showing validation messages
      */
     alert?: AlertConfig | null;
+    /**
+     * If true, the dropdown will close when the Escape key is pressed
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * If true, the dropdown will close when clicking outside the component
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
     /**
      * If true, the select will be invalid
      */

package/dist/ui/components/tags/TagsInput.stories.d.ts

@@ -60,6 +60,14 @@ declare const meta: {
             control: "boolean";
             description: string;
         };
+        showRemoveIcon: {
+            control: "boolean";
+            description: string;
+        };
+        expandOnClick: {
+            control: "boolean";
+            description: string;
+        };
         width: {
             control: "text";
             description: string;
@@ -99,5 +107,8 @@ export declare const KeywordsTags: Story;
 export declare const FormIntegration: Story;
 export declare const ManyTags: Story;
 export declare const LongTags: Story;
+export declare const ShowRemoveIcon: Story;
+export declare const ExpandOnClick: Story;
+export declare const ShowRemoveIconAndExpandOnClick: Story;
 export declare const SpecialCharacters: Story;
 export declare const UnicodeSupport: Story;

package/dist/ui/components/tags/TagsInput.stories.js

@@ -60,6 +60,14 @@ const meta = {
             control: 'boolean',
             description: 'Whether to trim whitespace from tags'
         },
+        showRemoveIcon: {
+            control: 'boolean',
+            description: 'Whether to always show the remove icon on tags'
+        },
+        expandOnClick: {
+            control: 'boolean',
+            description: 'Whether clicking a tag expands it to show full content'
+        },
         width: {
             control: 'text',
             description: 'Custom width for the component'
@@ -407,6 +415,53 @@ export const LongTags = {
         }
     }
 };
+export const ShowRemoveIcon = {
+    args: {
+        value: ['JavaScript', 'TypeScript', 'Svelte'],
+        showRemoveIcon: true,
+        placeholder: 'Remove icon always visible...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When showRemoveIcon is true, the X button is always visible inline with 4px gap.'
+            }
+        }
+    }
+};
+export const ExpandOnClick = {
+    args: {
+        value: [
+            'This is a very long tag that will be truncated',
+            'Another long tag content here',
+            'Short'
+        ],
+        expandOnClick: true,
+        placeholder: 'Click tags to expand...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When expandOnClick is true, clicking a tag expands it to show full content.'
+            }
+        }
+    }
+};
+export const ShowRemoveIconAndExpandOnClick = {
+    args: {
+        value: ['This is a very long tag name', 'TypeScript', 'Click me to expand'],
+        showRemoveIcon: true,
+        expandOnClick: true,
+        placeholder: 'Both features enabled...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Both showRemoveIcon and expandOnClick enabled together.'
+            }
+        }
+    }
+};
 export const SpecialCharacters = {
     args: {
         value: ['C++', 'C#', '.NET', '@angular', '#svelte'],

package/dist/ui/components/tags/TagsInput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+
 	import { TimesIcon } from '../../icons';
 
 	import Loader from '../Loader.svelte';
@@ -21,6 +23,8 @@
 		allowDuplicates = false,
 		validateTag,
 		trimTags = true,
+		showRemoveIcon = false,
+		expandOnClick = false,
 		width = '100%',
 		height = 'auto',
 		class: className = '',
@@ -39,6 +43,7 @@
 	let inputElement: HTMLInputElement | undefined = $state();
 	let inputValue = $state('');
 	let isFocused = $state(false);
+	let expandedTags = new SvelteSet<number>();
 
 	// Derived states
 	let isDisabled = $derived(disabled || loading);
@@ -67,12 +72,40 @@
 		${isSuccessAlert ? 'success' : ''}
 		${isFocused ? 'focused' : ''}
 		${loading ? 'loading' : ''}
+		${showRemoveIcon ? 'show-remove-icon' : ''}
 		${className}
 	`
 			.trim()
 			.replace(/\s+/g, ' ')
 	);
 
+	/**
+	 * Collapses all expanded tags
+	 */
+	const collapseAllTags = () => {
+		expandedTags.clear();
+	};
+
+	/**
+	 * Toggles the expanded state of a tag
+	 */
+	const toggleTagExpand = (index: number) => {
+		if (!expandOnClick) return;
+
+		if (expandedTags.has(index)) {
+			expandedTags.delete(index);
+		} else {
+			expandedTags.add(index);
+		}
+	};
+
+	/**
+	 * Checks if a tag is expanded
+	 */
+	const isTagExpanded = (index: number): boolean => {
+		return expandedTags.has(index);
+	};
+
 	/**
 	 * Focus the input element
 	 */
@@ -232,9 +265,13 @@
 	};
 
 	/**
-	 * Handles wrapper click to focus input
+	 * Handles wrapper click to focus input and collapse expanded tags
 	 */
 	const handleWrapperClick = () => {
+		// Collapse all expanded tags when clicking on the wrapper area
+		if (expandOnClick && expandedTags.size > 0) {
+			collapseAllTags();
+		}
 		focusInput();
 	};
 
@@ -268,7 +305,24 @@
 	>
 		<div class="tags-input-content">
 			{#each value as tag, index (`${index}-${tag}`)}
-				<span class="tag" role="listitem">
+				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+				<span
+					class="tag {expandOnClick ? 'expandable' : ''} {isTagExpanded(index) ? 'expanded' : ''}"
+					role="listitem"
+					onclick={(e) => {
+						if (expandOnClick) {
+							e.stopPropagation();
+							toggleTagExpand(index);
+						}
+					}}
+					onkeydown={(e) => {
+						if (expandOnClick && e.key === 'Enter') {
+							e.stopPropagation();
+							toggleTagExpand(index);
+						}
+					}}
+					tabindex={expandOnClick ? 0 : undefined}
+				>
 					<span class="tag-text">{tag}</span>
 					{#if !readonly && !isDisabled}
 						<button
@@ -391,10 +445,14 @@
 		flex-wrap: wrap;
 		align-items: flex-start;
 		align-content: flex-start;
-		gap: 4px;
+		gap: 0;
 		width: 100%;
 	}
 
+	.tags-input-wrapper.show-remove-icon .tags-input-content {
+		gap: 4px;
+	}
+
 	.tag {
 		position: relative;
 		display: flex;
@@ -414,6 +472,22 @@
 		user-select: none;
 		max-width: 100%;
 		min-width: 0;
+		margin: 2px;
+	}
+
+	.tags-input-wrapper.show-remove-icon .tag {
+		margin: 0;
+	}
+
+	.tag.expandable {
+		cursor: pointer;
+	}
+
+	.tag.expanded .tag-text {
+		overflow: visible;
+		text-overflow: unset;
+		white-space: normal;
+		word-break: break-word;
 	}
 
 	.tag-text {
@@ -447,6 +521,20 @@
 		pointer-events: auto;
 	}
 
+	/* Show remove icon mode - inline button */
+	.tags-input-wrapper.show-remove-icon .tag-remove {
+		position: relative;
+		top: auto;
+		right: auto;
+		bottom: auto;
+		padding: 0;
+		margin-left: 4px;
+		background: transparent;
+		opacity: 1;
+		pointer-events: auto;
+		border-radius: 0;
+	}
+
 	.tag-remove:not(:disabled) {
 		color: var(--text1);
 	}

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

@@ -62,6 +62,18 @@ export interface TagsInputProps {
      * Whether to trim whitespace from tags (default: true)
      */
     trimTags?: boolean;
+    /**
+     * Whether to always show the remove icon on tags (default: false)
+     * When true: remove button is inline, 4px gap, no padding on close button
+     * When false: remove button is absolute positioned, appears on hover
+     */
+    showRemoveIcon?: boolean;
+    /**
+     * Whether clicking a tag expands it to show full content (default: false)
+     * When true: clicking a tag removes ellipsis and shows full text
+     * When false: long tags are always truncated with ellipsis
+     */
+    expandOnClick?: boolean;
     /**
      * Custom width for the component
      */

package/dist/ui/providers/GlobalProvider.svelte

@@ -42,7 +42,3 @@
 </script>
 
 {#if children}{@render children()}{/if}
-
-<style>
-	/* Global provider styles - currently using display: contents */
-</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {