@progress/kendo-react-layout 8.2.0-develop.8 → 8.2.0

package/splitter/Splitter.js

@@ -5,4 +5,4 @@
  * 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"),B=require("./SplitterPane.js"),_=require("./SplitterBar.js"),T=require("@progress/kendo-react-common"),k=require("../package-metadata.js"),C=require("./messages/index.js"),N=require("@progress/kendo-react-intl");function w(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return i.default=d,Object.freeze(i)}const S=w(R),q={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},L=150,b=class b extends S.Component{constructor(i){super(i),this._container=null,this.validatePanes=e=>{if(!e.filter(n=>n.size===void 0).length)throw new Error("The Splitter should have at least one pane without a set size.")},this.mapPaneOptions=(e,t)=>{const n=this.orientation,{dragIndex:r,isDragging:a}=this.state,l=[];for(let s=0;s<t.length;s++){let o=!1;const p=t[s];S.isValidElement(p)&&(o=p.type.displayName==="Splitter");let h=!1;a&&r!==void 0&&(h=r===s||r+1===s),l.push({...q,orientation:n,containsSplitter:o,overlay:h,...(e||[])[s]})}return l},this.mapSplitterPanes=(e,t)=>{const n=N.provideLocalizationService(this).toLanguageString(C.splitBarLabel,C.messages[C.splitBarLabel]);return e.map((r,a)=>{let l;const s=a*2,o=s+1;if(a+1<e.length){const h=e[a+1];l=S.createElement(_.SplitterBar,{key:o,index:a,orientation:r.orientation,prev:r,next:h,ariaLabel:n,onDrag:this.onBarDragResize,onToggle:this.onBarToggle,onKeyboardResize:this.onBarKeyboardResize,isRtl:this.isRtl})}return[S.createElement(B.SplitterPane,{key:s,...r},t[a]),l]})},this.onBarToggle=(e,t)=>{const r=this.panesOptions(this.panesContent).map((a,l)=>{const s=this.getPaneProps(a);return l===e?{...s,collapsed:!a.collapsed}:{...s}});this.props.onChange&&this.props.onChange({newState:r,isLast:!0,nativeEvent:t})},this.onBarDragResize=(e,t,n,r,a)=>{const l=new Date().getTime(),{pageX:s,pageY:o}=e,{prevElement:p,nextElement:h}=this.surroudingPanes(t);if(!p||!h)return;if(r){this.setState({isDragging:!0,dragIndex:n,startTime:l,originalX:s,originalY:o,originalPrevSize:this.elementSize(p),originalNextSize:this.elementSize(h)});return}const{originalPrevSize:P,originalNextSize:c,startTime:v,originalX:f,originalY:m}=this.state;if(!r&&l-v<L){a&&this.resetDragState();return}let g;this.orientation==="vertical"?g=o-m:this.isRtl?g=f-s:g=s-f,this.resize(n,n+1,P,c,g,a,e),a&&this.resetDragState()},this.onBarKeyboardResize=(e,t,n,r)=>{const{prevElement:a,nextElement:l}=this.surroudingPanes(e),s=this.elementSize(a),o=this.elementSize(l);this.resize(t,t+1,s,o,n,!0,r)},this.containerSize=()=>this._container?this.elementSize(this._container,!0):0,this.panesOptions=e=>this.mapPaneOptions(this.panes,e),this.elementSize=(e,t)=>{const n=t?"client":"offset";return this.orientation==="vertical"?e[`${n}Height`]:e[`${n}Width`]},this.clamp=(e,t,n)=>Math.min(t,Math.max(e,n)),this.fixedSize=e=>e&&e.length>0,T.validatePackage(k.packageMetadata),this.state={isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0,panes:i.defaultPanes||[]}}get isControlledState(){return this.props.panes!==void 0}get panes(){return this.panesDuringOnChange!==void 0?this.panesDuringOnChange:this.isControlledState?this.props.panes:this.state.panes}get orientation(){return this.props.orientation||"horizontal"}get isRtl(){return this._container&&getComputedStyle(this._container).direction==="rtl"||!1}get panesContent(){return S.Children.toArray(this.props.children).filter(i=>i)}render(){const i=this.panesContent,e=this.panesOptions(i),t=T.classNames("k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`,this.props.className);return this.validatePanes(e),S.createElement("div",{style:this.props.style,ref:n=>this._container=n,className:t},this.mapSplitterPanes(e,i))}surroudingPanes(i){return{prevElement:i.previousElementSibling,nextElement:i.nextElementSibling}}isPercent(i){return/%$/.test(i)}toPixels(i,e){let t=parseInt(i,10);return this.isPercent(i)&&(t=e*t/100),t}resetDragState(){this.setState({isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0})}resize(i,e,t,n,r,a,l){const s=this.panesOptions(this.panesContent),o=s[i],p=s[e],h=t+n,P=this.containerSize(),c=u=>this.toPixels(u,P),v={index:i,initialSize:t,min:c(o.min)||h-c(p.max)||0,max:c(o.max)||h-c(p.min)||h},f={index:e,initialSize:n,min:c(p.min)||h-c(o.max)||0,max:c(p.max)||h-c(o.min)||h},m=(u,x)=>{const z=s[u.index],E=this.clamp(u.min,u.max,u.initialSize+x);return this.isPercent(z.size||"")?100*E/P+"%":E+"px"};let g,O;this.fixedSize(o.size)&&this.fixedSize(p.size)?(g=m(v,r),O=m(f,-r)):p.collapsible||this.fixedSize(p.size)?O=m(f,-r):g=m(v,r);const y=s.map((u,x)=>{const z=this.getPaneProps(u);return x===i?{...z,size:g}:x===e?{...z,size:O}:{...z}});this.panesDuringOnChange=y,this.isControlledState||this.setState({panes:y}),this.props.onChange&&this.props.onChange({newState:y,isLast:a,nativeEvent:l}),this.panesDuringOnChange=void 0}getPaneProps(i){const{orientation:e,overlay:t,containsSplitter:n,...r}=i;return r}};b.displayName="Splitter";let D=b;exports.Splitter=D;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),B=require("./SplitterPane.js"),_=require("./SplitterBar.js"),T=require("@progress/kendo-react-common"),k=require("../package-metadata.js"),C=require("./messages/index.js"),N=require("@progress/kendo-react-intl");function w(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return i.default=d,Object.freeze(i)}const S=w(R),q={collapsible:!1,collapsed:!1,resizable:!0,scrollable:!0},L=150,b=class b extends S.Component{constructor(i){super(i),this._container=null,this.validatePanes=e=>{if(!e.filter(n=>n.size===void 0).length)throw new Error("The Splitter should have at least one pane without a set size.")},this.mapPaneOptions=(e,t)=>{const n=this.orientation,{dragIndex:r,isDragging:a}=this.state,l=[];for(let s=0;s<t.length;s++){let o=!1;const p=t[s];S.isValidElement(p)&&(o=p.type.displayName==="Splitter");let h=!1;a&&r!==void 0&&(h=r===s||r+1===s),l.push({...q,orientation:n,containsSplitter:o,overlay:h,...(e||[])[s]})}return l},this.mapSplitterPanes=(e,t)=>{const n=N.provideLocalizationService(this).toLanguageString(C.splitBarLabel,C.messages[C.splitBarLabel]);return e.map((r,a)=>{let l;const s=a*2,o=s+1;if(a+1<e.length){const h=e[a+1];l=S.createElement(_.SplitterBar,{key:o,index:a,orientation:r.orientation,prev:r,next:h,ariaLabel:n,onDrag:this.onBarDragResize,onToggle:this.onBarToggle,onKeyboardResize:this.onBarKeyboardResize,isRtl:this.isRtl})}return[S.createElement(B.SplitterPane,{key:s,...r},t[a]),l]})},this.onBarToggle=(e,t)=>{const r=this.panesOptions(this.panesContent).map((a,l)=>{const s=this.getPaneProps(a);return l===e?{...s,collapsed:!a.collapsed}:{...s}});this.props.onChange&&this.props.onChange({newState:r,isLast:!0,nativeEvent:t})},this.onBarDragResize=(e,t,n,r,a)=>{const l=new Date().getTime(),{pageX:s,pageY:o}=e,{prevElement:p,nextElement:h}=this.surroudingPanes(t);if(!p||!h)return;if(r){this.setState({isDragging:!0,dragIndex:n,startTime:l,originalX:s,originalY:o,originalPrevSize:this.elementSize(p),originalNextSize:this.elementSize(h)});return}const{originalPrevSize:P,originalNextSize:c,startTime:v,originalX:f,originalY:m}=this.state;if(!r&&l-v<L){a&&this.resetDragState();return}let g;this.orientation==="vertical"?g=o-m:this.isRtl?g=f-s:g=s-f,this.resize(n,n+1,P,c,g,a,e),a&&this.resetDragState()},this.onBarKeyboardResize=(e,t,n,r)=>{const{prevElement:a,nextElement:l}=this.surroudingPanes(e),s=this.elementSize(a),o=this.elementSize(l);this.resize(t,t+1,s,o,n,!0,r)},this.containerSize=()=>this._container?this.elementSize(this._container,!0):0,this.panesOptions=e=>this.mapPaneOptions(this.panes,e),this.elementSize=(e,t)=>{const n=t?"client":"offset";return this.orientation==="vertical"?e[`${n}Height`]:e[`${n}Width`]},this.clamp=(e,t,n)=>Math.min(t,Math.max(e,n)),this.fixedSize=e=>e&&e.length>0,T.validatePackage(k.packageMetadata),this.state={isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0,panes:i.defaultPanes||[]}}get isControlledState(){return this.props.panes!==void 0}get panes(){return this.panesDuringOnChange!==void 0?this.panesDuringOnChange:this.isControlledState?this.props.panes:this.state.panes}get orientation(){return this.props.orientation||"horizontal"}get isRtl(){return this._container&&getComputedStyle(this._container).direction==="rtl"||!1}get panesContent(){return S.Children.toArray(this.props.children).filter(i=>i)}render(){const i=this.panesContent,e=this.panesOptions(i),t=T.classNames("k-splitter","k-splitter-flex",`k-splitter-${this.orientation}`,this.props.className);return this.validatePanes(e),S.createElement("div",{id:this.props.id,style:this.props.style,ref:n=>this._container=n,className:t},this.mapSplitterPanes(e,i))}surroudingPanes(i){return{prevElement:i.previousElementSibling,nextElement:i.nextElementSibling}}isPercent(i){return/%$/.test(i)}toPixels(i,e){let t=parseInt(i,10);return this.isPercent(i)&&(t=e*t/100),t}resetDragState(){this.setState({isDragging:!1,dragIndex:void 0,startTime:0,originalX:0,originalY:0,originalPrevSize:0,originalNextSize:0})}resize(i,e,t,n,r,a,l){const s=this.panesOptions(this.panesContent),o=s[i],p=s[e],h=t+n,P=this.containerSize(),c=u=>this.toPixels(u,P),v={index:i,initialSize:t,min:c(o.min)||h-c(p.max)||0,max:c(o.max)||h-c(p.min)||h},f={index:e,initialSize:n,min:c(p.min)||h-c(o.max)||0,max:c(p.max)||h-c(o.min)||h},m=(u,x)=>{const z=s[u.index],E=this.clamp(u.min,u.max,u.initialSize+x);return this.isPercent(z.size||"")?100*E/P+"%":E+"px"};let g,O;this.fixedSize(o.size)&&this.fixedSize(p.size)?(g=m(v,r),O=m(f,-r)):p.collapsible||this.fixedSize(p.size)?O=m(f,-r):g=m(v,r);const y=s.map((u,x)=>{const z=this.getPaneProps(u);return x===i?{...z,size:g}:x===e?{...z,size:O}:{...z}});this.panesDuringOnChange=y,this.isControlledState||this.setState({panes:y}),this.props.onChange&&this.props.onChange({newState:y,isLast:a,nativeEvent:l}),this.panesDuringOnChange=void 0}getPaneProps(i){const{orientation:e,overlay:t,containsSplitter:n,...r}=i;return r}};b.displayName="Splitter";let D=b;exports.Splitter=D;

package/splitter/Splitter.mjs

@@ -22,23 +22,23 @@ const k = {
   /**
    * @hidden
    */
-  constructor(s) {
-    super(s), this._container = null, this.validatePanes = (t) => {
+  constructor(n) {
+    super(n), this._container = null, this.validatePanes = (t) => {
       if (!t.filter((i) => i.size === void 0).length)
         throw new Error("The Splitter should have at least one pane without a set size.");
     }, this.mapPaneOptions = (t, e) => {
       const i = this.orientation, { dragIndex: r, isDragging: a } = this.state, l = [];
-      for (let n = 0; n < e.length; n++) {
+      for (let s = 0; s < e.length; s++) {
         let o = !1;
-        const p = e[n];
+        const p = e[s];
         S.isValidElement(p) && (o = p.type.displayName === "Splitter");
         let h = !1;
-        a && r !== void 0 && (h = r === n || r + 1 === n), l.push({
+        a && r !== void 0 && (h = r === s || r + 1 === s), l.push({
           ...k,
           orientation: i,
           containsSplitter: o,
           overlay: h,
-          ...(t || [])[n]
+          ...(t || [])[s]
         });
       }
       return l;
@@ -46,7 +46,7 @@ const k = {
       const i = _(this).toLanguageString(O, w[O]);
       return t.map((r, a) => {
         let l;
-        const n = a * 2, o = n + 1;
+        const s = a * 2, o = s + 1;
         if (a + 1 < t.length) {
           const h = t[a + 1];
           l = /* @__PURE__ */ S.createElement(
@@ -68,7 +68,7 @@ const k = {
         return [/* @__PURE__ */ S.createElement(
           T,
           {
-            key: n,
+            key: s,
             ...r
           },
           e[a]
@@ -76,12 +76,12 @@ const k = {
       });
     }, this.onBarToggle = (t, e) => {
       const r = this.panesOptions(this.panesContent).map((a, l) => {
-        const n = this.getPaneProps(a);
+        const s = this.getPaneProps(a);
         return l === t ? {
-          ...n,
+          ...s,
           collapsed: !a.collapsed
         } : {
-          ...n
+          ...s
         };
       });
       this.props.onChange && this.props.onChange({
@@ -90,7 +90,7 @@ const k = {
         nativeEvent: e
       });
     }, this.onBarDragResize = (t, e, i, r, a) => {
-      const l = (/* @__PURE__ */ new Date()).getTime(), { pageX: n, pageY: o } = t, { prevElement: p, nextElement: h } = this.surroudingPanes(e);
+      const l = (/* @__PURE__ */ new Date()).getTime(), { pageX: s, pageY: o } = t, { prevElement: p, nextElement: h } = this.surroudingPanes(e);
       if (!p || !h)
         return;
       if (r) {
@@ -98,7 +98,7 @@ const k = {
           isDragging: !0,
           dragIndex: i,
           startTime: l,
-          originalX: n,
+          originalX: s,
           originalY: o,
           originalPrevSize: this.elementSize(p),
           originalNextSize: this.elementSize(h)
@@ -111,10 +111,10 @@ const k = {
         return;
       }
       let c;
-      this.orientation === "vertical" ? c = o - u : this.isRtl ? c = f - n : c = n - f, this.resize(i, i + 1, d, g, c, a, t), a && this.resetDragState();
+      this.orientation === "vertical" ? c = o - u : this.isRtl ? c = f - s : c = s - f, this.resize(i, i + 1, d, g, c, a, t), a && this.resetDragState();
     }, this.onBarKeyboardResize = (t, e, i, r) => {
-      const { prevElement: a, nextElement: l } = this.surroudingPanes(t), n = this.elementSize(a), o = this.elementSize(l);
-      this.resize(e, e + 1, n, o, i, !0, r);
+      const { prevElement: a, nextElement: l } = this.surroudingPanes(t), s = this.elementSize(a), o = this.elementSize(l);
+      this.resize(e, e + 1, s, o, i, !0, r);
     }, this.containerSize = () => this._container ? this.elementSize(this._container, !0) : 0, this.panesOptions = (t) => this.mapPaneOptions(this.panes, t), this.elementSize = (t, e) => {
       const i = e ? "client" : "offset";
       return this.orientation === "vertical" ? t[`${i}Height`] : t[`${i}Width`];
@@ -126,7 +126,7 @@ const k = {
       originalY: 0,
       originalPrevSize: 0,
       originalNextSize: 0,
-      panes: s.defaultPanes || []
+      panes: n.defaultPanes || []
     };
   }
   get isControlledState() {
@@ -142,13 +142,13 @@ const k = {
     return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
   }
   get panesContent() {
-    return S.Children.toArray(this.props.children).filter((s) => s);
+    return S.Children.toArray(this.props.children).filter((n) => n);
   }
   /**
    * @hidden
    */
   render() {
-    const s = this.panesContent, t = this.panesOptions(s), e = N(
+    const n = this.panesContent, t = this.panesOptions(n), e = N(
       "k-splitter",
       "k-splitter-flex",
       `k-splitter-${this.orientation}`,
@@ -157,25 +157,26 @@ const k = {
     return this.validatePanes(t), /* @__PURE__ */ S.createElement(
       "div",
       {
+        id: this.props.id,
         style: this.props.style,
         ref: (i) => this._container = i,
         className: e
       },
-      this.mapSplitterPanes(t, s)
+      this.mapSplitterPanes(t, n)
     );
   }
-  surroudingPanes(s) {
+  surroudingPanes(n) {
     return {
-      prevElement: s.previousElementSibling,
-      nextElement: s.nextElementSibling
+      prevElement: n.previousElementSibling,
+      nextElement: n.nextElementSibling
     };
   }
-  isPercent(s) {
-    return /%$/.test(s);
+  isPercent(n) {
+    return /%$/.test(n);
   }
-  toPixels(s, t) {
-    let e = parseInt(s, 10);
-    return this.isPercent(s) && (e = t * e / 100), e;
+  toPixels(n, t) {
+    let e = parseInt(n, 10);
+    return this.isPercent(n) && (e = t * e / 100), e;
   }
   resetDragState() {
     this.setState({
@@ -188,9 +189,9 @@ const k = {
       originalNextSize: 0
     });
   }
-  resize(s, t, e, i, r, a, l) {
-    const n = this.panesOptions(this.panesContent), o = n[s], p = n[t], h = e + i, d = this.containerSize(), g = (m) => this.toPixels(m, d), P = {
-      index: s,
+  resize(n, t, e, i, r, a, l) {
+    const s = this.panesOptions(this.panesContent), o = s[n], p = s[t], h = e + i, d = this.containerSize(), g = (m) => this.toPixels(m, d), P = {
+      index: n,
       initialSize: e,
       min: g(o.min) || h - g(p.max) || 0,
       max: g(o.max) || h - g(p.min) || h
@@ -200,14 +201,14 @@ const k = {
       min: g(p.min) || h - g(o.max) || 0,
       max: g(p.max) || h - g(o.min) || h
     }, u = (m, v) => {
-      const z = n[m.index], E = this.clamp(m.min, m.max, m.initialSize + v);
+      const z = s[m.index], E = this.clamp(m.min, m.max, m.initialSize + v);
       return this.isPercent(z.size || "") ? 100 * E / d + "%" : E + "px";
     };
     let c, x;
     this.fixedSize(o.size) && this.fixedSize(p.size) ? (c = u(P, r), x = u(f, -r)) : p.collapsible || this.fixedSize(p.size) ? x = u(f, -r) : c = u(P, r);
-    const C = n.map((m, v) => {
+    const C = s.map((m, v) => {
       const z = this.getPaneProps(m);
-      return v === s ? {
+      return v === n ? {
         ...z,
         size: c
       } : v === t ? {
@@ -225,8 +226,8 @@ const k = {
       nativeEvent: l
     }), this.panesDuringOnChange = void 0;
   }
-  getPaneProps(s) {
-    const { orientation: t, overlay: e, containsSplitter: i, ...r } = s;
+  getPaneProps(n) {
+    const { orientation: t, overlay: e, containsSplitter: i, ...r } = n;
     return r;
   }
 };

package/splitter/SplitterPane.js

@@ -5,4 +5,4 @@
  * 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 m=require("react"),b=require("@progress/kendo-react-common");function k(t){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(l,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return l.default=t,Object.freeze(l)}const s=k(m);class g extends s.Component{render(){const{id:l,size:e,collapsed:n,overlay:r,containsSplitter:a,collapsible:o,resizable:c,scrollable:i,keepMounted:p}=this.props,d=e&&e.length>0,u={flexBasis:e},f=b.classNames("k-pane",{"k-hidden":n,hidden:n,"k-pane-flex":a,"k-pane-static":!c&&!o||d,"k-scrollable":i});return s.createElement("div",{id:l,role:"group",style:u,className:f},!n||p?this.props.children:void 0,r?s.createElement("div",{className:"k-splitter-overlay k-overlay"}):void 0)}}exports.SplitterPane=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),k=require("@progress/kendo-react-common");function g(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const l=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,l.get?l:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const s=g(y);class v extends s.Component{render(){const{id:n,size:e,collapsed:l,overlay:a,containsSplitter:r,collapsible:o,resizable:c,scrollable:i,keepMounted:p,style:d,className:u}=this.props,m=e&&e.length>0,f={flexBasis:e,...d},b=k.classNames("k-pane",{"k-hidden":l,hidden:l,"k-pane-flex":r,"k-pane-static":!c&&!o||m,"k-scrollable":i},u);return s.createElement("div",{id:n,role:"group",style:f,className:b},!l||p?this.props.children:void 0,a?s.createElement("div",{className:"k-splitter-overlay k-overlay"}):void 0)}}exports.SplitterPane=v;

package/splitter/SplitterPane.mjs

@@ -7,8 +7,8 @@
  */
 "use client";
 import * as l from "react";
-import { classNames as k } from "@progress/kendo-react-common";
-class f extends l.Component {
+import { classNames as h } from "@progress/kendo-react-common";
+class x extends l.Component {
   render() {
     const {
       id: t,
@@ -16,29 +16,33 @@ class f extends l.Component {
       collapsed: s,
       overlay: a,
       containsSplitter: o,
-      collapsible: r,
-      resizable: i,
-      scrollable: n,
-      keepMounted: c
-    } = this.props, p = e && e.length > 0, d = {
-      flexBasis: e
-    }, m = k(
+      collapsible: n,
+      resizable: r,
+      scrollable: i,
+      keepMounted: c,
+      style: p,
+      className: d
+    } = this.props, m = e && e.length > 0, k = {
+      flexBasis: e,
+      ...p
+    }, v = h(
       "k-pane",
       {
         "k-hidden": s,
         hidden: s,
         "k-pane-flex": o,
-        "k-pane-static": !i && !r || p,
-        "k-scrollable": n
-      }
+        "k-pane-static": !r && !n || m,
+        "k-scrollable": i
+      },
+      d
     );
     return /* @__PURE__ */ l.createElement(
       "div",
       {
         id: t,
         role: "group",
-        style: d,
-        className: m
+        style: k,
+        className: v
       },
       !s || c ? this.props.children : void 0,
       a ? /* @__PURE__ */ l.createElement("div", { className: "k-splitter-overlay k-overlay" }) : void 0
@@ -46,5 +50,5 @@ class f extends l.Component {
   }
 }
 export {
-  f as SplitterPane
+  x as SplitterPane
 };

package/tabstrip/TabStripNavigation.js

@@ -5,4 +5,4 @@
  * 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"),f=require("prop-types"),C=require("./TabStripNavigationItem.js"),k=require("@progress/kendo-react-common"),A=require("@progress/kendo-react-buttons"),m=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",P=class P 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,d=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===b&&o<0&&(o+=r,d+=r),t===S&&o<c&&(o-=r,d-=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 u=o===0,g=s.type==="click"?v:void 0;if(n){const T=this.isRtl()?Math.round(d)<=e.clientWidth||Math.floor(d)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:u,disabledNext:T}),e.scrollTo({left:o,behavior:g})}else this.setState({disabledPrev:u,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:g})},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()?m.caretAltRightIcon:m.caretAltLeftIcon:m.caretAltUpIcon},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?m.caretAltLeftIcon:m.caretAltRightIcon:m.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,renderAllContent:o}=this.props,i=a.Children.count(s),d=a.Children.toArray(s);let u;s&&(u=x(i).map((y,p,w)=>{const N={active:l===p,disabled:d[p].props.disabled,index:p,title:d[p].props.title,first:p===0,last:p===w.length-1,contentPanelId:r,renderAllContent:o,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"}),T=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:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},u),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:T,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},u))}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")}};P.propTypes={children:f.oneOfType([f.element,f.arrayOf(f.element)]),onSelect:f.func,onKeyDown:f.func,selected:f.number,tabIndex:f.number};let I=P;exports.TabStripNavigation=I;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),f=require("prop-types"),C=require("./TabStripNavigationItem.js"),P=require("@progress/kendo-react-common"),x=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),L=require("@progress/kendo-react-intl"),v=require("./messages/index.js");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(A),E=h=>Array.apply(null,Array(h)),y=h=>h.preventDefault(),g="smooth",u="prev",S="next",k=class k 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?u:S;this.setNewScrollPosition(s,t)},this.arrowClickPrev=t=>{this.handleArrowClick(u,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,d=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===u&&o<0&&(o+=r,d+=r),t===S&&o<c&&(o-=r,d-=r),o=Math.min(0,Math.min(c,o))):(t===u&&o>0&&(o-=r,i+=r),t===S&&o<c&&(o+=r,i-=r),o=Math.max(0,Math.min(c,o)));const b=o===0,T=s.type==="click"?g:void 0;if(n){const w=this.isRtl()?Math.round(d)<=e.clientWidth||Math.floor(d)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:b,disabledNext:w}),e.scrollTo({left:o,behavior:T})}else this.setState({disabledPrev:b,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:T})},this.renderArrow=(t,s)=>{const e=this.horizontalScroll(),n=L.provideLocalizationService(this),c={prev:{arrowTab:"k-tabstrip-prev",fontIcon:e?this.isRtl()?"caret-alt-right":"caret-alt-left":"caret-alt-up",svgIcon:e?this.isRtl()?m.caretAltRightIcon:m.caretAltLeftIcon:m.caretAltUpIcon,title:n.toLanguageString(v.prevArrowTitle,v.messages[v.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:e?this.isRtl()?"caret-alt-left":"caret-alt-right":"caret-alt-down",svgIcon:e?this.isRtl()?m.caretAltLeftIcon:m.caretAltRightIcon:m.caretAltDownIcon,title:n.toLanguageString(v.nextArrowTitle,v.messages[v.nextArrowTitle])}},r=(t===u?this.props.prevButton:this.props.nextButton)||x.Button,o=t===u?this.arrowClickPrev:this.arrowClickNext;return a.createElement(r,{disabled:s,className:`${c[t].arrowTab}`,onClick:o,icon:c[t].fontIcon,svgIcon:c[t].svgIcon,onMouseDown:y,tabIndex:-1,fillMode:"flat",title:c[t].title})},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,renderAllContent:o}=this.props,i=a.Children.count(s),d=a.Children.toArray(s);let b;s&&(b=E(i).map((z,p,N)=>{const R={active:l===p,disabled:d[p].props.disabled,index:p,title:d[p].props.title,first:p===0,last:p===N.length-1,contentPanelId:r,renderAllContent:o,id:c,onSelect:e};return a.createElement(C.TabStripNavigationItem,{key:p,...R})}));const T=P.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),w=P.classNames("k-tabstrip-items","k-reset");return a.createElement("div",{className:T},this.props.scrollable?a.createElement(a.Fragment,null,this.renderArrow(u,this.state.disabledPrev),a.createElement("ul",{ref:this.itemsNavRef,className:w,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},b),this.renderArrow(S,this.state.disabledNext)):a.createElement("ul",{className:w,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},b))}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:g})):i+n>e-r&&(o=r+i-n,l.scrollTo({[c]:o,behavior:g}))}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:g})):r>i&&(o=i,l.scrollTo({[c]:o,behavior:g}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};k.propTypes={children:f.oneOfType([f.element,f.arrayOf(f.element)]),onSelect:f.func,onKeyDown:f.func,selected:f.number,tabIndex:f.number};let I=k;exports.TabStripNavigation=I;

package/tabstrip/TabStripNavigation.mjs

@@ -8,11 +8,13 @@
 "use client";
 import * as a from "react";
 import h from "prop-types";
-import { TabStripNavigationItem as g } 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 = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b = "smooth", d = "prev", u = "next", T = class T extends a.Component {
+import { TabStripNavigationItem as L } from "./TabStripNavigationItem.mjs";
+import { classNames as T } from "@progress/kendo-react-common";
+import { Button as M } from "@progress/kendo-react-buttons";
+import { caretAltRightIcon as I, caretAltLeftIcon as P, caretAltUpIcon as E, caretAltDownIcon as W } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as z } from "@progress/kendo-react-intl";
+import { prevArrowTitle as k, messages as N, nextArrowTitle as C } from "./messages/index.mjs";
+const D = (g) => Array.apply(null, Array(g)), H = (g) => g.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();
@@ -44,29 +46,32 @@ const E = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b =
           disabledNext: Math.round(i) <= e.clientHeight || Math.floor(i) <= e.clientHeight
         }), e.scrollTo({ top: o, behavior: v });
     }, this.renderArrow = (t, s) => {
-      const e = this.horizontalScroll(), n = {
+      const e = this.horizontalScroll(), n = z(this), c = {
         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
+          svgIcon: e ? this.isRtl() ? I : P : E,
+          title: n.toLanguageString(k, N[k])
         },
         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
+          svgIcon: e ? this.isRtl() ? P : I : W,
+          title: n.toLanguageString(C, N[C])
         }
-      }, c = (t === d ? this.props.prevButton : this.props.nextButton) || x, r = t === d ? this.arrowClickPrev : this.arrowClickNext;
+      }, r = (t === d ? this.props.prevButton : this.props.nextButton) || M, o = t === d ? this.arrowClickPrev : this.arrowClickNext;
       return /* @__PURE__ */ a.createElement(
-        c,
+        r,
         {
           disabled: s,
-          className: `${n[t].arrowTab}`,
-          onClick: r,
-          icon: n[t].fontIcon,
-          svgIcon: n[t].svgIcon,
-          onMouseDown: L,
+          className: `${c[t].arrowTab}`,
+          onClick: o,
+          icon: c[t].fontIcon,
+          svgIcon: c[t].svgIcon,
+          onMouseDown: H,
           tabIndex: -1,
-          fillMode: "flat"
+          fillMode: "flat",
+          title: c[t].title
         }
       );
     }, this.state = {
@@ -96,25 +101,25 @@ const E = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b =
   render() {
     const { selected: l, tabPosition: t, children: s, onSelect: e, onKeyDown: n, navItemId: c, contentPanelId: r, renderAllContent: o } = this.props, i = a.Children.count(s), f = a.Children.toArray(s);
     let m;
-    s && (m = E(i).map((W, p, C) => {
-      const R = {
+    s && (m = D(i).map((y, p, x) => {
+      const A = {
         active: l === p,
         disabled: f[p].props.disabled,
         index: p,
         title: f[p].props.title,
         first: p === 0,
-        last: p === C.length - 1,
+        last: p === x.length - 1,
         contentPanelId: r,
         renderAllContent: o,
         id: c,
         onSelect: e
       };
-      return /* @__PURE__ */ a.createElement(g, { key: p, ...R });
+      return /* @__PURE__ */ a.createElement(L, { key: p, ...A });
     }));
-    const v = I("k-tabstrip-items-wrapper", {
+    const v = T("k-tabstrip-items-wrapper", {
       "k-hstack": t === "top" || t === "bottom",
       "k-vstack": t === "left" || t === "right"
-    }), S = I("k-tabstrip-items", "k-reset");
+    }), S = T("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",
       {
@@ -156,7 +161,7 @@ const E = (w) => Array.apply(null, Array(w)), L = (w) => w.preventDefault(), b =
     return /top|bottom/.test(this.props.tabPosition || "top");
   }
 };
-T.propTypes = {
+w.propTypes = {
   children: h.oneOfType([
     h.element,
     h.arrayOf(h.element)
@@ -166,7 +171,7 @@ T.propTypes = {
   selected: h.number,
   tabIndex: h.number
 };
-let N = T;
+let R = w;
 export {
-  N as TabStripNavigation
+  R as TabStripNavigation
 };

package/tabstrip/messages/index.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 e="prevArrow.title",r="nextArrow.title",t={[e]:"Previous tab arrow",[r]:"Next tab arrow"};exports.messages=t;exports.nextArrowTitle=r;exports.prevArrowTitle=e;

package/tabstrip/messages/index.mjs

@@ -0,0 +1,17 @@
+/**
+ * @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";
+const r = "prevArrow.title", t = "nextArrow.title", e = {
+  [r]: "Previous tab arrow",
+  [t]: "Next tab arrow"
+};
+export {
+  e as messages,
+  t as nextArrowTitle,
+  r as prevArrowTitle
+};