@finsweet/webflow-apps-utils 1.0.53 → 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/package.json

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