@singularsystems/neo-react 1.1.2 → 1.1.4

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/Grid.d.ts

@@ -4,6 +4,7 @@ import { DataViewContext } from '../../React/DataView';
 import { IButtonOptions } from '@singularsystems/neo-core/dist/Components/ButtonOptions';
 import { ItemCallback } from '../PropTypes';
 export type GridSection = "header" | "body" | "footer";
+export type BorderType = "standard" | "borderless" | "bordered";
 export declare class GridContextParams<T> {
     currentItem: T;
     section: GridSection;
@@ -53,18 +54,22 @@ export interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "
     initialSort?: keyof T | (keyof T)[];
     initialSortAscending?: boolean | boolean[];
     children: ItemCallback<T>;
+    /** @deprecated Use `borderType` instead. */
+    isBordered?: boolean;
+    /** @deprecated Use `borderType` instead. */
+    isBorderless?: boolean;
     /**
-     * When specified, the default bootstrap table borders (sides and cells) will be added.
-     * This is the default unless overridden in Misc.Settings.grid
+     * Specifies the bootstrap border type. This can also be specified globally in Misc.Settings.grid.borderType.
+     * - Standard = Only horizontal borders.
+     * - Bordered = All borders.
+     * - Borderless = No borders.
      */
-    isBordered?: boolean;
+    borderType?: BorderType;
     /**
      * When specified, every alternating row will receive a slightly darker background color.
      * Note, this will not work correctly if your grid has child rows. See the neo react demo pages for a solution.
      */
     isStriped?: boolean;
-    /** When specified, the table will have no cell borders, and the table will have no main border. */
-    isBorderless?: boolean;
     /** When specified, a background color will be applied on a row if it is being hovered over. */
     showHover?: boolean;
     /** When specified, the table size will be reduced (by reducing the padding sizes in each cell by half). */

package/dist/ReactComponents/Grid/Grid.js

@@ -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, 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"]);
+        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, isBorderless = _a.isBorderless, isStriped = _a.isStriped, borderType = _a.borderType, 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", "isBorderless", "isStriped", "borderType", "showHover", "isSmallTable", "footerContent", "footerButtons", "stickyHeader", "enableRowIndexes", "children"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -56,17 +56,28 @@ var Grid = /** @class */ (function (_super) {
             this.gridContext.expandAll = undefined;
         }
         var className = Utils.joinWithSpaces(domProps.className, "table neo-grid");
-        // apply bordered styling
-        if (isBordered !== null && isBordered !== void 0 ? isBordered : Misc.Settings.grid.isBordered) {
+        borderType !== null && borderType !== void 0 ? borderType : (borderType = Misc.Settings.grid.borderType);
+        if (borderType === undefined) {
+            var noBorders = isBorderless !== null && isBorderless !== void 0 ? isBorderless : Misc.Settings.grid.isBorderless;
+            if (noBorders) {
+                borderType = "borderless";
+            }
+            else if (isBordered !== null && isBordered !== void 0 ? isBordered : Misc.Settings.grid.isBordered) {
+                borderType = "bordered";
+            }
+        }
+        if (borderType === "bordered") {
             className += " table-bordered";
         }
+        else if (borderType === "borderless") {
+            className += " table-borderless";
+        }
         // apply striped styling
         if (isStriped !== null && isStriped !== void 0 ? isStriped : Misc.Settings.grid.isStriped) {
             className += " table-striped";
         }
         // apply borderless styling
         if (isBorderless !== null && isBorderless !== void 0 ? isBorderless : Misc.Settings.grid.isBorderless) {
-            className += " table-borderless";
         }
         // apply hover styling
         if (showHover !== null && showHover !== void 0 ? showHover : Misc.Settings.grid.showHover) {

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/dist/Routing/RouteView.d.ts

@@ -17,7 +17,6 @@ export default abstract class RouteView extends React.Component<unknown> {
     /**
      * Creates the routes component after authentication and authorisation checks have been done.
      * This can be used to override all routes to display pages like terms and conditions.
-     * To redirect to a route, return a react router <Redirect to= /> component.
      */
     protected getAuthorisedComponent(route: Routing.IRoute, path: string): JSX.Element;
     /**

package/dist/Routing/RouteView.js

@@ -52,7 +52,6 @@ var RouteView = /** @class */ (function (_super) {
     /**
      * Creates the routes component after authentication and authorisation checks have been done.
      * This can be used to override all routes to display pages like terms and conditions.
-     * To redirect to a route, return a react router <Redirect to= /> component.
      */
     RouteView.prototype.getAuthorisedComponent = function (route, path) {
         return React.createElement(route.component, null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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",