diff --git a/types/heic-convert/browser.d.ts b/types/heic-convert/browser.d.ts index 616be7939773fa..5eb81490f24a02 100644 --- a/types/heic-convert/browser.d.ts +++ b/types/heic-convert/browser.d.ts @@ -2,7 +2,7 @@ interface ConversionOptions { /** * the HEIC file buffer */ - buffer: ArrayBufferLike; + buffer: Uint8Array; /** * output format */ @@ -15,11 +15,11 @@ interface ConversionOptions { } interface Convertible { - convert(): Promise; + convert(): Promise; } /** @async */ -declare function convert(image: ConversionOptions): Promise; +declare function convert(image: ConversionOptions): Promise; declare namespace convert { /** @async */ function all(image: ConversionOptions): Promise; diff --git a/types/heic-convert/heic-convert-tests.mts b/types/heic-convert/heic-convert-tests.mts index 0f735f35079c36..15cb1a584d52d5 100644 --- a/types/heic-convert/heic-convert-tests.mts +++ b/types/heic-convert/heic-convert-tests.mts @@ -1,22 +1,22 @@ import convert from "heic-convert"; import convertBrowser from "heic-convert/browser"; -// $ExpectType Promise -convert({ buffer: new ArrayBuffer(10), format: "PNG" }); -// $ExpectType Promise -convertBrowser({ buffer: new ArrayBuffer(10), format: "PNG" }); +// $ExpectType Promise || Promise> +convert({ buffer: new Uint8Array(10), format: "PNG" }); +// $ExpectType Promise || Promise> +convertBrowser({ buffer: new Uint8Array(10), format: "PNG" }); -// $ExpectType Promise -convert({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); -// $ExpectType Promise -convertBrowser({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +// $ExpectType Promise || Promise> +convert({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); +// $ExpectType Promise || Promise> +convertBrowser({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); // $ExpectType Promise -convert.all({ buffer: new ArrayBuffer(10), format: "PNG" }); +convert.all({ buffer: new Uint8Array(10), format: "PNG" }); // $ExpectType Promise -convertBrowser.all({ buffer: new ArrayBuffer(10), format: "PNG" }); +convertBrowser.all({ buffer: new Uint8Array(10), format: "PNG" }); // $ExpectType Promise -convert.all({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +convert.all({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); // $ExpectType Promise -convertBrowser.all({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +convertBrowser.all({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); diff --git a/types/heic-convert/heic-convert-tests.ts b/types/heic-convert/heic-convert-tests.ts index 56ddf5408ff773..38d2037b6888f8 100644 --- a/types/heic-convert/heic-convert-tests.ts +++ b/types/heic-convert/heic-convert-tests.ts @@ -1,22 +1,22 @@ import convert = require("heic-convert"); import convertBrowser = require("heic-convert/browser"); -// $ExpectType Promise -convert({ buffer: new ArrayBuffer(10), format: "PNG" }); -// $ExpectType Promise -convertBrowser({ buffer: new ArrayBuffer(10), format: "PNG" }); +// $ExpectType Promise || Promise> +convert({ buffer: new Uint8Array(10), format: "PNG" }); +// $ExpectType Promise || Promise> +convertBrowser({ buffer: new Uint8Array(10), format: "PNG" }); -// $ExpectType Promise -convert({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); -// $ExpectType Promise -convertBrowser({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +// $ExpectType Promise || Promise> +convert({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); +// $ExpectType Promise || Promise> +convertBrowser({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); // $ExpectType Promise -convert.all({ buffer: new ArrayBuffer(10), format: "PNG" }); +convert.all({ buffer: new Uint8Array(10), format: "PNG" }); // $ExpectType Promise -convertBrowser.all({ buffer: new ArrayBuffer(10), format: "PNG" }); +convertBrowser.all({ buffer: new Uint8Array(10), format: "PNG" }); // $ExpectType Promise -convert.all({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +convert.all({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); // $ExpectType Promise -convertBrowser.all({ buffer: new ArrayBuffer(10), format: "JPEG", quality: 0.4 }); +convertBrowser.all({ buffer: new Uint8Array(10), format: "JPEG", quality: 0.4 }); diff --git a/types/heic-convert/index.d.ts b/types/heic-convert/index.d.ts index 616be7939773fa..5eb81490f24a02 100644 --- a/types/heic-convert/index.d.ts +++ b/types/heic-convert/index.d.ts @@ -2,7 +2,7 @@ interface ConversionOptions { /** * the HEIC file buffer */ - buffer: ArrayBufferLike; + buffer: Uint8Array; /** * output format */ @@ -15,11 +15,11 @@ interface ConversionOptions { } interface Convertible { - convert(): Promise; + convert(): Promise; } /** @async */ -declare function convert(image: ConversionOptions): Promise; +declare function convert(image: ConversionOptions): Promise; declare namespace convert { /** @async */ function all(image: ConversionOptions): Promise; diff --git a/types/tabulator-tables/index.d.ts b/types/tabulator-tables/index.d.ts index 8d7e9e79f613a4..8a39ef9e74598b 100755 --- a/types/tabulator-tables/index.d.ts +++ b/types/tabulator-tables/index.d.ts @@ -976,6 +976,13 @@ export interface SpreadsheetComponent { export type RenderMode = "virtual" | "basic" | Renderer; +/** + * You can define a function that is called when the popup is rendered that should return either an HTML string or the contents of the element. + * This function is passed the mouse/touch event as its first argument and the component of the element that triggered the popup as the second argument. + * The `onRendered` callback function passed into the third argument allows you to register a callback that will be triggered when the popup has been added to the dom but before its position is confirmed. This can be useful when you are trying to use a 3rd party library that needs the element to be visible before it can be instantiated. To use this function you need to pass a callback that runs any of your required code as the only argument. + */ +export type PopupFunction = (e: MouseEvent, component: T, onRendered: () => EmptyCallback) => string | HTMLElement; + export interface OptionsMenu { rowContextMenu?: RowContextMenuSignature | undefined; rowClickMenu?: RowContextMenuSignature | undefined; @@ -983,14 +990,20 @@ export interface OptionsMenu { groupClickMenu?: GroupContextMenuSignature | undefined; groupDblClickMenu?: GroupContextMenuSignature | undefined; groupContextMenu?: Array> | undefined; + /** By default Tabulator will append the menu element to the body element of the DOM as this allows the menu to appear correctly in the vast majority of situations. There are some circumstances where you may want the menu to be appended to a different element, such as the body of a modal, so that the menu is contained with that element. In these circumstances you can use the popupContainer option to specify the element that the menu should be appended to. */ popupContainer?: boolean | string | HTMLElement; - groupClickPopup?: string; - groupContextPopup?: string; - groupDblPopup?: string; - groupDblClickPopup?: string; - rowClickPopup?: string; - rowContextPopup?: string; - rowDblClickPopup?: string; + /** You can add a click popup to any group header by passing the popup contents to the `groupClickPopup` option in the table constructor object. */ + groupClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a right click popup to any group header by passing the popup contents to the `groupContextPopup` option in the table constructor object. */ + groupContextPopup?: string | HTMLElement | PopupFunction; + /** You can add a double click popup to any group header by passing the popup contents to the groupDblClickPopup option in the table constructor object. */ + groupDblClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a click popup to any row by passing the popup contents to the `rowClickPopup` option in the table constructor object. */ + rowClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a right click popup to any row by passing the popup contents to the `rowContextPopup` option in the table constructor object. */ + rowContextPopup?: string | HTMLElement | PopupFunction; + /** You can add a double click popup to any row by passing the popup contents to the `rowDblClickPopup` option in the table constructor object. */ + rowDblClickPopup?: string | HTMLElement | PopupFunction; } export type RowContextMenuSignature = @@ -1471,8 +1484,6 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks { /** You can add a right click context menu to any column by passing an array of menu items to the headerContextMenu option in that columns definition. */ headerContextMenu?: Array | MenuSeparator> | undefined; - headerDblClickPopup?: string; - dblClickPopup?: string; /** You can add a right click context menu to any columns cells by passing an array of menu items to the contextMenu option in that columns definition. */ contextMenu?: Array | MenuSeparator> | undefined; @@ -1481,9 +1492,22 @@ export interface ColumnDefinition extends ColumnLayout, CellCallbacks { dblClickMenu?: Array | MenuSeparator> | undefined; /** Popups work in a similar way to menus, but instead of only displaying lists of menu items they allow you to fill them with any custom content you like, text, input elements, forms, anything you fancy. */ - cellPopup?: - | string - | ((e: MouseEvent, component: RowComponent | CellComponent | ColumnComponent, onRendered: () => any) => any); + clickPopup?: string | HTMLElement | PopupFunction; + /** You can add a double click popup to any cell by passing the popup contents to the `dblClickPopup` option in that columns definition. */ + dblClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a right click popup to any cell by passing the popup contents to the `contextPopup` option in that columns definition. */ + contextPopup?: string | HTMLElement | PopupFunction; + + /** You can add a popup to any column by passing the popup contents to the headerPopup option in that columns definition. Adding a header popup will cause a ⋮ button to appear to the left of the column header title. clicking on this button will open the popup. */ + headerPopup?: string | HTMLElement | PopupFunction; + /** When you insert a header popup, Tabulator will add a button to the header element with an ⋮ icon. You can change the contents of this button using `headerPopupIcon` column definition option. */ + headerPopupIcon?: string | HTMLElement | ((column: ColumnComponent) => string | HTMLElement); + /** You can add a left click popup to any column by passing the popup contents to the `headerClickPopup` option in that columns definition. */ + headerClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a double left click popup to any column by passing the popup contents to the `headerDblClickPopup` option in that columns definition. */ + headerDblClickPopup?: string | HTMLElement | PopupFunction; + /** You can add a right click popup to any column by passing the popup contents to the `headerContextPopup` option in that columns definition. */ + headerContextPopup?: string | HTMLElement | PopupFunction; /** When copying to the clipboard you may want to apply a different formatter from the one usually used to format the cell, you can do this using the formatterClipboard column definition option. You can use the formatterClipboardParams to pass in any additional params to the formatter. */ formatterClipboard?: Formatter | false | undefined; diff --git a/types/tabulator-tables/tabulator-tables-tests.ts b/types/tabulator-tables/tabulator-tables-tests.ts index 7f260591ac835e..e142073ecccdd5 100644 --- a/types/tabulator-tables/tabulator-tables-tests.ts +++ b/types/tabulator-tables/tabulator-tables-tests.ts @@ -1169,12 +1169,24 @@ table.import("json", ".json"); // 5.2 table = new Tabulator("#test", { popupContainer: true, + rowClickPopup: "I'm a row Popup", + rowContextPopup: "I'm a row right-click Popup", + groupClickPopup: "Im a group Popup", + groupContextPopup: "Im a group right-click Popup", // test editor of type 'list' supported. columns: [ { field: "test_editor", title: "Test Editor", editor: "list", + clickPopup: "Hey, Im a Popup!", + }, + { + field: "test_popup", + title: "Test Popup", + contextPopup: (event, cell, onRendered) => { + return String(cell.getValue()); + }, }, ], });