@nu-art/thunderstorm-frontend 0.400.5

package/components/Label/Label.scss

@@ -0,0 +1,89 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-label {
+  position: relative;
+
+  .ts-label__content {
+    width: 100%;
+  }
+
+  &.truncate-active {
+    .ts-label__content {
+      @include styles.text-ellipsis;
+    }
+  }
+
+  &.tooltip-active {
+    //Tooltip arrow
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+      transform: translateX(-50%) translateY(10px);
+      border-width: 6px;
+      border-style: solid;
+      border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    //Tooltip content
+    &::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      left: 50%;
+      bottom: 100%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.85);
+      color: #fff;
+      padding: 8px 10px;
+      font-size: 14px;
+      border-radius: 6px;
+      white-space: nowrap;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    &:hover {
+      &::before {
+        opacity: 1;
+        transform: translateX(-50%) translateY(5px);
+      }
+
+      &::after {
+        opacity: 1;
+        transform: translateX(-50%) translateY(-5px);
+      }
+    }
+  }
+
+  &.invert-tooltip {
+    &::before {
+      bottom: unset;
+      top: 100%;
+      transform: translateX(-50%) translateY(-10px);
+      border-color: transparent transparent rgba(0, 0, 0, 0.85) transparent;
+    }
+
+    &::after {
+      bottom: unset;
+      top: 100%;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    &:hover {
+      &::before {
+        transform: translateX(-50%) translateY(-5px);
+      }
+
+      &::after {
+        transform: translateX(-50%) translateY(5px);
+      }
+    }
+  }
+}

package/components/Layouts/Layouts.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CSSProperties, HTMLProps } from 'react';
+import './_Layouts.scss';
+export type LinearLayoutProps = React.PropsWithChildren<HTMLProps<HTMLDivElement>> & {
+    ref?: React.Ref<any>;
+    innerRef?: React.Ref<HTMLDivElement>;
+    style?: CSSProperties;
+};
+declare class LinearLayout extends React.Component<LinearLayoutProps> {
+    private layoutClass;
+    constructor(props: LinearLayoutProps, layoutClass: string);
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare class Grid extends React.Component<LinearLayoutProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare class LL_V_L extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_V_C extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_V_R extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_H_T extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_H_C extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_H_B extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export declare class LL_VH_C extends LinearLayout {
+    constructor(props: LinearLayoutProps);
+}
+export {};

package/components/Layouts/Layouts.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import './_Layouts.scss';
+import { _className } from '../../utils/tools.js';
+class LinearLayout extends React.Component {
+    layoutClass;
+    constructor(props, layoutClass) {
+        super(props);
+        this.layoutClass = layoutClass;
+    }
+    render() {
+        const { innerRef, ...props } = this.props;
+        return _jsx("div", { ...props, ref: innerRef, className: _className(this.layoutClass, props.className), children: props.children });
+    }
+}
+export class Grid extends React.Component {
+    render() {
+        const { innerRef, ...props } = this.props;
+        return _jsx("div", { ...props, ref: innerRef, className: _className('ts-grid', props.className), children: props.children });
+    }
+}
+export class LL_V_L extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_v_l');
+    }
+}
+export class LL_V_C extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_v_c');
+    }
+}
+export class LL_V_R extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_v_r');
+    }
+}
+export class LL_H_T extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_h_t');
+    }
+}
+export class LL_H_C extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_h_c');
+    }
+}
+export class LL_H_B extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_h_b');
+    }
+}
+export class LL_VH_C extends LinearLayout {
+    constructor(props) {
+        super(props, 'll_vh_c');
+    }
+}

package/components/Layouts/_Layouts.scss

@@ -0,0 +1,53 @@
+/*
+ * 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_" as *;
+
+.ll_v_l {
+  @extend %ll_v_l
+}
+
+.ll_v_c {
+  @extend %ll_v_c
+}
+
+.ll_v_r {
+  @extend %ll_v_r
+}
+
+.ll_h_t {
+  @extend %ll_h_t
+}
+
+.ll_h_c {
+  @extend %ll_h_c
+}
+
+.ll_h_b {
+  @extend %ll_h_b
+}
+
+.ll_vh_c {
+  @extend %ll_vh_c
+}
+
+.ts-grid {
+  @extend %ts-grid
+}

package/components/Layouts/_Layouts_.scss

@@ -0,0 +1,69 @@
+/*!
+ * 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.
+ */
+
+%ll_v_l {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+}
+
+%ll_v_c {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+%ll_vh_c {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+%ll_v_r {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-end;
+}
+
+
+%ll_h_t {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+}
+
+%ll_h_c {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
+%ll_h_b {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-end;
+}
+
+%ts-grid {
+  display: grid;
+}

package/components/Layouts/index.d.ts

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

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

package/components/Page_ItemsEditor/Page_ItemsEditor.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { DBProto, UniqueId } from '@nu-art/ts-common';
+import { TS_Route } from '../../modules/routing/index.js';
+import './Page_ItemsEditor.scss';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { Props_ListRenderer } from './defaults/ItemEditor_ListRenderer/index.js';
+import { ItemEditor_CustomSort, ItemEditor_FilterType, ItemEditor_MapperType } from './types.js';
+import { Props_Filter } from './defaults/ItemEditor_DefaultFilter/index.js';
+import { InferProps, InferState } from '../../utils/types.js';
+import { ProtoComponent, ProtoComponentDef, SuperProto } from '../../core/proto-component/index.js';
+import { Props_EditableItemControllerProto } from '../TS_EditableItemControllerProto/index.js';
+import { EditableItem } from '../../utils/EditableItem.js';
+export type MenuAction<Proto extends DBProto<any>> = {
+    label: string;
+    action: (state: State_ItemsEditor<Proto>) => Promise<any>;
+};
+export type State_ItemsEditor<Proto extends DBProto<any>> = {
+    editable: EditableItem<Proto['uiType']>;
+    filter: ItemEditor_FilterType<Proto>;
+    actionInProgress?: number;
+};
+export type Props_ItemsEditor<Proto extends DBProto<any>> = {
+    ListRenderer?: React.ComponentType<Props_ListRenderer<Proto>>;
+    EditorRenderer: React.ComponentType<Partial<Props_EditableItemControllerProto<Proto>>>;
+    Filter?: React.ComponentType<Props_Filter<Proto>>;
+    module: ModuleFE_BaseApi<Proto>;
+    route?: TS_Route<{
+        _id: string;
+    }>;
+    sort: ItemEditor_CustomSort<Proto>;
+    mapper: ItemEditor_MapperType<Proto>;
+    itemRenderer: (item: Proto['uiType']) => JSX.Element;
+    actions: MenuAction<Proto>[];
+    id?: string;
+    onSelectedItemChanged?: (editable?: EditableItem<Proto['uiType']>) => void;
+    contextMenuActions: MenuAction<Proto>[];
+    hideAddItem: boolean;
+    className?: string;
+};
+/**
+ * Manages a list of items on the left with a selected item, and an editor on the right
+ */
+export type ProtoDef_Selection = ProtoComponentDef<'selected', {
+    selected: {
+        [dbKey: string]: UniqueId;
+    };
+}>;
+export declare abstract class Page_ItemsEditor<Proto extends DBProto<any>, CProto extends SuperProto<ProtoDef_Selection, ProtoComponentDef<string, any>> = ProtoDef_Selection, P = {}, S = {}> extends ProtoComponent<CProto, Props_ItemsEditor<Proto> & P, State_ItemsEditor<Proto> & S> {
+    static _defaultProps: ProtoDef_Selection['props'];
+    constructor(p: InferProps<Page_ItemsEditor<Proto, CProto, P, S>>);
+    componentDidMount(): void;
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    private __onItemUpdated;
+    private createEditableItem;
+    render(): import("react/jsx-runtime").JSX.Element;
+    protected renderHeader(): React.ReactNode;
+    protected renderAddNewItem(): "" | import("react/jsx-runtime").JSX.Element;
+    static refactoring_setSelected<Proto extends DBProto<any>>(module: ModuleFE_BaseApi<Proto>, id?: string): void;
+    private onSelected;
+    private renderMenuIcon;
+    private renderMenu;
+}
+export declare const Component_AddNewItem: (props: {
+    onCreateNewItem: () => Promise<any>;
+    entity: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/components/Page_ItemsEditor/Page_ItemsEditor.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { asArray, dbObjectToId, exists } from '@nu-art/ts-common';
+import { FrameLayout } from '../FrameLayout/index.js';
+import { LL_H_C, LL_H_T, LL_V_L } from '../Layouts/index.js';
+import './Page_ItemsEditor.scss';
+import { ItemEditor_DefaultList } from './defaults/ItemEditor_ListRenderer/index.js';
+import { ItemEditor_DefaultFilter } from './defaults/ItemEditor_DefaultFilter/index.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import { ModuleFE_MouseInteractivity, mouseInteractivity_PopUp, openContent } from '../../component-modules/mouse-interactivity/index.js';
+import { TS_ButtonLoader } from '../TS_ButtonLoader/index.js';
+import { _className } from '../../utils/tools.js';
+import { ProtoComponent } from '../../core/proto-component/index.js';
+import { ModuleFE_BrowserHistoryV2 } from '../../modules/ModuleFE_BrowserHistoryV2.js';
+import { EditableDBItemV3 } from '../../utils/EditableItem.js';
+export class Page_ItemsEditor extends ProtoComponent {
+    static _defaultProps = {
+        keys: ['selected'],
+    };
+    constructor(p) {
+        super(p);
+    }
+    componentDidMount() {
+        const selectedId = this.getQueryParam('selected', {})[this.props.module.dbDef.dbKey];
+        if (!selectedId)
+            this.onSelected(this.props.sort(this.props.module.cache.allMutable())[0]);
+    }
+    deriveStateFromProps(nextProps, state) {
+        if (nextProps === this.props || nextProps.module !== this.props.module) {
+            // @ts-ignore
+            delete this[this.props.module.defaultDispatcher.method];
+            // @ts-ignore
+            this[nextProps.module.defaultDispatcher.method] = (...args) => this.__onItemUpdated(...args);
+        }
+        const selectedId = this.getQueryParam('selected', {})[this.props.module.dbDef.dbKey];
+        if (!exists(selectedId)) {
+            state.editable = this.createEditableItem({});
+            this.props.onSelectedItemChanged?.(state.editable);
+            return state;
+        }
+        const item = this.props.module.cache.unique(selectedId);
+        if (!exists(item)) {
+            this.logError(`Could not find item ${this.props.module.dbDef.dbKey} with id ${selectedId}`);
+            this.onSelected();
+            this.props.onSelectedItemChanged?.();
+            return state;
+        }
+        state.editable = this.createEditableItem(item);
+        this.props.onSelectedItemChanged?.(state.editable);
+        state.filter ??= () => true;
+        return state;
+    }
+    __onItemUpdated = (...params) => {
+        const items = asArray(params[1]);
+        if (!items.map(dbObjectToId).includes(this.state.editable.get('_id')))
+            return this.onSelected(items[0]);
+        if (params[0] === 'delete' || params[0] === 'delete-multi')
+            return this.onSelected();
+        return this.reDeriveState();
+    };
+    createEditableItem(item) {
+        return new EditableDBItemV3({ ...item }, this.props.module)
+            .setOnSaveCompleted(this.onSelected.bind(this))
+            .setAutoSave(true);
+    }
+    render() {
+        const List = this.props.ListRenderer || ItemEditor_DefaultList;
+        const Filter = this.props.Filter || ItemEditor_DefaultFilter;
+        const Editor = this.props.EditorRenderer;
+        const sort = this.props.sort;
+        const selectedItem = this.state.editable?.item;
+        return _jsx(FrameLayout, { id: this.props.id, className: "editor-page", children: _jsxs(LL_H_T, { className: _className(this.props.className ?? 'editor-content', 'match_parent'), children: [_jsxs(LL_V_L, { className: "items-editor__list", children: [_jsxs(LL_V_L, { className: 'items-editor__list-header-content', children: [_jsx("div", { className: 'items-editor__list-header', children: this.renderHeader() }), _jsx(Filter, { onFilterChanged: filter => this.setState({ filter }), mapper: this.props.mapper }), this.renderMenuIcon()] }), _jsx(List, { contextMenuItems: this.props.contextMenuActions, itemRenderer: this.props.itemRenderer, filter: this.state.filter, selected: selectedItem, sort: sort, module: this.props.module, onSelected: this.onSelected.bind(this) }), this.renderAddNewItem()] }), _jsx("div", { className: "item-editor", children: _jsx(Editor, { item: selectedItem }) })] }) });
+    }
+    renderHeader() {
+        return '';
+    }
+    renderAddNewItem() {
+        if (this.props.hideAddItem)
+            return '';
+        return _jsx(Component_AddNewItem, { entity: this.renderHeader(), onCreateNewItem: async () => this.onSelected({}) });
+    }
+    static refactoring_setSelected(module, id) {
+        const selected = (ModuleFE_BrowserHistoryV2.get('selected') ?? {});
+        const selectedId = id;
+        if (!selectedId)
+            delete selected[module.dbDef.dbKey];
+        else
+            selected[module.dbDef.dbKey] = selectedId;
+        ModuleFE_BrowserHistoryV2.set('selected', selected);
+    }
+    onSelected(item) {
+        Page_ItemsEditor.refactoring_setSelected(this.props.module, item?._id);
+        // const selected = this.getQueryParam('selected', {} as CProto['queryParamDef']['selected']);
+        //
+        // const selectedId = item?._id;
+        // if (!selectedId)
+        // 	delete selected[this.props.module.dbDef.dbKey];
+        // else
+        // 	selected[this.props.module.dbDef.dbKey] = selectedId;
+        //
+        // this.setQueryParam('selected', selected);
+        this.reDeriveState();
+    }
+    renderMenuIcon = () => {
+        if (!this.props.actions)
+            return;
+        return _jsx(TS_Icons.more.component, { className: 'editor--menu-icon', ...openContent.popUp.bottom('editor--menu', this.renderMenu, 10) });
+    };
+    renderMenu = (refreshPopup) => {
+        return _jsx(_Fragment, { children: this.props.actions.map((action, index) => {
+                const actionInProgress = this.state.actionInProgress;
+                if (actionInProgress === index)
+                    return _jsx("div", { className: 'editor--loader-wrapper', children: _jsx(TS_ButtonLoader, {}) }, action.label);
+                const className = _className('editor--menu-action', exists(actionInProgress) && 'disabled');
+                return _jsx("div", { className: className, onClick: async () => {
+                        if (exists(this.state.actionInProgress))
+                            return;
+                        this.setState({ actionInProgress: index }, async () => {
+                            refreshPopup();
+                            try {
+                                await action.action(this.state);
+                                ModuleFE_MouseInteractivity.hide(mouseInteractivity_PopUp);
+                            }
+                            catch (err) {
+                                this.logError(err);
+                                this.setState({ actionInProgress: undefined }, () => refreshPopup());
+                            }
+                        });
+                    }, children: action.label }, action.label);
+            }) });
+    };
+}
+export const Component_AddNewItem = (props) => {
+    return _jsxs(LL_H_C, { className: "add-item-v3 clickable", onClick: props.onCreateNewItem, children: ["Add new ", props.entity] });
+};

package/components/Page_ItemsEditor/Page_ItemsEditor.scss

@@ -0,0 +1,104 @@
+@use '@nu-art/ts-styles' as styles;
+
+.editor-page {
+  .editor-content {
+    position: absolute;
+
+    .items-editor__list {
+      height: 100%;
+      border: 2px solid black;
+      border-radius: 10px;
+      overflow: hidden;
+      min-width: 300px;
+
+      .items-editor__list-header-content {
+        width: 100%;
+
+        .items-editor__list-header {
+          height: 40px;
+          width: 100%;
+          border-bottom: 2px solid black;
+          background: #a4a4a4;
+          color: white;
+          display: grid;
+          font-size: 18px;
+          place-content: center;
+          font-weight: bold;
+          flex-shrink: 0;
+        }
+
+        .item-editor__default-filter {
+          background: white;
+          width: 100%;
+          height: 30px;
+          border-bottom: 2px solid black;
+
+          .icon--wrapper {
+            flex-shrink: 0;
+            width: 30px;
+          }
+
+          .ts-input {
+            height: 100%;
+            width: 0;
+            flex-grow: 1;
+            border: none;
+            outline: none !important;
+          }
+        }
+      }
+
+      .items-list {
+        width: 300px;
+        gap: 2px;
+        @include styles.customScrollbar('vertical', true);
+
+        .list-item {
+          cursor: pointer;
+          padding: 8px;
+          font-weight: bold;
+          display: flex;
+          flex-shrink: 0;
+          align-items: center;
+          background: #b6b6b6;
+          white-space: pre-wrap;
+          color: white;
+          font-size: 14px;
+        }
+
+        .list-item__selected {
+          background: white;
+          color: #b6b6b6;
+        }
+
+      }
+
+      .add-item-v3 {
+        width: 100%;
+        height: 35px;
+        font-weight: bold;
+        justify-content: center;
+        font-size: 16px;
+        background: #b4b4b4;
+        color: white;
+
+        &:hover {
+          background: #929292;
+        }
+      }
+    }
+
+    .item-editor {
+      height: 100%;
+      flex-grow: 1;
+
+      div[data-lastpass-icon-root] {
+        display: none;
+      }
+
+      .editor-container {
+        gap: 12px;
+      }
+    }
+  }
+}

package/components/Page_ItemsEditor/defaults/ItemEditor_DefaultFilter/ItemEditor_DefaultFilter.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import './ItemEditor_DefaultFilter.scss';
+import { DBProto, Filter } from '@nu-art/ts-common';
+import { ItemEditor_FilterType, ItemEditor_MapperType } from '../../types.js';
+export type Props_Filter<Proto extends DBProto<any>> = {
+    onFilterChanged: (filter: ItemEditor_FilterType<Proto>) => void;
+    mapper: ItemEditor_MapperType<Proto>;
+};
+export declare class ItemEditor_DefaultFilter<Proto extends DBProto<any>> extends React.Component<Props_Filter<Proto>, {
+    filter: Filter<Proto['uiType']>;
+}> {
+    state: {
+        filter: Filter<Proto["uiType"]>;
+    };
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/Page_ItemsEditor/defaults/ItemEditor_DefaultFilter/ItemEditor_DefaultFilter.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import './ItemEditor_DefaultFilter.scss';
+import { Filter } from '@nu-art/ts-common';
+import { TS_Input } from '../../../TS_Input/index.js';
+import { LL_H_C } from '../../../Layouts/index.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class ItemEditor_DefaultFilter extends React.Component {
+    state = { filter: new Filter(this.props.mapper).setRegexp(false) };
+    render() {
+        return _jsxs(LL_H_C, { className: 'item-editor__default-filter', children: [_jsx(TS_Input, { placeholder: 'Type to Filter', type: 'text', onChange: value => {
+                        this.props.onFilterChanged((item) => this.state.filter.filterItem(item, value));
+                    } }), _jsx(TS_Icons.Search.component, {})] });
+    }
+}

package/components/Page_ItemsEditor/defaults/ItemEditor_DefaultFilter/ItemEditor_DefaultFilter.scss

@@ -0,0 +1,4 @@
+
+.item-editor--default-filter {
+
+}

package/components/Page_ItemsEditor/defaults/ItemEditor_DefaultFilter/index.d.ts

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

package/components/Page_ItemsEditor/defaults/ItemEditor_DefaultFilter/index.js

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