@adaptabletools/adaptable 10.0.2 → 10.0.4-canary.2

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -15,7 +15,429 @@ export interface PanelWithImageProps extends PanelProps {
 declare class PanelWithImageCmp extends React.Component<PanelWithImageProps, {}> {
     render(): JSX.Element;
 }
-export declare const PanelWithImage: React.ForwardRefExoticComponent<Pick<Pick<PanelWithImageProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "button" | "cite" | "data" | "dir" | "form" | "header" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "icon" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderRadius" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "theme" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "variant" | "headerProps" | "bodyScroll" | "bodyProps" | "glyphicon" | "infoLink" | "infoLinkDisabled" | "headerColor"> & React.RefAttributes<PanelWithImageCmp>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "button" | "cite" | "data" | "dir" | "form" | "header" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "icon" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderRadius" | "margin" | "ref" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "variant" | "headerProps" | "bodyScroll" | "bodyProps" | "glyphicon" | "infoLink" | "infoLinkDisabled" | "headerColor"> & {
+export declare const PanelWithImage: React.ForwardRefExoticComponent<{
+    max?: string | number;
+    required?: boolean;
+    default?: boolean;
+    high?: number;
+    low?: number;
+    disabled?: boolean;
+    start?: number;
+    open?: boolean;
+    media?: string;
+    hidden?: boolean;
+    button?: React.ReactElement<any>;
+    cite?: string;
+    data?: string;
+    dir?: string;
+    form?: string;
+    header?: React.ReactNode;
+    label?: string;
+    p?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    slot?: string;
+    span?: number;
+    style?: React.CSSProperties;
+    summary?: string;
+    title?: string;
+    pattern?: string;
+    async?: boolean;
+    defer?: boolean;
+    manifest?: string;
+    m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    color?: string | (string & (string | number | symbol)[]) | (string & {
+        [x: string]: string | number | symbol;
+        [x: number]: string | number | symbol;
+    });
+    content?: string;
+    size?: number;
+    flex?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderImageOutset<string | number>, Required<import("styled-system").Theme<string | number>>>;
+    wrap?: string;
+    icon?: string;
+    border?: string | number;
+    padding?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    multiple?: boolean;
+    alignSelf?: import("styled-system").ResponsiveValue<import("csstype").Property.AlignSelf, Required<import("styled-system").Theme<string | number>>>;
+    backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    fontSize?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    height?: string | number;
+    marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderImageSlice, Required<import("styled-system").Theme<string | number>>>;
+    order?: import("styled-system").ResponsiveValue<import("csstype").Property.BorderImageSlice, Required<import("styled-system").Theme<string | number>>>;
+    paddingBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    paddingLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    paddingRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    paddingTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    translate?: "yes" | "no";
+    width?: string | number | (string & {}) | (string & import("csstype").Property.BackgroundPositionX<string | number>[]) | (string & {
+        [x: string]: import("csstype").Property.BackgroundPositionX<string | number>;
+        [x: number]: import("csstype").Property.BackgroundPositionX<string | number>;
+    }) | (number & import("csstype").Property.BackgroundPositionX<string | number>[]) | (number & {
+        [x: string]: import("csstype").Property.BackgroundPositionX<string | number>;
+        [x: number]: import("csstype").Property.BackgroundPositionX<string | number>;
+    });
+    borderRadius?: string;
+    margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    ref?: React.Ref<PanelWithImageCmp>;
+    children?: React.ReactNode;
+    key?: string | number;
+    list?: string;
+    step?: string | number;
+    contextMenu?: string;
+    type?: string;
+    min?: string | number;
+    rows?: number;
+    colSpan?: number;
+    rowSpan?: number;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    value?: string | number | readonly string[];
+    download?: any;
+    checked?: boolean;
+    name?: string;
+    className?: string;
+    id?: string;
+    lang?: string;
+    method?: string;
+    target?: string;
+    role?: React.AriaRole;
+    tabIndex?: number;
+    crossOrigin?: string;
+    href?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic'?: boolean | "false" | "true";
+    'aria-autocomplete'?: "both" | "none" | "inline" | "list";
+    'aria-busy'?: boolean | "false" | "true";
+    'aria-checked'?: boolean | "mixed" | "false" | "true";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    'aria-describedby'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "false" | "true";
+    'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "false" | "true";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "false" | "true";
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+    'aria-hidden'?: boolean | "false" | "true";
+    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live'?: "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "false" | "true";
+    'aria-multiline'?: boolean | "false" | "true";
+    'aria-multiselectable'?: boolean | "false" | "true";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "mixed" | "false" | "true";
+    'aria-readonly'?: boolean | "false" | "true";
+    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "false" | "true";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "false" | "true";
+    'aria-setsize'?: number;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    onCopy?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onCopyCapture?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onCut?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onCutCapture?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onPaste?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onPasteCapture?: ((event: React.ClipboardEvent<HTMLElement>) => void) & ((event: React.ClipboardEvent<HTMLDivElement>) => void);
+    onCompositionEnd?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onCompositionEndCapture?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onCompositionStart?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onCompositionStartCapture?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onCompositionUpdate?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onCompositionUpdateCapture?: ((event: React.CompositionEvent<HTMLElement>) => void) & ((event: React.CompositionEvent<HTMLDivElement>) => void);
+    onFocus?: ((event: React.FocusEvent<HTMLElement, Element>) => void) & ((event: React.FocusEvent<HTMLDivElement, Element>) => void);
+    onFocusCapture?: ((event: React.FocusEvent<HTMLElement, Element>) => void) & ((event: React.FocusEvent<HTMLDivElement, Element>) => void);
+    onBlur?: ((event: React.FocusEvent<HTMLElement, Element>) => void) & ((event: React.FocusEvent<HTMLDivElement, Element>) => void);
+    onBlurCapture?: ((event: React.FocusEvent<HTMLElement, Element>) => void) & ((event: React.FocusEvent<HTMLDivElement, Element>) => void);
+    onChange?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onChangeCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onBeforeInput?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onBeforeInputCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onInput?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onInputCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onReset?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onResetCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onSubmit?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onSubmitCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onInvalid?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onInvalidCapture?: ((event: React.FormEvent<HTMLElement>) => void) & ((event: React.FormEvent<HTMLDivElement>) => void);
+    onLoad?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onError?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onErrorCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onKeyDownCapture?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onKeyPress?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onKeyPressCapture?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onKeyUp?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onKeyUpCapture?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
+    onAbort?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onAbortCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onCanPlay?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onCanPlayCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onCanPlayThrough?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onCanPlayThroughCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onDurationChange?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onDurationChangeCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEmptied?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEmptiedCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEncrypted?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEncryptedCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEnded?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onEndedCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadedData?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadedDataCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadedMetadata?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadedMetadataCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadStart?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onLoadStartCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPause?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPauseCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPlay?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPlayCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPlaying?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onPlayingCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onProgress?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onProgressCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onRateChange?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onRateChangeCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSeeked?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSeekedCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSeeking?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSeekingCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onStalled?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onStalledCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSuspend?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSuspendCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onTimeUpdate?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onTimeUpdateCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onVolumeChange?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onVolumeChangeCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onWaiting?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onWaitingCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onAuxClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onAuxClickCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onClickCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onContextMenu?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onContextMenuCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onDoubleClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onDoubleClickCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onDrag?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragEnd?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragEndCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragEnter?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragEnterCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragExit?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragExitCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragLeave?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragLeaveCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragOver?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragOverCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragStart?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDragStartCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDrop?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onDropCapture?: ((event: React.DragEvent<HTMLElement>) => void) & ((event: React.DragEvent<HTMLDivElement>) => void);
+    onMouseDown?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseDownCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseEnter?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseLeave?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseMove?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseMoveCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseOut?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseOutCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseOver?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseOverCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseUp?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onMouseUpCapture?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    onSelect?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onSelectCapture?: ((event: React.SyntheticEvent<HTMLElement, Event>) => void) & ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void);
+    onTouchCancel?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchCancelCapture?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchEnd?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchEndCapture?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchMove?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchMoveCapture?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchStart?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onTouchStartCapture?: ((event: React.TouchEvent<HTMLElement>) => void) & ((event: React.TouchEvent<HTMLDivElement>) => void);
+    onPointerDown?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerDownCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerMove?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerMoveCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerUp?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerUpCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerCancel?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerCancelCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerEnter?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerEnterCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerLeave?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerLeaveCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerOver?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerOverCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerOut?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onPointerOutCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onGotPointerCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onGotPointerCaptureCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onLostPointerCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onLostPointerCaptureCapture?: ((event: React.PointerEvent<HTMLElement>) => void) & ((event: React.PointerEvent<HTMLDivElement>) => void);
+    onScroll?: ((event: React.UIEvent<HTMLElement, UIEvent>) => void) & ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void);
+    onScrollCapture?: ((event: React.UIEvent<HTMLElement, UIEvent>) => void) & ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void);
+    onWheel?: ((event: React.WheelEvent<HTMLElement>) => void) & ((event: React.WheelEvent<HTMLDivElement>) => void);
+    onWheelCapture?: ((event: React.WheelEvent<HTMLElement>) => void) & ((event: React.WheelEvent<HTMLDivElement>) => void);
+    onAnimationStart?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onAnimationStartCapture?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onAnimationEnd?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onAnimationEndCapture?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onAnimationIteration?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLElement>) => void) & ((event: React.AnimationEvent<HTMLDivElement>) => void);
+    onTransitionEnd?: ((event: React.TransitionEvent<HTMLElement>) => void) & ((event: React.TransitionEvent<HTMLDivElement>) => void);
+    onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLElement>) => void) & ((event: React.TransitionEvent<HTMLDivElement>) => void);
+    classID?: string;
+    useMap?: string;
+    wmode?: string;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    contentEditable?: boolean | "inherit" | "false" | "true";
+    draggable?: boolean | "false" | "true";
+    placeholder?: string;
+    spellCheck?: boolean | "false" | "true";
+    radioGroup?: string;
+    about?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    resource?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "on" | "off";
+    inputMode?: "search" | "none" | "text" | "numeric" | "tel" | "url" | "email" | "decimal";
+    is?: string;
+    as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "track" | "progress" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "menuitem" | "keygen" | "noindex" | "webview" | "animate" | "animateMotion" | "animateTransform" | "feDropShadow" | "mpath" | (string & React.ComponentClass<any, any>) | (string & React.FunctionComponent<any>);
+    hrefLang?: string;
+    integrity?: string;
+    rel?: string;
+    sizes?: string;
+    charSet?: string;
+    kind?: string;
+    src?: string;
+    srcLang?: string;
+    alt?: string;
+    coords?: string;
+    shape?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    mediaGroup?: string;
+    muted?: boolean;
+    playsInline?: boolean;
+    preload?: string;
+    autoFocus?: boolean;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    dateTime?: string;
+    acceptCharset?: string;
+    action?: string;
+    autoComplete?: string;
+    encType?: string;
+    noValidate?: boolean;
+    allowFullScreen?: boolean;
+    allowTransparency?: boolean;
+    frameBorder?: string | number;
+    marginHeight?: number;
+    marginWidth?: number;
+    sandbox?: string;
+    scrolling?: string;
+    seamless?: boolean;
+    srcDoc?: string;
+    srcSet?: string;
+    accept?: string;
+    capture?: boolean | "environment" | "user";
+    maxLength?: number;
+    minLength?: number;
+    readOnly?: boolean;
+    htmlFor?: string;
+    httpEquiv?: string;
+    optimum?: number;
+    reversed?: boolean;
+    selected?: boolean;
+    nonce?: string;
+    scoped?: boolean;
+    cellPadding?: string | number;
+    cellSpacing?: string | number;
+    headers?: string;
+    scope?: string;
+    cols?: number;
+    poster?: string;
+    challenge?: string;
+    keyType?: string;
+    keyParams?: string;
+    mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    pt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    pr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    pb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    pl?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    px?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    paddingX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    css?: string | import("styled-components").CSSObject | import("styled-components").FlattenSimpleInterpolation;
+    bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<string | number>>>;
+    variant?: "default" | "primary" | "modern";
+    headerProps?: import("../../../components/Panel").HeaderProps;
+    bodyScroll?: string | boolean;
+    bodyProps?: BoxProps;
+    glyphicon?: string;
+    infoLink?: string;
+    infoLinkDisabled?: boolean;
+    headerColor?: string;
+} & {
     theme?: any;
 }>;
 export {};

package/src/View/Components/Popups/AdaptablePopup.d.ts

@@ -4,7 +4,7 @@ import { ModuleParams } from '../SharedProps/ModuleViewPopupProps';
 import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 /**
- * This is the main popup that we use - so all function popups will appear here.
+ * This is the main popup that we use - so all Module popups will appear here.
  */
 export interface AdaptablePopupProps extends React.ClassAttributes<AdaptablePopup> {
     showModal: boolean;

package/src/View/Components/Popups/AdaptablePopupAlert.js

@@ -16,7 +16,7 @@ exports.AdaptablePopupAlert = (props) => {
     const msg = (_a = props.adaptableAlert.message) !== null && _a !== void 0 ? _a : '';
     const headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
     let header = messageType;
-    const { api } = AdaptableContext_1.useAdaptable();
+    const { api, adaptableOptions } = AdaptableContext_1.useAdaptable();
     if (props.adaptableAlert.header) {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
@@ -38,23 +38,36 @@ exports.AdaptablePopupAlert = (props) => {
     const context = React.useMemo(() => {
         return {
             alert: props.adaptableAlert,
-            api,
+            adaptableApi: api,
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
     const adaptableForm = React.useMemo(() => {
         return props.api.internalApi.getAdaptableFormFromAlertForm(props.adaptableAlert.alertDefinition.AlertForm || defaultForm, context, messageType);
     }, [props.adaptableAlert.alertDefinition.AlertForm, defaultForm, messageType, context]);
+    const renderApplicationIcon = (icon) => {
+        if (!icon) {
+            return null;
+        }
+        let width = icon.style && icon.style.width ? icon.style.width : 'var(--ab-cmp-simple-button__width)';
+        let height = icon.style && icon.style.height ? icon.style.height : 'var(--ab-cmp-simple-button__height)';
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
+            ' ',
+            React.createElement("img", { className: "alert-popup__application-icon", src: icon.src, style: { width: width, height: height } })));
+    };
     const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
         React.createElement("div", null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" }, typeof msg === 'string'
-                ? msg.split('\n').map(function (item, index) {
-                    return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
-                        React.createElement(rebass_1.Text, { key: index, margin: 2 },
-                            item,
-                            React.createElement("br", null))));
-                })
-                : msg),
+            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
+                renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
+                    adaptableOptions.userInterfaceOptions.applicationIcon),
+                typeof msg === 'string'
+                    ? msg.split('\n').map(function (item, index) {
+                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
+                            React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                                item,
+                                React.createElement("br", null))));
+                    })
+                    : msg),
             React.createElement(rebass_1.Box, { margin: 2 },
                 React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: props.api, context: context, onButtonClick: (button) => {
                         props.onClose();

package/src/View/Components/PreviewResultsPanel.js

@@ -20,7 +20,7 @@ class PreviewResultsPanel extends React.Component {
     render() {
         let previewHeader = this.props.showHeader && this.props.previewInfo != null
             ? 'Preview Results: ' +
-                (this.props.selectedColumn ? this.props.selectedColumn.FriendlyName : '')
+                (this.props.selectedColumn ? this.props.selectedColumn.friendlyName : '')
             : '';
         let successColor = UIHelper_1.default.getColorByMessageType('Success');
         const dataSource = this.props.previewInfo.previewResults.map((previewResult, index) => {

package/src/View/Components/RangesComponent.js

@@ -161,7 +161,7 @@ class RangesComponent extends React.Component {
     }
     onMinColumnSelectedChanged(columns) {
         const { columnComparison } = this.state;
-        columnComparison.MinValue = columns.length > 0 ? columns[0].ColumnId : undefined;
+        columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonMaxValue(event) {
@@ -174,7 +174,7 @@ class RangesComponent extends React.Component {
     }
     onMaxColumnSelectedChanged(columns) {
         const { columnComparison } = this.state;
-        columnComparison.MaxValue = columns.length > 0 ? columns[0].ColumnId : undefined;
+        columnComparison.MaxValue = columns.length > 0 ? columns[0].columnId : undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonColor(value) {

package/src/View/Components/Selectors/ColumnSelector.js

@@ -11,7 +11,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/Dr
 class ColumnSelector extends React.Component {
     render() {
         var _a;
-        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'FriendlyName');
+        const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
         const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
         const placeHolder = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.placeHolder)
             ? this.props.placeHolder.toString()
@@ -21,10 +21,10 @@ class ColumnSelector extends React.Component {
         const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
         let sortedColumnOptions = sortedColumns.map((column) => {
             return {
-                label: column.FriendlyName,
-                value: column.ColumnId,
+                label: column.friendlyName,
+                value: column.columnId,
                 onClick: () => {
-                    const selected = sortedColumns.filter((c) => c.ColumnId === column.ColumnId);
+                    const selected = sortedColumns.filter((c) => c.columnId === column.columnId);
                     if (!selected.length) {
                         this.onClearButton();
                     }
@@ -35,7 +35,7 @@ class ColumnSelector extends React.Component {
             };
         });
         let currentColumnName = selectedColumnIds.length > 0
-            ? (_a = this.props.ColumnList.find((c) => c.ColumnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.FriendlyName : 'Select a column';
+            ? (_a = this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.friendlyName : 'Select a column';
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [1], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,