@singularsystems/neo-react 0.10.58 → 0.10.62

package/dist/ReactComponents/DatePicker.d.ts

@@ -12,6 +12,7 @@ export default class DatePicker extends ComponentBase<INeoDatePickerProps> {
     private container;
     private datePicker?;
     private isReadOnly;
+    private inputRef;
     constructor(props: INeoDatePickerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/ReactComponents/DatePicker.js

@@ -11,6 +11,7 @@ var DatePicker = /** @class */ (function (_super) {
     function DatePicker(props) {
         var _this = _super.call(this, props) || this;
         _this.isReadOnly = false;
+        _this.inputRef = React.createRef();
         _this.container = React.createRef();
         return _this;
     }
@@ -33,6 +34,9 @@ var DatePicker = /** @class */ (function (_super) {
         this.isReadOnly = !!domProps.readOnly;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
+        if (splitProps.editor.inputElement) {
+            this.inputRef = splitProps.editor.inputElement;
+        }
         if (this.datePicker) {
             this.datePicker.update(splitProps.dateProps, this.props.bind, this.isReadOnly);
         }
@@ -40,8 +44,8 @@ var DatePicker = /** @class */ (function (_super) {
             // Create dependency on bound value on initial render.
             void this.props.bind.value;
         }
-        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, !(splitProps.dateProps && splitProps.dateProps.alwaysShow) &&
-            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: splitProps.editor.inputElement })), splitProps.editor)));
+        return (React.createElement("div", { className: "neo-datepicker-container", ref: this.container }, Components.DatePicker.mustShowInput(splitProps.dateProps) &&
+            InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({ type: "text" }, domProps, { ref: this.inputRef })), splitProps.editor, this.inputRef)));
     };
     DatePicker.contextType = FormContext;
     DatePicker = __decorate([

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -21,6 +21,10 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     items?: ItemSource<T>;
     valueMember?: keyof T;
     displayMember?: keyof T;
+    /**
+     * Function used to filter items out of the datasource.
+     * **Note:** this will only apply to the `items` prop. */
+    filterPredicate?: (item: T) => boolean;
     /**
      * Property of an item to use as the description.
      *

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -134,6 +134,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         var defaultItems = undefined;
         if (this.props.items) {
             var items_1 = this.getItems(this.props.items);
+            if (this.props.filterPredicate !== undefined) {
+                items_1 = items_1.filter(this.props.filterPredicate);
+            }
             defaultItems = this.mapTArrayToOptions(items_1);
             if (descriptionMember === undefined && items_1.length > 0) {
                 if (EnumHelper.isEnumItem(items_1[0])) {

package/dist/ReactComponents/DropDown/DropDown.js

@@ -118,9 +118,12 @@ var DropDown = /** @class */ (function (_super) {
             }
             var valueIsBlank = value === undefined || value === null;
             var nullText = (valueIsBlank || ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.deSelectText) === undefined) ? (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.nullText : (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.deSelectText;
+            if (valueIsBlank) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
+            }
             control =
                 React.createElement("select", __assign({ value: valueIsBlank ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
-                    addBlankItem && React.createElement("option", null, nullText),
+                    addBlankItem && React.createElement("option", { className: "option-default" }, nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));

package/dist/ReactComponents/Form.js

@@ -40,7 +40,7 @@ var Form = /** @class */ (function (_super) {
                     var onClose = this.disposeReaction.bind(this);
                     var codeModal_1 = ModalUtils.showModal(this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
                         return React.createElement("div", null,
-                            _this.props.invalidSummaryText || "Cannot continue due to the following errors:",
+                            _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
                             React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(model), hideTopLevelTitle: !(model instanceof Array) }));
                     }), { onClose: onClose, closeButton: { text: "Ok", onClick: onClose } });
                     // Listen for when isValid changes to true, in case there is an async rule running.

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -72,7 +72,7 @@ var ButtonColumn = /** @class */ (function (_super) {
             React.createElement("th", __assign({}, domProps), this.section === "header" && label) :
             React.createElement("td", __assign({}, domProps),
                 childAlignment === "right" ? buttons : undefined,
-                this.props.children,
+                this.props.children instanceof Function ? this.props.children() : this.props.children,
                 childAlignment !== "right" ? buttons : undefined));
     };
     ButtonColumn.isColumnComponent = true;

package/dist/ReactComponents/Grid/Column.js

@@ -163,7 +163,7 @@ var Column = /** @class */ (function (_super) {
             if (editorProps.isReadOnly && !editorProps.requiresGroup) {
                 var rawValue = editorProps.bind.value;
                 if (this.controlType == ControlType.Number) {
-                    displayValue = this.numFormatState(editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
+                    displayValue = this.numFormatState(editorProps.bind.propertyInfo, editorProps.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(rawValue);
                 }
                 else if (this.controlType == ControlType.Date) {
                     displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
@@ -197,7 +197,7 @@ var Column = /** @class */ (function (_super) {
         var hasSummary = (colProps.sum && !!props.bind) || colProps.footerContent;
         return (React.createElement("th", __assign({}, domProps), hasSummary &&
             React.createElement(Observer, null, function () { return colProps.footerContent ? colProps.footerContent(_this.context.dataView.filteredItems) :
-                _this.numFormatState(props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
+                _this.numFormatState(props.bind.propertyInfo, props.bind.propertyInfo.propertyType, props.numProps).getFormattedValue(_this.context.dataView.filteredItems.sum(props.bind.propertyInfo)); })));
     };
     Column.isColumnComponent = true;
     Column.contextType = GridContext;

package/dist/ReactComponents/Input.js

@@ -106,7 +106,7 @@ var Input = /** @class */ (function (_super) {
             splitProps.editor.append = this.props.bind.value ?
                 React.createElement(Button, __assign({ size: "sm" }, buttonOptions, { icon: !this.showPassword ? "far-eye fa-fw" : "far-eye-slash fa-fw", onClick: function () { return _this.showPassword = !_this.showPassword; } })) : null;
         }
-        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor));
+        return (InputHelpers.surroundWithInputGroup(inputElement, splitProps.editor, this.domRef));
     };
     Input.contextType = FormContext;
     __decorate([

package/dist/ReactComponents/InputHelpers.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
     private static iconFactory?;
-    static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps): JSX.Element | T;
+    static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps, inputRef?: React.RefObject<HTMLElement>): JSX.Element | T;
 }

package/dist/ReactComponents/InputHelpers.js

@@ -4,7 +4,7 @@ import { NeoReactTypes } from '../Modules/Types';
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
-    InputHelpers.surroundWithInputGroup = function (element, props) {
+    InputHelpers.surroundWithInputGroup = function (element, props, inputRef) {
         if (!this.iconFactory) {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
@@ -13,12 +13,12 @@ var InputHelpers = /** @class */ (function () {
                 (props.prependText || props.prepend) &&
                     React.createElement("div", { className: "input-group-prepend" },
                         props.prepend && (props.prepend instanceof Function ? props.prepend() : props.prepend),
-                        props.prependText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.prependText))),
+                        props.prependText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a, _b; return (_b = (_a = inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); } }, this.iconFactory.textOrIcon(props.prependText))),
                 element,
                 (props.appendText || props.append) &&
                     React.createElement("div", { className: "input-group-append" },
                         props.append && (props.append instanceof Function ? props.append() : props.append),
-                        props.appendText && React.createElement("span", { className: "input-group-text" }, this.iconFactory.textOrIcon(props.appendText)))));
+                        props.appendText && React.createElement("span", { className: "input-group-text", onClick: function () { var _a, _b; return (_b = (_a = inputRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus(); } }, this.iconFactory.textOrIcon(props.appendText)))));
         }
         else {
             return element;

package/dist/ReactComponents/NumberInput.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IBindableEditorProps } from './PropTypes';
 import { FormContext } from './FormContext';
-import { Misc } from '@singularsystems/neo-core';
+import { Misc, Model } from '@singularsystems/neo-core';
 import Decimal from 'decimal.js-light';
 import ComponentBase from './ComponentBase';
 export interface INumberInputSpecificProps {
@@ -25,10 +25,14 @@ export declare class FormatState {
     isPercent: boolean;
     hasExternalPercentSymbol: boolean;
     formatString: string;
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number;
     zeroText?: string | undefined;
     useNative?: boolean | undefined;
-    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, zeroText?: string | undefined, useNative?: boolean | undefined);
-    static create(numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
+    constructor(isPercent: boolean, hasExternalPercentSymbol: boolean, formatString: string, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals: number, zeroText?: string | undefined, useNative?: boolean | undefined);
+    static create(propertyInfo: Model.PropertyInfo, numericType: Misc.DataType, numProps?: INumberInputSpecificProps, appendText?: string): FormatState;
     getFormattedValue(value?: number | Decimal | null): string;
 }
 export default class NumberInput extends ComponentBase<INumberInputProps> {

package/dist/ReactComponents/NumberInput.js

@@ -9,37 +9,49 @@ import { observer } from 'mobx-react';
 import memoize from 'memoize-one';
 import ComponentBase from './ComponentBase';
 var FormatState = /** @class */ (function () {
-    function FormatState(isPercent, hasExternalPercentSymbol, formatString, zeroText, useNative) {
+    function FormatState(isPercent, hasExternalPercentSymbol, formatString, 
+    /** How many decimals the value is allowed. */
+    allowedDecimals, zeroText, useNative) {
         this.isPercent = isPercent;
         this.hasExternalPercentSymbol = hasExternalPercentSymbol;
         this.formatString = formatString;
+        this.allowedDecimals = allowedDecimals;
         this.zeroText = zeroText;
         this.useNative = useNative;
     }
-    FormatState.create = function (numericType, numProps, appendText) {
-        var _a, _b, _c, _d;
+    FormatState.create = function (propertyInfo, numericType, numProps, appendText) {
+        var _a, _b, _c, _d, _e, _f, _g;
         var isPercent = false;
         var hasExternalPercentSymbol = false;
         var formatString = numProps ? numProps.formatString : "";
+        var displayDecimals = 2;
+        if ((formatString && formatString.indexOf("%") >= 0)
+            || appendText === "%"
+            || ((_a = numProps) === null || _a === void 0 ? void 0 : _a.format) === Misc.NumberFormat.PercentDecimals || ((_b = numProps) === null || _b === void 0 ? void 0 : _b.format) === Misc.NumberFormat.PercentNoDecimals) {
+            isPercent = true;
+        }
+        if (propertyInfo.allowedDecimals !== undefined) {
+            displayDecimals = propertyInfo.allowedDecimals - (isPercent ? 2 : 0);
+        }
+        else if ((_c = numProps) === null || _c === void 0 ? void 0 : _c.formatString) {
+            displayDecimals = NumberUtils.getDecimalPlaces(numProps.formatString);
+        }
         if (!formatString) {
             if (numProps && numProps.format) {
-                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol);
+                formatString = NumberUtils.getFormatString(numProps.format, numProps.currencySymbol, displayDecimals);
             }
             else {
                 var hasDecimals = numericType === Misc.DataType.Float || numericType === Misc.DataType.Decimal;
-                var format = ((_a = numProps) === null || _a === void 0 ? void 0 : _a.currencySymbol) ?
+                var format = ((_d = numProps) === null || _d === void 0 ? void 0 : _d.currencySymbol) ?
                     (hasDecimals ? Misc.NumberFormat.CurrencyDecimals : Misc.NumberFormat.CurrencyNoDecimals) :
                     (hasDecimals ? Misc.NumberFormat.Decimals : Misc.NumberFormat.NoDecimals);
-                formatString = NumberUtils.getFormatString(format, (_b = numProps) === null || _b === void 0 ? void 0 : _b.currencySymbol);
+                formatString = NumberUtils.getFormatString(format, (_e = numProps) === null || _e === void 0 ? void 0 : _e.currencySymbol, displayDecimals);
             }
         }
         if (formatString.indexOf("%") < 0 && appendText === "%") {
             hasExternalPercentSymbol = true;
         }
-        if (formatString.indexOf("%") >= 0 || appendText === "%") {
-            isPercent = true;
-        }
-        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, (_c = numProps) === null || _c === void 0 ? void 0 : _c.zeroText, (_d = numProps) === null || _d === void 0 ? void 0 : _d.native);
+        return new FormatState(isPercent, hasExternalPercentSymbol, formatString, displayDecimals + (isPercent ? 2 : 0), (_f = numProps) === null || _f === void 0 ? void 0 : _f.zeroText, (_g = numProps) === null || _g === void 0 ? void 0 : _g.native);
     };
     FormatState.prototype.getFormattedValue = function (value) {
         if (!value && this.zeroText !== undefined) {
@@ -85,8 +97,15 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "") {
-            var testValue = e.target.value;
+        var stringValue = e.target.value;
+        if (stringValue !== "") {
+            if (NumberUtils.allowAsDecimalSeparator) {
+                var firstIndex = stringValue.indexOf(NumberUtils.allowAsDecimalSeparator), lastIndex = stringValue.lastIndexOf(NumberUtils.allowAsDecimalSeparator);
+                if (firstIndex >= 0 && firstIndex === lastIndex) {
+                    stringValue = stringValue.replace(NumberUtils.allowAsDecimalSeparator, ".");
+                }
+            }
+            var testValue = stringValue;
             if (testValue[0] === "-") {
                 testValue = testValue.substring(1);
             }
@@ -94,25 +113,25 @@ var NumberInput = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (e.target.value == "") {
+        if (stringValue == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
         }
         else if (this.formatState.isPercent && NumberUtils.transformPercent) {
-            newValue = new Decimal(e.target.value).dividedBy(100);
+            newValue = new Decimal(stringValue).dividedBy(100);
         }
         else if (this.numericType === Misc.DataType.Float || this.numericType === Misc.DataType.Decimal) {
-            newValue = new Decimal(e.target.value);
+            newValue = new Decimal(stringValue);
         }
         else {
             // Rounds to zero.
-            newValue = new Decimal(e.target.value).toDecimalPlaces(0, Decimal.ROUND_DOWN);
+            newValue = new Decimal(stringValue).toDecimalPlaces(0, Decimal.ROUND_DOWN);
         }
         if (newValue === null) {
             this.props.bind.value = newValue;
         }
         else {
             if (!this.props.numProps || this.props.numProps.autoRound !== false) {
-                newValue = NumberUtils.roundUsingFormat(newValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                newValue = NumberUtils.round(newValue, this.formatState.allowedDecimals);
             }
             if (this.numericType === Misc.DataType.Decimal) {
                 this.props.bind.value = newValue;
@@ -147,7 +166,7 @@ var NumberInput = /** @class */ (function (_super) {
         }
         else {
             if (element.readOnly || !this.props.numProps || this.props.numProps.autoRound !== false) {
-                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol);
+                stringValue = NumberUtils.formatRaw(numberValue, this.formatState.formatString, this.formatState.hasExternalPercentSymbol, this.formatState.allowedDecimals);
             }
             else {
                 if (this.formatState.isPercent && NumberUtils.transformPercent) {
@@ -222,7 +241,7 @@ var NumberInput = /** @class */ (function (_super) {
         var useNative = (_a = splitProps.numProps) === null || _a === void 0 ? void 0 : _a.native;
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
-        this.formatState = this.recalcFormatState(this.numericType, splitProps.numProps, editorProps.appendText);
+        this.formatState = this.recalcFormatState(this.props.bind.propertyInfo, this.numericType, splitProps.numProps, editorProps.appendText);
         this.isReadOnly = domProps.readOnly === true;
         if (editorProps.inputElement) {
             this.inputElement = editorProps.inputElement;
@@ -237,7 +256,7 @@ var NumberInput = /** @class */ (function (_super) {
             var decimals = NumberUtils.getDecimalPlaces(this.formatState.formatString);
             domProps.step = decimals === 0 ? "1" : "0." + "0".repeat(decimals - 1) + "1";
         }
-        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps));
+        return (InputHelpers.surroundWithInputGroup(React.createElement("input", __assign({}, domProps, { defaultValue: this.formatState.getFormattedValue(editorProps.bind.value), type: useNative ? "number" : "text", onChange: this.onChanged, ref: this.inputElement })), editorProps, this.inputElement));
     };
     NumberInput.contextType = FormContext;
     NumberInput = __decorate([

package/dist/Routing/ViewParameter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IRouteParameter } from './IRouteParameter';
 import { IViewParameterListInternal } from './ViewParameterList';
 import { Model } from '@singularsystems/neo-core';
@@ -16,6 +17,12 @@ export interface IViewParameter {
      * Used by the breadcrumb.
      */
     description: string;
+    /**
+     * Sets the description, and an optional list of prefixes.
+     * @param description Description of the current value.
+     * @param prefixes Function that returns prefixes for this breadcrumb item. The previous prefixes are passed into the function.
+     */
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     /**
      * Returns value as a nullable int.
      */
@@ -41,6 +48,7 @@ export declare class ViewParameter implements IViewParameter {
     private hasPendingValue;
     private pendingValue;
     private _value;
+    prefixes: IViewParameterPrefix[];
     constructor(parent: IViewParameterListInternal, name: string, routeParameter: IRouteParameter);
     bindTo(propertyOrCallback: Model.IPropertyInstance | (() => (string | number | null | undefined))): void;
     get value(): number | string | null;
@@ -49,6 +57,7 @@ export declare class ViewParameter implements IViewParameter {
     _description: string;
     get description(): string;
     set description(value: string);
+    setDescription(description: string, getPrefixes?: (currentPrefixes: IViewParameterPrefix[]) => IViewParameterPrefix[]): void;
     asNullableInt(): number | null;
     asString(): string;
     /** Updates the current value, and returns true if the value changed. */
@@ -58,3 +67,14 @@ export declare class ViewParameter implements IViewParameter {
     }): string;
     get latestValue(): string | null;
 }
+interface IViewParameterPrefix {
+    /** Label to show on breadcrumb. */
+    label: string;
+    /** Value to use in the breadcrumb link. Clicking on the link will set the view parameter to this value. */
+    value?: number | string | null;
+    /** Custom link to use in the breadcrumb. */
+    link?: string;
+    /** Click event for the breadcrumb. */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export {};

package/dist/Routing/ViewParameter.js

@@ -8,6 +8,7 @@ var ViewParameter = /** @class */ (function () {
         this.hasPendingValue = false;
         this.pendingValue = null;
         this._value = null;
+        this.prefixes = [];
         this._description = "";
     }
     ViewParameter.prototype.bindTo = function (propertyOrCallback) {
@@ -28,7 +29,6 @@ var ViewParameter = /** @class */ (function () {
             if (stringValue !== this._value) {
                 this.hasPendingValue = true;
                 this.pendingValue = stringValue;
-                this._description = "";
                 this.parent.setUrl(this);
             }
         },
@@ -55,6 +55,10 @@ var ViewParameter = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ViewParameter.prototype.setDescription = function (description, getPrefixes) {
+        this.prefixes = getPrefixes ? getPrefixes(this.prefixes) : [];
+        this.description = description;
+    };
     ViewParameter.prototype.asNullableInt = function () {
         if (this._value) {
             return parseInt(this._value, 10);
@@ -66,13 +70,17 @@ var ViewParameter = /** @class */ (function () {
     };
     /** Updates the current value, and returns true if the value changed. */
     ViewParameter.prototype.update = function (value) {
-        if (value)
+        if (value) {
             value = decodeURIComponent(value);
+        }
         if (value != this._value) {
             this.hasPendingValue = false;
             this.pendingValue = value;
-            this._description = "";
             this._value = value;
+            if (!value) {
+                this._description = "";
+                this.prefixes = [];
+            }
             return true;
         }
         return false;

package/dist/Routing/ViewParameterList.js

@@ -28,6 +28,22 @@ var ViewParameterList = /** @class */ (function () {
         for (var _i = 0, _b = this.params; _i < _b.length; _i++) {
             var viewParam = _b[_i];
             if (!viewParam.routeParameter.isQuery) {
+                if (!upTo) {
+                    for (var _c = 0, _d = viewParam.prefixes; _c < _d.length; _c++) {
+                        var prefix = _d[_c];
+                        var breadcrumbItem = new BreadCrumbItem(prefix.label);
+                        if (prefix.onClick) {
+                            breadcrumbItem.onClick = prefix.onClick;
+                        }
+                        else if (prefix.link) {
+                            breadcrumbItem.link = prefix.link;
+                        }
+                        else if (prefix.value) {
+                            breadcrumbItem.link = paramPath + "/" + prefix.value;
+                        }
+                        breadCrumbs.push(breadcrumbItem);
+                    }
+                }
                 paramPath += viewParam.getParamString(state);
                 if ((_a = viewParam.routeParameter.selection, (_a !== null && _a !== void 0 ? _a : BreadCrumbSelectMode.Default)) === BreadCrumbSelectMode.Default) {
                     selectablePath = paramPath;

package/dist/Views/ViewBase.d.ts

@@ -46,7 +46,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.
      */
-    protected viewParamsUpdated(): void;
+    protected viewParamsUpdated(): void | Promise<void>;
     /** Gets the parent breadcrumbs, and the breadcrumb for this view. */
     protected getBreadCrumbStart(): BreadCrumbItem[];
     /**

package/dist/Views/ViewBase.js

@@ -1,6 +1,6 @@
-import { __decorate, __extends, __metadata } from "tslib";
+import { __awaiter, __decorate, __extends, __generator, __metadata } from "tslib";
 import React from 'react';
-import { observable } from 'mobx';
+import { observable, runInAction } from 'mobx';
 import { Misc } from '@singularsystems/neo-core';
 import { ViewParameterList } from '../Routing/ViewParameterList';
 import { ViewState } from './ViewState';
@@ -79,9 +79,20 @@ var ViewBase = /** @class */ (function (_super) {
         this.disposeViewModel();
     };
     ViewBase.prototype.updateViewParams = function (match) {
-        if (this.viewState.viewParams.update(match)) {
-            this.viewParamsUpdated();
-        }
+        var _this = this;
+        runInAction(function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.viewState.viewParams.update(match)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Promise.resolve(this.viewParamsUpdated())];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); });
     };
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.58",
+  "version": "0.10.62",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-router-dom": "5.1.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=0.10.63",
+    "@singularsystems/neo-core": ">=0.10.72",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
     "react": ">=16.13.1",

package/styles/DatePicker.scss

@@ -3,6 +3,17 @@
     position: relative;
     width: 100%;
     color: initial;
+
+    &.neo-datepicker-always-show {
+      width: max-content;
+
+      input {
+        text-align: center;
+        padding: 0.125rem 0;
+        height: auto;
+        margin-bottom: 0.25rem;
+      }
+    }
   }
   
   .neo-datepicker-popup {