@finsweet/webflow-apps-utils 1.0.52 → 1.0.53

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