ember-primitives 0.63.1 → 0.64.0

package/declarations/components/file-drop/files.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Matches a file against an `accept` list, as `<input type="file">` reads it.
+ *
+ * The file picker filters by `accept` itself, but a drop does not,
+ * so dropped files need this check.
+ */
+export declare function accepts(file: File, accept: string | undefined): boolean;
+/**
+ * A drag can carry text or a link instead of files.
+ * During the drag, only the types are readable, not the files.
+ */
+export declare function hasFiles(event: DragEvent): boolean;
+/**
+ * The files of a pick or a drop that match `accept`, and only the first one
+ * unless `multiple` is set.
+ */
+export declare function filesFrom(list: FileList | null | undefined, accept: string | undefined, multiple: boolean | undefined): File[];
+/**
+ * Whether files are dragged over an element.
+ *
+ * `dragenter` and `dragleave` fire for every child that the pointer crosses,
+ * so a single flag would flicker. The depth counts the enters that did not leave yet.
+ */
+export declare class DragState {
+    #private;
+    isDragging: boolean;
+    enter(event: DragEvent): void;
+    leave(event: DragEvent): void;
+    end(): void;
+}
+//# sourceMappingURL=files.d.ts.map

package/declarations/components/file-drop/files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../src/components/file-drop/files.ts"],"names":[],"mappings":"AAkBA;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAYvE;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAUlD;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS,EACjC,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,QAAQ,EAAE,OAAO,GAAG,SAAS,GAC5B,IAAI,EAAE,CAcR;AAED;;;;;GAKG;AACH,qBAAa,SAAS;;IACX,UAAU,UAAS;IAI5B,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAO7B,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAQ7B,GAAG,IAAI,IAAI;CAIZ"}

package/declarations/components/file-drop.d.ts

@@ -0,0 +1,122 @@
+import "./visually-hidden.css";
+import Component from "@glimmer/component";
+import { DragState } from "./file-drop/files.ts";
+import type Owner from "@ember/owner";
+interface FileArgs {
+    /**
+     * Called with the files that match `@accept`.
+     * It is not called when no file matches.
+     */
+    onFiles: (files: File[]) => void;
+    /**
+     * Which files to take, in the format of the `accept` attribute
+     * of `<input type="file">`, for example `"video/*,.mkv"`.
+     *
+     * The file picker shows only these files.
+     * A drop of other files does nothing.
+     */
+    accept?: string;
+    /**
+     * Take more than one file. Without it, only the first file that matches.
+     */
+    multiple?: boolean;
+}
+export interface Signature {
+    /**
+     * A `<label>` for a hidden `<input type="file">`,
+     * so a click or a key press on the zone opens the file picker.
+     *
+     * It has `data-dragging` while files are dragged over it.
+     */
+    Element: HTMLLabelElement;
+    Args: FileArgs;
+    Blocks: {
+        default: [
+            {
+                /**
+                 * Files are dragged over the zone.
+                 */
+                isDragging: boolean;
+            }
+        ];
+    };
+}
+/**
+ * A zone to drop files on, or to click to pick files.
+ *
+ * ```gjs
+ * import { FileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <FileDrop @accept="video/*" @onFiles={{load}}>
+ *     Drop a video here, or click to choose one
+ *   </FileDrop>
+ * </template>
+ * ```
+ */
+export declare class FileDrop extends Component<Signature> {
+    drag: DragState;
+    inputId: string;
+    onDragEnter: (event: DragEvent) => void;
+    onDragLeave: (event: DragEvent) => void;
+    /**
+     * Without this, the browser does not allow the drop.
+     */
+    onDragOver: (event: DragEvent) => void;
+    /**
+     * `preventDefault` also tells a `DocumentFileDrop` that this zone took the drop.
+     */
+    onDrop: (event: DragEvent) => void;
+    /**
+     * The input is cleared after each pick, so that picking the same file again
+     * is a change too.
+     */
+    onPick: (event: Event) => void;
+    take(list: FileList | null | undefined): void;
+}
+export interface DocumentSignature {
+    Args: FileArgs;
+    Blocks: {
+        default: [
+            {
+                /**
+                 * Files are dragged over the page.
+                 */
+                isDragging: boolean;
+            }
+        ];
+    };
+}
+/**
+ * Takes files dropped anywhere on the page. It renders no element.
+ *
+ * - The block gets `isDragging`, for example to show where a drop goes.
+ * - A drop outside every `FileDrop` does not open the file in the browser tab.
+ * - A drop on a `FileDrop` goes only to that `FileDrop`.
+ *
+ * ```gjs
+ * import { DocumentFileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <DocumentFileDrop @accept="video/*" @onFiles={{load}} as |page|>
+ *     {{#if page.isDragging}}
+ *       <div class="overlay">Drop to load</div>
+ *     {{/if}}
+ *   </DocumentFileDrop>
+ * </template>
+ * ```
+ */
+export declare class DocumentFileDrop extends Component<DocumentSignature> {
+    drag: DragState;
+    constructor(owner: Owner, args: DocumentSignature["Args"]);
+    onDragEnter: (event: DragEvent) => void;
+    onDragLeave: (event: DragEvent) => void;
+    onDragOver: (event: DragEvent) => void;
+    onDrop: (event: DragEvent) => void;
+}
+export {};
+//# sourceMappingURL=file-drop.d.ts.map

package/declarations/components/file-drop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-drop.d.ts","sourceRoot":"","sources":["../../src/components/file-drop.gts"],"names":[],"mappings":"AAmNA,OAAO,uBAAuB,CAAC;AAE/B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAM3C,OAAO,EAAE,SAAS,EAAuB,MAAM,sBAAsB,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,UAAU,QAAQ;IAChB;;;OAGG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAEjC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB;;;;;OAKG;IACH,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,UAAU,EAAE,OAAO,CAAC;aACrB;SACF,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,QAAS,SAAQ,SAAS,CAAC,SAAS,CAAC;IAChD,IAAI,YAAmB;IACvB,OAAO,SAAc;IAErB,WAAW,GAAI,OAAO,SAAS,UAA4B;IAC3D,WAAW,GAAI,OAAO,SAAS,UAA4B;IAE3D;;OAEG;IACH,UAAU,GAAI,OAAO,SAAS,UAE5B;IAEF;;OAEG;IACH,MAAM,GAAI,OAAO,SAAS,UAOxB;IAEF;;;OAGG;IACH,MAAM,GAAI,OAAO,KAAK,UAKpB;IAEF,IAAI,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS;CA4CvC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,UAAU,EAAE,OAAO,CAAC;aACrB;SACF,CAAC;KACH,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAChE,IAAI,YAAmB;gBAEX,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC;IAgBzD,WAAW,GAAI,OAAO,SAAS,UAA4B;IAC3D,WAAW,GAAI,OAAO,SAAS,UAA4B;IAE3D,UAAU,GAAI,OAAO,SAAS,UAE5B;IAEF,MAAM,GAAI,OAAO,SAAS,UAUxB;CAQH"}

package/declarations/index.d.ts

@@ -6,6 +6,7 @@ export { CommandPalette } from './components/command-palette';
 export { Dialog, Modal } from './components/dialog';
 export { Drawer } from './components/drawer';
 export { ExternalLink } from './components/external-link';
+export { DocumentFileDrop, FileDrop } from './components/file-drop';
 export { Form } from './components/form';
 export { IncrementalEach } from './components/incremental-each';
 export { Key, KeyCombo } from './components/keys';

package/declarations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,YAAY,EACV,iCAAiC,EACjC,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,GAClC,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,GACxB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,cAAc,cAAc,CAAC"}

package/dist/components/file-drop/files.js

@@ -0,0 +1,89 @@
+import { tracked } from '@glimmer/tracking';
+import { g, i } from 'decorator-transforms/runtime';
+
+function acceptsOne(file, entry) {
+  if (entry.startsWith('.')) {
+    return file.name.toLowerCase().endsWith(entry.toLowerCase());
+  }
+  if (entry.endsWith('/*')) {
+    return file.type.startsWith(entry.slice(0, -1));
+  }
+  return file.type === entry;
+}
+
+/**
+ * Matches a file against an `accept` list, as `<input type="file">` reads it.
+ *
+ * The file picker filters by `accept` itself, but a drop does not,
+ * so dropped files need this check.
+ */
+function accepts(file, accept) {
+  if (!accept) return true;
+  const entries = accept.split(',');
+  for (const entry of entries) {
+    const trimmed = entry.trim();
+    if (trimmed && acceptsOne(file, trimmed)) return true;
+  }
+  return false;
+}
+
+/**
+ * A drag can carry text or a link instead of files.
+ * During the drag, only the types are readable, not the files.
+ */
+function hasFiles(event) {
+  const types = event.dataTransfer?.types;
+  if (!types) return false;
+  for (const type of types) {
+    if (type === 'Files') return true;
+  }
+  return false;
+}
+
+/**
+ * The files of a pick or a drop that match `accept`, and only the first one
+ * unless `multiple` is set.
+ */
+function filesFrom(list, accept, multiple) {
+  const files = [];
+  if (!list) return files;
+  for (const file of list) {
+    if (!accepts(file, accept)) continue;
+    files.push(file);
+    if (!multiple) break;
+  }
+  return files;
+}
+
+/**
+ * Whether files are dragged over an element.
+ *
+ * `dragenter` and `dragleave` fire for every child that the pointer crosses,
+ * so a single flag would flicker. The depth counts the enters that did not leave yet.
+ */
+class DragState {
+  static {
+    g(this.prototype, "isDragging", [tracked], function () {
+      return false;
+    });
+  }
+  #isDragging = (i(this, "isDragging"), void 0);
+  #depth = 0;
+  enter(event) {
+    if (!hasFiles(event)) return;
+    this.#depth++;
+    this.isDragging = true;
+  }
+  leave(event) {
+    if (!hasFiles(event)) return;
+    this.#depth = Math.max(0, this.#depth - 1);
+    if (this.#depth === 0) this.isDragging = false;
+  }
+  end() {
+    this.#depth = 0;
+    this.isDragging = false;
+  }
+}
+
+export { DragState, accepts, filesFrom, hasFiles };
+//# sourceMappingURL=files.js.map

package/dist/components/file-drop/files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"files.js","sources":["../../../src/components/file-drop/files.ts"],"sourcesContent":["import { tracked } from '@glimmer/tracking';\n\n/**\n * One entry of an `accept` list: an extension (`.mp4`),\n * a type with a wildcard (`video/*`), or an exact type (`video/webm`).\n */\nfunction acceptsOne(file: File, entry: string): boolean {\n  if (entry.startsWith('.')) {\n    return file.name.toLowerCase().endsWith(entry.toLowerCase());\n  }\n\n  if (entry.endsWith('/*')) {\n    return file.type.startsWith(entry.slice(0, -1));\n  }\n\n  return file.type === entry;\n}\n\n/**\n * Matches a file against an `accept` list, as `<input type=\"file\">` reads it.\n *\n * The file picker filters by `accept` itself, but a drop does not,\n * so dropped files need this check.\n */\nexport function accepts(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n\n  const entries = accept.split(',');\n\n  for (const entry of entries) {\n    const trimmed = entry.trim();\n\n    if (trimmed && acceptsOne(file, trimmed)) return true;\n  }\n\n  return false;\n}\n\n/**\n * A drag can carry text or a link instead of files.\n * During the drag, only the types are readable, not the files.\n */\nexport function hasFiles(event: DragEvent): boolean {\n  const types = event.dataTransfer?.types;\n\n  if (!types) return false;\n\n  for (const type of types) {\n    if (type === 'Files') return true;\n  }\n\n  return false;\n}\n\n/**\n * The files of a pick or a drop that match `accept`, and only the first one\n * unless `multiple` is set.\n */\nexport function filesFrom(\n  list: FileList | null | undefined,\n  accept: string | undefined,\n  multiple: boolean | undefined\n): File[] {\n  const files: File[] = [];\n\n  if (!list) return files;\n\n  for (const file of list) {\n    if (!accepts(file, accept)) continue;\n\n    files.push(file);\n\n    if (!multiple) break;\n  }\n\n  return files;\n}\n\n/**\n * Whether files are dragged over an element.\n *\n * `dragenter` and `dragleave` fire for every child that the pointer crosses,\n * so a single flag would flicker. The depth counts the enters that did not leave yet.\n */\nexport class DragState {\n  @tracked isDragging = false;\n\n  #depth = 0;\n\n  enter(event: DragEvent): void {\n    if (!hasFiles(event)) return;\n\n    this.#depth++;\n    this.isDragging = true;\n  }\n\n  leave(event: DragEvent): void {\n    if (!hasFiles(event)) return;\n\n    this.#depth = Math.max(0, this.#depth - 1);\n\n    if (this.#depth === 0) this.isDragging = false;\n  }\n\n  end(): void {\n    this.#depth = 0;\n    this.isDragging = false;\n  }\n}\n"],"names":["acceptsOne","file","entry","startsWith","name","toLowerCase","endsWith","type","slice","accepts","accept","entries","split","trimmed","trim","hasFiles","event","types","dataTransfer","filesFrom","list","multiple","files","push","DragState","g","prototype","tracked","i","enter","isDragging","leave","Math","max","end"],"mappings":"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"}

package/dist/components/file-drop.js

@@ -0,0 +1,128 @@
+import '../visually-hidden-CGP1FSjt.js';
+import Component from '@glimmer/component';
+import { registerDestructor } from '@ember/destroyable';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { uniqueId } from '../utils.js';
+import { DragState, hasFiles, filesFrom } from './file-drop/files.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+/**
+ * A zone to drop files on, or to click to pick files.
+ *
+ * ```gjs
+ * import { FileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <FileDrop @accept="video/*" @onFiles={{load}}>
+ *     Drop a video here, or click to choose one
+ *   </FileDrop>
+ * </template>
+ * ```
+ */
+class FileDrop extends Component {
+  drag = new DragState();
+  inputId = uniqueId();
+  onDragEnter = event => this.drag.enter(event);
+  onDragLeave = event => this.drag.leave(event);
+  /**
+  * Without this, the browser does not allow the drop.
+  */
+  onDragOver = event => {
+    if (hasFiles(event)) event.preventDefault();
+  };
+  /**
+  * `preventDefault` also tells a `DocumentFileDrop` that this zone took the drop.
+  */
+  onDrop = event => {
+    this.drag.end();
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    this.take(event.dataTransfer?.files);
+  };
+  /**
+  * The input is cleared after each pick, so that picking the same file again
+  * is a change too.
+  */
+  onPick = event => {
+    const input = event.currentTarget;
+    this.take(input.files);
+    input.value = "";
+  };
+  take(list) {
+    const files = filesFrom(list, this.args.accept, this.args.multiple);
+    if (files.length > 0) this.args.onFiles(files);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<label for={{this.inputId}} data-dragging={{if this.drag.isDragging \"\"}} {{on \"dragenter\" this.onDragEnter}} {{on \"dragover\" this.onDragOver}} {{on \"dragleave\" this.onDragLeave}} {{on \"drop\" this.onDrop}} ...attributes>\n  {{yield (hash isDragging=this.drag.isDragging)}}\n  <input id={{this.inputId}} class=\"ember-primitives__visually-hidden\" type=\"file\" accept={{@accept}} multiple={{@multiple}} {{on \"change\" this.onPick}} />\n</label>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        hash
+      })
+    }), this);
+  }
+}
+/**
+ * Takes files dropped anywhere on the page. It renders no element.
+ *
+ * - The block gets `isDragging`, for example to show where a drop goes.
+ * - A drop outside every `FileDrop` does not open the file in the browser tab.
+ * - A drop on a `FileDrop` goes only to that `FileDrop`.
+ *
+ * ```gjs
+ * import { DocumentFileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <DocumentFileDrop @accept="video/*" @onFiles={{load}} as |page|>
+ *     {{#if page.isDragging}}
+ *       <div class="overlay">Drop to load</div>
+ *     {{/if}}
+ *   </DocumentFileDrop>
+ * </template>
+ * ```
+ */
+class DocumentFileDrop extends Component {
+  drag = new DragState();
+  constructor(owner, args) {
+    super(owner, args);
+    document.addEventListener("dragenter", this.onDragEnter);
+    document.addEventListener("dragover", this.onDragOver);
+    document.addEventListener("dragleave", this.onDragLeave);
+    document.addEventListener("drop", this.onDrop);
+    registerDestructor(this, () => {
+      document.removeEventListener("dragenter", this.onDragEnter);
+      document.removeEventListener("dragover", this.onDragOver);
+      document.removeEventListener("dragleave", this.onDragLeave);
+      document.removeEventListener("drop", this.onDrop);
+    });
+  }
+  onDragEnter = event => this.drag.enter(event);
+  onDragLeave = event => this.drag.leave(event);
+  onDragOver = event => {
+    if (hasFiles(event)) event.preventDefault();
+  };
+  onDrop = event => {
+    this.drag.end();
+    if (!hasFiles(event) || event.defaultPrevented) return;
+    event.preventDefault();
+    const files = filesFrom(event.dataTransfer?.files, this.args.accept, this.args.multiple);
+    if (files.length > 0) this.args.onFiles(files);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("{{yield (hash isDragging=this.drag.isDragging)}}", {
+      strictMode: true,
+      scope: () => ({
+        hash
+      })
+    }), this);
+  }
+}
+
+export { DocumentFileDrop, FileDrop };
+//# sourceMappingURL=file-drop.js.map

package/dist/components/file-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-drop.js","sources":["../../src/components/file-drop.gts"],"sourcesContent":["import \"./visually-hidden.css\";\n\nimport Component from \"@glimmer/component\";\nimport { registerDestructor } from \"@ember/destroyable\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { uniqueId } from \"../utils.ts\";\nimport { DragState, filesFrom, hasFiles } from \"./file-drop/files.ts\";\n\nimport type Owner from \"@ember/owner\";\n\ninterface FileArgs {\n  /**\n   * Called with the files that match `@accept`.\n   * It is not called when no file matches.\n   */\n  onFiles: (files: File[]) => void;\n\n  /**\n   * Which files to take, in the format of the `accept` attribute\n   * of `<input type=\"file\">`, for example `\"video/*,.mkv\"`.\n   *\n   * The file picker shows only these files.\n   * A drop of other files does nothing.\n   */\n  accept?: string;\n\n  /**\n   * Take more than one file. Without it, only the first file that matches.\n   */\n  multiple?: boolean;\n}\n\nexport interface Signature {\n  /**\n   * A `<label>` for a hidden `<input type=\"file\">`,\n   * so a click or a key press on the zone opens the file picker.\n   *\n   * It has `data-dragging` while files are dragged over it.\n   */\n  Element: HTMLLabelElement;\n  Args: FileArgs;\n  Blocks: {\n    default: [\n      {\n        /**\n         * Files are dragged over the zone.\n         */\n        isDragging: boolean;\n      },\n    ];\n  };\n}\n\n/**\n * A zone to drop files on, or to click to pick files.\n *\n * ```gjs\n * import { FileDrop } from 'ember-primitives/components/file-drop';\n *\n * const load = (files) => console.log(files);\n *\n * <template>\n *   <FileDrop @accept=\"video/*\" @onFiles={{load}}>\n *     Drop a video here, or click to choose one\n *   </FileDrop>\n * </template>\n * ```\n */\nexport class FileDrop extends Component<Signature> {\n  drag = new DragState();\n  inputId = uniqueId();\n\n  onDragEnter = (event: DragEvent) => this.drag.enter(event);\n  onDragLeave = (event: DragEvent) => this.drag.leave(event);\n\n  /**\n   * Without this, the browser does not allow the drop.\n   */\n  onDragOver = (event: DragEvent) => {\n    if (hasFiles(event)) event.preventDefault();\n  };\n\n  /**\n   * `preventDefault` also tells a `DocumentFileDrop` that this zone took the drop.\n   */\n  onDrop = (event: DragEvent) => {\n    this.drag.end();\n\n    if (!hasFiles(event)) return;\n\n    event.preventDefault();\n    this.take(event.dataTransfer?.files);\n  };\n\n  /**\n   * The input is cleared after each pick, so that picking the same file again\n   * is a change too.\n   */\n  onPick = (event: Event) => {\n    const input = event.currentTarget as HTMLInputElement;\n\n    this.take(input.files);\n    input.value = \"\";\n  };\n\n  take(list: FileList | null | undefined) {\n    const files = filesFrom(list, this.args.accept, this.args.multiple);\n\n    if (files.length > 0) this.args.onFiles(files);\n  }\n\n  <template>\n    <label\n      for={{this.inputId}}\n      data-dragging={{if this.drag.isDragging \"\"}}\n      {{on \"dragenter\" this.onDragEnter}}\n      {{on \"dragover\" this.onDragOver}}\n      {{on \"dragleave\" this.onDragLeave}}\n      {{on \"drop\" this.onDrop}}\n      ...attributes\n    >\n      {{yield (hash isDragging=this.drag.isDragging)}}\n      <input\n        id={{this.inputId}}\n        class=\"ember-primitives__visually-hidden\"\n        type=\"file\"\n        accept={{@accept}}\n        multiple={{@multiple}}\n        {{on \"change\" this.onPick}}\n      />\n    </label>\n  </template>\n}\n\nexport interface DocumentSignature {\n  Args: FileArgs;\n  Blocks: {\n    default: [\n      {\n        /**\n         * Files are dragged over the page.\n         */\n        isDragging: boolean;\n      },\n    ];\n  };\n}\n\n/**\n * Takes files dropped anywhere on the page. It renders no element.\n *\n * - The block gets `isDragging`, for example to show where a drop goes.\n * - A drop outside every `FileDrop` does not open the file in the browser tab.\n * - A drop on a `FileDrop` goes only to that `FileDrop`.\n *\n * ```gjs\n * import { DocumentFileDrop } from 'ember-primitives/components/file-drop';\n *\n * const load = (files) => console.log(files);\n *\n * <template>\n *   <DocumentFileDrop @accept=\"video/*\" @onFiles={{load}} as |page|>\n *     {{#if page.isDragging}}\n *       <div class=\"overlay\">Drop to load</div>\n *     {{/if}}\n *   </DocumentFileDrop>\n * </template>\n * ```\n */\nexport class DocumentFileDrop extends Component<DocumentSignature> {\n  drag = new DragState();\n\n  constructor(owner: Owner, args: DocumentSignature[\"Args\"]) {\n    super(owner, args);\n\n    document.addEventListener(\"dragenter\", this.onDragEnter);\n    document.addEventListener(\"dragover\", this.onDragOver);\n    document.addEventListener(\"dragleave\", this.onDragLeave);\n    document.addEventListener(\"drop\", this.onDrop);\n\n    registerDestructor(this, () => {\n      document.removeEventListener(\"dragenter\", this.onDragEnter);\n      document.removeEventListener(\"dragover\", this.onDragOver);\n      document.removeEventListener(\"dragleave\", this.onDragLeave);\n      document.removeEventListener(\"drop\", this.onDrop);\n    });\n  }\n\n  onDragEnter = (event: DragEvent) => this.drag.enter(event);\n  onDragLeave = (event: DragEvent) => this.drag.leave(event);\n\n  onDragOver = (event: DragEvent) => {\n    if (hasFiles(event)) event.preventDefault();\n  };\n\n  onDrop = (event: DragEvent) => {\n    this.drag.end();\n\n    if (!hasFiles(event) || event.defaultPrevented) return;\n\n    event.preventDefault();\n\n    const files = filesFrom(event.dataTransfer?.files, this.args.accept, this.args.multiple);\n\n    if (files.length > 0) this.args.onFiles(files);\n  };\n\n  <template>{{yield (hash isDragging=this.drag.isDragging)}}</template>\n}\n"],"names":["FileDrop","Component","drag","DragState","inputId","uniqueId","onDragEnter","event","enter","onDragLeave","leave","onDragOver","hasFiles","preventDefault","onDrop","end","take","dataTransfer","files","onPick","input","currentTarget","value","list","filesFrom","args","accept","multiple","length","onFiles","setComponentTemplate","precompileTemplate","strictMode","scope","on","hash","DocumentFileDrop","constructor","owner","document","addEventListener","registerDestructor","removeEventListener","defaultPrevented"],"mappings":"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"}

package/dist/index.js

@@ -6,6 +6,7 @@ export { CommandPalette } from './components/command-palette.js';
 export { Dialog, Modal } from './components/dialog.js';
 export { Drawer } from './components/drawer.js';
 export { ExternalLink } from './components/external-link.js';
+export { DocumentFileDrop, FileDrop } from './components/file-drop.js';
 export { Form } from './components/form.js';
 export { IncrementalEach } from './components/incremental-each.js';
 export { Key, KeyCombo } from './components/keys.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { CommandPalette } from './components/command-palette.gts';\nexport { Dialog, Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport {\n  Resizable,\n  Handle as ResizableHandle,\n  Panel as ResizablePanel,\n} from './components/resizable.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Slider } from './components/slider.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * DANGER: this is a *barrel file*\n *\n * It forces the whole library to be loaded and all dependencies.\n *\n * If you have a small app, you probably don't want to import from here -- instead import from each sub-path.\n */\nimport { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';\n\nif (macroCondition(isDevelopingApp())) {\n  importSync('./components/violations.css');\n}\n\nexport { Accordion } from './components/accordion.gts';\nexport type {\n  AccordionContentExternalSignature,\n  AccordionHeaderExternalSignature,\n  AccordionItemExternalSignature,\n  AccordionTriggerExternalSignature,\n} from './components/accordion/public.ts';\nexport { Avatar } from './components/avatar.gts';\nexport { Breadcrumb } from './components/breadcrumb.gts';\nexport { CommandPalette } from './components/command-palette.gts';\nexport { Dialog, Modal } from './components/dialog.gts';\nexport { Drawer } from './components/drawer.gts';\nexport { ExternalLink } from './components/external-link.gts';\nexport { DocumentFileDrop, FileDrop } from './components/file-drop.gts';\nexport { Form } from './components/form.gts';\nexport { IncrementalEach } from './components/incremental-each.gts';\nexport { Key, KeyCombo } from './components/keys.gts';\nexport { StickyFooter } from './components/layout/sticky-footer.gts';\nexport { Link } from './components/link.gts';\nexport { Menu } from './components/menu.gts';\nexport { OTP, OTPInput } from './components/one-time-password.gts';\nexport { Popover } from './components/popover.gts';\nexport { Portal } from './components/portal.gts';\nexport { PortalTargets } from './components/portal-targets.gts';\nexport { TARGETS as PORTALS } from './components/portal-targets.gts';\nexport { Progress } from './components/progress.gts';\nexport { Rating } from './components/rating.gts';\nexport {\n  Resizable,\n  Handle as ResizableHandle,\n  Panel as ResizablePanel,\n} from './components/resizable.gts';\nexport { Scroller } from './components/scroller.gts';\nexport { Separator } from './components/separator.gts';\nexport { Shadowed } from './components/shadowed.gts';\nexport { Slider } from './components/slider.gts';\nexport { Switch } from './components/switch.gts';\nexport { Toggle } from './components/toggle.gts';\nexport { ToggleGroup } from './components/toggle-group.gts';\nexport { VisuallyHidden } from './components/visually-hidden.gts';\nexport { Zoetrope } from './components/zoetrope.ts';\nexport * from './helpers.ts';\n"],"names":["macroCondition","isDevelopingApp","importSync"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAIA,cAAc,CAACC,eAAe,EAAE,CAAC,EAAE;EACrCC,UAAU,CAAC,6BAA6B,CAAC;AAC3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.63.1",
+  "version": "0.64.0",
   "description": "Making apps easier to build",
   "keywords": [
     "ember-addon"

package/src/components/file-drop/files.ts

@@ -0,0 +1,109 @@
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * One entry of an `accept` list: an extension (`.mp4`),
+ * a type with a wildcard (`video/*`), or an exact type (`video/webm`).
+ */
+function acceptsOne(file: File, entry: string): boolean {
+  if (entry.startsWith('.')) {
+    return file.name.toLowerCase().endsWith(entry.toLowerCase());
+  }
+
+  if (entry.endsWith('/*')) {
+    return file.type.startsWith(entry.slice(0, -1));
+  }
+
+  return file.type === entry;
+}
+
+/**
+ * Matches a file against an `accept` list, as `<input type="file">` reads it.
+ *
+ * The file picker filters by `accept` itself, but a drop does not,
+ * so dropped files need this check.
+ */
+export function accepts(file: File, accept: string | undefined): boolean {
+  if (!accept) return true;
+
+  const entries = accept.split(',');
+
+  for (const entry of entries) {
+    const trimmed = entry.trim();
+
+    if (trimmed && acceptsOne(file, trimmed)) return true;
+  }
+
+  return false;
+}
+
+/**
+ * A drag can carry text or a link instead of files.
+ * During the drag, only the types are readable, not the files.
+ */
+export function hasFiles(event: DragEvent): boolean {
+  const types = event.dataTransfer?.types;
+
+  if (!types) return false;
+
+  for (const type of types) {
+    if (type === 'Files') return true;
+  }
+
+  return false;
+}
+
+/**
+ * The files of a pick or a drop that match `accept`, and only the first one
+ * unless `multiple` is set.
+ */
+export function filesFrom(
+  list: FileList | null | undefined,
+  accept: string | undefined,
+  multiple: boolean | undefined
+): File[] {
+  const files: File[] = [];
+
+  if (!list) return files;
+
+  for (const file of list) {
+    if (!accepts(file, accept)) continue;
+
+    files.push(file);
+
+    if (!multiple) break;
+  }
+
+  return files;
+}
+
+/**
+ * Whether files are dragged over an element.
+ *
+ * `dragenter` and `dragleave` fire for every child that the pointer crosses,
+ * so a single flag would flicker. The depth counts the enters that did not leave yet.
+ */
+export class DragState {
+  @tracked isDragging = false;
+
+  #depth = 0;
+
+  enter(event: DragEvent): void {
+    if (!hasFiles(event)) return;
+
+    this.#depth++;
+    this.isDragging = true;
+  }
+
+  leave(event: DragEvent): void {
+    if (!hasFiles(event)) return;
+
+    this.#depth = Math.max(0, this.#depth - 1);
+
+    if (this.#depth === 0) this.isDragging = false;
+  }
+
+  end(): void {
+    this.#depth = 0;
+    this.isDragging = false;
+  }
+}

package/src/components/file-drop.gts

@@ -0,0 +1,211 @@
+import "./visually-hidden.css";
+
+import Component from "@glimmer/component";
+import { registerDestructor } from "@ember/destroyable";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+
+import { uniqueId } from "../utils.ts";
+import { DragState, filesFrom, hasFiles } from "./file-drop/files.ts";
+
+import type Owner from "@ember/owner";
+
+interface FileArgs {
+  /**
+   * Called with the files that match `@accept`.
+   * It is not called when no file matches.
+   */
+  onFiles: (files: File[]) => void;
+
+  /**
+   * Which files to take, in the format of the `accept` attribute
+   * of `<input type="file">`, for example `"video/*,.mkv"`.
+   *
+   * The file picker shows only these files.
+   * A drop of other files does nothing.
+   */
+  accept?: string;
+
+  /**
+   * Take more than one file. Without it, only the first file that matches.
+   */
+  multiple?: boolean;
+}
+
+export interface Signature {
+  /**
+   * A `<label>` for a hidden `<input type="file">`,
+   * so a click or a key press on the zone opens the file picker.
+   *
+   * It has `data-dragging` while files are dragged over it.
+   */
+  Element: HTMLLabelElement;
+  Args: FileArgs;
+  Blocks: {
+    default: [
+      {
+        /**
+         * Files are dragged over the zone.
+         */
+        isDragging: boolean;
+      },
+    ];
+  };
+}
+
+/**
+ * A zone to drop files on, or to click to pick files.
+ *
+ * ```gjs
+ * import { FileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <FileDrop @accept="video/*" @onFiles={{load}}>
+ *     Drop a video here, or click to choose one
+ *   </FileDrop>
+ * </template>
+ * ```
+ */
+export class FileDrop extends Component<Signature> {
+  drag = new DragState();
+  inputId = uniqueId();
+
+  onDragEnter = (event: DragEvent) => this.drag.enter(event);
+  onDragLeave = (event: DragEvent) => this.drag.leave(event);
+
+  /**
+   * Without this, the browser does not allow the drop.
+   */
+  onDragOver = (event: DragEvent) => {
+    if (hasFiles(event)) event.preventDefault();
+  };
+
+  /**
+   * `preventDefault` also tells a `DocumentFileDrop` that this zone took the drop.
+   */
+  onDrop = (event: DragEvent) => {
+    this.drag.end();
+
+    if (!hasFiles(event)) return;
+
+    event.preventDefault();
+    this.take(event.dataTransfer?.files);
+  };
+
+  /**
+   * The input is cleared after each pick, so that picking the same file again
+   * is a change too.
+   */
+  onPick = (event: Event) => {
+    const input = event.currentTarget as HTMLInputElement;
+
+    this.take(input.files);
+    input.value = "";
+  };
+
+  take(list: FileList | null | undefined) {
+    const files = filesFrom(list, this.args.accept, this.args.multiple);
+
+    if (files.length > 0) this.args.onFiles(files);
+  }
+
+  <template>
+    <label
+      for={{this.inputId}}
+      data-dragging={{if this.drag.isDragging ""}}
+      {{on "dragenter" this.onDragEnter}}
+      {{on "dragover" this.onDragOver}}
+      {{on "dragleave" this.onDragLeave}}
+      {{on "drop" this.onDrop}}
+      ...attributes
+    >
+      {{yield (hash isDragging=this.drag.isDragging)}}
+      <input
+        id={{this.inputId}}
+        class="ember-primitives__visually-hidden"
+        type="file"
+        accept={{@accept}}
+        multiple={{@multiple}}
+        {{on "change" this.onPick}}
+      />
+    </label>
+  </template>
+}
+
+export interface DocumentSignature {
+  Args: FileArgs;
+  Blocks: {
+    default: [
+      {
+        /**
+         * Files are dragged over the page.
+         */
+        isDragging: boolean;
+      },
+    ];
+  };
+}
+
+/**
+ * Takes files dropped anywhere on the page. It renders no element.
+ *
+ * - The block gets `isDragging`, for example to show where a drop goes.
+ * - A drop outside every `FileDrop` does not open the file in the browser tab.
+ * - A drop on a `FileDrop` goes only to that `FileDrop`.
+ *
+ * ```gjs
+ * import { DocumentFileDrop } from 'ember-primitives/components/file-drop';
+ *
+ * const load = (files) => console.log(files);
+ *
+ * <template>
+ *   <DocumentFileDrop @accept="video/*" @onFiles={{load}} as |page|>
+ *     {{#if page.isDragging}}
+ *       <div class="overlay">Drop to load</div>
+ *     {{/if}}
+ *   </DocumentFileDrop>
+ * </template>
+ * ```
+ */
+export class DocumentFileDrop extends Component<DocumentSignature> {
+  drag = new DragState();
+
+  constructor(owner: Owner, args: DocumentSignature["Args"]) {
+    super(owner, args);
+
+    document.addEventListener("dragenter", this.onDragEnter);
+    document.addEventListener("dragover", this.onDragOver);
+    document.addEventListener("dragleave", this.onDragLeave);
+    document.addEventListener("drop", this.onDrop);
+
+    registerDestructor(this, () => {
+      document.removeEventListener("dragenter", this.onDragEnter);
+      document.removeEventListener("dragover", this.onDragOver);
+      document.removeEventListener("dragleave", this.onDragLeave);
+      document.removeEventListener("drop", this.onDrop);
+    });
+  }
+
+  onDragEnter = (event: DragEvent) => this.drag.enter(event);
+  onDragLeave = (event: DragEvent) => this.drag.leave(event);
+
+  onDragOver = (event: DragEvent) => {
+    if (hasFiles(event)) event.preventDefault();
+  };
+
+  onDrop = (event: DragEvent) => {
+    this.drag.end();
+
+    if (!hasFiles(event) || event.defaultPrevented) return;
+
+    event.preventDefault();
+
+    const files = filesFrom(event.dataTransfer?.files, this.args.accept, this.args.multiple);
+
+    if (files.length > 0) this.args.onFiles(files);
+  };
+
+  <template>{{yield (hash isDragging=this.drag.isDragging)}}</template>
+}

package/src/index.ts

@@ -24,6 +24,7 @@ export { CommandPalette } from './components/command-palette.gts';
 export { Dialog, Modal } from './components/dialog.gts';
 export { Drawer } from './components/drawer.gts';
 export { ExternalLink } from './components/external-link.gts';
+export { DocumentFileDrop, FileDrop } from './components/file-drop.gts';
 export { Form } from './components/form.gts';
 export { IncrementalEach } from './components/incremental-each.gts';
 export { Key, KeyCombo } from './components/keys.gts';