@progress/kendo-react-layout 5.17.0-dev.202308171202 → 5.17.0-dev.202308231118

package/dist/es/breadcrumb/BreadcrumbLink.d.ts

@@ -78,4 +78,54 @@ export interface BreadcrumbLinkHandle {
      */
     focus: () => void;
 }
+/**
+ * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
 export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle | null>>;

package/dist/es/breadcrumb/BreadcrumbLink.js

@@ -3,6 +3,56 @@ import * as PropTypes from 'prop-types';
 import { validatePackage } from '@progress/kendo-licensing';
 import { classNames, getTabIndex, useDir, dispatchEvent } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+/**
+ * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
 export var BreadcrumbLink = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
     var target = React.useRef(null);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1692271013,
+    publishDate: 1692787346,
     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/tilelayout/InternalTile.d.ts

@@ -54,6 +54,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     dragging: boolean;
     resizing: boolean;
     element: HTMLElement | null;
+    hintElement: HTMLElement | null;
     get dragElement(): HTMLElement | null | undefined;
     ignoreDrag: boolean;
     pressOffset: {

package/dist/es/tilelayout/InternalTile.js

@@ -47,6 +47,7 @@ var InternalTile = /** @class */ (function (_super) {
         _this.dragging = false;
         _this.resizing = false;
         _this.element = null;
+        _this.hintElement = null;
         _this.ignoreDrag = false;
         _this.pressOffset = { x: 0, y: 0 };
         _this.pressXY = { x: 0, y: 0 };
@@ -57,7 +58,7 @@ var InternalTile = /** @class */ (function (_super) {
                 _this.handleRelease();
                 return;
             }
-            if (!_this.element) {
+            if (!_this.element || !_this.hintElement) {
                 return;
             }
             var x = e.clientX;
@@ -74,7 +75,7 @@ var InternalTile = /** @class */ (function (_super) {
                 }
                 _this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
             }
-            _this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+            _this.hintElement.classList.add('k-layout-item-hint-resize');
             if (_this.preventDataOps) {
                 return;
             }
@@ -111,9 +112,9 @@ var InternalTile = /** @class */ (function (_super) {
                 _this.ignoreDrag = true;
                 return;
             }
-            if (_this.element) {
+            if (_this.element && _this.hintElement) {
                 _this.element.style.zIndex = '10';
-                _this.element.classList.add('k-layout-item-hint');
+                _this.hintElement.style.display = 'block';
             }
             _this.dragElement.classList.remove('k-cursor-grab');
             _this.dragElement.classList.add('k-cursor-grabbing');
@@ -162,9 +163,10 @@ var InternalTile = /** @class */ (function (_super) {
         _this.handleRelease = function () {
             _this.dragging = _this.resizing = false;
             _this.currentTranslate = { x: 0, y: 0 };
-            if (_this.element) {
+            if (_this.element && _this.hintElement) {
                 _this.element.style.zIndex = '1';
-                _this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+                _this.hintElement.classList.remove('k-layout-item-hint-resize');
+                _this.hintElement.style.display = 'none';
             }
             var dragElement = _this.dragElement;
             if (dragElement) {
@@ -202,6 +204,10 @@ var InternalTile = /** @class */ (function (_super) {
                 rtl: true
             });
         }
+        if (this.hintElement) {
+            this.hintElement.style.height = this.element.offsetHeight + 'px';
+            this.hintElement.style.width = this.element.offsetWidth + 'px';
+        }
     };
     InternalTile.prototype.render = function () {
         var _this = this;
@@ -211,11 +217,19 @@ var InternalTile = /** @class */ (function (_super) {
         }
         var position = this.props.defaultPosition;
         var resizable = this.props.resizable !== undefined ? this.props.resizable : InternalTile.defaultProps.resizable;
-        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order }, this.props.hintStyle);
-        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: classNames('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
+        var hintItemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order, display: 'none' }, this.props.hintStyle);
+        var itemStyles = {
+            gridColumnStart: position.col,
+            gridColumnEnd: "span ".concat(position.colSpan),
+            gridRowStart: position.row,
+            gridRowEnd: "span ".concat(position.rowSpan),
+            order: position.order
+        };
+        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: classNames('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign(__assign({ height: '100%' }, itemStyles), this.props.style) },
             this.props.children,
             React.createElement(ResizeHandlers, { onPress: this.handlePress, onResize: this.handleResize, resizable: resizable, rtl: this.state.rtl })));
-        return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles, className: this.props.hintClassName },
+        return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles },
+            React.createElement("div", { ref: function (e) { _this.hintElement = e; }, style: __assign({ position: 'absolute' }, hintItemStyles), className: classNames('k-layout-item-hint', this.props.hintClassName) }),
             React.createElement(Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.props.reorderable ? this.handleDrag : undefined, onRelease: this.props.reorderable ? this.handleRelease : undefined, onPress: this.props.reorderable ? this.handlePress : undefined }, card)));
     };
     /**

package/dist/npm/breadcrumb/BreadcrumbLink.d.ts

@@ -78,4 +78,54 @@ export interface BreadcrumbLinkHandle {
      */
     focus: () => void;
 }
+/**
+ * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
 export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle | null>>;

package/dist/npm/breadcrumb/BreadcrumbLink.js

@@ -6,6 +6,56 @@ var PropTypes = require("prop-types");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+/**
+ * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
+ *
+ * @example
+ * ```jsx
+ * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
+ * const items = [
+ *   {
+ *     id: 'home',
+ *     text: 'Home',
+ *     iconClass: 'k-i-home',
+ *   },
+ *   {
+ *     id: 'products',
+ *     text: 'Products',
+ *   },
+ *   {
+ *     id: 'computer',
+ *     text: 'Computer',
+ *   }
+ * ];
+ *
+ * const App = () => {
+ * const [data,setData] = React.useState(items);
+ * const handleItemSelect = (event, id) => {
+ *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
+ *   const newData = data.slice(0, itemIndex + 1);
+ *   setData(newData);
+ * };
+ *
+ * const CustomLink = (data) => {
+ *  return (
+ *     <BreadcrumbLink
+ *       id={data.id}
+ *       text={data.text}
+ *       onItemSelect={(event) => handleItemSelect(event, data.id)}
+ *     />
+ *   );
+ * };
+ *
+ * return (
+ *   <Breadcrumb
+ *     data={data}
+ *     breadcrumbLink={(items) => CustomLink(items)}
+ *   />
+ * )}
+ *
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
 exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
     (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1692271013,
+    publishDate: 1692787346,
     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/tilelayout/InternalTile.d.ts

@@ -54,6 +54,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     dragging: boolean;
     resizing: boolean;
     element: HTMLElement | null;
+    hintElement: HTMLElement | null;
     get dragElement(): HTMLElement | null | undefined;
     ignoreDrag: boolean;
     pressOffset: {

package/dist/npm/tilelayout/InternalTile.js

@@ -50,6 +50,7 @@ var InternalTile = /** @class */ (function (_super) {
         _this.dragging = false;
         _this.resizing = false;
         _this.element = null;
+        _this.hintElement = null;
         _this.ignoreDrag = false;
         _this.pressOffset = { x: 0, y: 0 };
         _this.pressXY = { x: 0, y: 0 };
@@ -60,7 +61,7 @@ var InternalTile = /** @class */ (function (_super) {
                 _this.handleRelease();
                 return;
             }
-            if (!_this.element) {
+            if (!_this.element || !_this.hintElement) {
                 return;
             }
             var x = e.clientX;
@@ -77,7 +78,7 @@ var InternalTile = /** @class */ (function (_super) {
                 }
                 _this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
             }
-            _this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
+            _this.hintElement.classList.add('k-layout-item-hint-resize');
             if (_this.preventDataOps) {
                 return;
             }
@@ -114,9 +115,9 @@ var InternalTile = /** @class */ (function (_super) {
                 _this.ignoreDrag = true;
                 return;
             }
-            if (_this.element) {
+            if (_this.element && _this.hintElement) {
                 _this.element.style.zIndex = '10';
-                _this.element.classList.add('k-layout-item-hint');
+                _this.hintElement.style.display = 'block';
             }
             _this.dragElement.classList.remove('k-cursor-grab');
             _this.dragElement.classList.add('k-cursor-grabbing');
@@ -165,9 +166,10 @@ var InternalTile = /** @class */ (function (_super) {
         _this.handleRelease = function () {
             _this.dragging = _this.resizing = false;
             _this.currentTranslate = { x: 0, y: 0 };
-            if (_this.element) {
+            if (_this.element && _this.hintElement) {
                 _this.element.style.zIndex = '1';
-                _this.element.classList.remove('k-layout-item-hint', 'k-layout-item-hint-resize');
+                _this.hintElement.classList.remove('k-layout-item-hint-resize');
+                _this.hintElement.style.display = 'none';
             }
             var dragElement = _this.dragElement;
             if (dragElement) {
@@ -205,6 +207,10 @@ var InternalTile = /** @class */ (function (_super) {
                 rtl: true
             });
         }
+        if (this.hintElement) {
+            this.hintElement.style.height = this.element.offsetHeight + 'px';
+            this.hintElement.style.width = this.element.offsetWidth + 'px';
+        }
     };
     InternalTile.prototype.render = function () {
         var _this = this;
@@ -214,11 +220,19 @@ var InternalTile = /** @class */ (function (_super) {
         }
         var position = this.props.defaultPosition;
         var resizable = this.props.resizable !== undefined ? this.props.resizable : InternalTile.defaultProps.resizable;
-        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order }, this.props.hintStyle);
-        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: (0, kendo_react_common_1.classNames)('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
+        var hintItemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order, display: 'none' }, this.props.hintStyle);
+        var itemStyles = {
+            gridColumnStart: position.col,
+            gridColumnEnd: "span ".concat(position.colSpan),
+            gridRowStart: position.row,
+            gridRowEnd: "span ".concat(position.rowSpan),
+            order: position.order
+        };
+        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: (0, kendo_react_common_1.classNames)('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign(__assign({ height: '100%' }, itemStyles), this.props.style) },
             this.props.children,
             React.createElement(ResizeHandlers_1.ResizeHandlers, { onPress: this.handlePress, onResize: this.handleResize, resizable: resizable, rtl: this.state.rtl })));
-        return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles, className: this.props.hintClassName },
+        return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles },
+            React.createElement("div", { ref: function (e) { _this.hintElement = e; }, style: __assign({ position: 'absolute' }, hintItemStyles), className: (0, kendo_react_common_1.classNames)('k-layout-item-hint', this.props.hintClassName) }),
             React.createElement(kendo_react_common_1.Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.props.reorderable ? this.handleDrag : undefined, onRelease: this.props.reorderable ? this.handleRelease : undefined, onPress: this.props.reorderable ? this.handlePress : undefined }, card)));
     };
     /**