@progress/kendo-react-layout 5.3.0-dev.202204281202 → 5.3.0-dev.202205041411

package/dist/es/breadcrumb/BreadcrumbLink.js

@@ -19,13 +19,13 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleItemSelect = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
+        if (props.id) {
+            dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
         }
     }, [props.onItemSelect]);
     var handleKeyDown = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
+        if (props.id) {
+            dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
     return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {

package/dist/es/card/Card.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { CardProps } from './interfaces/CardProps';
-export declare const Card: React.FunctionComponent<CardProps>;
+import { CardHandle } from './interfaces/CardHandle';
+export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, string | number> & React.RefAttributes<CardHandle>>;

package/dist/es/card/Card.js

@@ -1,3 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames } from '@progress/kendo-react-common';
@@ -5,15 +25,27 @@ import { cardType } from './interfaces/Enums';
 import { cardOrientation } from './interfaces/Enums';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-export var Card = function (props) {
+export var Card = React.forwardRef(function (props, ref) {
     var _a;
     validatePackage(packageMetadata);
-    return (React.createElement("div", { dir: props.dir, style: props.style, className: classNames('k-card', props.className, (_a = {}, _a["k-card-" + props.type] = props.type !== cardType.DEFAULT, _a), props.orientation !== cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, props.children));
-};
+    var children = props.children, dir = props.dir, style = props.style, className = props.className, type = props.type, orientation = props.orientation, customProps = __rest(props, ["children", "dir", "style", "className", "type", "orientation"]);
+    var target = React.useRef(null);
+    var chipRef = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: chipRef.current,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("div", __assign({ dir: dir, style: style, ref: chipRef, className: classNames('k-card', className, (_a = {}, _a["k-card-" + type] = type !== cardType.DEFAULT, _a), orientation !== cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, customProps), children));
+});
+Card.displayName = 'KendoReactCard';
 Card.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    dir: PropTypes.string,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    style: PropTypes.object,
+    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error'])
 };
 Card.defaultProps = {
     type: cardType.DEFAULT,

package/dist/es/card/interfaces/CardHandle.d.ts

@@ -0,0 +1,14 @@
+import { CardProps } from './CardProps';
+/**
+ * Represents the target(element and props) of the Card component.
+ */
+export interface CardHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Card.
+     */
+    props: CardProps;
+}

package/dist/es/card/interfaces/CardProps.d.ts

@@ -38,4 +38,8 @@ export interface CardProps {
      * * `vertical`
      */
     orientation?: cardOrientation | string;
+    /**
+     * Sets a custom property to component DOM element.
+     */
+    [customProp: string]: any;
 }

package/dist/es/main.d.ts

@@ -27,6 +27,7 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/interfaces/CardProps';
+export * from './card/interfaces/CardHandle';
 export * from './card/interfaces/AvatarProps';
 export * from './card/interfaces/CardActionsProps';
 export * from './card/Avatar';

package/dist/es/menu/components/MenuItemInternal.d.ts

@@ -23,7 +23,7 @@ export declare class MenuItemInternal extends React.Component<MenuItemInternalPr
     constructor(props: MenuItemInternalProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: MenuItemInternalProps): void;
-    render(): JSX.Element[];
+    render(): JSX.Element;
     private renderContent;
     private renderMenuItemLink;
     private renderPopupIfOpened;

package/dist/es/menu/components/MenuItemInternal.js

@@ -71,10 +71,9 @@ var MenuItemInternal = /** @class */ (function (_super) {
         var _this = this;
         var item = this.props.item;
         var itemId = item.id;
-        return [
-            (React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? getDOMElementId(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink())),
-            this.renderPopupIfOpened()
-        ];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? getDOMElementId(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
+            this.renderPopupIfOpened()));
     };
     MenuItemInternal.prototype.renderContent = function () {
         var itemId = this.props.item.contentParentItemId;
@@ -90,11 +89,10 @@ var MenuItemInternal = /** @class */ (function (_super) {
             var textOrItemRender = this.itemRender ?
                 React.createElement(this.itemRender, { item: this.props.onOriginalItemNeeded(item.id), itemId: item.id, key: "1" }) :
                 React.createElement("span", { className: "k-menu-link-text" }, item.text);
-            return (React.createElement(MenuItemLink, { url: item.url, opened: this.Opened }, [
+            return (React.createElement(MenuItemLink, { url: item.url, opened: this.Opened },
                 this.renderMenuIconIfApplicable(),
                 textOrItemRender,
-                this.renderArrowIfApplicable()
-            ]));
+                this.renderArrowIfApplicable()));
         }
     };
     MenuItemInternal.prototype.renderPopupIfOpened = function () {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1651146566,
+    publishDate: 1651672640,
     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/es/tabstrip/TabStripContent.js

@@ -59,6 +59,7 @@ var TabStripContent = /** @class */ (function (_super) {
         var contentProps = {
             'role': 'tabpanel',
             'aria-expanded': true,
+            'aria-labelledby': idx.toString(),
             'style': {
                 'display': visible ? undefined : 'none'
             }

package/dist/es/tabstrip/TabStripNavigationItem.d.ts

@@ -4,6 +4,10 @@ import * as PropTypes from 'prop-types';
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
  */
 export interface TabStripNavigationItemProps {
+    /**
+     * Sets the `id` property of the top element of the TabStripNavigationItem.
+     */
+    id?: string;
     /**
      * Defines whether the current TabStripNavigationItem is selected.
      */

package/dist/es/tabstrip/TabStripNavigationItem.js

@@ -41,9 +41,13 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
      */
     TabStripNavigationItem.prototype.render = function () {
         var _a;
-        var _b = this.props, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
+        var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
         var props = {
+            'id': id,
             'aria-selected': active,
+            'aria-controls': id,
+            'aria-disabled': disabled,
+            'aria-hidden': disabled,
             'role': 'tab',
             onClick: !disabled ? this.onClick : undefined
         };

package/dist/npm/breadcrumb/BreadcrumbLink.js

@@ -21,13 +21,13 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleItemSelect = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
+        if (props.id) {
+            kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
         }
     }, [props.onItemSelect]);
     var handleKeyDown = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
+        if (props.id) {
+            kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
     return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: kendo_react_common_1.useDir(linkRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {

package/dist/npm/card/Card.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { CardProps } from './interfaces/CardProps';
-export declare const Card: React.FunctionComponent<CardProps>;
+import { CardHandle } from './interfaces/CardHandle';
+export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, string | number> & React.RefAttributes<CardHandle>>;

package/dist/npm/card/Card.js

@@ -1,4 +1,24 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var PropTypes = require("prop-types");
@@ -7,15 +27,27 @@ var Enums_1 = require("./interfaces/Enums");
 var Enums_2 = require("./interfaces/Enums");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
-exports.Card = function (props) {
+exports.Card = React.forwardRef(function (props, ref) {
     var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    return (React.createElement("div", { dir: props.dir, style: props.style, className: kendo_react_common_1.classNames('k-card', props.className, (_a = {}, _a["k-card-" + props.type] = props.type !== Enums_1.cardType.DEFAULT, _a), props.orientation !== Enums_2.cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, props.children));
-};
+    var children = props.children, dir = props.dir, style = props.style, className = props.className, type = props.type, orientation = props.orientation, customProps = __rest(props, ["children", "dir", "style", "className", "type", "orientation"]);
+    var target = React.useRef(null);
+    var chipRef = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: chipRef.current,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("div", __assign({ dir: dir, style: style, ref: chipRef, className: kendo_react_common_1.classNames('k-card', className, (_a = {}, _a["k-card-" + type] = type !== Enums_1.cardType.DEFAULT, _a), orientation !== Enums_2.cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, customProps), children));
+});
+exports.Card.displayName = 'KendoReactCard';
 exports.Card.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    dir: PropTypes.string,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    style: PropTypes.object,
+    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error'])
 };
 exports.Card.defaultProps = {
     type: Enums_1.cardType.DEFAULT,

package/dist/npm/card/interfaces/CardHandle.d.ts

@@ -0,0 +1,14 @@
+import { CardProps } from './CardProps';
+/**
+ * Represents the target(element and props) of the Card component.
+ */
+export interface CardHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Card.
+     */
+    props: CardProps;
+}

package/dist/npm/card/interfaces/CardHandle.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/card/interfaces/CardProps.d.ts

@@ -38,4 +38,8 @@ export interface CardProps {
      * * `vertical`
      */
     orientation?: cardOrientation | string;
+    /**
+     * Sets a custom property to component DOM element.
+     */
+    [customProp: string]: any;
 }

package/dist/npm/main.d.ts

@@ -27,6 +27,7 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/interfaces/CardProps';
+export * from './card/interfaces/CardHandle';
 export * from './card/interfaces/AvatarProps';
 export * from './card/interfaces/CardActionsProps';
 export * from './card/Avatar';

package/dist/npm/menu/components/MenuItemInternal.d.ts

@@ -23,7 +23,7 @@ export declare class MenuItemInternal extends React.Component<MenuItemInternalPr
     constructor(props: MenuItemInternalProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: MenuItemInternalProps): void;
-    render(): JSX.Element[];
+    render(): JSX.Element;
     private renderContent;
     private renderMenuItemLink;
     private renderPopupIfOpened;

package/dist/npm/menu/components/MenuItemInternal.js

@@ -73,10 +73,9 @@ var MenuItemInternal = /** @class */ (function (_super) {
         var _this = this;
         var item = this.props.item;
         var itemId = item.id;
-        return [
-            (React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? misc_1.getDOMElementId(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink())),
-            this.renderPopupIfOpened()
-        ];
+        return (React.createElement(React.Fragment, null,
+            React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? misc_1.getDOMElementId(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
+            this.renderPopupIfOpened()));
     };
     MenuItemInternal.prototype.renderContent = function () {
         var itemId = this.props.item.contentParentItemId;
@@ -92,11 +91,10 @@ var MenuItemInternal = /** @class */ (function (_super) {
             var textOrItemRender = this.itemRender ?
                 React.createElement(this.itemRender, { item: this.props.onOriginalItemNeeded(item.id), itemId: item.id, key: "1" }) :
                 React.createElement("span", { className: "k-menu-link-text" }, item.text);
-            return (React.createElement(MenuItemLink_1.MenuItemLink, { url: item.url, opened: this.Opened }, [
+            return (React.createElement(MenuItemLink_1.MenuItemLink, { url: item.url, opened: this.Opened },
                 this.renderMenuIconIfApplicable(),
                 textOrItemRender,
-                this.renderArrowIfApplicable()
-            ]));
+                this.renderArrowIfApplicable()));
         }
     };
     MenuItemInternal.prototype.renderPopupIfOpened = function () {

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1651146566,
+    publishDate: 1651672640,
     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/tabstrip/TabStripContent.js

@@ -61,6 +61,7 @@ var TabStripContent = /** @class */ (function (_super) {
         var contentProps = {
             'role': 'tabpanel',
             'aria-expanded': true,
+            'aria-labelledby': idx.toString(),
             'style': {
                 'display': visible ? undefined : 'none'
             }

package/dist/npm/tabstrip/TabStripNavigationItem.d.ts

@@ -4,6 +4,10 @@ import * as PropTypes from 'prop-types';
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
  */
 export interface TabStripNavigationItemProps {
+    /**
+     * Sets the `id` property of the top element of the TabStripNavigationItem.
+     */
+    id?: string;
     /**
      * Defines whether the current TabStripNavigationItem is selected.
      */

package/dist/npm/tabstrip/TabStripNavigationItem.js

@@ -43,9 +43,13 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
      */
     TabStripNavigationItem.prototype.render = function () {
         var _a;
-        var _b = this.props, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
+        var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
         var props = {
+            'id': id,
             'aria-selected': active,
+            'aria-controls': id,
+            'aria-disabled': disabled,
+            'aria-hidden': disabled,
             'role': 'tab',
             onClick: !disabled ? this.onClick : undefined
         };