feat/filedropzone-bind-input (#2105)

.changeset/fast-camels-sort.md

@@ -0,0 +1,7 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Multiple updates to the file drop zone and button feature:
+- Added `fileInput` prop which is a reference to the input element.
+- Forwarded focus events including `on:focus`, `on:focusin`, and `on:focusout` on the file drop zone.

packages/skeleton/src/lib/components/FileButton/FileButton.svelte

@@ -8,6 +8,10 @@
 	 * @type {FileList}
 	 */
 	export let files: FileList | undefined = undefined;
+	/**
+	 * File input reference.
+	 */
+	export let fileInput: HTMLInputElement | undefined = undefined;
 	/**
 	 * Required. Set a unique name for the file input.
 	 * @type {string}
@@ -18,11 +22,8 @@
 	/** Provide a button variant or other class styles. */
 	export let button: CssClasses = 'btn variant-filled';
 
-	// Local
-	let elemFileInput: HTMLElement;
-
 	function onButtonClick(): void {
-		elemFileInput.click();
+		if (fileInput) fileInput.click();
 	}
 
 	function prunedRestProps() {
@@ -38,7 +39,7 @@
 <div class="file-button {classesBase}" data-testid="file-button">
 	<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
 	<div class="w-0 h-0 overflow-hidden">
-		<input type="file" bind:this={elemFileInput} bind:files {name} {...prunedRestProps()} on:change />
+		<input type="file" bind:this={fileInput} bind:files {name} {...prunedRestProps()} on:change />
 	</div>
 	<!-- Button -->
 	<button

packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte

@@ -8,6 +8,10 @@
 	 * @type {FileList}
 	 */
 	export let files: FileList | undefined = undefined;
+	/**
+	 * File input reference.
+	 */
+	export let fileInput: HTMLInputElement | undefined = undefined;
 	/**
 	 * Required. Set a unique name for the file input.
 	 * @type {string}
@@ -55,6 +59,7 @@
 	<!-- NOTE: keep `bind:files` here, unlike FileButton -->
 	<input
 		bind:files
+		bind:this={fileInput}
 		type="file"
 		{name}
 		class="dropzone-input {classesInput}"
@@ -68,6 +73,9 @@
 		on:keydown
 		on:keyup
 		on:keypress
+		on:focus
+		on:focusin
+		on:focusout
 	/>
 	<!-- Interface -->
 	<div class="dropzone-interface {classesInterface} {regionInterface}">

sites/skeleton.dev/src/routes/(inner)/components/file-dropzone/+page.svelte

@@ -47,12 +47,12 @@
 
 	<!-- Slot: Usage -->
 	<svelte:fragment slot="usage">
-		<p>
+		<section class="space-y-4">
 			Uses <code class="code">input[type='file']</code> and allows for all native input features and accessibility. Including
 			<code class="code">multiple</code>,
 			<code class="code">accept</code>, and <code class="code">required</code>.
-		</p>
+		</section>
-		<div class="space-y-4">
+		<section class="space-y-4">
 			<h2 class="h2">Customization</h2>
 			<p>
 				Customize the component with the available <code class="code">icon</code>, <code class="code">message</code>, and
@@ -80,18 +80,18 @@
 					/>
 				</svelte:fragment>
 			</DocsPreview>
-		</div>
+		</section>
-		<div class="space-y-4">
+		<section class="space-y-4">
 			<h2 class="h2">Binding Method</h2>
 			<p>Use a <code class="code">FileList</code> to bind the file data.</p>
 			<CodeBlock language="ts" code={`let files: FileList;`} />
 			<CodeBlock language="html" code={`<FileDropzone ... bind:files={files} />`} />
-		</div>
+		</section>
-		<div class="space-y-4">
+		<section class="space-y-4">
 			<h2 class="h2">On Change Event</h2>
 			<p>Use the <code class="code">on:change</code> event to monitor file selection or changes.</p>
 			<CodeBlock language="ts" code={`function onChangeHandler(e: Event): void {\n\tconsole.log('file data:', e);\n}`} />
 			<CodeBlock language="html" code={`<FileDropzone ... on:change={onChangeHandler}>Upload</FileDropzone>`} />
-		</div>
+		</section>
 	</svelte:fragment>
 </DocsShell>