@progress/kendo-react-layout 4.14.0-dev.202112151745 → 4.14.0-dev.202201111645

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cdn/js/kendo-react-layout.js +1 -1
  2. package/dist/es/expansionpanel/ExpansionPanel.d.ts +6 -0
  3. package/dist/es/expansionpanel/ExpansionPanel.js +72 -0
  4. package/dist/es/expansionpanel/ExpansionPanelContent.d.ts +5 -0
  5. package/dist/es/expansionpanel/ExpansionPanelContent.js +21 -0
  6. package/dist/es/expansionpanel/index.d.ts +3 -0
  7. package/dist/es/expansionpanel/index.js +2 -0
  8. package/dist/es/expansionpanel/interfaces.d.ts +77 -0
  9. package/dist/es/expansionpanel/interfaces.js +0 -0
  10. package/dist/es/main.d.ts +5 -1
  11. package/dist/es/main.js +1 -0
  12. package/dist/es/package-metadata.js +1 -1
  13. package/dist/es/panelbar/PanelBar.d.ts +10 -30
  14. package/dist/es/panelbar/PanelBar.js +131 -45
  15. package/dist/es/panelbar/PanelBarItem.d.ts +1 -89
  16. package/dist/es/panelbar/PanelBarItem.js +3 -1
  17. package/dist/es/panelbar/interfaces/NavigationAction.d.ts +8 -0
  18. package/dist/es/panelbar/interfaces/NavigationAction.js +9 -0
  19. package/dist/es/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts +8 -0
  20. package/dist/es/panelbar/interfaces/PanelBarItemClickEventArguments.js +0 -0
  21. package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts +90 -0
  22. package/dist/es/panelbar/interfaces/PanelBarItemProps.js +0 -0
  23. package/dist/es/panelbar/{PanelBarInterface.d.ts → interfaces/PanelBarProps.d.ts} +19 -23
  24. package/dist/es/panelbar/interfaces/PanelBarProps.js +0 -0
  25. package/dist/es/panelbar/interfaces/PanelBarSelectEventArguments.d.ts +15 -0
  26. package/dist/es/panelbar/interfaces/PanelBarSelectEventArguments.js +0 -0
  27. package/dist/es/panelbar/interfaces/RenderPanelBarItem.d.ts +16 -0
  28. package/dist/es/panelbar/interfaces/RenderPanelBarItem.js +0 -0
  29. package/dist/es/panelbar/util.d.ts +19 -5
  30. package/dist/es/panelbar/util.js +75 -21
  31. package/dist/npm/expansionpanel/ExpansionPanel.d.ts +6 -0
  32. package/dist/npm/expansionpanel/ExpansionPanel.js +74 -0
  33. package/dist/npm/expansionpanel/ExpansionPanelContent.d.ts +5 -0
  34. package/dist/npm/expansionpanel/ExpansionPanelContent.js +23 -0
  35. package/dist/npm/expansionpanel/index.d.ts +3 -0
  36. package/dist/npm/expansionpanel/index.js +7 -0
  37. package/dist/npm/expansionpanel/interfaces.d.ts +77 -0
  38. package/dist/npm/{panelbar/PanelBarInterface.js → expansionpanel/interfaces.js} +0 -1
  39. package/dist/npm/main.d.ts +5 -1
  40. package/dist/npm/main.js +1 -0
  41. package/dist/npm/package-metadata.js +1 -1
  42. package/dist/npm/panelbar/PanelBar.d.ts +10 -30
  43. package/dist/npm/panelbar/PanelBar.js +132 -46
  44. package/dist/npm/panelbar/PanelBarItem.d.ts +1 -89
  45. package/dist/npm/panelbar/PanelBarItem.js +3 -1
  46. package/dist/npm/panelbar/interfaces/NavigationAction.d.ts +8 -0
  47. package/dist/npm/panelbar/interfaces/NavigationAction.js +11 -0
  48. package/dist/npm/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts +8 -0
  49. package/dist/npm/panelbar/interfaces/PanelBarItemClickEventArguments.js +2 -0
  50. package/dist/npm/panelbar/interfaces/PanelBarItemProps.d.ts +90 -0
  51. package/dist/npm/panelbar/interfaces/PanelBarItemProps.js +2 -0
  52. package/dist/npm/panelbar/{PanelBarInterface.d.ts → interfaces/PanelBarProps.d.ts} +19 -23
  53. package/dist/npm/panelbar/interfaces/PanelBarProps.js +2 -0
  54. package/dist/npm/panelbar/interfaces/PanelBarSelectEventArguments.d.ts +15 -0
  55. package/dist/npm/panelbar/interfaces/PanelBarSelectEventArguments.js +2 -0
  56. package/dist/npm/panelbar/interfaces/RenderPanelBarItem.d.ts +16 -0
  57. package/dist/npm/panelbar/interfaces/RenderPanelBarItem.js +2 -0
  58. package/dist/npm/panelbar/util.d.ts +19 -5
  59. package/dist/npm/panelbar/util.js +77 -21
  60. package/dist/systemjs/kendo-react-layout.js +1 -1
  61. package/package.json +15 -14
  62. package/dist/es/panelbar/PanelBarInterface.js +0 -1
  63. package/dist/es/panelbar/services/navigationService.d.ts +0 -23
  64. package/dist/es/panelbar/services/navigationService.js +0 -51
  65. package/dist/es/panelbar/services/selectionService.d.ts +0 -23
  66. package/dist/es/panelbar/services/selectionService.js +0 -88
  67. package/dist/npm/panelbar/services/navigationService.d.ts +0 -23
  68. package/dist/npm/panelbar/services/navigationService.js +0 -53
  69. package/dist/npm/panelbar/services/selectionService.d.ts +0 -23
  70. package/dist/npm/panelbar/services/selectionService.js +0 -90
@@ -1,25 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import * as PropTypes from 'prop-types';
3
- import { PanelBarItemProps } from './PanelBarItem';
4
- import { PanelBarInterface, PanelBarItemClickEventArguments } from './PanelBarInterface';
5
- import { NavigationAction } from './services/navigationService';
6
- /**
7
- * Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
8
- */
9
- export interface PanelBarProps extends PanelBarInterface {
10
- /**
11
- * The child can be either a single PanelBarItem or a PanelBarItem array.
12
- */
13
- children?: React.ReactNode;
14
- /**
15
- * The class name that is set to the PanelBar.
16
- */
17
- className?: string;
18
- /**
19
- * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
20
- */
21
- keepItemsMounted?: boolean;
22
- }
3
+ import { PanelBarProps } from '../main';
4
+ import { PanelBarItemClickEventArguments } from './interfaces/PanelBarItemClickEventArguments';
5
+ import { NavigationAction } from './interfaces/NavigationAction';
23
6
  /**
24
7
  * @hidden
25
8
  */
@@ -60,15 +43,12 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
60
43
  readonly state: PanelBarState;
61
44
  private activeDescendant?;
62
45
  private _element;
63
- private _selectionService;
64
- private _navigationService;
65
46
  private nextTickId;
66
- private readonly selected;
47
+ private readonly expandMode;
48
+ private readonly selectedItem;
49
+ private readonly expandedItems;
50
+ private readonly children;
67
51
  constructor(props: PanelBarProps);
68
- /**
69
- * @hidden
70
- */
71
- componentDidUpdate(prevProps: PanelBarProps): void;
72
52
  /**
73
53
  * @hidden
74
54
  */
@@ -76,15 +56,15 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
76
56
  /**
77
57
  * @hidden
78
58
  */
79
- 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;
59
+ onSelect: (event: any) => void;
80
60
  /**
81
61
  * @hidden
82
62
  */
83
- 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;
63
+ onFocus: (event: any, step?: number) => void;
84
64
  /**
85
65
  * @hidden
86
66
  */
87
- onNavigate: (action: NavigationAction) => void;
67
+ onNavigate: (event: any, action: NavigationAction) => void;
88
68
  /**
89
69
  * @hidden
90
70
  */
@@ -28,11 +28,10 @@ var React = require("react");
28
28
  var PropTypes = require("prop-types");
29
29
  var PanelBarItem_1 = require("./PanelBarItem");
30
30
  var util_1 = require("./util");
31
- var selectionService_1 = require("./services/selectionService");
32
- var navigationService_1 = require("./services/navigationService");
33
31
  var kendo_react_common_1 = require("@progress/kendo-react-common");
34
32
  var kendo_react_common_2 = require("@progress/kendo-react-common");
35
33
  var package_metadata_1 = require("../package-metadata");
34
+ var NavigationAction_1 = require("./interfaces/NavigationAction");
36
35
  var PanelBar = /** @class */ (function (_super) {
37
36
  __extends(PanelBar, _super);
38
37
  function PanelBar(props) {
@@ -42,44 +41,88 @@ var PanelBar = /** @class */ (function (_super) {
42
41
  * @hidden
43
42
  */
44
43
  _this.handleSelect = function (event) {
45
- var state = __assign({}, _this.state, { selected: _this.selected });
46
- _this._selectionService.select(event.uniquePrivateKey, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
47
- _this._selectionService.focus(event.uniquePrivateKey, 0, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
44
+ _this.onSelect(event);
45
+ _this.onFocus(event);
48
46
  };
49
47
  /**
50
48
  * @hidden
51
49
  */
52
- _this.onSelect = function (child, expanded) {
53
- _this.setState({ selected: child.props.uniquePrivateKey, expanded: expanded }, function () {
54
- if (_this.props.onSelect) {
55
- _this.props.onSelect.call(undefined, {
56
- target: child,
57
- action: 'select'
58
- });
50
+ _this.onSelect = function (event) {
51
+ var flattenChildren = util_1.flatChildren(React.Children.toArray(_this.children));
52
+ var selectedChild;
53
+ var newExpanded;
54
+ flattenChildren.forEach(function (child) {
55
+ if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
56
+ selectedChild = child;
59
57
  }
60
58
  });
59
+ switch (_this.expandMode) {
60
+ case 'single':
61
+ newExpanded = selectedChild.props.parentUniquePrivateKey.concat([selectedChild.props.uniquePrivateKey]);
62
+ if (util_1.isArrayEqual(_this.expandedItems, newExpanded)) {
63
+ if (selectedChild.props.parentUniquePrivateKey) {
64
+ newExpanded = selectedChild.props.parentUniquePrivateKey.slice();
65
+ }
66
+ else {
67
+ newExpanded = [];
68
+ }
69
+ }
70
+ break;
71
+ case 'multiple':
72
+ newExpanded = _this.expandedItems.slice();
73
+ var index = newExpanded.indexOf(selectedChild.props.uniquePrivateKey);
74
+ index === -1 ? newExpanded.push(selectedChild.props.uniquePrivateKey) : newExpanded.splice(index, 1);
75
+ break;
76
+ default:
77
+ newExpanded = _this.expandedItems.slice();
78
+ break;
79
+ }
80
+ _this.setState({ selected: selectedChild.props.uniquePrivateKey, expanded: newExpanded });
81
+ if (_this.props.onSelect) {
82
+ _this.props.onSelect.call(undefined, {
83
+ target: selectedChild,
84
+ expandedItems: newExpanded
85
+ });
86
+ }
61
87
  };
62
88
  /**
63
89
  * @hidden
64
90
  */
65
- _this.onFocus = function (child) {
66
- _this.activeDescendant = child.props.id;
67
- _this.setState({ focused: child.props.uniquePrivateKey });
91
+ _this.onFocus = function (event, step) {
92
+ if (step === void 0) { step = 0; }
93
+ var flattenChildren = util_1.flatVisibleChildren(React.Children.toArray(_this.children));
94
+ var focusedChild;
95
+ flattenChildren.forEach(function (child, ixd) {
96
+ if (child.props.uniquePrivateKey === (event.uniquePrivateKey || _this.state.focused)) {
97
+ var index = ixd + step < 0
98
+ ? 0
99
+ : ixd + step > flattenChildren.length
100
+ ? flattenChildren.length - 1
101
+ : ixd + step;
102
+ focusedChild = flattenChildren[index];
103
+ }
104
+ });
105
+ if (focusedChild) {
106
+ _this.activeDescendant = focusedChild.props.id;
107
+ _this.setState({ focused: focusedChild.props.uniquePrivateKey });
108
+ }
68
109
  };
69
110
  /**
70
111
  * @hidden
71
112
  */
72
- _this.onNavigate = function (action) {
73
- var state = __assign({}, _this.state, { selected: _this.selected });
113
+ _this.onNavigate = function (event, action) {
114
+ var step;
74
115
  switch (action) {
75
- case navigationService_1.NavigationAction.Previous:
76
- _this._selectionService.focus(state.focused, -1, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
116
+ case NavigationAction_1.NavigationAction.Previous:
117
+ step = -1;
118
+ _this.onFocus(event, step);
77
119
  break;
78
- case navigationService_1.NavigationAction.Next:
79
- _this._selectionService.focus(state.focused, 1, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children));
120
+ case NavigationAction_1.NavigationAction.Next:
121
+ step = 1;
122
+ _this.onFocus(event, step);
80
123
  break;
81
- case navigationService_1.NavigationAction.Toggle:
82
- _this._selectionService.select(state.focused, util_1.renderChildren(_this.props.animation, _this.props.keepItemsMounted, state, _this.handleSelect, _this.props.children), state.expanded);
124
+ case NavigationAction_1.NavigationAction.Toggle:
125
+ _this.onSelect(event);
83
126
  break;
84
127
  default:
85
128
  }
@@ -97,18 +140,52 @@ var PanelBar = /** @class */ (function (_super) {
97
140
  };
98
141
  _this.handleKeyDown = function (event) {
99
142
  var rtl = _this._element && (getComputedStyle(_this._element).direction === 'rtl') || false;
100
- var target = event.target, currentTarget = event.currentTarget;
101
- if (target === currentTarget) {
102
- _this._navigationService.navigate(event, rtl);
143
+ if (event.target === event.currentTarget) {
144
+ var keyCode = event.keyCode;
145
+ var action = void 0;
146
+ switch (keyCode) {
147
+ case kendo_react_common_1.Keys.left:
148
+ action = !rtl ? NavigationAction_1.NavigationAction.Previous : NavigationAction_1.NavigationAction.Next;
149
+ break;
150
+ case kendo_react_common_1.Keys.up:
151
+ action = NavigationAction_1.NavigationAction.Previous;
152
+ break;
153
+ case kendo_react_common_1.Keys.right:
154
+ action = !rtl ? NavigationAction_1.NavigationAction.Next : NavigationAction_1.NavigationAction.Previous;
155
+ break;
156
+ case kendo_react_common_1.Keys.down:
157
+ action = NavigationAction_1.NavigationAction.Next;
158
+ break;
159
+ case kendo_react_common_1.Keys.space:
160
+ case kendo_react_common_1.Keys.enter:
161
+ action = NavigationAction_1.NavigationAction.Toggle;
162
+ break;
163
+ default:
164
+ action = null;
165
+ break;
166
+ }
167
+ if (action !== null) {
168
+ event.preventDefault();
169
+ _this.onNavigate(event, action);
170
+ }
103
171
  }
104
172
  };
105
173
  kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
106
- _this.state = util_1.getInitialState(props, props.expandMode || 'multiple');
107
- _this._selectionService = new selectionService_1.SelectionService(_this.onSelect, _this.onFocus, _this.props.expandMode || 'multiple');
108
- _this._navigationService = new navigationService_1.NavigationService(_this.onNavigate);
174
+ var initialState = util_1.getInitialState(props, _this.expandMode);
175
+ if (!initialState.focused) {
176
+ initialState.focused = util_1.getFirstId(props);
177
+ }
178
+ _this.state = initialState;
109
179
  return _this;
110
180
  }
111
- Object.defineProperty(PanelBar.prototype, "selected", {
181
+ Object.defineProperty(PanelBar.prototype, "expandMode", {
182
+ get: function () {
183
+ return this.props.expandMode || 'multiple';
184
+ },
185
+ enumerable: true,
186
+ configurable: true
187
+ });
188
+ Object.defineProperty(PanelBar.prototype, "selectedItem", {
112
189
  get: function () {
113
190
  var _a = this.props.selected, selected = _a === void 0 ? this.state.selected : _a;
114
191
  return selected;
@@ -116,15 +193,30 @@ var PanelBar = /** @class */ (function (_super) {
116
193
  enumerable: true,
117
194
  configurable: true
118
195
  });
119
- /**
120
- * @hidden
121
- */
122
- PanelBar.prototype.componentDidUpdate = function (prevProps) {
123
- var newProps = this.props;
124
- if (newProps.expandMode !== prevProps.expandMode) {
125
- this._selectionService.setExpandMode(newProps.expandMode);
126
- }
127
- };
196
+ Object.defineProperty(PanelBar.prototype, "expandedItems", {
197
+ get: function () {
198
+ var expanded = this.props.isControlled ? this.props.expanded || [] : this.state.expanded;
199
+ return expanded;
200
+ },
201
+ enumerable: true,
202
+ configurable: true
203
+ });
204
+ Object.defineProperty(PanelBar.prototype, "children", {
205
+ get: function () {
206
+ var state = __assign({}, this.state, { selected: this.selectedItem });
207
+ var renderState = {
208
+ animation: this.props.animation,
209
+ keepItemsMounted: this.props.keepItemsMounted,
210
+ state: state,
211
+ expanded: this.expandedItems,
212
+ handleSelect: this.handleSelect,
213
+ children: this.props.children
214
+ };
215
+ return util_1.renderChildren(renderState);
216
+ },
217
+ enumerable: true,
218
+ configurable: true
219
+ });
128
220
  /**
129
221
  * @hidden
130
222
  */
@@ -133,16 +225,10 @@ var PanelBar = /** @class */ (function (_super) {
133
225
  var ariaProps = {
134
226
  'aria-activedescendant': this.activeDescendant
135
227
  };
136
- var state = __assign({}, this.state, { selected: this.selected });
137
- var children = util_1.renderChildren(this.props.animation, this.props.keepItemsMounted, state, this.handleSelect, this.props.children);
138
228
  var className = kendo_react_common_1.classNames('k-panelbar', this.props.className);
139
- 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));
229
+ 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));
140
230
  };
141
231
  PanelBar.prototype.nextTick = function (f) {
142
- // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
143
- // XXX: https://github.com/facebook/react/issues/3751
144
- // Handles multiple focus events happening at the same time.
145
- clearTimeout(this.nextTickId);
146
232
  this.nextTickId = window.setTimeout(function () { return f(); });
147
233
  };
148
234
  /**
@@ -1,94 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as PropTypes from 'prop-types';
3
- /**
4
- * Represents the props of the PanelBarItem component.
5
- */
6
- export interface PanelBarItemProps {
7
- /**
8
- * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
9
- */
10
- animation?: boolean;
11
- /**
12
- * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
13
- */
14
- children?: React.ReactNode;
15
- /**
16
- * The class name that is set to the PanelBarItem component.
17
- */
18
- className?: string;
19
- /**
20
- * The class name that is set to the PanelBarItem header.
21
- */
22
- headerClassName?: string;
23
- /**
24
- * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
25
- */
26
- expanded?: boolean;
27
- /**
28
- * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
29
- */
30
- disabled?: boolean;
31
- /**
32
- * @hidden
33
- */
34
- onSelect?: Function;
35
- /**
36
- * @hidden
37
- */
38
- level?: number;
39
- /**
40
- * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
41
- */
42
- icon?: string;
43
- /**
44
- * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
45
- */
46
- iconClass?: string;
47
- /**
48
- * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
49
- */
50
- imageUrl?: string;
51
- /**
52
- * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
53
- */
54
- selected?: boolean;
55
- /**
56
- * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
57
- */
58
- title?: React.ReactNode;
59
- /**
60
- * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
61
- */
62
- id?: string;
63
- /**
64
- * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
65
- */
66
- focused?: boolean;
67
- /**
68
- * @hidden
69
- */
70
- parentExpanded?: boolean;
71
- /**
72
- * @hidden
73
- */
74
- content?: any;
75
- /**
76
- * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
77
- */
78
- uniquePrivateKey?: string;
79
- /**
80
- * @hidden
81
- */
82
- parentUniquePrivateKey?: string[];
83
- /**
84
- * @hidden
85
- */
86
- keepItemsMounted?: boolean;
87
- /**
88
- * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
89
- */
90
- [customProp: string]: any;
91
- }
3
+ import { PanelBarItemProps } from '../main';
92
4
  /** @hidden */
93
5
  interface PanelBarItemState {
94
6
  show: boolean;
@@ -105,7 +105,9 @@ var PanelBarItem = /** @class */ (function (_super) {
105
105
  var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
106
106
  var opened = (!disabled && expanded);
107
107
  var content = opened || keepItemsMounted
108
- ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted ? (this.state.show ? 'block' : 'none') : 'block' } }, children))
108
+ ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted
109
+ ? (this.state.show ? 'block' : 'none')
110
+ : 'block' } }, children))
109
111
  : null;
110
112
  var child = ((animation !== undefined ? animation : true) && !disabled && children)
111
113
  ? (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 }); } }))
@@ -0,0 +1,8 @@
1
+ /**
2
+ * @hidden
3
+ */
4
+ export declare enum NavigationAction {
5
+ Toggle = 0,
6
+ Next = 1,
7
+ Previous = 2
8
+ }
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ /**
4
+ * @hidden
5
+ */
6
+ var NavigationAction;
7
+ (function (NavigationAction) {
8
+ NavigationAction[NavigationAction["Toggle"] = 0] = "Toggle";
9
+ NavigationAction[NavigationAction["Next"] = 1] = "Next";
10
+ NavigationAction[NavigationAction["Previous"] = 2] = "Previous";
11
+ })(NavigationAction = exports.NavigationAction || (exports.NavigationAction = {}));
@@ -0,0 +1,8 @@
1
+ import { PanelBarItem } from '../PanelBarItem';
2
+ /**
3
+ * @hidden
4
+ */
5
+ export interface PanelBarItemClickEventArguments {
6
+ uniquePrivateKey: number;
7
+ target: PanelBarItem;
8
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,90 @@
1
+ /// <reference types="react" />
2
+ /**
3
+ * Represents the props of the PanelBarItem component.
4
+ */
5
+ export interface PanelBarItemProps {
6
+ /**
7
+ * Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
8
+ */
9
+ animation?: boolean;
10
+ /**
11
+ * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
12
+ */
13
+ children?: React.ReactNode;
14
+ /**
15
+ * The class name that is set to the PanelBarItem component.
16
+ */
17
+ className?: string;
18
+ /**
19
+ * The class name that is set to the PanelBarItem header.
20
+ */
21
+ headerClassName?: string;
22
+ /**
23
+ * Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
24
+ */
25
+ expanded?: boolean;
26
+ /**
27
+ * Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
28
+ */
29
+ disabled?: boolean;
30
+ /**
31
+ * @hidden
32
+ */
33
+ onSelect?: Function;
34
+ /**
35
+ * @hidden
36
+ */
37
+ level?: number;
38
+ /**
39
+ * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
40
+ */
41
+ icon?: string;
42
+ /**
43
+ * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
44
+ */
45
+ iconClass?: string;
46
+ /**
47
+ * Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
48
+ */
49
+ imageUrl?: string;
50
+ /**
51
+ * Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
52
+ */
53
+ selected?: boolean;
54
+ /**
55
+ * Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
56
+ */
57
+ title?: React.ReactNode;
58
+ /**
59
+ * Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
60
+ */
61
+ id?: string;
62
+ /**
63
+ * Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
64
+ */
65
+ focused?: boolean;
66
+ /**
67
+ * @hidden
68
+ */
69
+ parentExpanded?: boolean;
70
+ /**
71
+ * @hidden
72
+ */
73
+ content?: any;
74
+ /**
75
+ * Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
76
+ */
77
+ uniquePrivateKey?: string;
78
+ /**
79
+ * @hidden
80
+ */
81
+ parentUniquePrivateKey?: string[];
82
+ /**
83
+ * @hidden
84
+ */
85
+ keepItemsMounted?: boolean;
86
+ /**
87
+ * Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
88
+ */
89
+ [customProp: string]: any;
90
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,33 +1,21 @@
1
1
  /// <reference types="react" />
2
- import { PanelBarItem, PanelBarItemProps } from './PanelBarItem';
3
- /**
4
- * The arguments that are passed to the `onSelect` callback function.
5
- */
6
- export interface PanelBarSelectEventArguments {
7
- /**
8
- * The selected PanelBar item.
9
- */
10
- target: React.ReactElement<PanelBarItemProps>;
11
- /**
12
- * @hidden
13
- */
14
- action: string;
15
- }
16
- /**
17
- * @hidden
18
- */
19
- export interface PanelBarItemClickEventArguments {
20
- uniquePrivateKey: number;
21
- target: PanelBarItem;
22
- }
2
+ import { PanelBarSelectEventArguments } from '../../main';
23
3
  /**
24
4
  * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
25
5
  */
26
6
  export declare type PanelBarExpandMode = 'single' | 'multiple';
27
7
  /**
28
- * @hidden
8
+ * Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
29
9
  */
30
- export interface PanelBarInterface {
10
+ export interface PanelBarProps {
11
+ /**
12
+ * The child can be either a single PanelBarItem or a PanelBarItem array.
13
+ */
14
+ children?: React.ReactNode;
15
+ /**
16
+ * The class name that is set to the PanelBar.
17
+ */
18
+ className?: string;
31
19
  /**
32
20
  * Sets the animation state of the PanelBar.
33
21
  */
@@ -56,6 +44,14 @@ export interface PanelBarInterface {
56
44
  * Sets the initial focused state of the PanelBar.
57
45
  */
58
46
  focused?: string;
47
+ /**
48
+ * Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
49
+ */
50
+ keepItemsMounted?: boolean;
51
+ /**
52
+ * Determines if the PanelBar is going to be used in controlled state.
53
+ */
54
+ isControlled?: boolean;
59
55
  /**
60
56
  * Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
61
57
  */
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import { PanelBarItemProps } from '../interfaces/PanelBarItemProps';
3
+ /**
4
+ * The arguments that are passed to the `onSelect` callback function.
5
+ */
6
+ export interface PanelBarSelectEventArguments {
7
+ /**
8
+ * The selected PanelBar item.
9
+ */
10
+ target: React.ReactElement<PanelBarItemProps>;
11
+ /**
12
+ * The new expanded PanelBar items state.
13
+ */
14
+ expandedItems: string[];
15
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,16 @@
1
+ /// <reference types="react" />
2
+ import { PanelBarState } from '../PanelBar';
3
+ /**
4
+ * @hidden
5
+ */
6
+ export interface RenderPanelBarItem {
7
+ animation?: boolean;
8
+ keepItemsMounted?: boolean;
9
+ state: PanelBarState;
10
+ expanded: string[];
11
+ handleSelect: any;
12
+ children: React.ReactNode;
13
+ parentExpanded?: boolean;
14
+ level?: number;
15
+ parentPrivateKey?: string[];
16
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });