@progress/kendo-react-layout 4.14.0-dev.202112221027 → 4.14.0-dev.202112301830

package/dist/es/main.d.ts

@@ -6,7 +6,10 @@ export * from './tabstrip/TabStripTab';
 export * from './panelbar/PanelBar';
 export * from './panelbar/PanelBarItem';
 export * from './panelbar/util';
-export * from './panelbar/PanelBarInterface';
+export * from './panelbar/interfaces/PanelBarProps';
+export * from './panelbar/interfaces/PanelBarItemProps';
+export * from './panelbar/interfaces/RenderPanelBarItem';
+export * from './panelbar/interfaces/PanelBarSelectEventArguments';
 export * from './menu/components/Menu';
 export * from './menu/components/MenuItemLink';
 export * from './menu/components/MenuItem';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1640167833,
+    publishDate: 1640888048,
     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

@@ -1,25 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { PanelBarItemProps } from './PanelBarItem';
-import { PanelBarInterface, PanelBarItemClickEventArguments } from './PanelBarInterface';
-import { NavigationAction } from './services/navigationService';
-/**
- * Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
- */
-export interface PanelBarProps extends PanelBarInterface {
-    /**
-     * The child can be either a single PanelBarItem or a PanelBarItem array.
-     */
-    children?: React.ReactNode;
-    /**
-     * 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;
-}
+import { PanelBarProps } from '../main';
+import { PanelBarItemClickEventArguments } from './interfaces/PanelBarItemClickEventArguments';
+import { NavigationAction } from './interfaces/NavigationAction';
 /**
  * @hidden
  */
@@ -60,15 +43,12 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     readonly state: PanelBarState;
     private activeDescendant?;
     private _element;
-    private _selectionService;
-    private _navigationService;
     private nextTickId;
-    private readonly selected;
+    private readonly expandMode;
+    private readonly selectedItem;
+    private readonly expandedItems;
+    private readonly children;
     constructor(props: PanelBarProps);
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: PanelBarProps): void;
     /**
      * @hidden
      */
@@ -76,15 +56,15 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     /**
      * @hidden
      */
-    onSelect: (child: React.ReactElement<PanelBarItemProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>, expanded: string[]) => void;
+    onSelect: (event: any) => void;
     /**
      * @hidden
      */
-    onFocus: (child: React.ReactElement<PanelBarItemProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>) => void;
+    onFocus: (event: any, step?: number) => void;
     /**
      * @hidden
      */
-    onNavigate: (action: NavigationAction) => void;
+    onNavigate: (event: any, action: NavigationAction) => void;
     /**
      * @hidden
      */

package/dist/es/panelbar/PanelBar.js

@@ -25,12 +25,11 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { PanelBarItem } from './PanelBarItem';
-import { renderChildren, getInitialState } from './util';
-import { SelectionService } from './services/selectionService';
-import { NavigationService, NavigationAction } from './services/navigationService';
-import { classNames } from '@progress/kendo-react-common';
+import { renderChildren, getInitialState, flatVisibleChildren, flatChildren, isArrayEqual, getFirstId } from './util';
+import { classNames, Keys } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { NavigationAction } from './interfaces/NavigationAction';
 var PanelBar = /** @class */ (function (_super) {
     __extends(PanelBar, _super);
     function PanelBar(props) {
@@ -40,44 +39,88 @@ var PanelBar = /** @class */ (function (_super) {
          * @hidden
          */
         _this.handleSelect = function (event) {
-            var state = __assign({}, _this.state, { selected: _this.selected });
-            _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));
+            _this.onSelect(event);
+            _this.onFocus(event);
         };
         /**
          * @hidden
          */
-        _this.onSelect = function (child, expanded) {
-            _this.setState({ selected: child.props.uniquePrivateKey, expanded: expanded }, function () {
-                if (_this.props.onSelect) {
-                    _this.props.onSelect.call(undefined, {
-                        target: child,
-                        action: 'select'
-                    });
+        _this.onSelect = function (event) {
+            var flattenChildren = flatChildren(React.Children.toArray(_this.children));
+            var selectedChild;
+            var newExpanded;
+            flattenChildren.forEach(function (child) {
+                if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+                    selectedChild = child;
                 }
             });
+            switch (_this.expandMode) {
+                case 'single':
+                    newExpanded = selectedChild.props.parentUniquePrivateKey.concat([selectedChild.props.uniquePrivateKey]);
+                    if (isArrayEqual(_this.expandedItems, newExpanded)) {
+                        if (selectedChild.props.parentUniquePrivateKey) {
+                            newExpanded = selectedChild.props.parentUniquePrivateKey.slice();
+                        }
+                        else {
+                            newExpanded = [];
+                        }
+                    }
+                    break;
+                case 'multiple':
+                    newExpanded = _this.expandedItems.slice();
+                    var index = newExpanded.indexOf(selectedChild.props.uniquePrivateKey);
+                    index === -1 ? newExpanded.push(selectedChild.props.uniquePrivateKey) : newExpanded.splice(index, 1);
+                    break;
+                default:
+                    newExpanded = _this.expandedItems.slice();
+                    break;
+            }
+            _this.setState({ selected: selectedChild.props.uniquePrivateKey, expanded: newExpanded });
+            if (_this.props.onSelect) {
+                _this.props.onSelect.call(undefined, {
+                    target: selectedChild,
+                    expandedItems: newExpanded
+                });
+            }
         };
         /**
          * @hidden
          */
-        _this.onFocus = function (child) {
-            _this.activeDescendant = child.props.id;
-            _this.setState({ focused: child.props.uniquePrivateKey });
+        _this.onFocus = function (event, step) {
+            if (step === void 0) { step = 0; }
+            var flattenChildren = flatVisibleChildren(React.Children.toArray(_this.children));
+            var focusedChild;
+            flattenChildren.forEach(function (child, ixd) {
+                if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
+                    var index = ixd + step < 0
+                        ? 0
+                        : ixd + step > flattenChildren.length
+                            ? flattenChildren.length - 1
+                            : ixd + step;
+                    focusedChild = flattenChildren[index];
+                }
+            });
+            if (focusedChild) {
+                _this.activeDescendant = focusedChild.props.id;
+                _this.setState({ focused: focusedChild.props.uniquePrivateKey });
+            }
         };
         /**
          * @hidden
          */
-        _this.onNavigate = function (action) {
-            var state = __assign({}, _this.state, { selected: _this.selected });
+        _this.onNavigate = function (event, action) {
+            var step;
             switch (action) {
                 case NavigationAction.Previous:
-                    _this._selectionService.focus(state.focused, -1, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
+                    step = -1;
+                    _this.onFocus(event, step);
                     break;
                 case NavigationAction.Next:
-                    _this._selectionService.focus(state.focused, 1, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
+                    step = 1;
+                    _this.onFocus(event, step);
                     break;
                 case NavigationAction.Toggle:
-                    _this._selectionService.select(state.focused, renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
+                    _this.onSelect(event);
                     break;
                 default:
             }
@@ -95,18 +138,52 @@ var PanelBar = /** @class */ (function (_super) {
         };
         _this.handleKeyDown = function (event) {
             var rtl = _this._element && (getComputedStyle(_this._element).direction === 'rtl') || false;
-            var target = event.target, currentTarget = event.currentTarget;
-            if (target === currentTarget) {
-                _this._navigationService.navigate(event, rtl);
+            if (event.target === event.currentTarget) {
+                var keyCode = event.keyCode;
+                var action = void 0;
+                switch (keyCode) {
+                    case Keys.left:
+                        action = !rtl ? NavigationAction.Previous : NavigationAction.Next;
+                        break;
+                    case Keys.up:
+                        action = NavigationAction.Previous;
+                        break;
+                    case Keys.right:
+                        action = !rtl ? NavigationAction.Next : NavigationAction.Previous;
+                        break;
+                    case Keys.down:
+                        action = NavigationAction.Next;
+                        break;
+                    case Keys.space:
+                    case Keys.enter:
+                        action = NavigationAction.Toggle;
+                        break;
+                    default:
+                        action = null;
+                        break;
+                }
+                if (action !== null) {
+                    event.preventDefault();
+                    _this.onNavigate(event, action);
+                }
             }
         };
         validatePackage(packageMetadata);
-        _this.state = getInitialState(props, props.expandMode || 'multiple');
-        _this._selectionService = new SelectionService(_this.onSelect, _this.onFocus, _this.props.expandMode || 'multiple');
-        _this._navigationService = new NavigationService(_this.onNavigate);
+        var initialState = getInitialState(props, _this.expandMode);
+        if (!initialState.focused) {
+            initialState.focused = getFirstId(props);
+        }
+        _this.state = initialState;
         return _this;
     }
-    Object.defineProperty(PanelBar.prototype, "selected", {
+    Object.defineProperty(PanelBar.prototype, "expandMode", {
+        get: function () {
+            return this.props.expandMode || 'multiple';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PanelBar.prototype, "selectedItem", {
         get: function () {
             var _a = this.props.selected, selected = _a === void 0 ? this.state.selected : _a;
             return selected;
@@ -114,15 +191,30 @@ var PanelBar = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    /**
-     * @hidden
-     */
-    PanelBar.prototype.componentDidUpdate = function (prevProps) {
-        var newProps = this.props;
-        if (newProps.expandMode !== prevProps.expandMode) {
-            this._selectionService.setExpandMode(newProps.expandMode);
-        }
-    };
+    Object.defineProperty(PanelBar.prototype, "expandedItems", {
+        get: function () {
+            var expanded = this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
+            return expanded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(PanelBar.prototype, "children", {
+        get: function () {
+            var state = __assign({}, this.state, { selected: this.selectedItem });
+            var renderState = {
+                animation: this.props.animation,
+                keepItemsMounted: this.props.keepItemsMounted,
+                state: state,
+                expanded: this.expandedItems,
+                handleSelect: this.handleSelect,
+                children: this.props.children
+            };
+            return renderChildren(renderState);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -131,16 +223,10 @@ var PanelBar = /** @class */ (function (_super) {
         var ariaProps = {
             'aria-activedescendant': this.activeDescendant
         };
-        var state = __assign({}, this.state, { selected: this.selected });
-        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));
+        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), this.children));
     };
     PanelBar.prototype.nextTick = function (f) {
-        // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
-        // XXX: https://github.com/facebook/react/issues/3751
-        // Handles multiple focus events happening at the same time.
-        clearTimeout(this.nextTickId);
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     /**

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

@@ -1,94 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-/**
- * Represents the props of the PanelBarItem component.
- */
-export interface PanelBarItemProps {
-    /**
-     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
-     */
-    animation?: boolean;
-    /**
-     * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The class name that is set to the PanelBarItem component.
-     */
-    className?: string;
-    /**
-     * The class name that is set to the PanelBarItem header.
-     */
-    headerClassName?: string;
-    /**
-     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
-     */
-    expanded?: boolean;
-    /**
-     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
-     */
-    disabled?: boolean;
-    /**
-     * @hidden
-     */
-    onSelect?: Function;
-    /**
-     * @hidden
-     */
-    level?: number;
-    /**
-     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
-     */
-    icon?: string;
-    /**
-     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
-     */
-    iconClass?: string;
-    /**
-     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
-     */
-    imageUrl?: string;
-    /**
-     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
-     */
-    selected?: boolean;
-    /**
-     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
-     */
-    title?: React.ReactNode;
-    /**
-     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
-     */
-    id?: string;
-    /**
-     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
-     */
-    focused?: boolean;
-    /**
-     * @hidden
-     */
-    parentExpanded?: boolean;
-    /**
-     * @hidden
-     */
-    content?: any;
-    /**
-     * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
-     */
-    uniquePrivateKey?: string;
-    /**
-     * @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;
-}
+import { PanelBarItemProps } from '../main';
 /** @hidden */
 interface PanelBarItemState {
     show: boolean;

package/dist/es/panelbar/PanelBarItem.js

@@ -103,7 +103,9 @@ var PanelBarItem = /** @class */ (function (_super) {
         var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
         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))
+            ? (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, childFactory: keepItemsMounted && this.childFactory, unmountOnExit: !keepItemsMounted, onBeforeEnter: function () { return keepItemsMounted && _this.setState({ show: true }); }, onAfterExited: function () { return keepItemsMounted && _this.setState({ show: false }); } }))

package/dist/es/panelbar/interfaces/NavigationAction.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @hidden
+ */
+export declare enum NavigationAction {
+    Toggle = 0,
+    Next = 1,
+    Previous = 2
+}

package/dist/es/panelbar/interfaces/NavigationAction.js

@@ -0,0 +1,9 @@
+/**
+ * @hidden
+ */
+export var NavigationAction;
+(function (NavigationAction) {
+    NavigationAction[NavigationAction["Toggle"] = 0] = "Toggle";
+    NavigationAction[NavigationAction["Next"] = 1] = "Next";
+    NavigationAction[NavigationAction["Previous"] = 2] = "Previous";
+})(NavigationAction || (NavigationAction = {}));

package/dist/es/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts

@@ -0,0 +1,8 @@
+import { PanelBarItem } from '../PanelBarItem';
+/**
+ * @hidden
+ */
+export interface PanelBarItemClickEventArguments {
+    uniquePrivateKey: number;
+    target: PanelBarItem;
+}

package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -0,0 +1,90 @@
+/// <reference types="react" />
+/**
+ * Represents the props of the PanelBarItem component.
+ */
+export interface PanelBarItemProps {
+    /**
+     * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
+     */
+    animation?: boolean;
+    /**
+     * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name that is set to the PanelBarItem component.
+     */
+    className?: string;
+    /**
+     * The class name that is set to the PanelBarItem header.
+     */
+    headerClassName?: string;
+    /**
+     * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
+     */
+    disabled?: boolean;
+    /**
+     * @hidden
+     */
+    onSelect?: Function;
+    /**
+     * @hidden
+     */
+    level?: number;
+    /**
+     * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    icon?: string;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
+     */
+    imageUrl?: string;
+    /**
+     * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
+     */
+    selected?: boolean;
+    /**
+     * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
+     */
+    title?: React.ReactNode;
+    /**
+     * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
+     */
+    id?: string;
+    /**
+     * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    parentExpanded?: boolean;
+    /**
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
+     */
+    uniquePrivateKey?: string;
+    /**
+     * @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;
+}

package/dist/es/panelbar/{PanelBarInterface.d.ts → interfaces/PanelBarProps.d.ts}

@@ -1,33 +1,21 @@
 /// <reference types="react" />
-import { PanelBarItem, PanelBarItemProps } from './PanelBarItem';
-/**
- * The arguments that are passed to the `onSelect` callback function.
- */
-export interface PanelBarSelectEventArguments {
-    /**
-     * The selected PanelBar item.
-     */
-    target: React.ReactElement<PanelBarItemProps>;
-    /**
-     * @hidden
-     */
-    action: string;
-}
-/**
- * @hidden
- */
-export interface PanelBarItemClickEventArguments {
-    uniquePrivateKey: number;
-    target: PanelBarItem;
-}
+import { PanelBarSelectEventArguments } from '../../main';
 /**
  * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
  */
 export declare type PanelBarExpandMode = 'single' | 'multiple';
 /**
- * @hidden
+ * Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
  */
-export interface PanelBarInterface {
+export interface PanelBarProps {
+    /**
+     * The child can be either a single PanelBarItem or a PanelBarItem array.
+     */
+    children?: React.ReactNode;
+    /**
+     * The class name that is set to the PanelBar.
+     */
+    className?: string;
     /**
      * Sets the animation state of the PanelBar.
      */
@@ -56,6 +44,14 @@ export interface PanelBarInterface {
      * Sets the initial focused state of the PanelBar.
      */
     focused?: string;
+    /**
+     * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
+     */
+    keepItemsMounted?: boolean;
+    /**
+     * Determines if the PanelBar is going to be used in controlled state.
+     */
+    isControlled?: boolean;
     /**
      * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
      */

package/dist/es/panelbar/interfaces/PanelBarSelectEventArguments.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PanelBarItemProps } from '../interfaces/PanelBarItemProps';
+/**
+ * The arguments that are passed to the `onSelect` callback function.
+ */
+export interface PanelBarSelectEventArguments {
+    /**
+     * The selected PanelBar item.
+     */
+    target: React.ReactElement<PanelBarItemProps>;
+    /**
+     * The new expanded PanelBar items state.
+     */
+    expandedItems: string[];
+}

package/dist/es/panelbar/interfaces/RenderPanelBarItem.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PanelBarState } from '../PanelBar';
+/**
+ * @hidden
+ */
+export interface RenderPanelBarItem {
+    animation?: boolean;
+    keepItemsMounted?: boolean;
+    state: PanelBarState;
+    expanded: string[];
+    handleSelect: any;
+    children: React.ReactNode;
+    parentExpanded?: boolean;
+    level?: number;
+    parentPrivateKey?: string[];
+}