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

package/dist/es/expansionpanel/ExpansionPanel.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces';
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle>>;

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+/**
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
+ */
+export var ExpansionPanel = React.forwardRef(function (props, target) {
+    var _a;
+    validatePackage(packageMetadata);
+    var elementRef = React.useRef(null);
+    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
+    React.useImperativeHandle(target, getImperativeHandle);
+    var _c = props.expanded, expanded = _c === void 0 ? false : _c, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var onClick = React.useCallback(function (event) {
+        dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+    }, [onAction, expanded]);
+    var onKeyDown = React.useCallback(function (event) {
+        if (event.keyCode === Keys.enter || event.keyCode === Keys.space) {
+            dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
+        }
+    }, [onAction, expanded]);
+    var handleFocus = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(true);
+    }, [props.disabled]);
+    var handleBlur = React.useCallback(function () {
+        if (props.disabled) {
+            return;
+        }
+        setFocused(false);
+    }, [props.disabled]);
+    var _d = useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
+    return (React.createElement("div", { ref: elementRef, className: classNames('k-expander', props.className, {
+            'k-expanded': expanded,
+            'k-state-focus': focused && !disabled,
+            'k-state-disabled': disabled
+        }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: useRtl(elementRef, props.dir), tabIndex: getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
+        React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
+            title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,
+            React.createElement("span", { className: "k-spacer" }),
+            subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
+            React.createElement("span", { className: "k-expander-indicator" },
+                React.createElement("span", { className: classNames((_a = {},
+                        // expand icon
+                        _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
+                        _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
+                        // collapse icon
+                        _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
+                        _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
+                        _a)) }))),
+        props.children));
+});
+ExpansionPanel.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    dir: PropTypes.string,
+    id: PropTypes.string,
+    tabIndex: PropTypes.number,
+    title: PropTypes.node,
+    subtitle: PropTypes.node,
+    expandIcon: PropTypes.string,
+    collapseIcon: PropTypes.string,
+    expanded: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onAction: PropTypes.func
+};
+ExpansionPanel.displayName = 'KendoReactExpansionPanel';

package/dist/es/expansionpanel/ExpansionPanelContent.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export declare const ExpansionPanelContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/es/expansionpanel/ExpansionPanelContent.js

@@ -0,0 +1,21 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { classNames } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the KendoReact ExpansionPanelContent component.
+ */
+export var ExpansionPanelContent = React.forwardRef(function (props, ref) {
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: classNames('k-expander-content-wrapper', props.className) }),
+        React.createElement("div", { className: 'k-expander-content' }, props.children)));
+});
+ExpansionPanelContent.displayName = 'KendoReactExpansionPanelContent';

package/dist/es/expansionpanel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';
+export * from './interfaces';

package/dist/es/expansionpanel/index.js

@@ -0,0 +1,2 @@
+export * from './ExpansionPanel';
+export * from './ExpansionPanelContent';

package/dist/es/expansionpanel/interfaces.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { BaseEvent } from '@progress/kendo-react-common';
+/**
+ * The ExpansionPanel ref.
+ */
+export interface ExpansionPanelHandle {
+    /**
+     * The ExpansionPanel element.
+     */
+    element: HTMLDivElement | null;
+}
+/**
+ * The arguments for the `onAction` ExpansionPanel event.
+ */
+export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
+    /**
+     * Represents the `expanded` state of the ExpansionPanel.
+     */
+    expanded: boolean;
+}
+/**
+ * The props of the ExpansionPanel component.
+ */
+export interface ExpansionPanelProps {
+    /**
+     * The React elements that will be rendered inside the ExpansionPanel.
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets additional CSS classes to the ExpansionPanel.
+     */
+    className?: string;
+    /**
+     * Sets additional CSS styles to the ExpansionPanel.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets the `id` property of the root ExpansionPanel element.
+     */
+    id?: string;
+    /**
+     * Specifies the primary text in the header of the ExpansionPanel.
+     */
+    title?: React.ReactNode;
+    /**
+     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
+     */
+    expandIcon?: string;
+    /**
+     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
+     */
+    collapseIcon?: string;
+    /**
+     * Sets the `dir` property of the ExpansionPanel.
+     */
+    dir?: string;
+    /**
+     * Sets the `tabIndex` property of the ExpansionPanel.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the `expanded` state of the ExpansionPanel.
+     */
+    expanded?: boolean;
+    /**
+     * Sets the `disabled` state of the ExpansionPanel.
+     */
+    disabled?: boolean;
+    /**
+     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
+     */
+    onAction?: (event: ExpansionPanelActionEvent) => void;
+}

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';
@@ -71,3 +74,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
 export * from './breadcrumb/BreadcrumbListItem';
 export * from './breadcrumb/BreadcrumbDelimiter';
 export * from './breadcrumb/BreadcrumbLink';
+export * from './expansionpanel';

package/dist/es/main.js

@@ -41,3 +41,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
 export * from './breadcrumb/BreadcrumbListItem';
 export * from './breadcrumb/BreadcrumbDelimiter';
 export * from './breadcrumb/BreadcrumbLink';
+export * from './expansionpanel';

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: 1642071855,
     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
+}