@singularsystems/neo-react 1.0.22 → 1.1.0

package/dist/Routing/RouteView.js

@@ -1,113 +1,39 @@
 import { __extends } from "tslib";
 import * as React from 'react';
-import { matchPath } from 'react-router';
 import { AppServices, Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
-import { Observer } from 'mobx-react';
+import { reaction } from "mobx";
 var RouteView = /** @class */ (function (_super) {
     __extends(RouteView, _super);
-    function RouteView(props) {
+    function RouteView(props, routeProvider) {
         var _this = _super.call(this, props) || this;
+        _this.routeProvider = routeProvider;
+        _this.hasMounted = false;
         _this.securityService = Misc.Globals.appService.get(AppServices.NeoTypes.Security.SecurityService);
         _this.routeSecurityService = Misc.Globals.appService.get(AppServices.NeoTypes.Routing.RouteSecurityService);
         _this.routingState = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState);
         _this.state = {};
-        _this.routingState.currentRouteView = _this;
+        _this.routingState.appRouteProvider = routeProvider;
+        reaction(function () { return _this.routingState.currentRouteBase; }, function () { return _this.forceUpdate(); });
         return _this;
     }
-    Object.defineProperty(RouteView.prototype, "routes", {
-        get: function () {
-            return this._routes;
-        },
-        set: function (value) {
-            this._routes = value;
-            this.routingState.appRouteProvider = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
     RouteView.prototype.componentDidMount = function () {
-        this.historyBlockDisposer = this.props.history.block(this.beforeLocationChanged.bind(this));
-        this.routingState.onRouteChanged();
-    };
-    RouteView.prototype.componentDidUpdate = function () {
-        this.routingState.onRouteChanged();
-    };
-    RouteView.prototype.componentWillUnmount = function () {
-        if (this.historyListenDisposer) {
-            this.historyListenDisposer();
-        }
-        if (this.historyBlockDisposer) {
-            this.historyBlockDisposer();
-        }
-    };
-    RouteView.prototype.beforeLocationChanged = function (location, action, isUnload) {
-        var _a;
-        var currentRoute = this.routingState.currentRoute;
-        var match = location ? this.getMatch(location) : undefined;
-        var changeProps = {
-            isNewView: !currentRoute || !match || match.route !== currentRoute,
-            isUnload: isUnload !== null && isUnload !== void 0 ? isUnload : false,
-            currentView: (_a = this.routingState.currentView) !== null && _a !== void 0 ? _a : undefined,
-            newRoute: match === null || match === void 0 ? void 0 : match.route,
-            match: match === null || match === void 0 ? void 0 : match.match
-        };
-        if (this.routingState.currentView) {
-            this.routingState.currentView.beforeRouteChanged(changeProps);
-            if (changeProps.leavePrompt === undefined && (changeProps.isNewView || changeProps.isUnload)) {
-                changeProps.leavePrompt = this.routingState.currentView.onLeave();
-            }
-        }
-        this.beforeRouteChanged(changeProps);
-        if (changeProps.leavePrompt === undefined) {
-            return undefined;
-        }
-        else if (typeof changeProps.leavePrompt === "string") {
-            return changeProps.leavePrompt;
-        }
-        else if (changeProps.leavePrompt === false) {
-            return false;
-        }
-        else {
-            this.routingState.leavePromise = changeProps.leavePrompt;
-            return "";
-        }
-    };
-    /**
-     * Called when the url changes, before the router renders the new view.
-     * Return a string to block navigation.
-     * @param isNewView True if the view is changing. False if a view parameter value is changing.
-     * @param currentView The current view before change.
-     */
-    RouteView.prototype.beforeRouteChanged = function (props) {
-    };
-    RouteView.prototype.getMatch = function (location) {
-        for (var _i = 0, _a = this._routes.flattenedRoutes; _i < _a.length; _i++) {
-            var route = _a[_i];
-            var match = matchPath(location.pathname, { path: route.routePath, exact: RouteView.isExact(route) });
-            if (match) {
-                return { match: match, route: route };
-            }
-        }
-        return null;
-    };
-    RouteView.isExact = function (route) {
-        if (route.exact === undefined) {
-            return route.path === "/" || (route.path !== undefined && route.children !== undefined);
-        }
-        else {
-            return route.exact;
+        this.hasMounted = true;
+        var basePath = this.routingState.basePath;
+        var path = window.location.pathname + window.location.search;
+        if (basePath && !window.location.pathname.startsWith(basePath)) {
+            console.warn("Base path is ".concat(basePath, " but the app is being served at ").concat(window.location.pathname, "."));
         }
+        Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper).navigateInternal(path, true);
     };
     RouteView.prototype.render = function () {
-        var _this = this;
-        return React.createElement(this.switchComponent, {}, [this.routes.flattenedRoutes.map(function (route) { return (React.createElement(_this.routeComponent, { key: route.key, path: route.routePath, exact: RouteView.isExact(route),
-                render: function (props) {
-                    _this.routingState.setCurrentRoute(props, route);
-                    return React.createElement(Observer, null, function () { return _this.getRouteComponent(route, props.location.pathname + props.location.search); });
-                } })); })]);
+        return this.routingState.currentRoute ?
+            this.getRouteComponent(this.routingState.currentRoute) :
+            (this.hasMounted && this.routeProvider.notFoundComponent ? React.createElement(this.routeProvider.notFoundComponent) : null);
     };
-    RouteView.prototype.getRouteComponent = function (route, path) {
+    RouteView.prototype.getRouteComponent = function (match) {
+        var route = match.route;
+        var path = match.path + window.location.search;
         if (!route.allowAnonymous) {
             if (this.securityService.isAuthenticated) {
                 if (!this.isAuthorised(route)) {

package/dist/Routing/RoutingState.d.ts

@@ -1,20 +1,17 @@
-import { Misc } from '@singularsystems/neo-core';
-import { RouteComponentProps } from 'react-router-dom';
+import { AppServices } from '@singularsystems/neo-core';
 import { IViewBase } from '../Views/ViewBase';
-import RouteProvider, { IProcessedRoute } from './RouteProvider';
-import RouteView from './RouteView';
+import RouteProvider, { IMatchedRoute, IProcessedRoute } from './RouteProvider';
 export declare class RoutingState {
+    constructor(config: AppServices.IConfigModel);
+    readonly basePath: string;
     appRouteProvider: RouteProvider;
-    currentRouteProps: RouteComponentProps;
-    currentRoute?: IProcessedRoute;
-    currentRouteView?: RouteView;
-    leavePromise?: Promise<boolean> | Promise<Misc.ModalResult> | Promise<void>;
-    observableRoute: IProcessedRoute | null;
+    /** Gets the route which last matched */
+    currentRoute: IMatchedRoute | null;
+    /** Base route which last matched. This will not change when view parameters are updated. */
+    currentRouteBase: IProcessedRoute | null;
+    direction: number;
+    /** Returns the current view instance. */
     currentView: IViewBase | null;
     get currentViewFullScreen(): boolean;
     get taskRunner(): import("@singularsystems/neo-core").ITaskRunner | undefined;
-    constructor();
-    setCurrentRoute(routeProps: RouteComponentProps, route: IProcessedRoute): void;
-    private previousRoute?;
-    onRouteChanged(): void;
 }

package/dist/Routing/RoutingState.js

@@ -1,11 +1,18 @@
-import { __decorate, __metadata } from "tslib";
-import { injectable } from 'inversify';
-import { computed, makeObservable, observable } from 'mobx';
+import { __decorate, __metadata, __param } from "tslib";
+import { AppServices } from '@singularsystems/neo-core';
+import { inject, injectable } from 'inversify';
+import { computed, makeObservable, observable, runInAction } from 'mobx';
 var RoutingState = /** @class */ (function () {
-    function RoutingState() {
-        this.observableRoute = null;
+    function RoutingState(config) {
+        /** Gets the route which last matched */
+        this.currentRoute = null;
+        /** Base route which last matched. This will not change when view parameters are updated. */
+        this.currentRouteBase = null;
+        this.direction = 0;
+        /** Returns the current view instance. */
         this.currentView = null;
         makeObservable(this);
+        this.basePath = config.baseUrl;
     }
     Object.defineProperty(RoutingState.prototype, "currentViewFullScreen", {
         get: function () {
@@ -23,16 +30,21 @@ var RoutingState = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    RoutingState.prototype.setCurrentRoute = function (routeProps, route) {
-        this.currentRouteProps = routeProps;
-        this.currentRoute = route;
-    };
-    RoutingState.prototype.onRouteChanged = function () {
+    /** @internal */
+    RoutingState.prototype.updateRoute = function (match) {
+        var _this = this;
         var _a, _b;
-        if (this.previousRoute !== this.currentRoute) {
-            this.previousRoute = this.currentRoute;
-            this.observableRoute = (_a = this.currentRoute) !== null && _a !== void 0 ? _a : null;
-            if (((_b = this.currentView) === null || _b === void 0 ? void 0 : _b.constructor) !== this.currentRoute.component) {
+        var prevRoute = (_a = this.currentRoute) === null || _a === void 0 ? void 0 : _a.route;
+        runInAction(function () {
+            var _a;
+            _this.currentRoute = match;
+            _this.currentRouteBase = (_a = match === null || match === void 0 ? void 0 : match.route) !== null && _a !== void 0 ? _a : null;
+        });
+        if (prevRoute !== (match === null || match === void 0 ? void 0 : match.route)) {
+            var prevIndex = prevRoute ? this.appRouteProvider.allRoutes.indexOf(prevRoute) : -1;
+            var newIndex = match ? this.appRouteProvider.allRoutes.indexOf(match.route) : -1;
+            this.direction = newIndex - prevIndex;
+            if (((_b = this.currentView) === null || _b === void 0 ? void 0 : _b.constructor) !== (match === null || match === void 0 ? void 0 : match.route.component)) {
                 this.currentView = null;
             }
             // Scroll back to top as if the browser had actually loaded a new page.
@@ -40,15 +52,19 @@ var RoutingState = /** @class */ (function () {
         }
         else {
             // Same route, but parameters must have changed.
-            if (this.currentView) {
-                this.currentView.updateViewParams(this.currentRouteProps.match);
+            if (this.currentView && this.currentRoute) {
+                this.currentView.updateViewParams(this.currentRoute);
             }
         }
     };
     __decorate([
         observable.ref,
         __metadata("design:type", Object)
-    ], RoutingState.prototype, "observableRoute", void 0);
+    ], RoutingState.prototype, "currentRoute", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Object)
+    ], RoutingState.prototype, "currentRouteBase", void 0);
     __decorate([
         observable.ref,
         __metadata("design:type", Object)
@@ -65,7 +81,8 @@ var RoutingState = /** @class */ (function () {
     ], RoutingState.prototype, "taskRunner", null);
     RoutingState = __decorate([
         injectable(),
-        __metadata("design:paramtypes", [])
+        __param(0, inject(AppServices.NeoTypes.Config.ConfigModel.symbol)),
+        __metadata("design:paramtypes", [Object])
     ], RoutingState);
     return RoutingState;
 }());

package/dist/Routing/ViewParameter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IRouteParameter } from './IRouteParameter';
 import { IViewParameterListInternal } from './ViewParameterList';
 import { Model } from '@singularsystems/neo-core';

package/dist/Routing/ViewParameterList.d.ts

@@ -1,6 +1,5 @@
 import { ViewParameter, IViewParameter } from './ViewParameter';
 import { RouteParameterObject } from './IRouteParameter';
-import { match } from 'react-router';
 import { BreadCrumbItem } from './BreadCrumbItem';
 import { IViewBase } from '../Views/ViewBase';
 import { ParamValues } from "./NavigationHelper";
@@ -29,10 +28,8 @@ export interface IViewParameterListOfT<TParams extends RouteParameterObject<TPar
     }, options?: ISetValuesOptions | boolean): void;
 }
 export interface IViewParameterListInternal extends IViewParameterList {
-    update(match: match): boolean;
     setUrl(viewParameter: ViewParameter | null, replace?: boolean): void;
     view?: IViewBase;
-    readonly params: ViewParameter[];
 }
 export declare class ViewParameterList<TParams extends RouteParameterObject<TParams>> implements IViewParameterListInternal, IViewParameterListOfT<TParams> {
     readonly view?: IViewBase | undefined;
@@ -46,10 +43,6 @@ export declare class ViewParameterList<TParams extends RouteParameterObject<TPar
         [P in keyof TParams]?: number | string | string[] | null;
     }, options?: ISetValuesOptions | boolean): void;
     setUrl(viewParameter: ViewParameter | null, replace?: boolean): void;
-    /**
-     * Updates the parameter values from the values in the url. Returns true if any of the values have changed.
-     */
-    update(match: match): boolean;
     /**
      * Gets a url for an object with view params specified.
      * @param basePath Base path without parameters

package/dist/Routing/ViewParameterList.js

@@ -2,7 +2,7 @@ import { ViewParameter } from './ViewParameter';
 import { BreadCrumbSelectMode } from './IRouteParameter';
 import { BreadCrumbItem } from './BreadCrumbItem';
 import { Misc } from '@singularsystems/neo-core';
-import { NeoReactTypes } from '..';
+import { NeoReactTypes } from '../Modules/Types';
 var ViewParameterList = /** @class */ (function () {
     function ViewParameterList(routeParameterObject, view) {
         this.view = view;
@@ -107,6 +107,7 @@ var ViewParameterList = /** @class */ (function () {
         }
     };
     /**
+     * @internal
      * Updates the parameter values from the values in the url. Returns true if any of the values have changed.
      */
     ViewParameterList.prototype.update = function (match) {
@@ -116,11 +117,8 @@ var ViewParameterList = /** @class */ (function () {
             //@ts-ignore
             var viewParam = this[param];
             if (viewParam) {
-                // @ts-ignore
                 var value = match.params[param];
-                if (value === undefined)
-                    value = null;
-                if (viewParam.update(value))
+                if (viewParam.update(value !== null && value !== void 0 ? value : null))
                     hasChanged = true;
             }
         }

package/dist/Views/ViewBase.d.ts

@@ -2,17 +2,17 @@ import React from 'react';
 import { Views, ITaskRunner } from '@singularsystems/neo-core';
 import { RouteParameterObject } from '../Routing/IRouteParameter';
 import { TransformParamsType, IViewParameterList, IViewParameterListOfT } from '../Routing/ViewParameterList';
-import { match } from 'react-router';
 import { ViewState } from './ViewState';
 import { BreadCrumbItem } from '../Routing/BreadCrumbItem';
 import { IViewModel } from './IViewModel';
 import EmptyViewModel from './EmptyViewModel';
 import { IRouteChangedProps } from '../Routing/IRouteChangedProps';
 import { valueOrLazy } from './ViewModelBase';
+import { IMatchedRoute } from "../Routing/RouteProvider";
 export interface IViewBase extends Views.IViewBase {
     readonly fullScreen: boolean;
     viewParams: IViewParameterList;
-    updateViewParams(match: match): void;
+    updateViewParams(match: IMatchedRoute): void;
     getBreadCrumbList(): BreadCrumbItem[];
     onLeave(): string | undefined;
     beforeRouteChanged(props: IRouteChangedProps): void;
@@ -46,7 +46,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     protected createViewState(viewModel: valueOrLazy<TViewModel>): ViewState<TViewModel, TParams>;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
-    updateViewParams(match: match): void;
+    updateViewParams(match: IMatchedRoute): void;
     /**
      * viewParamsUpdated() is called when the component is mounted, and whenever a route parameter or query parameter gets a changed value.
      */
@@ -69,7 +69,7 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     /**
      * Called whenever the route changes. Including navigating to a new view, leaving the site, or changing a route parameter in this view.
      * Note: if props.leavePrompt is set, onLeave() will not be called.
-     * @param props
+     * @param props Set leavePrompt to `false`, a `string`, or a promise from a modal.
      */
     beforeRouteChanged(props: IRouteChangedProps): void;
 }

package/dist/Views/ViewBase.js

@@ -77,7 +77,7 @@ var ViewBase = /** @class */ (function (_super) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        paramsUpdated = this.navigation.currentRouteProps ? this.viewState.viewParams.update(this.navigation.currentRouteProps.match) : false;
+                        paramsUpdated = this.routingState.currentRoute ? (this.viewState.viewParams).update(this.routingState.currentRoute) : false;
                         if (!!this.viewState.hasSetup) return [3 /*break*/, 2];
                         this.viewState.hasSetup = true;
                         return [4 /*yield*/, this.initialise()];
@@ -106,8 +106,8 @@ var ViewBase = /** @class */ (function (_super) {
             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())];
+                        if (!(this.viewState.viewParams).update(match)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.viewParamsUpdated()];
                     case 1:
                         _a.sent();
                         _a.label = 2;
@@ -124,9 +124,10 @@ var ViewBase = /** @class */ (function (_super) {
     /** Gets the parent breadcrumbs, and the breadcrumb for this view. */
     ViewBase.prototype.getBreadCrumbStart = function () {
         var _this = this;
+        var _a;
         var items = [];
         // Get parent items
-        var menuRoute = this.routingState.currentRoute;
+        var menuRoute = (_a = this.routingState.currentRoute) === null || _a === void 0 ? void 0 : _a.route;
         var parent = menuRoute.breadCrumbParent;
         while (parent) {
             items.splice(0, 0, new BreadCrumbItem(parent.name, parent.path));
@@ -167,7 +168,7 @@ var ViewBase = /** @class */ (function (_super) {
     /**
      * Called whenever the route changes. Including navigating to a new view, leaving the site, or changing a route parameter in this view.
      * Note: if props.leavePrompt is set, onLeave() will not be called.
-     * @param props
+     * @param props Set leavePrompt to `false`, a `string`, or a promise from a modal.
      */
     ViewBase.prototype.beforeRouteChanged = function (props) {
     };

package/dist/index.d.ts

@@ -7,5 +7,7 @@ import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
 import * as Icons from './ReactComponents/Icons';
 import { TooltipHelper } from './ReactComponents/TooltipHelper';
-export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };
+export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper };
+export { Transition } from './ReactComponents/Transitions/Transition';
+export { TransitionController } from './ReactComponents/Transitions/TransitionController';
 export { ICancellableEvent } from './ReactComponents/Misc';

package/dist/index.js

@@ -7,4 +7,6 @@ import * as Views from './Views/';
 import * as Managers from './ReactComponents/_Managers';
 import * as Icons from './ReactComponents/Icons';
 import { TooltipHelper } from './ReactComponents/TooltipHelper';
-export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper, };
+export { Icons, Managers, NeoReactModule, NeoReactTypes, Neo, NeoGrid, Routing, Views, TooltipHelper };
+export { Transition } from './ReactComponents/Transitions/Transition';
+export { TransitionController } from './ReactComponents/Transitions/TransitionController';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.22",
+  "version": "1.1.0",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,50 +16,43 @@
   "author": "Singular Systems",
   "license": "ISC",
   "devDependencies": {
-    "@testing-library/react": "14.0.0",
-    "@types/history": "4.7.4",
-    "@types/jest": "29.5.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.13",
     "@types/memoize-one": "5.1.2",
-    "@types/node": "18.16.3",
-    "@types/react": "18.2.64",
+    "@types/node": "22.7.4",
+    "@types/react": "18.3.11",
     "@types/react-custom-scrollbars": "^4.0.6",
-    "@types/react-dom": "18.2.3",
-    "@types/react-router": "5.1.18",
-    "@types/react-router-dom": "5.3.3",
+    "@types/react-dom": "18.3.0",
     "decimal.js-light": "2.5.1",
     "react-scripts": "5.0.1",
-    "typescript": "5.4.2"
+    "typescript": "5.5.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.18",
+    "@singularsystems/neo-core": "1.1.0",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.7.7",
-    "history": "4.10.1",
-    "inversify": "^6.0.2",
+    "inversify": "6.0.2",
     "memoize-one": "6.0.0",
-    "mobx": "6.9.0",
-    "mobx-react": "7.6.0",
-    "react": "18.2.0",
-    "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "18.2.0",
-    "react-router": "5.3.3",
-    "react-router-dom": "5.3.3",
+    "mobx": "6.13.3",
+    "mobx-react": "9.1.1",
+    "react": "18.3.1",
+    "react-custom-scrollbars": "4.2.1",
+    "react-dom": "18.3.1",
     "react-select": "5.8.1",
-    "tslib": "2.5.0"
+    "tslib": "2.7.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.18",
+    "@singularsystems/neo-core": ">=1.1.0",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",
     "mobx-react": ">=7.6.0",
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "react-router": "^5.0.0",
-    "react-router-dom": "^5.0.0"
+    "react-dom": ">=18.2.0"
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.5.0",
   "resolutions": {
     "@singularsystems/neo-core": "portal:../core"
   }

package/styles/Button.scss

@@ -31,4 +31,10 @@ div.dropdown-menu {
             white-space: wrap;
         }
     }
+}
+
+.btn {  
+    &.min-width {
+      min-width: 0;
+    }
 }

package/styles/DatePicker.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $neo-include-datepicker: true !default;
 
 @if $neo-include-datepicker {
@@ -123,7 +125,7 @@ $neo-include-datepicker: true !default;
       
             &.selectable:hover {
               cursor: pointer;
-              background-color: lighten($form-focused-border, 15%);
+              background-color: color.adjust($form-focused-border, $lightness: 15%);
             }
       
             &.today {

package/styles/Forms.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Numeric input
 .numeric-input {
     text-align: right;
@@ -59,7 +61,7 @@ div.neo-form-group-floating {
             transform: scale(1);
         }
         label.neo-floating-label {
-            color: darken($form-focused-border, 15%);
+            color: color.adjust($form-focused-border, $lightness: -15%);
         }
         .neo-forms-editor {
             border-bottom: 1px solid $form-focused-border;

package/styles/Grid.scss

@@ -33,6 +33,10 @@ table.neo-grid {
     }
     .boolean-col {
         text-align: center;
+
+        .form-check {
+            display: inline-block;
+        }
     }
 
     .col-align-left {

package/styles/Misc.scss

@@ -153,4 +153,29 @@ div.tabs-header {
         left: -0.5rem;
         font-size: 1.5rem;
     }
+}
+
+// Transitions
+
+.neo-transition-container {
+    position: relative;
+
+    &.transitioning {
+        overflow: hidden;
+        transition: height 0.2s ease-in-out;
+    }
+
+    .neo-transition-panel {
+        &.animate-out {
+            transition: all 0.2s ease-in-out;
+            position: absolute;
+            top: 0;
+            overflow: hidden;
+            width: 100%;
+        }
+        &.animate-in {
+            transition: all 0.25s ease-in-out;
+            position: relative;
+        }
+    }
 }