@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/components/colorbox/ColorBox.d.ts

@@ -0,0 +1,55 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Field } from '../../parts/field/Field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ValidationRule } from '../../parts/validation/validation-rule';
+import { ColorPicker } from '../colorpicker/ColorPicker';
+import type { ColorBoxApply } from './color-box-apply';
+import type { ColorBoxProps } from './color-box-props';
+/**
+ * A colour as a field: its hex written in the box, a swatch of it at the start, and a picker in a popup (the area,
+ * the strips, the inputs and the presets of `ColorPicker`). With `apply: 'useButtons'` the popup has OK and Cancel.
+ * Alt+Down opens it.
+ *
+ * @example
+ * <ColorBox label="&Accent" x-model={() => this.theme.accent} palette={['#3b5bdb', '#2b8a3e', '#e03131']} />
+ * <ColorBox label="Overlay" alpha apply="useButtons" value="#00000080" />
+ */
+export declare class ColorBox extends Field<string | null, ColorBoxProps> {
+    constructor(props?: IBaseProp<ColorBoxProps>);
+    get alpha(): boolean;
+    set alpha(value: Bind<boolean>);
+    get palette(): readonly string[] | null;
+    set palette(value: Bind<readonly string[] | null>);
+    get apply(): ColorBoxApply;
+    set apply(value: Bind<ColorBoxApply>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get inputElement(): HTMLInputElement;
+    /** The picker in the popup, once it was opened. */
+    get picker(): ColorPicker | null;
+    get opened(): boolean;
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the picker; `false` when it cannot be used now. */
+    open(): boolean;
+    close(): void;
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): string | null;
+    /** Any colour form it reads is kept as `#rrggbb` (or `#rrggbbaa` with `alpha`). */
+    protected normalizeValue(value: string | null): string | null;
+    protected renderValue(value: string | null): void;
+    protected builtInRules(): ValidationRule<string | null>[];
+    protected isEmptyValue(value: string | null): boolean;
+    private get colorParts();
+    /** What is typed becomes the value when it is a colour; empty text empties it. */
+    private typed;
+    private cleared;
+    private createPopup;
+    /** OK: the colour in the picker becomes the value. */
+    private applyChosen;
+    /** The picker shows the value, the opacity strip and the presets. */
+    private syncPicker;
+}

package/dist/components/colorbox/color-box-apply.d.ts

@@ -0,0 +1,2 @@
+/** When a colour chosen in the popup becomes the value: as it is moved, or on OK. */
+export type ColorBoxApply = 'instantly' | 'useButtons';

package/dist/components/colorbox/color-box-props.d.ts

@@ -0,0 +1,15 @@
+import type { Bind } from '@motifx/core';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { ColorBoxApply } from './color-box-apply';
+/** Props of `ColorBox`: a field (label, help text, rules, `x-model`) plus its own. Each one is also a settable, reactive property. */
+export interface ColorBoxProps extends FieldProps<string | null> {
+    /** An opacity strip and input; the value keeps its opacity (`#rrggbbaa`). Default `false`. */
+    alpha?: Bind<boolean>;
+    /** Preset colours in the popup. Default: none. */
+    palette?: Bind<readonly string[] | null>;
+    /** `instantly`: the value follows every move in the popup; `useButtons`: it changes on OK, Cancel leaves it. Default `'instantly'`. */
+    apply?: Bind<ColorBoxApply>;
+    /** A button that empties it. Default `false`. */
+    clearButton?: Bind<boolean>;
+    placeholder?: Bind<string>;
+}

package/dist/components/colorbox/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorBox } from './ColorBox';
+export type { ColorBoxApply } from './color-box-apply';
+export type { ColorBoxProps } from './color-box-props';

package/dist/components/colorpicker/ColorPicker.d.ts

@@ -0,0 +1,66 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { ColorChangedEventArgs } from './color-changed-event-args';
+import type { ColorPickerProps } from './color-picker-props';
+/**
+ * Choosing a colour: an area of saturation and brightness, a hue strip and an opacity strip (`alpha`), the hex and
+ * red, green, blue inputs, preset colours (`palette`) and, where the browser can, a colour picked from the screen.
+ * The value follows every move. Keyboard: on a handle the arrow keys move it by 1 (by 10 with Shift), Home and End
+ * go to the ends.
+ *
+ * @example
+ * <ColorPicker x-model={() => this.theme.accent} palette={['#3b5bdb', '#2b8a3e', '#e03131']} />
+ */
+export declare class ColorPicker extends Control<HTMLDivElement, ColorPickerProps> {
+    private readonly changed;
+    /** The colour as the handles hold it: the hue stays when the colour turns grey. */
+    private hsva;
+    private readonly area;
+    private readonly hue;
+    private readonly alphaTrack;
+    private readonly preview;
+    private readonly inputs;
+    private readonly hex;
+    private readonly channels;
+    private readonly opacity;
+    private readonly swatches;
+    private readonly picker;
+    private byUser;
+    private ready;
+    constructor(props?: IBaseProp<ColorPickerProps>);
+    get value(): string | null;
+    set value(value: Bind<string | null>);
+    get alpha(): boolean;
+    set alpha(value: Bind<boolean>);
+    get palette(): readonly string[] | null;
+    set palette(value: Bind<readonly string[] | null>);
+    get showInputs(): boolean;
+    set showInputs(value: Bind<boolean>);
+    get eyeDropper(): boolean;
+    set eyeDropper(value: Bind<boolean>);
+    /** The colour changed, by the user or by code (`e.byUser`). */
+    get onValueChanged(): MotifEvent<ColorChangedEventArgs>;
+    /** Focuses the area's handle. */
+    focus(): boolean;
+    /** An area or a strip with its handle: pressed or dragged, the position sets the colour; the handle takes the keys. */
+    private track;
+    private keyDown;
+    private pickFromScreen;
+    private typedHex;
+    private typedChannel;
+    private typedAlpha;
+    /** A grey has no hue of its own: the one the handle had stays. */
+    private keepHue;
+    /** The user moved a handle or typed: the value follows. */
+    private moved;
+    /** A value given from outside: the handles move to it, keeping the hue of a grey. */
+    private taken;
+    private renderColor;
+    private place;
+    private renderInputs;
+    /** Names the handles and inputs, and says where each handle stands. */
+    private renderNames;
+    private renderParts;
+    private renderSwatches;
+    private renderSwatchState;
+}

package/dist/components/colorpicker/color-changed-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentBase } from '@motifx/core';
+export interface ColorChangedEventArgs {
+    /** `#rrggbb` (or `#rrggbbaa`), or `null`. */
+    value: string | null;
+    /** `true` when the user moved, typed or chose it, `false` when code set it. */
+    byUser: boolean;
+    source: ComponentBase;
+}

package/dist/components/colorpicker/color-picker-props.d.ts

@@ -0,0 +1,17 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { ColorChangedEventArgs } from './color-changed-event-args';
+/** Props of `ColorPicker`. Each one is also a settable property; a function is followed. */
+export interface ColorPickerProps extends ControlProps {
+    /** The colour: `#rrggbb` (`#rrggbbaa` with `alpha`), or any `#…` / `rgb(…)` form it reads; `null`: none. Two-way with `x-model`. */
+    value?: Bind<string | null>;
+    /** An opacity strip and input; the value keeps its opacity. Default `false`. */
+    alpha?: Bind<boolean>;
+    /** Preset colours to choose with one press. Default: none. */
+    palette?: Bind<readonly string[] | null>;
+    /** The hex and red, green, blue inputs. Default `true`. */
+    showInputs?: Bind<boolean>;
+    /** A button that picks a colour from the screen, where the browser can. Default `true`. */
+    eyeDropper?: Bind<boolean>;
+    onValueChanged?: (e: ColorChangedEventArgs) => void;
+}

package/dist/components/colorpicker/index.d.ts

@@ -0,0 +1,4 @@
+export { ColorPicker } from './ColorPicker';
+export type { ColorChangedEventArgs } from './color-changed-event-args';
+export type { ColorPickerProps } from './color-picker-props';
+export { formatColor, parseColor } from '../../parts/color/colors';

package/dist/components/combobox/Autocomplete.d.ts

@@ -0,0 +1,17 @@
+import type { IBaseProp } from '@motifx/core';
+import { ComboBox } from './ComboBox';
+import type { ComboBoxProps } from './combo-box-props';
+/**
+ * A text field that suggests items while typing; the value is the text itself, picked from the list
+ * or typed freely.
+ *
+ * @example
+ * <Autocomplete label="Search" items={recentSearches} x-model={() => this.query} />
+ */
+export declare class Autocomplete<T = unknown> extends ComboBox<T, string> {
+    constructor(props?: IBaseProp<ComboBoxProps<T, string>>);
+    protected emptyValue(): string;
+    protected itemValue(item: T): unknown;
+    protected customValue(text: string): string;
+    protected textOfValue(value: string | null): string;
+}

package/dist/components/combobox/ComboBox.d.ts

@@ -0,0 +1,103 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import { DataItems } from '../../parts/data/DataItems';
+import { Field } from '../../parts/field/Field';
+import type { ItemField } from '../../parts/list/item-field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ComboBoxProps } from './combo-box-props';
+type Template<T> = ((item: T, host: HTMLElement) => (() => void) | void) | null;
+/**
+ * A text field with a list that follows what is typed (the APG combobox with list autocomplete).
+ * The list comes from items in memory or from a `DataSource` of the data layer, searched on the
+ * server. Text that matches no item goes back to the chosen one, or becomes the value with
+ * `acceptCustomValue`.
+ *
+ * @example
+ * <ComboBox label="&City" items={cities} x-model={() => this.form.city} />
+ * <ComboBox label="Customer" dataSource={this.customers} textField="CompanyName" valueField="CustomerID" />
+ */
+export declare class ComboBox<T = unknown, V = unknown> extends Field<V | null, ComboBoxProps<T, V>> {
+    constructor(props?: IBaseProp<ComboBoxProps<T, V>>);
+    get items(): readonly T[];
+    set items(value: Bind<readonly T[]>);
+    get dataSource(): data.DataSource<T, unknown> | null;
+    set dataSource(value: Bind<data.DataSource<T, unknown> | null>);
+    get textField(): ItemField<T> | undefined;
+    set textField(value: Bind<ItemField<T>>);
+    get valueField(): ItemField<T> | undefined;
+    set valueField(value: Bind<ItemField<T>>);
+    get iconField(): ItemField<T> | undefined;
+    set iconField(value: Bind<ItemField<T>>);
+    get groupField(): ItemField<T> | undefined;
+    set groupField(value: Bind<ItemField<T>>);
+    get enabledField(): ItemField<T> | undefined;
+    set enabledField(value: Bind<ItemField<T>>);
+    get itemTemplate(): Template<T>;
+    set itemTemplate(value: Bind<Template<T>>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get searchMode(): 'contains' | 'startswith';
+    set searchMode(value: Bind<'contains' | 'startswith'>);
+    get minSearchLength(): number;
+    set minSearchLength(value: Bind<number>);
+    get searchDelay(): number;
+    set searchDelay(value: Bind<number>);
+    get acceptCustomValue(): boolean;
+    set acceptCustomValue(value: Bind<boolean>);
+    get autoHighlight(): boolean;
+    set autoHighlight(value: Bind<boolean>);
+    get showDropDownButton(): boolean;
+    set showDropDownButton(value: Bind<boolean>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get matchWidth(): boolean;
+    set matchWidth(value: Bind<boolean>);
+    get inputElement(): HTMLInputElement;
+    /** The item of the value, when it is known. */
+    get selectedItem(): T | undefined;
+    /** The items the list shows: what matched the last search. */
+    get listItems(): DataItems<T>;
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the list; `false` when it cannot be used now. */
+    open(): boolean;
+    close(): void;
+    /** Empties the value and the text. */
+    clear(): void;
+    /**
+     * Reads the items again after they were changed in place: the open list and the text of the value. Your items
+     * may be plain or reactive; the box reads them as they are.
+     */
+    refresh(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): V | null;
+    protected renderValue(value: V | null): void;
+    /** The text shown for a value that has no item. */
+    protected textOfValue(value: V | null): string;
+    protected itemText(item: T): string;
+    protected itemValue(item: T): unknown;
+    /** The value of text that matches no item, with `acceptCustomValue`. */
+    protected customValue(text: string): V | null;
+    private get comboParts();
+    private showText;
+    private renderSource;
+    private listen;
+    private typed;
+    /** The user is done with the text: an item that has it, a custom value, or back to the chosen item. */
+    private finish;
+    private canChoose;
+    private choose;
+    private keyDown;
+    /** Opens with every item, as the arrow does. */
+    private openAll;
+    private itemsChanged;
+    private highlight;
+    private pointAt;
+    private drawList;
+    private createPopup;
+    private renderArrow;
+    private renderClear;
+}
+export {};

package/dist/components/combobox/combo-box-props.d.ts

@@ -0,0 +1,37 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { ItemField } from '../../parts/list/item-field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+/** Props of `ComboBox`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface ComboBoxProps<T, V> extends FieldProps<V | null> {
+    /** Items in memory; searched here. */
+    items?: Bind<readonly T[]>;
+    /** Items from the data layer; the search goes to it (`searchFields`). Wins over `items`. */
+    dataSource?: Bind<data.DataSource<T, unknown> | null>;
+    textField?: Bind<ItemField<T>>;
+    valueField?: Bind<ItemField<T>>;
+    iconField?: Bind<ItemField<T>>;
+    /** Items in memory only. */
+    groupField?: Bind<ItemField<T>>;
+    enabledField?: Bind<ItemField<T>>;
+    placeholder?: Bind<string>;
+    /** Default `'contains'` (items in memory; a data source uses its own `searchOperator`). */
+    searchMode?: Bind<'contains' | 'startswith'>;
+    /** Characters to type before the list opens. Default `0`. */
+    minSearchLength?: Bind<number>;
+    /** Milliseconds between the last key and the search. Default `0` in memory, `250` with a data source. */
+    searchDelay?: Bind<number>;
+    /** Text that matches no item becomes the value. Default `false`: it goes back to the chosen item. */
+    acceptCustomValue?: Bind<boolean>;
+    /** The first match is highlighted while typing, so Enter takes it. Default `true`. */
+    autoHighlight?: Bind<boolean>;
+    /** The arrow that opens the whole list. Default `true`. */
+    showDropDownButton?: Bind<boolean>;
+    clearButton?: Bind<boolean>;
+    itemTemplate?: Bind<((item: T, host: HTMLElement) => (() => void) | void) | null>;
+    /** Default `true`. */
+    matchWidth?: Bind<boolean>;
+    onOpened?: () => void;
+    onClosed?: (reason: PopupCloseReason) => void;
+}

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { ComboBox } from './ComboBox';
+export { Autocomplete } from './Autocomplete';
+export type { ComboBoxProps } from './combo-box-props';

package/dist/components/contextmenu/ContextMenu.d.ts

@@ -0,0 +1,96 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { Control } from '../../core/control';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import { ActionSheet } from '../actionsheet/ActionSheet';
+import type { ContextMenuOpeningEventArgs } from './context-menu-opening-event-args';
+import type { ContextMenuPresentation } from './context-menu-presentation';
+import type { ContextMenuProps } from './context-menu-props';
+import type { ContextMenuTarget } from './context-menu-target';
+/**
+ * A menu that opens on an element's right-click (or long press), at the pointer, and from the
+ * keyboard with the Menu key or Shift+F10, at the focused element. `onOpening` builds the items
+ * for the element it opened on (a row of a list) or cancels. It closes on Escape, a press outside
+ * it and focus leaving it; when the page scrolls it goes along with the element it opened on, and
+ * closes once that element is out of sight. The items are `MenuItem`s: submenus, check and radio
+ * items, shortcuts. Opened on an element in another document (a window the app opened), the menu
+ * goes there.
+ *
+ * @example
+ * <ContextMenu target={() => this.list} items={[{ text: '&Copy', click: () => this.copy() }]} />
+ *
+ * const menu = new ContextMenu({ target: this.grid, items: this.rowItems });
+ * menu.onOpening((e) => (e.items = this.itemsFor(e.target)));
+ */
+export declare class ContextMenu extends Control<HTMLDivElement, ContextMenuProps> {
+    constructor(props?: IBaseProp<ContextMenuProps>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get items(): readonly MenuItem[];
+    set items(value: Bind<readonly MenuItem[]>);
+    /** The element the menu listens on. Reactive. Set it with an element, a component or a function of one. */
+    get target(): Element | null;
+    set target(value: Bind<ContextMenuTarget | null | undefined>);
+    get keyboard(): boolean;
+    set keyboard(value: Bind<boolean>);
+    get closeOnScroll(): boolean;
+    set closeOnScroll(value: Bind<boolean>);
+    get openOnHover(): boolean;
+    set openOnHover(value: Bind<boolean>);
+    get presentation(): ContextMenuPresentation;
+    set presentation(value: Bind<ContextMenuPresentation>);
+    /** Whether the menu is open. Reactive. */
+    get opened(): boolean;
+    /** The element the menu was last opened on (pressed, or focused); kept after it closes. Reactive. */
+    get targetElement(): Element | null;
+    /** The menu is about to open; set `e.items` for `e.target`, or cancel. */
+    get onOpening(): MotifEvent<ContextMenuOpeningEventArgs>;
+    /** An item was chosen, after the item's own `click`. */
+    get onItemClick(): MotifEvent<MenuItemClickEventArgs>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /**
+     * Opens the menu from code: at a point of the viewport, or at an element (its start corner,
+     * below it). `target` is what `onOpening` and `targetElement` report; the target element by
+     * default. Returns whether it opened.
+     */
+    open(at: {
+        x: number;
+        y: number;
+    } | Element, target?: Element): boolean;
+    close(): void;
+    /**
+     * Reads the items of the open menu again (an open submenu too) after they were changed in place. Your items may
+     * be plain or reactive; the menu reads them as they are.
+     */
+    refresh(): void;
+    /** The action sheet it shows its items in, once it has shown them there. */
+    get actionSheet(): ActionSheet | null;
+    onAccessKey(): boolean;
+    protected applyProperty(name: string, value: unknown): void;
+    private get parts();
+    private createParts;
+    private followTarget;
+    private attach;
+    private handle;
+    private onContextMenu;
+    private onKeyDown;
+    private show;
+    /** Whether the items go into an action sheet this time. */
+    private inSheet;
+    private showSheet;
+    private createSheet;
+    /** Made with `new` and never placed, it opens from the end of the page; on an element in another window, from the end of that one. */
+    private host;
+    private createPopup;
+    private chosen;
+    private startClosing;
+    private stopClosing;
+    private stopListening;
+    /**
+     * A press that moves focus can make the browser scroll a moment later, and the reader may scroll
+     * too: the menu goes along with the element it opened on, and closes only once it is out of sight.
+     */
+    private onScroll;
+    private closeOutOfSight;
+}

package/dist/components/contextmenu/attach-context-menu.d.ts

@@ -0,0 +1,12 @@
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { ContextMenuOpeningEventArgs } from './context-menu-opening-event-args';
+import type { ContextMenuTarget } from './context-menu-target';
+/**
+ * Gives `target` a context menu: fixed items, or a function that builds them each time the menu
+ * opens (from `e.target`, the element pressed). Returns the function that removes it; for a
+ * component it also goes when the component does.
+ *
+ * @example
+ * attachContextMenu(this.list, (e) => this.itemsFor(e.target.closest('li')));
+ */
+export declare function attachContextMenu(target: ContextMenuTarget, items: readonly MenuItem[] | ((e: ContextMenuOpeningEventArgs) => readonly MenuItem[] | null | undefined)): () => void;

package/dist/components/contextmenu/context-menu-opening-event-args.d.ts

@@ -0,0 +1,16 @@
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { ContextMenu } from './ContextMenu';
+/** What `onOpening` gets: the items can be changed for the element, or the opening canceled. */
+export interface ContextMenuOpeningEventArgs {
+    /** The element pressed with the right button, or the focused one when a key opened the menu. */
+    target: Element;
+    /** The items to show; set it to build the menu for `target`. */
+    items: readonly MenuItem[];
+    /** `true`: the menu does not open, and the browser shows its own. */
+    cancel: boolean;
+    /** Opened with the Menu key or Shift+F10. */
+    byKeyboard: boolean;
+    /** The `contextmenu` or `keydown` event. */
+    event: Event;
+    source: ContextMenu;
+}

package/dist/components/contextmenu/context-menu-presentation.d.ts

@@ -0,0 +1,2 @@
+/** How a context menu shows its items: a menu at the pointer, an action sheet from the bottom, or a sheet when it was opened by touch (or on a screen with only a coarse pointer). */
+export type ContextMenuPresentation = 'menu' | 'sheet' | 'auto';

package/dist/components/contextmenu/context-menu-props.d.ts

@@ -0,0 +1,30 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import type { MenuItemClickEventArgs } from '../../parts/menu/menu-item-click-event-args';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ContextMenuOpeningEventArgs } from './context-menu-opening-event-args';
+import type { ContextMenuPresentation } from './context-menu-presentation';
+import type { ContextMenuTarget } from './context-menu-target';
+/** Props of `ContextMenu`: the shared `ControlProps` plus its own. Each one is also a settable, reactive property. */
+export interface ContextMenuProps extends ControlProps {
+    /** Names the menu for screen readers. The same property as `text`. */
+    label?: Bind<string>;
+    /** The menu's commands; `onOpening` can give others for each element. */
+    items?: Bind<readonly MenuItem[]>;
+    /** The element or component whose menu it is. Default: the element the `ContextMenu` is placed in. */
+    target?: Bind<ContextMenuTarget | null | undefined>;
+    /** The Menu key and Shift+F10 open the menu at the focused element. Default `true`. */
+    keyboard?: Bind<boolean>;
+    /** Scrolling that takes the element the menu opened on out of sight closes the menu (until then it goes along). Default `true`. */
+    closeOnScroll?: Bind<boolean>;
+    /** Pointing at an item opens its submenu. Default `true`. */
+    openOnHover?: Bind<boolean>;
+    /** A menu at the pointer, an `ActionSheet` from the bottom, or (`'auto'`) a sheet when a finger opened it, or on a screen with only a coarse pointer when not opened by a key. Default `'menu'`. */
+    presentation?: Bind<ContextMenuPresentation>;
+    /** The menu is about to open; set `e.items` for `e.target`, or cancel. */
+    onOpening?: (e: ContextMenuOpeningEventArgs) => void;
+    /** An item was chosen, after the item's own `click`. */
+    onItemClick?: (e: MenuItemClickEventArgs) => void;
+    onClosed?: (reason: PopupCloseReason) => void;
+}

package/dist/components/contextmenu/context-menu-target.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentBase } from '@motifx/core';
+/** What a context menu belongs to: an element, or a component (its element). */
+export type ContextMenuTarget = Element | ComponentBase;

package/dist/components/contextmenu/index.d.ts

@@ -0,0 +1,6 @@
+export { ContextMenu } from './ContextMenu';
+export { attachContextMenu } from './attach-context-menu';
+export type { ContextMenuProps } from './context-menu-props';
+export type { ContextMenuTarget } from './context-menu-target';
+export type { ContextMenuOpeningEventArgs } from './context-menu-opening-event-args';
+export type { ContextMenuPresentation } from './context-menu-presentation';