@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
@@ -0,0 +1,9 @@
1
+ /**
2
+ * @hidden
3
+ */
4
+ export var NavigationAction;
5
+ (function (NavigationAction) {
6
+ NavigationAction[NavigationAction["Toggle"] = 0] = "Toggle";
7
+ NavigationAction[NavigationAction["Next"] = 1] = "Next";
8
+ NavigationAction[NavigationAction["Previous"] = 2] = "Previous";
9
+ })(NavigationAction || (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,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
+ }
@@ -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
  */
File without changes
@@ -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,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
+ }
@@ -1,19 +1,33 @@
1
1
  import * as React from 'react';
2
2
  import { PanelBarState } from './PanelBar';
3
- import { PanelBarItem, PanelBarItemProps } from './PanelBarItem';
4
- import { PanelBarExpandMode } from './PanelBarInterface';
3
+ import { PanelBarItem } from './PanelBarItem';
4
+ import { RenderPanelBarItem } from './interfaces/RenderPanelBarItem';
5
+ import { PanelBarItemProps } from '../main';
6
+ import { PanelBarExpandMode } from './interfaces/PanelBarProps';
5
7
  /**
6
8
  * @hidden
7
9
  */
8
- export declare const renderChildren: (animation: boolean, keepItemsMounted: boolean, state: PanelBarState, handleSelect: any, children: React.ReactNode, parentExpanded?: boolean, level?: number, parentPrivateKey?: string[]) => React.ReactNode;
10
+ export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React.ReactNode;
9
11
  /**
10
12
  * @hidden
11
13
  */
12
- export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, _?: boolean, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
14
+ export declare const getFirstId: (props: any) => any;
13
15
  /**
14
16
  * @hidden
15
17
  */
16
- export declare function flatVisibleItems(data: any, flattedItems?: any[], _?: any): any[];
18
+ export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
19
+ /**
20
+ * @hidden
21
+ */
22
+ export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
23
+ /**
24
+ * @hidden
25
+ */
26
+ export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
27
+ /**
28
+ * @hidden
29
+ */
30
+ export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
17
31
  /**
18
32
  * @hidden
19
33
  */
@@ -14,23 +14,27 @@ import { PanelBarItem } from './PanelBarItem';
14
14
  /**
15
15
  * @hidden
16
16
  */
17
- export var renderChildren = function (animation, keepItemsMounted, state, handleSelect, children, parentExpanded, level, parentPrivateKey) {
18
- if (animation === void 0) { animation = true; }
19
- if (keepItemsMounted === void 0) { keepItemsMounted = false; }
20
- if (parentExpanded === void 0) { parentExpanded = true; }
21
- if (level === void 0) { level = 0; }
22
- if (parentPrivateKey === void 0) { parentPrivateKey = []; }
17
+ export var renderChildren = function (_a) {
18
+ 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;
23
19
  return React.Children.map(children, function (child, idx) {
24
20
  if (child && child.type === PanelBarItem) {
25
21
  var nestedChildren = void 0;
26
- var privateKey = parentPrivateKey.length ?
27
- parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
28
- : "." + idx;
22
+ var privateKey = getId(child, parentPrivateKey, idx);
29
23
  if (child.props.children) {
30
- nestedChildren =
31
- renderChildren(animation, keepItemsMounted, state, handleSelect, child.props.children, (state.expanded || []).indexOf(privateKey) > -1, level + 1, parentPrivateKey.concat([privateKey]));
24
+ var renderState = {
25
+ animation: animation,
26
+ keepItemsMounted: keepItemsMounted,
27
+ state: state,
28
+ expanded: expanded,
29
+ handleSelect: handleSelect,
30
+ children: child.props.children,
31
+ parentExpanded: (expanded || []).indexOf(privateKey) > -1,
32
+ level: level + 1,
33
+ parentPrivateKey: parentPrivateKey.concat([privateKey])
34
+ };
35
+ nestedChildren = renderChildren(renderState);
32
36
  }
33
- 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 }));
37
+ 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 }));
34
38
  }
35
39
  else {
36
40
  return React.createElement("div", { className: "k-panelbar-content k-content" }, child);
@@ -40,21 +44,28 @@ export var renderChildren = function (animation, keepItemsMounted, state, handle
40
44
  /**
41
45
  * @hidden
42
46
  */
43
- export var getInitialState = function (props, expandMode, result, _, parentExpanded, parentPrivateKey) {
47
+ export var getFirstId = function (props) {
48
+ var firstItem = React.Children.toArray(props.children)[0];
49
+ if (firstItem) {
50
+ return getId(firstItem, [], 0);
51
+ }
52
+ return '';
53
+ };
54
+ /**
55
+ * @hidden
56
+ */
57
+ export var getInitialState = function (props, expandMode, result, parentExpanded, parentPrivateKey) {
44
58
  if (result === void 0) { result = {
45
59
  expanded: props.expanded || [],
46
60
  selected: props.selected || '',
47
- focused: props.focused || '.0',
61
+ focused: props.focused || '',
48
62
  wrapperFocused: false
49
63
  }; }
50
- if (_ === void 0) { _ = true; }
51
64
  if (parentExpanded === void 0) { parentExpanded = true; }
52
65
  if (parentPrivateKey === void 0) { parentPrivateKey = []; }
53
66
  React.Children.map(props.children, function (child, idx) {
54
67
  if (child && child.type === PanelBarItem) {
55
- var privateKey = parentPrivateKey.length ?
56
- parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
57
- : "." + idx;
68
+ var privateKey = getId(child, parentPrivateKey, idx);
58
69
  if (!child.props.disabled && parentExpanded) {
59
70
  if (child.props.selected) {
60
71
  result.selected = privateKey;
@@ -71,7 +82,7 @@ export var getInitialState = function (props, expandMode, result, _, parentExpan
71
82
  }
72
83
  }
73
84
  if (child.props.children) {
74
- result = getInitialState(child.props, expandMode, result, false, !!child.props.expanded, parentPrivateKey.concat([privateKey]));
85
+ result = getInitialState(child.props, expandMode, result, !!child.props.expanded, parentPrivateKey.concat([privateKey]));
75
86
  }
76
87
  }
77
88
  }
@@ -81,9 +92,18 @@ export var getInitialState = function (props, expandMode, result, _, parentExpan
81
92
  /**
82
93
  * @hidden
83
94
  */
84
- export function flatVisibleItems(data, flattedItems, _) {
95
+ var getId = function (child, parentPrivateKey, idx) {
96
+ return child && child.props && child.props.id
97
+ ? child.props.id
98
+ : parentPrivateKey.length
99
+ ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
100
+ : "." + idx;
101
+ };
102
+ /**
103
+ * @hidden
104
+ */
105
+ export function flatVisibleItems(data, flattedItems) {
85
106
  if (flattedItems === void 0) { flattedItems = []; }
86
- if (_ === void 0) { _ = null; }
87
107
  (data || []).forEach(function (item) {
88
108
  if (!item.disabled) {
89
109
  flattedItems.push(item);
@@ -94,6 +114,40 @@ export function flatVisibleItems(data, flattedItems, _) {
94
114
  });
95
115
  return flattedItems;
96
116
  }
117
+ /**
118
+ * @hidden
119
+ */
120
+ export function flatChildren(children, flattenChildren) {
121
+ var _this = this;
122
+ if (flattenChildren === void 0) { flattenChildren = []; }
123
+ React.Children.forEach(children, function (child) {
124
+ if (child && child.props && !child.props.disabled) {
125
+ flattenChildren.push(child);
126
+ if (child.props.children) {
127
+ _this.flatChildren(child.props.children, flattenChildren);
128
+ }
129
+ }
130
+ });
131
+ return flattenChildren;
132
+ }
133
+ ;
134
+ /**
135
+ * @hidden
136
+ */
137
+ export function flatVisibleChildren(children, flattenVisibleChildren) {
138
+ var _this = this;
139
+ if (flattenVisibleChildren === void 0) { flattenVisibleChildren = []; }
140
+ React.Children.forEach(children, function (child) {
141
+ if (child && child.props && !child.props.disabled && (child.props.expanded || child.props.parentExpanded)) {
142
+ flattenVisibleChildren.push(child);
143
+ if (child.props.children) {
144
+ _this.flatVisibleChildren(child.props.children, flattenVisibleChildren);
145
+ }
146
+ }
147
+ });
148
+ return flattenVisibleChildren;
149
+ }
150
+ ;
97
151
  /**
98
152
  * @hidden
99
153
  */
@@ -0,0 +1,6 @@
1
+ import * as React from 'react';
2
+ import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces';
3
+ /**
4
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
5
+ */
6
+ export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle>>;
@@ -0,0 +1,74 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var React = require("react");
4
+ var PropTypes = require("prop-types");
5
+ var kendo_react_common_1 = require("@progress/kendo-react-common");
6
+ var package_metadata_1 = require("../package-metadata");
7
+ /**
8
+ * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
9
+ */
10
+ exports.ExpansionPanel = React.forwardRef(function (props, target) {
11
+ var _a;
12
+ kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
13
+ var elementRef = React.useRef(null);
14
+ var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
15
+ var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
16
+ React.useImperativeHandle(target, getImperativeHandle);
17
+ 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;
18
+ var onClick = React.useCallback(function (event) {
19
+ kendo_react_common_1.dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
20
+ }, [onAction, expanded]);
21
+ var onKeyDown = React.useCallback(function (event) {
22
+ if (event.keyCode === kendo_react_common_1.Keys.enter || event.keyCode === kendo_react_common_1.Keys.space) {
23
+ kendo_react_common_1.dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
24
+ }
25
+ }, [onAction, expanded]);
26
+ var handleFocus = React.useCallback(function () {
27
+ if (props.disabled) {
28
+ return;
29
+ }
30
+ setFocused(true);
31
+ }, [props.disabled]);
32
+ var handleBlur = React.useCallback(function () {
33
+ if (props.disabled) {
34
+ return;
35
+ }
36
+ setFocused(false);
37
+ }, [props.disabled]);
38
+ var _d = kendo_react_common_1.useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
39
+ return (React.createElement("div", { ref: elementRef, className: kendo_react_common_1.classNames('k-expander', props.className, {
40
+ 'k-expanded': expanded,
41
+ 'k-state-focus': focused && !disabled,
42
+ 'k-state-disabled': disabled
43
+ }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: kendo_react_common_1.useRtl(elementRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
44
+ React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
45
+ title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,
46
+ React.createElement("span", { className: "k-spacer" }),
47
+ subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
48
+ React.createElement("span", { className: "k-expander-indicator" },
49
+ React.createElement("span", { className: kendo_react_common_1.classNames((_a = {},
50
+ // expand icon
51
+ _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
52
+ _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
53
+ // collapse icon
54
+ _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
55
+ _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
56
+ _a)) }))),
57
+ props.children));
58
+ });
59
+ exports.ExpansionPanel.propTypes = {
60
+ children: PropTypes.node,
61
+ className: PropTypes.string,
62
+ style: PropTypes.object,
63
+ dir: PropTypes.string,
64
+ id: PropTypes.string,
65
+ tabIndex: PropTypes.number,
66
+ title: PropTypes.node,
67
+ subtitle: PropTypes.node,
68
+ expandIcon: PropTypes.string,
69
+ collapseIcon: PropTypes.string,
70
+ expanded: PropTypes.bool,
71
+ disabled: PropTypes.bool,
72
+ onAction: PropTypes.func
73
+ };
74
+ exports.ExpansionPanel.displayName = 'KendoReactExpansionPanel';
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Represents the KendoReact ExpansionPanelContent component.
4
+ */
5
+ export declare const ExpansionPanelContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ var kendo_react_common_1 = require("@progress/kendo-react-common");
15
+ var React = require("react");
16
+ /**
17
+ * Represents the KendoReact ExpansionPanelContent component.
18
+ */
19
+ exports.ExpansionPanelContent = React.forwardRef(function (props, ref) {
20
+ return (React.createElement("div", __assign({ ref: ref }, props, { className: kendo_react_common_1.classNames('k-expander-content-wrapper', props.className) }),
21
+ React.createElement("div", { className: 'k-expander-content' }, props.children)));
22
+ });
23
+ exports.ExpansionPanelContent.displayName = 'KendoReactExpansionPanelContent';
@@ -0,0 +1,3 @@
1
+ export * from './ExpansionPanel';
2
+ export * from './ExpansionPanelContent';
3
+ export * from './interfaces';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ function __export(m) {
3
+ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4
+ }
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ __export(require("./ExpansionPanel"));
7
+ __export(require("./ExpansionPanelContent"));
@@ -0,0 +1,77 @@
1
+ /// <reference types="react" />
2
+ import { BaseEvent } from '@progress/kendo-react-common';
3
+ /**
4
+ * The ExpansionPanel ref.
5
+ */
6
+ export interface ExpansionPanelHandle {
7
+ /**
8
+ * The ExpansionPanel element.
9
+ */
10
+ element: HTMLDivElement | null;
11
+ }
12
+ /**
13
+ * The arguments for the `onAction` ExpansionPanel event.
14
+ */
15
+ export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
16
+ /**
17
+ * Represents the `expanded` state of the ExpansionPanel.
18
+ */
19
+ expanded: boolean;
20
+ }
21
+ /**
22
+ * The props of the ExpansionPanel component.
23
+ */
24
+ export interface ExpansionPanelProps {
25
+ /**
26
+ * The React elements that will be rendered inside the ExpansionPanel.
27
+ */
28
+ children?: React.ReactNode;
29
+ /**
30
+ * Sets additional CSS classes to the ExpansionPanel.
31
+ */
32
+ className?: string;
33
+ /**
34
+ * Sets additional CSS styles to the ExpansionPanel.
35
+ */
36
+ style?: React.CSSProperties;
37
+ /**
38
+ * Sets the `id` property of the root ExpansionPanel element.
39
+ */
40
+ id?: string;
41
+ /**
42
+ * Specifies the primary text in the header of the ExpansionPanel.
43
+ */
44
+ title?: React.ReactNode;
45
+ /**
46
+ * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
47
+ */
48
+ subtitle?: React.ReactNode;
49
+ /**
50
+ * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
51
+ */
52
+ expandIcon?: string;
53
+ /**
54
+ * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
55
+ */
56
+ collapseIcon?: string;
57
+ /**
58
+ * Sets the `dir` property of the ExpansionPanel.
59
+ */
60
+ dir?: string;
61
+ /**
62
+ * Sets the `tabIndex` property of the ExpansionPanel.
63
+ */
64
+ tabIndex?: number;
65
+ /**
66
+ * Sets the `expanded` state of the ExpansionPanel.
67
+ */
68
+ expanded?: boolean;
69
+ /**
70
+ * Sets the `disabled` state of the ExpansionPanel.
71
+ */
72
+ disabled?: boolean;
73
+ /**
74
+ * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
75
+ */
76
+ onAction?: (event: ExpansionPanelActionEvent) => void;
77
+ }
@@ -1,3 +1,2 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- // tslint:enable:max-line-length
@@ -6,7 +6,10 @@ export * from './tabstrip/TabStripTab';
6
6
  export * from './panelbar/PanelBar';
7
7
  export * from './panelbar/PanelBarItem';
8
8
  export * from './panelbar/util';
9
- export * from './panelbar/PanelBarInterface';
9
+ export * from './panelbar/interfaces/PanelBarProps';
10
+ export * from './panelbar/interfaces/PanelBarItemProps';
11
+ export * from './panelbar/interfaces/RenderPanelBarItem';
12
+ export * from './panelbar/interfaces/PanelBarSelectEventArguments';
10
13
  export * from './menu/components/Menu';
11
14
  export * from './menu/components/MenuItemLink';
12
15
  export * from './menu/components/MenuItem';
@@ -71,3 +74,4 @@ export * from './breadcrumb/BreadcrumbOrderedList';
71
74
  export * from './breadcrumb/BreadcrumbListItem';
72
75
  export * from './breadcrumb/BreadcrumbDelimiter';
73
76
  export * from './breadcrumb/BreadcrumbLink';
77
+ export * from './expansionpanel';
package/dist/npm/main.js CHANGED
@@ -46,3 +46,4 @@ __export(require("./breadcrumb/BreadcrumbOrderedList"));
46
46
  __export(require("./breadcrumb/BreadcrumbListItem"));
47
47
  __export(require("./breadcrumb/BreadcrumbDelimiter"));
48
48
  __export(require("./breadcrumb/BreadcrumbLink"));
49
+ __export(require("./expansionpanel"));
@@ -7,7 +7,7 @@ exports.packageMetadata = {
7
7
  name: '@progress/kendo-react-layout',
8
8
  productName: 'KendoReact',
9
9
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
10
- publishDate: 1639589355,
10
+ publishDate: 1641918563,
11
11
  version: '',
12
12
  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'
13
13
  };