js-draw 1.18.0 → 1.19.1

package/dist/cjs/testing/sendPenEvent.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Pointer_1 = __importDefault(require("../Pointer"));
+const Pointer_1 = __importStar(require("../Pointer"));
 const inputEvents_1 = require("../inputEvents");
 const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
 /**
@@ -12,9 +35,9 @@ const getUniquePointerId_1 = __importDefault(require("./getUniquePointerId"));
  *
  * @see {@link sendTouchEvent}
  */
-const sendPenEvent = (editor, eventType, point, allPointers) => {
+const sendPenEvent = (editor, eventType, point, allPointers, deviceType = Pointer_1.PointerDevice.Pen) => {
     const id = (0, getUniquePointerId_1.default)(allPointers ?? []);
-    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id);
+    const mainPointer = Pointer_1.default.ofCanvasPoint(point, eventType !== inputEvents_1.InputEvtType.PointerUpEvt, editor.viewport, id, deviceType);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers ?? [

package/dist/cjs/toolbar/localization.d.ts

@@ -17,6 +17,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     dragAndDropHereOrBrowse: string;
     cancel: string;
     submit: string;
+    addAll: string;
     roundedTipPen: string;
     roundedTipPen2: string;
     flatTipPen: string;
@@ -56,6 +57,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     describeTheImage: string;
+    fileInput__loading: string;
     penDropdown__baseHelpText: string;
     penDropdown__colorHelpText: string;
     penDropdown__thicknessHelpText: string;

package/dist/cjs/toolbar/localization.js

@@ -17,6 +17,7 @@ exports.defaultToolbarLocalization = {
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
+    addAll: 'Add all',
     cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness',
@@ -60,6 +61,7 @@ exports.defaultToolbarLocalization = {
     paste: 'Paste',
     errorImageHasZeroSize: 'Error: Image has zero size',
     describeTheImage: 'Image description',
+    fileInput__loading: 'Loading...',
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',

package/dist/cjs/toolbar/widgets/BaseWidget.d.ts

@@ -126,6 +126,7 @@ export default abstract class BaseWidget {
     setHidden(hidden: boolean): void;
     /** Set whether the widget is contained within another. @internal */
     setIsToplevel(toplevel: boolean): void;
+    /** Returns true if the menu for this widget is open. */
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -405,6 +405,7 @@ class BaseWidget {
     setIsToplevel(toplevel) {
         this.toplevel = toplevel;
     }
+    /** Returns true if the menu for this widget is open. */
     isDropdownVisible() {
         return this.dropdown?.visible?.get() ?? false;
     }

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -0,0 +1,22 @@
+import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+/** Handles filtering and other operations on an image. */
+export declare class ImageWrapper {
+    private imageBase64Url;
+    private preview;
+    private onUrlUpdate;
+    private readonly originalSrc;
+    private altText;
+    private constructor();
+    private updateImageData;
+    decreaseSize(resizeFactor?: number): void;
+    reset(): void;
+    isChanged(): boolean;
+    getBase64Url(): string;
+    getAltText(): string;
+    setAltText(text: string): void;
+    static fromSrcAndPreview(initialBase64Src: string, preview: HTMLImageElement, onUrlUpdate: () => void): ImageWrapper;
+    static fromRenderable(renderable: RenderableImage, onUrlUpdate: () => void): {
+        wrapper: ImageWrapper;
+        preview: HTMLImageElement;
+    };
+}

package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWrapper = void 0;
+/** Handles filtering and other operations on an image. */
+class ImageWrapper {
+    constructor(imageBase64Url, preview, onUrlUpdate) {
+        this.imageBase64Url = imageBase64Url;
+        this.preview = preview;
+        this.onUrlUpdate = onUrlUpdate;
+        this.originalSrc = imageBase64Url;
+        preview.src = imageBase64Url;
+    }
+    updateImageData(base64DataUrl) {
+        this.preview.src = base64DataUrl;
+        this.imageBase64Url = base64DataUrl;
+        this.onUrlUpdate();
+    }
+    decreaseSize(resizeFactor = 3 / 4) {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.preview.naturalWidth * resizeFactor;
+        canvas.height = this.preview.naturalHeight * resizeFactor;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(this.preview, 0, 0, canvas.width, canvas.height);
+        // JPEG can be much smaller than PNG for the same image size. Prefer it if
+        // the image is already a JPEG.
+        const format = this.originalSrc?.startsWith('data:image/jpeg;') ? 'image/jpeg' : 'image/png';
+        this.updateImageData(canvas.toDataURL(format));
+    }
+    reset() {
+        this.updateImageData(this.originalSrc);
+    }
+    isChanged() {
+        return this.imageBase64Url !== this.originalSrc;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    getAltText() {
+        return this.altText;
+    }
+    setAltText(text) {
+        this.altText = text;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+    static fromRenderable(renderable, onUrlUpdate) {
+        const preview = new Image();
+        preview.src = renderable.base64Url;
+        const result = new ImageWrapper(renderable.base64Url, preview, onUrlUpdate);
+        const altText = renderable.label ?? renderable.image.getAttribute('alt');
+        if (altText) {
+            result.setAltText(altText);
+        }
+        return { wrapper: result, preview };
+    }
+}
+exports.ImageWrapper = ImageWrapper;

package/dist/cjs/toolbar/widgets/InsertImageWidget/fileToImages.d.ts

@@ -0,0 +1,3 @@
+import type { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
+declare const fileToImages: (imageFile: File) => Promise<RenderableImage[]>;
+export default fileToImages;

package/dist/cjs/toolbar/widgets/InsertImageWidget/fileToImages.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fileToBase64Url_1 = __importDefault(require("../../../util/fileToBase64Url"));
+const math_1 = require("@js-draw/math");
+const fileToImages = async (imageFile) => {
+    const result = [];
+    const imageElement = new Image();
+    const base64Url = await (0, fileToBase64Url_1.default)(imageFile);
+    if (base64Url) {
+        result.push({
+            image: imageElement,
+            base64Url: base64Url,
+            transform: math_1.Mat33.identity,
+        });
+    }
+    return result;
+};
+exports.default = fileToImages;

package/dist/cjs/toolbar/widgets/InsertImageWidget/index.d.ts

@@ -0,0 +1,37 @@
+import Editor from '../../../Editor';
+import { ToolbarLocalization } from '../../localization';
+import BaseWidget from '../BaseWidget';
+/**
+ * Provides a widget that allows inserting or modifying raster images.
+ *
+ * It's possible to customize the file picker used by this widget through {@link EditorSettings.image}.
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, makeEdgeToolbar, InsertImageWidget } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ *
+ * toolbar.addWidget(new InsertImageWidget(editor));
+ * ```
+ */
+export default class InsertImageWidget extends BaseWidget {
+    private images;
+    private imagesPreview;
+    private selectedFiles;
+    private imageAltTextInput;
+    private statusView;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected setDropdownVisible(visible: boolean): void;
+    protected handleClick(): void;
+    private static nextInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private updateInputs;
+}

package/dist/cjs/toolbar/widgets/InsertImageWidget/index.js

@@ -0,0 +1,281 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ImageComponent_1 = __importDefault(require("../../../components/ImageComponent"));
+const Erase_1 = __importDefault(require("../../../commands/Erase"));
+const EditorImage_1 = __importDefault(require("../../../image/EditorImage"));
+const uniteCommands_1 = __importDefault(require("../../../commands/uniteCommands"));
+const SelectionTool_1 = __importDefault(require("../../../tools/SelectionTool/SelectionTool"));
+const math_1 = require("@js-draw/math");
+const BaseWidget_1 = __importDefault(require("../BaseWidget"));
+const types_1 = require("../../../types");
+const constants_1 = require("../../constants");
+const makeFileInput_1 = __importDefault(require("../components/makeFileInput"));
+const ReactiveValue_1 = require("../../../util/ReactiveValue");
+const bytesToSizeString_1 = __importDefault(require("../../../util/bytesToSizeString"));
+const ImageWrapper_1 = require("./ImageWrapper");
+const makeSnappedList_1 = __importDefault(require("../components/makeSnappedList"));
+const fileToImages_1 = __importDefault(require("./fileToImages"));
+/**
+ * Provides a widget that allows inserting or modifying raster images.
+ *
+ * It's possible to customize the file picker used by this widget through {@link EditorSettings.image}.
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, makeEdgeToolbar, InsertImageWidget } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ *
+ * toolbar.addWidget(new InsertImageWidget(editor));
+ * ```
+ */
+class InsertImageWidget extends BaseWidget_1.default {
+    constructor(editor, localization) {
+        localization ??= editor.localization;
+        super(editor, 'insert-image-widget', localization);
+        // Make the dropdown showable
+        this.container.classList.add('dropdownShowable');
+        editor.notifier.on(types_1.EditorEventType.SelectionUpdated, event => {
+            if (event.kind === types_1.EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
+                this.updateInputs();
+            }
+        });
+        this.images = ReactiveValue_1.MutableReactiveValue.fromInitialValue([]);
+        this.images.onUpdateAndNow(() => {
+            this.onImageDataUpdate();
+        });
+    }
+    getTitle() {
+        return this.localizationTable.image;
+    }
+    createIcon() {
+        return this.editor.icons.makeInsertImageIcon();
+    }
+    setDropdownVisible(visible) {
+        super.setDropdownVisible(visible);
+        // Update the dropdown just before showing.
+        if (this.isDropdownVisible()) {
+            this.updateInputs();
+        }
+        else {
+            // Allow any previously-selected files to be freed.
+            this.selectedFiles?.set([]);
+        }
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add('insert-image-widget-dropdown-content', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
+        const { container: chooseImageRow, selectedFiles, } = (0, makeFileInput_1.default)(this.localizationTable.chooseFile, this.editor, {
+            accepts: 'image/*',
+            allowMultiSelect: true,
+            customPickerAction: this.editor.getCurrentSettings().image?.showImagePicker,
+        });
+        const altTextRow = document.createElement('div');
+        this.imagesPreview = (0, makeSnappedList_1.default)(this.images);
+        this.statusView = document.createElement('div');
+        const actionButtonRow = document.createElement('div');
+        actionButtonRow.classList.add('action-button-row');
+        this.statusView.classList.add('insert-image-image-status-view');
+        this.submitButton = document.createElement('button');
+        this.selectedFiles = selectedFiles;
+        this.imageAltTextInput = document.createElement('input');
+        // Label the alt text input
+        const imageAltTextLabel = document.createElement('label');
+        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+        this.imageAltTextInput.setAttribute('id', altTextInputId);
+        imageAltTextLabel.htmlFor = altTextInputId;
+        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+        this.imageAltTextInput.type = 'text';
+        this.imageAltTextInput.placeholder = this.localizationTable.describeTheImage;
+        this.statusView.setAttribute('aria-live', 'polite');
+        this.submitButton.innerText = this.localizationTable.submit;
+        this.imagesPreview.visibleItem.onUpdateAndNow(() => this.onImageDataUpdate());
+        this.imageAltTextInput.oninput = () => {
+            const currentImage = this.imagesPreview.visibleItem.get();
+            if (currentImage) {
+                currentImage.setAltText(this.imageAltTextInput.value);
+                this.submitButton.style.display = '';
+            }
+        };
+        this.selectedFiles.onUpdateAndNow(async (files) => {
+            if (files.length === 0) {
+                this.images.set([]);
+                return;
+            }
+            const previews = (await Promise.all(files.map(async (imageFile) => {
+                let renderableImages;
+                try {
+                    renderableImages = await (0, fileToImages_1.default)(imageFile);
+                }
+                catch (error) {
+                    console.error('Image load error', error);
+                    const errorMessage = this.localizationTable.imageLoadError(error);
+                    this.statusView.innerText = errorMessage;
+                    return [];
+                }
+                return renderableImages.map(image => {
+                    const { wrapper, preview } = ImageWrapper_1.ImageWrapper.fromRenderable(image, () => this.onImageDataUpdate());
+                    return {
+                        data: wrapper,
+                        element: preview,
+                    };
+                });
+            }))).flat();
+            this.images.set(previews);
+        });
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagesPreview.container, this.statusView, actionButtonRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+    onImageDataUpdate() {
+        if (!this.imagesPreview)
+            return;
+        const currentImage = this.imagesPreview.visibleItem.get();
+        const base64Data = currentImage?.getBase64Url();
+        this.imageAltTextInput.value = currentImage?.getAltText() ?? '';
+        if (base64Data) {
+            this.submitButton.disabled = false;
+            this.submitButton.style.display = '';
+            this.updateImageSizeDisplay();
+        }
+        else {
+            this.submitButton.disabled = true;
+            this.submitButton.style.display = 'none';
+            this.statusView.innerText = '';
+            this.submitButton.disabled = true;
+        }
+        if (this.images.get().length <= 1) {
+            this.submitButton.innerText = this.localizationTable.submit;
+        }
+        else {
+            this.submitButton.innerText = this.localizationTable.addAll;
+        }
+    }
+    hideDialog() {
+        this.setDropdownVisible(false);
+    }
+    updateImageSizeDisplay() {
+        const currentImage = this.imagesPreview.visibleItem.get();
+        const imageData = currentImage?.getBase64Url() ?? '';
+        const { size, units } = (0, bytesToSizeString_1.default)(imageData.length);
+        const sizeText = document.createElement('span');
+        sizeText.innerText = this.localizationTable.imageSize(Math.round(size), units);
+        // Add a button to allow decreasing the size of large images.
+        const decreaseSizeButton = document.createElement('button');
+        decreaseSizeButton.innerText = this.localizationTable.decreaseImageSize;
+        decreaseSizeButton.onclick = () => {
+            currentImage?.decreaseSize();
+        };
+        const resetSizeButton = document.createElement('button');
+        resetSizeButton.innerText = this.localizationTable.resetImage;
+        resetSizeButton.onclick = () => {
+            currentImage?.reset();
+        };
+        this.statusView.replaceChildren(sizeText);
+        const largeImageThreshold = 0.12 * 1024 * 1024; // 0.12 MiB
+        if (imageData.length > largeImageThreshold) {
+            this.statusView.appendChild(decreaseSizeButton);
+        }
+        else if (currentImage?.isChanged()) {
+            this.statusView.appendChild(resetSizeButton);
+        }
+    }
+    updateInputs() {
+        const resetInputs = () => {
+            this.selectedFiles?.set([]);
+            this.imageAltTextInput.value = '';
+            this.submitButton.disabled = true;
+            this.statusView.innerText = '';
+            this.submitButton.style.display = '';
+        };
+        resetInputs();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
+        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        // Check: Is there a selected image that can be edited?
+        let editingImage = null;
+        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
+            editingImage = selectedObjects[0];
+            const image = new Image();
+            const imageWrapper = ImageWrapper_1.ImageWrapper.fromSrcAndPreview(editingImage.getURL(), image, () => this.onImageDataUpdate());
+            imageWrapper.setAltText(editingImage.getAltText() ?? '');
+            this.images.set([{ data: imageWrapper, element: image }]);
+        }
+        else if (selectedObjects.length > 0) {
+            // If not, clear the selection.
+            selectionTools.forEach(tool => tool.clearSelection());
+        }
+        // Show the submit button only when there is data to submit.
+        this.submitButton.style.display = 'none';
+        this.submitButton.onclick = async () => {
+            const newComponents = [];
+            let transform = math_1.Mat33.identity;
+            let fullBBox = null;
+            for (const { data: imageWrapper } of this.images.get()) {
+                if (!imageWrapper) {
+                    continue;
+                }
+                const image = new Image();
+                image.src = imageWrapper.getBase64Url();
+                image.setAttribute('alt', this.imageAltTextInput.value);
+                let component;
+                try {
+                    component = await ImageComponent_1.default.fromImage(image, transform);
+                }
+                catch (error) {
+                    console.error('Error loading image', error);
+                    this.statusView.innerText = this.localizationTable.imageLoadError(error);
+                    return;
+                }
+                const componentBBox = component.getBBox();
+                if (componentBBox.area === 0) {
+                    this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                    return;
+                }
+                newComponents.push(component);
+                fullBBox ??= componentBBox;
+                fullBBox.union(componentBBox);
+                // Update the transform for the next item.
+                const shift = math_1.Vec2.of(0, componentBBox.height);
+                transform = transform.rightMul(math_1.Mat33.translation(shift));
+            }
+            if (newComponents.length) {
+                if (!fullBBox) {
+                    throw new Error('Logic error: Full bounding box must be calculated when components are to be added.');
+                }
+                this.hideDialog();
+                if (editingImage) {
+                    const eraseCommand = new Erase_1.default([editingImage]);
+                    // Try to preserve the original width
+                    const originalTransform = editingImage.getTransformation();
+                    // || 1: Prevent division by zero
+                    const originalWidth = editingImage.getBBox().width || 1;
+                    const newWidth = fullBBox.transformedBoundingBox(originalTransform).width || 1;
+                    const widthAdjustTransform = math_1.Mat33.scaling2D(originalWidth / newWidth);
+                    const commands = [];
+                    for (const component of newComponents) {
+                        commands.push(EditorImage_1.default.addElement(component), component.transformBy(originalTransform.rightMul(widthAdjustTransform)), component.setZIndex(editingImage.getZIndex()));
+                    }
+                    this.editor.dispatch((0, uniteCommands_1.default)([
+                        ...commands,
+                        eraseCommand,
+                    ]));
+                    selectionTools[0]?.setSelection(newComponents);
+                }
+                else {
+                    await this.editor.addAndCenterComponents(newComponents);
+                }
+            }
+        };
+    }
+}
+InsertImageWidget.nextInputId = 0;
+exports.default = InsertImageWidget;

package/dist/cjs/toolbar/widgets/TextToolWidget.js

@@ -59,9 +59,11 @@ class TextToolWidget extends BaseToolWidget_1.default {
         colorLabel.setAttribute('for', colorInput.id);
         sizeInput.id = `${constants_1.toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
         sizeLabel.setAttribute('for', sizeInput.id);
-        addFontToInput('monospace');
-        addFontToInput('serif');
-        addFontToInput('sans-serif');
+        const defaultFonts = this.editor.getCurrentSettings().text?.fonts ?? [];
+        for (const font of defaultFonts) {
+            addFontToInput(font);
+        }
+        fontInput.classList.add('font-selector');
         fontInput.id = `${constants_1.toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
         fontLabel.setAttribute('for', fontInput.id);
         fontInput.onchange = () => {

package/dist/cjs/toolbar/widgets/TextToolWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/toolbar/widgets/components/makeFileInput.d.ts

@@ -1,9 +1,19 @@
 import { MutableReactiveValue } from '../../../util/ReactiveValue';
 import { ToolbarContext } from '../../types';
+export interface CustomFilePickerProps {
+    setOnCancelCallback(onCancel: () => void): void;
+}
+export type ShowCustomFilePickerCallback = (props: CustomFilePickerProps) => Promise<File[] | null>;
+export interface FileInputOptions {
+    readonly accepts?: string;
+    readonly allowMultiSelect?: boolean;
+    readonly customPickerAction?: ShowCustomFilePickerCallback;
+}
 /**
- * Creates a stylized file input.
+ * Creates a stylized file input. This file input can either use the system file picker, or a custom
+ * one specified by `customPickerAction`.
  */
-declare const makeFileInput: (labelText: string, context: ToolbarContext, accepts?: string) => {
+declare const makeFileInput: (labelText: string, context: ToolbarContext, { accepts, allowMultiSelect, customPickerAction }?: FileInputOptions) => {
     container: HTMLDivElement;
     input: HTMLInputElement;
     selectedFiles: MutableReactiveValue<File[]>;