react-ui-basics 0.0.229 → 0.0.231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.229",
+  "version": "0.0.231",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/router/Link.js

@@ -1,16 +1,14 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; 
-import { jsx as jsxRuntime_2 } from '../../../node_modules/react/jsx-runtime.js';
+import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { jsx as jsxRuntime_2 } from '../../../node_modules/react/jsx-runtime.js';
 import { pushLocation } from './HistoryTools.js';
 import { preventDefault } from '../Tools.js';
 
-const Link = (_a) => {
-    var { children, href, className } = _a, other = __rest(_a, [[ReactConstants[4]], "href", [ReactConstants[5]]]);
-    return jsxRuntime_2("a", __extends({ href: href, [ReactConstants[5]]: className }, other, { [ReactConstants[6]]: (e) => {
+const Link = (props) => {
+    return jsxRuntime_2("a", __extends({}, props, { [ReactConstants[6]]: (e) => {
             if (!e.ctrlKey) {
                 preventDefault(e);
-                pushLocation(href);
+                pushLocation(props.href);
             }
-        } }, { [ReactConstants[4]]: children }));
+        } }));
 };
 var Link$1 = Link;
 

package/router/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/router/Link.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAWA,MAAM,IAAI,GAAwB,CAAC,EAAqC,KAAI;QAAzC,EAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,OAAW,EAAN,KAAK,GAApC,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,MAAA,EAAA,WAAA,CAAqC,CAAD,CAAA;AACnE,IAAA,OAAOA,kCAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAM,EAAA,KAAK,IAAE,OAAO,EAAE,CAAC,CAAC,KAAI;AAClE,YAAA,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE;gBACZ,cAAc,CAAC,CAAC,CAAC,CAAC;gBAClB,YAAY,CAAC,IAAI,CAAC,CAAC;AACtB,aAAA;SACJ,EAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAK,CAAC;AACtB,CAAC,CAAC;AAEF,aAAe,IAAI;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/router/Link.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAUA,MAAM,IAAI,GAAwB,CAAC,KAAK,KAAI;IACxC,OAAOA,YAAA,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,EAAE,EAAA,OAAO,EAAE,CAAC,CAAC,KAAI;AAChC,YAAA,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE;gBACZ,cAAc,CAAC,CAAC,CAAC,CAAC;AAClB,gBAAA,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AAC5B,aAAA;AACL,SAAC,IAAG,CAAC;AACT,CAAC,CAAC;AAEF,aAAe,IAAI;;;;"}

package/router/NavLink.js

@@ -1,13 +1,15 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; 
-import { jsx as jsxRuntime_2 } from '../../../node_modules/react/jsx-runtime.js';
+import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { jsx as jsxRuntime_2 } from '../../../node_modules/react/jsx-runtime.js';
 import './HistoryTools.js';
 import Route from './Route.js';
 import Link from './Link.js';
 import { classNames } from '../Tools.js';
 
-const NavLink = (_a) => {
-    var { children, href, highlightPath, className, activeClassName } = _a, other = __rest(_a, [[ReactConstants[4]], "href", "highlightPath", [ReactConstants[5]], "activeClassName"]);
-    return jsxRuntime_2(Route, { path: highlightPath || href, controller: matches => jsxRuntime_2(Link, __extends({ href: href, [ReactConstants[5]]: classNames(className, matches && activeClassName) }, other, { [ReactConstants[4]]: children })) });
+const NavLink = (props) => {
+    const { href, highlightPath, className, activeClassName } = props;
+    const other = __extends({}, props);
+    delete other.activeClassName;
+    delete other.highlightPath;
+    return jsxRuntime_2(Route, { path: highlightPath || href, controller: matches => jsxRuntime_2(Link, __extends({}, props, { [ReactConstants[5]]: classNames(className, matches && activeClassName) })) });
 };
 var NavLink$1 = NavLink;
 

package/router/NavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","sources":["../src/router/NavLink.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;AAaA,MAAM,OAAO,GAA2B,CAAC,EAAmF,KAAI;AAAvF,IAAA,IAAA,EAAC,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe,EAAyB,GAAA,EAAA,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApE,qEAAqE,CAAD,CAAA;AACzG,IAAA,OAAAA,aAAC,KAAK,EAAA,EAAC,IAAI,EAAE,aAAa,IAAI,IAAI,EAC3B,UAAU,EAAE,OAAO,IAAIA,YAAA,CAAC,IAAI,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,IAAI,eAAe,CAAC,EAAM,EAAA,KAAK,cAC3G,QAAQ,EAAA,CAAA,CACN,GACZ,CAAA;CAAA,CAAC;AAEP,gBAAe,OAAO;;;;"}
+{"version":3,"file":"NavLink.js","sources":["../src/router/NavLink.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAYA,MAAM,OAAO,GAA2B,CAAC,KAAK,KAAI;IAC9C,MAAM,EAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,CAAC,CAAA;IACxB,OAAO,KAAK,CAAC,eAAe,CAAA;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAA;AAE1B,IAAA,OAAOA,YAAC,CAAA,KAAK,EACT,EAAA,IAAI,EAAE,aAAa,IAAI,IAAI,EAC3B,UAAU,EAAE,OAAO,IAAIA,YAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,IAAI,eAAe,CAAC,EAAA,CAAA,CAAG,GACzG,CAAC;AACP,CAAC,CAAC;AAEF,gBAAe,OAAO;;;;"}

package/src/AutocompleteSelect.js

@@ -163,6 +163,7 @@ class AutocompleteSelect extends PureComponent {
         childComponent: DummyChild,
         withArrow: true,
         withFilter: true,
+        selectCustomOnClickOutside: true,
         withReset: false,
         scrollToValue: false,
         mode: MODE_DEFAULT,
@@ -223,7 +224,7 @@ class AutocompleteSelect extends PureComponent {
         const hasSelected = __length(selectedIds) !== 0;
         const setActive = (e) => {
             stopPropagation(e);
-            this.setState({isActive: true}, () => (scrollToValue && __length(selectedIds) > 0) && this.list.scrollTo(selectedIds[0]));
+            this.setState({isActive: true}, () => (scrollToValue && __length(selectedIds) > 0) && this.list.selected(selectedIds[0]));
         };
         const toggle = (e) => {
             if (!__state(this).isActive) {
@@ -236,9 +237,9 @@ class AutocompleteSelect extends PureComponent {
 
         const isInline = mode === MODE_INLINE || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI_INLINE;
         const filterValueTrimmed = filterValue.trim();
-        const dataFiltered = allowCustom ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
+        const dataFiltered = allowCustom && !scrollToValue ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
 
-        const filterFunction = this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter)
+        const filterFunction = !scrollToValue ? this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter) : UNDEFINED
         let filteredList = <FilteredList className={classNames(isActive && 'visible', listPortal && 'portal')}
                                          style={listStyles}
                                          ref={ref('list', this)}
@@ -371,7 +372,7 @@ class AutocompleteSelect extends PureComponent {
                                                       } else if (keyCode === 27/*esc*/) {
                                                           this.setState({
                                                               isActive: false,
-                                                              filterValue: isMultipleSelect(mode) ? '' : (allowCustom ? filterValue : ''),
+                                                              filterValue: isMultipleSelect(mode) ? '' : Object.values(selected)[0] || '',
                                                           });
                                                           this.input.getInput().blur()
                                                           this.onCancel();
@@ -389,14 +390,15 @@ class AutocompleteSelect extends PureComponent {
     }
 
     onClickOutside = () => {
-        const {allowCustom, required, onFilterInputChange} = __props(this);
-        const {filterValue} = __state(this);
-        if (allowCustom && (!!filterValue || !required)) {
-            this.onSelect()
+        const {allowCustom, required, onFilterInputChange, mode, selectCustomOnClickOutside} = __props(this);
+        let {filterValue, selected} = __state(this);
+        if (allowCustom && selectCustomOnClickOutside && (!!filterValue || !required)) {
+            selected = this.onSelect()
         }
 
-        this.setState({isActive: false, filterValue: ''});
-        onFilterInputChange && onFilterInputChange('');
+        filterValue = (!isMultipleSelect(mode) && Object.values(selected)[0]) || ''
+        this.setState({isActive: false, filterValue});
+        onFilterInputChange && onFilterInputChange(filterValue);
 
         this.onCancel();
     };
@@ -466,6 +468,7 @@ class AutocompleteSelect extends PureComponent {
 
         orNoop(onSelect)(selectedId);
         orNoop(onChange)(Object.values(selected));
+        return selected
     };
 
     clean = (e) => {
@@ -498,6 +501,11 @@ class AutocompleteSelect extends PureComponent {
     onChange = (event) => {
         const value = __target(event).value;
         this.setState({filterValue: value});
+        const data = __state(this).data || __props(this).data || []
+        if (data.indexOf(value) !== -1) {
+            this.list.selected(value)
+        }
+
         __props(this).onFilterInputChange?.(value);
     }
 }

package/src/FilteredList.css

@@ -37,7 +37,6 @@
   padding-right: 15px;
   cursor: pointer;
   overflow: hidden;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border-left: 5px solid #4AC263;
   padding-left: 15px;
   margin-left: -5px;

package/src/FilteredList.scss

@@ -44,7 +44,6 @@
     padding-right: 15px;
     cursor: pointer;
     overflow: hidden;
-    transition: 0.2s cubic-bezier(.4, 0, .2, 1);
 
     border-left: 5px solid #4AC263;
     padding-left: 15px;

package/src/FilteredList.tsx

@@ -2,7 +2,7 @@ import React, {CSSProperties, MouseEventHandler} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import './FilteredList.css'
 import Scrollable from "./Scrollable";
-import {classNames, orNoop, ref, stopPropagation, isFunction, isObject} from "./Tools";
+import {classNames, orNoop, ref, stopPropagation, isFunction, isObject, UNDEFINED} from "./Tools";
 import {PureComponent} from "./ReactConstants";
 
 type Labels<T> = ((item: T) => string) | { [key: string]: string } | { [key: number]: string };
@@ -44,9 +44,9 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         filter: () => true,
     };
 
-    hidden:Map<T, boolean> = new Map();
-    elements :Map<T, HTMLDivElement> = new Map();
-    list:T[] = [];
+    hidden: Map<T, boolean> = new Map();
+    elements: Map<T, HTMLDivElement> = new Map();
+    list: T[] = [];
     el: Scrollable
 
     constructor(props) {
@@ -114,7 +114,12 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         this.props.onSelect(id);
     };
 
-    selected = (): T => {
+    selected = (id?: T): T => {
+        if (id !== UNDEFINED) {
+            this.setState({selected: id});
+            this.scrollTo(id)
+            return id;
+        }
         const {selected: value} = this.state;
         const {selectSingle} = this.props;
 
@@ -144,7 +149,7 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         if (position < list.length) {
             let id = list[position];
             this.setState({selected: id});
-            this.updateScroll(id)
+            this.scrollTo(id)
         }
     };
 
@@ -162,27 +167,7 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         if (position >= 0) {
             let id = list[position];
             this.setState({selected: id});
-            this.updateScroll(id)
-        }
-    };
-
-    updateScroll = (id) => {
-        const child = this.elements[id];
-        if (!child)
-            return
-
-        const container = this.el;
-        const scrollTop = container.getScroll();
-        const height = container.getHeight();
-        let isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + child.clientHeight;
-        if (!isVisible) {
-            let scrollToBottom = child.offsetTop + child.clientHeight - height;
-            let scrollToTop = child.offsetTop;
-            if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
-                container.setScroll(scrollToTop)
-            } else {
-                container.setScroll(scrollToBottom)
-            }
+            this.scrollTo(id)
         }
     };
 
@@ -191,7 +176,10 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         this.el.setScroll(0)
     };
 
-    scrollTo = (id) => this.el.setScroll(this.elements[id] && this.elements[id].offsetTop);
+    scrollTo = (id: T) => {
+        const child = this.elements.get(id);
+        child && this.el.setScroll(child.offsetTop - (this.el.getHeight() - child.clientHeight) / 2);
+    };
 }
 
 export default FilteredList;

package/src/router/Link.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactCreateElement from '../ReactCreateElement';
 import './HistoryTools'
 import {pushLocation} from "./HistoryTools";
 import {preventDefault} from "../Tools";
@@ -9,13 +8,13 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     className?: string
 }
 
-const Link: React.FC<LinkProps> = ({children, href, className, ...other}) => {
-    return <a href={href} className={className} {...other} onClick={(e) => {
+const Link: React.FC<LinkProps> = (props) => {
+    return <a {...props} onClick={(e) => {
         if (!e.ctrlKey) {
             preventDefault(e);
-            pushLocation(href);
+            pushLocation(props.href);
         }
-    }}>{children}</a>;
+    }}/>;
 };
 
 export default Link;

package/src/router/NavLink.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactCreateElement from '../ReactCreateElement';
 import './HistoryTools'
 import Route from "./Route";
 import Link, {LinkProps} from "./Link";
@@ -11,11 +10,16 @@ export interface NavLinkProps extends LinkProps {
     highlightPath?: string
 }
 
-const NavLink: React.FC<NavLinkProps> = ({children, href, highlightPath, className, activeClassName, ...other}: NavLinkProps) =>
-    <Route path={highlightPath || href}
-           controller={matches => <Link href={href} className={classNames(className, matches && activeClassName)} {...other}>
-               {children}
-           </Link>}
+const NavLink: React.FC<NavLinkProps> = (props) => {
+    const {href, highlightPath, className, activeClassName} = props;
+    const other = {...props}
+    delete other.activeClassName
+    delete other.highlightPath
+
+    return <Route
+        path={highlightPath || href}
+        controller={matches => <Link {...props} className={classNames(className, matches && activeClassName)}/>}
     />;
+};
 
 export default NavLink;