@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-file-uploader/pf-file-uploader.js

@@ -0,0 +1,557 @@
+import { composeDescribedBy, fileKey, fileLimitsHint, formatFileSize, mergeFileSelection, validateFileSelection, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+import { applyControlValidity } from "../../form-validity";
+/**
+ * A form-associated file picker with a dropzone.
+ *
+ * All of the rules are core's — how a size is written, what makes two
+ * selections the same file, which files a selection leaves you with, what is
+ * wrong with the result and how the limits are described — so this and the
+ * React `FileUploader` cannot drift on any of them.
+ *
+ * It deliberately has **no Angular `ControlValueAccessor`**. The generator
+ * offers accessors that write `value`, a number or `checked`, and this
+ * control's value is a `File[]`: a text accessor would store `[object File]`.
+ * An Angular consumer binds `[files]` and `(pfChange)`, and the submission
+ * still works, because that goes through `ElementInternals` rather than
+ * through the accessor.
+ *
+ * @part field - the wrapper around label, dropzone and messages.
+ * @part label - the label element.
+ * @part dropzone - the button that opens the picker and takes the drop.
+ * @part icon - the dropzone's icon.
+ * @part list - the list of chosen files.
+ * @part file - one row of that list.
+ * @part remove - a row's remove button.
+ * @part description - the hint text.
+ * @part error - the error message.
+ */
+export class PfFileUploader {
+    internals;
+    el;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` content attribute rather than from this property.
+     */
+    name;
+    /**
+     * The files chosen. A property only — there is no attribute that could
+     * carry a `File`.
+     */
+    files = [];
+    /** The `accept` list, in the form an `<input type="file">` takes. */
+    accept;
+    multiple = true;
+    /** The most files that may be held at once. */
+    maxFiles;
+    /** The largest any one file may be, in bytes. */
+    maxFileSize;
+    label;
+    description;
+    /** Error message from the consumer. Its presence marks the control invalid. */
+    error;
+    required = false;
+    disabled = false;
+    /** Fires when the files held change, however they changed. */
+    pfChange;
+    /** Fires when a selection is refused, with the reason shown to the person. */
+    pfReject;
+    /** The uploader's own complaint about the last selection. */
+    rejection;
+    /**
+     * How deep the drag is.
+     *
+     * A counter rather than a boolean: `dragenter` and `dragleave` both bubble
+     * from the dropzone's own children, so moving the pointer from the icon to
+     * the title fires a leave and then an enter and a boolean flickers off. The
+     * React `FileUploader` has that flicker.
+     */
+    dragDepth = 0;
+    /** What a form reset restores, captured before `files` can be replaced. */
+    initialFiles = [];
+    input;
+    componentWillLoad() {
+        this.initialFiles = [...(this.files ?? [])];
+        this.syncFormState();
+    }
+    syncFormState() {
+        const held = this.files ?? [];
+        /*
+         * A `FormData` rather than a string, because one control here submits one
+         * entry per file — which is how a native multi-file input submits, and
+         * the only shape a server handling the form can use. `setFormValue`
+         * ignores the element's own `name` attribute when handed a `FormData`, so
+         * the key has to be built into it.
+         */
+        if (this.name && held.length > 0) {
+            const data = new FormData();
+            for (const file of held)
+                data.append(this.name, file);
+            this.internals.setFormValue(data);
+        }
+        else {
+            // `null`, not an empty string: a file input with nothing chosen is
+            // absent from the submission entirely.
+            this.internals.setFormValue(null);
+        }
+        applyControlValidity(this.internals, held.length > 0, this.required, this.error ?? this.rejection);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** Opens the file picker, as clicking the dropzone does. */
+    async open() {
+        if (!this.disabled)
+            this.input?.click();
+    }
+    /**
+     * A reset restores the files the control started with, not an empty list —
+     * the rule a native `<input value="initial">` follows.
+     */
+    formResetCallback() {
+        this.files = [...this.initialFiles];
+        this.rejection = undefined;
+        this.dragDepth = 0;
+    }
+    get limits() {
+        return { maxFiles: this.maxFiles, maxFileSize: this.maxFileSize, accept: this.accept };
+    }
+    addFiles(selected) {
+        if (!selected || this.disabled)
+            return;
+        const next = mergeFileSelection(this.files ?? [], Array.from(selected), {
+            multiple: this.multiple,
+        });
+        /*
+         * `accept` is checked here as well as set on the input, because the
+         * attribute filters the *picker* and nothing else: a dropped file passes
+         * no filter at all.
+         */
+        const rejection = validateFileSelection(next, this.limits);
+        /*
+         * The input is cleared whichever way this goes. A file input fires no
+         * `change` for an identical selection, so a rejected value left in place
+         * means picking the same file again does nothing and the message stands
+         * with no way to retry.
+         */
+        if (this.input)
+            this.input.value = '';
+        if (rejection) {
+            this.rejection = rejection;
+            this.pfReject.emit({ message: rejection });
+            return;
+        }
+        this.rejection = undefined;
+        this.files = next;
+        this.pfChange.emit({ files: next });
+    }
+    removeAt(index) {
+        if (this.disabled)
+            return;
+        const next = (this.files ?? []).filter((_, position) => position !== index);
+        this.rejection = undefined;
+        this.files = next;
+        this.pfChange.emit({ files: next });
+    }
+    onDragEnter = (event) => {
+        event.preventDefault();
+        if (this.disabled)
+            return;
+        this.dragDepth += 1;
+    };
+    onDragLeave = (event) => {
+        event.preventDefault();
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+    };
+    onDrop = (event) => {
+        event.preventDefault();
+        this.dragDepth = 0;
+        this.addFiles(event.dataTransfer?.files ?? null);
+    };
+    render() {
+        const held = this.files ?? [];
+        const message = this.error ?? this.rejection;
+        const hint = fileLimitsHint(this.accept, this.limits);
+        const describedBy = composeDescribedBy(this.description && 'description', message && 'error', hint && 'hint');
+        return (h(Host, { key: 'b3d295cdda9ec1becb407406f87514d1551f06d5' }, h("div", { key: 'e1617a342f4ea80e6ed55b2dca454d586c36df29', class: "field", part: "field" }, this.label && (h("label", { key: '8f625e01a182d67267d43aad08f1a3a13d5ec163', class: "label", part: "label", htmlFor: "dropzone" }, this.label, this.required && (h("span", { key: '26240be666f6ea5501b72fefdf90cf88c8536a3d', class: "required", "aria-hidden": "true" }, "*")))), h("input", { key: '2cbb754c8cefebfd7330bc41bd364c4e7a56d02f', ref: (node) => (this.input = node), id: "input", class: "input", type: "file", accept: this.accept, multiple: this.multiple, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", onChange: (event) => this.addFiles(event.target.files) }), h("button", { key: '7aeb521a180397169ed14973981d9c970d87cd5e', id: "dropzone", type: "button", class: {
+                dropzone: true,
+                'dropzone--active': this.dragDepth > 0,
+                'dropzone--invalid': Boolean(message),
+            }, part: "dropzone", disabled: this.disabled, "aria-invalid": message ? 'true' : null, "aria-describedby": describedBy, onClick: () => this.open(), onDragEnter: this.onDragEnter, onDragOver: (event) => event.preventDefault(), onDragLeave: this.onDragLeave, onDrop: this.onDrop }, h("span", { key: 'b04a52684ff15f27ceba80943d9acfc7ecaa64d4', class: "icon", part: "icon", "aria-hidden": "true" }, h("pf-icon", { key: 'cab1bd987ea9e7390b6694a31183f867e4185124', name: "file-arrow-up" })), h("span", { key: 'fbb198fd16117eef5d844f2c775ab09cc8ccd194', class: "title" }, "Upload files"), h("span", { key: '121e3bb418bca550eed7f94de79c5c01b044a6dd', class: "subtitle" }, "Drag and drop files here, or click to browse."), hint && (h("span", { key: 'd590def1f305c437444dd21caa268a93a1ab8444', class: "hint", id: "hint" }, hint))), held.length > 0 && (h("ul", { key: '3af82b2c94954b4d872b6dd5ddfaa24a1397b01c', class: "list", part: "list", "aria-label": "Selected files" }, held.map((file, index) => (h("li", { class: "file", part: "file", key: fileKey(file) }, h("span", { class: "meta" }, h("span", { class: "file-name" }, file.name), h("span", { class: "file-size" }, formatFileSize(file.size))), h("button", { type: "button", class: "remove", part: "remove", "aria-label": `Remove ${file.name}`, disabled: this.disabled, onClick: () => this.removeAt(index) }, h("pf-icon", { name: "circle-xmark", "aria-hidden": "true" }))))))), this.description && (h("p", { key: '95f9c54b3b9ad2e7e1a6e0cc7242e372b9720218', class: "description", part: "description", id: "description" }, this.description)), message && (h("p", { key: 'e5f1e9164d1e6f03a9c6412b9446f7f03262fc65', class: "error", part: "error", id: "error" }, message)))));
+    }
+    static get is() { return "pf-file-uploader"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-file-uploader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-file-uploader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submitted under this name.\n\nReflected, because a form-associated custom element takes its submission\nname from the `name` content attribute rather than from this property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "files": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The files chosen. A property only \u2014 there is no attribute that could\ncarry a `File`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `accept` list, in the form an `<input type=\"file\">` takes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "true"
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The most files that may be held at once."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-files"
+            },
+            "maxFileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The largest any one file may be, in bytes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-size"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message from the consumer. Its presence marks the control invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "rejection": {},
+            "dragDepth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the files held change, however they changed."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "pfReject",
+                "name": "pfReject",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a selection is refused, with the reason shown to the person."
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the file picker, as clicking the dropzone does.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "files",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "rejection",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-file-uploader.js.map

package/dist/collection/components/pf-file-uploader/pf-file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-file-uploader.js","sourceRoot":"","sources":["../../../src/components/pf-file-uploader/pf-file-uploader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  composeDescribedBy,\n  fileKey,\n  fileLimitsHint,\n  formatFileSize,\n  mergeFileSelection,\n  validateFileSelection,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated file picker with a dropzone.\n *\n * All of the rules are core's — how a size is written, what makes two\n * selections the same file, which files a selection leaves you with, what is\n * wrong with the result and how the limits are described — so this and the\n * React `FileUploader` cannot drift on any of them.\n *\n * It deliberately has **no Angular `ControlValueAccessor`**. The generator\n * offers accessors that write `value`, a number or `checked`, and this\n * control's value is a `File[]`: a text accessor would store `[object File]`.\n * An Angular consumer binds `[files]` and `(pfChange)`, and the submission\n * still works, because that goes through `ElementInternals` rather than\n * through the accessor.\n *\n * @part field - the wrapper around label, dropzone and messages.\n * @part label - the label element.\n * @part dropzone - the button that opens the picker and takes the drop.\n * @part icon - the dropzone's icon.\n * @part list - the list of chosen files.\n * @part file - one row of that list.\n * @part remove - a row's remove button.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-file-uploader',\n  styleUrl: 'pf-file-uploader.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfFileUploader {\n  @AttachInternals() internals!: ElementInternals;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` content attribute rather than from this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The files chosen. A property only — there is no attribute that could\n   * carry a `File`.\n   */\n  @Prop({ mutable: true }) files: File[] = [];\n\n  /** The `accept` list, in the form an `<input type=\"file\">` takes. */\n  @Prop() accept?: string;\n\n  @Prop({ reflect: true }) multiple = true;\n\n  /** The most files that may be held at once. */\n  @Prop() maxFiles?: number;\n\n  /** The largest any one file may be, in bytes. */\n  @Prop() maxFileSize?: number;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message from the consumer. Its presence marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the files held change, however they changed. */\n  @Event() pfChange!: EventEmitter<{ files: File[] }>;\n\n  /** Fires when a selection is refused, with the reason shown to the person. */\n  @Event() pfReject!: EventEmitter<{ message: string }>;\n\n  /** The uploader's own complaint about the last selection. */\n  @State() rejection?: string;\n\n  /**\n   * How deep the drag is.\n   *\n   * A counter rather than a boolean: `dragenter` and `dragleave` both bubble\n   * from the dropzone's own children, so moving the pointer from the icon to\n   * the title fires a leave and then an enter and a boolean flickers off. The\n   * React `FileUploader` has that flicker.\n   */\n  @State() dragDepth = 0;\n\n  /** What a form reset restores, captured before `files` can be replaced. */\n  private initialFiles: File[] = [];\n\n  private input?: HTMLInputElement;\n\n  componentWillLoad() {\n    this.initialFiles = [...(this.files ?? [])];\n    this.syncFormState();\n  }\n\n  @Watch('files')\n  @Watch('error')\n  @Watch('required')\n  // The uploader's own complaint is a real constraint failure, not only a\n  // message, so the validity has to follow it as well as the consumer's.\n  @Watch('rejection')\n  syncFormState() {\n    const held = this.files ?? [];\n\n    /*\n     * A `FormData` rather than a string, because one control here submits one\n     * entry per file — which is how a native multi-file input submits, and\n     * the only shape a server handling the form can use. `setFormValue`\n     * ignores the element's own `name` attribute when handed a `FormData`, so\n     * the key has to be built into it.\n     */\n    if (this.name && held.length > 0) {\n      const data = new FormData();\n      for (const file of held) data.append(this.name, file);\n      this.internals.setFormValue(data);\n    } else {\n      // `null`, not an empty string: a file input with nothing chosen is\n      // absent from the submission entirely.\n      this.internals.setFormValue(null);\n    }\n\n    applyControlValidity(\n      this.internals,\n      held.length > 0,\n      this.required,\n      this.error ?? this.rejection,\n    );\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** Opens the file picker, as clicking the dropzone does. */\n  @Method()\n  async open() {\n    if (!this.disabled) this.input?.click();\n  }\n\n  /**\n   * A reset restores the files the control started with, not an empty list —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.files = [...this.initialFiles];\n    this.rejection = undefined;\n    this.dragDepth = 0;\n  }\n\n  private get limits() {\n    return { maxFiles: this.maxFiles, maxFileSize: this.maxFileSize, accept: this.accept };\n  }\n\n  private addFiles(selected: FileList | null) {\n    if (!selected || this.disabled) return;\n\n    const next = mergeFileSelection(this.files ?? [], Array.from(selected), {\n      multiple: this.multiple,\n    });\n\n    /*\n     * `accept` is checked here as well as set on the input, because the\n     * attribute filters the *picker* and nothing else: a dropped file passes\n     * no filter at all.\n     */\n    const rejection = validateFileSelection(next, this.limits);\n\n    /*\n     * The input is cleared whichever way this goes. A file input fires no\n     * `change` for an identical selection, so a rejected value left in place\n     * means picking the same file again does nothing and the message stands\n     * with no way to retry.\n     */\n    if (this.input) this.input.value = '';\n\n    if (rejection) {\n      this.rejection = rejection;\n      this.pfReject.emit({ message: rejection });\n      return;\n    }\n\n    this.rejection = undefined;\n    this.files = next;\n    this.pfChange.emit({ files: next });\n  }\n\n  private removeAt(index: number) {\n    if (this.disabled) return;\n    const next = (this.files ?? []).filter((_, position) => position !== index);\n    this.rejection = undefined;\n    this.files = next;\n    this.pfChange.emit({ files: next });\n  }\n\n  private onDragEnter = (event: DragEvent) => {\n    event.preventDefault();\n    if (this.disabled) return;\n    this.dragDepth += 1;\n  };\n\n  private onDragLeave = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragDepth = Math.max(0, this.dragDepth - 1);\n  };\n\n  private onDrop = (event: DragEvent) => {\n    event.preventDefault();\n    this.dragDepth = 0;\n    this.addFiles(event.dataTransfer?.files ?? null);\n  };\n\n  render() {\n    const held = this.files ?? [];\n    const message = this.error ?? this.rejection;\n    const hint = fileLimitsHint(this.accept, this.limits);\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      message && 'error',\n      hint && 'hint',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"dropzone\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          {/*\n            The input is in this shadow root, so it reaches no surrounding\n            form of its own — and is given no `name` for that reason. The\n            submission comes from `setFormValue` above.\n          */}\n          <input\n            ref={(node) => (this.input = node)}\n            id=\"input\"\n            class=\"input\"\n            type=\"file\"\n            accept={this.accept}\n            multiple={this.multiple}\n            disabled={this.disabled}\n            tabindex={-1}\n            aria-hidden=\"true\"\n            onChange={(event) => this.addFiles((event.target as HTMLInputElement).files)}\n          />\n\n          <button\n            id=\"dropzone\"\n            type=\"button\"\n            class={{\n              dropzone: true,\n              'dropzone--active': this.dragDepth > 0,\n              'dropzone--invalid': Boolean(message),\n            }}\n            part=\"dropzone\"\n            disabled={this.disabled}\n            aria-invalid={message ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => this.open()}\n            onDragEnter={this.onDragEnter}\n            onDragOver={(event: DragEvent) => event.preventDefault()}\n            onDragLeave={this.onDragLeave}\n            onDrop={this.onDrop}\n          >\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"file-arrow-up\"></pf-icon>\n            </span>\n            <span class=\"title\">Upload files</span>\n            <span class=\"subtitle\">Drag and drop files here, or click to browse.</span>\n            {hint && (\n              <span class=\"hint\" id=\"hint\">\n                {hint}\n              </span>\n            )}\n          </button>\n\n          {held.length > 0 && (\n            <ul class=\"list\" part=\"list\" aria-label=\"Selected files\">\n              {held.map((file, index) => (\n                <li class=\"file\" part=\"file\" key={fileKey(file)}>\n                  <span class=\"meta\">\n                    <span class=\"file-name\">{file.name}</span>\n                    <span class=\"file-size\">{formatFileSize(file.size)}</span>\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"remove\"\n                    part=\"remove\"\n                    aria-label={`Remove ${file.name}`}\n                    disabled={this.disabled}\n                    onClick={() => this.removeAt(index)}\n                  >\n                    <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n                  </button>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {message && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {message}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}