@noctuatech/uswds 1.4.4 → 1.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "type": "module",
   "workspaces": [
     "packages/**"
@@ -112,14 +112,14 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/web-components-vite": "^9.0.16",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/web-components-vite": "^10.0.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/mocha": "^10.0.7",
-    "@types/node": "^22.0.0",
+    "@types/node": "^24.0.0",
     "@uswds/uswds": "^3.10.0",
     "@web/dev-server-import-maps": "^0.2.1",
     "@web/test-runner": "^0.20.0",
@@ -131,7 +131,7 @@
     "mocha": "^11.0.0",
     "plop": "^4.0.1",
     "prettier": "^3.5.3",
-    "storybook": "^9.0.16",
+    "storybook": "^10.0.7",
     "typescript": "^5.8.0",
     "wireit": "^0.14.9"
   },

package/src/lib/file-input/file-input.element.test.ts

@@ -69,4 +69,132 @@ describe('usa-file-input', () => {
     assert.equal(fileInput.files?.length, 1);
     assert.equal(fileInput.files?.[0].name, 'test.txt');
   });
+
+  it('should fire input event when a file is dragged and dropped', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input> Input accepts a single file </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector('input');
+
+    assert.isOk(nativeInput);
+
+    // Create a spy to track input events
+    let inputEventFired = false;
+    fileInput.addEventListener('input', () => {
+      inputEventFired = true;
+    });
+
+    // Simulate drag and drop with a file
+    const data = new DataTransfer();
+    data.items.add(new File([], 'test.txt'));
+
+    const dropEvent = new DragEvent('drop', {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that the input event was fired
+    assert.isTrue(inputEventFired);
+  });
+
+  it('should filter dropped files based on accept MIME type', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input accept="image/*"> Input accepts only images </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector('input');
+
+    assert.isOk(nativeInput);
+
+    // Simulate drag and drop with mixed file types
+    const data = new DataTransfer();
+    data.items.add(new File([], 'image.png', { type: 'image/png' }));
+    data.items.add(new File([], 'document.txt', { type: 'text/plain' }));
+    data.items.add(new File([], 'photo.jpg', { type: 'image/jpeg' }));
+
+    const dropEvent = new DragEvent('drop', {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that only image files were accepted
+    assert.equal(fileInput.files?.length, 2);
+    assert.equal(fileInput.files?.[0].name, 'image.png');
+    assert.equal(fileInput.files?.[1].name, 'photo.jpg');
+  });
+
+  it('should filter dropped files based on accept file extension', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input accept=".txt,.pdf"> Input accepts text and PDF files </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector('input');
+
+    assert.isOk(nativeInput);
+
+    // Simulate drag and drop with mixed file types
+    const data = new DataTransfer();
+    data.items.add(new File([], 'document.txt'));
+    data.items.add(new File([], 'image.png'));
+    data.items.add(new File([], 'report.pdf'));
+
+    const dropEvent = new DragEvent('drop', {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that only .txt and .pdf files were accepted
+    assert.equal(fileInput.files?.length, 2);
+    assert.equal(fileInput.files?.[0].name, 'document.txt');
+    assert.equal(fileInput.files?.[1].name, 'report.pdf');
+  });
+
+  it('should accept all dropped files when accept property is not set', async () => {
+    const fileInput = await fixture<USAFileInputElement>(html`
+      <usa-file-input> Input accepts all files </usa-file-input>
+    `);
+
+    const nativeInput = fileInput.shadowRoot?.querySelector('input');
+
+    assert.isOk(nativeInput);
+
+    // Simulate drag and drop with mixed file types
+    const data = new DataTransfer();
+    data.items.add(new File([], 'document.txt'));
+    data.items.add(new File([], 'image.png'));
+    data.items.add(new File([], 'report.pdf'));
+
+    const dropEvent = new DragEvent('drop', {
+      dataTransfer: data,
+      bubbles: true,
+      cancelable: true,
+    });
+
+    nativeInput.dispatchEvent(dropEvent);
+
+    // Wait for effects to resolve
+    await Promise.resolve();
+
+    // Verify that all files were accepted
+    assert.equal(fileInput.files?.length, 3);
+  });
 });

package/src/lib/file-input/file-input.element.ts

@@ -163,9 +163,11 @@ export class USAFileInputElement extends HTMLElement {
 
     const input = this.#input();
 
-    this.files = input.files;
+    if (input.files) {
+      this.files = input.files;
 
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    }
   }
 
   @listen('dragenter')
@@ -191,13 +193,47 @@ export class USAFileInputElement extends HTMLElement {
         if (item.kind === 'file') {
           const file = item.getAsFile();
 
-          if (file) {
+          if (file && this.#isFileAccepted(file)) {
             data.items.add(file);
           }
         }
       }
 
       this.files = data.files;
+
+      this.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  #isFileAccepted(file: File): boolean {
+    // If no accept property is set, accept all files
+    if (!this.accept) {
+      return true;
     }
+
+    // Split the accept string by comma and trim whitespace
+    const acceptedTypes = this.accept.split(',').map((type) => type.trim());
+
+    for (const acceptType of acceptedTypes) {
+      if (acceptType.endsWith('/*')) {
+        // Handle wildcard types like "image/*" or "audio/*"
+
+        const mainType = acceptType.split('/')[0];
+        if (file.type.startsWith(mainType + '/')) {
+          return true;
+        }
+      } else if (acceptType.startsWith('.')) {
+        if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
+          return true;
+        }
+      }
+
+      // Handle exact MIME type match
+      if (file.type === acceptType) {
+        return true;
+      }
+    }
+
+    return false;
   }
 }

package/target/lib/file-input/file-input.element.js

@@ -105,8 +105,10 @@ let USAFileInputElement = (() => {
         onInputChange(e) {
             e.stopPropagation();
             const input = this.#input();
-            this.files = input.files;
-            this.dispatchEvent(new Event('input', { bubbles: true }));
+            if (input.files) {
+                this.files = input.files;
+                this.dispatchEvent(new Event('input', { bubbles: true }));
+            }
         }
         onDragEnter() {
             this.classList.add('dragenter');
@@ -122,13 +124,41 @@ let USAFileInputElement = (() => {
                 for (const item of e.dataTransfer.items) {
                     if (item.kind === 'file') {
                         const file = item.getAsFile();
-                        if (file) {
+                        if (file && this.#isFileAccepted(file)) {
                             data.items.add(file);
                         }
                     }
                 }
                 this.files = data.files;
+                this.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        #isFileAccepted(file) {
+            // If no accept property is set, accept all files
+            if (!this.accept) {
+                return true;
+            }
+            // Split the accept string by comma and trim whitespace
+            const acceptedTypes = this.accept.split(',').map((type) => type.trim());
+            for (const acceptType of acceptedTypes) {
+                if (acceptType.endsWith('/*')) {
+                    // Handle wildcard types like "image/*" or "audio/*"
+                    const mainType = acceptType.split('/')[0];
+                    if (file.type.startsWith(mainType + '/')) {
+                        return true;
+                    }
+                }
+                else if (acceptType.startsWith('.')) {
+                    if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
+                        return true;
+                    }
+                }
+                // Handle exact MIME type match
+                if (file.type === acceptType) {
+                    return true;
+                }
             }
+            return false;
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);

package/target/lib/file-input/file-input.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-input.element.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.ts"],"names":[],"mappings":"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"}

package/target/lib/file-input/file-input.element.test.js

@@ -38,5 +38,92 @@ describe('usa-file-input', () => {
         assert.equal(fileInput.files?.length, 1);
         assert.equal(fileInput.files?.[0].name, 'test.txt');
     });
+    it('should fire input event when a file is dragged and dropped', async () => {
+        const fileInput = await fixture(html `<usa-file-input>Input accepts a single file</usa-file-input>`);
+        const nativeInput = fileInput.shadowRoot?.querySelector('input');
+        assert.isOk(nativeInput);
+        // Create a spy to track input events
+        let inputEventFired = false;
+        fileInput.addEventListener('input', () => {
+            inputEventFired = true;
+        });
+        // Simulate drag and drop with a file
+        const data = new DataTransfer();
+        data.items.add(new File([], 'test.txt'));
+        const dropEvent = new DragEvent('drop', {
+            dataTransfer: data,
+            bubbles: true,
+            cancelable: true,
+        });
+        nativeInput.dispatchEvent(dropEvent);
+        // Wait for effects to resolve
+        await Promise.resolve();
+        // Verify that the input event was fired
+        assert.isTrue(inputEventFired);
+    });
+    it('should filter dropped files based on accept MIME type', async () => {
+        const fileInput = await fixture(html `<usa-file-input accept="image/*">Input accepts only images</usa-file-input>`);
+        const nativeInput = fileInput.shadowRoot?.querySelector('input');
+        assert.isOk(nativeInput);
+        // Simulate drag and drop with mixed file types
+        const data = new DataTransfer();
+        data.items.add(new File([], 'image.png', { type: 'image/png' }));
+        data.items.add(new File([], 'document.txt', { type: 'text/plain' }));
+        data.items.add(new File([], 'photo.jpg', { type: 'image/jpeg' }));
+        const dropEvent = new DragEvent('drop', {
+            dataTransfer: data,
+            bubbles: true,
+            cancelable: true,
+        });
+        nativeInput.dispatchEvent(dropEvent);
+        // Wait for effects to resolve
+        await Promise.resolve();
+        // Verify that only image files were accepted
+        assert.equal(fileInput.files?.length, 2);
+        assert.equal(fileInput.files?.[0].name, 'image.png');
+        assert.equal(fileInput.files?.[1].name, 'photo.jpg');
+    });
+    it('should filter dropped files based on accept file extension', async () => {
+        const fileInput = await fixture(html `<usa-file-input accept=".txt,.pdf">Input accepts text and PDF files</usa-file-input>`);
+        const nativeInput = fileInput.shadowRoot?.querySelector('input');
+        assert.isOk(nativeInput);
+        // Simulate drag and drop with mixed file types
+        const data = new DataTransfer();
+        data.items.add(new File([], 'document.txt'));
+        data.items.add(new File([], 'image.png'));
+        data.items.add(new File([], 'report.pdf'));
+        const dropEvent = new DragEvent('drop', {
+            dataTransfer: data,
+            bubbles: true,
+            cancelable: true,
+        });
+        nativeInput.dispatchEvent(dropEvent);
+        // Wait for effects to resolve
+        await Promise.resolve();
+        // Verify that only .txt and .pdf files were accepted
+        assert.equal(fileInput.files?.length, 2);
+        assert.equal(fileInput.files?.[0].name, 'document.txt');
+        assert.equal(fileInput.files?.[1].name, 'report.pdf');
+    });
+    it('should accept all dropped files when accept property is not set', async () => {
+        const fileInput = await fixture(html `<usa-file-input>Input accepts all files</usa-file-input>`);
+        const nativeInput = fileInput.shadowRoot?.querySelector('input');
+        assert.isOk(nativeInput);
+        // Simulate drag and drop with mixed file types
+        const data = new DataTransfer();
+        data.items.add(new File([], 'document.txt'));
+        data.items.add(new File([], 'image.png'));
+        data.items.add(new File([], 'report.pdf'));
+        const dropEvent = new DragEvent('drop', {
+            dataTransfer: data,
+            bubbles: true,
+            cancelable: true,
+        });
+        nativeInput.dispatchEvent(dropEvent);
+        // Wait for effects to resolve
+        await Promise.resolve();
+        // Verify that all files were accepted
+        assert.equal(fileInput.files?.length, 3);
+    });
 });
 //# sourceMappingURL=file-input.element.test.js.map

package/target/lib/file-input/file-input.element.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;QAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC;QAE3C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;+CAEL,IAAI,CAAC,KAAK;;;;;;;;KAQpD,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpC,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvD,IAAI,IAAI,YAAY,IAAI,EAAE,CAAC;gBACzB,OAAO,IAAI,CAAC,IAAI,CAAC;YACnB,CAAC;YAED,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEzB,qCAAqC;QACrC,MAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;QAEzC,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE;YACtC,YAAY,EAAE,IAAI;YAClB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAErC,8BAA8B;QAC9B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,qDAAqD;QACrD,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"file-input.element.test.js","sourceRoot":"","sources":["../../../src/lib/file-input/file-input.element.test.ts"],"names":[],"mappings":"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"}