@progress/kendo-react-layout 5.11.1-dev.202302171102 → 5.12.0-dev.202302211105

package/dist/npm/actionsheet/ActionSheet.js

@@ -25,6 +25,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheet = void 0;
 var React = require("react");
@@ -48,6 +57,68 @@ var ActionSheet = /** @class */ (function (_super) {
         _this.actionSheetAnimationRef = React.createRef();
         _this.actionSheetTitleClass = 'k-actionsheet-title';
         _this.ariaLabeledBy = _this.actionSheetTitleClass + 1;
+        _this.handleKeyDown = function (e) {
+            if (_this.props.navigatable) {
+                _this.navigation.triggerKeyboardEvent(e);
+            }
+        };
+        _this.onTab = function (target, nav, ev) {
+            ev.preventDefault();
+            if (ev.shiftKey) {
+                nav.focusPrevious(target);
+            }
+            else {
+                nav.focusNext(target);
+            }
+        };
+        _this.handleOverlayClick = function (ev) {
+            if (_this.props.onOverlayClick) {
+                _this.props.onOverlayClick.call(undefined, ev);
+            }
+            if (_this.props.onClose) {
+                _this.props.onClose.call(undefined, ev);
+            }
+        };
+        _this.handleItemClick = function (ev) {
+            if (_this.props.onItemClick) {
+                _this.props.onItemClick.call(undefined, ev);
+            }
+            if (_this.props.onItemSelect) {
+                _this.props.onItemSelect.call(undefined, ev);
+            }
+        };
+        _this.onEnter = function (target, nav, ev) {
+            var isItem = target.className && target.className.indexOf('k-actionsheet-item') !== -1;
+            var allItems = nav.elements.filter(function (e) { return e.className.indexOf('k-actionsheet-item') !== -1; });
+            if (isItem && _this.props.onItemClick) {
+                ev.preventDefault();
+                var item = _this.props.items[allItems.indexOf(target)];
+                _this.props.onItemClick.call(undefined, {
+                    syntheticEvent: ev,
+                    item: item,
+                    title: item && item.title
+                });
+            }
+            if (isItem && _this.props.onItemSelect) {
+                ev.preventDefault();
+                var item = _this.props.items[allItems.indexOf(target)];
+                _this.props.onItemSelect.call(undefined, {
+                    syntheticEvent: ev,
+                    item: item,
+                    title: item && item.title
+                });
+            }
+        };
+        _this.onEscape = function (_target, _nav, ev) {
+            if (_this.props.onOverlayClick) {
+                ev.preventDefault();
+                _this.props.onOverlayClick.call(undefined, ev);
+            }
+            if (_this.props.onClose) {
+                ev.preventDefault();
+                _this.props.onClose.call(undefined, ev);
+            }
+        };
         (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
@@ -55,9 +126,34 @@ var ActionSheet = /** @class */ (function (_super) {
      * @hidden
      */
     ActionSheet.prototype.componentDidMount = function () {
+        var _this = this;
         if (this.actionSheetAnimationRef.current) {
             this.actionSheetAnimationRef.current.style.setProperty('--kendo-actionsheet-height', 'auto');
             this.actionSheetAnimationRef.current.style.setProperty('--kendo-actionsheet-max-height', 'none');
+            if (this.props.navigatable) {
+                this.navigation = new kendo_react_common_1.Navigation({
+                    tabIndex: this.props.tabIndex || 0,
+                    root: this.actionSheetAnimationRef,
+                    rovingTabIndex: false,
+                    selectors: __spreadArray([
+                        '.k-actionsheet-item'
+                    ], [
+                        '.k-actionsheet-footer',
+                        '.k-actionsheet-content',
+                        '.k-actionsheet-header'
+                    ].map(function (selector) {
+                        return kendo_react_common_1.FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
+                    }).flat(), true),
+                    keyboardEvents: {
+                        keydown: {
+                            'Tab': this.onTab,
+                            'Enter': this.onEnter,
+                            'Escape': this.onEscape
+                        }
+                    }
+                });
+                this.navigation.focusElement(this.navigation.first, null);
+            }
         }
     };
     /**
@@ -71,25 +167,24 @@ var ActionSheet = /** @class */ (function (_super) {
         var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
         var children = this.children(this.props.children);
         return (React.createElement("div", { className: "k-actionsheet-container" },
-            React.createElement("div", { className: "k-overlay", onClick: this.props.onOverlayClick }),
+            React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
             React.createElement("div", { className: "k-animation-container" },
                 React.createElement("div", { className: "k-child-animation-container", style: { bottom: '0px', width: '100%' } },
-                    React.createElement("div", { className: "k-actionsheet k-actionsheet-bottom", role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetAnimationRef },
+                    React.createElement("div", { className: "k-actionsheet k-actionsheet-bottom", role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetAnimationRef, onKeyDown: this.handleKeyDown },
                         (children[ActionSheetHeader_1.headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
                             React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
                                 React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[ActionSheetHeader_1.headerDisplayName] ||
                                     React.createElement(React.Fragment, null,
                                         React.createElement("div", { className: "k-text-center" }, this.props.title),
                                         this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
-                        React.createElement("div", { className: "k-actionsheet-content" }, children[ActionSheetContent_1.contentDisplayName] ||
-                            React.createElement(React.Fragment, null,
-                                React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (props, idx) {
-                                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, props, { key: idx, focused: idx === 0, onClick: _this.props.onItemClick })));
-                                })),
-                                shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
-                                React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (props, idx) {
-                                    return React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({ key: idx }, props, { onClick: _this.props.onItemClick }));
-                                })))),
+                        children[ActionSheetContent_1.contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
+                            React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
+                                return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                            })),
+                            shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
+                            React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
+                                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 })));
+                            }))),
                         children[ActionSheetFooter_1.footerDisplayName])))));
     };
     ;
@@ -111,7 +206,16 @@ var ActionSheet = /** @class */ (function (_super) {
     ActionSheet.propTypes = {
         items: PropTypes.array,
         subTitle: PropTypes.string,
-        title: PropTypes.string
+        title: PropTypes.string,
+        navigatable: PropTypes.bool,
+        navigatableElements: PropTypes.array
+    };
+    /**
+     * @hidden
+     */
+    ActionSheet.defaultProps = {
+        navigatable: true,
+        navigatableElements: []
     };
     return ActionSheet;
 }(React.Component));

package/dist/npm/actionsheet/ActionSheetContent.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheetContent = exports.contentDisplayName = void 0;
+var React = require("react");
 var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -9,8 +11,13 @@ exports.contentDisplayName = 'ActionSheetContent';
 /**
  * The KendoReact ActionSheetContent component.
  */
-var ActionSheetContent = function (props) { return props.children; };
+var ActionSheetContent = function (props) {
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-content', props.className) }, props.children));
+};
 exports.ActionSheetContent = ActionSheetContent;
+exports.ActionSheetContent.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/npm/actionsheet/ActionSheetFooter.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheetFooter = exports.footerDisplayName = void 0;
+var React = require("react");
 var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -9,8 +11,13 @@ exports.footerDisplayName = 'ActionSheetFooter';
 /**
  * The KendoReact ActionSheetFooter component.
  */
-var ActionSheetFooter = function (props) { return props.children; };
+var ActionSheetFooter = function (props) {
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-footer', props.className) }, props.children));
+};
 exports.ActionSheetFooter = ActionSheetFooter;
+exports.ActionSheetFooter.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/npm/actionsheet/ActionSheetHeader.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionSheetHeader = exports.headerDisplayName = void 0;
+var React = require("react");
 var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -9,8 +11,13 @@ exports.headerDisplayName = 'ActionSheetHeader';
 /**
  * The KendoReact ActionSheetHeader component.
  */
-var ActionSheetHeader = function (props) { return props.children; };
+var ActionSheetHeader = function (props) {
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-header', props.className) }, props.children));
+};
 exports.ActionSheetHeader = ActionSheetHeader;
+exports.ActionSheetHeader.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/npm/actionsheet/ActionSheetItem.js

@@ -8,19 +8,22 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
  * The KendoReact ActionSheetItem component.
  */
 var ActionSheetItem = function (props) {
-    var defaultTabIndex = 0;
     var itemRef = React.useRef(null);
     var onClick = React.useCallback(function (event) {
         if (props.onClick) {
-            props.onClick.call(undefined, { syntheticEvent: event, title: props.title });
+            props.onClick.call(undefined, {
+                syntheticEvent: event,
+                item: props.item,
+                title: props.title
+            });
         }
-    }, [props.title, props.onClick]);
+    }, [props.item, props.title, props.onClick]);
     React.useEffect(function () {
         if (itemRef.current && props.focused) {
             itemRef.current.focus();
         }
     }, [props.focused]);
-    return (React.createElement("span", { style: props.style, className: (0, kendo_react_common_1.classNames)('k-actionsheet-item', 'k-cursor-pointer', props.disabled && 'k-disabled', props.className), role: "button", ref: itemRef, "aria-disabled": props.disabled, tabIndex: props.tabIndex || defaultTabIndex, onClick: onClick },
+    return (React.createElement("span", { style: props.style, tabIndex: props.tabIndex, className: (0, kendo_react_common_1.classNames)('k-actionsheet-item', 'k-cursor-pointer', props.disabled && 'k-disabled', props.className), ref: itemRef, role: "button", "aria-disabled": props.disabled, onClick: onClick },
         React.createElement("span", { className: "k-actionsheet-action" },
             props.icon && React.createElement("span", { className: "k-icon-wrap" }, props.icon),
             (props.title || props.description) && (React.createElement("span", { className: "k-actionsheet-item-text" },

package/dist/npm/actionsheet/interfaces/ActionSheetChildrenProps.d.ts

@@ -2,6 +2,10 @@
  * @hidden
  */
 export interface ActionSheetChildrenProps {
+    /**
+     * ClassName of the rendered element.
+     */
+    className?: any;
     /**
      * Represents the children that are passed to the ActionSheet.
      */

package/dist/npm/actionsheet/interfaces/ActionSheetItemProps.d.ts

@@ -12,7 +12,12 @@ export interface ActionSheetItemProps {
      */
     style?: React.CSSProperties;
     /**
-     * Specifies the `tabIndex` of the ActionSheet.
+     * **Deprecated**. Specifies the `tabIndex` of the ActionSheetItem.
+     *
+     * Set the tabIndex to the ActionSheet component instead.
+     *
+     * @deprecated
+     *
      */
     tabIndex?: number;
     /**
@@ -36,15 +41,27 @@ export interface ActionSheetItemProps {
      * Specifies the text content of the ActionSheet item.
      */
     title?: string;
+    /**
+     * Specifies the ActionSheet item.
+     */
+    item?: any;
     /**
      * @hidden
      */
     onClick?: (event: {
-        syntheticEvent: React.MouseEvent<HTMLSpanElement>;
+        syntheticEvent: React.SyntheticEvent;
         title?: string;
     }) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown?: (event: React.SyntheticEvent, title: string | undefined, id: number | undefined) => void;
     /**
      * @hidden
      */
     focused?: boolean;
+    /**
+     * @hidden
+     */
+    id?: number;
 }

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1676630656,
+    publishDate: 1676976502,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };