@singularsystems/neo-react 1.1.1 → 1.1.3

package/dist/ReactComponents/Button.js

@@ -64,6 +64,7 @@ var Button = /** @class */ (function (_super) {
         var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, isBusy = _b.isBusy, pulse = _b.pulse, customVariant = _b.customVariant, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse", "customVariant"]);
         native.type = isSubmit ? "submit" : "button";
         var variantClassName = ((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary");
+        var isLoading = isBusy || (task === null || task === void 0 ? void 0 : task.isBusy);
         var isDropDown = menuItems && menuItems.length;
         var buttonClasses = "btn btn-" + (isOutline ? "outline-" : "") + variantClassName;
         if (size)
@@ -76,7 +77,7 @@ var Button = /** @class */ (function (_super) {
         if (isBusy !== undefined || task !== undefined) {
             iconStyle = { fixedWidth: true };
         }
-        if (isBusy || (task === null || task === void 0 ? void 0 : task.isBusy)) {
+        if (isLoading) {
             iconStyle.fixedWidth = true;
             iconStyle.spin = true;
             icon = Misc.Settings.icons.loadingIcon;
@@ -92,7 +93,7 @@ var Button = /** @class */ (function (_super) {
             innerText = text;
         var iconSpace = icon && innerText ? " " : "";
         // Icon
-        var iconElement = this.iconFactory.getIconComponent(icon, iconStyle);
+        var iconElement = (isLoading || !innerText || !Misc.Settings.buttons.suppressIcons) ? this.iconFactory.getIconComponent(icon, iconStyle) : undefined;
         // Tooltip
         if (tooltip) {
             Tooltip.setDomProperties(native, tooltip);
@@ -100,13 +101,13 @@ var Button = /** @class */ (function (_super) {
         var root;
         // Main button
         var buttonChildren = [];
-        if (icon && iconAlignment !== "right")
+        if (iconElement && iconAlignment !== "right")
             buttonChildren.push(iconElement, iconSpace);
         buttonChildren.push(innerText);
         if (isDropDown && !splitMenu) {
             buttonChildren.push(" ");
         }
-        if (icon && iconAlignment === "right")
+        if (iconElement && iconAlignment === "right")
             buttonChildren.push(iconSpace, iconElement);
         var mainButton = React.createElement.apply(React, __spreadArray(["button", native], buttonChildren, false));
         var buttonGroupClasses = "btn-group";

package/dist/ReactComponents/FileManager/FileInput.d.ts

@@ -13,6 +13,7 @@ export interface IFileEditorProps extends IFileComponentProps, Partial<Component
     downloadLinkText?: string;
     /**
      * Path of API endpoint which will handle downloading a file. Only required if downloadLinkText is specified.
+     * Use `downloadEndpointAsync` when asynchronously returning a download link with sas token.
      */
     downloadEndpoint?: string | ((fileID: any) => string);
     /**

package/dist/ReactComponents/Grid/Column.js

@@ -169,7 +169,12 @@ var Column = /** @class */ (function (_super) {
                     displayValue = DateUtils.format(rawValue, props.dateProps ? props.dateProps.formatString : undefined);
                 }
                 else if (this.checkboxType !== CheckboxType.None) {
-                    editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
+                    if (Misc.Settings.grid.boolTrueIcon) {
+                        editor = rawValue ? Misc.Settings.grid.boolTrueIcon : Misc.Settings.grid.boolFalseIcon;
+                    }
+                    else {
+                        editor = React.createElement("i", { className: rawValue ? Misc.Settings.grid.boolTrueClass : Misc.Settings.grid.boolFalseClass });
+                    }
                 }
                 else if (this.controlType === ControlType.DropDown) {
                     editor = BindPropsHelper.getFormControl(props);

package/dist/ReactComponents/Grid/Grid.js

@@ -1,7 +1,7 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import * as React from 'react';
 import { Data, Utils, Misc } from '@singularsystems/neo-core';
-import { observer } from 'mobx-react';
+import { observer, Observer } from 'mobx-react';
 import NeoButton from '../Button';
 import { DataViewContext } from '../../React/DataView';
 import { StickyTableHeader } from './StickyTableHeader';
@@ -45,7 +45,7 @@ var Grid = /** @class */ (function (_super) {
     };
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, stickyHeader = _a.stickyHeader, enableRowIndexes = _a.enableRowIndexes, children = _a.children, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes", "children"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -101,14 +101,16 @@ var Grid = /** @class */ (function (_super) {
         }
         return (React.createElement("table", __assign({}, domProps, { className: className, ref: this.domRef }),
             React.createElement(GridContext.Provider, { value: this.gridContext },
-                React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true, -1)),
-                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                (showAddButton || addButton || footerButtons || this.gridContext.hasSummaries || footerContent !== undefined) &&
-                    React.createElement(TableSection, { type: "footer" },
-                        this.gridContext.hasSummaries && this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true, -1),
-                        footerContent !== undefined && footerContent(this.gridContext.dataView.getItems()),
-                        (showAddButton || addButton || footerButtons) &&
-                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })))));
+                React.createElement(TableSection, { type: "header" }, this.headerItem && children(this.headerItem, this.headerItem.meta, true, -1)),
+                React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: children })); })),
+                React.createElement(Observer, null, function () {
+                    return React.createElement(React.Fragment, null, (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
+                        React.createElement(TableSection, { type: "footer" },
+                            _this.gridContext.hasSummaries && _this.headerItem && children(_this.headerItem, _this.headerItem.meta, true, -1),
+                            footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
+                            (showAddButton || addButton || footerButtons) &&
+                                React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
+                }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;

package/dist/ReactComponents/Input.d.ts

@@ -16,6 +16,8 @@ export interface IInputSpecificProps {
      * Automatically sets type to 'password'.
      */
     showPasswordButton?: boolean | Components.IButtonOptions;
+    /** Alternate label, currently only used to provide a left label for the switch component. */
+    altLabel?: string | JSX.Element;
 }
 export interface IInputProps extends IBindableEditorProps<HTMLInputElement> {
     input?: IInputSpecificProps;

package/dist/ReactComponents/Input.js

@@ -96,12 +96,21 @@ var Input = /** @class */ (function (_super) {
             inputElement = React.createElement("textarea", __assign({}, domProps, { ref: this.domRef, rows: inputProps.rows }));
         }
         if (this.type === "checkbox") {
+            var isSwitch = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch";
             var wrapperClassName = isBsPre5 ?
-                "custom-control custom-".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? "switch" : "checkbox") :
-                "form-check".concat((inputProps === null || inputProps === void 0 ? void 0 : inputProps.type) === "switch" ? " form-switch" : "");
+                "custom-control custom-".concat(isSwitch ? "switch" : "checkbox") :
+                "form-check".concat(isSwitch ? " form-switch" : "");
+            if (isSwitch && inputProps.altLabel) {
+                wrapperClassName += " form-switch-inline";
+            }
             inputElement = React.createElement("div", { className: wrapperClassName },
                 inputElement,
                 React.createElement("label", { htmlFor: domProps.id, className: isBsPre5 ? "custom-control-label" : "form-check-label" }, (inputProps.label ? inputProps.label : "")));
+            if (isSwitch && inputProps.altLabel) {
+                inputElement = React.createElement(React.Fragment, null,
+                    React.createElement("label", { htmlFor: domProps.id, className: isBsPre5 ? "custom-control-label" : "form-check-label" }, inputProps.altLabel),
+                    inputElement);
+            }
         }
         if (showPasswordButton) {
             var buttonOptions = { variant: "primary", isOutline: true };

package/dist/ReactComponents/RadioList.d.ts

@@ -13,6 +13,9 @@ export interface IRadioListSpecificProps<T> {
     valueMember?: keyof T;
     /** Property name to use for the radio button text. Only applies when using items. */
     displayMember?: keyof T;
+    onItemSelected?: (item: T) => void;
+    /** An array of tooltips, one per item in the order of the items. */
+    tooltips?: (string | undefined)[];
 }
 export interface IRadioListProps<T> extends IBindableEditorProps<HTMLSelectElement> {
     radioList: IRadioListSpecificProps<T>;
@@ -25,5 +28,6 @@ export default class RadioList<T> extends ComponentBase<IRadioListProps<T>> {
     private items;
     private preRender;
     private createEnumList;
+    private onItemSelected;
     render(): React.JSX.Element;
 }

package/dist/ReactComponents/RadioList.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __assign, __decorate, __extends } from "tslib";
 import React from 'react';
 import { EnumHelper, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
@@ -21,7 +21,7 @@ var RadioList = /** @class */ (function (_super) {
         }
         else if (this.props.radioList.enumType && this.props.radioList.enumType !== this.previousEnumType) {
             this.previousEnumType = this.props.radioList.enumType;
-            this.items = EnumHelper.asList(this.props.radioList.enumType);
+            this.items = EnumHelper.asList(this.props.radioList.enumType).map(function (item) { return (__assign(__assign({}, item), { _item: item })); });
         }
     };
     RadioList.prototype.createEnumList = function (list) {
@@ -29,27 +29,34 @@ var RadioList = /** @class */ (function (_super) {
         if (list.length) {
             var _c = LookupHelper.findMembers(list[0], (_a = this.props.radioList.valueMember) !== null && _a !== void 0 ? _a : "", (_b = this.props.radioList.displayMember) !== null && _b !== void 0 ? _b : "", true), valueMember_1 = _c.valueMember, displayMember_1 = _c.displayMember;
             if (valueMember_1 && displayMember_1) {
-                this.items = list.map(function (item) { return ({ id: item[valueMember_1], name: item[displayMember_1] }); });
+                this.items = list.map(function (item) { return ({ id: item[valueMember_1], name: item[displayMember_1], _item: item }); });
             }
         }
     };
+    RadioList.prototype.onItemSelected = function (item) {
+        this.props.bind.value = item.id;
+        if (this.props.radioList.onItemSelected !== undefined) {
+            this.props.radioList.onItemSelected(item._item);
+        }
+    };
     RadioList.prototype.render = function () {
         var _this = this;
         var _a;
         this.preRender();
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
+        var radioProps = this.props.radioList, tooltips = radioProps.tooltips;
         // TODO, how must validation show if not in form group?
         //const displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         //displayInfo.applyToDom(domProps, !splitProps.inGroup);
         var isBsPre5 = BootstrapUtils.isPre5, prefix = isBsPre5 ? "custom-control" : "form-check";
         var bindValue = this.props.bind.value;
         var className = Utils.joinWithSpaces("neo-radio-list", (_a = splitProps.editorDom) === null || _a === void 0 ? void 0 : _a.className);
-        return React.createElement("div", { className: className }, this.items.map(function (item) {
+        return React.createElement("div", { className: className }, this.items.map(function (item, index) {
             var _a, _b;
-            return React.createElement("div", { className: "custom-radio " + prefix + (_this.props.radioList.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
-                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.props.bind.value = item.id; }, className: "".concat(prefix, "-input") }),
-                React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : "") }, item.name));
+            return React.createElement("div", { className: "custom-radio " + prefix + (radioProps.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
+                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.onItemSelected(item); }, className: "".concat(prefix, "-input") }),
+                React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : ""), "data-tip": tooltips && index < tooltips.length ? tooltips[index] : undefined }, item.name));
         }));
     };
     RadioList.contextType = FormContext;

package/dist/ReactComponents/Transitions/Transition.d.ts

@@ -2,7 +2,11 @@ export declare class Transition {
     setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
     setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
     cleanup: (element: HTMLElement) => void;
-    constructor(setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, cleanup: (element: HTMLElement) => void);
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight: boolean;
+    constructor(setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, cleanup: (element: HTMLElement) => void, 
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight?: boolean);
     static leftRight: Transition;
     static upDown: Transition;
     static inOut: Transition;

package/dist/ReactComponents/Transitions/Transition.js

@@ -1,12 +1,16 @@
 var Transition = /** @class */ (function () {
-    function Transition(setBeforeStyles, setAfterStyles, cleanup) {
+    function Transition(setBeforeStyles, setAfterStyles, cleanup, 
+    /** Set to true if the animation causes the elements height to change. E.g. zoom type transitions */
+    changesHeight) {
+        if (changesHeight === void 0) { changesHeight = false; }
         this.setBeforeStyles = setBeforeStyles;
         this.setAfterStyles = setAfterStyles;
         this.cleanup = cleanup;
+        this.changesHeight = changesHeight;
     }
     Transition.leftRight = new Transition(function (element, out, toLeft) { return element.style.left = ((toLeft ? 1 : -1) * (out ? 0 : 150)) + "px"; }, function (element, out, toLeft) { return element.style.left = ((toLeft ? -1 : 1) * (out ? 150 : 0)) + "px"; }, function (element) { return element.style.left = ""; });
     Transition.upDown = new Transition(function (element, out, toLeft) { return element.style.top = ((toLeft ? 1 : -1) * (out ? 0 : 100)) + "px"; }, function (element, out, toLeft) { return element.style.top = ((toLeft ? -1 : 1) * (out ? 100 : 0)) + "px"; }, function (element) { return element.style.top = ""; });
-    Transition.inOut = new Transition(function (element, out, toLeft) { return element.style.transform = out ? "scale(1)" : (toLeft ? "scale(0.8)" : "scale(1.2)"); }, function (element, out, toLeft) { return element.style.transform = out ? (toLeft ? "scale(1.2)" : "scale(0.8)") : "scale(1)"; }, function (element) { return element.style.transform = ""; });
+    Transition.inOut = new Transition(function (element, out, toLeft) { return element.style.transform = out ? "scale(1)" : (toLeft ? "scale(0.8)" : "scale(1.2)"); }, function (element, out, toLeft) { return element.style.transform = out ? (toLeft ? "scale(1.2)" : "scale(0.8)") : "scale(1)"; }, function (element) { return element.style.transform = ""; }, true);
     Transition.fadeOnly = new Transition(function () { }, function () { }, function () { });
     return Transition;
 }());

package/dist/ReactComponents/Transitions/TransitionContainer.d.ts

@@ -8,6 +8,8 @@ export declare const TransitionContext: React.Context<ITransitionContextState>;
 interface ITransitionContainerProps {
     controller?: TransitionController;
     transition?: Transition;
+    /** Transition to use when going backwards. */
+    backTransition?: Transition;
     children: React.ReactNode;
 }
 export default class TransitionContainer extends React.Component<ITransitionContainerProps> {

package/dist/ReactComponents/Transitions/TransitionContainer.js

@@ -8,11 +8,17 @@ var TransitionContainer = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.containerRef = React.createRef();
         if (!_this.props.controller) {
-            _this.controller = new TransitionController(undefined, _this.props.transition);
+            _this.controller = new TransitionController(undefined, _this.props.transition, _this.props.backTransition);
             _this.controller.wasAutoCreated = true;
         }
         else {
             _this.controller = _this.props.controller;
+            if (_this.props.transition) {
+                _this.controller.defaultTransition = _this.props.transition;
+            }
+            if (_this.props.backTransition) {
+                _this.controller.defaultBackTransition = _this.props.backTransition;
+            }
         }
         _this.contextState = { controller: _this.controller };
         return _this;

package/dist/ReactComponents/Transitions/TransitionController.d.ts

@@ -2,14 +2,18 @@ import { Transition } from "./Transition";
 export declare class TransitionController {
     /** Global default transition. */
     static transition: Transition;
+    /** Allows transitions to be disabled for the whole app. */
+    static disableTransitions: boolean;
     /**
      * Creates a transition controller.
      * @param initialName Name of the panel to display initially. Not required if `isVisible` props are defined on the panels.
      * @param transition Transition type to use by default on all panels.
+     * @param backTransition Transition type to use when going backwards.
      */
-    constructor(initialName?: string, transition?: Transition);
+    constructor(initialName?: string, transition?: Transition, backTransition?: Transition);
     private _selectedName;
-    private defaultTransition;
+    defaultTransition: Transition;
+    defaultBackTransition: Transition;
     private direction;
     private isFirstTransition;
     private isTransitioning;

package/dist/ReactComponents/Transitions/TransitionController.js

@@ -7,8 +7,9 @@ var TransitionController = /** @class */ (function () {
      * Creates a transition controller.
      * @param initialName Name of the panel to display initially. Not required if `isVisible` props are defined on the panels.
      * @param transition Transition type to use by default on all panels.
+     * @param backTransition Transition type to use when going backwards.
      */
-    function TransitionController(initialName, transition) {
+    function TransitionController(initialName, transition, backTransition) {
         this._selectedName = "";
         this.direction = 1;
         this.isFirstTransition = true;
@@ -22,6 +23,7 @@ var TransitionController = /** @class */ (function () {
         this._selectedName = initialName !== null && initialName !== void 0 ? initialName : "";
         makeObservable(this);
         this.defaultTransition = transition !== null && transition !== void 0 ? transition : TransitionController.transition;
+        this.defaultBackTransition = backTransition !== null && backTransition !== void 0 ? backTransition : this.defaultTransition;
     }
     Object.defineProperty(TransitionController.prototype, "selectedPanel", {
         /**
@@ -92,7 +94,7 @@ var TransitionController = /** @class */ (function () {
      * @internal
      * Called by each panel after render.
      */
-    TransitionController.prototype.afterUpdate = function (name, element, transition) {
+    TransitionController.prototype.afterUpdate = function (name, element, transition, animateHeight) {
         if (this._selectedName === name && !this.isTransitioning) {
             var panelState_1 = this.panelStates.find(function (c) { return c.name === name; });
             var transitionIn = false;
@@ -107,7 +109,7 @@ var TransitionController = /** @class */ (function () {
                 transitionIn = true;
             }
             if (transitionIn && !this.isFirstTransition) {
-                panelState_1.inTimer = this.transitionElement(panelState_1.element, panelState_1.transition, this.direction > 0, false, function () {
+                panelState_1.inTimer = this.transitionElement(panelState_1.element, panelState_1.transition, this.direction > 0, false, animateHeight !== null && animateHeight !== void 0 ? animateHeight : true, function () {
                     panelState_1.inTimer = undefined;
                 });
             }
@@ -165,7 +167,7 @@ var TransitionController = /** @class */ (function () {
                 panelState.inTimer = undefined;
             }
             if (!panelState.outTimer) {
-                panelState.outTimer = this_1.transitionElement(panelState.element, panelState.transition, this_1.direction > 0, true, function () {
+                panelState.outTimer = this_1.transitionElement(panelState.element, panelState.transition, this_1.direction > 0, true, true, function () {
                     _this.panelStates.remove(panelState);
                 });
             }
@@ -176,28 +178,32 @@ var TransitionController = /** @class */ (function () {
             _loop_1(panelState);
         }
     };
-    TransitionController.prototype.transitionElement = function (element, transition, toLeft, out, onComplete) {
+    TransitionController.prototype.transitionElement = function (element, transition, toLeft, out, animateHeight, onComplete) {
         var _this = this;
-        transition !== null && transition !== void 0 ? transition : (transition = this.defaultTransition);
-        element.style.overflow = "hidden";
-        var elementHeight = element.getBoundingClientRect().height;
-        if (this.containerElement && !this.containerElement.classList.contains("transitioning")) {
-            this.containerElement.style.height = elementHeight + "px";
-            this.containerElement.classList.add("transitioning");
-        }
-        element.style.opacity = out ? "1" : "0";
-        transition.setBeforeStyles(element, out, toLeft);
-        Components.AnimationHelper.triggerReflow(element);
-        element.classList.add("animate-".concat(out ? "out" : "in"));
-        Components.AnimationHelper.triggerReflow(element);
-        if (!out && this.containerElement) {
-            Components.AnimationHelper.triggerReflow(this.containerElement);
-            this.containerElement.style.height = elementHeight + "px";
+        var canAnimate = !TransitionController.disableTransitions;
+        transition !== null && transition !== void 0 ? transition : (transition = toLeft ? this.defaultTransition : this.defaultBackTransition);
+        if (canAnimate) {
+            element.style.overflow = "hidden";
+            var elementHeight_1 = element.getBoundingClientRect().height;
+            if (this.containerElement && !this.containerElement.classList.contains("transitioning")) {
+                this.containerElement.style.height = elementHeight_1 + "px";
+                this.containerElement.classList.add("transitioning");
+            }
+            element.style.opacity = out ? "1" : "0";
+            transition.setBeforeStyles(element, out, toLeft);
+            Components.AnimationHelper.triggerReflow(element);
+            element.classList.add("animate-".concat(out ? "out" : "in"));
+            Components.AnimationHelper.triggerReflow(element);
+            element.style.opacity = out ? "0" : "1";
+            transition.setAfterStyles(element, out, toLeft);
+            // Timeout needed to give time for child elements to render, in order to correctly calculate height.
+            setTimeout(function () {
+                if (!out && _this.containerElement) {
+                    _this.containerElement.style.height = animateHeight ? (transition.changesHeight ? elementHeight_1 : element.getBoundingClientRect().height) + "px" : "";
+                }
+            }, 0);
         }
-        element.style.opacity = out ? "0" : "1";
-        transition.setAfterStyles(element, out, toLeft);
-        var duration = parseFloat(window.getComputedStyle(element).transitionDuration) * 1000;
-        return setTimeout(function () {
+        var cleanup = function () {
             if (out) {
                 // Element will be removed from the dom, no need to cleanup props.
             }
@@ -214,10 +220,20 @@ var TransitionController = /** @class */ (function () {
                     _this.containerElement.style.height = "";
                 }
             }
-        }, duration);
+        };
+        if (canAnimate) {
+            var transitionDuration = parseFloat(window.getComputedStyle(element).transitionDuration) * 1000;
+            return setTimeout(cleanup, transitionDuration);
+        }
+        else {
+            cleanup();
+            return null;
+        }
     };
     /** Global default transition. */
     TransitionController.transition = Transition.leftRight;
+    /** Allows transitions to be disabled for the whole app. */
+    TransitionController.disableTransitions = false;
     __decorate([
         observable.ref,
         __metadata("design:type", String)

package/dist/ReactComponents/Transitions/TransitionPanel.d.ts

@@ -19,6 +19,10 @@ interface ITransitionPanelProps<T> {
     isVisible?: boolean | T | null;
     /** Override the transition for this panel only. */
     transition?: Transition;
+    /** Indicates whether the container height is set during a transition. Transitions going from small height to a very large height may look better without height animation.
+     * `True` by default.
+     */
+    animateHeight?: boolean;
 }
 export default class TransitionPanel<T = any> extends React.Component<ITransitionPanelProps<T>> {
     static contextType: React.Context<import("./TransitionContainer").ITransitionContextState>;

package/dist/ReactComponents/Transitions/TransitionPanel.js

@@ -26,7 +26,7 @@ var TransitionPanel = /** @class */ (function (_super) {
             this.context.controller.transition(this.name);
         }
         if (this.panelRef.current) {
-            this.context.controller.afterUpdate(this.name, this.panelRef.current, this.props.transition);
+            this.context.controller.afterUpdate(this.name, this.panelRef.current, this.props.transition, this.props.animateHeight);
         }
     };
     TransitionPanel.prototype.componentWillUnmount = function () {
@@ -40,7 +40,7 @@ var TransitionPanel = /** @class */ (function (_super) {
         configurable: true
     });
     TransitionPanel.prototype.render = function () {
-        var _a = this.props, name = _a.name, data = _a.data, isVisible = _a.isVisible, children = _a.children;
+        var _a = this.props, name = _a.name, data = _a.data, isVisible = _a.isVisible, animateHeight = _a.animateHeight, children = _a.children;
         if (data) {
             this.currentData = data;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,7 +29,7 @@
     "typescript": "5.5.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.1.0",
+    "@singularsystems/neo-core": "1.1.1",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.7.7",
@@ -44,7 +44,7 @@
     "tslib": "2.7.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.1.0",
+    "@singularsystems/neo-core": ">=1.1.1",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/Button.scss

@@ -33,8 +33,12 @@ div.dropdown-menu {
     }
 }
 
-.btn {  
+.btn {
     &.min-width {
       min-width: 0;
     }
+
+    &:disabled {
+        pointer-events: auto;
+    }
 }

package/styles/DatePicker.scss

@@ -30,7 +30,7 @@ $neo-include-datepicker: true !default;
       text-align: center;
       font-size: 14px;
       transform-origin: center top;
-      z-index: 3; /* value of 3 to appear above bootstrap focus outline. */
+      z-index: 5; /* value of 5 to appear above bootstrap focus outline. */
     
       &.neo-datepicker-inline {
         position: static;
@@ -125,7 +125,7 @@ $neo-include-datepicker: true !default;
       
             &.selectable:hover {
               cursor: pointer;
-              background-color: color.adjust($form-focused-border, $lightness: 15%);
+              background-color: adjust-color($form-focused-border, $lightness: 15%);
             }
       
             &.today {

package/styles/Forms.scss

@@ -15,6 +15,10 @@
     justify-content: space-between;
 }
 
+.form-switch-inline {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
 
 div.neo-form-group-floating {
     position: relative;