@progress/kendo-react-layout 5.12.0-dev.202303131742 → 5.12.0

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 (11) hide show
  1. package/dist/cdn/js/kendo-react-layout.js +1 -1
  2. package/dist/es/actionsheet/ActionSheet.d.ts +8 -0
  3. package/dist/es/actionsheet/ActionSheet.js +14 -13
  4. package/dist/es/actionsheet/ActionSheetHeader.js +1 -1
  5. package/dist/es/package-metadata.js +1 -1
  6. package/dist/npm/actionsheet/ActionSheet.d.ts +8 -0
  7. package/dist/npm/actionsheet/ActionSheet.js +14 -13
  8. package/dist/npm/actionsheet/ActionSheetHeader.js +1 -1
  9. package/dist/npm/package-metadata.js +1 -1
  10. package/dist/systemjs/kendo-react-layout.js +1 -1
  11. package/package.json +13 -13
package/dist/es/actionsheet/ActionSheet.d.ts CHANGED
@@ -66,6 +66,14 @@ export interface ActionSheetProps {
66
66
  * Controls the popup animation. By default, the open and close animations are disabled.
67
67
  */
68
68
  animation?: boolean;
69
+ /**
70
+ * @hidden
71
+ */
72
+ animationStyles?: React.CSSProperties;
73
+ /**
74
+ * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
75
+ */
76
+ animationDuration?: number;
69
77
  /**
70
78
  * The CSS classes that will be rendered on the inner ActionSheet element.
71
79
  */
package/dist/es/actionsheet/ActionSheet.js CHANGED
@@ -187,7 +187,7 @@ var ActionSheet = /** @class */ (function (_super) {
187
187
  ], [
188
188
  '.k-actionsheet-footer',
189
189
  '.k-actionsheet-content',
190
- '.k-actionsheet-header'
190
+ '.k-actionsheet-titlebar'
191
191
  ].map(function (selector) {
192
192
  return FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
193
193
  }).flat(), true),
@@ -207,33 +207,34 @@ var ActionSheet = /** @class */ (function (_super) {
207
207
  /** @hidden */
208
208
  ActionSheet.prototype.render = function () {
209
209
  var _this = this;
210
- var _a, _b;
211
- var topGroupItems = (_a = this.props.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !item.group || item.group === 'top'; });
212
- var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
210
+ var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
211
+ var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
212
+ var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
213
213
  var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
214
214
  var children = this.children(this.props.children);
215
+ var animationDuration = this.props.animationDuration || this.animationDuration;
215
216
  var actionSheetPanel = this.state.slide && React.createElement("div", { className: classNames('k-actionsheet', this.props.className, {
216
217
  'k-actionsheet-bottom': !this.props.className
217
218
  }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
218
- (children[headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
219
+ (children[headerDisplayName] && !title && !subTitle) && children[headerDisplayName],
220
+ (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
219
221
  React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
220
- React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[headerDisplayName] ||
221
- React.createElement(React.Fragment, null,
222
- React.createElement("div", { className: "k-text-center" }, this.props.title),
223
- this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
222
+ React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
223
+ title && React.createElement("div", null, title),
224
+ subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
224
225
  children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
225
226
  React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
226
- return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
227
+ return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
227
228
  })),
228
229
  shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
229
230
  React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
230
- return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
231
+ return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
231
232
  }))),
232
233
  children[footerDisplayName]);
233
- return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
234
+ return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
234
235
  React.createElement("div", { className: "k-actionsheet-container" },
235
236
  React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
236
- this.props.animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
237
+ animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
237
238
  : actionSheetPanel)))
238
239
  : null));
239
240
  };
package/dist/es/actionsheet/ActionSheetHeader.js CHANGED
@@ -9,7 +9,7 @@ export var headerDisplayName = 'ActionSheetHeader';
9
9
  * The KendoReact ActionSheetHeader component.
10
10
  */
11
11
  export var ActionSheetHeader = function (props) {
12
- return (React.createElement("div", { className: classNames('k-actionsheet-header', props.className) }, props.children));
12
+ return (React.createElement("div", { className: classNames('k-actionsheet-titlebar', props.className) }, props.children));
13
13
  };
14
14
  ActionSheetHeader.propTypes = {
15
15
  className: PropTypes.string
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-layout',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1678728158,
8
+ publishDate: 1678867571,
9
9
  version: '',
10
10
  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'
11
11
  };
package/dist/npm/actionsheet/ActionSheet.d.ts CHANGED
@@ -66,6 +66,14 @@ export interface ActionSheetProps {
66
66
  * Controls the popup animation. By default, the open and close animations are disabled.
67
67
  */
68
68
  animation?: boolean;
69
+ /**
70
+ * @hidden
71
+ */
72
+ animationStyles?: React.CSSProperties;
73
+ /**
74
+ * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
75
+ */
76
+ animationDuration?: number;
69
77
  /**
70
78
  * The CSS classes that will be rendered on the inner ActionSheet element.
71
79
  */
package/dist/npm/actionsheet/ActionSheet.js CHANGED
@@ -190,7 +190,7 @@ var ActionSheet = /** @class */ (function (_super) {
190
190
  ], [
191
191
  '.k-actionsheet-footer',
192
192
  '.k-actionsheet-content',
193
- '.k-actionsheet-header'
193
+ '.k-actionsheet-titlebar'
194
194
  ].map(function (selector) {
195
195
  return kendo_react_common_1.FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
196
196
  }).flat(), true),
@@ -210,33 +210,34 @@ var ActionSheet = /** @class */ (function (_super) {
210
210
  /** @hidden */
211
211
  ActionSheet.prototype.render = function () {
212
212
  var _this = this;
213
- var _a, _b;
214
- var topGroupItems = (_a = this.props.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !item.group || item.group === 'top'; });
215
- var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
213
+ var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
214
+ var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
215
+ var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
216
216
  var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
217
217
  var children = this.children(this.props.children);
218
+ var animationDuration = this.props.animationDuration || this.animationDuration;
218
219
  var actionSheetPanel = this.state.slide && React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet', this.props.className, {
219
220
  'k-actionsheet-bottom': !this.props.className
220
221
  }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
221
- (children[ActionSheetHeader_1.headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
222
+ (children[ActionSheetHeader_1.headerDisplayName] && !title && !subTitle) && children[ActionSheetHeader_1.headerDisplayName],
223
+ (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
222
224
  React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
223
- React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[ActionSheetHeader_1.headerDisplayName] ||
224
- React.createElement(React.Fragment, null,
225
- React.createElement("div", { className: "k-text-center" }, this.props.title),
226
- this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
225
+ React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
226
+ title && React.createElement("div", null, title),
227
+ subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
227
228
  children[ActionSheetContent_1.contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
228
229
  React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
229
- return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
230
+ return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
230
231
  })),
231
232
  shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
232
233
  React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
233
- return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
234
+ return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
234
235
  }))),
235
236
  children[ActionSheetFooter_1.footerDisplayName]);
236
- return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
237
+ return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
237
238
  React.createElement("div", { className: "k-actionsheet-container" },
238
239
  React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
239
- this.props.animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
240
+ animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
240
241
  : actionSheetPanel)))
241
242
  : null));
242
243
  };
package/dist/npm/actionsheet/ActionSheetHeader.js CHANGED
@@ -12,7 +12,7 @@ exports.headerDisplayName = 'ActionSheetHeader';
12
12
  * The KendoReact ActionSheetHeader component.
13
13
  */
14
14
  var ActionSheetHeader = function (props) {
15
- return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-header', props.className) }, props.children));
15
+ return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-titlebar', props.className) }, props.children));
16
16
  };
17
17
  exports.ActionSheetHeader = ActionSheetHeader;
18
18
  exports.ActionSheetHeader.propTypes = {
package/dist/npm/package-metadata.js CHANGED
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-layout',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1678728158,
11
+ publishDate: 1678867571,
12
12
  version: '',
13
13
  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'
14
14
  };