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

package/tabstrip/TabStrip.mjs

@@ -5,27 +5,39 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import l from "prop-types";
-import { TabStripNavigation as h } from "./TabStripNavigation.mjs";
-import { TabStripContent as b } from "./TabStripContent.mjs";
-import { validatePackage as u, shouldShowValidationUI as g, Navigation as S, classNames as y, WatermarkOverlay as x } from "@progress/kendo-react-common";
-import { packageMetadata as m } from "../package-metadata.mjs";
-const d = class d extends a.Component {
-  constructor(o) {
-    super(o), this.tabStripRef = a.createRef(), this.showLicenseWatermark = !1, this.onSelect = (n) => {
-      this.props.selected !== n && this.props.onSelect && this.props.onSelect({
-        selected: n
+import * as c from "react";
+import r from "prop-types";
+import { TabStripNavigation as m } from "./TabStripNavigation.mjs";
+import { TabStripContent as g } from "./TabStripContent.mjs";
+import { validatePackage as v, shouldShowValidationUI as y, Navigation as k, classNames as x, kendoThemeMaps as I, WatermarkOverlay as P } from "@progress/kendo-react-common";
+import { packageMetadata as u } from "../package-metadata.mjs";
+const p = class p extends c.Component {
+  constructor(l) {
+    super(l), this.tabStripRef = c.createRef(), this.itemsNavRef = c.createRef(), this.showLicenseWatermark = !1, this.onScroll = () => {
+      const i = this.horizontalScroll(), o = this.itemsNavRef.current;
+      if (!o)
+        return;
+      const e = o.scrollLeft, t = o.clientWidth, n = o.scrollWidth, s = o.scrollTop, a = o.scrollHeight, d = o.clientHeight;
+      let h = null;
+      const S = i ? n > t : a > d, f = this.props.dir === "rtl";
+      S ? i ? e + t === n || (f && t - e) === n ? h = "end" : e === 0 || f && -e === 0 ? h = "start" : e > 0 && e + t < n || -e > 0 && t - e < n ? h = "middle" : h = null : a - (s + d) === 0 ? h = "bottom" : s === 0 ? h = "top" : s > 0 && a - (s + d) > 0 ? h = "middle" : h = null : h = null, this.setState({ containerScrollPosition: h });
+    }, this.handleResize = () => {
+      this.onScroll();
+    }, this.onSelect = (i) => {
+      this.props.selected !== i && this.props.onSelect && this.props.onSelect({
+        selected: i
       });
-    }, this.onKeyDown = (n) => {
-      this.navigation.triggerKeyboardEvent(n);
-    }, this.onKeyboardSelect = (n) => {
-      const i = this.children();
-      i && i[n].props.disabled || this.onSelect(n);
-    }, this.renderContent = (n) => {
-      const { selected: i, children: t, tabContentStyle: e } = n, r = a.Children.count(t);
-      return i < r && i > -1 ? /* @__PURE__ */ a.createElement(b, { index: i, ...n, style: e }) : null;
-    }, u(m), this.showLicenseWatermark = g(m);
+    }, this.onKeyDown = (i) => {
+      this.navigation && this.navigation.triggerKeyboardEvent(i);
+    }, this.onKeyboardSelect = (i) => {
+      const o = this.children();
+      o && o[i].props.disabled || this.onSelect(i);
+    }, this.renderContent = (i) => {
+      const { selected: o, children: e, tabContentStyle: t } = i, n = c.Children.count(e);
+      return o < n && o > -1 ? /* @__PURE__ */ c.createElement(g, { index: o, ...i, style: t }) : null;
+    }, v(u), this.showLicenseWatermark = y(u), this.state = {
+      containerScrollPosition: null
+    }, this.itemsNavRef = c.createRef();
   }
   get contentPanelId() {
     return this.props.id + "-content-panel-id";
@@ -35,9 +47,9 @@ const d = class d extends a.Component {
   }
   /** @hidden */
   componentDidMount() {
-    var i;
-    const o = this.tabStripRef.current, n = o && getComputedStyle(o).direction === "rtl" || !1;
-    o && (this.navigation = new S({
+    var o;
+    const l = this.tabStripRef.current, i = l && getComputedStyle(l).direction === "rtl" || !1;
+    l && (this.navigation = new k({
       tabIndex: 0,
       root: this.tabStripRef,
       rovingTabIndex: !0,
@@ -45,106 +57,126 @@ const d = class d extends a.Component {
       selectors: [".k-tabstrip .k-tabstrip-item"],
       keyboardEvents: {
         keydown: {
-          ArrowLeft: (t, e, r) => {
-            r.preventDefault();
-            const s = e.elements.indexOf(t), c = s !== 0 ? s - 1 : e.elements.length - 1, p = s !== e.elements.length - 1 ? s + 1 : 0;
-            n ? (e.focusNext(t), this.onKeyboardSelect(p)) : (e.focusPrevious(t), this.onKeyboardSelect(c));
+          ArrowLeft: (e, t, n) => {
+            n.preventDefault();
+            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1, d = s !== t.elements.length - 1 ? s + 1 : 0;
+            i ? (t.focusNext(e), this.onKeyboardSelect(d)) : (t.focusPrevious(e), this.onKeyboardSelect(a));
           },
-          ArrowRight: (t, e, r) => {
-            r.preventDefault();
-            const s = e.elements.indexOf(t), c = s !== 0 ? s - 1 : e.elements.length - 1, p = s !== e.elements.length - 1 ? s + 1 : 0;
-            n ? (e.focusPrevious(t), this.onKeyboardSelect(c)) : (e.focusNext(t), this.onKeyboardSelect(p));
+          ArrowRight: (e, t, n) => {
+            n.preventDefault();
+            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1, d = s !== t.elements.length - 1 ? s + 1 : 0;
+            i ? (t.focusPrevious(e), this.onKeyboardSelect(a)) : (t.focusNext(e), this.onKeyboardSelect(d));
           },
-          ArrowDown: (t, e, r) => {
-            r.preventDefault();
-            const s = e.elements.indexOf(t), c = s !== e.elements.length - 1 ? s + 1 : 0;
-            e.focusNext(t), this.onKeyboardSelect(c);
+          ArrowDown: (e, t, n) => {
+            n.preventDefault();
+            const s = t.elements.indexOf(e), a = s !== t.elements.length - 1 ? s + 1 : 0;
+            t.focusNext(e), this.onKeyboardSelect(a);
           },
-          ArrowUp: (t, e, r) => {
-            r.preventDefault();
-            const s = e.elements.indexOf(t), c = s !== 0 ? s - 1 : e.elements.length - 1;
-            e.focusPrevious(t), this.onKeyboardSelect(c);
+          ArrowUp: (e, t, n) => {
+            n.preventDefault();
+            const s = t.elements.indexOf(e), a = s !== 0 ? s - 1 : t.elements.length - 1;
+            t.focusPrevious(e), this.onKeyboardSelect(a);
           },
-          Home: (t, e, r) => {
-            r.preventDefault(), e.focusElement(e.first, t), this.onKeyboardSelect(0);
+          Home: (e, t, n) => {
+            n.preventDefault(), t.focusElement(t.first, e), this.onKeyboardSelect(0);
           },
-          End: (t, e, r) => {
-            r.preventDefault(), e.focusElement(e.last, t), this.onKeyboardSelect(e.elements.length - 1);
+          End: (e, t, n) => {
+            n.preventDefault(), t.focusElement(t.last, e), this.onKeyboardSelect(t.elements.length - 1);
           }
         }
       }
-    }), (i = this.navigation) == null || i.initializeRovingTab(this.props.selected));
+    }), (o = this.navigation) == null || o.initializeRovingTab(this.props.selected), this.onScroll(), this.resizeObserver = new ResizeObserver(() => this.onScroll()), this.tabStripRef.current && this.resizeObserver.observe(this.tabStripRef.current));
   }
   /** @hidden */
   componentWillUnmount() {
-    var o;
-    (o = this.navigation) == null || o.removeFocusListener();
+    var l;
+    (l = this.navigation) == null || l.removeFocusListener();
+  }
+  horizontalScroll() {
+    return /top|bottom/.test(this.props.tabPosition || "top");
   }
   /**
    * @hidden
    */
   render() {
-    const o = {
+    const l = {
+      itemsNavRef: this.itemsNavRef,
       ...this.props,
       children: this.children(),
       contentPanelId: this.contentPanelId,
       renderAllContent: this.props.renderAllContent,
       navItemId: this.navItemId,
       onKeyDown: this.onKeyDown,
-      onSelect: this.onSelect
-    }, { tabPosition: n, tabIndex: i } = o, t = n === "bottom", e = y(
+      onSelect: this.onSelect,
+      onScroll: this.onScroll,
+      containerScrollPosition: this.state.containerScrollPosition,
+      scrollButtons: this.props.scrollButtons === "hidden" || this.state.containerScrollPosition === null && this.props.scrollButtons === "auto" ? "hidden" : "visible"
+    }, { scrollable: i, scrollButtons: o, size: e, tabPosition: t, tabIndex: n } = l, s = t === "bottom", a = x(
       "k-tabstrip k-pos-relative",
       {
-        "k-tabstrip-left": n === "left",
-        "k-tabstrip-right": n === "right",
-        "k-tabstrip-bottom": n === "bottom",
-        "k-tabstrip-top": n === "top",
-        "k-tabstrip-scrollable": this.props.scrollable
+        [`k-tabstrip-${I.sizeMap[e] || e}`]: e,
+        "k-tabstrip-left": t === "left",
+        "k-tabstrip-right": t === "right",
+        "k-tabstrip-bottom": t === "bottom",
+        "k-tabstrip-top": t === "top",
+        "k-tabstrip-scrollable": i,
+        "k-tabstrip-scrollable-start k-tabstrip-scrollable-end": i && o === "visible",
+        "k-tabstrip-scrollable-start": i && (o === "auto" || !o) && (this.state.containerScrollPosition === "end" || this.state.containerScrollPosition === "middle"),
+        "k-tabstrip-scrollable-end": i && o === "auto" && (this.state.containerScrollPosition === "start" || this.state.containerScrollPosition === "middle")
       },
       this.props.className
     );
-    return /* @__PURE__ */ a.createElement(
+    return /* @__PURE__ */ c.createElement(
       "div",
       {
         id: this.props.id,
         ref: this.tabStripRef,
         dir: this.props.dir,
-        className: e,
-        style: this.props.style
+        className: a,
+        style: this.props.style,
+        onScroll: this.onScroll,
+        onResize: this.handleResize
       },
-      !t && /* @__PURE__ */ a.createElement(h, { ...o, tabIndex: i }),
-      this.renderContent(o),
-      t && /* @__PURE__ */ a.createElement(h, { ...o, tabIndex: i }),
-      this.showLicenseWatermark && /* @__PURE__ */ a.createElement(x, null)
+      !s && /* @__PURE__ */ c.createElement(m, { ...l, tabIndex: n }),
+      this.renderContent(l),
+      s && /* @__PURE__ */ c.createElement(m, { ...l, tabIndex: n }),
+      this.showLicenseWatermark && /* @__PURE__ */ c.createElement(P, null)
     );
   }
   children() {
-    return a.Children.toArray(this.props.children).filter((o) => o);
+    return c.Children.toArray(this.props.children).filter((l) => l);
   }
 };
-d.propTypes = {
-  animation: l.bool,
-  children: l.node,
-  onSelect: l.func,
-  selected: l.number,
-  style: l.object,
-  tabContentStyle: l.object,
-  tabPosition: l.string,
-  tabAlignment: l.string,
-  tabIndex: l.number,
-  className: l.string,
-  dir: l.string
-}, d.defaultProps = {
+p.propTypes = {
+  id: r.string,
+  animation: r.bool,
+  children: r.node,
+  onSelect: r.func,
+  selected: r.number,
+  style: r.object,
+  tabContentStyle: r.object,
+  tabPosition: r.string,
+  tabAlignment: r.string,
+  tabIndex: r.number,
+  className: r.string,
+  dir: r.string,
+  renderAllContent: r.bool,
+  size: r.oneOf(["small", "medium", "large", null]),
+  scrollButtons: r.oneOf(["auto", "visible", "hidden"]),
+  scrollButtonsPosition: r.oneOf(["split", "start", "end", "around", "before", "after"])
+}, p.defaultProps = {
   animation: !0,
   tabPosition: "top",
   tabAlignment: "start",
   keepTabsMounted: !1,
   buttonScrollSpeed: 100,
-  scrollButtonsPosition: "around",
   mouseScrollSpeed: 10,
+  scrollButtons: "auto",
+  scrollButtonsPosition: "split",
+  size: "medium",
   renderAllContent: !1
 };
-let f = d;
+let b = p;
 export {
-  f as TabStrip
+  b as TabStrip
 };

package/tabstrip/TabStripNavigation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),f=require("prop-types"),M=require("./TabStripNavigationItem.js"),N=require("@progress/kendo-react-common"),E=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),y=require("@progress/kendo-react-intl"),v=require("./messages/index.js");function z(h){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(s,t,r.get?r:{enumerable:!0,get:()=>h[t]})}}return s.default=h,Object.freeze(s)}const a=z(L),O=h=>Array.apply(null,Array(h)),W=h=>h.preventDefault(),S="smooth",p="prev",g="next",k=class k extends a.Component{constructor(s){super(s),this.itemsNavRef=a.createRef(),this.isRtl=()=>this.props.dir==="rtl",this.onWheel=t=>{t.stopPropagation();const r=t.deltaY<0?p:g;this.setNewScrollPosition(r,t)},this.arrowClickPrev=t=>{this.handleArrowClick(p,t)},this.arrowClickNext=t=>{this.handleArrowClick(g,t)},this.handleArrowClick=(t,r)=>{this.setNewScrollPosition(t,r)},this.setNewScrollPosition=(t,r)=>{const e=this.itemsNavRef.current;if(!e)return;const c=this.horizontalScroll(),n=c?e.scrollWidth-e.offsetWidth:e.scrollHeight-e.offsetHeight,l=(r.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let o=c?e.scrollLeft:e.scrollTop,i=c?e.scrollWidth-e.scrollLeft:e.scrollHeight-e.scrollTop,u=e.scrollWidth-e.scrollLeft*-1;this.isRtl()&&this.horizontalScroll()?(t===p&&o<0&&(o+=l,u+=l),t===g&&o<n&&(o-=l,u-=l),o=Math.min(0,Math.min(n,o))):(t===p&&o>0&&(o-=l,i+=l),t===g&&o<n&&(o+=l,i-=l),o=Math.max(0,Math.min(n,o)));const d=o===0,T=r.type==="click"?S:void 0;if(c){const w=this.isRtl()?Math.round(u)<=e.clientWidth||Math.floor(u)<=e.clientWidth:Math.round(i)<=e.clientWidth||Math.floor(i)<=e.clientWidth;this.setState({disabledPrev:d,disabledNext:w}),e.scrollTo({left:o,behavior:T})}else this.setState({disabledPrev:d,disabledNext:Math.round(i)<=e.clientHeight||Math.floor(i)<=e.clientHeight}),e.scrollTo({top:o,behavior:T})},this.renderArrow=(t,r)=>{const e=this.horizontalScroll(),c=y.provideLocalizationService(this),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,title:c.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:c.toLanguageString(v.nextArrowTitle,v.messages[v.nextArrowTitle])}},l=(t===p?this.props.prevButton:this.props.nextButton)||E.Button,o=t===p?this.arrowClickPrev:this.arrowClickNext;return a.createElement(l,{disabled:r,className:`${n[t].arrowTab}`,onClick:o,icon:n[t].fontIcon,svgIcon:n[t].svgIcon,onMouseDown:W,tabIndex:-1,fillMode:"flat",title:n[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(s){const{scrollable:t,selected:r}=this.props;t&&s.selected!==r&&(this.scrollToSelected(),this.setState({disabledPrev:r===0,disabledNext:r===a.Children.count(this.props.children)-1}))}render(){const{selected:s,tabPosition:t,tabAlignment:r,children:e,onSelect:c,onKeyDown:n,navItemId:l,contentPanelId:o,renderAllContent:i,scrollable:u,scrollButtonsPosition:d}=this.props,T=a.Children.count(e),w=a.Children.toArray(e);let I;e&&(I=O(T).map((D,b,x)=>{const C={active:s===b,disabled:w[b].props.disabled,index:b,title:w[b].props.title,first:b===0,last:b===x.length-1,contentPanelId:o,renderAllContent:i,id:l,onSelect:c};return a.createElement(M.TabStripNavigationItem,{key:b,...C})}));const R=N.classNames("k-tabstrip-items-wrapper",{"k-hstack":t==="top"||t==="bottom","k-vstack":t==="left"||t==="right"}),A=N.classNames("k-tabstrip-items","k-reset",`k-tabstrip-items-${r}`);return a.createElement("div",{className:R},u?a.createElement(a.Fragment,null,(d==="around"||d==="before")&&this.renderArrow(p,this.state.disabledPrev),d==="before"&&this.renderArrow(g,this.state.disabledNext),a.createElement("ul",{ref:this.itemsNavRef,className:A,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n,onWheel:this.onWheel,"aria-orientation":t==="left"||t==="right"?"vertical":void 0},I),d==="after"&&this.renderArrow(p,this.state.disabledPrev),(d==="around"||d==="after")&&this.renderArrow(g,this.state.disabledNext)):a.createElement("ul",{className:A,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:n},I))}scrollToSelected(){const s=this.itemsNavRef.current,t=s&&s.children[this.props.selected||0];if(t instanceof HTMLElement&&s instanceof HTMLElement){const r=this.horizontalScroll(),e=r?s.offsetWidth:s.offsetHeight,c=r?t.offsetWidth:t.offsetHeight,n=r?"left":"top";let l=r?s.scrollLeft:s.scrollTop,o=0;if(this.isRtl()){const i=t.offsetLeft;l=l*-1,i<0?(o=i-c+s.offsetLeft,s.scrollTo({[n]:o,behavior:S})):i+c>e-l&&(o=l+i-c,s.scrollTo({[n]:o,behavior:S}))}else{const i=r?t.offsetLeft-s.offsetLeft:t.offsetTop-s.offsetTop;l+e<i+c?(o=i+c-e,s.scrollTo({[n]:o,behavior:S})):l>i&&(o=i,s.scrollTo({[n]:o,behavior:S}))}}}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 P=k;exports.TabStripNavigation=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react"),n=require("prop-types"),E=require("./TabStripNavigationItem.js"),w=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-svg-icons"),x=require("@progress/kendo-react-intl"),b=require("./messages/index.js");function y(d){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>d[e]})}}return t.default=d,Object.freeze(t)}const h=y(L),M=d=>Array.apply(null,Array(d)),v="smooth",f="prev",S="next",I=class I extends h.Component{constructor(){super(...arguments),this.itemsNavRef=this.props.itemsNavRef||h.createRef(),this.onScroll=()=>{var t,e;(e=(t=this.props).onScroll)==null||e.call(t)},this.isRtl=()=>this.props.dir==="rtl",this.arrowClickPrev=t=>{this.handleArrowClick(f,t)},this.arrowClickNext=t=>{this.handleArrowClick(S,t)},this.handleArrowClick=(t,e)=>{this.setNewScrollPosition(t,e)},this.setNewScrollPosition=(t,e)=>{const o=this.itemsNavRef.current;if(!o)return;const r=this.horizontalScroll(),l=r?o.scrollWidth-o.offsetWidth:o.scrollHeight-o.offsetHeight,i=(e.type==="click"?this.props.buttonScrollSpeed:this.props.mouseScrollSpeed)||0;let s=r?o.scrollLeft:o.scrollTop;this.isRtl()&&this.horizontalScroll()?(t===f&&s<0&&(s+=i),t===S&&s<l&&(s-=i),s=Math.min(0,Math.min(l,s))):(t===f&&s>0&&(s-=i),t===S&&s<l&&(s+=i),s=Math.max(0,Math.min(l,s)));const c=e.type==="click"?v:void 0;r?o.scrollTo({left:s,behavior:c}):o.scrollTo({top:s,behavior:c})},this.renderArrow=t=>{const e=this.horizontalScroll(),o=x.provideLocalizationService(this),r={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:o.toLanguageString(b.prevArrowTitle,b.messages[b.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:o.toLanguageString(b.nextArrowTitle,b.messages[b.nextArrowTitle])}},l=(t===f?this.props.prevButton:this.props.nextButton)||B.Button,i=t===f?this.arrowClickPrev:this.arrowClickNext,s=this.props.containerScrollPosition===null||t===f&&(this.props.containerScrollPosition==="start"||this.props.containerScrollPosition==="top")||t===S&&(this.props.containerScrollPosition==="end"||this.props.containerScrollPosition==="bottom");return h.createElement(l,{disabled:s,className:w.classNames(`${r[t].arrowTab}`),onClick:i,icon:r[t].fontIcon,svgIcon:r[t].svgIcon,size:this.props.size,tabIndex:-1,fillMode:"flat",title:r[t].title})}}componentDidMount(){this.props.scrollable&&this.scrollToSelected()}componentDidUpdate(t){const{scrollable:e,selected:o}=this.props;e&&t.selected!==o&&this.scrollToSelected()}render(){const{selected:t,tabPosition:e,tabAlignment:o,children:r,onSelect:l,onKeyDown:i,navItemId:s,contentPanelId:c,renderAllContent:a,scrollable:R,scrollButtons:g,scrollButtonsPosition:p}=this.props,N=h.Children.count(r),A=h.Children.toArray(r);let T;r&&(T=M(N).map((D,u,O)=>{const z={active:t===u,disabled:A[u].props.disabled,index:u,title:A[u].props.title,first:u===0,last:u===O.length-1,contentPanelId:c,renderAllContent:a,id:s,onSelect:l,onScroll:this.onScroll};return h.createElement(E.TabStripNavigationItem,{key:u,...z})}));const C=w.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":e==="top"||e==="bottom","k-vstack":e==="left"||e==="right"}),P=w.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${o}`);return h.createElement("div",{className:C},R?h.createElement(h.Fragment,null,g!=="hidden"&&p&&["split","start","around","before"].includes(p)&&this.renderArrow(f),g!=="hidden"&&(p==="start"||p==="before")&&this.renderArrow(S),h.createElement("ul",{ref:this.itemsNavRef,className:P,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:i,onScroll:this.onScroll,"aria-orientation":e==="left"||e==="right"?"vertical":void 0},T),g!=="hidden"&&(p==="end"||p==="after")&&this.renderArrow(f),g!=="hidden"&&p&&["split","end","around","after"].includes(p)&&this.renderArrow(S)):h.createElement("ul",{className:P,role:"tablist",tabIndex:this.props.tabIndex,onKeyDown:i},T))}scrollToSelected(){const t=this.itemsNavRef.current,e=t&&t.children[this.props.selected||0];if(e instanceof HTMLElement&&t instanceof HTMLElement){const o=this.horizontalScroll(),r=o?t.offsetWidth:t.offsetHeight,l=o?e.offsetWidth:e.offsetHeight,i=o?"left":"top";let s=o?t.scrollLeft:t.scrollTop,c=0;if(this.isRtl()){const a=e.offsetLeft;s=s*-1,a<0?(c=a-l+t.offsetLeft,t.scrollTo({[i]:c,behavior:v})):a+l>r-s&&(c=s+a-l,t.scrollTo({[i]:c,behavior:v}))}else{const a=o?e.offsetLeft-t.offsetLeft:e.offsetTop-t.offsetTop;s+r<a+l?(c=a+l-r,t.scrollTo({[i]:c,behavior:v})):s>a&&(c=a,t.scrollTo({[i]:c,behavior:v}))}}}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}};I.propTypes={children:n.oneOfType([n.element,n.arrayOf(n.element)]),onSelect:n.func,onKeyDown:n.func,onScroll:n.func,selected:n.number,tabIndex:n.number,scrollable:n.bool,size:n.oneOf(["small","medium","large"]),scrollButtons:n.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:n.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:n.oneOf(["start","end","top","bottom","middle",null])};let k=I;exports.TabStripNavigation=k;

package/tabstrip/TabStripNavigation.mjs

@@ -5,77 +5,63 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
-import f from "prop-types";
-import { TabStripNavigationItem as W } from "./TabStripNavigationItem.mjs";
-import { classNames as I } from "@progress/kendo-react-common";
-import { Button as z } from "@progress/kendo-react-buttons";
-import { caretAltRightIcon as k, caretAltLeftIcon as A, caretAltUpIcon as D, caretAltDownIcon as H } from "@progress/kendo-svg-icons";
+import * as h from "react";
+import n from "prop-types";
+import { TabStripNavigationItem as x } from "./TabStripNavigationItem.mjs";
+import { classNames as v } from "@progress/kendo-react-common";
+import { Button as M } from "@progress/kendo-react-buttons";
+import { caretAltRightIcon as k, caretAltLeftIcon as I, caretAltUpIcon as D, caretAltDownIcon as H } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as y } from "@progress/kendo-react-intl";
-import { prevArrowTitle as N, messages as x, nextArrowTitle as C } from "./messages/index.mjs";
-const B = (w) => Array.apply(null, Array(w)), O = (w) => w.preventDefault(), u = "smooth", d = "prev", b = "next", T = class T extends a.Component {
-  constructor(s) {
-    super(s), this.itemsNavRef = a.createRef(), this.isRtl = () => this.props.dir === "rtl", this.onWheel = (t) => {
-      t.stopPropagation();
-      const r = t.deltaY < 0 ? d : b;
-      this.setNewScrollPosition(r, t);
-    }, this.arrowClickPrev = (t) => {
-      this.handleArrowClick(d, t);
+import { prevArrowTitle as A, messages as P, nextArrowTitle as R } from "./messages/index.mjs";
+const W = (z) => Array.apply(null, Array(z)), b = "smooth", f = "prev", m = "next", w = class w extends h.Component {
+  constructor() {
+    super(...arguments), this.itemsNavRef = this.props.itemsNavRef || h.createRef(), this.onScroll = () => {
+      var t, o;
+      (o = (t = this.props).onScroll) == null || o.call(t);
+    }, this.isRtl = () => this.props.dir === "rtl", this.arrowClickPrev = (t) => {
+      this.handleArrowClick(f, t);
     }, this.arrowClickNext = (t) => {
-      this.handleArrowClick(b, t);
-    }, this.handleArrowClick = (t, r) => {
-      this.setNewScrollPosition(t, r);
-    }, this.setNewScrollPosition = (t, r) => {
-      const e = this.itemsNavRef.current;
-      if (!e)
+      this.handleArrowClick(m, t);
+    }, this.handleArrowClick = (t, o) => {
+      this.setNewScrollPosition(t, o);
+    }, this.setNewScrollPosition = (t, o) => {
+      const s = this.itemsNavRef.current;
+      if (!s)
         return;
-      const c = this.horizontalScroll(), n = c ? e.scrollWidth - e.offsetWidth : e.scrollHeight - e.offsetHeight, l = (r.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
-      let o = c ? e.scrollLeft : e.scrollTop, i = c ? e.scrollWidth - e.scrollLeft : e.scrollHeight - e.scrollTop, m = e.scrollWidth - e.scrollLeft * -1;
-      this.isRtl() && this.horizontalScroll() ? (t === d && o < 0 && (o += l, m += l), t === b && o < n && (o -= l, m -= l), o = Math.min(0, Math.min(n, o))) : (t === d && o > 0 && (o -= l, i += l), t === b && o < n && (o += l, i -= l), o = Math.max(0, Math.min(n, o)));
-      const h = o === 0, v = r.type === "click" ? u : void 0;
-      if (c) {
-        const S = this.isRtl() ? Math.round(m) <= e.clientWidth || Math.floor(m) <= e.clientWidth : Math.round(i) <= e.clientWidth || Math.floor(i) <= e.clientWidth;
-        this.setState({
-          disabledPrev: h,
-          disabledNext: S
-        }), e.scrollTo({ left: o, behavior: v });
-      } else
-        this.setState({
-          disabledPrev: h,
-          disabledNext: Math.round(i) <= e.clientHeight || Math.floor(i) <= e.clientHeight
-        }), e.scrollTo({ top: o, behavior: v });
-    }, this.renderArrow = (t, r) => {
-      const e = this.horizontalScroll(), c = y(this), n = {
+      const r = this.horizontalScroll(), l = r ? s.scrollWidth - s.offsetWidth : s.scrollHeight - s.offsetHeight, i = (o.type === "click" ? this.props.buttonScrollSpeed : this.props.mouseScrollSpeed) || 0;
+      let e = r ? s.scrollLeft : s.scrollTop;
+      this.isRtl() && this.horizontalScroll() ? (t === f && e < 0 && (e += i), t === m && e < l && (e -= i), e = Math.min(0, Math.min(l, e))) : (t === f && e > 0 && (e -= i), t === m && e < l && (e += i), e = Math.max(0, Math.min(l, e)));
+      const c = o.type === "click" ? b : void 0;
+      r ? s.scrollTo({ left: e, behavior: c }) : s.scrollTo({ top: e, behavior: c });
+    }, this.renderArrow = (t) => {
+      const o = this.horizontalScroll(), s = y(this), r = {
         prev: {
           arrowTab: "k-tabstrip-prev",
-          fontIcon: e ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
-          svgIcon: e ? this.isRtl() ? k : A : D,
-          title: c.toLanguageString(N, x[N])
+          fontIcon: o ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
+          svgIcon: o ? this.isRtl() ? k : I : D,
+          title: s.toLanguageString(A, P[A])
         },
         next: {
           arrowTab: "k-tabstrip-next",
-          fontIcon: e ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
-          svgIcon: e ? this.isRtl() ? A : k : H,
-          title: c.toLanguageString(C, x[C])
+          fontIcon: o ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
+          svgIcon: o ? this.isRtl() ? I : k : H,
+          title: s.toLanguageString(R, P[R])
         }
-      }, l = (t === d ? this.props.prevButton : this.props.nextButton) || z, o = t === d ? this.arrowClickPrev : this.arrowClickNext;
-      return /* @__PURE__ */ a.createElement(
+      }, l = (t === f ? this.props.prevButton : this.props.nextButton) || M, i = t === f ? this.arrowClickPrev : this.arrowClickNext, e = this.props.containerScrollPosition === null || t === f && (this.props.containerScrollPosition === "start" || this.props.containerScrollPosition === "top") || t === m && (this.props.containerScrollPosition === "end" || this.props.containerScrollPosition === "bottom");
+      return /* @__PURE__ */ h.createElement(
         l,
         {
-          disabled: r,
-          className: `${n[t].arrowTab}`,
-          onClick: o,
-          icon: n[t].fontIcon,
-          svgIcon: n[t].svgIcon,
-          onMouseDown: O,
+          disabled: e,
+          className: v(`${r[t].arrowTab}`),
+          onClick: i,
+          icon: r[t].fontIcon,
+          svgIcon: r[t].svgIcon,
+          size: this.props.size,
           tabIndex: -1,
           fillMode: "flat",
-          title: n[t].title
+          title: r[t].title
         }
       );
-    }, this.state = {
-      disabledPrev: this.props.selected === 0,
-      disabledNext: this.props.selected === a.Children.count(this.props.children) - 1
     };
   }
   /**
@@ -87,75 +73,77 @@ const B = (w) => Array.apply(null, Array(w)), O = (w) => w.preventDefault(), u =
   /**
    * @hidden
    */
-  componentDidUpdate(s) {
-    const { scrollable: t, selected: r } = this.props;
-    t && s.selected !== r && (this.scrollToSelected(), this.setState({
-      disabledPrev: r === 0,
-      disabledNext: r === a.Children.count(this.props.children) - 1
-    }));
+  componentDidUpdate(t) {
+    const { scrollable: o, selected: s } = this.props;
+    o && t.selected !== s && this.scrollToSelected();
   }
   /**
    * @hidden
    */
   render() {
     const {
-      selected: s,
-      tabPosition: t,
-      tabAlignment: r,
-      children: e,
-      onSelect: c,
-      onKeyDown: n,
-      navItemId: l,
-      contentPanelId: o,
-      renderAllContent: i,
-      scrollable: m,
-      scrollButtonsPosition: h
-    } = this.props, v = a.Children.count(e), S = a.Children.toArray(e);
-    let g;
-    e && (g = B(v).map((U, p, M) => {
-      const E = {
-        active: s === p,
-        disabled: S[p].props.disabled,
-        index: p,
-        title: S[p].props.title,
-        first: p === 0,
-        last: p === M.length - 1,
-        contentPanelId: o,
-        renderAllContent: i,
-        id: l,
-        onSelect: c
+      selected: t,
+      tabPosition: o,
+      tabAlignment: s,
+      children: r,
+      onSelect: l,
+      onKeyDown: i,
+      navItemId: e,
+      contentPanelId: c,
+      renderAllContent: a,
+      scrollable: L,
+      scrollButtons: u,
+      scrollButtonsPosition: p
+    } = this.props, E = h.Children.count(r), g = h.Children.toArray(r);
+    let S;
+    r && (S = W(E).map((U, d, B) => {
+      const O = {
+        active: t === d,
+        disabled: g[d].props.disabled,
+        index: d,
+        title: g[d].props.title,
+        first: d === 0,
+        last: d === B.length - 1,
+        contentPanelId: c,
+        renderAllContent: a,
+        id: e,
+        onSelect: l,
+        onScroll: this.onScroll
       };
-      return /* @__PURE__ */ a.createElement(W, { key: p, ...E });
+      return /* @__PURE__ */ h.createElement(x, { key: d, ...O });
     }));
-    const L = I("k-tabstrip-items-wrapper", {
-      "k-hstack": t === "top" || t === "bottom",
-      "k-vstack": t === "left" || t === "right"
-    }), P = I("k-tabstrip-items", "k-reset", `k-tabstrip-items-${r}`);
-    return /* @__PURE__ */ a.createElement("div", { className: L }, m ? /* @__PURE__ */ a.createElement(a.Fragment, null, (h === "around" || h === "before") && this.renderArrow(d, this.state.disabledPrev), h === "before" && this.renderArrow(b, this.state.disabledNext), /* @__PURE__ */ a.createElement(
+    const N = v("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
+      "k-hstack": o === "top" || o === "bottom",
+      "k-vstack": o === "left" || o === "right"
+    }), T = v(
+      "k-tabstrip-items k-tabstrip-items-scroll k-reset",
+      `k-tabstrip-items-${s}`
+    );
+    return /* @__PURE__ */ h.createElement("div", { className: N }, L ? /* @__PURE__ */ h.createElement(h.Fragment, null, u !== "hidden" && p && ["split", "start", "around", "before"].includes(p) && this.renderArrow(f), u !== "hidden" && (p === "start" || p === "before") && this.renderArrow(m), /* @__PURE__ */ h.createElement(
       "ul",
       {
         ref: this.itemsNavRef,
-        className: P,
+        className: T,
         role: "tablist",
         tabIndex: this.props.tabIndex,
-        onKeyDown: n,
-        onWheel: this.onWheel,
-        "aria-orientation": t === "left" || t === "right" ? "vertical" : void 0
+        onKeyDown: i,
+        onScroll: this.onScroll,
+        "aria-orientation": o === "left" || o === "right" ? "vertical" : void 0
       },
-      g
-    ), h === "after" && this.renderArrow(d, this.state.disabledPrev), (h === "around" || h === "after") && this.renderArrow(b, this.state.disabledNext)) : /* @__PURE__ */ a.createElement("ul", { className: P, role: "tablist", tabIndex: this.props.tabIndex, onKeyDown: n }, g));
+      S
+    ), u !== "hidden" && (p === "end" || p === "after") && this.renderArrow(f), u !== "hidden" && p && ["split", "end", "around", "after"].includes(p) && this.renderArrow(m)) : /* @__PURE__ */ h.createElement("ul", { className: T, role: "tablist", tabIndex: this.props.tabIndex, onKeyDown: i }, S));
   }
   scrollToSelected() {
-    const s = this.itemsNavRef.current, t = s && s.children[this.props.selected || 0];
-    if (t instanceof HTMLElement && s instanceof HTMLElement) {
-      const r = this.horizontalScroll(), e = r ? s.offsetWidth : s.offsetHeight, c = r ? t.offsetWidth : t.offsetHeight, n = r ? "left" : "top";
-      let l = r ? s.scrollLeft : s.scrollTop, o = 0;
+    const t = this.itemsNavRef.current, o = t && t.children[this.props.selected || 0];
+    if (o instanceof HTMLElement && t instanceof HTMLElement) {
+      const s = this.horizontalScroll(), r = s ? t.offsetWidth : t.offsetHeight, l = s ? o.offsetWidth : o.offsetHeight, i = s ? "left" : "top";
+      let e = s ? t.scrollLeft : t.scrollTop, c = 0;
       if (this.isRtl()) {
-        const i = t.offsetLeft;
-        l = l * -1, i < 0 ? (o = i - c + s.offsetLeft, s.scrollTo({ [n]: o, behavior: u })) : i + c > e - l && (o = l + i - c, s.scrollTo({ [n]: o, behavior: u }));
+        const a = o.offsetLeft;
+        e = e * -1, a < 0 ? (c = a - l + t.offsetLeft, t.scrollTo({ [i]: c, behavior: b })) : a + l > r - e && (c = e + a - l, t.scrollTo({ [i]: c, behavior: b }));
       } else {
-        const i = r ? t.offsetLeft - s.offsetLeft : t.offsetTop - s.offsetTop;
-        l + e < i + c ? (o = i + c - e, s.scrollTo({ [n]: o, behavior: u })) : l > i && (o = i, s.scrollTo({ [n]: o, behavior: u }));
+        const a = s ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
+        e + r < a + l ? (c = a + l - r, t.scrollTo({ [i]: c, behavior: b })) : e > a && (c = a, t.scrollTo({ [i]: c, behavior: b }));
       }
     }
   }
@@ -163,14 +151,20 @@ const B = (w) => Array.apply(null, Array(w)), O = (w) => w.preventDefault(), u =
     return /top|bottom/.test(this.props.tabPosition || "top");
   }
 };
-T.propTypes = {
-  children: f.oneOfType([f.element, f.arrayOf(f.element)]),
-  onSelect: f.func,
-  onKeyDown: f.func,
-  selected: f.number,
-  tabIndex: f.number
+w.propTypes = {
+  children: n.oneOfType([n.element, n.arrayOf(n.element)]),
+  onSelect: n.func,
+  onKeyDown: n.func,
+  onScroll: n.func,
+  selected: n.number,
+  tabIndex: n.number,
+  scrollable: n.bool,
+  size: n.oneOf(["small", "medium", "large"]),
+  scrollButtons: n.oneOf(["auto", "visible", "hidden"]),
+  scrollButtonsPosition: n.oneOf(["split", "start", "end", "around", "before", "after"]),
+  containerScrollPosition: n.oneOf(["start", "end", "top", "bottom", "middle", null])
 };
-let R = T;
+let C = w;
 export {
-  R as TabStripNavigation
+  C as TabStripNavigation
 };