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

package/dist/es/actionsheet/ActionSheet.d.ts

@@ -17,26 +17,56 @@ export interface ActionSheetProps {
      * Specifies the text that is rendered as title.
      */
     title?: string;
+    /**
+     * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
+     *
+     * @deprecated
+     */
+    onOverlayClick?: (event: React.SyntheticEvent) => void;
     /**
      * Fires when the modal overlay is clicked.
      */
-    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClose?: (event: React.SyntheticEvent) => void;
     /**
      * Fires when an ActionSheet item is clicked.
      */
+    onItemSelect?: (event: {
+        syntheticEvent: React.SyntheticEvent;
+        title?: string;
+        item?: any;
+    }) => void;
+    /**
+     * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
+     *
+     * @deprecated
+     */
     onItemClick?: (event: {
-        syntheticEvent: React.MouseEvent<HTMLSpanElement>;
+        syntheticEvent: React.SyntheticEvent;
         title?: string;
+        item?: any;
     }) => void;
     /**
      * Represents the children that are passed to the ActionSheet.
      */
     children?: any;
+    /**
+     * Specifies the `tabIndex` of the ActionSheet.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies if the ActionSheet can be navigatable with keyboard.
+     * Defaults to `true`.
+     */
+    navigatable: boolean;
+    /**
+     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     */
+    navigatableElements: string[];
 }
 /**
  * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
  */
-export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
+export declare class ActionSheet extends React.Component<ActionSheetProps> {
     /**
      * @hidden
      */
@@ -48,10 +78,20 @@ export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
         items: PropTypes.Requireable<any[]>;
         subTitle: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
+        navigatable: PropTypes.Requireable<boolean>;
+        navigatableElements: PropTypes.Requireable<any[]>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        navigatable: boolean;
+        navigatableElements: never[];
     };
     private actionSheetAnimationRef;
     private actionSheetTitleClass;
     private ariaLabeledBy;
+    private navigation?;
     /**
      * @hidden
      */
@@ -64,5 +104,11 @@ export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
      * @hidden
      */
     render(): JSX.Element;
+    private handleKeyDown;
+    private onTab;
+    private handleOverlayClick;
+    private handleItemClick;
+    private onEnter;
+    private onEscape;
     private children;
 }

package/dist/es/actionsheet/ActionSheet.js

@@ -24,9 +24,18 @@ 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));
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { validatePackage } from '@progress/kendo-react-common';
+import { validatePackage, Navigation, FOCUSABLE_ELEMENTS } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { ActionSheetItem } from './ActionSheetItem';
 import { headerDisplayName } from './ActionSheetHeader';
@@ -45,6 +54,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);
+            }
+        };
         validatePackage(packageMetadata);
         return _this;
     }
@@ -52,9 +123,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 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 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);
+            }
         }
     };
     /**
@@ -68,25 +164,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[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[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[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, __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, __assign({ key: idx }, props, { onClick: _this.props.onItemClick }));
-                                })))),
+                        children[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, __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, __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[footerDisplayName])))));
     };
     ;
@@ -108,7 +203,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/es/actionsheet/ActionSheetContent.js

@@ -1,4 +1,6 @@
+import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -6,7 +8,12 @@ export var contentDisplayName = 'ActionSheetContent';
 /**
  * The KendoReact ActionSheetContent component.
  */
-export var ActionSheetContent = function (props) { return props.children; };
+export var ActionSheetContent = function (props) {
+    return (React.createElement("div", { className: classNames('k-actionsheet-content', props.className) }, props.children));
+};
+ActionSheetContent.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/es/actionsheet/ActionSheetFooter.js

@@ -1,4 +1,6 @@
+import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -6,7 +8,12 @@ export var footerDisplayName = 'ActionSheetFooter';
 /**
  * The KendoReact ActionSheetFooter component.
  */
-export var ActionSheetFooter = function (props) { return props.children; };
+export var ActionSheetFooter = function (props) {
+    return (React.createElement("div", { className: classNames('k-actionsheet-footer', props.className) }, props.children));
+};
+ActionSheetFooter.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/es/actionsheet/ActionSheetHeader.js

@@ -1,4 +1,6 @@
+import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -6,7 +8,12 @@ export var headerDisplayName = 'ActionSheetHeader';
 /**
  * The KendoReact ActionSheetHeader component.
  */
-export var ActionSheetHeader = function (props) { return props.children; };
+export var ActionSheetHeader = function (props) {
+    return (React.createElement("div", { className: classNames('k-actionsheet-header', props.className) }, props.children));
+};
+ActionSheetHeader.propTypes = {
+    className: PropTypes.string
+};
 /**
  * @hidden
  */

package/dist/es/actionsheet/ActionSheetItem.js

@@ -5,19 +5,22 @@ import { classNames } from '@progress/kendo-react-common';
  * The KendoReact ActionSheetItem component.
  */
 export 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: 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: 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/es/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/es/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/es/package-metadata.js

@@ -5,7 +5,7 @@ export var 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'
 };

package/dist/npm/actionsheet/ActionSheet.d.ts

@@ -17,26 +17,56 @@ export interface ActionSheetProps {
      * Specifies the text that is rendered as title.
      */
     title?: string;
+    /**
+     * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
+     *
+     * @deprecated
+     */
+    onOverlayClick?: (event: React.SyntheticEvent) => void;
     /**
      * Fires when the modal overlay is clicked.
      */
-    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onClose?: (event: React.SyntheticEvent) => void;
     /**
      * Fires when an ActionSheet item is clicked.
      */
+    onItemSelect?: (event: {
+        syntheticEvent: React.SyntheticEvent;
+        title?: string;
+        item?: any;
+    }) => void;
+    /**
+     * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
+     *
+     * @deprecated
+     */
     onItemClick?: (event: {
-        syntheticEvent: React.MouseEvent<HTMLSpanElement>;
+        syntheticEvent: React.SyntheticEvent;
         title?: string;
+        item?: any;
     }) => void;
     /**
      * Represents the children that are passed to the ActionSheet.
      */
     children?: any;
+    /**
+     * Specifies the `tabIndex` of the ActionSheet.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies if the ActionSheet can be navigatable with keyboard.
+     * Defaults to `true`.
+     */
+    navigatable: boolean;
+    /**
+     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
+     */
+    navigatableElements: string[];
 }
 /**
  * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
  */
-export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
+export declare class ActionSheet extends React.Component<ActionSheetProps> {
     /**
      * @hidden
      */
@@ -48,10 +78,20 @@ export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
         items: PropTypes.Requireable<any[]>;
         subTitle: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
+        navigatable: PropTypes.Requireable<boolean>;
+        navigatableElements: PropTypes.Requireable<any[]>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        navigatable: boolean;
+        navigatableElements: never[];
     };
     private actionSheetAnimationRef;
     private actionSheetTitleClass;
     private ariaLabeledBy;
+    private navigation?;
     /**
      * @hidden
      */
@@ -64,5 +104,11 @@ export declare class ActionSheet extends React.Component<ActionSheetProps, {}> {
      * @hidden
      */
     render(): JSX.Element;
+    private handleKeyDown;
+    private onTab;
+    private handleOverlayClick;
+    private handleItemClick;
+    private onEnter;
+    private onEscape;
     private children;
 }