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

package/tabstrip/TabStrip.mjs

@@ -0,0 +1,163 @@
+/**
+ * @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 r from "react";
+import o from "prop-types";
+import { TabStripNavigation as c } from "./TabStripNavigation.mjs";
+import { TabStripContent as b } from "./TabStripContent.mjs";
+import { Keys as n, validatePackage as m, shouldShowValidationUI as f, classNames as u, WatermarkOverlay as g } from "@progress/kendo-react-common";
+import { packageMetadata as d } from "../package-metadata.mjs";
+const h = class h extends r.Component {
+  constructor(a) {
+    super(a), this._element = null, this.showLicenseWatermark = !1, this.keyBinding = {
+      [n.left]: () => this.prevNavigatableTab(),
+      [n.right]: () => this.nextNavigatableTab(),
+      [n.down]: () => this.nextNavigatableTab(),
+      [n.up]: () => this.prevNavigatableTab(),
+      [n.home]: () => 0,
+      [n.end]: () => r.Children.count(this.props.children) - 1
+    }, this.onSelect = (t) => {
+      this.props.selected !== t && this.props.onSelect && this.props.onSelect({
+        selected: t
+      });
+    }, this.onKeyDown = (t) => {
+      let e;
+      switch (t.keyCode) {
+        case n.left:
+          e = this.keyBinding[this.invertKeys(n.left, n.right)];
+          break;
+        case n.right:
+          e = this.keyBinding[this.invertKeys(n.right, n.left)];
+          break;
+        case n.up:
+          e = this.keyBinding[n.up];
+          break;
+        case n.down:
+          e = this.keyBinding[n.down];
+          break;
+        case n.home:
+          e = this.keyBinding[n.home];
+          break;
+        case n.end:
+          e = this.keyBinding[n.end];
+          break;
+      }
+      e && (t.preventDefault(), this.onSelect(e()));
+    }, this.renderContent = (t) => {
+      const { selected: e, children: i, tabContentStyle: s } = t, l = r.Children.count(i);
+      return e < l && e > -1 ? /* @__PURE__ */ r.createElement(b, { index: e, ...t, style: s }) : null;
+    }, this.firstNavigatableTab = () => {
+      const t = this.children(), e = r.Children.count(t);
+      if (t) {
+        for (let i = 0; i < e; i++)
+          if (!t[i].props.disabled)
+            return i;
+      }
+    }, this.lastNavigatableTab = () => {
+      const t = this.children(), e = r.Children.count(t);
+      if (t) {
+        for (let i = e - 1; i > 0; i--)
+          if (!t[i].props.disabled)
+            return i;
+      }
+    }, this.prevNavigatableTab = () => {
+      const t = this.children(), { selected: e } = this.props, i = e ? e - 1 : -1;
+      if (i < 0)
+        return this.lastNavigatableTab();
+      if (t)
+        for (let s = i; s > -1; s--) {
+          if (!t[s].props.disabled)
+            return s;
+          if (s === 0)
+            return this.lastNavigatableTab();
+        }
+    }, this.nextNavigatableTab = () => {
+      const t = this.children(), { selected: e } = this.props, i = e ? e + 1 : 1, s = r.Children.count(t);
+      if (i >= s)
+        return this.firstNavigatableTab();
+      if (t)
+        for (let l = i; l < s; l++) {
+          if (!t[l].props.disabled)
+            return l;
+          if (l + 1 === s)
+            return this.firstNavigatableTab();
+        }
+    }, m(d), this.showLicenseWatermark = f(d);
+  }
+  get contentPanelId() {
+    return this.props.id + "-content-panel-id";
+  }
+  get navItemId() {
+    return this.props.id + "-nav-item-id";
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const a = {
+      ...this.props,
+      children: this.children(),
+      contentPanelId: this.contentPanelId,
+      navItemId: this.navItemId,
+      onKeyDown: this.onKeyDown,
+      onSelect: this.onSelect
+    }, { tabPosition: t, tabIndex: e = 0 } = a, i = t === "bottom", s = u(
+      "k-tabstrip k-pos-relative",
+      {
+        "k-tabstrip-left": t === "left",
+        "k-tabstrip-right": t === "right",
+        "k-tabstrip-bottom": t === "bottom",
+        "k-tabstrip-top": t === "top",
+        "k-tabstrip-scrollable": this.props.scrollable
+      },
+      this.props.className
+    );
+    return /* @__PURE__ */ r.createElement(
+      "div",
+      {
+        id: this.props.id,
+        ref: (l) => this._element = l,
+        dir: this.props.dir,
+        className: s,
+        style: this.props.style
+      },
+      !i && /* @__PURE__ */ r.createElement(c, { ...a, tabIndex: e }),
+      this.renderContent(a),
+      i && /* @__PURE__ */ r.createElement(c, { ...a, tabIndex: e }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(g, null)
+    );
+  }
+  invertKeys(a, t) {
+    return this._element && getComputedStyle(this._element).direction === "rtl" || !1 ? t : a;
+  }
+  children() {
+    return r.Children.toArray(this.props.children).filter((a) => a);
+  }
+};
+h.propTypes = {
+  animation: o.bool,
+  children: o.node,
+  onSelect: o.func,
+  selected: o.number,
+  style: o.object,
+  tabContentStyle: o.object,
+  tabPosition: o.string,
+  tabIndex: o.number,
+  className: o.string,
+  dir: o.string
+}, h.defaultProps = {
+  animation: !0,
+  tabPosition: "top",
+  keepTabsMounted: !1,
+  buttonScrollSpeed: 100,
+  mouseScrollSpeed: 10
+};
+let p = h;
+export {
+  p as TabStrip
+};

package/tabstrip/TabStripContent.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 h=require("react"),s=require("prop-types"),u=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-common");function y(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const r=y(h),p=class p extends r.Component{constructor(){super(...arguments),this.contentId=this.props.contentPanelId,this.childFactory=e=>r.cloneElement(e,{...e.props,in:e.props.children.props.id===String(this.contentId+this.props.selected)})}render(){const{children:e,selected:t,contentPanelId:n,keepTabsMounted:i,navItemId:a}=this.props,l=e&&typeof t=="number"&&r.Children.toArray(e)[t],d=m.classNames("k-tabstrip-content","k-active",l&&l.props.contentClassName);return r.createElement("div",{className:d,style:this.props.style,id:n,role:"tabpanel","aria-hidden":i,"aria-labelledby":`${a}-${(t==null?void 0:t.toString())||""}`},this.renderContent(e))}renderContent(e){return this.props.keepTabsMounted?r.Children.map(this.props.children,(t,n)=>this.renderChild(t,n)):this.renderChild(r.Children.toArray(e)[this.props.selected],this.props.selected)}renderChild(e,t){const n=t===this.props.selected,i={style:{display:n?void 0:"none"}},a={position:"initial",display:n?void 0:"none"};return e.props.disabled?null:this.props.animation?r.createElement(u.Fade,{appear:!0,exit:this.props.keepTabsMounted,style:a,childFactory:this.props.keepTabsMounted?this.childFactory:void 0},r.createElement("div",{...i,id:String(this.contentId+t),key:t},e.props.children)):r.createElement("div",{...i,key:t},e.props.children)}};p.propTypes={animation:s.bool,children:s.oneOfType([s.element,s.arrayOf(s.element)]),selected:s.number,style:s.object};let c=p;exports.TabStripContent=c;

package/tabstrip/TabStripContent.mjs

@@ -0,0 +1,81 @@
+/**
+ * @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 r from "react";
+import n from "prop-types";
+import { Fade as c } from "@progress/kendo-react-animation";
+import { classNames as h } from "@progress/kendo-react-common";
+const p = class p extends r.Component {
+  constructor() {
+    super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => r.cloneElement(e, {
+      ...e.props,
+      in: e.props.children.props.id === String(this.contentId + this.props.selected)
+    });
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { children: e, selected: t, contentPanelId: s, keepTabsMounted: o, navItemId: i } = this.props, l = e && typeof t == "number" && r.Children.toArray(e)[t], d = h(
+      "k-tabstrip-content",
+      "k-active",
+      l && l.props.contentClassName
+    );
+    return /* @__PURE__ */ r.createElement(
+      "div",
+      {
+        className: d,
+        style: this.props.style,
+        id: s,
+        role: "tabpanel",
+        "aria-hidden": o,
+        "aria-labelledby": `${i}-${(t == null ? void 0 : t.toString()) || ""}`
+      },
+      this.renderContent(e)
+    );
+  }
+  renderContent(e) {
+    return this.props.keepTabsMounted ? r.Children.map(this.props.children, (t, s) => this.renderChild(t, s)) : this.renderChild(
+      r.Children.toArray(e)[this.props.selected],
+      this.props.selected
+    );
+  }
+  renderChild(e, t) {
+    const s = t === this.props.selected, o = {
+      style: {
+        display: s ? void 0 : "none"
+      }
+    }, i = {
+      position: "initial",
+      display: s ? void 0 : "none"
+    };
+    return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ r.createElement(
+      c,
+      {
+        appear: !0,
+        exit: this.props.keepTabsMounted,
+        style: i,
+        childFactory: this.props.keepTabsMounted ? this.childFactory : void 0
+      },
+      /* @__PURE__ */ r.createElement("div", { ...o, id: String(this.contentId + t), key: t }, e.props.children)
+    ) : /* @__PURE__ */ r.createElement("div", { ...o, key: t }, e.props.children);
+  }
+};
+p.propTypes = {
+  animation: n.bool,
+  children: n.oneOfType([
+    n.element,
+    n.arrayOf(n.element)
+  ]),
+  selected: n.number,
+  style: n.object
+};
+let a = p;
+export {
+  a as TabStripContent
+};

package/tabstrip/TabStripNavigation.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 R=require("react"),d=require("prop-types"),C=require("./TabStripNavigationItem.js"),k=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),u=require("@progress/kendo-svg-icons");function M(h){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(l,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return l.default=h,Object.freeze(l)}const a=M(R),x=h=>Array.apply(null,Array(h)),L=h=>h.preventDefault(),v="smooth",b="prev",S="next",I=class I extends a.Component{constructor(l){super(l),this.itemsNavRef=a.createRef(),this.isRtl=()=>this.props.dir==="rtl",this.onWheel=t=>{t.stopPropagation();const s=t.deltaY<0?b:S;this.setNewScrollPosition(s,t)},this.arrowClickPrev=t=>{this.handleArrowClick(b,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,s)=>{this.setNewScrollPosition(t,s)},this.setNewScrollPosition=(t,s)=>{const e=this.itemsNavRef.current;if(!e)return;const n=this.horizontalScroll(),c=n?e.scrollWidth-e.offsetWidth:e.scrollHeight-e.offsetHeight,r=(s.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let o=n?e.scrollLeft:e.scrollTop,i=n?e.scrollWidth-e.scrollLeft:e.scrollHeight-e.scrollTop,f=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===b&&o<0&&(o+=r,f+=r),t===S&&o<c&&(o-=r,f-=r),o=Math.min(0,Math.min(c,o))):(t===b&&o>0&&(o-=r,i+=r),t===S&&o<c&&(o+=r,i-=r),o=Math.max(0,Math.min(c,o)));const g=o===0,m=s.type==="click"?v:void 0;if(n){const P=this.isRtl()?Math.round(f)<=e.clientWidth||Math.floor(f)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:g,disabledNext:P}),e.scrollTo({left:o,behavior:m})}else this.setState({disabledPrev:g,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:m})},this.renderArrow=(t,s)=>{const e=this.horizontalScroll(),n={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?u.caretAltRightIcon:u.caretAltLeftIcon:u.caretAltUpIcon},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?u.caretAltLeftIcon:u.caretAltRightIcon:u.caretAltDownIcon}},c=(t===b?this.props.prevButton:this.props.nextButton)||A.Button,r=t===b?this.arrowClickPrev:this.arrowClickNext;return a.createElement(c,{disabled:s,className:`${n[t].arrowTab}`,onClick:r,icon:n[t].fontIcon,svgIcon:n[t].svgIcon,onMouseDown:L,tabIndex:-1,fillMode:"flat"})},this.state={disabledPrev:this.props.selected===0,disabledNext:this.props.selected===a.Children.count(this.props.children)-1}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(l){const{scrollable:t,selected:s}=this.props;t&&l.selected!==s&&(this.scrollToSelected(),this.setState({disabledPrev:s===0,disabledNext:s===a.Children.count(this.props.children)-1}))}render(){const{selected:l,tabPosition:t,children:s,onSelect:e,onKeyDown:n,navItemId:c,contentPanelId:r}=this.props,o=a.Children.count(s),i=a.Children.toArray(s);let f;s&&(f=x(o).map((P,p,w)=>{const N={active:l===p,disabled:i[p].props.disabled,index:p,title:i[p].props.title,first:p===0,last:p===w.length-1,contentPanelId:r,id:c,onSelect:e};return a.createElement(C.TabStripNavigationItem,{key:p,...N})}));const g=k.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),m=k.classNames("k-tabstrip-items","k-reset");return a.createElement("div",{className:g},this.props.scrollable?a.createElement(a.Fragment,null,this.renderArrow(b,this.state.disabledPrev),a.createElement("ul",{ref:this.itemsNavRef,className:m,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},f),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:m,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},f))}scrollToSelected(){const l=this.itemsNavRef.current,t=l&&l.children[this.props.selected||0];if(t instanceof HTMLElement&&l instanceof HTMLElement){const s=this.horizontalScroll(),e=s?l.offsetWidth:l.offsetHeight,n=s?t.offsetWidth:t.offsetHeight,c=s?"left":"top";let r=s?l.scrollLeft:l.scrollTop,o=0;if(this.isRtl()){const i=t.offsetLeft;r=r*-1,i<0?(o=i-n+l.offsetLeft,l.scrollTo({[c]:o,behavior:v})):i+n>e-r&&(o=r+i-n,l.scrollTo({[c]:o,behavior:v}))}else{const i=s?t.offsetLeft-l.offsetLeft:t.offsetTop-l.offsetTop;r+e<i+n?(o=i+n-e,l.scrollTo({[c]:o,behavior:v})):r>i&&(o=i,l.scrollTo({[c]:o,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};I.propTypes={children:d.oneOfType([d.element,d.arrayOf(d.element)]),onSelect:d.func,onKeyDown:d.func,selected:d.number,tabIndex:d.number};let T=I;exports.TabStripNavigation=T;

package/tabstrip/TabStripNavigation.mjs

@@ -0,0 +1,171 @@
+/**
+ * @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 a from "react";
+import f from "prop-types";
+import { TabStripNavigationItem as C } from "./TabStripNavigationItem.mjs";
+import { classNames as I } from "@progress/kendo-react-common";
+import { Button as x } from "@progress/kendo-react-buttons";
+import { caretAltRightIcon as P, caretAltLeftIcon as k, caretAltUpIcon as A, caretAltDownIcon as M } from "@progress/kendo-svg-icons";
+const E = (S) => Array.apply(null, Array(S)), L = (S) => S.preventDefault(), b = "smooth", d = "prev", u = "next", w = class w extends a.Component {
+  constructor(l) {
+    super(l), this.itemsNavRef = a.createRef(), this.isRtl = () => this.props.dir === "rtl", this.onWheel = (t) => {
+      t.stopPropagation();
+      const s = t.deltaY < 0 ? d : u;
+      this.setNewScrollPosition(s, t);
+    }, this.arrowClickPrev = (t) => {
+      this.handleArrowClick(d, t);
+    }, this.arrowClickNext = (t) => {
+      this.handleArrowClick(u, t);
+    }, this.handleArrowClick = (t, s) => {
+      this.setNewScrollPosition(t, s);
+    }, this.setNewScrollPosition = (t, s) => {
+      const e = this.itemsNavRef.current;
+      if (!e)
+        return;
+      const n = this.horizontalScroll(), c = n ? e.scrollWidth - e.offsetWidth : e.scrollHeight - e.offsetHeight, r = (s.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
+      let o = n ? e.scrollLeft : e.scrollTop, i = n ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop, h = e.scrollWidth - e.scrollLeft * -1;
+      this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += r, h += r), t === u && o < c && (o -= r, h -= r), o = Math.min(0, Math.min(c, o))) : (t === d && o > 0 && (o -= r, i += r), t === u && o < c && (o += r, i -= r), o = Math.max(0, Math.min(c, o)));
+      const v = o === 0, m = s.type === "click" ? b : void 0;
+      if (n) {
+        const T = this.isRtl() ? Math.round(h) <= e.clientWidth || Math.floor(h) <= e.clientWidth : Math.round(i) <= e.clientWidth || Math.floor(i) <= e.clientWidth;
+        this.setState({
+          disabledPrev: v,
+          disabledNext: T
+        }), e.scrollTo({ left: o, behavior: m });
+      } else
+        this.setState({
+          disabledPrev: v,
+          disabledNext: Math.round(i) <= e.clientHeight || Math.floor(i) <= e.clientHeight
+        }), e.scrollTo({ top: o, behavior: m });
+    }, this.renderArrow = (t, s) => {
+      const e = this.horizontalScroll(), n = {
+        prev: {
+          arrowTab: "k-tabstrip-prev",
+          fontIcon: e ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
+          svgIcon: e ? this.isRtl() ? P : k : A
+        },
+        next: {
+          arrowTab: "k-tabstrip-next",
+          fontIcon: e ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
+          svgIcon: e ? this.isRtl() ? k : P : M
+        }
+      }, c = (t === d ? this.props.prevButton : this.props.nextButton) || x, r = t === d ? this.arrowClickPrev : this.arrowClickNext;
+      return /* @__PURE__ */ a.createElement(
+        c,
+        {
+          disabled: s,
+          className: `${n[t].arrowTab}`,
+          onClick: r,
+          icon: n[t].fontIcon,
+          svgIcon: n[t].svgIcon,
+          onMouseDown: L,
+          tabIndex: -1,
+          fillMode: "flat"
+        }
+      );
+    }, this.state = {
+      disabledPrev: this.props.selected === 0,
+      disabledNext: this.props.selected === a.Children.count(this.props.children) - 1
+    };
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.props.scrollable && this.scrollToSelected();
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(l) {
+    const { scrollable: t, selected: s } = this.props;
+    t && l.selected !== s && (this.scrollToSelected(), this.setState({
+      disabledPrev: s === 0,
+      disabledNext: s === a.Children.count(this.props.children) - 1
+    }));
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r } = this.props, o = a.Children.count(s), i = a.Children.toArray(s);
+    let h;
+    s && (h = E(o).map((T, p, R) => {
+      const g = {
+        active: l === p,
+        disabled: i[p].props.disabled,
+        index: p,
+        title: i[p].props.title,
+        first: p === 0,
+        last: p === R.length - 1,
+        contentPanelId: r,
+        id: c,
+        onSelect: e
+      };
+      return /* @__PURE__ */ a.createElement(C, { key: p, ...g });
+    }));
+    const v = I("k-tabstrip-items-wrapper", {
+      "k-hstack": t === "top" || t === "bottom",
+      "k-vstack": t === "left" || t === "right"
+    }), m = I("k-tabstrip-items", "k-reset");
+    return /* @__PURE__ */ a.createElement("div", { className: v }, this.props.scrollable ? /* @__PURE__ */ a.createElement(a.Fragment, null, this.renderArrow(d, this.state.disabledPrev), /* @__PURE__ */ a.createElement(
+      "ul",
+      {
+        ref: this.itemsNavRef,
+        className: m,
+        role: "tablist",
+        tabIndex: this.props.tabIndex,
+        onKeyDown: n,
+        onWheel: this.onWheel,
+        "aria-orientation": t === "left" || t === "right" ? "vertical" : void 0
+      },
+      h
+    ), this.renderArrow(u, this.state.disabledNext)) : /* @__PURE__ */ a.createElement(
+      "ul",
+      {
+        className: m,
+        role: "tablist",
+        tabIndex: this.props.tabIndex,
+        onKeyDown: n
+      },
+      h
+    ));
+  }
+  scrollToSelected() {
+    const l = this.itemsNavRef.current, t = l && l.children[this.props.selected || 0];
+    if (t instanceof HTMLElement && l instanceof HTMLElement) {
+      const s = this.horizontalScroll(), e = s ? l.offsetWidth : l.offsetHeight, n = s ? t.offsetWidth : t.offsetHeight, c = s ? "left" : "top";
+      let r = s ? l.scrollLeft : l.scrollTop, o = 0;
+      if (this.isRtl()) {
+        const i = t.offsetLeft;
+        r = r * -1, i < 0 ? (o = i - n + l.offsetLeft, l.scrollTo({ [c]: o, behavior: b })) : i + n > e - r && (o = r + i - n, l.scrollTo({ [c]: o, behavior: b }));
+      } else {
+        const i = s ? t.offsetLeft - l.offsetLeft : t.offsetTop - l.offsetTop;
+        r + e < i + n ? (o = i + n - e, l.scrollTo({ [c]: o, behavior: b })) : r > i && (o = i, l.scrollTo({ [c]: o, behavior: b }));
+      }
+    }
+  }
+  horizontalScroll() {
+    return /top|bottom/.test(this.props.tabPosition || "top");
+  }
+};
+w.propTypes = {
+  children: f.oneOfType([
+    f.element,
+    f.arrayOf(f.element)
+  ]),
+  onSelect: f.func,
+  onKeyDown: f.func,
+  selected: f.number,
+  tabIndex: f.number
+};
+let N = w;
+export {
+  N as TabStripNavigation
+};

package/tabstrip/TabStripNavigationItem.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 p=require("react"),e=require("prop-types"),b=require("@progress/kendo-react-common");function h(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(o,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return o.default=s,Object.freeze(o)}const n=h(p),l=class l extends n.Component{constructor(){super(...arguments),this.itemRef=null,this.focus=()=>{this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())},this.blur=()=>{this.itemRef&&(this.itemRef.tabIndex=-1,this.itemRef.blur())},this.onClick=()=>{this.props.onSelect&&this.props.onSelect(this.props.index),this.itemRef&&(this.itemRef.tabIndex=0,this.itemRef.focus())}}render(){const{id:o,active:t,disabled:i,title:a="Untitled",contentPanelId:c,index:f}=this.props,d={id:`${o}-${f.toString()}`,"aria-selected":t,"aria-controls":t?c:void 0,"aria-disabled":i,role:"tab",onClick:i?void 0:this.onClick},u=b.classNames("k-item","k-tabstrip-item",{"k-disabled":i,"k-active":t});return n.createElement("li",{...d,className:u,ref:m=>this.itemRef=m,onBlur:this.blur,"aria-controls":c},n.createElement("span",{className:"k-link"},a))}};l.propTypes={active:e.bool,disabled:e.bool,index:e.number,onSelect:e.func,title:e.oneOfType([e.string,e.element]),first:e.bool,last:e.bool};let r=l;exports.TabStripNavigationItem=r;

package/tabstrip/TabStripNavigationItem.mjs

@@ -0,0 +1,55 @@
+/**
+ * @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 s from "react";
+import e from "prop-types";
+import { classNames as p } from "@progress/kendo-react-common";
+const o = class o extends s.Component {
+  constructor() {
+    super(...arguments), this.itemRef = null, this.focus = () => {
+      this.itemRef && (this.itemRef.tabIndex = 0, this.itemRef.focus());
+    }, this.blur = () => {
+      this.itemRef && (this.itemRef.tabIndex = -1, this.itemRef.blur());
+    }, this.onClick = () => {
+      this.props.onSelect && this.props.onSelect(this.props.index), this.itemRef && (this.itemRef.tabIndex = 0, this.itemRef.focus());
+    };
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { id: r, active: t, disabled: i, title: a = "Untitled", contentPanelId: l, index: c } = this.props, m = {
+      id: `${r}-${c.toString()}`,
+      "aria-selected": t,
+      "aria-controls": t ? l : void 0,
+      "aria-disabled": i,
+      role: "tab",
+      onClick: i ? void 0 : this.onClick
+    }, f = p("k-item", "k-tabstrip-item", {
+      "k-disabled": i,
+      "k-active": t
+    });
+    return /* @__PURE__ */ s.createElement("li", { ...m, className: f, ref: (d) => this.itemRef = d, onBlur: this.blur, "aria-controls": l }, /* @__PURE__ */ s.createElement("span", { className: "k-link" }, a));
+  }
+};
+o.propTypes = {
+  active: e.bool,
+  disabled: e.bool,
+  index: e.number,
+  onSelect: e.func,
+  title: e.oneOfType([
+    e.string,
+    e.element
+  ]),
+  first: e.bool,
+  last: e.bool
+};
+let n = o;
+export {
+  n as TabStripNavigationItem
+};

package/tabstrip/TabStripTab.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"),e=require("prop-types");function i(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const a=i(l),c=class c extends a.Component{render(){return null}};c.propTypes={disabled:e.bool,contentClassName:e.string,children:e.oneOfType([e.element,e.node]),title:e.oneOfType([e.string,e.element,e.node])};let o=c;exports.TabStripTab=o;

package/tabstrip/TabStripTab.mjs

@@ -0,0 +1,35 @@
+/**
+ * @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 o from "react";
+import e from "prop-types";
+const n = class n extends o.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return null;
+  }
+};
+n.propTypes = {
+  disabled: e.bool,
+  contentClassName: e.string,
+  children: e.oneOfType([
+    e.element,
+    e.node
+  ]),
+  title: e.oneOfType([
+    e.string,
+    e.element,
+    e.node
+  ])
+};
+let t = n;
+export {
+  t as TabStripTab
+};

package/tilelayout/InternalTile.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 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;