@finsweet/webflow-apps-utils 1.0.53 → 1.0.55

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,29 @@
 		}
 	});
 
+	// Handle global Escape key when dropdown is open
+	$effect(() => {
+		const handleGlobalKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape' && closeOnEscape && isOpen) {
+				event.preventDefault();
+				event.stopPropagation();
+				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 +184,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 +274,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 +334,9 @@
 
 		if (!dropdownItems || !target) return instances;
 
-		document?.addEventListener('click', dismissTooltip);
+		if (closeOnClickOutside) {
+			document?.addEventListener('click', dismissTooltip, true);
+		}
 		instances.push(setupDropdown(target, dropdownItems));
 
 		return instances;
@@ -312,6 +347,9 @@
 	 */
 	const cleanupDropdownInstances = (instances: DropdownInstance[]) => {
 		instances.forEach((instance) => instance.cleanup());
+		if (closeOnClickOutside) {
+			document?.removeEventListener('click', dismissTooltip, true);
+		}
 	};
 
 	/**
@@ -440,10 +478,13 @@
 </script>
 
 {#snippet selectWrapper()}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="dropdown-wrapper {className}"
 		bind:this={dropdownWrapper}
 		style="{hide ? 'display:none;' : ''} width: {width};"
+		onclick={(e) => e.stopPropagation()}
 	>
 		<div
 			class="dropdown"
@@ -472,12 +513,14 @@
 				</div>
 			</div>
 
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				tabindex={disabled || isOpen ? -1 : 0}
 				class="dropdown-list"
 				class:has-footer={footer}
 				role="listbox"
 				style="width:{dropdownWidth};"
+				onclick={(e) => e.stopPropagation()}
 				onkeydown={(e) => {
 					e.stopPropagation();
 					e.preventDefault();
@@ -679,6 +722,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 +759,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 +829,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/SelectInModal.stories.js

@@ -0,0 +1,18 @@
+import SelectInModalStory from './SelectInModalStory.svelte';
+const meta = {
+    title: 'Ui/Select/InModal',
+    component: SelectInModalStory,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Testing Modal with Select component to ensure proper event handling'
+            }
+        }
+    },
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {
+    args: {}
+};

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Button } from '../button';
+	import Modal from '../modal/Modal.svelte';
+	import Select from './Select.svelte';
+	import type { SelectOption } from './types';
+
+	interface Props {
+		initialOpen?: boolean;
+	}
+
+	let { initialOpen = false }: Props = $props();
+
+	let modalOpen = $state(initialOpen);
+	let selectedValue = $state<string | null>(null);
+
+	const options: SelectOption[] = [
+		{ label: 'Option 1', value: 'option1' },
+		{ label: 'Option 2', value: 'option2' },
+		{ label: 'Option 3', value: 'option3' },
+		{ label: 'Option 4', value: 'option4' },
+		{ label: 'Option 5', value: 'option5' }
+	];
+
+	const handleOpenModal = () => {
+		modalOpen = true;
+	};
+
+	const handleCloseModal = () => {
+		console.log('Modal closing');
+		modalOpen = false;
+	};
+</script>
+
+<div style="padding: 20px;">
+	<Button onclick={handleOpenModal}>Open Modal with Select</Button>
+
+	<Modal
+		open={modalOpen}
+		onOpenChange={(open) => {
+			console.log('Modal onOpenChange:', open);
+			modalOpen = open;
+		}}
+		title="Select Example Inside Modal"
+		showFooter={false}
+		width="400px"
+		closeOnOverlayClick={false}
+		closeOnEscape={false}
+	>
+		<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+			<p style="color: var(--text1); margin: 0;">Test the following behaviors:</p>
+			<ul style="color: var(--text2); margin: 0; padding-left: 20px;">
+				<li>Click outside the modal (overlay) - modal stays open (disabled)</li>
+				<li>Press Escape with select closed - modal stays open (disabled)</li>
+				<li>Press Escape with select open - should close select only</li>
+				<li>Click outside select but inside modal - should close select only</li>
+				<li>Use "Close Modal" button to close the modal</li>
+			</ul>
+
+			<Select
+				{options}
+				bind:selected={selectedValue}
+				defaultText="Choose an option"
+				width="100%"
+				dropdownWidth="100%"
+			/>
+
+			{#if selectedValue}
+				<p style="color: var(--text1); margin: 0;">
+					Selected: {selectedValue}
+				</p>
+			{/if}
+
+			<Button onclick={handleCloseModal} variant="secondary">Close Modal</Button>
+		</div>
+	</Modal>
+</div>

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

@@ -0,0 +1,6 @@
+interface Props {
+    initialOpen?: boolean;
+}
+declare const SelectInModalStory: import("svelte").Component<Props, {}, "">;
+type SelectInModalStory = ReturnType<typeof SelectInModalStory>;
+export default SelectInModalStory;

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.55",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {