@progress/kendo-react-layout 4.11.0-dev.202111172052 → 4.11.0-dev.202111180932

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637181501,
+    publishDate: 1637227031,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/panelbar/PanelBar.d.ts

@@ -15,6 +15,10 @@ export interface PanelBarProps extends PanelBarInterface {
      * The class name that is set to the PanelBar.
      */
     className?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
 }
 /**
  * @hidden
@@ -38,6 +42,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
         focused: PropTypes.Requireable<string>;
         expandMode: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
     };
@@ -47,6 +52,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     static defaultProps: {
         expandMode: string;
         animation: boolean;
+        keepItemsMounted: boolean;
     };
     /**
      * @hidden

package/dist/es/panelbar/PanelBar.js

@@ -41,8 +41,8 @@ var PanelBar = /** @class */ (function (_super) {
          */
         _this.handleSelect = function (event) {
             var state = __assign({}, _this.state, { selected: _this.selected });
-            _this._selectionService.select(event.uniquePrivateKey, renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children), state.expanded);
-            _this._selectionService.focus(event.uniquePrivateKey, 0, renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+            _this._selectionService.select(event.uniquePrivateKey, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
+            _this._selectionService.focus(event.uniquePrivateKey, 0, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
         };
         /**
          * @hidden
@@ -71,13 +71,13 @@ var PanelBar = /** @class */ (function (_super) {
             var state = __assign({}, _this.state, { selected: _this.selected });
             switch (action) {
                 case NavigationAction.Previous:
-                    _this._selectionService.focus(state.focused, -1, renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+                    _this._selectionService.focus(state.focused, -1, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
                     break;
                 case NavigationAction.Next:
-                    _this._selectionService.focus(state.focused, 1, renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+                    _this._selectionService.focus(state.focused, 1, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
                     break;
                 case NavigationAction.Toggle:
-                    _this._selectionService.select(state.focused, renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children), state.expanded);
+                    _this._selectionService.select(state.focused, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
                     break;
                 default:
             }
@@ -132,7 +132,7 @@ var PanelBar = /** @class */ (function (_super) {
             'aria-activedescendant': this.activeDescendant
         };
         var state = __assign({}, this.state, { selected: this.selected });
-        var children = renderChildren(this.props.animation, state, this.handleSelect, this.props.children);
+        var children = renderChildren(this.props.animation, this.props.keepItemsMounted, state, this.handleSelect, this.props.children);
         var className = classNames('k-panelbar', this.props.className);
         return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), children));
     };
@@ -173,6 +173,7 @@ var PanelBar = /** @class */ (function (_super) {
         focused: PropTypes.string,
         expandMode: PropTypes.oneOf(['single', 'multiple']),
         className: PropTypes.string,
+        keepItemsMounted: PropTypes.bool,
         onSelect: PropTypes.func,
         style: PropTypes.object
     };
@@ -181,7 +182,8 @@ var PanelBar = /** @class */ (function (_super) {
      */
     PanelBar.defaultProps = {
         expandMode: 'multiple',
-        animation: true
+        animation: true,
+        keepItemsMounted: false
     };
     return PanelBar;
 }(React.Component));

package/dist/es/panelbar/PanelBarItem.d.ts

@@ -80,12 +80,20 @@ export interface PanelBarItemProps {
      * @hidden
      */
     parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
     /**
      * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
      */
     [customProp: string]: any;
 }
-export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps, {}> {
+/** @hidden */
+interface PanelBarItemState {
+    show: boolean;
+}
+export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps, PanelBarItemState> {
     /**
      * @hidden
      */
@@ -101,6 +109,7 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
         title: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
         id: PropTypes.Requireable<string | number>;
         focused: PropTypes.Requireable<boolean>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -108,9 +117,12 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
     static defaultProps: {
         title: string;
     };
+    constructor(props: any);
     /**
      * @hidden
      */
     render(): JSX.Element;
     private handleItemClick;
+    private childFactory;
 }
+export {};

package/dist/es/panelbar/PanelBarItem.js

@@ -43,11 +43,10 @@ function iconElement(_a) {
     }
     return null;
 }
-// tslint:enable:max-line-length
 var PanelBarItem = /** @class */ (function (_super) {
     __extends(PanelBarItem, _super);
-    function PanelBarItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function PanelBarItem(props) {
+        var _this = _super.call(this, props) || this;
         _this.handleItemClick = function () {
             var _a = _this.props, onSelect = _a.onSelect, disabled = _a.disabled, id = _a.id;
             if (onSelect && !disabled) {
@@ -58,14 +57,24 @@ var PanelBarItem = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.childFactory = function (child) {
+            if (_this.props.keepItemsMounted) {
+                return React.cloneElement(child, __assign({}, child.props, { in: _this.props.expanded }));
+            }
+            return child;
+        };
+        _this.state = {
+            show: props.expanded
+        };
         return _this;
     }
     /**
      * @hidden
      */
     PanelBarItem.prototype.render = function () {
+        var _this = this;
         var _a;
-        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation;
+        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation, keepItemsMounted = _b.keepItemsMounted;
         var panelBarItemAriaAttributes = {
             'role': 'treeitem',
             'aria-disabled': disabled,
@@ -92,11 +101,12 @@ var PanelBarItem = /** @class */ (function (_super) {
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
         var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
-        var content = (!disabled && expanded) ?
-            (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group" }, children))
+        var opened = (!disabled && expanded);
+        var content = opened || keepItemsMounted
+            ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted ? (this.state.show ? 'block' : 'none') : 'block' } }, children))
             : null;
-        var child = ((animation !== undefined ? animation : true) && !disabled && children) ?
-            (React.createElement(Reveal, { transitionEnterDuration: 200, transitionExitDuration: 200, key: uniquePrivateKey + '_animation', style: animationStyle, children: content }))
+        var child = ((animation !== undefined ? animation : true) && !disabled && children)
+            ? (React.createElement(Reveal, { transitionEnterDuration: 200, transitionExitDuration: 200, key: uniquePrivateKey + '_animation', style: animationStyle, children: content, childFactory: keepItemsMounted && this.childFactory, unmountOnExit: !keepItemsMounted, onBeforeEnter: function () { return keepItemsMounted && _this.setState({ show: true }); }, onAfterExited: function () { return keepItemsMounted && _this.setState({ show: false }); } }))
             : content;
         return (React.createElement("li", __assign({ id: id, className: panelBarItemClassName }, panelBarItemAriaAttributes),
             React.createElement("span", { className: panelBarLinkClassName, onClick: this.handleItemClick },
@@ -125,7 +135,8 @@ var PanelBarItem = /** @class */ (function (_super) {
             PropTypes.string,
             PropTypes.number
         ]),
-        focused: PropTypes.bool
+        focused: PropTypes.bool,
+        keepItemsMounted: PropTypes.bool
     };
     /**
      * @hidden

package/dist/es/panelbar/util.d.ts

@@ -5,7 +5,7 @@ import { PanelBarExpandMode } from './PanelBarInterface';
 /**
  * @hidden
  */
-export declare const renderChildren: (animation: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
+export declare const renderChildren: (animation: boolean, keepItemsMounted: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
 /**
  * @hidden
  */

package/dist/es/panelbar/util.js

@@ -14,8 +14,9 @@ import { PanelBarItem } from './PanelBarItem';
 /**
  * @hidden
  */
-export var renderChildren = function (animation, state, handleSelect, children, parentExpanded, level, parentPrivateKey) {
+export var renderChildren = function (animation, keepItemsMounted, state, handleSelect, children, parentExpanded, level, parentPrivateKey) {
     if (animation === void 0) { animation = true; }
+    if (keepItemsMounted === void 0) { keepItemsMounted = false; }
     if (parentExpanded === void 0) { parentExpanded = true; }
     if (level === void 0) { level = 0; }
     if (parentPrivateKey === void 0) { parentPrivateKey = []; }
@@ -27,9 +28,9 @@ export var renderChildren = function (animation, state, handleSelect, children,
                 : "." + idx;
             if (child.props.children) {
                 nestedChildren =
-                    renderChildren(animation, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1 && parentExpanded, level + 1, parentPrivateKey.concat([privateKey]));
+                    renderChildren(animation, keepItemsMounted, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1, level + 1, parentPrivateKey.concat([privateKey]));
             }
-            return React.cloneElement(child, __assign({}, child.props, { animation: child.props.animation !== undefined ? child.props.animation : animation, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (state.expanded || []).indexOf(privateKey) > -1 && parentExpanded, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
+            return React.cloneElement(child, __assign({}, child.props, { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (state.expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
         }
         else {
             return React.createElement("div", { className: "k-panelbar-content k-content" }, child);

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637181501,
+    publishDate: 1637227031,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/PanelBar.d.ts

@@ -15,6 +15,10 @@ export interface PanelBarProps extends PanelBarInterface {
      * The class name that is set to the PanelBar.
      */
     className?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
 }
 /**
  * @hidden
@@ -38,6 +42,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
         focused: PropTypes.Requireable<string>;
         expandMode: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
     };
@@ -47,6 +52,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     static defaultProps: {
         expandMode: string;
         animation: boolean;
+        keepItemsMounted: boolean;
     };
     /**
      * @hidden

package/dist/npm/panelbar/PanelBar.js

@@ -43,8 +43,8 @@ var PanelBar = /** @class */ (function (_super) {
          */
         _this.handleSelect = function (event) {
             var state = __assign({}, _this.state, { selected: _this.selected });
-            _this._selectionService.select(event.uniquePrivateKey, util_1.renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children), state.expanded);
-            _this._selectionService.focus(event.uniquePrivateKey, 0, util_1.renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+            _this._selectionService.select(event.uniquePrivateKey, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
+            _this._selectionService.focus(event.uniquePrivateKey, 0, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
         };
         /**
          * @hidden
@@ -73,13 +73,13 @@ var PanelBar = /** @class */ (function (_super) {
             var state = __assign({}, _this.state, { selected: _this.selected });
             switch (action) {
                 case navigationService_1.NavigationAction.Previous:
-                    _this._selectionService.focus(state.focused, -1, util_1.renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+                    _this._selectionService.focus(state.focused, -1, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
                     break;
                 case navigationService_1.NavigationAction.Next:
-                    _this._selectionService.focus(state.focused, 1, util_1.renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children));
+                    _this._selectionService.focus(state.focused, 1, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
                     break;
                 case navigationService_1.NavigationAction.Toggle:
-                    _this._selectionService.select(state.focused, util_1.renderChildren(_this.props.animation, state, _this.handleSelect, _this.props.children), state.expanded);
+                    _this._selectionService.select(state.focused, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
                     break;
                 default:
             }
@@ -134,7 +134,7 @@ var PanelBar = /** @class */ (function (_super) {
             'aria-activedescendant': this.activeDescendant
         };
         var state = __assign({}, this.state, { selected: this.selected });
-        var children = util_1.renderChildren(this.props.animation, state, this.handleSelect, this.props.children);
+        var children = util_1.renderChildren(this.props.animation, this.props.keepItemsMounted, state, this.handleSelect, this.props.children);
         var className = kendo_react_common_1.classNames('k-panelbar', this.props.className);
         return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), children));
     };
@@ -175,6 +175,7 @@ var PanelBar = /** @class */ (function (_super) {
         focused: PropTypes.string,
         expandMode: PropTypes.oneOf(['single', 'multiple']),
         className: PropTypes.string,
+        keepItemsMounted: PropTypes.bool,
         onSelect: PropTypes.func,
         style: PropTypes.object
     };
@@ -183,7 +184,8 @@ var PanelBar = /** @class */ (function (_super) {
      */
     PanelBar.defaultProps = {
         expandMode: 'multiple',
-        animation: true
+        animation: true,
+        keepItemsMounted: false
     };
     return PanelBar;
 }(React.Component));

package/dist/npm/panelbar/PanelBarItem.d.ts

@@ -80,12 +80,20 @@ export interface PanelBarItemProps {
      * @hidden
      */
     parentUniquePrivateKey?: string[];
+    /**
+     * @hidden
+     */
+    keepItemsMounted?: boolean;
     /**
      * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
      */
     [customProp: string]: any;
 }
-export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps, {}> {
+/** @hidden */
+interface PanelBarItemState {
+    show: boolean;
+}
+export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps, PanelBarItemState> {
     /**
      * @hidden
      */
@@ -101,6 +109,7 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
         title: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
         id: PropTypes.Requireable<string | number>;
         focused: PropTypes.Requireable<boolean>;
+        keepItemsMounted: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -108,9 +117,12 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
     static defaultProps: {
         title: string;
     };
+    constructor(props: any);
     /**
      * @hidden
      */
     render(): JSX.Element;
     private handleItemClick;
+    private childFactory;
 }
+export {};

package/dist/npm/panelbar/PanelBarItem.js

@@ -45,11 +45,10 @@ function iconElement(_a) {
     }
     return null;
 }
-// tslint:enable:max-line-length
 var PanelBarItem = /** @class */ (function (_super) {
     __extends(PanelBarItem, _super);
-    function PanelBarItem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function PanelBarItem(props) {
+        var _this = _super.call(this, props) || this;
         _this.handleItemClick = function () {
             var _a = _this.props, onSelect = _a.onSelect, disabled = _a.disabled, id = _a.id;
             if (onSelect && !disabled) {
@@ -60,14 +59,24 @@ var PanelBarItem = /** @class */ (function (_super) {
                 });
             }
         };
+        _this.childFactory = function (child) {
+            if (_this.props.keepItemsMounted) {
+                return React.cloneElement(child, __assign({}, child.props, { in: _this.props.expanded }));
+            }
+            return child;
+        };
+        _this.state = {
+            show: props.expanded
+        };
         return _this;
     }
     /**
      * @hidden
      */
     PanelBarItem.prototype.render = function () {
+        var _this = this;
         var _a;
-        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation;
+        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation, keepItemsMounted = _b.keepItemsMounted;
         var panelBarItemAriaAttributes = {
             'role': 'treeitem',
             'aria-disabled': disabled,
@@ -94,11 +103,12 @@ var PanelBarItem = /** @class */ (function (_super) {
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
         var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
-        var content = (!disabled && expanded) ?
-            (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group" }, children))
+        var opened = (!disabled && expanded);
+        var content = opened || keepItemsMounted
+            ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted ? (this.state.show ? 'block' : 'none') : 'block' } }, children))
             : null;
-        var child = ((animation !== undefined ? animation : true) && !disabled && children) ?
-            (React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: 200, transitionExitDuration: 200, key: uniquePrivateKey + '_animation', style: animationStyle, children: content }))
+        var child = ((animation !== undefined ? animation : true) && !disabled && children)
+            ? (React.createElement(kendo_react_animation_1.Reveal, { transitionEnterDuration: 200, transitionExitDuration: 200, key: uniquePrivateKey + '_animation', style: animationStyle, children: content, childFactory: keepItemsMounted && this.childFactory, unmountOnExit: !keepItemsMounted, onBeforeEnter: function () { return keepItemsMounted && _this.setState({ show: true }); }, onAfterExited: function () { return keepItemsMounted && _this.setState({ show: false }); } }))
             : content;
         return (React.createElement("li", __assign({ id: id, className: panelBarItemClassName }, panelBarItemAriaAttributes),
             React.createElement("span", { className: panelBarLinkClassName, onClick: this.handleItemClick },
@@ -127,7 +137,8 @@ var PanelBarItem = /** @class */ (function (_super) {
             PropTypes.string,
             PropTypes.number
         ]),
-        focused: PropTypes.bool
+        focused: PropTypes.bool,
+        keepItemsMounted: PropTypes.bool
     };
     /**
      * @hidden

package/dist/npm/panelbar/util.d.ts

@@ -5,7 +5,7 @@ import { PanelBarExpandMode } from './PanelBarInterface';
 /**
  * @hidden
  */
-export declare const renderChildren: (animation: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
+export declare const renderChildren: (animation: boolean, keepItemsMounted: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
 /**
  * @hidden
  */

package/dist/npm/panelbar/util.js

@@ -16,8 +16,9 @@ var PanelBarItem_1 = require("./PanelBarItem");
 /**
  * @hidden
  */
-exports.renderChildren = function (animation, state, handleSelect, children, parentExpanded, level, parentPrivateKey) {
+exports.renderChildren = function (animation, keepItemsMounted, state, handleSelect, children, parentExpanded, level, parentPrivateKey) {
     if (animation === void 0) { animation = true; }
+    if (keepItemsMounted === void 0) { keepItemsMounted = false; }
     if (parentExpanded === void 0) { parentExpanded = true; }
     if (level === void 0) { level = 0; }
     if (parentPrivateKey === void 0) { parentPrivateKey = []; }
@@ -29,9 +30,9 @@ exports.renderChildren = function (animation, state, handleSelect, children, par
                 : "." + idx;
             if (child.props.children) {
                 nestedChildren =
-                    exports.renderChildren(animation, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1 && parentExpanded, level + 1, parentPrivateKey.concat([privateKey]));
+                    exports.renderChildren(animation, keepItemsMounted, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1, level + 1, parentPrivateKey.concat([privateKey]));
             }
-            return React.cloneElement(child, __assign({}, child.props, { animation: child.props.animation !== undefined ? child.props.animation : animation, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (state.expanded || []).indexOf(privateKey) > -1 && parentExpanded, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
+            return React.cloneElement(child, __assign({}, child.props, { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (state.expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
         }
         else {
             return React.createElement("div", { className: "k-panelbar-content k-content" }, child);