react-ui-basics 0.0.171 → 0.0.174

package/AutocompleteSelect.js

@@ -10,7 +10,7 @@ import ReactCreateElement from './ReactCreateElement.js';
 import PropTypes from 'prop-types';
 import TextField from './TextField.js';
 import FilteredList, { getLabel } from './FilteredList.js';
-import { isString, memo, continuousIncludes, orNoop, isFunction, preventDefault, stopPropagation, getRandomId, isObject, addEventListener, DOCUMENT, removeEventListener, UNDEFINED, classNames, ref } from './Tools.js';
+import { memo, isString, continuousIncludes, orNoop, isObject, preventDefault, stopPropagation, getRandomId, isFunction, addEventListener, DOCUMENT, removeEventListener, UNDEFINED, classNames, ref } from './Tools.js';
 import Button from './Button.js';
 import MaterialIcon from './MaterialIcon.js';
 import { PureComponent } from './ReactConstants.js';
@@ -75,7 +75,7 @@ var AutocompleteSelect = function (_PureComponent) {
           filterValue = _ref3$filterValue === void 0 ? '' : _ref3$filterValue;
       _this.setState({
         selected: prepareSelected(value),
-        filterValue: allowCustom && isString(value) && !isMultipleSelect(mode) ? value : filterValue
+        filterValue: allowCustom && !isMultipleSelect(mode) ? _this.getCustomValue(allowCustom, value, __props(_this).labels) : filterValue
       });
     };
     _this.createFilter = memo(function (prefilter, filterValue, filterValueTrimmed, filter) {
@@ -117,7 +117,15 @@ var AutocompleteSelect = function (_PureComponent) {
           currentSelection = _this$state.selected;
       var _this$props$labels = __props(_this).labels,
           labels = _this$props$labels === void 0 ? {} : _this$props$labels;
-      if (selectedId == null && (!!filterValue || !required) && allowCustom && (!_this.input || !_this.input.check())) selectedId = filterValue.trim();
+      if (selectedId == null && (!!filterValue || !required) && allowCustom && (!_this.input || !_this.input.check())) {
+        var trimmedValue = filterValue.trim();
+        if (isObject(labels)) {
+          var key = Object.keys(labels).find(function (key) {
+            return labels[key] === trimmedValue;
+          });
+          if (key) selectedId = key;
+        }
+      }
       var isMultiSelect = isMultipleSelect(mode);
       if (!selectedId && isMultiSelect) {
         selectedId = null;
@@ -134,12 +142,7 @@ var AutocompleteSelect = function (_PureComponent) {
       }
       var errored = required && Object.keys(selected) === 0;
       var isActive = mode === MODE_MULTIPLE_MINI_INLINE || isMultiSelect && isSelected;
-      var customValue = '';
-      if (allowCustom && selectedId) {
-        var label;
-        if (isFunction(labels)) label = labels(selectedId);else label = labels[selectedId];
-        if (label && isString(label)) customValue = label;
-      }
+      var customValue = _this.getCustomValue(allowCustom, selectedId, labels) || '';
       var filterValueWithCustom = isMultiSelect ? '' : customValue;
       _this.setState({
         isActive: isActive,
@@ -439,6 +442,17 @@ var AutocompleteSelect = function (_PureComponent) {
         labels: labels
       }));
     }
+  }, {
+    key: "getCustomValue",
+    value: function getCustomValue(allowCustom, selectedId) {
+      var labels = __length(arguments) > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      if (allowCustom && selectedId) {
+        var label;
+        if (isFunction(labels)) label = labels(selectedId);else label = labels[selectedId];
+        if (label && isString(label)) return label;
+      }
+      return '';
+    }
   }]);
   return AutocompleteSelect;
 }(PureComponent);

package/ImageGallery.js

@@ -789,8 +789,10 @@ var ImageGalleryContainer = function (_React$Component2) {
     };
     var dispatch = function dispatch(action) {
       return setTimeout(function () {
-        var state = IMAGE_GALLERY_REDUCER(__state(that), action);
-        if (state !== __state(that)) that.setState(state);
+        that.setState(function (state) {
+          state = IMAGE_GALLERY_REDUCER(state, action);
+          return state;
+        });
       }, 0);
     };
     var props = propsGetter(that);

package/Table.d.ts

@@ -7,6 +7,7 @@ declare type Comparator = <T>(a: T, b: T) => number;
 declare const editorSelect = "Select";
 declare const editorSwitch = "Switch";
 export interface RowProps<T> {
+    i: number;
     item: T;
     disabled?: (t: T) => boolean;
     editing: any;
@@ -17,12 +18,19 @@ export interface RowProps<T> {
     onFinishEditing: () => void;
     handleInputChange: (e: ChangeEvent) => void;
     setValue: (v: any) => void;
-    setEditing: (t: T, i: number, field: string) => void;
+    setEditing: (t: T, i: number, value?: any) => void;
+    onMouseDown?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseUp?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseEnter?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseLeave?: (e: SyntheticEvent, row: number, column: number) => void;
 }
 export declare type Formatter<T, V> = ((value?: V, item?: T, format?: string) => ReactElement | string) | ((value: V, item: T) => ReactElement | string) | ((value: V) => ReactElement | string);
+export declare type CellClassName<T> = (item: T, field: string, row: number, column: number) => string;
+export declare type ColumnClassName<T> = string | CellClassName<T>;
 export interface TableColumn<T> {
     field?: string;
-    className?: string;
+    className?: ColumnClassName<T>;
+    onClick?: (e: SyntheticEvent, startEditing: () => void, item: T, field: string, row: number, column: number) => void;
     comparator?: Comparator;
     header?: string | ReactElement;
     sortable?: boolean;
@@ -45,6 +53,10 @@ export interface TableProps<T> {
     toKey?: (t: T) => number | string;
     onChange?: (t: T, cancel: () => void) => void;
     rowClassName?: string | ((t: T) => string);
+    onMouseDown?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseUp?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseEnter?: (e: SyntheticEvent, row: number, column: number) => void;
+    onMouseLeave?: (e: SyntheticEvent, row: number, column: number) => void;
 }
 export interface TableState<T> {
     sortOrder?: SortOrder;
@@ -53,6 +65,9 @@ export interface TableState<T> {
     data?: T[];
 }
 declare class Table<T> extends Component<TableProps<T>, TableState<T>> {
+    startEditing: (item: any, columnIndex: any, value?: any) => void;
+    finishEditing: () => void;
+    isEditing: () => boolean;
     constructor(properties: any);
 }
 export interface TableColumnSelect extends TableColumn<any> {

package/Table.js

@@ -10,7 +10,7 @@ import { Component } from 'react';
 import TextField from './TextField.js';
 import AutocompleteSelect, { MODE_MULTIPLE_MINI, MODE_DEFAULT } from './AutocompleteSelect.js';
 import Switch from './Switch.js';
-import { setInterval, classNames, isFunction, NOOP, preventDefault, stopPropagation, Comparators, createRef, createAccessor, isString, orNoop } from './Tools.js';
+import { setInterval, classNames, isFunction, UNDEFINED, isString, preventDefault, stopPropagation, Comparators, createRef, createAccessor, orNoop, NOOP } from './Tools.js';
 import MaterialIcon from './MaterialIcon.js';
 import { stateGSs, componentDidMount, componentDidUpdate, render, componentWillUnmount, PureComponent, propsGetter } from './ReactConstants.js';
 
@@ -38,9 +38,13 @@ var Table = /** @class */ (function (_super) {
         var cancelEditing = function () {
             editingState(false);
         };
-        var setEditing = function (item, columnIndex, field) {
-            editingState({ id: item.id, value: item[field], columnIndex: columnIndex, item: item, field: field });
+        var setEditing = function (item, columnIndex, value) {
+            var columns = props().columns;
+            var field = columns[columnIndex].field;
+            editingState({ id: item.id, value: (value != null ? value : item[field]), columnIndex: columnIndex, item: item, field: field });
         };
+        _this.startEditing = setEditing;
+        _this.isEditing = function () { return !!editingState(); };
         var handleInputChange = function (event) {
             var target = __target(event);
             var value = target.type === 'checkbox' ? target.checked : __value(target);
@@ -49,7 +53,7 @@ var Table = /** @class */ (function (_super) {
         var onFinishEditing = function () {
             var _a;
             var editing = editingState();
-            if (__value(editing) === null)
+            if (!editing || __value(editing) === null)
                 return;
             var value = __value(editing);
             if (isString(value))
@@ -59,6 +63,7 @@ var Table = /** @class */ (function (_super) {
             var updated = __extends(__extends({}, editing.item), (_a = {}, _a[editing.field] = value, _a));
             props()[ReactConstants[7]](updated, cancelEditing);
         };
+        _this.finishEditing = onFinishEditing;
         var setValue = function (value) {
             editingState(__extends(__extends({}, editingState()), { value: value }), onFinishEditing);
         };
@@ -102,7 +107,7 @@ var Table = /** @class */ (function (_super) {
             updateHeaders();
         };
         _this[ReactConstants[3]] = function () {
-            var _a = props(), _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.onRowClick, onRowClick = _c === void 0 ? NOOP : _c, disabled = _a.disabled, className = _a[ReactConstants[5]], rowClassName = _a.rowClassName, _d = _a.toKey, toKey = _d === void 0 ? getId : _d;
+            var _a = props(), _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.onRowClick, onRowClick = _c === void 0 ? NOOP : _c, disabled = _a.disabled, className = _a[ReactConstants[5]], rowClassName = _a.rowClassName, _d = _a.toKey, toKey = _d === void 0 ? getId : _d, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
             var sortBy = sortByState();
             var sortOrder = sortOrderState();
             var editing = editingState();
@@ -110,7 +115,7 @@ var Table = /** @class */ (function (_super) {
             return (jsxRuntime_1("table", __extends({ [ReactConstants[5]]: classNames("Table", className) }, { [ReactConstants[4]]: [jsxRuntime_2("thead", { [ReactConstants[4]]: jsxRuntime_2("tr", __extends({ ref: headers }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column, i) {
                                 var sortable = column.sortable || column.sortable == null;
                                 return (jsxRuntime_1("th", __extends({ [ReactConstants[6]]: function (e) { return sortable && sort(e, column.field, comparatorGetter(column)); } }, { [ReactConstants[4]]: [jsxRuntime_1("div", __extends({ [ReactConstants[5]]: classNames('hidden', sortable && 'sortable', sortBy === column.field && 'active') }, { [ReactConstants[4]]: [column.header, column.header && sortBy === column.field && sortOrder === SORT_ASC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_up' })), column.header && sortBy === column.field && sortOrder === SORT_DESC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_down' }))] })), jsxRuntime_1("div", __extends({ [ReactConstants[5]]: classNames('fixed', sortable && 'sortable', sortBy === column.field && 'active') }, { [ReactConstants[4]]: [column.header, column.header && sortBy === column.field && sortOrder === SORT_ASC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_up' })), column.header && sortBy === column.field && sortOrder === SORT_DESC && (jsxRuntime_2(MaterialIcon, { icon: 'keyboard_arrow_down' }))] }))] }), i));
-                            }) })) }), jsxRuntime_2("tbody", { [ReactConstants[4]]: data.map(function (item) { return (jsxRuntime_2(Row, { item: item, disabled: disabled, editing: editing && editing.id === toKey(item) ? editing : null, [ReactConstants[6]]: onRowClick, [ReactConstants[5]]: rowClassName, columns: columns, setEditing: setEditing, cancelEditing: cancelEditing, onFinishEditing: onFinishEditing, handleInputChange: handleInputChange, setValue: setValue }, toKey(item))); }) })] })));
+                            }) })) }), jsxRuntime_2("tbody", { [ReactConstants[4]]: data.map(function (item, i) { return (jsxRuntime_2(Row, { i: i, item: item, disabled: disabled, editing: editing && editing.id === toKey(item) ? editing : null, [ReactConstants[6]]: onRowClick, [ReactConstants[5]]: rowClassName, columns: columns, setEditing: setEditing, cancelEditing: cancelEditing, onFinishEditing: onFinishEditing, handleInputChange: handleInputChange, setValue: setValue, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, toKey(item))); }) })] })));
         };
         _this[ReactConstants[1]] = function () {
             clearInterval(updateHeadersInterval);
@@ -130,11 +135,19 @@ var Row = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Row.prototype[ReactConstants[3]] = function () {
-        var _a = __props(this), item = _a.item, disabled = _a.disabled, editing = _a.editing, onClick = _a[ReactConstants[6]], className = _a[ReactConstants[5]], columns = _a.columns, setEditing = _a.setEditing, cancelEditing = _a.cancelEditing, onFinishEditing = _a.onFinishEditing, handleInputChange = _a.handleInputChange, setValue = _a.setValue;
-        return jsxRuntime_2("tr", __extends({ [ReactConstants[6]]: function (e) { return onClick(item, e); }, [ReactConstants[5]]: classNames(disabled && disabled(item) && 'disabled', className && (isFunction(className) ? className(item) : className)) }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column, i) {
-                var isEditing = editing && editing.columnIndex === i;
+        var _a = __props(this), item = _a.item, i = _a.i, disabled = _a.disabled, editing = _a.editing, onClick = _a[ReactConstants[6]], className = _a[ReactConstants[5]], columns = _a.columns, setEditing = _a.setEditing, cancelEditing = _a.cancelEditing, onFinishEditing = _a.onFinishEditing, handleInputChange = _a.handleInputChange, setValue = _a.setValue, onMouseDown = _a.onMouseDown, onMouseEnter = _a.onMouseEnter, onMouseUp = _a.onMouseUp, onMouseLeave = _a.onMouseLeave;
+        return jsxRuntime_2("tr", __extends({ [ReactConstants[6]]: function (e) { return onClick(item, e); }, [ReactConstants[5]]: classNames(disabled && disabled(item) && 'disabled', className && (isFunction(className) ? className(item) : className)) }, { [ReactConstants[4]]: columns.filter(function (it) { return !!it; }).map(function (column, j) {
+                var isEditing = editing && editing.columnIndex === j;
                 var editable = isFunction(column.editable) ? column.editable(item) : !!column.editable;
-                return (jsxRuntime_1("td", __extends({ [ReactConstants[5]]: classNames(editable ? 'editable' : 'ro', isEditing && 'editing', column[ReactConstants[5]]), [ReactConstants[6]]: !isEditing && editable ? function () { return setEditing(item, i, column.field); } : NOOP }, { [ReactConstants[4]]: [(isEditing || column.displayEditor) && !column.editor && (jsxRuntime_2(TextField, { value: column.preEditor ? column.preEditor(__value(editing)) : __value(editing), focused: true, onBlur: cancelEditing, [ReactConstants[7]]: handleInputChange, onKeyDown: function (e) {
+                var startEditing = !isEditing && editable ? function () { return setEditing(item, j); } : NOOP;
+                var onClick = (!!column[ReactConstants[6]] ? function (e) { return column[ReactConstants[6]](e, startEditing, item, column.field, i, j); } : startEditing);
+                var displayEditor = isEditing || column.displayEditor;
+                var value = item[column.field];
+                if (editing) {
+                    value = __value(editing) != null ? __value(editing) : value;
+                    value = column.preEditor ? column.preEditor(value) : value;
+                }
+                return (jsxRuntime_1("td", __extends({ onMouseDown: onMouseDown ? function (e) { return onMouseDown(e, i, j); } : UNDEFINED, onMouseUp: onMouseUp ? function (e) { return onMouseUp(e, i, j); } : UNDEFINED, onMouseEnter: onMouseEnter ? function (e) { return onMouseEnter(e, i, j); } : UNDEFINED, onMouseLeave: onMouseLeave ? function (e) { return onMouseLeave(e, i, j); } : UNDEFINED, [ReactConstants[5]]: classNames(editable ? 'editable' : 'ro', isEditing && 'editing', isString(column[ReactConstants[5]]) && column[ReactConstants[5]], isFunction(column[ReactConstants[5]]) && column[ReactConstants[5]](item, column.field, i, j)), [ReactConstants[6]]: onClick }, { [ReactConstants[4]]: [displayEditor && !column.editor && (jsxRuntime_2(TextField, { value: value, focused: true, onBlur: cancelEditing, [ReactConstants[7]]: handleInputChange, onKeyDown: function (e) {
                                 if (e.keyCode === 27 /*escape*/) {
                                     preventDefault(e);
                                     cancelEditing();
@@ -143,12 +156,12 @@ var Row = /** @class */ (function (_super) {
                                     preventDefault(e);
                                     onFinishEditing();
                                 }
-                            } })), (isEditing || column.displayEditor) && column.editor === editorSelect && (jsxRuntime_2(AutocompleteSelect, { value: column.preEditor ? column.preEditor(__value(editing)) : __value(editing), data: column.editorData, focused: true, withArrow: false, withFilter: false, selectedMode: 'inline', selectedComponent: column.editorSelectedComponent, mode: column.multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT, [ReactConstants[7]]: column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), onSelect: !column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), childComponent: column.editorChildCompononent, onCancel: cancelEditing, prefilter: column.prefilter })), (isEditing || column.displayEditor) && column.editor === editorSwitch && (jsxRuntime_2(Switch, { [ReactConstants[6]]: function (e) {
+                            } })), displayEditor && column.editor === editorSelect && (jsxRuntime_2(AutocompleteSelect, { value: value, data: column.editorData, focused: true, withArrow: false, withFilter: false, selectedMode: 'inline', selectedComponent: column.editorSelectedComponent, mode: column.multiSelect ? MODE_MULTIPLE_MINI : MODE_DEFAULT, [ReactConstants[7]]: column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), onSelect: !column.multiSelect && (column.onSelect ? (function (value) { return setValue(column.onSelect(value)); }) : setValue), childComponent: column.editorChildCompononent, onCancel: cancelEditing, prefilter: column.prefilter })), displayEditor && column.editor === editorSwitch && (jsxRuntime_2(Switch, { [ReactConstants[6]]: function (e) {
                                 stopPropagation(e);
                                 preventDefault(e);
-                                setValue(!item[column.field]);
-                            }, value: item[column.field] })), (isEditing || column.displayEditor) && isFunction(column.editor)
-                            && column.editor(item, cancelEditing, isEditing), !isEditing && !column.displayEditor && formatValue(item, column)] }), i));
+                                setValue(!value);
+                            }, value: value })), displayEditor && isFunction(column.editor)
+                            && column.editor(item, cancelEditing, isEditing), !isEditing && !column.displayEditor && formatValue(item, column)] }), j));
             }) }));
     };
     return Row;

package/TextField.js

@@ -113,8 +113,10 @@ var TextField = function (_PureComponent) {
       var hasValue = !!__value(i);
       isWithValue(hasValue);
       !hasValue && setTimeout(function () {
-        var matches = i.matches(':-internal-autofill-selected');
-        matches && isWithValue(matches);
+        try {
+          var matches = i.matches(':-internal-autofill-selected');
+          matches && isWithValue(matches);
+        } catch (ignored) {}
       }, 100);
       focused && i.focus();
       orNoop(input)(i);

package/bundle.css

@@ -1,3 +1,12 @@
+.animated {
+  transition: opacity 250ms ease;
+  opacity: 0;
+}
+
+.animated.mounting, .animated.mounted {
+  opacity: 1;
+}
+
 .Button {
   position: relative;
   min-width: 64px;
@@ -164,70 +173,6 @@
   border: 0;
 }
 
-.CircleProgress {
-  width: 48px;
-  height: 48px;
-}
-
-.CircleProgress .line {
-  stroke-width: 2px;
-  stroke: black;
-  stroke-linecap: square;
-  fill: none;
-  transition: stroke-dashoffset 0.2s ease;
-}
-
-.animated {
-  transition: opacity 250ms ease;
-  opacity: 0;
-}
-
-.animated.mounting, .animated.mounted {
-  opacity: 1;
-}
-
-.DialogModal {
-  overflow: hidden;
-}
-
-.DialogModal .content {
-  top: 20vh;
-}
-
-.Dialog {
-  background-color: white;
-  min-width: 460px;
-  max-width: 40vw;
-  padding: 15px;
-}
-
-.Dialog .title {
-  margin-bottom: 15px;
-  padding: 20px 50px 0px 30px;
-  font-size: 1.25rem;
-  line-height: 2rem;
-  font-weight: 400;
-  letter-spacing: 0.0125em;
-}
-
-.Dialog .description {
-  color: rgba(0, 0, 0, 0.54);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
-  letter-spacing: 0.03125em;
-  margin-top: 20px;
-  padding: 0 24px 24px;
-}
-
-.Dialog > div.row {
-  margin-bottom: 15px;
-}
-
-.Dialog > div.row:last-child {
-  margin-bottom: 0;
-}
-
 .Checkbox {
   position: relative;
   white-space: pre;
@@ -295,33 +240,6 @@
   background: rgba(0, 0, 0, 0.26);
 }
 
-.DropFileInput {
-  flex-grow: 1;
-}
-
-.DropFileInput .Dropzone {
-  border: 1px dashed #808080;
-  padding: 12px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-  align-items: center;
-  color: gray;
-  cursor: pointer;
-  border-radius: 3px;
-  font-weight: normal;
-  line-height: 22px;
-  font-size: 14px;
-  color: #7E7E7E;
-  max-width: 100%;
-  word-break: break-all;
-  word-break: break-word;
-}
-
-.DropFileInput .Dropzone .icon.withText {
-  margin-right: 10px;
-}
-
 .AutocompleteSelect {
   display: inline-flex;
   flex-flow: column;
@@ -649,6 +567,61 @@
   pointer-events: none;
 }
 
+.DialogModal {
+  overflow: hidden;
+}
+
+.DialogModal .content {
+  top: 20vh;
+}
+
+.Dialog {
+  background-color: white;
+  min-width: 460px;
+  max-width: 40vw;
+  padding: 15px;
+}
+
+.Dialog .title {
+  margin-bottom: 15px;
+  padding: 20px 50px 0px 30px;
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: 400;
+  letter-spacing: 0.0125em;
+}
+
+.Dialog .description {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  letter-spacing: 0.03125em;
+  margin-top: 20px;
+  padding: 0 24px 24px;
+}
+
+.Dialog > div.row {
+  margin-bottom: 15px;
+}
+
+.Dialog > div.row:last-child {
+  margin-bottom: 0;
+}
+
+.CircleProgress {
+  width: 48px;
+  height: 48px;
+}
+
+.CircleProgress .line {
+  stroke-width: 2px;
+  stroke: black;
+  stroke-linecap: square;
+  fill: none;
+  transition: stroke-dashoffset 0.2s ease;
+}
+
 .Scrollable {
   max-height: 250px;
   max-width: 250px;
@@ -768,6 +741,33 @@
   bottom: -100px;
 }
 
+.DropFileInput {
+  flex-grow: 1;
+}
+
+.DropFileInput .Dropzone {
+  border: 1px dashed #808080;
+  padding: 12px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  color: gray;
+  cursor: pointer;
+  border-radius: 3px;
+  font-weight: normal;
+  line-height: 22px;
+  font-size: 14px;
+  color: #7E7E7E;
+  max-width: 100%;
+  word-break: break-all;
+  word-break: break-word;
+}
+
+.DropFileInput .Dropzone .icon.withText {
+  margin-right: 10px;
+}
+
 .ImageGallery {
   position: fixed;
   top: 0;
@@ -1063,57 +1063,171 @@
   z-index: 1;
 }
 
-.Modal {
-  display: block;
+.Snackbar {
+  transform: translateX(-50%);
+  overflow: hidden;
+  background-color: #323232;
+  padding: 14px 24px 14px 24px;
+  color: #fff;
+  min-width: 288px;
+  max-width: 568px;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 100%;
-  overflow-y: scroll;
-  transition: bottom 0ms linear;
-  transition-delay: 0.2s;
+  bottom: -50px;
+  left: 50%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  opacity: 0;
+  transition: bottom 0.25s ease, opacity 0.2s ease;
+  border-radius: 4px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
 
-.Modal.show {
-  transition-delay: 0s;
-  bottom: 0;
+.Snackbar.shown {
+  bottom: 15px;
+  opacity: 1;
 }
 
-.Modal > .overlay {
-  position: fixed;
-  top: 0;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: 0;
-  background-color: black;
-  pointer-events: none;
+.Snackbar .message {
+  overflow: hidden;
+  line-height: 1.2em;
+  min-height: 1.2em;
+  max-height: 2.4em;
+  flex: 1;
 }
 
-.Modal > .overlay.show {
-  opacity: 0.5;
-  bottom: 0;
+.Snackbar .action {
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-left: 48px;
+  color: #bf3727;
 }
 
-.Modal > .content {
-  left: 50%;
-  top: 10vh;
-  margin-bottom: 10vh;
-  font-size: 16px;
-  padding: 0;
-  opacity: 0;
-  transition: opacity 0.25s ease, transform 0.25s ease;
-  transform: scaleY(0) translateY(-200px) translateX(-50%);
-  transform-origin: top;
-  position: absolute;
-  border-radius: 2px;
-  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
+.Snackbar .action a {
+  text-decoration: none;
+  color: #bf3727;
 }
 
-.Modal > .content.show {
-  opacity: 1;
+.FormUploadProgress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 2;
+}
+
+.FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
+  transition-delay: 500ms;
+}
+
+.FormUploadProgress .wrapper {
+  position: sticky;
+  top: 40%;
+  margin-top: 40%;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
+  position: absolute;
+  width: 107px;
+  height: 107px;
+  top: 0;
+  left: 0;
+}
+
+.FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
+  stroke: #2196F3;
+}
+
+.FormUploadProgress .wrapper > .progress {
+  width: 107px;
+  height: 107px;
+  min-height: 107px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  background: white;
+  position: relative;
+}
+
+.FormUploadProgress .wrapper > .progress > .value {
+  display: inline-block;
+  margin-top: 5px;
+  font-weight: bold;
+  line-height: 16px;
+  font-size: 13px;
+  text-align: center;
+  color: #818181;
+}
+
+.FormUploadProgress .wrapper .cancel {
+  min-width: 107px;
+  margin-top: 20px;
+  background-color: white;
+  color: #F96B5C;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+}
+
+.Modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  overflow-y: scroll;
+  transition: bottom 0ms linear;
+  transition-delay: 0.2s;
+}
+
+.Modal.show {
+  transition-delay: 0s;
+  bottom: 0;
+}
+
+.Modal > .overlay {
+  position: fixed;
+  top: 0;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0;
+  background-color: black;
+  pointer-events: none;
+}
+
+.Modal > .overlay.show {
+  opacity: 0.5;
+  bottom: 0;
+}
+
+.Modal > .content {
+  left: 50%;
+  top: 10vh;
+  margin-bottom: 10vh;
+  font-size: 16px;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  transform: scaleY(0) translateY(-200px) translateX(-50%);
+  transform-origin: top;
+  position: absolute;
+  border-radius: 2px;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
+}
+
+.Modal > .content.show {
+  opacity: 1;
   transform: scaleY(1) translateY(0px) translateX(-50%);
 }
 
@@ -1170,133 +1284,6 @@
   margin-left: 4px;
 }
 
-.Snackbar {
-  transform: translateX(-50%);
-  overflow: hidden;
-  background-color: #323232;
-  padding: 14px 24px 14px 24px;
-  color: #fff;
-  min-width: 288px;
-  max-width: 568px;
-  position: fixed;
-  bottom: -50px;
-  left: 50%;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  opacity: 0;
-  transition: bottom 0.25s ease, opacity 0.2s ease;
-  border-radius: 4px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-}
-
-.Snackbar.shown {
-  bottom: 15px;
-  opacity: 1;
-}
-
-.Snackbar .message {
-  overflow: hidden;
-  line-height: 1.2em;
-  min-height: 1.2em;
-  max-height: 2.4em;
-  flex: 1;
-}
-
-.Snackbar .action {
-  text-transform: uppercase;
-  font-weight: bold;
-  margin-left: 48px;
-  color: #bf3727;
-}
-
-.Snackbar .action a {
-  text-decoration: none;
-  color: #bf3727;
-}
-
-.Switch {
-  display: inline-flex;
-  padding-top: 5px;
-}
-
-.Switch .switch-input {
-  display: none;
-}
-
-.Switch .switch-label {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-width: 38px;
-  height: 24px;
-  cursor: pointer;
-  font-weight: 500;
-  text-align: left;
-  user-select: none;
-  margin: 0;
-  padding: 0;
-  padding-left: 44px;
-  box-sizing: border-box;
-}
-
-.Switch .switch-label:before, .Switch .switch-label:after {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  margin: 0;
-  outline: 0;
-  top: 50%;
-  transform: translate(0, -50%);
-  transition: all 0.3s ease;
-}
-
-.Switch .switch-label:before {
-  left: 1px;
-  width: 34px;
-  height: 14px;
-  background-color: #9E9E9E;
-  border-radius: 8px;
-}
-
-.Switch .switch-label:after {
-  left: 0;
-  width: 20px;
-  height: 20px;
-  background-color: #FAFAFA;
-  border-radius: 50%;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
-}
-
-.Switch .switch-label .toggle--on {
-  display: none;
-}
-
-.Switch .switch-label .toggle--off {
-  display: inline-block;
-}
-
-.Switch .switch-label .label {
-  margin-right: 5px;
-}
-
-.Switch .switch-input:checked + .switch-label:before {
-  background-color: #A5D6A7;
-}
-
-.Switch .switch-input:checked + .switch-label:after {
-  background-color: #4CAF50;
-  transform: translate(80%, -50%);
-}
-
-.Switch .switch-input:checked + .switch-label .toggle--on {
-  display: inline-block;
-}
-
-.Switch .switch-input:checked + .switch-label .toggle--off {
-  display: none;
-}
-
 .TextField {
   position: relative;
   width: 100%;
@@ -1440,73 +1427,22 @@
   animation-name: shake;
 }
 
-.FormUploadProgress {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.6);
-  z-index: 2;
-}
-
-.FormUploadProgress.animated.mounting, .FormUploadProgress.animated.mounted {
-  transition-delay: 500ms;
-}
-
-.FormUploadProgress .wrapper {
-  position: sticky;
-  top: 40%;
-  margin-top: 40%;
-  margin-left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.FormUploadProgress .wrapper .CircleProgress, .FormUploadProgress .wrapper .SpinningProgress {
-  position: absolute;
-  width: 107px;
-  height: 107px;
-  top: 0;
-  left: 0;
-}
-
-.FormUploadProgress .wrapper .CircleProgress .line, .FormUploadProgress .wrapper .SpinningProgress .line {
-  stroke: #2196F3;
+.DNDContainer .DroppableList .Draggable {
+  transform: unset;
+  transition: unset;
+  opacity: 1;
 }
 
-.FormUploadProgress .wrapper > .progress {
-  width: 107px;
-  height: 107px;
-  min-height: 107px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
-  border-radius: 50%;
-  background: white;
-  position: relative;
+.DNDContainer .DroppableList .Draggable.dragged {
+  transition: unset !important;
 }
 
-.FormUploadProgress .wrapper > .progress > .value {
-  display: inline-block;
-  margin-top: 5px;
-  font-weight: bold;
-  line-height: 16px;
-  font-size: 13px;
-  text-align: center;
-  color: #818181;
+.DNDContainer .DroppableList.hover .Draggable {
+  transition: transform 0.2s ease-in;
 }
 
-.FormUploadProgress .wrapper .cancel {
-  min-width: 107px;
-  margin-top: 20px;
-  background-color: white;
-  color: #F96B5C;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
+.DNDContainer .DroppableList.resetting .Draggable {
+  transition: transform 0.1s ease-in;
 }
 
 .SpinningProgress {
@@ -1562,22 +1498,86 @@
     stroke-dashoffset: -53px;
   }
 }
-.DNDContainer .DroppableList .Draggable {
-  transform: unset;
-  transition: unset;
-  opacity: 1;
+.Switch {
+  display: inline-flex;
+  padding-top: 5px;
 }
 
-.DNDContainer .DroppableList .Draggable.dragged {
-  transition: unset !important;
+.Switch .switch-input {
+  display: none;
 }
 
-.DNDContainer .DroppableList.hover .Draggable {
-  transition: transform 0.2s ease-in;
+.Switch .switch-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 38px;
+  height: 24px;
+  cursor: pointer;
+  font-weight: 500;
+  text-align: left;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  padding-left: 44px;
+  box-sizing: border-box;
 }
 
-.DNDContainer .DroppableList.resetting .Draggable {
-  transition: transform 0.1s ease-in;
+.Switch .switch-label:before, .Switch .switch-label:after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  margin: 0;
+  outline: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  transition: all 0.3s ease;
+}
+
+.Switch .switch-label:before {
+  left: 1px;
+  width: 34px;
+  height: 14px;
+  background-color: #9E9E9E;
+  border-radius: 8px;
+}
+
+.Switch .switch-label:after {
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #FAFAFA;
+  border-radius: 50%;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
+}
+
+.Switch .switch-label .toggle--on {
+  display: none;
+}
+
+.Switch .switch-label .toggle--off {
+  display: inline-block;
+}
+
+.Switch .switch-label .label {
+  margin-right: 5px;
+}
+
+.Switch .switch-input:checked + .switch-label:before {
+  background-color: #A5D6A7;
+}
+
+.Switch .switch-input:checked + .switch-label:after {
+  background-color: #4CAF50;
+  transform: translate(80%, -50%);
+}
+
+.Switch .switch-input:checked + .switch-label .toggle--on {
+  display: inline-block;
+}
+
+.Switch .switch-input:checked + .switch-label .toggle--off {
+  display: none;
 }
 
 .FilteredList {
@@ -1661,6 +1661,14 @@
   margin-bottom: 8px;
 }
 
+.ScrollableTable .Scrollable .scrollbar {
+  top: 56px;
+}
+
+.ScrollableTable .Table {
+  position: static;
+}
+
 .Table {
   font-family: Roboto, sans-serif;
   font-size: 14px;
@@ -1773,12 +1781,4 @@
   height: 20px;
   padding: 0px;
   background-color: #f0f0f0;
-}
-
-.ScrollableTable .Scrollable .scrollbar {
-  top: 56px;
-}
-
-.ScrollableTable .Table {
-  position: static;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.171",
+  "version": "0.0.174",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",
@@ -15,9 +15,9 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "prop-types": ">= 15.7.2",
+    "react": ">= 17.0.0",
+    "react-dom": ">= 17.0.0",
     "tslib": "^2.3.1"
   },
   "scripts": {