@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/modals/RenameDialog.svelte

@@ -1,297 +1,239 @@
 <script lang="ts">
-  // Svelte imports
-  import { createEventDispatcher, tick } from 'svelte';
-
-  // Local imports
-  import { Button } from '../ui/button';
-  // import { toast } from '../ui/sonner';
-  import { showToast } from '../toast';
-  import BaseModal from './BaseModal.svelte';
-  // Words of the dialog and the helper that puts values into them
-  import type { RenameDialogMessages } from './messages';
-  import { fillMessage } from '../../utils/fillMessage';
-
-  // Props
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  //
-  export let isOpen = false;
-  export let itemName = '';
-  export let itemType = 'item'; // 'item', 'folder', 'file', 'key', etc.
-  export let itemId = '';
-  export let title = '';
-  export let placeholder = '';
-  export let confirmLabel = 'Rename';
-  export let cancelLabel = 'Cancel';
-  // The words a screen reader says for the close button (see BaseModal)
-  export let closeLabel = 'Close modal';
-  // The words of the errors and toasts; a key that is left out keeps its English text (see ./messages)
-  export let messages: Partial<RenameDialogMessages> = {};
-  export let width = '410px';
-  export let height = '168px';
-  export let target: string = 'rename-dialog'; // target for Portal
-  export let maxLength = 50; // Reduced for better UX
-  export let shouldUseCustomRenameFunction = false; // If true, parent component handles the rename
-
-  // For backwards compatibility with specific implementations
-  export let modalType: string = 'rename';
-  export let modalData: any = null;
-
-  let inputValue = '';
-  let inputElement: HTMLInputElement;
-  let hasAttemptedSubmit = false; // Track if user has attempted to submit
-  let isValid = false; // Track if input is valid
-
-  // Initialize modalData with our current props if not provided externally
-  $: if (modalData === null) {
-    modalData = {
-      itemName,
-      itemType,
-      itemId,
-      title,
-      placeholder,
-      confirmLabel,
-      cancelLabel
-    };
-  }
-
-  // Update validation state whenever inputValue changes
-  $: {
-    isValid = inputValue.trim().length > 0 && 
-              inputValue.length <= maxLength && 
-              inputValue !== itemName;
-  }
-
-  // Computed placeholder based on itemType
-  $: computedPlaceholder = placeholder || `${itemType} name...`;
-
-  // The words of the errors and toasts: the page's own, or English
-  $: text = {
-    invalidTitle: messages.invalidTitle ?? 'Invalid name',
-    enterName: messages.enterName ?? 'Please enter a name',
-    enterDifferentName: messages.enterDifferentName ?? 'Please enter a different name',
-    enterValidName: messages.enterValidName ?? 'Please enter a valid name',
-    tooShort: messages.tooShort ?? 'Name must be at least 1 character long',
-    tooLong: fillMessage(messages.tooLong ?? 'Name must be {max} characters or less', { max: maxLength }),
-    renamed: messages.renamed ?? 'Successfully renamed to {name}',
-    failed: messages.failed ?? 'Failed to rename item'
-  };
-
-  // Function to focus and select the input text
-  async function focusAndSelectInput() {
-    // Wait for the DOM to update
-    await tick();
-    
-    if (!inputElement) return;
-    
-    // Focus the input
-    inputElement.focus();
-    
-    // Select all text
-    inputElement.setSelectionRange(0, inputElement.value.length);
-  }
-
-  // Simple function to handle input initialization
-  function handleInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    inputValue = input.value.slice(0, maxLength);
-  }
-
-  // When the modal opens, set the input value and focus the input
-  $: if (isOpen) {
-    inputValue = itemName;
-    hasAttemptedSubmit = false; // Reset submission state
-    // Schedule focus after a short delay
-    setTimeout(focusAndSelectInput, 50);
-  }
-
-  const dispatch = createEventDispatcher();
-
-  async function handleRename() {
-    hasAttemptedSubmit = true;
-    
-    try {
-      // Validate input
-      if (!inputValue.trim() || inputValue.length < 1) {
-        showToast('error', text.invalidTitle, { description: text.tooShort });
-        return;
-      }
-
-      if (inputValue.length > maxLength) {
-        showToast('error', text.invalidTitle, { description: text.tooLong });
-        return;
-      }
-
-      if (inputValue === itemName) {
-        showToast('error', text.invalidTitle, { description: text.enterDifferentName });
-        return;
-      }
-
-      // console.log('Attempting rename:', {
-      //   from: itemName,
-      //   to: inputValue,
-      //   itemId
-      // });
-
-      // If parent component handles rename, dispatch event
-      if (shouldUseCustomRenameFunction) {
-        dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
-        isOpen = false;
-      } else {
-        // For file browser compatibility - in a real implementation, this would be replaced
-        // with a more generic approach
-        try {
-          // Simulate success
-          showToast('success', fillMessage(text.renamed, { name: inputValue }));
-          dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
-          isOpen = false;
-        } catch (error) {
-          console.error('Error during rename:', error);
-          showToast('error', text.failed);
-        }
-      }
-    } catch (error) {
-      console.error('Error during rename:', error);
-      showToast('error', text.failed);
-    }
-  }
-
-  function handleClose() {
-    isOpen = false;
-    hasAttemptedSubmit = false;
-    dispatch('cancel');
-  }
-
-  // Support for restoring modal state
-  function handleRestore(event: CustomEvent) {
-    if (event.detail) {
-      itemName = event.detail.itemName || '';
-      itemType = event.detail.itemType || 'item';
-      itemId = event.detail.itemId || '';
-      if (event.detail.title) title = event.detail.title;
-      if (event.detail.placeholder) placeholder = event.detail.placeholder;
-      if (event.detail.confirmLabel) confirmLabel = event.detail.confirmLabel;
-      if (event.detail.cancelLabel) cancelLabel = event.detail.cancelLabel;
-      
-      // Reset input value on restore
-      inputValue = itemName;
-      
-      // Focus and select text when modal is restored
-      setTimeout(focusAndSelectInput, 50);
-    }
-  }
+	// Svelte imports
+	import { createEventDispatcher, tick } from 'svelte';
+
+	// Local imports
+	import { Button } from '../ui/button';
+	import { Input } from '../ui/input';
+	import { showToast } from '../toast';
+	import BaseModal from './BaseModal.svelte';
+	// Words of the dialog and the helper that puts values into them
+	import type { RenameDialogMessages } from './messages';
+	import { fillMessage } from '../../utils/fillMessage';
+
+	// Props
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	//
+	export let isOpen = false;
+	export let itemName = '';
+	export let itemType = 'item'; // 'item', 'folder', 'file', 'key', etc.
+	export let itemId = '';
+	export let title = '';
+	export let placeholder = '';
+	export let confirmLabel = 'Rename';
+	export let cancelLabel = 'Cancel';
+	// The words a screen reader says for the close button (see BaseModal)
+	export let closeLabel = 'Close modal';
+	// The words of the errors and toasts; a key that is left out keeps its English text (see ./messages)
+	export let messages: Partial<RenameDialogMessages> = {};
+	export let width = '400px';
+	export let height = 'auto';
+	export let target: string = 'rename-dialog'; // target for Portal
+	export let maxLength = 50; // Reduced for better UX
+	export let shouldUseCustomRenameFunction = false; // If true, parent component handles the rename
+
+	// For backwards compatibility with specific implementations
+	export let modalType: string = 'rename';
+	export let modalData: any = null;
+
+	let inputValue = '';
+	// The Input binds its element to this: it starts as null (an undefined value cannot be bound)
+	let inputElement: HTMLInputElement | null = null;
+	let hasAttemptedSubmit = false; // Track if user has attempted to submit
+	let isValid = false; // Track if input is valid
+
+	// Initialize modalData with our current props if not provided externally
+	$: if (modalData === null) {
+		modalData = {
+			itemName,
+			itemType,
+			itemId,
+			title,
+			placeholder,
+			confirmLabel,
+			cancelLabel
+		};
+	}
+
+	// Update validation state whenever inputValue changes
+	$: {
+		isValid =
+			inputValue.trim().length > 0 && inputValue.length <= maxLength && inputValue !== itemName;
+	}
+
+	// Computed placeholder based on itemType
+	$: computedPlaceholder = placeholder || `${itemType} name…`;
+
+	// The words of the errors and toasts: the page's own, or English
+	$: text = {
+		invalidTitle: messages.invalidTitle ?? 'Invalid name',
+		enterName: messages.enterName ?? 'Please enter a name',
+		enterDifferentName: messages.enterDifferentName ?? 'Please enter a different name',
+		enterValidName: messages.enterValidName ?? 'Please enter a valid name',
+		tooShort: messages.tooShort ?? 'Name must be at least 1 character long',
+		tooLong: fillMessage(messages.tooLong ?? 'Name must be {max} characters or less', {
+			max: maxLength
+		}),
+		renamed: messages.renamed ?? 'Successfully renamed to {name}',
+		failed: messages.failed ?? 'Failed to rename item'
+	};
+
+	// Function to focus and select the input text
+	async function focusAndSelectInput() {
+		// Wait for the DOM to update
+		await tick();
+
+		if (!inputElement) return;
+
+		// Focus the input
+		inputElement.focus();
+
+		// Select all text
+		inputElement.setSelectionRange(0, inputElement.value.length);
+	}
+
+	// Simple function to handle input initialization
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		inputValue = input.value.slice(0, maxLength);
+	}
+
+	// When the modal opens, set the input value and focus the input
+	$: if (isOpen) {
+		inputValue = itemName;
+		hasAttemptedSubmit = false; // Reset submission state
+		// Schedule focus after a short delay
+		setTimeout(focusAndSelectInput, 50);
+	}
+
+	const dispatch = createEventDispatcher();
+
+	async function handleRename() {
+		hasAttemptedSubmit = true;
+
+		try {
+			// Validate input
+			if (!inputValue.trim() || inputValue.length < 1) {
+				showToast('error', text.invalidTitle, { description: text.tooShort });
+				return;
+			}
+
+			if (inputValue.length > maxLength) {
+				showToast('error', text.invalidTitle, { description: text.tooLong });
+				return;
+			}
+
+			if (inputValue === itemName) {
+				showToast('error', text.invalidTitle, { description: text.enterDifferentName });
+				return;
+			}
+
+			// If parent component handles rename, dispatch event
+			if (shouldUseCustomRenameFunction) {
+				dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
+				isOpen = false;
+			} else {
+				try {
+					showToast('success', fillMessage(text.renamed, { name: inputValue }));
+					dispatch('rename', { itemId, newName: inputValue, oldName: itemName });
+					isOpen = false;
+				} catch (error) {
+					console.error('Error during rename:', error);
+					showToast('error', text.failed);
+				}
+			}
+		} catch (error) {
+			console.error('Error during rename:', error);
+			showToast('error', text.failed);
+		}
+	}
+
+	function handleClose() {
+		isOpen = false;
+		hasAttemptedSubmit = false;
+		dispatch('cancel');
+	}
+
+	// Support for restoring modal state
+	function handleRestore(event: CustomEvent) {
+		if (event.detail) {
+			itemName = event.detail.itemName || '';
+			itemType = event.detail.itemType || 'item';
+			itemId = event.detail.itemId || '';
+			if (event.detail.title) title = event.detail.title;
+			if (event.detail.placeholder) placeholder = event.detail.placeholder;
+			if (event.detail.confirmLabel) confirmLabel = event.detail.confirmLabel;
+			if (event.detail.cancelLabel) cancelLabel = event.detail.cancelLabel;
+
+			inputValue = itemName;
+			setTimeout(focusAndSelectInput, 50);
+		}
+	}
+
+	$: displayTitle = title || 'Rename';
+	$: validationMessage =
+		!isValid && hasAttemptedSubmit
+			? inputValue.trim().length === 0
+				? text.enterName
+				: inputValue === itemName
+					? text.enterDifferentName
+					: text.enterValidName
+			: '';
 </script>
 
-<BaseModal 
-  bind:open={isOpen} 
-  on:close={handleClose}
-  {target}
-  title={title || undefined}
-  width={width}
-  height={height}
-  titlePadding="small"
-  {closeLabel}
-  {modalType}
-  {modalData}
-  on:restore={handleRestore}
+<BaseModal
+	bind:open={isOpen}
+	on:close={handleClose}
+	{target}
+	title={displayTitle}
+	{width}
+	{height}
+	{closeLabel}
+	{modalType}
+	{modalData}
+	on:restore={handleRestore}
 >
-  <div class="{className ? `${className} ` : ''}rename-dialog-container h-full flex flex-col gap-4 min-h-[136px] justify-between" style={style}>
-
-    <!-- Input Container -->
-    <div class="input-container flex flex-col items-center pt-6">
-      <!-- Simple native input with minimal event handlers -->
-      <input 
-        type="text"
-        bind:value={inputValue}
-        bind:this={inputElement}
-        oninput={handleInput}
-        onkeydown={(e) => {
-          if (e.key === 'Escape') {
-            handleClose();
-          } else {
-            e.stopPropagation(); // Stop all keyboard events except Escape from bubbling up
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleRename();
-            }
-          }
-        }}
-        onfocus={(e) => {
-          const target = e.target as HTMLInputElement;
-          target.placeholder = "";
-          
-          // Select all text
-          setTimeout(() => {
-            if (target) {
-              target.setSelectionRange(0, target.value.length);
-            }
-          }, 0);
-        }}
-        onblur={(e) => {
-          const target = e.target as HTMLInputElement;
-          target.placeholder = computedPlaceholder;
-        }}
-        required
-        class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-hidden focus:ring-0
-               placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
-               text-ellipsis-input
-               {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
-        maxlength={maxLength}
-        data-min-length="1"
-        placeholder={computedPlaceholder}
-      />
-      {#if !isValid && hasAttemptedSubmit}
-        <div class="text-xs text-[hsl(var(--error))] mt-1">
-          {inputValue.trim().length === 0 ? text.enterName : 
-           inputValue === itemName ? text.enterDifferentName : 
-           text.enterValidName}
-        </div>
-      {/if}
-    </div>
-
-    <!-- Buttons Container -->
-    <div class="buttons-container flex justify-center gap-4">
-      <!-- Cancel Button -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <Button 
-        class="modal-btn-secondary !h-[34px]"
-        onclick={handleClose}
-      >
-        {cancelLabel}
-      </Button>
-
-      <!-- Confirm Button -->
-      <Button
-        class="modal-btn-primary !h-[34px]"
-        onclick={handleRename}
-        disabled={!isValid}
-      >
-        {confirmLabel}
-      </Button>
-    </div>
-  </div>
+	<div
+		class="{className ? `${className} ` : ''}rename-dialog-container flex flex-col gap-4"
+		{style}
+	>
+		<div class="flex flex-col gap-1.5">
+			<Input
+				bind:ref={inputElement}
+				bind:value={inputValue}
+				placeholder={computedPlaceholder}
+				maxlength={maxLength}
+				aria-invalid={Boolean(validationMessage)}
+				class={validationMessage ? 'border-destructive' : ''}
+				oninput={handleInput}
+				onkeydown={(e) => {
+					if (e.key === 'Escape') {
+						handleClose();
+					} else {
+						e.stopPropagation();
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							handleRename();
+						}
+					}
+				}}
+				onfocus={(e) => {
+					const target = e.currentTarget;
+					setTimeout(() => {
+						target.setSelectionRange(0, target.value.length);
+					}, 0);
+				}}
+			/>
+			{#if validationMessage}
+				<p class="text-caption text-destructive">{validationMessage}</p>
+			{/if}
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<Button variant="outline" onclick={handleClose}>{cancelLabel}</Button>
+			<Button onclick={handleRename} disabled={!isValid}>{confirmLabel}</Button>
+		</div>
+	</div>
 </BaseModal>
-
-<style>
-  :global(.input-error) {
-    animation: shake 0.4s ease-in-out;
-    border-bottom: 1px solid hsl(var(--error)) !important;
-  }
-
-  :global(.text-ellipsis-input) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-    padding: 0 16px; /* Add padding to prevent text from touching edges */
-    box-sizing: border-box;
-  }
-
-  @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
-  }
-</style>