@adaptabletools/adaptable 12.0.0-canary.1 → 12.0.0-canary.4

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { InputProps } from '../../../components/Input';
 import { CSSProperties } from 'react';
 export declare type AdaptableFormControlTextClearProps = {
@@ -7,4 +6,4 @@ export declare type AdaptableFormControlTextClearProps = {
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
 } & InputProps;
-export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Pick<AdaptableFormControlTextClearProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "type" | "min" | "contextMenu" | "value" | "onKeyDown" | "rows" | "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" | "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" | "onClick" | "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" | "download" | "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" | "checked" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "focusOnClear" | "placehoder" | "OnTextChange" | "inputStyle"> & React.RefAttributes<any>>;
+export declare const AdaptableFormControlTextClear: (props: AdaptableFormControlTextClearProps) => JSX.Element;

package/src/View/Components/ListBox/DualListBoxEditor.js

@@ -23,7 +23,7 @@ const listGroupItemStyle = {
     padding: 'var(--ab-space-1)',
 };
 const ButtonDirection = (props) => (React.createElement(SimpleButton_1.default, Object.assign({}, props, { style: Object.assign({ whiteSpace: 'nowrap', justifyContent: 'center' }, props.style) })));
-exports.DualListBoxEditor = (props) => {
+const DualListBoxEditor = (props) => {
     const [placeholder] = react_1.useState(() => {
         let placeholder = document.createElement('button');
         placeholder.className = 'placeholder';
@@ -517,3 +517,4 @@ exports.DualListBoxEditor = (props) => {
             React.createElement(ButtonDirection, { "data-name": "down", marginBottom: 2, icon: "arrow-down", iconPosition: "start", disabled: !canGoDownOrBottom(), onClick: () => Down() }, "Down"),
             React.createElement(ButtonDirection, { "data-name": "bottom", marginBottom: 2, icon: "triangle-down", iconPosition: "start", disabled: !canGoDownOrBottom(), onClick: () => Bottom() }, "Bottom"))));
 };
+exports.DualListBoxEditor = DualListBoxEditor;

package/src/View/Components/ModuleValueSelector/index.js

@@ -7,7 +7,7 @@ const ValueSelector_1 = require("../ValueSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
 const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
-exports.ModuleValueSelector = (props) => {
+const ModuleValueSelector = (props) => {
     const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = tslib_1.__rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
     const { api } = AdaptableContext_1.useAdaptable();
     const selectedModulesMap = react_1.useMemo(() => {
@@ -32,3 +32,4 @@ exports.ModuleValueSelector = (props) => {
     }, [allowReorder, options, value]);
     return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };
+exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.js

@@ -13,7 +13,7 @@ const ColumnSelector_1 = require("./ColumnSelector");
 const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ValueSelector_1 = require("./ValueSelector");
-exports.isScopeValid = ({ Scope }) => {
+const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
         return 'No scope specified or scope is empty';
@@ -26,6 +26,7 @@ exports.isScopeValid = ({ Scope }) => {
     }
     return result.length ? result.join(', ') : true;
 };
+exports.isScopeValid = isScopeValid;
 const DATA_TYPES_MAP = {
     Date: {
         label: 'Date',
@@ -45,7 +46,7 @@ const DATA_TYPES_MAP = {
     },
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
-exports.renderScopeSummary = (scope, labels) => {
+const renderScopeSummary = (scope, labels) => {
     const adaptable = AdaptableContext_1.useAdaptable();
     const scopeApi = adaptable.api.scopeApi;
     const columnsInScope = scopeApi.getColumnsForScope(scope);
@@ -59,7 +60,8 @@ exports.renderScopeSummary = (scope, labels) => {
             React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
             React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
 };
-exports.NewScopeComponent = (props) => {
+exports.renderScopeSummary = renderScopeSummary;
+const NewScopeComponent = (props) => {
     const { api } = AdaptableContext_1.useAdaptable();
     const { scopeApi, columnApi } = api;
     const [columnsSearchText, setColumnsSearchText] = react_1.useState('');
@@ -144,3 +146,4 @@ exports.NewScopeComponent = (props) => {
                 React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
         React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { key: dataTypeOption.value, "data-name": "scope", checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
 };
+exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/PanelFooter.js

@@ -5,10 +5,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-exports.PanelFooter = (props) => {
+const PanelFooter = (props) => {
     var _a, _b;
     return (React.createElement(rebass_1.Flex, { className: "ab-Panel__Footer", flexDirection: "row", padding: 1, backgroundColor: "primary", alignItems: "center" },
         React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-cancel", onClick: props.onCancel, disabled: props.cancelDisabled }, (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'CANCEL'),
         React.createElement(rebass_1.Box, { flex: 1 }),
         React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-finish", margin: 1, onClick: props.onAccept, disabled: props.acceptDisabled }, (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Finish')));
 };
+exports.PanelFooter = PanelFooter;

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

@@ -12,432 +12,4 @@ export interface PanelWithImageProps extends PanelProps {
     headerColor?: string;
     button?: React.ReactElement<any>;
 }
-declare class PanelWithImageCmp extends React.Component<PanelWithImageProps, {}> {
-    render(): JSX.Element;
-}
-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;
-    type?: string;
-    min?: string | number;
-    contextMenu?: string;
-    value?: string | number | readonly string[];
-    onKeyDown?: ((event: React.KeyboardEvent<HTMLElement>) => void) & ((event: React.KeyboardEvent<HTMLDivElement>) => void);
-    rows?: number;
-    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" | "other" | "ascending" | "descending";
-    '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);
-    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);
-    onClick?: ((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;
-    download?: any;
-    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";
-    checked?: boolean;
-    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;
-    colSpan?: number;
-    headers?: string;
-    rowSpan?: number;
-    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 {};
+export declare const PanelWithImage: any;

package/src/View/Components/Panels/PanelWithImage.js

@@ -37,4 +37,6 @@ class PanelWithImageCmp extends React.Component {
         return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
     }
 }
+// apparently it's very hard to type `withTheme()` result in typescript
+// @ts-ignore
 exports.PanelWithImage = styled_components_1.withTheme(PanelWithImageCmp);

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

@@ -15,7 +15,7 @@ const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
-exports.AdaptablePopup = (props) => {
+const AdaptablePopup = (props) => {
     var _a, _b, _c;
     const adaptable = AdaptableContext_1.useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
@@ -77,3 +77,4 @@ exports.AdaptablePopup = (props) => {
                 !isStandalone && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                 React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, moduleViewContent)))));
 };
+exports.AdaptablePopup = AdaptablePopup;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const UIHelper_1 = require("../../../UIHelper");
 const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
 const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
-exports.AdaptablePopupBody = (props) => {
+const AdaptablePopupBody = (props) => {
     var _a;
     const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.internalApi.getAdaptableOptions(), document);
     const moduleName = props.module.moduleInfo.ModuleName;
@@ -35,3 +35,4 @@ exports.AdaptablePopupBody = (props) => {
     // most of the views use the `AdaptablePopupModuleView` component
     return React.createElement(BodyComponent, Object.assign({ key: props === null || props === void 0 ? void 0 : props.componentName, module: props.module }, moduleProps));
 };
+exports.AdaptablePopupBody = AdaptablePopupBody;