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

package/dist/npm/panelbar/{PanelBarInterface.js → interfaces/PanelBarItemClickEventArguments.js}

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length

package/dist/npm/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/npm/panelbar/interfaces/PanelBarItemProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/panelbar/interfaces/PanelBarProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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/npm/panelbar/interfaces/PanelBarSelectEventArguments.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/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[];
+}

package/dist/npm/panelbar/interfaces/RenderPanelBarItem.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,19 +1,33 @@
 import * as React from 'react';
 import { PanelBarState } from './PanelBar';
-import { PanelBarItem, PanelBarItemProps } from './PanelBarItem';
-import { PanelBarExpandMode } from './PanelBarInterface';
+import { PanelBarItem } from './PanelBarItem';
+import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem';
+import { PanelBarItemProps } from '../main';
+import { PanelBarExpandMode } from './interfaces/PanelBarProps';
 /**
  * @hidden
  */
-export declare const renderChildren: (animation: boolean, keepItemsMounted: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
+export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React.ReactNode;
 /**
  * @hidden
  */
-export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, _?: boolean, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
+export declare const getFirstId: (props: any) => any;
 /**
  * @hidden
  */
-export declare function flatVisibleItems(data: any, flattedItems?: any[], _?: any): any[];
+export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
+/**
+ * @hidden
+ */
+export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
+/**
+ * @hidden
+ */
+export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
 /**
  * @hidden
  */

package/dist/npm/panelbar/util.js

@@ -16,23 +16,27 @@ var PanelBarItem_1 = require("./PanelBarItem");
 /**
  * @hidden
  */
-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 = []; }
+exports.renderChildren = function (_a) {
+    var _b = _a.animation, animation = _b === void 0 ? true : _b, _c = _a.keepItemsMounted, keepItemsMounted = _c === void 0 ? false : _c, state = _a.state, expanded = _a.expanded, handleSelect = _a.handleSelect, children = _a.children, _d = _a.parentExpanded, parentExpanded = _d === void 0 ? true : _d, _e = _a.level, level = _e === void 0 ? 0 : _e, _f = _a.parentPrivateKey, parentPrivateKey = _f === void 0 ? [] : _f;
     return React.Children.map(children, function (child, idx) {
         if (child && child.type === PanelBarItem_1.PanelBarItem) {
             var nestedChildren = void 0;
-            var privateKey = parentPrivateKey.length ?
-                parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
-                : "." + idx;
+            var privateKey = getId(child, parentPrivateKey, idx);
             if (child.props.children) {
-                nestedChildren =
-                    exports.renderChildren(animation, keepItemsMounted, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1, level + 1, parentPrivateKey.concat([privateKey]));
+                var renderState = {
+                    animation: animation,
+                    keepItemsMounted: keepItemsMounted,
+                    state: state,
+                    expanded: expanded,
+                    handleSelect: handleSelect,
+                    children: child.props.children,
+                    parentExpanded: (expanded || []).indexOf(privateKey) > -1,
+                    level: level + 1,
+                    parentPrivateKey: parentPrivateKey.concat([privateKey])
+                };
+                nestedChildren = exports.renderChildren(renderState);
             }
-            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 }));
+            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: (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);
@@ -42,21 +46,28 @@ exports.renderChildren = function (animation, keepItemsMounted, state, handleSel
 /**
  * @hidden
  */
-exports.getInitialState = function (props, expandMode, result, _, parentExpanded, parentPrivateKey) {
+exports.getFirstId = function (props) {
+    var firstItem = React.Children.toArray(props.children)[0];
+    if (firstItem) {
+        return getId(firstItem, [], 0);
+    }
+    return '';
+};
+/**
+ * @hidden
+ */
+exports.getInitialState = function (props, expandMode, result, parentExpanded, parentPrivateKey) {
     if (result === void 0) { result = {
         expanded: props.expanded || [],
         selected: props.selected || '',
-        focused: props.focused || '.0',
+        focused: props.focused || '',
         wrapperFocused: false
     }; }
-    if (_ === void 0) { _ = true; }
     if (parentExpanded === void 0) { parentExpanded = true; }
     if (parentPrivateKey === void 0) { parentPrivateKey = []; }
     React.Children.map(props.children, function (child, idx) {
         if (child && child.type === PanelBarItem_1.PanelBarItem) {
-            var privateKey = parentPrivateKey.length ?
-                parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
-                : "." + idx;
+            var privateKey = getId(child, parentPrivateKey, idx);
             if (!child.props.disabled && parentExpanded) {
                 if (child.props.selected) {
                     result.selected = privateKey;
@@ -73,7 +84,7 @@ exports.getInitialState = function (props, expandMode, result, _, parentExpanded
                     }
                 }
                 if (child.props.children) {
-                    result = exports.getInitialState(child.props, expandMode, result, false, !!child.props.expanded, parentPrivateKey.concat([privateKey]));
+                    result = exports.getInitialState(child.props, expandMode, result, !!child.props.expanded, parentPrivateKey.concat([privateKey]));
                 }
             }
         }
@@ -83,9 +94,18 @@ exports.getInitialState = function (props, expandMode, result, _, parentExpanded
 /**
  * @hidden
  */
-function flatVisibleItems(data, flattedItems, _) {
+var getId = function (child, parentPrivateKey, idx) {
+    return child && child.props && child.props.id
+        ? child.props.id
+        : parentPrivateKey.length
+            ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
+            : "." + idx;
+};
+/**
+ * @hidden
+ */
+function flatVisibleItems(data, flattedItems) {
     if (flattedItems === void 0) { flattedItems = []; }
-    if (_ === void 0) { _ = null; }
     (data || []).forEach(function (item) {
         if (!item.disabled) {
             flattedItems.push(item);
@@ -97,6 +117,42 @@ function flatVisibleItems(data, flattedItems, _) {
     return flattedItems;
 }
 exports.flatVisibleItems = flatVisibleItems;
+/**
+ * @hidden
+ */
+function flatChildren(children, flattenChildren) {
+    var _this = this;
+    if (flattenChildren === void 0) { flattenChildren = []; }
+    React.Children.forEach(children, function (child) {
+        if (child && child.props && !child.props.disabled) {
+            flattenChildren.push(child);
+            if (child.props.children) {
+                _this.flatChildren(child.props.children, flattenChildren);
+            }
+        }
+    });
+    return flattenChildren;
+}
+exports.flatChildren = flatChildren;
+;
+/**
+ * @hidden
+ */
+function flatVisibleChildren(children, flattenVisibleChildren) {
+    var _this = this;
+    if (flattenVisibleChildren === void 0) { flattenVisibleChildren = []; }
+    React.Children.forEach(children, function (child) {
+        if (child && child.props && !child.props.disabled && (child.props.expanded || child.props.parentExpanded)) {
+            flattenVisibleChildren.push(child);
+            if (child.props.children) {
+                _this.flatVisibleChildren(child.props.children, flattenVisibleChildren);
+            }
+        }
+    });
+    return flattenVisibleChildren;
+}
+exports.flatVisibleChildren = flatVisibleChildren;
+;
 /**
  * @hidden
  */