@progress/kendo-react-layout 7.2.4-develop.2 → 7.2.4-develop.4

package/tilelayout/InternalTile.mjs

@@ -0,0 +1,203 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+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 {
+  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 i = t.clientX, n = 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)
+        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);
+    }, 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 i = 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
+      }, 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);
+    }, 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 ${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"));
+    };
+  }
+  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() {
+    u && 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 = {
+      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 = /* @__PURE__ */ p.createElement(
+      "div",
+      {
+        ref: (s) => {
+          this.draggable = s ? { element: s } : null;
+        },
+        className: g("k-tilelayout-item k-card", { "k-cursor-grab": this.reorderable }, this.props.className),
+        style: { height: "100%", ...n, ...this.props.style }
+      },
+      this.props.children,
+      /* @__PURE__ */ p.createElement(
+        b,
+        {
+          onPress: this.handlePress,
+          onResize: this.handleResize,
+          resizable: e,
+          rtl: this.state.rtl
+        }
+      )
+    );
+    return /* @__PURE__ */ p.createElement("div", { ref: (s) => {
+      this.element = 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
+      },
+      a
+    ));
+  }
+  /**
+   * @hidden
+   */
+  getSnapshotBeforeUpdate(t) {
+    return this.oldSize = {}, this.dragElement && (this.oldSize = this.dragElement.getBoundingClientRect()), null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(t) {
+    const e = this.dragElement;
+    if (!e)
+      return;
+    const i = e.getBoundingClientRect(), n = this.oldSize;
+    if (this.resizing) {
+      const r = i.width - n.width;
+      if (this.state.rtl) {
+        const c = parseFloat(e.style.marginLeft || "0");
+        e.style.marginLeft = c - r + "px";
+      } else {
+        const c = parseFloat(e.style.marginRight || "0");
+        e.style.marginRight = c + r + "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;
+    }
+    const a = n.left - i.left, s = n.top - i.top;
+    if (!(a === 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 = "");
+        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`;
+        }));
+      });
+    }
+  }
+};
+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 f = h;
+export {
+  f as InternalTile
+};

package/tilelayout/ResizeHandlers.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),a=require("@progress/kendo-react-common");function o(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const s=o(l),i=t=>s.createElement(a.Draggable,{onPress:t.onPress,onDrag:e=>{t.onResize(e.event,!1,t.d)},onRelease:e=>{t.onResize(e.event,!0,t.d)}},s.createElement("div",{className:"k-resize-handle k-cursor-"+t.d+"-resize",style:{bottom:0,right:0,...t.style}}));class c extends s.Component{constructor(){super(...arguments),this.handleResize=(e,n,r)=>{e.originalEvent.preventDefault(),this.props.onResize(e,{end:n,direction:r})}}render(){const{resizable:e,onPress:n,rtl:r}=this.props;return e?s.createElement(s.Fragment,null,e!=="vertical"&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:"ew",style:r?{top:0,width:9,left:0,right:""}:{top:0,width:9,right:0,left:""}}),e!=="horizontal"&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:"ns",style:{left:0,height:9}}),e===!0&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:r?"nesw":"nwse",style:r?{width:9,height:9,right:"",left:0}:{width:9,height:9,right:0,left:""}})):null}}exports.ResizeHandlers=c;

package/tilelayout/ResizeHandlers.mjs

@@ -0,0 +1,53 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as n from "react";
+import { Draggable as l } from "@progress/kendo-react-common";
+const r = (t) => /* @__PURE__ */ n.createElement(
+  l,
+  {
+    onPress: t.onPress,
+    onDrag: (e) => {
+      t.onResize(e.event, !1, t.d);
+    },
+    onRelease: (e) => {
+      t.onResize(e.event, !0, t.d);
+    }
+  },
+  /* @__PURE__ */ n.createElement("div", { className: "k-resize-handle k-cursor-" + t.d + "-resize", style: { bottom: 0, right: 0, ...t.style } })
+);
+class h extends n.Component {
+  constructor() {
+    super(...arguments), this.handleResize = (e, s, i) => {
+      e.originalEvent.preventDefault(), this.props.onResize(e, { end: s, direction: i });
+    };
+  }
+  render() {
+    const { resizable: e, onPress: s, rtl: i } = this.props;
+    return e ? /* @__PURE__ */ n.createElement(n.Fragment, null, e !== "vertical" && /* @__PURE__ */ n.createElement(
+      r,
+      {
+        onPress: s,
+        onResize: this.handleResize,
+        d: "ew",
+        style: i ? { top: 0, width: 9, left: 0, right: "" } : { top: 0, width: 9, right: 0, left: "" }
+      }
+    ), e !== "horizontal" && /* @__PURE__ */ n.createElement(r, { onPress: s, onResize: this.handleResize, d: "ns", style: { left: 0, height: 9 } }), e === !0 && /* @__PURE__ */ n.createElement(
+      r,
+      {
+        onPress: s,
+        onResize: this.handleResize,
+        d: i ? "nesw" : "nwse",
+        style: i ? { width: 9, height: 9, right: "", left: 0 } : { width: 9, height: 9, right: 0, left: "" }
+      }
+    )) : null;
+  }
+}
+export {
+  h as ResizeHandlers
+};

package/tilelayout/TileLayout.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"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;

package/tilelayout/TileLayout.mjs

@@ -0,0 +1,122 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as n 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 = {
+  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 = { positions: (this.props.items || []).map((i, o) => Object.assign({ order: o, rowSpan: 1, colSpan: 1 }, i.defaultPosition)) }, this.showLicenseWatermark = !1, this.focus = () => {
+      this._element && this._element.focus();
+    }, this.update = (i, o, s, l = 0, u = 0) => {
+      if (o === 0 && s === 0 && !u && !l)
+        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);
+  }
+  /**
+   * Gets the HTML element of the TileLayout component.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * @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))
+    } : null;
+  }
+  render() {
+    const {
+      className: a,
+      columns: i = 3,
+      columnWidth: o = "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}))`,
+      gridAutoRows: `minmax(0px, ${typeof l == "number" ? l + "px" : l})`,
+      gap: r,
+      padding: r,
+      ...u
+    };
+    return /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        ref: (e) => {
+          this._element = e;
+        },
+        dir: this.props.dir,
+        className: N("k-tilelayout k-pos-relative", O[m], a),
+        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,
+            {
+              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 : /* @__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))
+        )
+      }
+    );
+  }
+};
+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 w = h;
+export {
+  w as TileLayout
+};

package/timeline/Timeline.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"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;

package/timeline/Timeline.mjs

@@ -0,0 +1,79 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+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 = (m) => {
+  const p = {
+    alterMode: !1,
+    collapsibleEvents: !1,
+    dateFormat: "MMM dd, yyyy",
+    ...m
+  }, {
+    collapsibleEvents: a,
+    transitionDuration: n,
+    className: f,
+    alterMode: r,
+    navigatable: l,
+    horizontal: t,
+    events: o,
+    dateFormat: s,
+    onChange: d,
+    onActionClick: c
+  } = p, [k, u] = e.useState(), i = e.useRef(null);
+  return e.useEffect(() => {
+    i.current && u(i.current.offsetWidth);
+  }, []), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: i,
+      className: h(
+        "k-timeline",
+        {
+          "k-timeline-collapsible": a,
+          "k-timeline-vertical": !t,
+          "k-timeline-alternating": r,
+          "k-timeline-horizontal": t
+        },
+        f
+      ),
+      style: { width: `${k}px` }
+    },
+    t ? /* @__PURE__ */ e.createElement(
+      y,
+      {
+        navigatable: l,
+        eventsData: o,
+        dateFormat: s,
+        transitionDuration: n,
+        onActionClick: c
+      }
+    ) : /* @__PURE__ */ e.createElement(
+      E,
+      {
+        navigatable: l,
+        eventsData: o,
+        dateFormat: s,
+        alterMode: r,
+        collapsibleEvents: a,
+        transitionDuration: n,
+        onChange: d,
+        onActionClick: c
+      }
+    )
+  );
+};
+T.propTypes = {
+  className: v.string
+};
+export {
+  T as Timeline
+};

package/timeline/TimelineCard.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),b=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),r=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),S=require("@progress/kendo-svg-icons");function R(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=R(N),v=e=>{const{title:l,subtitle:c,actions:o,images:d,description:E}=e.eventData,[s,C]=t.useState(e.eventData.opened||!1),[u,m]=t.useState(e.eventData.opened||!!e.collapsible),f=n=>{if(C(!s),e.onChange){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,a)}},g=n=>{if(e.onActionClick){const a={syntheticEvent:n,nativeEvent:n.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,a)}},k=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,E),d&&d.map((n,a)=>t.createElement(T.CardImage,{key:a,src:n.src})))),t.createElement(h.CardActions,null,o&&o.map((n,a)=>t.createElement("a",{key:a,href:n.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},n.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:r.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&u})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&u,className:"k-card-with-callout",onClick:n=>f(n)},t.createElement("span",{style:e.calloutStyle,className:r.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement("span",{className:"k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"},t.createElement(r.SvgIcon,{icon:S.chevronRightIcon}))),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>m(!1),onAfterExited:()=>m(!0)},s?k():null):k())))};v.propTypes={onChange:b.func,onActionClick:b.func};exports.TimelineCard=v;

package/timeline/TimelineCard.mjs

@@ -0,0 +1,109 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import s from "prop-types";
+import { Card as C } from "../card/Card.mjs";
+import { CardHeader as N } from "../card/CardHeader.mjs";
+import { CardTitle as A } from "../card/CardTitle.mjs";
+import { CardSubtitle as D } from "../card/CardSubtitle.mjs";
+import { CardBody as h } from "../card/CardBody.mjs";
+import { CardImage as I } from "../card/CardImage.mjs";
+import { CardActions as g } from "../card/CardActions.mjs";
+import { classNames as u, SvgIcon as y } from "@progress/kendo-react-common";
+import { Reveal as T } from "@progress/kendo-react-animation";
+import { chevronRightIcon as O } from "@progress/kendo-svg-icons";
+const x = (e) => {
+  const { title: k, subtitle: l, actions: i, images: o, description: E } = e.eventData, [c, v] = t.useState(e.eventData.opened || !1), [r, m] = t.useState(e.eventData.opened || !!e.collapsible), f = (a) => {
+    if (v(!c), e.onChange) {
+      const n = {
+        syntheticEvent: a,
+        nativeEvent: a.nativeEvent,
+        eventData: e.eventData
+      };
+      e.onChange.call(void 0, n);
+    }
+  }, b = (a) => {
+    if (e.onActionClick) {
+      const n = {
+        syntheticEvent: a,
+        nativeEvent: a.nativeEvent,
+        eventData: e.eventData
+      };
+      e.onActionClick.call(void 0, n);
+    }
+  }, d = () => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(h, null, /* @__PURE__ */ t.createElement("div", { className: "k-card-description" }, /* @__PURE__ */ t.createElement("p", null, E), o && o.map((a, n) => /* @__PURE__ */ t.createElement(I, { key: n, src: a.src })))), /* @__PURE__ */ t.createElement(g, null, i && i.map((a, n) => /* @__PURE__ */ t.createElement(
+    "a",
+    {
+      key: n,
+      href: a.url,
+      className: "k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",
+      onClick: b
+    },
+    a.text
+  ))));
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      "data-testid": "k-timeline-card",
+      className: u(
+        "k-timeline-card",
+        { "k-collapsed": e.collapsible && r }
+      )
+    },
+    /* @__PURE__ */ t.createElement(
+      C,
+      {
+        "aria-live": "polite",
+        "aria-describedby": e.id,
+        "aria-atomic": "true",
+        tabIndex: e.tabindex,
+        role: e.horizontal ? "tabpanel" : "button",
+        "aria-expanded": e.collapsible && r,
+        className: "k-card-with-callout",
+        onClick: (a) => f(a)
+      },
+      /* @__PURE__ */ t.createElement(
+        "span",
+        {
+          style: e.calloutStyle,
+          className: u(
+            "k-timeline-card-callout",
+            "k-card-callout",
+            { "k-callout-n": e.horizontal },
+            { "k-callout-e": e.alternated && !e.horizontal },
+            { "k-callout-w": !e.alternated && !e.horizontal }
+          )
+        }
+      ),
+      /* @__PURE__ */ t.createElement("div", { className: "k-card-inner" }, /* @__PURE__ */ t.createElement(N, null, /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement("span", { className: "k-event-title" }, k), e.collapsible && /* @__PURE__ */ t.createElement(
+        "span",
+        {
+          className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button"
+        },
+        /* @__PURE__ */ t.createElement(y, { icon: O })
+      )), l && /* @__PURE__ */ t.createElement(D, null, l)), e.collapsible ? /* @__PURE__ */ t.createElement(
+        T,
+        {
+          transitionEnterDuration: e.transitionDuration || 400,
+          transitionExitDuration: e.transitionDuration || 400,
+          onBeforeEnter: () => m(!1),
+          onAfterExited: () => m(!0)
+        },
+        c ? d() : null
+      ) : d())
+    )
+  );
+};
+x.propTypes = {
+  onChange: s.func,
+  onActionClick: s.func
+};
+export {
+  x as TimelineCard
+};

package/timeline/TimelineHorizontal.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const mt=require("react"),kt=require("prop-types"),bt=require("./TimelineCard.js"),Tt=require("./utils.js"),M=require("@progress/kendo-svg-icons"),gt=require("@progress/kendo-react-intl"),k=require("@progress/kendo-react-common");function vt(l){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const T in l)if(T!=="default"){const N=Object.getOwnPropertyDescriptor(l,T);Object.defineProperty(p,T,N.get?N:{enumerable:!0,get:()=>l[T]})}}return p.default=l,Object.freeze(p)}const n=vt(mt),K=l=>{const N=gt.useInternationalization(),[O,X]=n.useState(!1),[D,Y]=n.useState(!0),[B,G]=n.useState(),[f,L]=n.useState(0),[y,J]=n.useState(),[u,Q]=n.useState(0),[b,Z]=n.useState(0),[a,W]=n.useState(1),[d,S]=n.useState(),[i,tt]=n.useState(),[_,U]=n.useState([0,0,0]),[C,P]=n.useState(0),[et,nt]=n.useState(1),m=n.useRef(null),c=n.useRef(null),F=n.useRef(null),{eventsData:st,dateFormat:rt,navigatable:at,onActionClick:ot}=l,x=y?`${y}%`:"150px",g=n.useRef(new k.Navigation({tabIndex:0,root:m,selectors:[".k-timeline-scrollable-wrap"]}));n.useEffect(()=>{m.current&&l.navigatable&&(setTimeout(()=>{const t=g.current.first;t&&t.setAttribute("tabindex",String(0))},0),g.current.keyboardEvents={keydown:{ArrowRight:it,ArrowLeft:lt,End:ft,Home:ut}})},[l.navigatable,a,u]),n.useEffect(()=>{g.current.update()});const ct=t=>{at&&g.current&&g.current.triggerKeyboardEvent(t)};n.useEffect(()=>{var r;const t=k.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(I),e=c.current,s=((r=m==null?void 0:m.current)==null?void 0:r.offsetWidth)||0;return t&&e&&t.observe(e),V(),I(),U([s,0,-s]),()=>{t&&t.disconnect()}},[]),n.useEffect(()=>{const t=c.current,e=t&&t.children[a];if(e){const s=e.offsetWidth,r=!(f>=0);if(X(r),i){const o=i.length*s>u*s*((f*-1+100)/100);Y(o)}(t==null?void 0:t.offsetWidth)*-f/100>=t.children.length*s&&(V(),I(),L((e.offsetLeft-e.offsetWidth)/(u*e.offsetWidth)*100*-1)),z(e)}},[u,y,a]);const it=(t,e,s)=>{if(c.current){const r=c.current.children[a+1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a+2:a+1;if(i&&i.length<=o)return;u+b<=o&&j(),E(o,s)}},lt=(t,e,s)=>{if(c.current){const r=c.current&&c.current.children[a-1],o=r&&r.classList.contains("k-timeline-flag-wrap")?a-2:a-1;if(o<=0)return;o<b&&$(),E(o,s)}},ut=(t,e,s)=>{if(c.current){if(a<=1)return;const r=1;w(!0,r,0,0),E(r,s)}},ft=(t,e,s)=>{if(c.current){const r=c.current&&c.current.children.length-1;if(r<=a)return;const o=Math.floor(r/u),h=o*-100,R=o*u;w(!0,r,R,h),E(r,s)}},V=()=>{const t=Tt.addYearsFlags(st);tt(t),S([t[a-1],t[a],t[a+1]])},$=()=>{var e;if(c.current&&i){const s=b-u,r=b-1,o=i[r]&&((e=i[r])!=null&&e.yearFlag)?r-1:r,h=f+100>0?0:f+100;w(!1,o,s,h)}},j=()=>{if(c.current&&i){const e=b+u,s=i[e]&&i[e].yearFlag?e+1:e,r=f-100;w(!0,s,e,r)}},w=(t,e,s,r)=>{A(t,e),I(),Z(s),L(r),W(e)},A=(t,e)=>{if(d&&i){const s=v(t,et),r=Object.assign([],d,{[s]:i[e]});S(r),nt(s),P(t?-100:100),setTimeout(()=>{var q;const o=(q=m.current)==null?void 0:q.offsetWidth,h=Object.assign([],_,{[s]:0,[v(!0,s)]:o,[v(!1,s)]:o&&-o}),R=Object.assign([],r,{[v(!0,s)]:{},[v(!1,s)]:{}});S(R),U(h),P(0)},l.transitionDuration||300)}},v=(t,e)=>{const s=t?e+1:e-1;return d?s<0?d.length-1:s%d.length:0},z=t=>{var s;const e=(a-b)*t.offsetWidth+t.offsetWidth/2+(((s=F.current)==null?void 0:s.offsetWidth)||0);G(e)},E=(t,e)=>{e.preventDefault(),t>a?A(!0,t):t<a&&A(!1,t),W(t)},I=n.useCallback(()=>{const t=c.current,e=t&&t.children[a];if(t instanceof HTMLElement&&e){const s=Math.round(t.offsetWidth/150);z(e),J(100/s),Q(s)}},[]),dt=()=>({transitionDuration:"300ms"}),H=t=>({transform:`translateX(${t}%)`,transformOrigin:"left top"});return n.createElement(n.Fragment,null,n.createElement("div",{className:"k-timeline-track-wrap",ref:m,onKeyDown:ct},n.createElement("button",{ref:F,"aria-hidden":"true",onClick:()=>O&&$(),className:k.classNames("k-timeline-arrow","k-timeline-arrow-left","k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button",{"k-disabled":!O})},n.createElement(k.SvgIcon,{icon:M.caretAltLeftIcon})),n.createElement("button",{"aria-hidden":"true",onClick:()=>D&&j(),className:k.classNames("k-timeline-arrow","k-timeline-arrow-right","k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button",{"k-disabled":!D})},n.createElement(k.SvgIcon,{icon:M.caretAltRightIcon})),n.createElement("div",{className:"k-timeline-track"},n.createElement("ul",{ref:c,className:"k-timeline-scrollable-wrap",role:"tablist",tabIndex:0,style:{transform:`translateX(${f}%)`}},i&&i.map((t,e)=>t.yearFlag?n.createElement("li",{role:"none",className:"k-timeline-track-item k-timeline-flag-wrap",style:{flex:`1 0 ${x}`},key:e},n.createElement("span",{className:"k-timeline-flag"},t.yearFlag)):n.createElement("li",{role:"tab",className:k.classNames("k-timeline-track-item",{"k-focus":e===a}),"aria-selected":e===a,style:{flex:`1 0 ${x}`},key:e},n.createElement("div",{className:"k-timeline-date-wrap"},n.createElement("span",{className:"k-timeline-date"},N.formatDate(t.date,rt))),n.createElement("span",{onClick:s=>E(e,s),className:"k-timeline-circle"})))))),n.createElement("div",{className:"k-timeline-events-list"},n.createElement("ul",{className:"k-timeline-scrollable-wrap",style:C===0?{...H(C)}:{...H(C),...dt()}},d&&d.map((t,e)=>n.createElement("li",{key:e,className:"k-timeline-event",style:{transform:`translate3d(${_[e]}px, 0px, 0px)`}},t&&n.createElement(bt.TimelineCard,{tabindex:_[e]===0?0:-1,eventData:t,onActionClick:ot,horizontal:!0,collapsible:!1,calloutStyle:{left:`${B}px`}}))))))};K.propTypes={onActionClick:kt.func};exports.TimelineHorizontal=K;