@progress/kendo-react-layout 9.5.0-develop.6 → 10.0.0-develop.1

package/tabstrip/TabStrip.mjs

@@ -5,22 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as c from "react";
+import * as d from "react";
 import r from "prop-types";
-import { TabStripNavigation as m } from "./TabStripNavigation.mjs";
-import { TabStripContent as g } from "./TabStripContent.mjs";
-import { validatePackage as v, shouldShowValidationUI as y, Navigation as k, classNames as x, kendoThemeMaps as I, WatermarkOverlay as P } from "@progress/kendo-react-common";
-import { packageMetadata as b } from "../package-metadata.mjs";
-const p = class p extends c.Component {
+import { TabStripNavigation as f } from "./TabStripNavigation.mjs";
+import { TabStripContent as S } from "./TabStripContent.mjs";
+import { Navigation as g, classNames as v, kendoThemeMaps as x } from "@progress/kendo-react-common";
+const p = class p extends d.Component {
   constructor(l) {
-    super(l), this.tabStripRef = c.createRef(), this.itemsNavRef = c.createRef(), this.showLicenseWatermark = !1, this.onScroll = () => {
+    super(l), this.tabStripRef = d.createRef(), this.itemsNavRef = d.createRef(), this.onScroll = () => {
       const i = this.horizontalScroll(), o = this.itemsNavRef.current;
       if (!o)
         return;
-      const e = o.scrollLeft, t = o.clientWidth, n = o.scrollWidth, s = o.scrollTop, a = o.scrollHeight, d = o.clientHeight;
-      let h = null;
-      const S = i ? n > t : a > d, f = this.props.dir === "rtl";
-      S ? i ? e + t === n || (f && t - e) === n ? h = "end" : e === 0 || f && -e === 0 ? h = "start" : e > 0 && e + t < n || -e > 0 && t - e < n ? h = "middle" : h = null : a - (s + d) === 0 ? h = "bottom" : s === 0 ? h = "top" : s > 0 && a - (s + d) > 0 ? h = "middle" : h = null : h = null, this.setState({ containerScrollPosition: h });
+      const e = o.scrollLeft, t = o.clientWidth, n = o.scrollWidth, s = o.scrollTop, c = o.scrollHeight, h = o.clientHeight;
+      let a = null;
+      const m = i ? n > t : c > h, b = this.props.dir === "rtl";
+      m ? i ? e + t === n || (b && t - e) === n ? a = "end" : e === 0 || b && -e === 0 ? a = "start" : e > 0 && e + t < n || -e > 0 && t - e < n ? a = "middle" : a = null : c - (s + h) === 0 ? a = "bottom" : s === 0 ? a = "top" : s > 0 && c - (s + h) > 0 ? a = "middle" : a = null : a = null, this.setState({ containerScrollPosition: a });
     }, this.handleResize = () => {
       this.onScroll();
     }, this.onSelect = (i) => {
@@ -33,11 +32,11 @@ const p = class p extends c.Component {
       const o = this.children();
       o && o[i].props.disabled || this.onSelect(i);
     }, this.renderContent = (i) => {
-      const { selected: o, children: e, tabContentStyle: t } = i, n = c.Children.count(e);
-      return o < n && o > -1 ? /* @__PURE__ */ c.createElement(g, { index: o, ...i, style: t }) : null;
-    }, v(b), this.showLicenseWatermark = y(b), this.state = {
+      const { selected: o, children: e, tabContentStyle: t } = i, n = d.Children.count(e);
+      return o < n && o > -1 ? /* @__PURE__ */ d.createElement(S, { index: o, ...i, style: t }) : null;
+    }, this.state = {
       containerScrollPosition: null
-    }, this.itemsNavRef = c.createRef();
+    }, this.itemsNavRef = d.createRef();
   }
   get contentPanelId() {
     return this.props.id + "-content-panel-id";
@@ -49,7 +48,7 @@ const p = class p extends c.Component {
   componentDidMount() {
     var o;
     const l = this.tabStripRef.current, i = l && getComputedStyle(l).direction === "rtl" || !1;
-    l && (this.navigation = new k({
+    l && (this.navigation = new g({
       tabIndex: 0,
       root: this.tabStripRef,
       rovingTabIndex: !0,
@@ -59,23 +58,23 @@ const p = class p extends c.Component {
         keydown: {
           ArrowLeft: (e, t, n) => {
             n.preventDefault();
-            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1, d = s !== t.elements.length - 1 ? s + 1 : 0;
-            i ? (t.focusNext(e), this.onKeyboardSelect(d)) : (t.focusPrevious(e), this.onKeyboardSelect(a));
+            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
+            i ? (t.focusNext(e), this.onKeyboardSelect(h)) : (t.focusPrevious(e), this.onKeyboardSelect(c));
           },
           ArrowRight: (e, t, n) => {
             n.preventDefault();
-            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1, d = s !== t.elements.length - 1 ? s + 1 : 0;
-            i ? (t.focusPrevious(e), this.onKeyboardSelect(a)) : (t.focusNext(e), this.onKeyboardSelect(d));
+            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
+            i ? (t.focusPrevious(e), this.onKeyboardSelect(c)) : (t.focusNext(e), this.onKeyboardSelect(h));
           },
           ArrowDown: (e, t, n) => {
             n.preventDefault();
-            const s = t.elements.indexOf(e), a = s !== t.elements.length - 1 ? s + 1 : 0;
-            t.focusNext(e), this.onKeyboardSelect(a);
+            const s = t.elements.indexOf(e), c = s !== t.elements.length - 1 ? s + 1 : 0;
+            t.focusNext(e), this.onKeyboardSelect(c);
           },
           ArrowUp: (e, t, n) => {
             n.preventDefault();
-            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1;
-            t.focusPrevious(e), this.onKeyboardSelect(a);
+            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1;
+            t.focusPrevious(e), this.onKeyboardSelect(c);
           },
           Home: (e, t, n) => {
             n.preventDefault(), t.focusElement(t.first, e), this.onKeyboardSelect(0);
@@ -85,7 +84,7 @@ const p = class p extends c.Component {
           }
         }
       }
-    }), (o = this.navigation) == null || o.initializeRovingTab(this.props.selected), this.onScroll(), this.resizeObserver = new ResizeObserver(() => this.onScroll()), this.tabStripRef.current && this.resizeObserver.observe(this.tabStripRef.current));
+    }), (o = this.navigation) == null || o.initializeRovingTab(this.props.selected), this.onScroll(), this.resizeObserver = window.ResizeObserver && new ResizeObserver(() => this.onScroll()), this.tabStripRef.current && this.resizeObserver && this.resizeObserver.observe(this.tabStripRef.current));
   }
   /** @hidden */
   componentWillUnmount() {
@@ -111,10 +110,10 @@ const p = class p extends c.Component {
       onScroll: this.onScroll,
       containerScrollPosition: this.state.containerScrollPosition,
       scrollButtons: this.props.scrollButtons === "hidden" || this.state.containerScrollPosition === null && this.props.scrollButtons === "auto" ? "hidden" : "visible"
-    }, { scrollable: i, scrollButtons: o, size: e, tabPosition: t, tabIndex: n } = l, s = t === "bottom", a = x(
+    }, { scrollable: i, scrollButtons: o, size: e, tabPosition: t, tabIndex: n } = l, s = t === "bottom", c = v(
       "k-tabstrip k-pos-relative",
       {
-        [`k-tabstrip-${I.sizeMap[e] || e}`]: e,
+        [`k-tabstrip-${x.sizeMap[e] || e}`]: e,
         "k-tabstrip-left": t === "left",
         "k-tabstrip-right": t === "right",
         "k-tabstrip-bottom": t === "bottom",
@@ -126,25 +125,24 @@ const p = class p extends c.Component {
       },
       this.props.className
     );
-    return /* @__PURE__ */ c.createElement(
+    return /* @__PURE__ */ d.createElement(
       "div",
       {
         id: this.props.id,
         ref: this.tabStripRef,
         dir: this.props.dir,
-        className: a,
+        className: c,
         style: this.props.style,
         onScroll: this.onScroll,
         onResize: this.handleResize
       },
-      !s && /* @__PURE__ */ c.createElement(m, { ...l, tabIndex: n }),
+      !s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n }),
       this.renderContent(l),
-      s && /* @__PURE__ */ c.createElement(m, { ...l, tabIndex: n }),
-      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(P, null)
+      s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n })
     );
   }
   children() {
-    return c.Children.toArray(this.props.children).filter((l) => l);
+    return d.Children.toArray(this.props.children).filter((l) => l);
   }
 };
 p.propTypes = {

package/tilelayout/TileLayout.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 S=require("react"),t=require("prop-types"),u=require("@progress/kendo-react-common"),N=require("./InternalTile.js"),k=require("../package-metadata.js");function O(d){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const a in d)if(a!=="default"){const s=Object.getOwnPropertyDescriptor(d,a);Object.defineProperty(n,a,s.get?s:{enumerable:!0,get:()=>d[a]})}}return n.default=d,Object.freeze(n)}const i=O(S),j={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},f=class f extends i.Component{constructor(n){super(n),this._element=null,this.state={positions:(this.props.items||[]).map((a,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},a.defaultPosition))},this.showLicenseWatermark=!1,this.focus=()=>{this._element&&this._element.focus()},this.update=(a,s,o,l=0,h=0)=>{if(s===0&&o===0&&!h&&!l)return;let c=!1;const m=this.state.positions.map(y=>Object.assign({},y)),r=m[a],g=m.find(y=>y.order===r.order+s);g&&g!==r&&(r.order+=s,g.order+=-s,c=!0);const e=r.col+o;o!==0&&e>=1&&e+r.colSpan<=(this.props.columns||3)+1&&(r.col=e,c=!0);const p=r.colSpan+h;h&&p>=1&&p+r.col<=(this.props.columns||3)+1&&(r.colSpan=p,c=!0);const w=r.rowSpan+l;l&&w>=1&&(r.rowSpan=w,c=!0),c&&(this.setState({positions:m}),u.dispatchEvent(this.props.onReposition,{},this,{value:m}))},u.validatePackage(k.packageMetadata),this.showLicenseWatermark=u.shouldShowValidationUI(k.packageMetadata)}get element(){return this._element}static getDerivedStateFromProps(n,a){return n.positions?{positions:n.positions.map((s,o)=>Object.assign({order:o,rowSpan:1,colSpan:1},s))}:n.items&&(!a.positions||n.items.length!==a.positions.length)?{positions:n.items.map((s,o)=>Object.assign({order:o,rowSpan:1,colSpan:1},s.defaultPosition))}:null}render(){const{className:n,columns:a=3,columnWidth:s="1fr",gap:o,rowHeight:l="1fr",style:h,autoFlow:c="column",items:m=[]}=this.props,r=o?`${typeof o.rows=="number"?o.rows+"px":o.rows} ${typeof o.columns=="number"?o.columns+"px":o.columns}`:16,g={gridTemplateColumns:`repeat(${a}, minmax(0px, ${typeof s=="number"?s+"px":s}))`,gridAutoRows:`minmax(0px, ${typeof l=="number"?l+"px":l})`,gap:r,padding:r,...h};return i.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:u.classNames("k-tilelayout k-pos-relative",j[c],n),style:g,id:this.props.id,children:m.map((e,p)=>i.createElement(i.Fragment,{key:this.props.dataItemKey?u.getter(this.props.dataItemKey)(e):p},i.createElement(N.InternalTile,{update:this.update,defaultPosition:this.state.positions[p],index:p,resizable:e.resizable,reorderable:e.reorderable,style:e.style,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag},e.item?e.item:i.createElement(i.Fragment,null,i.createElement("div",{className:"k-tilelayout-item-header k-card-header"},i.isValidElement(e.header)?e.header:i.createElement("h5",{className:"k-card-title"},e.header)),i.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))),this.showLicenseWatermark&&i.createElement(u.WatermarkOverlay,null)))})}};f.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func},f.displayName="KendoTileLayout";let b=f;exports.TileLayout=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),t=require("prop-types"),y=require("@progress/kendo-react-common"),S=require("./InternalTile.js");function k(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const s in d)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(d,s);Object.defineProperty(o,s,n.get?n:{enumerable:!0,get:()=>d[s]})}}return o.default=d,Object.freeze(o)}const a=k(w),N={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},h=class h extends a.Component{constructor(){super(...arguments),this._element=null,this.state={positions:(this.props.items||[]).map((o,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},o.defaultPosition))},this.focus=()=>{this._element&&this._element.focus()},this.update=(o,s,n,r=0,l=0)=>{if(s===0&&n===0&&!l&&!r)return;let c=!1;const p=this.state.positions.map(f=>Object.assign({},f)),i=p[o],m=p.find(f=>f.order===i.order+s);m&&m!==i&&(i.order+=s,m.order+=-s,c=!0);const g=i.col+n;n!==0&&g>=1&&g+i.colSpan<=(this.props.columns||3)+1&&(i.col=g,c=!0);const e=i.colSpan+l;l&&e>=1&&e+i.col<=(this.props.columns||3)+1&&(i.colSpan=e,c=!0);const u=i.rowSpan+r;r&&u>=1&&(i.rowSpan=u,c=!0),c&&(this.setState({positions:p}),y.dispatchEvent(this.props.onReposition,{},this,{value:p}))}}get element(){return this._element}static getDerivedStateFromProps(o,s){return o.positions?{positions:o.positions.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n))}:o.items&&(!s.positions||o.items.length!==s.positions.length)?{positions:o.items.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n.defaultPosition))}:null}render(){const{className:o,columns:s=3,columnWidth:n="1fr",gap:r,rowHeight:l="1fr",style:c,autoFlow:p="column",items:i=[]}=this.props,m=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,g={gridTemplateColumns:`repeat(${s}, minmax(0px, ${typeof n=="number"?n+"px":n}))`,gridAutoRows:`minmax(0px, ${typeof l=="number"?l+"px":l})`,gap:m,padding:m,...c};return a.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:y.classNames("k-tilelayout k-pos-relative",N[p],o),style:g,id:this.props.id,children:i.map((e,u)=>a.createElement(a.Fragment,{key:this.props.dataItemKey?y.getter(this.props.dataItemKey)(e):u},a.createElement(S.InternalTile,{update:this.update,defaultPosition:this.state.positions[u],index:u,resizable:e.resizable,reorderable:e.reorderable,style:e.style,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag},e.item?e.item:a.createElement(a.Fragment,null,a.createElement("div",{className:"k-tilelayout-item-header k-card-header"},a.isValidElement(e.header)?e.header:a.createElement("h5",{className:"k-card-title"},e.header)),a.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body)))))})}};h.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func},h.displayName="KendoTileLayout";let b=h;exports.TileLayout=b;

package/tilelayout/TileLayout.mjs

@@ -5,38 +5,37 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
+import * as a from "react";
 import t from "prop-types";
-import { dispatchEvent as b, validatePackage as k, shouldShowValidationUI as S, classNames as N, getter as E, WatermarkOverlay as v } from "@progress/kendo-react-common";
-import { InternalTile as x } from "./InternalTile.mjs";
-import { packageMetadata as y } from "../package-metadata.mjs";
-const O = {
+import { dispatchEvent as y, classNames as w, getter as b } from "@progress/kendo-react-common";
+import { InternalTile as S } from "./InternalTile.mjs";
+const k = {
   column: "k-grid-flow-col",
   row: "k-grid-flow-row",
   "column dense": "k-grid-flow-col-dense",
   "row dense": "k-grid-flow-row-dense",
   unset: "k-grid-flow-unset"
-}, h = class h extends n.Component {
-  constructor(a) {
-    super(a), this._element = null, this.state = {
+}, h = class h extends a.Component {
+  constructor() {
+    super(...arguments), this._element = null, this.state = {
       positions: (this.props.items || []).map(
-        (i, o) => Object.assign({ order: o, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
+        (r, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, r.defaultPosition)
       )
-    }, this.showLicenseWatermark = !1, this.focus = () => {
+    }, this.focus = () => {
       this._element && this._element.focus();
-    }, this.update = (i, o, s, l = 0, u = 0) => {
-      if (o === 0 && s === 0 && !u && !l)
+    }, this.update = (r, n, i, s = 0, l = 0) => {
+      if (n === 0 && i === 0 && !l && !s)
         return;
       let m = !1;
-      const c = this.state.positions.map((f) => Object.assign({}, f)), r = c[i], d = c.find((f) => f.order === r.order + o);
-      d && d !== r && (r.order += o, d.order += -o, m = !0);
-      const e = r.col + s;
-      s !== 0 && e >= 1 && e + r.colSpan <= (this.props.columns || 3) + 1 && (r.col = e, m = !0);
-      const p = r.colSpan + u;
-      u && p >= 1 && p + r.col <= (this.props.columns || 3) + 1 && (r.colSpan = p, m = !0);
-      const g = r.rowSpan + l;
-      l && g >= 1 && (r.rowSpan = g, m = !0), m && (this.setState({ positions: c }), b(this.props.onReposition, {}, this, { value: c }));
-    }, k(y), this.showLicenseWatermark = S(y);
+      const p = this.state.positions.map((g) => Object.assign({}, g)), o = p[r], c = p.find((g) => g.order === o.order + n);
+      c && c !== o && (o.order += n, c.order += -n, m = !0);
+      const d = o.col + i;
+      i !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
+      const e = o.colSpan + l;
+      l && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
+      const u = o.rowSpan + s;
+      s && u >= 1 && (o.rowSpan = u, m = !0), m && (this.setState({ positions: p }), y(this.props.onReposition, {}, this, { value: p }));
+    };
   }
   /**
    * Gets the HTML element of the TileLayout component.
@@ -47,48 +46,48 @@ const O = {
   /**
    * @hidden
    */
-  static getDerivedStateFromProps(a, i) {
-    return a.positions ? {
-      positions: a.positions.map((o, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, o))
-    } : a.items && (!i.positions || a.items.length !== i.positions.length) ? {
-      positions: a.items.map(
-        (o, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, o.defaultPosition)
+  static getDerivedStateFromProps(r, n) {
+    return r.positions ? {
+      positions: r.positions.map((i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i))
+    } : r.items && (!n.positions || r.items.length !== n.positions.length) ? {
+      positions: r.items.map(
+        (i, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
       )
     } : null;
   }
   render() {
     const {
-      className: a,
-      columns: i = 3,
-      columnWidth: o = "1fr",
+      className: r,
+      columns: n = 3,
+      columnWidth: i = "1fr",
       gap: s,
       rowHeight: l = "1fr",
-      style: u,
-      autoFlow: m = "column",
-      items: c = []
-    } = this.props, r = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
-      gridTemplateColumns: `repeat(${i}, minmax(0px, ${typeof o == "number" ? o + "px" : o}))`,
+      style: m,
+      autoFlow: p = "column",
+      items: o = []
+    } = this.props, c = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
+      gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof i == "number" ? i + "px" : i}))`,
       gridAutoRows: `minmax(0px, ${typeof l == "number" ? l + "px" : l})`,
-      gap: r,
-      padding: r,
-      ...u
+      gap: c,
+      padding: c,
+      ...m
     };
-    return /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ a.createElement(
       "div",
       {
         ref: (e) => {
           this._element = e;
         },
         dir: this.props.dir,
-        className: N("k-tilelayout k-pos-relative", O[m], a),
+        className: w("k-tilelayout k-pos-relative", k[p], r),
         style: d,
         id: this.props.id,
-        children: c.map((e, p) => /* @__PURE__ */ n.createElement(n.Fragment, { key: this.props.dataItemKey ? E(this.props.dataItemKey)(e) : p }, /* @__PURE__ */ n.createElement(
-          x,
+        children: o.map((e, u) => /* @__PURE__ */ a.createElement(a.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : u }, /* @__PURE__ */ a.createElement(
+          S,
           {
             update: this.update,
-            defaultPosition: this.state.positions[p],
-            index: p,
+            defaultPosition: this.state.positions[u],
+            index: u,
             resizable: e.resizable,
             reorderable: e.reorderable,
             style: e.style,
@@ -97,8 +96,8 @@ const O = {
             hintStyle: e.hintStyle,
             ignoreDrag: this.props.ignoreDrag
           },
-          e.item ? e.item : /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, n.isValidElement(e.header) ? e.header : /* @__PURE__ */ n.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ n.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
-        ), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(v, null)))
+          e.item ? e.item : /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, a.isValidElement(e.header) ? e.header : /* @__PURE__ */ a.createElement("h5", { className: "k-card-title" }, e.header)), /* @__PURE__ */ a.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
+        )))
       }
     );
   }
@@ -119,7 +118,7 @@ h.propTypes = {
   onReposition: t.func,
   ignoreDrag: t.func
 }, h.displayName = "KendoTileLayout";
-let w = h;
+let f = h;
 export {
-  w as TileLayout
+  f as TileLayout
 };

package/timeline/Timeline.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 g=require("react"),k=require("prop-types"),T=require("@progress/kendo-react-common"),v=require("./TimelineHorizontal.js"),h=require("./TimelineVertical.js");function M(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(i,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return i.default=e,Object.freeze(i)}const n=M(g),d=e=>{const i={alterMode:!1,collapsibleEvents:!1,dateFormat:"MMM dd, yyyy",...e},{collapsibleEvents:t,transitionDuration:a,className:f,alterMode:o,navigatable:s,horizontal:r,events:c,dateFormat:m,onChange:p,onActionClick:u}=i,[b,y]=n.useState(),l=n.useRef(null);return n.useEffect(()=>{l.current&&y(l.current.offsetWidth)},[]),n.createElement("div",{ref:l,className:T.classNames("k-timeline",{"k-timeline-collapsible":t,"k-timeline-vertical":!r,"k-timeline-alternating":o,"k-timeline-horizontal":r},f),style:{width:`${b}px`}},r?n.createElement(v.TimelineHorizontal,{navigatable:s,eventsData:c,dateFormat:m,transitionDuration:a,onActionClick:u}):n.createElement(h.TimelineVertical,{navigatable:s,eventsData:c,dateFormat:m,alterMode:o,collapsibleEvents:t,transitionDuration:a,onChange:p,onActionClick:u}))};d.propTypes={className:k.string};exports.Timeline=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),T=require("prop-types"),o=require("@progress/kendo-react-common"),M=require("./TimelineHorizontal.js"),h=require("./TimelineVertical.js"),E=require("../package-metadata.js");function O(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=O(v),f=e=>{const n=!o.validatePackage(E.packageMetadata,{component:"Timeline"}),a={alterMode:!1,collapsibleEvents:!1,dateFormat:"MMM dd, yyyy",...e},{collapsibleEvents:i,transitionDuration:c,className:k,alterMode:s,navigatable:m,horizontal:r,events:u,dateFormat:d,onChange:g,onActionClick:p}=a,[b,y]=t.useState(),l=t.useRef(null);return t.useEffect(()=>{l.current&&y(l.current.offsetWidth)},[]),t.createElement("div",{ref:l,className:o.classNames("k-timeline",{"k-timeline-collapsible":i,"k-timeline-vertical":!r,"k-timeline-alternating":s,"k-timeline-horizontal":r},k),style:{width:`${b}px`}},r?t.createElement(M.TimelineHorizontal,{navigatable:m,eventsData:u,dateFormat:d,transitionDuration:c,onActionClick:p}):t.createElement(h.TimelineVertical,{navigatable:m,eventsData:u,dateFormat:d,alterMode:s,collapsibleEvents:i,transitionDuration:c,onChange:g,onActionClick:p}),n&&t.createElement(o.WatermarkOverlay,null))};f.propTypes={className:T.string};exports.Timeline=f;

package/timeline/Timeline.mjs

@@ -6,12 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as e from "react";
-import v from "prop-types";
-import { classNames as h } from "@progress/kendo-react-common";
-import { TimelineHorizontal as y } from "./TimelineHorizontal.mjs";
-import { TimelineVertical as E } from "./TimelineVertical.mjs";
-const T = (c) => {
-  const p = {
+import h from "prop-types";
+import { validatePackage as y, classNames as E, WatermarkOverlay as T } from "@progress/kendo-react-common";
+import { TimelineHorizontal as g } from "./TimelineHorizontal.mjs";
+import { TimelineVertical as M } from "./TimelineVertical.mjs";
+import { packageMetadata as W } from "../package-metadata.mjs";
+const b = (c) => {
+  const p = !y(W, { component: "Timeline" }), f = {
     alterMode: !1,
     collapsibleEvents: !1,
     dateFormat: "MMM dd, yyyy",
@@ -19,22 +20,22 @@ const T = (c) => {
   }, {
     collapsibleEvents: i,
     transitionDuration: r,
-    className: f,
+    className: d,
     alterMode: n,
     navigatable: l,
     horizontal: t,
     events: o,
     dateFormat: s,
-    onChange: d,
+    onChange: k,
     onActionClick: m
-  } = p, [k, u] = e.useState(), a = e.useRef(null);
+  } = f, [v, u] = e.useState(), a = e.useRef(null);
   return e.useEffect(() => {
     a.current && u(a.current.offsetWidth);
   }, []), /* @__PURE__ */ e.createElement(
     "div",
     {
       ref: a,
-      className: h(
+      className: E(
         "k-timeline",
         {
           "k-timeline-collapsible": i,
@@ -42,12 +43,12 @@ const T = (c) => {
           "k-timeline-alternating": n,
           "k-timeline-horizontal": t
         },
-        f
+        d
       ),
-      style: { width: `${k}px` }
+      style: { width: `${v}px` }
     },
     t ? /* @__PURE__ */ e.createElement(
-      y,
+      g,
       {
         navigatable: l,
         eventsData: o,
@@ -56,7 +57,7 @@ const T = (c) => {
         onActionClick: m
       }
     ) : /* @__PURE__ */ e.createElement(
-      E,
+      M,
       {
         navigatable: l,
         eventsData: o,
@@ -64,15 +65,16 @@ const T = (c) => {
         alterMode: n,
         collapsibleEvents: i,
         transitionDuration: r,
-        onChange: d,
+        onChange: k,
         onActionClick: m
       }
-    )
+    ),
+    p && /* @__PURE__ */ e.createElement(T, null)
   );
 };
-T.propTypes = {
-  className: v.string
+b.propTypes = {
+  className: h.string
 };
 export {
-  T as Timeline
+  b as Timeline
 };