@progress/kendo-react-layout 11.0.0-develop.2 → 11.0.0-develop.20

package/index.d.mts

@@ -233,7 +233,7 @@ export declare interface ActionSheetProps {
      * <ActionSheet subTitle="Subtitle text" />
      * ```
      */
-    subTitle?: string | React_2.ReactNode;
+    subTitle?: React_2.ReactNode;
     /**
      * Specifies the text that is rendered as title.
      *
@@ -242,7 +242,7 @@ export declare interface ActionSheetProps {
      * <ActionSheet title="Title text" />
      * ```
      */
-    title?: string | React_2.ReactNode;
+    title?: React_2.ReactNode;
     /**
      * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
      *
@@ -3329,6 +3329,9 @@ export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<a
 /**
  * Represents the [KendoReact Menu component]({% slug overview_menu %}).
  *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ *
  * @example
  * ```jsx
  * class App extends React.Component {
@@ -3436,6 +3439,12 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
 export declare interface MenuHandle extends Pick<MenuClassComponent, keyof MenuClassComponent> {
 }
 
+/**
+ * Represents the MenuItem component.
+ *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ */
 export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
     /**
      * @hidden
@@ -3773,6 +3782,12 @@ declare enum NavigationAction {
     Right = 6
 }
 
+/**
+ * Represents the [KendoReact PanelBar component]({% slug overview_panelbar %}).
+ *
+ * @remarks
+ * Supported children components are: {@link PanelBarItem}.
+ */
 export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarState> {
     /**
      * @hidden
@@ -3841,6 +3856,12 @@ export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarS
  */
 export declare type PanelBarExpandMode = 'single' | 'multiple';
 
+/**
+ * Represents the PanelBarItem component.
+ *
+ * @remarks
+ * Supported children components are: {@link PanelBarItem}.
+ */
 export declare class PanelBarItem extends React_2.PureComponent<PanelBarItemProps, PanelBarItemState> {
     /**
      * @hidden
@@ -4939,6 +4960,12 @@ export declare interface StepProps {
 /** @hidden */
 export declare const TabStrip: ForwardRefExoticComponent<TabStripProps & RefAttributes<any>>;
 
+/**
+ * Represents the TabStrip component.
+ *
+ * @remarks
+ * Supported children components are: {@link TabStripTab}.
+ */
 export declare class TabStripClassComponent extends React_2.Component<TabStripProps, TabStripStateProps, {}> {
     /**
      * @hidden
@@ -5489,6 +5516,9 @@ declare interface TabStripStateProps {
     containerScrollPosition: StateScrollPosition;
 }
 
+/**
+ * Represents the TabStripTab component.
+ */
 export declare class TabStripTab extends React_2.Component<TabStripTabProps, {}> {
     /**
      * @hidden
@@ -5567,6 +5597,7 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
             rowSpan: number;
             colSpan: number;
         } & TilePosition)[];
+        activeHint: boolean;
     };
     /**
      * Gets the HTML element of the TileLayout component.
@@ -5829,6 +5860,7 @@ export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout>
  */
 export declare interface TileLayoutState {
     positions: TileStrictPosition[];
+    activeHint?: boolean;
 }
 
 /**

package/index.d.ts

@@ -233,7 +233,7 @@ export declare interface ActionSheetProps {
      * <ActionSheet subTitle="Subtitle text" />
      * ```
      */
-    subTitle?: string | React_2.ReactNode;
+    subTitle?: React_2.ReactNode;
     /**
      * Specifies the text that is rendered as title.
      *
@@ -242,7 +242,7 @@ export declare interface ActionSheetProps {
      * <ActionSheet title="Title text" />
      * ```
      */
-    title?: string | React_2.ReactNode;
+    title?: React_2.ReactNode;
     /**
      * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
      *
@@ -3329,6 +3329,9 @@ export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<a
 /**
  * Represents the [KendoReact Menu component]({% slug overview_menu %}).
  *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ *
  * @example
  * ```jsx
  * class App extends React.Component {
@@ -3436,6 +3439,12 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
 export declare interface MenuHandle extends Pick<MenuClassComponent, keyof MenuClassComponent> {
 }
 
+/**
+ * Represents the MenuItem component.
+ *
+ * @remarks
+ * Supported children components are: {@link MenuItem}.
+ */
 export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
     /**
      * @hidden
@@ -3773,6 +3782,12 @@ declare enum NavigationAction {
     Right = 6
 }
 
+/**
+ * Represents the [KendoReact PanelBar component]({% slug overview_panelbar %}).
+ *
+ * @remarks
+ * Supported children components are: {@link PanelBarItem}.
+ */
 export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarState> {
     /**
      * @hidden
@@ -3841,6 +3856,12 @@ export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarS
  */
 export declare type PanelBarExpandMode = 'single' | 'multiple';
 
+/**
+ * Represents the PanelBarItem component.
+ *
+ * @remarks
+ * Supported children components are: {@link PanelBarItem}.
+ */
 export declare class PanelBarItem extends React_2.PureComponent<PanelBarItemProps, PanelBarItemState> {
     /**
      * @hidden
@@ -4939,6 +4960,12 @@ export declare interface StepProps {
 /** @hidden */
 export declare const TabStrip: ForwardRefExoticComponent<TabStripProps & RefAttributes<any>>;
 
+/**
+ * Represents the TabStrip component.
+ *
+ * @remarks
+ * Supported children components are: {@link TabStripTab}.
+ */
 export declare class TabStripClassComponent extends React_2.Component<TabStripProps, TabStripStateProps, {}> {
     /**
      * @hidden
@@ -5489,6 +5516,9 @@ declare interface TabStripStateProps {
     containerScrollPosition: StateScrollPosition;
 }
 
+/**
+ * Represents the TabStripTab component.
+ */
 export declare class TabStripTab extends React_2.Component<TabStripTabProps, {}> {
     /**
      * @hidden
@@ -5567,6 +5597,7 @@ export declare class TileLayout extends React_2.Component<TileLayoutProps, TileL
             rowSpan: number;
             colSpan: number;
         } & TilePosition)[];
+        activeHint: boolean;
     };
     /**
      * Gets the HTML element of the TileLayout component.
@@ -5829,6 +5860,7 @@ export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout>
  */
 export declare interface TileLayoutState {
     positions: TileStrictPosition[];
+    activeHint?: boolean;
 }
 
 /**

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745495243,version:"11.0.0-develop.2",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1747639904,version:"11.0.0-develop.20",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1745495243,
-  version: "11.0.0-develop.2",
+  publishDate: 1747639904,
+  version: "11.0.0-develop.20",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "11.0.0-develop.2",
+  "version": "11.0.0-develop.20",
   "description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,13 +25,13 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-animation": "11.0.0-develop.2",
-    "@progress/kendo-react-buttons": "11.0.0-develop.2",
-    "@progress/kendo-react-common": "11.0.0-develop.2",
-    "@progress/kendo-react-intl": "11.0.0-develop.2",
-    "@progress/kendo-react-popup": "11.0.0-develop.2",
-    "@progress/kendo-react-progressbars": "11.0.0-develop.2",
+    "@progress/kendo-licensing": "^1.6.0",
+    "@progress/kendo-react-animation": "11.0.0-develop.20",
+    "@progress/kendo-react-buttons": "11.0.0-develop.20",
+    "@progress/kendo-react-common": "11.0.0-develop.20",
+    "@progress/kendo-react-intl": "11.0.0-develop.20",
+    "@progress/kendo-react-popup": "11.0.0-develop.20",
+    "@progress/kendo-react-progressbars": "11.0.0-develop.20",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -76,7 +76,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1745495243,
+      "publishDate": 1747639904,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/tilelayout/InternalTile.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),l=require("prop-types"),g=require("@progress/kendo-react-common"),b=require("./ResizeHandlers.js");function x(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const p=x(y),f=200,h=class h extends p.Component{constructor(){super(...arguments),this.state={rtl:!1},this.oldSize={},this.draggable=null,this.dragging=!1,this.resizing=!1,this.element=null,this.hintElement=null,this.ignoreDrag=!1,this.pressOffset={x:0,y:0},this.pressXY={x:0,y:0},this.currentTranslate={x:0,y:0},this.preventDataOps=void 0,this.handleResize=(t,e)=>{if(e.end){this.handleRelease();return}if(!this.element||!this.hintElement)return;const s=t.clientX,n=t.clientY;this.resizing=!0;const a=(e.direction!=="ns"?s-this.pressXY.x:0)*(this.state.rtl?-1:1),i=e.direction!=="ew"?n-this.pressXY.y:0;if(this.dragElement&&(this.state.rtl?this.dragElement.style.marginLeft=-a+"px":this.dragElement.style.marginRight=-a+"px",this.dragElement.style.height=`calc(100% + ${i}px)`),this.hintElement.classList.add("k-layout-item-hint-resize"),this.preventDataOps)return;let r=0,o=0;const d=this.element.getBoundingClientRect();a>d.width/this.props.defaultPosition.colSpan/3&&(r=1),a<-d.width/this.props.defaultPosition.colSpan/1.25&&(r=-1),i>d.height/this.props.defaultPosition.rowSpan/3&&(o=1),i<-d.height/this.props.defaultPosition.rowSpan/1.25&&(o=-1),(r!==0||o!==0)&&this.props.update(this.props.index,0,0,o,r)},this.handlePress=t=>{if(!this.dragElement)return;if(this.pressXY={x:t.event.clientX,y:t.event.clientY},this.ignoreDrag=!1,this.props.ignoreDrag&&this.props.ignoreDrag(t.event.originalEvent)){this.ignoreDrag=!0;return}this.element&&this.hintElement&&(this.element.style.zIndex="10",this.hintElement.style.display="block"),this.dragElement.classList.remove("k-cursor-grab"),this.dragElement.classList.add("k-cursor-grabbing");const e=this.dragElement.getBoundingClientRect();this.pressOffset={x:t.event.clientX-e.x,y:t.event.clientY-e.y}},this.handleDrag=t=>{if(this.ignoreDrag)return;const e=this.dragElement;if(t.event.originalEvent.defaultPrevented||!e)return;this.dragging=!0,t.event.originalEvent.preventDefault();const s=e.getBoundingClientRect();if(this.currentTranslate={x:t.event.clientX-s.x-this.pressOffset.x+this.currentTranslate.x,y:t.event.clientY-s.y-this.pressOffset.y+this.currentTranslate.y},e.style.transform=`translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`,e.style.transition="transform 0s",this.preventDataOps)return;let n=0,a=0;this.currentTranslate.y>.7*s.height/this.props.defaultPosition.rowSpan&&(a=1),this.currentTranslate.y<.7*-s.height/this.props.defaultPosition.rowSpan&&(a=-1),this.currentTranslate.x>.7*s.width/this.props.defaultPosition.colSpan&&(n=1),this.currentTranslate.x<.7*-s.width/this.props.defaultPosition.colSpan&&(n=-1),this.props.update(this.props.index,a,this.state.rtl?-n:n,0,0)},this.handleRelease=()=>{this.dragging=this.resizing=!1,this.currentTranslate={x:0,y:0},this.element&&this.hintElement&&(this.element.style.zIndex="1",this.hintElement.classList.remove("k-layout-item-hint-resize"),this.hintElement.style.display="none");const t=this.dragElement;t&&(t.style.transform="translate(0px, 0px)",t.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`,t.style.marginRight="0px",t.style.marginLeft="0px",t.style.height="100%",t.classList.remove("k-cursor-grabbing"),t.classList.add("k-cursor-grab"))}}get reorderable(){return this.props.reorderable!==void 0?this.props.reorderable:h.defaultProps.reorderable}get dragElement(){return this.draggable?this.draggable.element:void 0}componentDidMount(){this.element&&(getComputedStyle(this.element).direction==="rtl"&&this.setState({rtl:!0}),this.hintElement&&(this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"))}render(){g.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(this.preventDataOps),this.preventDataOps=window.setTimeout(()=>{this.preventDataOps=void 0},200));const t=this.props.defaultPosition,e=this.props.resizable!==void 0?this.props.resizable:h.defaultProps.resizable,s={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,outline:"none",order:t.order,display:"none",...this.props.hintStyle},n={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,order:t.order},a=p.createElement("div",{ref:i=>{this.draggable=i?{element:i}:null},className:g.classNames("k-tilelayout-item k-card",{"k-cursor-grab":this.reorderable},this.props.className),style:{height:"100%",...n,...this.props.style}},this.props.children,p.createElement(b.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,resizable:e,rtl:this.state.rtl}));return p.createElement("div",{ref:i=>{this.element=i},style:n},p.createElement("div",{ref:i=>{this.hintElement=i},style:{position:"absolute",...s},className:g.classNames("k-layout-item-hint",this.props.hintClassName)}),p.createElement(g.Draggable,{ref:i=>{this.draggable=i},onDrag:this.props.reorderable?this.handleDrag:void 0,onRelease:this.props.reorderable?this.handleRelease:void 0,onPress:this.props.reorderable?this.handlePress:void 0},a))}getSnapshotBeforeUpdate(t){return this.oldSize={},this.dragElement&&(this.oldSize=this.dragElement.getBoundingClientRect()),null}componentDidUpdate(t){const e=this.dragElement;if(!e)return;const s=e.getBoundingClientRect(),n=this.oldSize;if(this.resizing){const r=s.width-n.width;if(this.state.rtl){const u=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=u-r+"px"}else{const u=parseFloat(e.style.marginRight||"0");e.style.marginRight=u+r+"px"}this.pressXY.x+=this.state.rtl?-r:r;const o=s.height-n.height,d=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${d+o}px)`,this.pressXY.y+=o}const a=n.left-s.left,i=n.top-s.top;if(!(a===0&&i===0)){if(this.dragging){(t.defaultPosition.order!==this.props.defaultPosition.order||t.defaultPosition.col!==this.props.defaultPosition.col)&&(this.currentTranslate.x=0,this.currentTranslate.y=0,e.style.transform="");return}Math.abs(i)<15&&Math.abs(a)<15||requestAnimationFrame(()=>{const r=this.element;r&&(r.style.transform=`translate(${a}px, ${i}px)`,r.style.transition="transform 0s",requestAnimationFrame(()=>{r.style.transform="",r.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}}};h.propTypes={defaultPosition:l.object.isRequired,style:l.object,className:l.string,hintStyle:l.object,hintClassName:l.string,header:l.any,body:l.any,item:l.any,resizable:l.oneOf(["horizontal","vertical",!0,!1]),reorderable:l.bool},h.displayName="KendoTileLayoutItem",h.defaultProps={resizable:!0,reorderable:!0};let m=h;exports.InternalTile=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),a=require("prop-types"),u=require("@progress/kendo-react-common"),b=require("./ResizeHandlers.js");function E(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const e in c)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(c,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>c[e]})}}return t.default=c,Object.freeze(t)}const d=E(y),f=200,p=class p extends d.Component{constructor(){super(...arguments),this.state={rtl:!1,visibleHint:!1},this.oldSize={},this.draggable=null,this.dragging=!1,this.resizing=!1,this.element=null,this.hintElement=null,this.ignoreDrag=!1,this.pressOffset={x:0,y:0},this.pressXY={x:0,y:0},this.currentTranslate={x:0,y:0},this.preventDataOps=void 0,this.handleResize=(t,e)=>{if(e.end){this.handleRelease();return}if(!this.element||!this.hintElement)return;const s=t.clientX,l=t.clientY;this.resizing=!0;const r=(e.direction!=="ns"?s-this.pressXY.x:0)*(this.state.rtl?-1:1),i=e.direction!=="ew"?l-this.pressXY.y:0;if(this.dragElement&&(this.state.rtl?this.dragElement.style.marginLeft=-r+"px":this.dragElement.style.marginRight=-r+"px",this.dragElement.style.height=`calc(100% + ${i}px)`),this.hintElement.classList.add("k-layout-item-hint-resize"),this.preventDataOps)return;let n=0,o=0;const h=this.element.getBoundingClientRect();r>h.width/this.props.defaultPosition.colSpan/3&&(n=1),r<-h.width/this.props.defaultPosition.colSpan/1.25&&(n=-1),i>h.height/this.props.defaultPosition.rowSpan/3&&(o=1),i<-h.height/this.props.defaultPosition.rowSpan/1.25&&(o=-1),(n!==0||o!==0)&&this.props.update(this.props.index,0,0,o,n)},this.handlePress=t=>{if(!this.dragElement)return;if(this.pressXY={x:t.event.clientX,y:t.event.clientY},this.ignoreDrag=!1,this.props.ignoreDrag&&this.props.ignoreDrag(t.event.originalEvent)){this.ignoreDrag=!0;return}this.element&&(this.element.style.zIndex="10",this.setState({visibleHint:!0})),this.dragElement.classList.remove("k-cursor-move"),this.dragElement.classList.add("k-cursor-grabbing");const e=this.dragElement.getBoundingClientRect();this.pressOffset={x:t.event.clientX-e.x,y:t.event.clientY-e.y},this.props.onPress()},this.handleDrag=t=>{var n;if(this.ignoreDrag)return;const e=this.dragElement;if(t.event.originalEvent.defaultPrevented||!e)return;this.dragging=!0,t.event.originalEvent.preventDefault();const s=e.getBoundingClientRect();if(this.currentTranslate={x:t.event.clientX-s.x-this.pressOffset.x+this.currentTranslate.x,y:t.event.clientY-s.y-this.pressOffset.y+this.currentTranslate.y},e.style.transform=`translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`,e.style.transition="transform 0s",this.preventDataOps)return;let l=0,r=0;this.currentTranslate.y>.7*s.height/this.props.defaultPosition.rowSpan&&(r=1),this.currentTranslate.y<.7*-s.height/this.props.defaultPosition.rowSpan&&(r=-1),this.currentTranslate.x>.7*s.width/this.props.defaultPosition.colSpan&&(l=1),this.currentTranslate.x<.7*-s.width/this.props.defaultPosition.colSpan&&(l=-1),this.props.update(this.props.index,r,this.state.rtl?-l:l,0,0);const i=(n=this.element)==null?void 0:n.closest(".k-tilelayout");if(i&&this.hintElement){const o=i.getBoundingClientRect(),h=u.getScrollbarWidth()||50;t.event.clientX<o.left-h||t.event.clientX>o.right-h||t.event.clientY<o.top||t.event.clientY>o.bottom?this.hintElement.style.display="none":this.hintElement.style.display="block"}},this.handleRelease=()=>{this.dragging=this.resizing=!1,this.currentTranslate={x:0,y:0},this.element&&this.hintElement&&(this.element.style.zIndex="1",this.hintElement.classList.remove("k-layout-item-hint-resize"),this.setState({visibleHint:!1}));const t=this.dragElement;t&&(t.style.transform="translate(0px, 0px)",t.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`,t.style.marginRight="0px",t.style.marginLeft="0px",t.style.height="100%",t.classList.remove("k-cursor-grabbing"),t.classList.add("k-cursor-move")),this.props.onRelease()},this.handleMouseDown=()=>{this.setInitialHintPosition()},this.handleMouseUp=()=>{setTimeout(()=>{this.setInitialHintPosition()},100)},this.calcNewHintPosition=()=>{if(!this.dragElement||!this.hintElement)return;const t=this.dragElement.getBoundingClientRect(),e=t.top+this.currentTranslate.y,s=t.left+this.currentTranslate.x;this.hintElement.style.top=`${e}px`,this.hintElement.style.left=`${s}px`,this.hintElement.style.display="block"}}get reorderable(){return this.props.reorderable!==void 0?this.props.reorderable:p.defaultProps.reorderable}get dragElement(){return this.draggable?this.draggable.element:void 0}componentDidMount(){this.element&&(getComputedStyle(this.element).direction==="rtl"&&this.setState({rtl:!0}),this.hintElement&&(this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"))}render(){u.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(this.preventDataOps),this.preventDataOps=window.setTimeout(()=>{this.preventDataOps=void 0},200));const t=this.props.defaultPosition,e=this.props.resizable!==void 0?this.props.resizable:p.defaultProps.resizable,s={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,outline:"none",order:t.order,display:"block",...this.props.hintStyle},l={gridColumnStart:t.col,gridColumnEnd:`span ${t.colSpan}`,gridRowStart:t.row,gridRowEnd:`span ${t.rowSpan}`,order:t.order},r=d.createElement("div",{ref:i=>{this.draggable=i?{element:i}:null},role:"listitem",tabIndex:0,"aria-labelledby":typeof this.props.header=="string"?this.props.header:`tile-${this.props.index}`,"aria-keyshortcuts":"Enter",className:u.classNames("k-tilelayout-item k-card",{"k-cursor-move":this.reorderable},this.props.className),style:{height:"100%",...l,...this.props.style},onMouseDown:this.handleMouseDown,onMouseUp:this.handleMouseUp},this.props.children,d.createElement(b.ResizeHandlers,{onPress:this.handlePress,onResize:this.handleResize,resizable:e,rtl:this.state.rtl}));return d.createElement(d.Fragment,null,this.state.visibleHint&&d.createElement("div",{ref:i=>{this.hintElement=i},style:{position:"fixed",...s},className:u.classNames("k-layout-item-hint",this.props.hintClassName)}),d.createElement(u.Draggable,{ref:i=>{this.draggable=i,this.element=i?i.element:null},onDrag:this.props.reorderable?this.handleDrag:void 0,onRelease:this.props.reorderable?this.handleRelease:void 0,onPress:this.props.reorderable?this.handlePress:void 0},r))}getSnapshotBeforeUpdate(t){return this.oldSize={},this.dragElement&&(this.oldSize=this.dragElement.getBoundingClientRect()),null}setInitialHintPosition(){if(this.element&&this.hintElement){const t=this.element.getBoundingClientRect();this.hintElement.style.top=t.top+"px",this.hintElement.style.left=t.left+"px",this.hintElement.style.height=this.element.offsetHeight+"px",this.hintElement.style.width=this.element.offsetWidth+"px"}}componentDidUpdate(t){const e=this.dragElement;if(!e)return;const s=e.getBoundingClientRect(),l=this.oldSize;if(this.resizing){const n=s.width-l.width;if(this.state.rtl){const g=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=g-n+"px"}else{const g=parseFloat(e.style.marginRight||"0");e.style.marginRight=g+n+"px"}this.pressXY.x+=this.state.rtl?-n:n;const o=s.height-l.height,h=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${h+o}px)`,this.pressXY.y+=o}const r=l.left-s.left,i=l.top-s.top;if(!(r===0&&i===0)){if(this.dragging){(t.defaultPosition.order!==this.props.defaultPosition.order||t.defaultPosition.col!==this.props.defaultPosition.col)&&(this.currentTranslate.x=0,this.currentTranslate.y=0,e.style.transform="",this.calcNewHintPosition());return}Math.abs(i)<15&&Math.abs(r)<15||requestAnimationFrame(()=>{const n=this.element;n&&(n.style.transform=`translate(${r}px, ${i}px)`,n.style.transition="transform 0s",requestAnimationFrame(()=>{n.style.transform="",n.style.transition=`transform ${f}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))})}}};p.propTypes={defaultPosition:a.object.isRequired,style:a.object,className:a.string,hintStyle:a.object,hintClassName:a.string,header:a.any,body:a.any,item:a.any,resizable:a.oneOf(["horizontal","vertical",!0,!1]),reorderable:a.bool},p.displayName="KendoTileLayoutItem",p.defaultProps={resizable:!0,reorderable:!0};let m=p;exports.InternalTile=m;

package/tilelayout/InternalTile.mjs

@@ -5,14 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as p from "react";
-import l from "prop-types";
-import { canUseDOM as u, classNames as g, Draggable as y } from "@progress/kendo-react-common";
-import { ResizeHandlers as b } from "./ResizeHandlers.mjs";
-const m = 200, h = class h extends p.Component {
+import * as d from "react";
+import a from "prop-types";
+import { getScrollbarWidth as f, canUseDOM as y, classNames as m, Draggable as x } from "@progress/kendo-react-common";
+import { ResizeHandlers as E } from "./ResizeHandlers.mjs";
+const g = 200, p = class p extends d.Component {
   constructor() {
     super(...arguments), this.state = {
-      rtl: !1
+      rtl: !1,
+      visibleHint: !1
     }, this.oldSize = {}, this.draggable = null, this.dragging = !1, this.resizing = !1, this.element = null, this.hintElement = null, this.ignoreDrag = !1, this.pressOffset = { x: 0, y: 0 }, this.pressXY = { x: 0, y: 0 }, this.currentTranslate = { x: 0, y: 0 }, this.preventDataOps = void 0, this.handleResize = (t, e) => {
       if (e.end) {
         this.handleRelease();
@@ -20,14 +21,14 @@ const m = 200, h = class h extends p.Component {
       }
       if (!this.element || !this.hintElement)
         return;
-      const i = t.clientX, n = t.clientY;
+      const n = t.clientX, l = t.clientY;
       this.resizing = !0;
-      const a = (e.direction !== "ns" ? i - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1), s = e.direction !== "ew" ? n - this.pressXY.y : 0;
-      if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -a + "px" : this.dragElement.style.marginRight = -a + "px", this.dragElement.style.height = `calc(100% + ${s}px)`), this.hintElement.classList.add("k-layout-item-hint-resize"), this.preventDataOps)
+      const r = (e.direction !== "ns" ? n - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1), s = e.direction !== "ew" ? l - this.pressXY.y : 0;
+      if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -r + "px" : this.dragElement.style.marginRight = -r + "px", this.dragElement.style.height = `calc(100% + ${s}px)`), this.hintElement.classList.add("k-layout-item-hint-resize"), this.preventDataOps)
         return;
-      let r = 0, o = 0;
-      const d = this.element.getBoundingClientRect();
-      a > d.width / this.props.defaultPosition.colSpan / 3 && (r = 1), a < -d.width / this.props.defaultPosition.colSpan / 1.25 && (r = -1), s > d.height / this.props.defaultPosition.rowSpan / 3 && (o = 1), s < -d.height / this.props.defaultPosition.rowSpan / 1.25 && (o = -1), (r !== 0 || o !== 0) && this.props.update(this.props.index, 0, 0, o, r);
+      let i = 0, o = 0;
+      const h = this.element.getBoundingClientRect();
+      r > h.width / this.props.defaultPosition.colSpan / 3 && (i = 1), r < -h.width / this.props.defaultPosition.colSpan / 1.25 && (i = -1), s > h.height / this.props.defaultPosition.rowSpan / 3 && (o = 1), s < -h.height / this.props.defaultPosition.rowSpan / 1.25 && (o = -1), (i !== 0 || o !== 0) && this.props.update(this.props.index, 0, 0, o, i);
     }, this.handlePress = (t) => {
       if (!this.dragElement)
         return;
@@ -38,35 +39,52 @@ const m = 200, h = class h extends p.Component {
         this.ignoreDrag = !0;
         return;
       }
-      this.element && this.hintElement && (this.element.style.zIndex = "10", this.hintElement.style.display = "block"), this.dragElement.classList.remove("k-cursor-grab"), this.dragElement.classList.add("k-cursor-grabbing");
+      this.element && (this.element.style.zIndex = "10", this.setState({ visibleHint: !0 })), this.dragElement.classList.remove("k-cursor-move"), this.dragElement.classList.add("k-cursor-grabbing");
       const e = this.dragElement.getBoundingClientRect();
       this.pressOffset = {
         x: t.event.clientX - e.x,
         y: t.event.clientY - e.y
-      };
+      }, this.props.onPress();
     }, this.handleDrag = (t) => {
+      var i;
       if (this.ignoreDrag)
         return;
       const e = this.dragElement;
       if (t.event.originalEvent.defaultPrevented || !e)
         return;
       this.dragging = !0, t.event.originalEvent.preventDefault();
-      const i = e.getBoundingClientRect();
+      const n = e.getBoundingClientRect();
       if (this.currentTranslate = {
-        x: t.event.clientX - i.x - this.pressOffset.x + this.currentTranslate.x,
-        y: t.event.clientY - i.y - this.pressOffset.y + this.currentTranslate.y
+        x: t.event.clientX - n.x - this.pressOffset.x + this.currentTranslate.x,
+        y: t.event.clientY - n.y - this.pressOffset.y + this.currentTranslate.y
       }, e.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`, e.style.transition = "transform 0s", this.preventDataOps)
         return;
-      let n = 0, a = 0;
-      this.currentTranslate.y > 0.7 * i.height / this.props.defaultPosition.rowSpan && (a = 1), this.currentTranslate.y < 0.7 * -i.height / this.props.defaultPosition.rowSpan && (a = -1), this.currentTranslate.x > 0.7 * i.width / this.props.defaultPosition.colSpan && (n = 1), this.currentTranslate.x < 0.7 * -i.width / this.props.defaultPosition.colSpan && (n = -1), this.props.update(this.props.index, a, this.state.rtl ? -n : n, 0, 0);
+      let l = 0, r = 0;
+      this.currentTranslate.y > 0.7 * n.height / this.props.defaultPosition.rowSpan && (r = 1), this.currentTranslate.y < 0.7 * -n.height / this.props.defaultPosition.rowSpan && (r = -1), this.currentTranslate.x > 0.7 * n.width / this.props.defaultPosition.colSpan && (l = 1), this.currentTranslate.x < 0.7 * -n.width / this.props.defaultPosition.colSpan && (l = -1), this.props.update(this.props.index, r, this.state.rtl ? -l : l, 0, 0);
+      const s = (i = this.element) == null ? void 0 : i.closest(".k-tilelayout");
+      if (s && this.hintElement) {
+        const o = s.getBoundingClientRect(), h = f() || 50;
+        t.event.clientX < o.left - h || t.event.clientX > o.right - h || t.event.clientY < o.top || t.event.clientY > o.bottom ? this.hintElement.style.display = "none" : this.hintElement.style.display = "block";
+      }
     }, this.handleRelease = () => {
-      this.dragging = this.resizing = !1, this.currentTranslate = { x: 0, y: 0 }, this.element && this.hintElement && (this.element.style.zIndex = "1", this.hintElement.classList.remove("k-layout-item-hint-resize"), this.hintElement.style.display = "none");
+      this.dragging = this.resizing = !1, this.currentTranslate = { x: 0, y: 0 }, this.element && this.hintElement && (this.element.style.zIndex = "1", this.hintElement.classList.remove("k-layout-item-hint-resize"), this.setState({ visibleHint: !1 }));
       const t = this.dragElement;
-      t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${m}ms cubic-bezier(0.2, 0, 0, 1) 0s`, t.style.marginRight = "0px", t.style.marginLeft = "0px", t.style.height = "100%", t.classList.remove("k-cursor-grabbing"), t.classList.add("k-cursor-grab"));
+      t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${g}ms cubic-bezier(0.2, 0, 0, 1) 0s`, t.style.marginRight = "0px", t.style.marginLeft = "0px", t.style.height = "100%", t.classList.remove("k-cursor-grabbing"), t.classList.add("k-cursor-move")), this.props.onRelease();
+    }, this.handleMouseDown = () => {
+      this.setInitialHintPosition();
+    }, this.handleMouseUp = () => {
+      setTimeout(() => {
+        this.setInitialHintPosition();
+      }, 100);
+    }, this.calcNewHintPosition = () => {
+      if (!this.dragElement || !this.hintElement)
+        return;
+      const t = this.dragElement.getBoundingClientRect(), e = t.top + this.currentTranslate.y, n = t.left + this.currentTranslate.x;
+      this.hintElement.style.top = `${e}px`, this.hintElement.style.left = `${n}px`, this.hintElement.style.display = "block";
     };
   }
   get reorderable() {
-    return this.props.reorderable !== void 0 ? this.props.reorderable : h.defaultProps.reorderable;
+    return this.props.reorderable !== void 0 ? this.props.reorderable : p.defaultProps.reorderable;
   }
   get dragElement() {
     return this.draggable ? this.draggable.element : void 0;
@@ -77,40 +95,46 @@ const m = 200, h = class h extends p.Component {
     }), this.hintElement && (this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px"));
   }
   render() {
-    u && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), this.preventDataOps = window.setTimeout(() => {
+    y && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), this.preventDataOps = window.setTimeout(() => {
       this.preventDataOps = void 0;
     }, 200));
-    const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable : h.defaultProps.resizable, i = {
+    const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable : p.defaultProps.resizable, n = {
       gridColumnStart: t.col,
       gridColumnEnd: `span ${t.colSpan}`,
       gridRowStart: t.row,
       gridRowEnd: `span ${t.rowSpan}`,
       outline: "none",
       order: t.order,
-      display: "none",
+      display: "block",
       ...this.props.hintStyle
-    }, n = {
+    }, l = {
       gridColumnStart: t.col,
       gridColumnEnd: `span ${t.colSpan}`,
       gridRowStart: t.row,
       gridRowEnd: `span ${t.rowSpan}`,
       order: t.order
-    }, a = /* @__PURE__ */ p.createElement(
+    }, r = /* @__PURE__ */ d.createElement(
       "div",
       {
         ref: (s) => {
           this.draggable = s ? { element: s } : null;
         },
-        className: g(
+        role: "listitem",
+        tabIndex: 0,
+        "aria-labelledby": typeof this.props.header == "string" ? this.props.header : `tile-${this.props.index}`,
+        "aria-keyshortcuts": "Enter",
+        className: m(
           "k-tilelayout-item k-card",
-          { "k-cursor-grab": this.reorderable },
+          { "k-cursor-move": this.reorderable },
           this.props.className
         ),
-        style: { height: "100%", ...n, ...this.props.style }
+        style: { height: "100%", ...l, ...this.props.style },
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp
       },
       this.props.children,
-      /* @__PURE__ */ p.createElement(
-        b,
+      /* @__PURE__ */ d.createElement(
+        E,
         {
           onPress: this.handlePress,
           onResize: this.handleResize,
@@ -119,37 +143,27 @@ const m = 200, h = class h extends p.Component {
         }
       )
     );
-    return /* @__PURE__ */ p.createElement(
+    return /* @__PURE__ */ d.createElement(d.Fragment, null, this.state.visibleHint && /* @__PURE__ */ d.createElement(
       "div",
       {
         ref: (s) => {
-          this.element = s;
+          this.hintElement = s;
         },
-        style: n
-      },
-      /* @__PURE__ */ p.createElement(
-        "div",
-        {
-          ref: (s) => {
-            this.hintElement = s;
-          },
-          style: { position: "absolute", ...i },
-          className: g("k-layout-item-hint", this.props.hintClassName)
-        }
-      ),
-      /* @__PURE__ */ p.createElement(
-        y,
-        {
-          ref: (s) => {
-            this.draggable = s;
-          },
-          onDrag: this.props.reorderable ? this.handleDrag : void 0,
-          onRelease: this.props.reorderable ? this.handleRelease : void 0,
-          onPress: this.props.reorderable ? this.handlePress : void 0
+        style: { position: "fixed", ...n },
+        className: m("k-layout-item-hint", this.props.hintClassName)
+      }
+    ), /* @__PURE__ */ d.createElement(
+      x,
+      {
+        ref: (s) => {
+          this.draggable = s, this.element = s ? s.element : null;
         },
-        a
-      )
-    );
+        onDrag: this.props.reorderable ? this.handleDrag : void 0,
+        onRelease: this.props.reorderable ? this.handleRelease : void 0,
+        onPress: this.props.reorderable ? this.handlePress : void 0
+      },
+      r
+    ));
   }
   /**
    * @hidden
@@ -157,6 +171,15 @@ const m = 200, h = class h extends p.Component {
   getSnapshotBeforeUpdate(t) {
     return this.oldSize = {}, this.dragElement && (this.oldSize = this.dragElement.getBoundingClientRect()), null;
   }
+  /**
+   * @hidden
+   */
+  setInitialHintPosition() {
+    if (this.element && this.hintElement) {
+      const t = this.element.getBoundingClientRect();
+      this.hintElement.style.top = t.top + "px", this.hintElement.style.left = t.left + "px", this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px";
+    }
+  }
   /**
    * @hidden
    */
@@ -164,51 +187,51 @@ const m = 200, h = class h extends p.Component {
     const e = this.dragElement;
     if (!e)
       return;
-    const i = e.getBoundingClientRect(), n = this.oldSize;
+    const n = e.getBoundingClientRect(), l = this.oldSize;
     if (this.resizing) {
-      const r = i.width - n.width;
+      const i = n.width - l.width;
       if (this.state.rtl) {
         const c = parseFloat(e.style.marginLeft || "0");
-        e.style.marginLeft = c - r + "px";
+        e.style.marginLeft = c - i + "px";
       } else {
         const c = parseFloat(e.style.marginRight || "0");
-        e.style.marginRight = c + r + "px";
+        e.style.marginRight = c + i + "px";
       }
-      this.pressXY.x += this.state.rtl ? -r : r;
-      const o = i.height - n.height, d = parseFloat(e.style.height.substring(12));
-      e.style.height = `calc(100% + ${d + o}px)`, this.pressXY.y += o;
+      this.pressXY.x += this.state.rtl ? -i : i;
+      const o = n.height - l.height, h = parseFloat(e.style.height.substring(12));
+      e.style.height = `calc(100% + ${h + o}px)`, this.pressXY.y += o;
     }
-    const a = n.left - i.left, s = n.top - i.top;
-    if (!(a === 0 && s === 0)) {
+    const r = l.left - n.left, s = l.top - n.top;
+    if (!(r === 0 && s === 0)) {
       if (this.dragging) {
-        (t.defaultPosition.order !== this.props.defaultPosition.order || t.defaultPosition.col !== this.props.defaultPosition.col) && (this.currentTranslate.x = 0, this.currentTranslate.y = 0, e.style.transform = "");
+        (t.defaultPosition.order !== this.props.defaultPosition.order || t.defaultPosition.col !== this.props.defaultPosition.col) && (this.currentTranslate.x = 0, this.currentTranslate.y = 0, e.style.transform = "", this.calcNewHintPosition());
         return;
       }
-      Math.abs(s) < 15 && Math.abs(a) < 15 || requestAnimationFrame(() => {
-        const r = this.element;
-        r && (r.style.transform = `translate(${a}px, ${s}px)`, r.style.transition = "transform 0s", requestAnimationFrame(() => {
-          r.style.transform = "", r.style.transition = `transform ${m}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
+      Math.abs(s) < 15 && Math.abs(r) < 15 || requestAnimationFrame(() => {
+        const i = this.element;
+        i && (i.style.transform = `translate(${r}px, ${s}px)`, i.style.transition = "transform 0s", requestAnimationFrame(() => {
+          i.style.transform = "", i.style.transition = `transform ${g}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
         }));
       });
     }
   }
 };
-h.propTypes = {
-  defaultPosition: l.object.isRequired,
-  style: l.object,
-  className: l.string,
-  hintStyle: l.object,
-  hintClassName: l.string,
-  header: l.any,
-  body: l.any,
-  item: l.any,
-  resizable: l.oneOf(["horizontal", "vertical", !0, !1]),
-  reorderable: l.bool
-}, h.displayName = "KendoTileLayoutItem", h.defaultProps = {
+p.propTypes = {
+  defaultPosition: a.object.isRequired,
+  style: a.object,
+  className: a.string,
+  hintStyle: a.object,
+  hintClassName: a.string,
+  header: a.any,
+  body: a.any,
+  item: a.any,
+  resizable: a.oneOf(["horizontal", "vertical", !0, !1]),
+  reorderable: a.bool
+}, p.displayName = "KendoTileLayoutItem", p.defaultProps = {
   resizable: !0,
   reorderable: !0
 };
-let f = h;
+let u = p;
 export {
-  f as InternalTile
+  u as InternalTile
 };