@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Dialog/TS_DialogOverlay.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_Overlay } from '../TS_Overlay/index.js';
+import { stopPropagation } from '../../utils/tools.js';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+import './TS_DialogOverlay.scss';
+import { removeFromArray, resolveContent } from '@nu-art/ts-common';
+export class TS_DialogOverlay extends ComponentSync {
+    deriveStateFromProps(nextProps) {
+        return { models: [] };
+    }
+    __showDialog = (model) => {
+        this.state.models.push(model);
+        this.forceUpdate();
+    };
+    __closeDialog = (dialogModel) => {
+        const dialogKey = dialogModel?.dialogKey;
+        if (!dialogKey)
+            this.state.models.pop();
+        else
+            removeFromArray(this.state.models, model => model.dialogKey === dialogKey);
+        this.forceUpdate();
+    };
+    render() {
+        if (!this.state.models.length)
+            return '';
+        const lastModel = this.state.models[this.state.models.length - 1];
+        return (_jsx("div", { className: "ts-dialog__overlay", children: _jsx(TS_Overlay, { showOverlay: true, onClickOverlay: this.onOverlayClicked, className: lastModel.overlayClass, children: this.state.models.map((model, i) => {
+                    const content = resolveContent(model.content, () => this.forceUpdate());
+                    if (i === this.state.models.length - 1)
+                        //This model content is wrapped in a div to keep the React hierarchy. if you remove it, the model stack won't work.
+                        return _jsx("div", { onClick: stopPropagation, onContextMenu: stopPropagation, children: content }, i);
+                    return _jsx("div", { style: { display: 'none', height: 0 }, children: content }, i);
+                }) }) }));
+    }
+    onOverlayClicked = (e) => {
+        stopPropagation(e);
+        //Exit if click should not close this current dialog
+        if (!this.state.models[0].closeOverlayOnClick())
+            return;
+        //Close there is only one dialog
+        if (this.state.models.length === 1)
+            return ModuleFE_Dialog.close(false, this.state.models[0].dialogKey);
+        //Close only this dialog if more than one
+        this.state.models.pop();
+        this.forceUpdate();
+    };
+}

package/components/TS_Dialog/TS_DialogOverlay.scss

@@ -0,0 +1,41 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use "../Layouts/Layouts_" as *;
+@use "../../styles/declaration/basic" as *;
+
+.ts-dialog__overlay {
+  .ts-overlay {
+    @extend %match_parent;
+    @extend %ll_h_c;
+    z-index: 200;
+    background: #00000020;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ts-overlay__child {
+    z-index: 201;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/components/TS_Dialog/TS_SimpleDialog.d.ts

@@ -0,0 +1,21 @@
+import './TS_SimpleDialog.scss';
+import { DialogButtons, Props_TSDialog, TS_Dialog } from './TS_Dialog.js';
+import * as React from 'react';
+type State = {};
+type Props_SimpleDialog = {
+    title: React.ReactNode;
+    body: React.ReactNode;
+    action: () => Promise<any>;
+};
+export declare class TS_SimpleDialog extends TS_Dialog<Props_SimpleDialog, State> {
+    static defaultProps: {
+        dialogId: string;
+        className: string;
+    };
+    constructor(p: Props_SimpleDialog & Props_TSDialog);
+    static show(props: Props_SimpleDialog): void;
+    protected renderHeader: () => React.ReactNode;
+    protected renderBody: () => React.ReactNode;
+    protected buttons: () => DialogButtons;
+}
+export {};

package/components/TS_Dialog/TS_SimpleDialog.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_SimpleDialog.scss';
+import { TS_Dialog } from './TS_Dialog.js';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+export class TS_SimpleDialog extends TS_Dialog {
+    static defaultProps = {
+        dialogId: 'order-graph',
+        className: 'order-graph'
+    };
+    constructor(p) {
+        super(p);
+    }
+    static show(props) {
+        ModuleFE_Dialog.show({ content: _jsx(TS_SimpleDialog, { ...props }) });
+    }
+    renderHeader = () => this.props.title;
+    renderBody = () => this.props.body;
+    buttons = () => {
+        return {
+            right: [{
+                    content: 'Delete',
+                    associatedKeys: ['enter'],
+                    onClick: async () => {
+                        await this.props.action();
+                        this.closeDialog();
+                    },
+                }],
+            left: [{
+                    content: 'Cancel',
+                    associatedKeys: ['escape'],
+                    onClick: async () => {
+                        this.closeDialog();
+                    },
+                }]
+        };
+    };
+}

package/components/TS_Dialog/TS_SimpleDialog.scss

@@ -0,0 +1,5 @@
+.ts-dialog.order-graph {
+  width: unset;
+  height: unset;
+
+}

package/components/TS_Dialog/TS_SimpleDialogue.d.ts

@@ -0,0 +1,28 @@
+import './TS_SimpleDialog.scss';
+import { DialogButtons, Props_TSDialog, TS_Dialog } from './TS_Dialog.js';
+import * as React from 'react';
+type State = {};
+type Props_SimpleDialog = {
+    title: React.ReactNode;
+    body: React.ReactNode;
+    negativeButtonProps: {
+        label: string;
+        action?: () => Promise<any> | void;
+    };
+    actionButtonProps: {
+        label: string;
+        action: () => Promise<any>;
+    };
+};
+export declare class TS_SimpleDialog extends TS_Dialog<Props_SimpleDialog, State> {
+    static defaultProps: {
+        dialogId: string;
+        className: string;
+    };
+    constructor(p: Props_SimpleDialog & Props_TSDialog);
+    static show(props: Props_SimpleDialog): void;
+    protected renderHeader: () => React.ReactNode;
+    protected renderBody: () => React.ReactNode;
+    protected buttons: () => DialogButtons;
+}
+export {};

package/components/TS_Dialog/TS_SimpleDialogue.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_SimpleDialog.scss';
+import { TS_Dialog } from './TS_Dialog.js';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+export class TS_SimpleDialog extends TS_Dialog {
+    static defaultProps = {
+        dialogId: 'order-graph',
+        className: 'order-graph'
+    };
+    constructor(p) {
+        super(p);
+    }
+    static show(props) {
+        ModuleFE_Dialog.show({ content: _jsx(TS_SimpleDialog, { ...props }) });
+    }
+    renderHeader = () => this.props.title;
+    renderBody = () => this.props.body;
+    buttons = () => {
+        return {
+            right: [{
+                    content: this.props.actionButtonProps.label,
+                    associatedKeys: ['enter'],
+                    onClick: async () => {
+                        await this.props.actionButtonProps.action();
+                        this.closeDialog();
+                    },
+                }],
+            left: [{
+                    content: this.props.negativeButtonProps.label,
+                    associatedKeys: ['escape'],
+                    onClick: async () => {
+                        await this.props.negativeButtonProps.action?.();
+                        this.closeDialog();
+                    },
+                }]
+        };
+    };
+}

package/components/TS_Dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TS_DialogOverlay.js';
+export * from './TS_Dialog.js';

package/components/TS_Dialog/index.js

@@ -0,0 +1,22 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './TS_DialogOverlay.js';
+export * from './TS_Dialog.js';

package/components/TS_DragAndDrop/TS_DragAndDrop.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_DragAndDrop.scss';
+type DND_State = 'Idle' | 'Dragging' | 'Positive' | 'Negative' | 'PartialNegative';
+export type DND_File = {
+    file: File;
+    accepted: boolean;
+};
+export type Props_DragAndDrop = React.PropsWithChildren<{
+    id?: string;
+    className?: string;
+    validate: ((files: File[]) => DND_File[]);
+    onChange: (acceptedFiles: File[], rejectedFiles: File[]) => void;
+    renderer: React.ComponentType<{
+        acceptedFiles: File[];
+        rejectedFiles: File[];
+    }>;
+}>;
+type State = {
+    dndState: DND_State;
+    acceptedFiles: File[];
+    rejectedFiles: File[];
+};
+export declare class TS_DragAndDrop extends ComponentSync<Props_DragAndDrop, State> {
+    static defaultProps: {
+        renderer: (props: {
+            acceptedFiles: File[];
+            rejectedFiles: File[];
+        }) => import("react/jsx-runtime").JSX.Element;
+    };
+    private inputRef;
+    private timers;
+    protected deriveStateFromProps(nextProps: Props_DragAndDrop): State;
+    componentWillUnmount(): void;
+    onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    static extractContent: (ev: React.DragEvent<HTMLDivElement>) => File[];
+    extractPayload: (ev: React.DragEvent<HTMLDivElement>) => File[] | undefined;
+    static validateFilesBySuffix: (fileExt: string | string[]) => (files: File[]) => DND_File[];
+    onDrop: (ev: React.DragEvent<HTMLDivElement>) => void;
+    updateFileArray: (_files: File[]) => void;
+    onDragEnter: (ev: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver: (ev: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (ev: React.DragEvent<HTMLDivElement>) => void;
+    static removeDragData: (ev: React.DragEvent<HTMLDivElement>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private openFileChooser;
+}
+export {};

package/components/TS_DragAndDrop/TS_DragAndDrop.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_DragAndDrop.scss';
+import { LL_V_L, LL_VH_C } from '../Layouts/index.js';
+import { asArray } from '@nu-art/ts-common';
+import { _className } from '../../utils/tools.js';
+const DND_Styles = {
+    Idle: 'idle',
+    Dragging: 'dragging',
+    Positive: 'positive',
+    Negative: 'negative',
+    PartialNegative: 'partial',
+};
+const timeoutSeconds = 2000;
+const DefaultFilesRenderer = (props) => {
+    return _jsxs(LL_V_L, { children: [props.acceptedFiles.map(file => _jsx("div", { style: { color: 'green' }, children: file.name })), props.rejectedFiles.map(file => _jsx("div", { style: { color: 'red' }, children: file.name }))] });
+};
+export class TS_DragAndDrop extends ComponentSync {
+    static defaultProps = {
+        renderer: DefaultFilesRenderer
+    };
+    inputRef = React.createRef();
+    timers = [];
+    deriveStateFromProps(nextProps) {
+        return {
+            dndState: 'Idle',
+            acceptedFiles: [],
+            rejectedFiles: [],
+        };
+    }
+    componentWillUnmount() {
+        this.timers.forEach(k => clearTimeout(k));
+    }
+    onSelect = (e) => {
+        if (e.target.files) {
+            this.updateFileArray(Object.values(e.target.files));
+        }
+    };
+    static extractContent = (ev) => Object.values(ev.dataTransfer.files);
+    extractPayload = (ev) => {
+        const files = TS_DragAndDrop.extractContent(ev);
+        if (files.length === 0) {
+            this.setState({ dndState: 'Negative' });
+            this.timers.push(setTimeout(() => this.setState({ dndState: 'Idle' }), timeoutSeconds));
+            return;
+        }
+        return files;
+    };
+    static validateFilesBySuffix = (fileExt) => (files) => {
+        const extensions = asArray(fileExt);
+        return files.map((file) => {
+            const accepted = extensions.some(ext => RegExp(`.${ext}$`, 'i').test(file.name));
+            return { file, accepted };
+        });
+    };
+    onDrop = (ev) => {
+        ev.preventDefault();
+        const files = this.extractPayload(ev);
+        files && this.updateFileArray(files);
+        TS_DragAndDrop.removeDragData(ev);
+    };
+    updateFileArray = (_files) => {
+        const files = this.props.validate(_files);
+        const acceptedFiles = files.filter(file => file.accepted).map(file => file.file);
+        const rejectedFiles = files.filter(file => !file.accepted).map(file => file.file);
+        let resultState = 'PartialNegative';
+        if (acceptedFiles.length === 0)
+            resultState = 'Negative'; // all files rejected
+        else if (rejectedFiles.length === 0)
+            resultState = 'Positive'; // all files accepted
+        this.setState({ dndState: resultState, acceptedFiles, rejectedFiles }, () => this.props.onChange(acceptedFiles, rejectedFiles));
+    };
+    onDragEnter = (ev) => {
+        ev.preventDefault();
+        this.setState({ dndState: 'Dragging' });
+    };
+    onDragOver = (ev) => {
+        ev.preventDefault();
+        if (this.state.dndState !== 'Idle')
+            return;
+        const dndState = (ev.dataTransfer.items && ev.dataTransfer.items.length > 0) ? 'Dragging' : 'Negative';
+        this.setState({ dndState });
+    };
+    onDragLeave = (ev) => {
+        this.setState({ dndState: 'Idle' });
+    };
+    static removeDragData = (ev) => {
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to remove the drag data
+            ev.dataTransfer.items.clear();
+        }
+        else {
+            // Use DataTransfer interface to remove the drag data
+            ev.dataTransfer.clearData();
+        }
+    };
+    render() {
+        const Renderer = this.props.renderer;
+        return (_jsx(LL_VH_C, { className: _className('ts-drag-and-drop', this.props.className), id: this.props?.id, children: _jsxs("div", { className: `ts-drag-and-drop__content ts-drag-and-drop__${DND_Styles[this.state.dndState]}`, onDrop: this.onDrop, onDragEnter: this.onDragEnter, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: this.openFileChooser, children: [_jsx("input", { className: "ts-drag-and-drop__input", id: "fileInput", type: "file", ref: this.inputRef, hidden: true, multiple: true, onChange: this.onSelect }), _jsx(Renderer, { acceptedFiles: this.state.acceptedFiles, rejectedFiles: this.state.rejectedFiles })] }) }));
+    }
+    openFileChooser = () => {
+        this.inputRef.current && this.inputRef.current.click();
+    };
+}

package/components/TS_DragAndDrop/TS_DragAndDrop.scss

@@ -0,0 +1,61 @@
+/*!
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.ts-drag-and-drop {
+  width: 100%;
+  height: 100%;
+  border-radius: 20px !important;
+
+  > * {
+    flex-grow: 1;
+    height: 100%
+  }
+
+  .ts-drag-and-drop__content {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ts-drag-and-drop__input {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ts-drag-and-drop__idle {
+    border: 2px dashed #ccc;
+  }
+
+  .ts-drag-and-drop__dragging {
+    border: 2px dashed #2556ff;
+  }
+
+  .ts-drag-and-drop__positive {
+    border: 4px dashed #00860c;
+  }
+
+  .ts-drag-and-drop__negative {
+    border: 4px dashed red;
+  }
+
+  .ts-drag-and-drop__partial {
+    border: 2px dashed #ea9b34;
+  }
+}

package/components/TS_DragAndDrop/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_DragAndDrop.js';

package/components/TS_DragAndDrop/index.js

@@ -0,0 +1,21 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './TS_DragAndDrop.js';

package/components/TS_Dropdown/TS_DropDown.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { Filter, ResolvableContent } from '@nu-art/ts-common';
+import { Adapter } from '../adapter/Adapter.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_DropDown.scss';
+import { ComponentProps_Error } from '../types.js';
+import { UIProps_EditableItem } from '../../utils/EditableItem.js';
+type State<ItemType> = ComponentProps_Error & {
+    open?: boolean;
+    adapter: Adapter<ItemType>;
+    selected?: ItemType;
+    hover?: ItemType;
+    filterText?: string;
+    dropDownRef: React.RefObject<HTMLDivElement>;
+    treeContainerRef: React.RefObject<HTMLDivElement>;
+    focusedItem?: ItemType;
+    className?: string;
+    hidePlaceholderOnOpen?: boolean;
+    treeResizeObserver: ResizeObserver;
+    disabled: boolean;
+};
+type StaticProps = {
+    caret: {
+        open: React.ReactNode;
+        close: React.ReactNode;
+    };
+};
+type InputEvent = React.KeyboardEvent | React.MouseEvent;
+type Dropdown_Props<ItemType> = Partial<StaticProps> & ComponentProps_Error & {
+    adapter: Adapter<ItemType> | ((filter?: string) => Adapter<ItemType>);
+    placeholder?: string;
+    inputValue?: string;
+    noOptionsRenderer?: React.ReactNode | ((filter?: string) => React.ReactNode);
+    onNoMatchingSelectionForString?: (filterText: string, matchingItems: ItemType[], e: React.KeyboardEvent) => any;
+    selected?: ItemType;
+    filter?: Filter<ItemType>;
+    queryFilter?: (item: ItemType) => boolean;
+    tabIndex?: number;
+    innerRef?: React.RefObject<any>;
+    id?: string;
+    inputEventHandler?: (state: State<ItemType>, e: React.KeyboardEvent) => State<ItemType>;
+    selectedItemRenderer?: (props?: ItemType) => React.ReactNode;
+    showNothingWithoutFilterText?: boolean;
+    disabled?: boolean;
+    allowManualSelection?: boolean;
+    className?: string;
+    boundingParentSelector?: string;
+    renderSearch?: (dropDown: TS_DropDown<ItemType>) => React.ReactNode;
+    limitItems?: number;
+    unselectLabel?: string;
+    hidePlaceholderOnOpen?: boolean;
+    onContextMenu?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+};
+type Props_CanUnselect<ItemType> = {
+    canUnselect: true;
+    onSelected: (selected?: ItemType) => void;
+};
+type Props_CanNotUnselect<ItemType> = {
+    canUnselect?: false;
+    onSelected: (selected: ItemType) => void;
+};
+type Props_CanUnselect_NonMandatory<ItemType> = {
+    canUnselect: true;
+    onSelected?: (selected?: ItemType) => void;
+};
+type Props_CanNotUnselect_NonMandatory<ItemType> = {
+    canUnselect?: false;
+    onSelected?: (selected: ItemType) => void;
+};
+export type Props_DropDown<ItemType> = (Props_CanUnselect<ItemType> | Props_CanNotUnselect<ItemType>) & Dropdown_Props<ItemType>;
+export type MandatoryProps_TS_DropDown<ItemType> = Dropdown_Props<ItemType>;
+type BasePartialProps_DropDown<T> = {
+    className?: string;
+    inputValue?: string;
+    placeholder?: string;
+    onNoMatchingSelectionForString?: (filterText: string, matchingItems: T[], e: React.KeyboardEvent) => Promise<void> | void;
+    mapper?: (item: T) => string[];
+    renderer?: (item: T) => React.ReactElement;
+    queryFilter?: (item: T) => boolean;
+    disabled?: boolean;
+    ifNoneShowAll?: boolean;
+};
+export type PartialProps_DropDown<T> = BasePartialProps_DropDown<T> & ComponentProps_Error & (Props_CanUnselect<T> | Props_CanNotUnselect<T>) & {
+    selected?: T;
+};
+type EditableDropDownProps<ItemType, EditableType extends {} = any, ValueType extends EditableType[keyof EditableType] = EditableType[keyof EditableType]> = BasePartialProps_DropDown<ItemType> & UIProps_EditableItem<EditableType, keyof EditableType, ValueType> & ComponentProps_Error & (Props_CanUnselect_NonMandatory<ItemType> | Props_CanNotUnselect_NonMandatory<ItemType>);
+export declare class TS_DropDown<ItemType> extends ComponentSync<Props_DropDown<ItemType>, State<ItemType>> {
+    static readonly prepareEditable: <T, EditableType extends {} = any, ValueType extends EditableType[keyof EditableType] = EditableType[keyof EditableType]>(mandatoryProps: ResolvableContent<MandatoryProps_TS_DropDown<T>>) => (props: EditableDropDownProps<T, EditableType, ValueType>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepareSelectable: <T = any>(mandatoryProps: ResolvableContent<MandatoryProps_TS_DropDown<T>>) => (props: PartialProps_DropDown<T>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepare: <T = any>(mandatoryProps: ResolvableContent<MandatoryProps_TS_DropDown<T>>) => {
+        editable: (props: EditableDropDownProps<T, any, any>) => import("react/jsx-runtime").JSX.Element;
+        selectable: (props: PartialProps_DropDown<T>) => import("react/jsx-runtime").JSX.Element;
+    };
+    static defaultRenderSearch: (dropDown: TS_DropDown<any>) => import("react/jsx-runtime").JSX.Element;
+    static defaultProps: {
+        renderSearch: (dropDown: TS_DropDown<any>) => import("react/jsx-runtime").JSX.Element;
+    };
+    constructor(props: Props_DropDown<ItemType>);
+    protected deriveStateFromProps(nextProps: Props_DropDown<ItemType>, state?: Partial<State<ItemType>>): State<ItemType>;
+    onTreeResize: () => void;
+    componentDidUpdate(): void;
+    private getBoundingParent;
+    private closeList;
+    onSelected: (item?: ItemType, e?: InputEvent) => void;
+    private inputKeyEventHandler;
+    private createAdapter;
+    private getChildrenContainerMaxHeight;
+    private getChildrenContainerPosX;
+    private getChildrenContainerPosY;
+    private getChildrenContainerWidth;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderHeader;
+    private renderTree;
+    private renderSelectedItem;
+    private renderSelectedOrFilterInput;
+    private addKeyboardListener;
+    private removeKeyboardListener;
+    keyboardEventHandler: (e: KeyboardEvent) => void | null;
+}
+export {};