mertani-web-toolkit 0.1.64 → 0.1.65

package/dist/components/inputs/SelectInput/SelectInput.css

@@ -59,35 +59,56 @@
     box-shadow 0.2s;
 }
 
-.select-trigger:not(:disabled) {
+.select-trigger:not(.disabled) {
   background: var(--color-bg-surface);
   cursor: pointer;
 }
 
-.select-trigger:not(:disabled):hover {
+.select-trigger:not(.disabled):hover {
   border-color: var(--color-border-form);
 }
 
-.select-trigger:not(:disabled):focus {
+.select-trigger:not(.disabled):focus {
   outline: none;
   border-color: var(--color-bg-act-primary);
   box-shadow: 0 0 0 2px var(--color-bg-act-primary) 40;
 }
 
-.select-trigger:disabled {
+.select-trigger.disabled {
   cursor: not-allowed;
   background: var(--color-bg-disabled);
 }
 
-.select-trigger.error:not(:disabled) {
+.select-trigger.error:not(.disabled) {
   border-color: var(--color-text-error-ti);
 }
 
-.select-trigger.error:not(:disabled):focus {
+.select-trigger.error:not(.disabled):focus {
   border-color: var(--color-text-error-ti);
   box-shadow: 0 0 0 2px var(--color-text-error-ti) 40;
 }
 
+.select-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--color-text-tertiary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+  line-height: 0;
+}
+
+.select-clear-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-bg-disabled);
+}
+
 .select-menu {
   position: absolute;
   right: 0;

package/dist/components/inputs/SelectInput/SelectInput.svelte

@@ -41,6 +41,7 @@
 		onOpen?: () => void;
 		/** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
 		onSearchQueryChange?: (query: string) => void;
+		onClear?: () => void;
 
 		// Validation
 		isMandatory?: boolean;
@@ -56,6 +57,7 @@
 		class?: string;
 		style?: string;
 		isShowChevron?: boolean;
+		isClearable?: boolean;
 	}
 
 	const {
@@ -92,6 +94,7 @@
 		onSelect,
 		onOpen,
 		onSearchQueryChange,
+		onClear,
 
 		// Validation
 		isMandatory = false,
@@ -105,7 +108,8 @@
 
 		class: className = '',
 		style: customStyle = '',
-		isShowChevron = true
+		isShowChevron = true,
+		isClearable = false
 	}: Props = $props();
 
 	// ===== Constants =====
@@ -123,7 +127,7 @@
 	let open = $state(false);
 	let search = $state('');
 	let placement: 'bottom' | 'top' = $state('bottom');
-	let triggerEl: HTMLButtonElement | null = $state(null);
+	let triggerEl: HTMLDivElement | null = $state(null);
 	let menuEl: HTMLDivElement | null = $state(null);
 	let resizeObs: ResizeObserver | null = $state(null);
 	let unregisterDropdown: (() => void) | null = $state(null);
@@ -306,6 +310,13 @@
 		close();
 	}
 
+	function handleClear(e: MouseEvent) {
+		e.stopPropagation();
+		onSelect?.('');
+		onClear?.();
+		error = validateInput('');
+	}
+
 	function validateInput(val: string): string {
 		if (customValidation) {
 			const customError = customValidation(val);
@@ -403,28 +414,42 @@
 			</label>
 		{/if}
 		<div class="relative flex-1">
-			<button
+			<div
 				bind:this={triggerEl}
-				type="button"
-				class="select-trigger {className} {error ? 'error' : ''}"
-				style={triggerStyles()}
+				role="combobox"
+				tabindex="0"
 				aria-haspopup="listbox"
 				aria-expanded={open}
+				aria-controls={open ? 'select-menu' : undefined}
+				class="select-trigger {className} {error ? 'error' : ''}"
+				style={triggerStyles()}
 				onclick={toggle}
 				onkeydown={handleKeydown}
 				onfocus={handleFocus}
 				onblur={handleBlur}
-				disabled={disabled || isLoading}
 				title={tooltip || ''}
+				class:disabled={disabled || isLoading}
 			>
 				<span class="truncate">{labelOf(value) || placeholder}</span>
-				{#if isShowChevron}
-					<Icon
-						name="bs-chevron-down"
-						style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
-					/>
-				{/if}
-			</button>
+				<div class="flex items-center gap-1">
+					{#if isClearable && value && !disabled && !isLoading}
+						<button
+							type="button"
+							class="select-clear-button"
+							onclick={handleClear}
+							aria-label="Clear selection"
+						>
+							<Icon name="bs-x-lg" />
+						</button>
+					{/if}
+					{#if isShowChevron}
+						<Icon
+							name="bs-chevron-down"
+							style="transform-origin: center; transition: transform 0.25s; transform: rotate({chevronRotation});"
+						/>
+					{/if}
+				</div>
+			</div>
 
 			{#if open}
 				<div

package/dist/components/inputs/SelectInput/SelectInput.svelte.d.ts

@@ -28,6 +28,7 @@ interface Props {
     onOpen?: () => void;
     /** Dipanggil saat teks search berubah (debounce 300ms), hanya jika remoteSearch. */
     onSearchQueryChange?: (query: string) => void;
+    onClear?: () => void;
     isMandatory?: boolean;
     customValidation?: (value: string) => string | null;
     isLoading?: boolean;
@@ -37,6 +38,7 @@ interface Props {
     class?: string;
     style?: string;
     isShowChevron?: boolean;
+    isClearable?: boolean;
 }
 declare const SelectInput: import("svelte").Component<Props, {}, "">;
 type SelectInput = ReturnType<typeof SelectInput>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mertani-web-toolkit",
-	"version": "0.1.64",
+	"version": "0.1.65",
 	"homepage": "https://storybook.mertani.com/",
 	"scripts": {
 		"dev": "vite dev",