@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Dropdown/TS_DropDown.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * 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.
+ */
+import * as React from 'react';
+import { BadImplementationException, clamp, debounce, resolveContent, voidFunction } from '@nu-art/ts-common';
+import { _className, stopPropagation } from '../../utils/tools.js';
+import { Adapter, } from '../adapter/Adapter.js';
+import { TS_Overlay } from '../TS_Overlay/index.js';
+import { TS_Tree } from '../TS_Tree/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_Input } from '../TS_Input/index.js';
+import './TS_DropDown.scss';
+import { LL_V_L } from '../Layouts/index.js';
+import { convertToHTMLDataAttributes, getErrorTooltip, resolveEditableError } from '../types.js';
+export class TS_DropDown extends ComponentSync {
+    // ######################## Static ########################
+    static prepareEditable = (mandatoryProps) => {
+        return (props) => _jsx(TS_DropDown, { ...resolveContent(mandatoryProps), ...props, error: resolveEditableError(props), onSelected: (item) => props.onSelected ? props.onSelected(item) : props.editable.updateObj({ [props.prop]: item }), selected: props.editable.item[props.prop] });
+    };
+    static prepareSelectable = (mandatoryProps) => {
+        return (props) => _jsx(TS_DropDown, { ...resolveContent(mandatoryProps), ...props });
+    };
+    static prepare = (mandatoryProps) => {
+        return {
+            editable: this.prepareEditable(mandatoryProps),
+            selectable: this.prepareSelectable(mandatoryProps)
+        };
+    };
+    static defaultRenderSearch = (dropDown) => _jsx(TS_Input, { type: "text", value: dropDown.props.inputValue, onChange: (filterText) => dropDown.reDeriveState({ filterText }), focus: true, placeholder: dropDown.props.placeholder && !dropDown.state.hidePlaceholderOnOpen ? dropDown.props.placeholder : '', 
+        // onAccept={(value, ev) => {
+        // 	const filterText = dropDown.state.filterText;
+        // 	if (filterText) {
+        // 		dropDown.setState({open: false}, () => dropDown.props.onNoMatchingSelectionForString?.(filterText, dropDown.state.adapter.data, ev));
+        // 	} else
+        // 		dropDown.onSelected(dropDown.state.adapter.data[0]);
+        // }}
+        onCancel: () => dropDown.reDeriveState({ open: false, filterText: undefined }), onKeyDown: dropDown.inputKeyEventHandler });
+    static defaultProps = {
+        renderSearch: TS_DropDown.defaultRenderSearch,
+    };
+    // ######################## Life Cycle ########################
+    constructor(props) {
+        super(props);
+    }
+    deriveStateFromProps(nextProps, state) {
+        const nextState = this.state ? { ...this.state } : {};
+        const nextAdapter = typeof nextProps.adapter === 'function' ? nextProps.adapter(state?.filterText) : nextProps.adapter;
+        const prevAdapter = typeof this.props.adapter === 'function' ? this.props.adapter(state?.filterText) : this.props.adapter;
+        nextState.error = nextProps.error;
+        nextState.selected = nextProps.selected;
+        nextState.filterText ??= nextProps.inputValue;
+        nextState.dropDownRef = nextProps.innerRef ?? this.state?.dropDownRef ?? React.createRef();
+        nextState.treeContainerRef = state?.treeContainerRef ?? React.createRef();
+        nextState.className = nextProps.className;
+        nextState.treeResizeObserver ??= new ResizeObserver(() => debounce(() => this.onTreeResize(), 5));
+        nextState.hidePlaceholderOnOpen = nextProps.hidePlaceholderOnOpen;
+        if (!nextState.adapter || (nextAdapter.data !== prevAdapter.data) || (state?.filterText !== nextState.filterText) || nextProps.queryFilter) {
+            nextState.adapter = this.createAdapter(nextAdapter, nextProps.limitItems, state?.filterText, nextProps.queryFilter);
+            nextState.focusedItem = undefined;
+        }
+        return {
+            open: state?.open,
+            error: nextState.error,
+            adapter: nextState.adapter,
+            selected: nextState.selected,
+            hidePlaceholderOnOpen: nextState.hidePlaceholderOnOpen,
+            hover: state?.hover,
+            filterText: state?.filterText,
+            dropDownRef: nextState.dropDownRef,
+            focusedItem: nextState.focusedItem,
+            treeContainerRef: nextState.treeContainerRef,
+            className: nextState.className,
+            treeResizeObserver: nextState.treeResizeObserver,
+            disabled: !!nextProps.disabled,
+        };
+    }
+    onTreeResize = () => {
+        const treeContainer = this.state.treeContainerRef.current;
+        const ddContainer = this.state.dropDownRef.current;
+        if (!treeContainer || !ddContainer)
+            return;
+        const ddRect = ddContainer.getBoundingClientRect();
+        const treeRect = treeContainer.getBoundingClientRect();
+        const rightBoundary = window.innerWidth - 20;
+        const leftBoundary = 20;
+        //Not overflowing screen right - nothing to fix
+        if (!(treeRect.right > rightBoundary))
+            return;
+        //Align to DD right, if it won't overflow screen left
+        const newXPos = ddRect.x + ddRect.width;
+        if (newXPos - treeRect.width >= leftBoundary) {
+            //Set align on right
+            treeContainer.style.removeProperty('left');
+            treeContainer.style.right = `${window.innerWidth - newXPos}px`;
+            return;
+        }
+        //Align the tree to rightBoundary
+        treeContainer.style.removeProperty('left');
+        treeContainer.style.right = '20px';
+    };
+    componentDidUpdate() {
+        if (!this.state.open)
+            return;
+        const treeContainer = this.state.treeContainerRef.current;
+        if (!treeContainer)
+            return;
+        this.state.treeResizeObserver.observe(treeContainer);
+    }
+    // ######################## Logic ########################
+    getBoundingParent() {
+        if (!this.props.boundingParentSelector)
+            return undefined;
+        return this.state.dropDownRef.current?.closest(this.props.boundingParentSelector);
+    }
+    closeList = (e, selectedItem, action) => {
+        if (this.state.disabled)
+            return;
+        if (e)
+            stopPropagation(e);
+        this.setState({
+            open: false,
+            filterText: undefined,
+            focusedItem: undefined,
+            selected: selectedItem === null ? undefined : selectedItem || this.state.selected
+        }, action);
+    };
+    onSelected = (item, e) => {
+        this.closeList(e, item, () => this.props.onSelected(item));
+    };
+    inputKeyEventHandler = (e, disableIfOpen = false) => {
+        if (disableIfOpen)
+            return;
+        if (this.props.inputEventHandler)
+            return this.setState(() => {
+                return this.props.inputEventHandler ? this.props.inputEventHandler(this.state, e) : this.state;
+            });
+        if (!this.state.open) {
+            if (e.key === 'Enter' || e.key === 'ArrowDown')
+                this.setState({ open: true });
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.persist();
+            if (this.state.focusedItem) {
+                return this.onSelected(this.state.focusedItem);
+            }
+            const filterText = this.state.filterText;
+            if (filterText) {
+                this.closeList(e, null, () => this.props.onNoMatchingSelectionForString?.(filterText, this.state.adapter.data, e));
+            }
+            else
+                this.onSelected(this.state.adapter.data[0], e);
+        }
+        if (e.key === 'Escape')
+            return this.closeList(e);
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            let index = this.state.focusedItem ? this.state.adapter.data.indexOf(this.state.focusedItem) + (e.key === 'ArrowDown' ? 1 : -1) : 0;
+            index = clamp(0, index, this.state.adapter.data.length - 1);
+            this.setState({ focusedItem: this.state.adapter.data[index] });
+        }
+    };
+    createAdapter(adapterToClone, limit, filterText, queryFilter) {
+        //If no change to data
+        if (!(filterText && this.props.filter) && !limit && !queryFilter)
+            return adapterToClone;
+        let data = adapterToClone.data;
+        //If queryFilter
+        if (queryFilter) {
+            data = data.filter((item) => queryFilter(item));
+        }
+        //If filtering
+        if (filterText && this.props.filter)
+            data = this.props.filter.filterSort(data, filterText);
+        //If limiting
+        if (limit)
+            data = limit ? data.slice(0, limit) : data;
+        const adapter = adapterToClone.clone(new Adapter(data));
+        adapter.data = data;
+        return adapter;
+    }
+    getChildrenContainerMaxHeight = (dropdownRef, dir) => {
+        const rect = dropdownRef.current?.getBoundingClientRect();
+        if (!rect) {
+            this.logWarning('getChildrenContainerMaxHeight - No Rect!!');
+            return 0;
+        }
+        const boundingParent = this.getBoundingParent();
+        if (boundingParent) {
+            const boundingRect = boundingParent.getBoundingClientRect();
+            return (dir === 'bottom' ? (boundingRect.bottom - rect.bottom - 20) : (rect.top - boundingRect.top - 20));
+        }
+        return (dir === 'bottom' ? (window.innerHeight - rect.bottom - 20) : (rect.top - 20));
+    };
+    getChildrenContainerPosX = (dropdownRef) => {
+        const rect = dropdownRef.current.getBoundingClientRect();
+        return rect.x;
+    };
+    getChildrenContainerPosY = (dropdownRef, dir) => {
+        const rect = dropdownRef.current.getBoundingClientRect();
+        if (dir === 'bottom') {
+            return rect.bottom;
+        }
+        return window.innerHeight - rect.top;
+    };
+    getChildrenContainerWidth = (dropdownRef) => {
+        const rect = dropdownRef.current.getBoundingClientRect();
+        return rect.right - rect.left;
+    };
+    // ######################## Render ########################
+    render() {
+        const className = _className('ts-dropdown', this.state.className, this.state.open ? 'open' : undefined, this.state.disabled ? 'disabled' : undefined);
+        return (_jsxs("div", { className: className, id: this.props.id, ref: this.state.dropDownRef, tabIndex: this.props.tabIndex, onFocus: this.addKeyboardListener, onBlur: this.removeKeyboardListener, ...getErrorTooltip(this.props.error, this.props.showErrorTooltip), ...convertToHTMLDataAttributes(this.state.error, 'error'), children: [this.renderHeader(), _jsx(TS_Overlay, { flat: false, showOverlay: !!this.state.open, onClickOverlay: this.closeList, children: this.renderTree() })] }));
+    }
+    renderHeader = () => {
+        const className = _className('ts-dropdown__header', this.props.disabled ? 'disabled' : undefined);
+        return (_jsxs("div", { className: className, onClick: (e) => {
+                stopPropagation(e);
+                if (this.state.disabled) {
+                    return;
+                }
+                this.state.open ? this.closeList(e) : this.setState({ open: true });
+            }, children: [this.renderSelectedOrFilterInput(), this.state.open && this.props.caret ? this.props.caret?.close : this.props.caret?.open] }));
+    };
+    renderTree = () => {
+        if (!this.state.open)
+            return '';
+        if (this.props.showNothingWithoutFilterText && !this.state.filterText?.length)
+            return '';
+        let className = 'ts-dropdown__items-container';
+        // const treeKeyEventHandler = treeKeyEventHandlerResolver(this.props.id);
+        const style = {};
+        if (this.state?.dropDownRef.current) {
+            //Get container data
+            const containerData = {
+                posX: this.getChildrenContainerPosX(this.state.dropDownRef),
+                posY: this.getChildrenContainerPosY(this.state.dropDownRef, 'bottom'),
+                width: this.getChildrenContainerWidth(this.state.dropDownRef),
+                maxHeight: this.getChildrenContainerMaxHeight(this.state.dropDownRef, 'bottom'),
+            };
+            //Set initial top
+            style.top = containerData.posY;
+            //If not enough space at the bottom, re-calculate for top display
+            if (containerData.maxHeight < 100) {
+                containerData.maxHeight = this.getChildrenContainerMaxHeight(this.state.dropDownRef, 'top');
+                containerData.posY = this.getChildrenContainerPosY(this.state.dropDownRef, 'top');
+                className += ' inverted';
+                delete style.top;
+                style.bottom = containerData.posY;
+            }
+            //Set style attributes
+            style.position = 'absolute';
+            style.left = containerData.posX;
+            style.maxHeight = containerData.maxHeight;
+            // style.width = containerData.width;
+            //Contain the max and min width of the tree
+            style.minWidth = containerData.width;
+            style.maxWidth = window.innerWidth - 40;
+            // @ts-ignore
+            style['--dd-width'] = `${containerData.width}px`;
+        }
+        if (!this.state.adapter.data)
+            throw new BadImplementationException('No data provided to TS_DropDown!');
+        if ((!this.props.filter || !this.props.showNothingWithoutFilterText || this.state.filterText?.length) && this.state.adapter.data.length === 0) {
+            if (this.props.noOptionsRenderer)
+                return _jsx("div", { className: "ts-dropdown__empty", style: style, children: (typeof this.props.noOptionsRenderer === 'function' ? this.props.noOptionsRenderer(this.state.filterText) : this.props.noOptionsRenderer) });
+            return _jsx("div", { className: "ts-dropdown__empty", style: style, children: "No options" });
+        }
+        return _jsxs(LL_V_L, { className: className, style: style, innerRef: this.state.treeContainerRef, children: [this.props.canUnselect && _jsx("div", { className: 'ts-dropdown__unselect-item', onClick: (e) => this.onSelected(undefined, e), children: this.props.unselectLabel ? this.props.unselectLabel : 'Unselect' }), _jsx(TS_Tree, { adapter: this.state.adapter, selectedItem: this.state.focusedItem, onNodeClicked: (path, item) => this.onSelected(item), className: 'ts-dropdown__items', scrollSelectedIntoView: true, containerRef: this.state.treeContainerRef })] });
+    };
+    renderSelectedItem = (selected) => {
+        if (this.props.selectedItemRenderer)
+            return this.props.selectedItemRenderer(selected);
+        if (selected === undefined)
+            return _jsx("div", { className: "ts-dropdown__placeholder", children: this.props.placeholder || '' });
+        const adapter = typeof this.props.adapter === 'function' ? this.props.adapter(this.state.filterText) : this.props.adapter;
+        const Renderer = adapter.treeNodeRenderer;
+        const node = {
+            propKey: 'string',
+            path: 'string',
+            item: 'any',
+            adapter: adapter,
+            expandToggler: (e, expxand) => {
+            },
+            expandFromNode: voidFunction,
+            onClick: (e) => {
+            },
+            expanded: true,
+            focused: false,
+            selected: true
+        };
+        return _jsx("div", { className: 'ts-dropdown__selected', onContextMenu: this.props.onContextMenu, children: _jsx(Renderer, { item: selected, node: node }) });
+    };
+    renderSelectedOrFilterInput = () => {
+        if (!this.state.open || (!this.props.filter && typeof this.props.adapter !== 'function')) {
+            return this.renderSelectedItem(this.state.selected);
+        }
+        return this.props.renderSearch(this);
+    };
+    // ######################## To Remove ########################
+    // TODO: THIS IS ALL DUPLICATE SHIT... DELETE ONCE TREE CAN PROPAGATE THE KEYBOARD EVENTS
+    addKeyboardListener = () => {
+        const onKeyboardEventListener = this.inputKeyEventHandler;
+        if (!onKeyboardEventListener)
+            return;
+        this.state.dropDownRef.current?.addEventListener('keydown', this.keyboardEventHandler);
+    };
+    removeKeyboardListener = () => {
+        const onKeyboardEventListener = this.inputKeyEventHandler;
+        if (!onKeyboardEventListener)
+            return;
+        this.state.dropDownRef.current?.removeEventListener('keydown', this.keyboardEventHandler);
+    };
+    keyboardEventHandler = (e) => this.state.dropDownRef.current && this.inputKeyEventHandler(e, this.state.open);
+}

package/components/TS_Dropdown/TS_DropDown.scss

@@ -0,0 +1,134 @@
+/*!
+ * 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 "../../styles/declaration/basic" as *;
+
+.ts-dropdown {
+  position: relative;
+  isolation: isolate;
+  z-index: 0;
+  flex-shrink: 0;
+
+  //Children - header
+  .ts-dropdown__header {
+    @extend %match_parent;
+    height: 30px;
+    background: white;
+    border-radius: 5px;
+    border: 1px solid #4fa7ff;
+    display: flex;
+    z-index: 20 !important;
+
+    .ts-input {
+      @extend %match_height;
+      background-color: transparent;
+      border: none;
+      padding-block: 0;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+
+    .ts-dropdown__placeholder,
+    .ts-dropdown__selected {
+      @extend %match_height;
+      flex-grow: 1;
+      font-size: 16px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding-inline: 4px;
+    }
+  }
+
+  .ts-dropdown__empty {
+    background: white;
+    border-radius: 0 0 4px 4px;
+    border: 1px solid #4fa7ff;
+    padding: 5px;
+    position: absolute;
+    text-align: center;
+  }
+
+  //Children - items
+  .ts-overlay {
+    z-index: 10 !important;
+  }
+
+  .ts-overlay__child {
+    z-index: 15 !important;
+    position: static;
+  }
+
+  .ts-dropdown__items-container {
+    //Colors
+    background: white;
+
+    //Border
+    border: 1px solid #4fa7ff;
+    border-radius: 0 0 5px 5px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .ts-dropdown__unselect-item {
+      width: 100%;
+      padding: 5px;
+      font-size: 18px;
+      border-bottom: 2px dotted black;
+
+      &:hover {
+        background: cornsilk;
+      }
+    }
+
+    .ts-tree {
+      //Dimensions
+      width: 100%;
+      min-height: 10px;
+
+
+      .ts-tree__children-container {
+        margin: 0;
+
+        .ts-tree__node {
+          padding: 5px;
+        }
+      }
+    }
+
+    &.inverted {
+      padding-top: 0;
+      padding-bottom: 3px;
+      border-radius: 5px 5px 0 0;
+    }
+  }
+
+
+  &.open {
+    z-index: 1;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}

package/components/TS_Dropdown/index.d.ts

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

package/components/TS_Dropdown/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_DropDown.js';

package/components/TS_EditableContent/TS_EditableContent.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { DBProto } from '@nu-art/ts-common';
+import { Controller, Props_Controller } from '../../core/Controller.js';
+import { InferState } from '../../utils/types.js';
+import { EditableRef } from './types.js';
+type _State<Item> = EditableRef<Item> & {
+    tag?: string;
+};
+export type EditableContentType<Opt> = Opt extends DBProto<any> ? Opt['uiType'] : Opt;
+export declare abstract class TS_EditableContent<Opt, P = {}, S = {}, ItemType extends EditableContentType<Opt> = EditableContentType<Opt>, Props extends P & EditableRef<ItemType> & Props_Controller = P & EditableRef<ItemType> & Props_Controller, State extends S & _State<ItemType> = S & _State<ItemType>> extends Controller<Props, State> {
+    shouldReDeriveState(nextProps: Readonly<Props>): boolean;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    protected deriveStateFromProps(nextProps: Props, state: State): InferState<this>;
+    protected renderProp(label: string, render: ReactNode, className?: string): import("react/jsx-runtime").JSX.Element;
+    protected renderPropVertical(label: string, render: ReactNode, className?: string): import("react/jsx-runtime").JSX.Element;
+    protected renderPropHorizontal(label: string, render: ReactNode, className?: string): import("react/jsx-runtime").JSX.Element;
+    item: () => Partial<ItemType>;
+}
+export {};

package/components/TS_EditableContent/TS_EditableContent.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+import { Controller } from '../../core/Controller.js';
+export class TS_EditableContent extends Controller {
+    shouldReDeriveState(nextProps) {
+        // if (!this.state)
+        // 	throw new BadImplementationException(`Check if you have overridden 'deriveStateFromProps' without calling super.`);
+        if (this.state.tag !== nextProps.editable.tag)
+            return true;
+        return super.shouldReDeriveState(nextProps);
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.state.tag !== nextState.editable.tag)
+            return true;
+        return super.shouldComponentUpdate(nextProps, nextState, nextContext);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.editable = nextProps.editable;
+        state.tag = nextProps.editable.tag;
+        return state;
+    }
+    renderProp(label, render, className) {
+        return this.renderPropVertical(label, render, className);
+    }
+    renderPropVertical(label, render, className) {
+        return (_jsx(TS_PropRenderer.Vertical, { label: label, className: className, children: render }));
+    }
+    renderPropHorizontal(label, render, className) {
+        return (_jsx(TS_PropRenderer.Horizontal, { label: label, className: className, children: render }));
+    }
+    item = () => this.state.editable.item;
+}

package/components/TS_EditableContent/types.d.ts

@@ -0,0 +1,4 @@
+import { EditableItem } from '../../utils/EditableItem.js';
+export type EditableRef<Item> = {
+    editable: EditableItem<Item>;
+};

package/components/TS_EditableContent/types.js

@@ -0,0 +1 @@
+export {};

package/components/TS_EditableItemComponent/TS_EditableItemComponent.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Controller, Props_Controller } from '../../core/Controller.js';
+import { DBProto } from '@nu-art/ts-common';
+import { InferProps, InferState } from '../../utils/types.js';
+import { EditableRef } from '../TS_EditableContent/types.js';
+type _State<Item> = EditableRef<Item> & {
+    tag?: string;
+};
+export declare abstract class TS_EditableItemComponent<ItemType, P = {}, S = {}, Props extends P & EditableRef<ItemType> & Props_Controller = P & EditableRef<ItemType> & Props_Controller, State extends S & _State<ItemType> = S & _State<ItemType>> extends Controller<Props, State> {
+    shouldReDeriveState(nextProps: Readonly<Props>): boolean;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    protected renderProp(label: string, render: ReactNode, className?: string): import("react/jsx-runtime").JSX.Element;
+    item: () => Partial<ItemType>;
+}
+export declare abstract class TS_EditableItemComponentProto<Proto extends DBProto<any>, P = {}, S = {}, UI_Type extends Proto['uiType'] = Proto['uiType'], Props extends P & EditableRef<UI_Type> & Props_Controller = P & EditableRef<UI_Type> & Props_Controller, State extends S & _State<UI_Type> = S & _State<UI_Type>> extends Controller<Props, State> {
+    shouldReDeriveState(nextProps: Readonly<InferProps<this>>): boolean;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    protected renderProp(label: string, render: ReactNode, className?: string): import("react/jsx-runtime").JSX.Element;
+    item: () => Partial<UI_Type>;
+}
+export {};

package/components/TS_EditableItemComponent/TS_EditableItemComponent.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from '../../core/Controller.js';
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+export class TS_EditableItemComponent extends Controller {
+    shouldReDeriveState(nextProps) {
+        // if (!this.state)
+        // 	throw new BadImplementationException(`Check if you have overridden 'deriveStateFromProps' without calling super.`);
+        if (this.state.tag !== nextProps.editable.tag)
+            return true;
+        return super.shouldReDeriveState(nextProps);
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.state.tag !== nextState.editable.tag)
+            return true;
+        return super.shouldComponentUpdate(nextProps, nextState, nextContext);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.editable = nextProps.editable;
+        state.tag = nextProps.editable.tag;
+        return state;
+    }
+    renderProp(label, render, className) {
+        return (_jsx(TS_PropRenderer.Vertical, { label: label, className: className, children: render }));
+    }
+    item = () => this.state.editable.item;
+}
+export class TS_EditableItemComponentProto extends Controller {
+    shouldReDeriveState(nextProps) {
+        if (this.state.tag !== nextProps.editable.tag)
+            return true;
+        return super.shouldReDeriveState(nextProps);
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (this.state.tag !== nextState.editable.tag)
+            return true;
+        return super.shouldComponentUpdate(nextProps, nextState, nextContext);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.editable = nextProps.editable;
+        state.tag = nextProps.editable.tag;
+        return state;
+    }
+    renderProp(label, render, className) {
+        return (_jsx(TS_PropRenderer.Vertical, { label: label, className: className, children: render }));
+    }
+    item = () => this.state.editable.item;
+}

package/components/TS_EditableItemController/TS_EditableItemController.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import './TS_EditableItemController.scss';
+import { DB_Object, DBProto, ResolvableContent } from '@nu-art/ts-common';
+import { Editable_SaveAction } from '../../utils/EditableItem.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { Props_ItemsEditor } from '../Page_ItemsEditor/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { EditableRef } from '../TS_EditableContent/types.js';
+export type TemplatingProps_EditableItemController<Proto extends DBProto<any>, EditorProps extends object = object> = {
+    module: ModuleFE_BaseApi<Proto>;
+    onError?: (item: Partial<Proto['uiType']>, err: Error) => any | Promise<any>;
+    onSave?: (err: Proto['uiType']) => any | Promise<any>;
+    autoSave?: ResolvableContent<boolean, [Readonly<Proto['uiType']>]>;
+    saveAction?: Editable_SaveAction<Proto['uiType']>;
+    editor: React.ComponentType<EditableRef<Proto['uiType']> & EditorProps>;
+    createInitialInstance?: () => Readonly<Partial<Proto['uiType']>>;
+    editorProps?: EditorProps;
+};
+export type Props_EditableItemController<Proto extends DBProto<any>, EditorProps extends object = object> = TemplatingProps_EditableItemController<Proto, EditorProps> & {
+    item?: Readonly<Partial<Proto['uiType']>> | string;
+};
+/**
+ * Item_EditorController class handles the editing of a specific db item
+ * and encapsulate logic to load the item from the local cache and uses the EditableItem to
+ * and TS_EditableContent for rendering and editing the db item.
+ *
+ * @template Proto - The database prototype def to be edited
+ * @template Props - The Props this class component takes
+ */
+export declare class TS_EditableItemController<Proto extends DBProto<any>, EditorProps extends object = object, Props extends Props_EditableItemController<Proto, EditorProps> = Props_EditableItemController<Proto, EditorProps>> extends ComponentSync<Props, EditableRef<Proto['uiType']>> {
+    static DefaultAutoSave: (item?: Partial<DB_Object>) => boolean;
+    constructor(p: Props);
+    private __onItemUpdated;
+    protected deriveStateFromProps(nextProps: Props & Props_ItemsEditor<Proto>, state?: Partial<EditableRef<Proto['uiType']>>): (EditableRef<Proto['uiType']>);
+    render(): import("react/jsx-runtime").JSX.Element;
+}